@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/public_onboarding/Inter-Latin-1f021a24.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/public_onboarding/JetBrainsMono-Latin-8a992d39.woff2") format("woff2");
}

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/public_onboarding/SpaceGrotesk-Latin-3b2bde23.woff2") format("woff2");
}

.public-onboarding {
  --po-bg: #070808;
  --po-surface: #0f1010;
  --po-surface-2: #151717;
  --po-surface-3: #1d1f1e;
  --po-fg: #f5f5f4;
  --po-muted: #989894;
  --po-subtle: #61615f;
  --po-border: #242426;
  --po-border-strong: #363638;
  --po-lime: #c9f53c;
  --po-lime-fg: #0a0a08;
  --po-accent: var(--po-lime);
  --po-accent-fg: var(--po-lime-fg);
  --po-cut: #2fb9ff;
  --po-voice: #ae7eff;
  --po-cover: #ffb85c;
  --po-risk: #ff5c70;
  --po-display: "Space Grotesk", system-ui, sans-serif;
  --po-body: "Inter", system-ui, sans-serif;
  --po-mono: "JetBrains Mono", monospace;
  background:
    linear-gradient(90deg, rgb(47 185 255 / 3.5%) 1px, transparent 1px),
    linear-gradient(180deg, rgb(201 245 60 / 2.5%) 1px, transparent 1px),
    var(--po-bg);
  background-size: 72px 72px;
  color: var(--po-fg);
  font-family: var(--po-body);
  font-size: 14px;
  line-height: 1.45;
  margin: 0;
  min-height: 100dvh;
  overflow: auto;
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
}

.public-onboarding *,
.public-onboarding *::before,
.public-onboarding *::after { box-sizing: border-box; }

:where(.public-onboarding) :where(button, input) { font: inherit; }

