@font-face {
  font-family: "Manrope";
  src: url("/static/fonts/Manrope-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --atlas-brand: #7036f0;
  --atlas-brand-hover: #5e25d8;
  --atlas-brand-soft: #f1ebff;
  --atlas-brand-ring: rgba(112, 54, 240, .22);
  --atlas-progress: #7658d4;
}

html,
body,
button,
input,
select,
textarea,
dialog {
  font-family: "Manrope", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
}

h1,
h2,
h3,
h4,
.auth-state h1,
.empty-state h1,
.workspace-heading h1,
.rail-heading h2,
.hero-copy h1,
.section-copy h2,
.review-heading h3,
.full-preview-title,
.atlas-tour-title,
.atlas-tour-help-title {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
}

::selection {
  color: #fff;
  background: var(--atlas-brand);
}

:focus-visible {
  outline-color: var(--atlas-brand);
}

.atlas-cloud-logo {
  display: block;
  width: 126px;
  height: auto;
  flex: 0 0 auto;
}

.public-brand-lockup {
  text-decoration: none;
}

.public-brand-logo {
  width: 112px;
}

.public-brand-rule,
.wordmark-rule {
  width: 1px;
  height: 18px;
  flex: 0 0 auto;
  background: rgba(25, 19, 39, .18);
}

.public-brand-product,
.wordmark-product {
  color: #211b2d;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.02em;
  white-space: nowrap;
}

.lobby-mode.primary-mode {
  border-color: #cec6d5;
  background: rgba(255, 255, 255, .58);
  box-shadow: 0 12px 30px rgba(33, 27, 41, .055);
}

.lobby-mode-flow,
.lobby-open,
.lobby-actions button:not(.primary) {
  color: var(--atlas-brand);
}

.lobby-actions button:not(.primary) {
  border-color: rgba(112, 54, 240, .34);
}

.lobby-secondary-action {
  border-color: rgba(59, 50, 69, .48);
  background: #fffdf9;
  color: #3b3245;
  box-shadow: 0 0 0 3px rgba(59, 50, 69, .055);
}

.lobby-secondary-action:hover:not(:disabled),
.lobby-secondary-action:focus-visible {
  border-color: #3b3245;
  background: #3b3245;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(112, 54, 240, .14);
}

.wordmark {
  gap: 12px;
}

.wordmark .atlas-cloud-logo {
  width: 116px;
}

.powered-mark {
  overflow: hidden;
  background: transparent;
}

.powered-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

button.primary,
.button.primary,
.project-filters button.active,
.atlas-key-actions .primary,
.atlas-tour-next,
.atlas-tour-help-action-primary {
  border-color: var(--atlas-brand);
  background: var(--atlas-brand);
  color: #fff;
}

button.primary:hover:not(:disabled),
.button.primary:hover:not(:disabled),
.atlas-key-actions .primary:hover:not(:disabled),
.atlas-tour-next:hover,
.atlas-tour-next:focus-visible,
.atlas-tour-help-action-primary:hover:not(:disabled),
.atlas-tour-help-action-primary:focus-visible {
  border-color: var(--atlas-brand-hover);
  background: var(--atlas-brand-hover);
  color: #fff;
}

button.primary:disabled,
.button.primary:disabled {
  border-color: #d6d0da;
  background: #e5e1e7;
  color: #8c8492;
  opacity: 1;
}

button.recipe-create-action {
  border-color: rgba(59, 50, 69, .48);
  background: #fffdf9;
  color: #3b3245;
  box-shadow: 0 0 0 3px rgba(59, 50, 69, .055);
  font-weight: 700;
}

button.recipe-create-action:hover:not(:disabled),
button.recipe-create-action:active {
  border-color: #2b2532;
  background: #2b2532;
  color: #fff;
}

button.recipe-create-action:focus-visible {
  border-color: #2b2532;
  background: #2b2532;
  box-shadow: 0 0 0 3px var(--atlas-brand-ring);
}

.generation-queue-banner::before {
  background: linear-gradient(90deg, var(--atlas-progress), #a89bc3);
}

.campaign-progress .done,
.setup-scene-progress-track .done,
.quick-reel-progress span {
  background: var(--atlas-progress);
}

.setup-journey-step.active {
  box-shadow: inset 0 -3px 0 var(--atlas-progress);
}

button.overview-action,
#btnBack.overview-back {
  border-color: #bcb4c2;
  background: #fffdf9;
  color: #3b3245;
  font-weight: 650;
}

button.overview-action:hover:not(:disabled),
#btnBack.overview-back:hover:not(:disabled) {
  border-color: #817587;
  background: #f4f1f7;
  color: #2b2532;
}

#btnBack.flow-back {
  padding-right: 8px;
  padding-left: 4px;
  border-color: transparent;
  background: transparent;
  color: #5e5366;
  box-shadow: none;
}

#btnBack.flow-back:hover:not(:disabled) {
  border-color: transparent;
  background: transparent;
  color: #2b2532;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#btnBack.flow-back:focus-visible,
#btnBack.overview-back:focus-visible,
button.overview-action:focus-visible {
  box-shadow: 0 0 0 3px var(--atlas-brand-ring);
}

button.candidate-generate-button,
button.candidate-generate-button:hover:not(:disabled) {
  border-color: #3b3245;
  background: #3b3245;
  color: #fff;
}

button.candidate-generate-button:hover:not(:disabled) {
  border-color: #2b2532;
  background: #2b2532;
}

.public-signin,
.generation-link:hover,
.lobby-open,
.auth-support {
  color: var(--atlas-brand);
}

.public-signin {
  border-color: rgba(112, 54, 240, .42);
}

.public-signin:hover {
  border-color: var(--atlas-brand);
  background: var(--atlas-brand);
  color: #fff;
}

input:focus,
textarea:focus,
select:focus,
.new-project input:focus,
.rejection-control textarea:focus,
.rename-dialog input:focus {
  border-color: var(--atlas-brand);
  box-shadow: 0 0 0 3px var(--atlas-brand-ring);
}

.atlas-tour-root {
  --atlas-tour-focus-border: var(--atlas-brand);
  --atlas-tour-focus-glow: var(--atlas-brand-ring);
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

.atlas-tour-help-button {
  border-color: rgba(112, 54, 240, .34);
  color: var(--atlas-brand);
}

.atlas-tour-help-button::before {
  background: var(--atlas-brand);
}

.atlas-tour-help-button:hover,
.atlas-tour-help-button:focus-visible,
.atlas-tour-help-button[aria-expanded="true"] {
  border-color: var(--atlas-brand);
  color: var(--atlas-brand);
}

@media (max-width: 640px) {
  .public-brand-logo,
  .wordmark .atlas-cloud-logo {
    width: 96px;
  }

  .public-brand-product,
  .wordmark-product {
    font-size: 12px;
  }
}