.public-onboarding button,
.public-onboarding a,
.public-onboarding input { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

.public-onboarding button:focus-visible,
.public-onboarding a:focus-visible,
.public-onboarding input:focus-visible,
.public-onboarding [tabindex]:focus-visible {
  outline: 2px solid var(--po-lime);
  outline-offset: 3px;
}

.po-sr-only {
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.po-skip-link { align-items: center; background: var(--po-lime); color: var(--po-lime-fg); display: flex; left: 12px; min-height: 44px; padding: 10px 14px; position: fixed; top: 10px; transform: translateY(-160%); z-index: 100; }
.po-skip-link:focus { transform: translateY(0); }

.po-app {
  background: var(--po-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  height: 100dvh;
  margin: 0;
  max-width: none;
  overflow: hidden;
  position: relative;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  width: 100%;
}

.po-screen,
.po-screen-form {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
}

.po-screen { height: 100%; }
.po-screen[data-screen-root]:not(.po-screen--s28) {
  background:
    linear-gradient(90deg, rgb(47 185 255 / 5.5%) 0 1px, transparent 1px),
    linear-gradient(180deg, rgb(255 255 255 / 2.5%), transparent 120px),
    var(--po-surface);
  background-size: 38px 100%, 100% 100%;
  line-height: normal;
}
.po-screen-form { flex: 1; height: auto; }

.po-content {
  flex: 1;
  margin-inline: auto;
  max-width: 720px;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 20px 22px 14px;
  scrollbar-color: var(--po-border-strong) transparent;
  scrollbar-width: thin;
  width: 100%;
}

:where(.po-screen:not(:has(.po-rail))) .po-content {
  padding-top: calc(28px + env(safe-area-inset-top));
}

.po-content::-webkit-scrollbar { width: 4px; }
.po-content::-webkit-scrollbar-thumb { background: var(--po-border-strong); border-radius: 99px; }

.po-header { margin-bottom: 0; }

.po-eyebrow {
  color: var(--po-lime);
  font-family: var(--po-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: normal;
  margin: 0;
  text-transform: uppercase;
}

.po-title {
  color: var(--po-fg);
  font-family: var(--po-display);
  font-size: 23px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 8px 0 0;
  text-wrap: balance;
}

.public-onboarding .po-title:focus-visible { box-shadow: none; outline: none; }
.public-onboarding .po-content:focus-visible { outline: 1px solid var(--po-lime); outline-offset: -2px; }

.po-copy {
  color: var(--po-muted);
  font-size: 13px;
  line-height: 1.48;
  margin: 8px 0 0;
}

.po-rail {
  background: linear-gradient(180deg, var(--po-surface), rgb(15 16 16 / 94%));
  flex: 0 0 auto;
  margin-inline: auto;
  max-width: 720px;
  padding: calc(18px + env(safe-area-inset-top)) 22px 10px;
  width: 100%;
}

.po-rail__meta {
  color: var(--po-lime);
  display: flex;
  font-family: var(--po-mono);
  font-size: 9px;
  justify-content: space-between;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.po-rail__track {
  background: var(--po-surface-3);
  border-radius: 999px;
  height: 4px;
  margin-top: 8px;
  overflow: hidden;
}

.po-rail__fill {
  position: relative;
  background: linear-gradient(90deg, var(--po-lime), var(--po-cut));
  display: block;
  height: 100%;
  overflow: hidden;
  transition: width 680ms cubic-bezier(.22,.8,.24,1);
  width: var(--po-progress);
}

.po-rail[data-generation-state="loading"] .po-rail__fill::after,
.po-rail[data-generation-state="recovering"] .po-rail__fill::after {
  position: absolute;
  inset: 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 55%), transparent);
  content: "";
  animation: po-rail-shimmer 1.8s ease-in-out infinite;
  transform: translateX(-130%);
}

@keyframes po-rail-shimmer { 65%, 100% { transform: translateX(330%); } }

.po-rail__label {
  color: var(--po-fg);
  font: 700 11px var(--po-display);
  margin: 5px 0 0;
}

.po-rail__stage {
  color: var(--po-fg);
  font: 700 11px var(--po-display);
  margin: 5px 0 0;
}

.po-rail__note {
  color: var(--po-subtle);
  font: 600 9px var(--po-mono);
  margin: 6px 0 0;
}

.po-cta-bar {
  background: linear-gradient(180deg, rgb(15 16 16 / 0%), var(--po-surface) 25%);
  flex: 0 0 auto;
  margin-inline: auto;
  max-width: 720px;
  padding: 15px 22px calc(22px + env(safe-area-inset-bottom));
  width: 100%;
}

.po-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  gap: 6px;
  font-family: var(--po-display);
  font-size: 14px;
  font-weight: 800;
  justify-content: center;
  min-height: 48px;
  padding: 13px 14px;
  transition: transform 140ms ease, opacity 140ms ease, box-shadow 140ms ease;
  width: 100%;
}

.po-button--primary { background: var(--po-lime); color: var(--po-lime-fg); }
.po-button--secondary { background: var(--po-surface-2); border-color: var(--po-border-strong); color: var(--po-fg); }
.po-button:hover:not(:disabled) { box-shadow: 0 10px 30px rgb(201 245 60 / 14%); transform: translateY(-1px); }
.po-button:active:not(:disabled) { transform: translateY(0); }
.po-button:disabled,
.po-button[aria-disabled="true"] { cursor: not-allowed; opacity: 0.48; }

.po-choice-card {
  background: var(--po-surface-2);
  border: 1px solid var(--po-border);
  border-radius: 16px;
  color: var(--po-fg);
  cursor: pointer;
  display: block;
  height: 66px;
  min-height: 66px;
  padding: 0;
  position: relative;
}

.po-choice-card__select {
  align-items: center;
  cursor: inherit;
  display: grid;
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr) 26px;
  height: 100%;
  min-width: 0;
  padding: 10px 12px;
  width: 100%;
}

.po-choice-card:hover { border-color: var(--po-border-strong); }
.po-choice-card.is-selected { background: linear-gradient(135deg, rgb(201 245 60 / 11%), rgb(47 185 255 / 3.5%)); border-color: rgb(201 245 60 / 58%); }
.po-choice-card.is-locked { cursor: default; opacity: 0.82; }
.po-choice-card__input { inset: 0; opacity: 0; position: absolute; }
.po-choice-card:has(.po-choice-card__input:focus-visible) { outline: 2px solid var(--po-lime); outline-offset: 3px; }

.po-choice-card__icon {
  align-items: center;
  background: var(--po-surface-3);
  border: 1px solid var(--po-border-strong);
  border-radius: 11px;
  color: var(--po-muted);
  display: flex;
  flex: 0 0 36px;
  font: 800 9px var(--po-mono);
  height: 36px;
  justify-content: center;
  width: 36px;
}
.po-choice-card.is-selected .po-choice-card__icon { background: var(--po-lime); border-color: var(--po-lime); color: var(--po-lime-fg); }
.po-choice-card__icon svg { display: block; height: 20px; width: 20px; }
.po-choice-card__icon svg + svg { margin-left: -7px; }
.po-choice-card__wave { align-items: center; display: flex; gap: 2px; height: 20px; }
.po-choice-card__wave i { background: currentcolor; border-radius: 2px; display: block; height: 8px; width: 2px; }
.po-choice-card__wave i:nth-child(2), .po-choice-card__wave i:nth-child(4) { height: 15px; }
.po-choice-card__wave i:nth-child(3) { height: 20px; }
.po-voice-preview { align-items: center; background: var(--po-surface-3); border: 1px solid var(--po-border-strong); border-radius: 999px; color: var(--po-fg); display: flex; flex: 0 0 44px; height: 44px; justify-content: center; position: relative; z-index: 2; }
.po-voice-preview[aria-pressed="true"] { border-color: var(--po-lime); color: var(--po-lime); }

.po-choice-card__image { border-radius: 11px; flex: 0 0 54px; height: 54px; object-fit: cover; width: 54px; }
.po-choice-card__body { display: block; min-width: 0; }
.po-choice-card__title { display: block; font-family: var(--po-body); font-size: 12.5px; font-weight: 800; line-height: 1.2; }
.po-choice-card__description { color: var(--po-muted); display: -webkit-box; font-size: 10.5px; line-height: 1.3; margin-top: 3px; max-height: 28px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.po-choice-card__check { align-items: center; background: transparent; border: 2px solid var(--po-border-strong); border-radius: 50%; color: transparent; display: flex; font-weight: 900; height: 24px; justify-content: center; width: 24px; }
.po-choice-card.is-selected .po-choice-card__check { background: var(--po-lime); border-color: var(--po-lime); color: var(--po-lime-fg); }

.po-badge {
  background: var(--po-lime);
  border-radius: 999px;
  color: var(--po-lime-fg);
  font-family: var(--po-mono);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  text-transform: uppercase;
}

.po-custom-input { margin-top: 10px; }
.po-custom-input label { display: block; font-family: var(--po-display); font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.po-custom-input input {
  background: var(--po-surface);
  border: 1px solid var(--po-border-strong);
  border-radius: 14px;
  color: var(--po-fg);
  min-height: 48px;
  padding: 11px 13px;
  width: 100%;
}
.po-input-limit { color: var(--po-subtle); display: block; font-size: 9px; margin-top: 5px; text-align: right; }

.po-error-summary,
.po-state-card,
.po-preview-state {
  background: rgb(255 92 112 / 8%);
  border: 1px solid rgb(255 92 112 / 28%);
  border-radius: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
}
.po-error-summary strong,
.po-error-summary span,
.po-preview-state strong,
.po-preview-state span { display: block; }
.po-error-summary span,
.po-preview-state span { color: var(--po-muted); font-size: 11px; margin-top: 3px; }

.po-summary-grid,
.po-metric-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.po-summary-row,
.po-metric { background: var(--po-surface); border: 1px solid var(--po-border); border-radius: 14px; padding: 12px; }
.po-summary-row--wide { grid-column: 1 / -1; }
.po-summary-row dt,
.po-metric dt { color: var(--po-subtle); font-family: var(--po-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.po-summary-row dd,
.po-metric dd { font-family: var(--po-display); font-size: 12px; font-weight: 700; margin: 5px 0 0; }

.po-goal-lock { background: rgb(201 245 60 / 7%); border: 1px solid rgb(201 245 60 / 26%); border-radius: 16px; display: grid; gap: 3px; padding: 13px 14px; }
.po-goal-lock__label { color: var(--po-lime); font-family: var(--po-mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
.po-goal-lock strong { font-family: var(--po-display); }
.po-goal-lock span:last-child { color: var(--po-muted); font-size: 11px; }

.po-launch-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 14px;
  margin: -7px 0 12px;
  padding: 9px 0;
  border-block: 1px solid var(--po-border);
  color: var(--po-muted);
  font-size: 8.5px;
  line-height: 1.3;
}

.po-launch-context span { min-width: 0; overflow-wrap: anywhere; }
.po-launch-context b {
  display: block;
  margin-bottom: 2px;
  color: var(--po-subtle);
  font-family: var(--po-mono);
  font-size: 6.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.po-launch-context span:nth-child(5) { grid-column: 1 / -1; }

.po-video-preview { margin: 0; }
.po-video-preview video { aspect-ratio: 9 / 16; background: #000; border-radius: 20px; display: block; max-height: 320px; object-fit: cover; width: 100%; }
.po-video-preview figcaption { color: var(--po-subtle); font-size: 9px; margin-top: 6px; text-align: center; }
.po-video-preview__placeholder { align-items: center; aspect-ratio: 9 / 13; background: var(--po-surface); border: 1px solid var(--po-border); border-radius: 20px; display: flex; justify-content: center; padding: 18px; }

.po-protected-preview {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #000;
}

.po-protected-preview video { height: 100%; max-height: none; }

.po-protected-preview__toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 50%;
  background: rgb(5 6 6 / 72%);
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}

.po-protected-preview__toggle[aria-pressed="true"] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.po-protected-preview video { cursor: pointer; }

.po-protected-preview__progress {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 8px;
  left: 14px;
  height: 3px;
  overflow: hidden;
  border-radius: 99px;
  background: rgb(255 255 255 / 24%);
}

.po-protected-preview__progress::after {
  content: "";
  display: block;
  width: var(--po-preview-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--po-lime, #c9f53c);
}
.po-preview-state { background: var(--po-surface-2); border-color: var(--po-border-strong); margin: 0; text-align: center; width: 100%; }
.po-spinner { animation: po-spin 900ms linear infinite; border: 2px solid var(--po-border-strong); border-radius: 50%; border-top-color: var(--po-lime); height: 24px; margin: 0 auto 10px; width: 24px; }

@keyframes po-spin { to { transform: rotate(360deg); } }

@media (max-width: 353px) {
  .po-content { padding-left: 18px; padding-right: 18px; }
  .po-cta-bar { padding-left: 18px; padding-right: 18px; }
  .po-rail { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .public-onboarding *,
  .public-onboarding *::before,
  .public-onboarding *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .po-rail__fill { transition: none; }
}