/* Palette matches the rest of the site's consolidated minimal theme
   (app.css / home.css): same neutrals, same one brand-pink accent in both
   modes. Dark-by-default and the .theme-light toggle are unchanged from
   the original — onboarding keeps its own self-contained toggle
   (onboarding-theme.js, independent of theme.js, which this page never
   loads) rather than reading the OS prefers-color-scheme the rest of the
   site uses. */
html:has(body.onboarding-page) { background: #17191b; }
html.theme-light:has(body.onboarding-page) { background: #ffffff; }
html:has(body.onboarding-page)::before { display: none !important; }
html body.onboarding-page.mitch-design {
  --ob-bg: #17191b; --ob-panel: #222527; --ob-soft: #2b2f31; --ob-ink: #f4f5f1;
  --ob-muted: #a6adaf; --ob-line: #363a3c; --ob-accent: #c4df9b; --ob-accent-ink: #233019;
  margin: 0; padding: 0; display: block; background: var(--ob-bg); color: var(--ob-ink);
  font-family: 'DM Sans', system-ui, sans-serif; line-height: 1.6; overflow-x: clip;
}
html.theme-light body.onboarding-page.mitch-design { --ob-bg: #ffffff; --ob-panel: #faf9fb; --ob-soft: #f1f0f3; --ob-ink: #233019; --ob-muted: #657062; --ob-line: #dce2d8; --ob-accent: #426333; --ob-accent-ink: #ffffff; }
html:not(.theme-light) body.onboarding-page.mitch-design { --ob-bg: #17191b; --ob-panel: #222527; --ob-soft: #2b2f31; --ob-ink: #f4f5f1; --ob-muted: #a6adaf; --ob-line: #363a3c; --ob-accent: #c4df9b; --ob-accent-ink: #233019; }
.onboarding-page *, .onboarding-page *::before, .onboarding-page *::after { box-sizing: border-box; }
html body.onboarding-page::before, html body.onboarding-page::after { display: none; }
.onboarding-page [hidden] { display: none !important; }
.onboarding-page a { color: inherit; text-decoration: none; }
.onboarding-page img, .onboarding-page video { max-width: 100%; }
.onboarding-page button, .onboarding-page input, .onboarding-page select, .onboarding-page textarea { font: inherit; }
.onboarding-page :focus-visible { outline: 2px solid var(--ob-accent); outline-offset: 5px; }
.onboarding-page ::selection { background: var(--ob-accent); color: var(--ob-accent-ink); }
.ob-width { width: min(1180px, calc(100% - 80px)); margin-inline: auto; }
.ob-skip { position: fixed; top: -100px; left: 16px; padding: 12px; background: var(--ob-accent); color: var(--ob-accent-ink) !important; z-index: 100; }
.ob-skip:focus { top: 16px; }
.ob-nav { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--ob-line); }
.ob-brand { display: inline-flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-size: 24px; font-weight: 700; letter-spacing: -1.3px; white-space: nowrap; }
.ob-brand img { border-radius: 7px; width: 32px; height: 32px; }.ob-brand-dot { color: var(--ob-accent); }
.ob-nav-links, .ob-nav-actions { display: flex; align-items: center; gap: 28px; font-size: 13px; font-weight: 500; }
.ob-nav-links { margin-left: auto; margin-right: 30px; color: var(--ob-muted); }.ob-nav a:hover, .ob-footer a:hover { color: var(--ob-accent); }
.onboarding-page .ob-button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; min-height: 56px; padding: 15px 24px; border: 1px solid transparent; border-radius: 7px; background: var(--ob-accent); color: var(--ob-accent-ink); font-size: 14px; font-weight: 700; transition: filter .2s, transform .2s; }
.onboarding-page .ob-button:hover { filter: brightness(1.12); color: var(--ob-accent-ink); transform: translateY(-2px); }.onboarding-page .ob-button-small { min-height: 42px; padding: 9px 15px; font-size: 12px; gap: 18px; }
.ob-eyebrow { display: flex; align-items: center; gap: 9px; font: 11px/1.5 ui-monospace, monospace; letter-spacing: 0; color: var(--ob-muted); }.ob-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ob-accent); }
.ob-hero { padding-block: 46px 40px; }.ob-hero h1 { font: 600 clamp(38px, 5.5vw, 72px)/1.12 'DM Sans', sans-serif; letter-spacing: -.04em; margin: 28px 0 40px; }.ob-hero h1 > span { color: var(--ob-accent); }
.ob-hero-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 50px; }.ob-hero-bottom p { margin: 0; color: var(--ob-muted); font-size: 17px; line-height: 1.65; }
.ob-hero-actions { display: grid; grid-template-columns: auto auto; gap: 14px 26px; align-items: center; }.ob-hero-actions small { grid-column: 1 / -1; color: var(--ob-muted); font-size: 11px; }
.ob-text-link { display: inline-flex; align-items: center; gap: 16px; font-size: 13px; font-weight: 600; }.ob-text-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.ob-section-line { display: flex; align-items: center; justify-content: space-between; margin: 0 0 18px; }.ob-section-line h2 { font-size: 16px; font-weight: 500; margin: 0; }.ob-section-line > span { font: 10px ui-monospace, monospace; letter-spacing: 0; color: var(--ob-muted); }
.ob-video-frame { border: 1px solid var(--ob-line); border-radius: 12px; overflow: hidden; background: #131319; }.ob-video-bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; color: #a9a6b2; border-bottom: 1px solid #333237; font: 10px ui-monospace, monospace; gap: 15px; }
.ob-video-lights { display: flex; gap: 6px; }.ob-video-lights i { width: 7px; height: 7px; border-radius: 50%; background: #829783; }.ob-video-lights i:first-child { background: #bf888b; }.ob-video-lights i:nth-child(2) { background: #c4ad77; }.ob-video-tag { font-size: 9px; letter-spacing: 0; }
.ob-video-frame video { display: block; width: 100%; aspect-ratio: 105/53; background: #0a0a0c; }.ob-tour-caption { display: flex; justify-content: space-between; gap: 40px; align-items: center; padding-top: 20px; }.ob-tour-caption p { max-width: 670px; color: var(--ob-muted); font-size: 12px; margin: 0; }.ob-tour-caption a { white-space: nowrap; font-size: 11px; }
.ob-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }.onboarding-page .ob-chapters button { display: inline-flex; gap: 9px; align-items: center; min-height: 36px; background: transparent; border: 1px solid var(--ob-line); border-radius: 5px; padding: 8px 11px; color: var(--ob-ink); cursor: pointer; font-size: 11px; box-shadow: none; }.onboarding-page .ob-chapters button:hover { border-color: var(--ob-accent); }.ob-chapters button span { color: var(--ob-muted); font: 10px ui-monospace, monospace; }.ob-video-status { min-height: 20px; color: var(--ob-muted); font-size: 12px; }
.ob-explore { padding-top: 100px; }.ob-section-intro { display: grid; grid-template-columns: 1fr 1fr; align-items: end; margin-bottom: 44px; gap: 20px; }.ob-section-intro .ob-eyebrow { grid-column: 1 / -1; }
.ob-section-intro h2, .ob-community h2, .ob-faq h2, .ob-final h2 { font: 500 clamp(36px, 4.8vw, 62px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.055em; margin: 0; }.ob-section-intro p { color: var(--ob-muted); margin: 0 0 5px; font-size: 15px; justify-self: end; }
.ob-feature-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ob-line); border-left: 1px solid var(--ob-line); }.ob-feature { display: flex; flex-direction: column; padding: 36px; border-right: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); }
.ob-feature-top { display: flex; justify-content: space-between; align-items: center; font: 10px ui-monospace, monospace; color: var(--ob-muted); letter-spacing: 0; }.ob-free { display: inline-block; color: var(--ob-accent); background: var(--ob-panel); padding: 5px 9px; border-radius: 4px; }
.ob-feature h3 { font: 500 clamp(26px, 3vw, 38px)/1.12 'Space Grotesk', sans-serif; letter-spacing: -.045em; margin: 0 0 18px; }.ob-feature > p { color: var(--ob-muted); font-size: 14px; max-width: 44ch; margin: 0 0 25px; }.ob-feature > a { margin-top: auto; align-self: flex-start; }.ob-feature > small { margin-top: 13px; font-size: 11px; max-width: 42ch; color: var(--ob-muted); }
.ob-terminal { border: 1px solid var(--ob-line); border-radius: 7px; background: var(--ob-soft); height: 170px; padding: 17px 22px; margin: 30px 0; font: 12px/1.8 ui-monospace, monospace; }.ob-terminal-title { font-size: 10px; color: var(--ob-muted); }.ob-terminal b, .ob-terminal-cursor { color: var(--ob-accent); }.ob-terminal-faint { color: var(--ob-muted); font-size: 10px; }
.ob-feature-symbol { height: 170px; margin: 30px 0; display: grid; place-items: center; font: 120px/1 'Space Grotesk', sans-serif; color: var(--ob-accent); }.ob-symbol-games { background: var(--ob-soft); border-radius: 7px; }.ob-symbol-tools { color: #abb99e; }
.ob-chat-art { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 170px; margin: 30px 0; padding: 15px 25px; }.ob-chat-art span { padding: 12px 22px; background: var(--ob-panel); border-radius: 18px 18px 18px 3px; font-size: 17px; }.ob-chat-art span + span { align-self: flex-end; margin-top: 12px; background: var(--ob-accent); color: var(--ob-accent-ink); border-radius: 18px 18px 3px 18px; }
.ob-community { margin-top: 100px; padding: 50px 0; border-top: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); }.ob-community h2 { margin: 25px 0; }.ob-community p { max-width: 63ch; color: var(--ob-muted); font-size: 14px; margin-bottom: 0; }.ob-community-links { display: flex; flex-wrap: wrap; gap: 10px; }.ob-community-links a { background: var(--ob-panel); border: 1px solid var(--ob-line); border-radius: 30px; padding: 10px 17px; font-size: 12px; }.ob-community-links a:hover { border-color: var(--ob-accent); }
.ob-faq { display: grid; grid-template-columns: 1fr 1.3fr; gap: 70px; padding-block: 100px; }.ob-faq h2 { margin: 23px 0; }.ob-faq-list details { padding: 24px 0; border-bottom: 1px solid var(--ob-line); }.ob-faq-list details:first-child { border-top: 1px solid var(--ob-line); }.ob-faq-list summary { display: flex; justify-content: space-between; gap: 20px; font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; }.ob-faq-list summary::-webkit-details-marker { display: none; }.ob-faq-list summary::after { content: '+'; color: var(--ob-accent); }.ob-faq-list details[open] summary::after { content: '−'; }.ob-faq-list p { color: var(--ob-muted); font-size: 13px; margin: 15px 0 0; }.ob-faq-list a { text-decoration: underline; }
.ob-final { border-top: 1px solid var(--ob-line); text-align: center; padding-block: 80px; }.ob-final .ob-eyebrow { justify-content: center; }.ob-final h2 { font-size: clamp(48px, 6vw, 80px); margin: 25px 0 32px; }.ob-final > .ob-text-link { display: flex; justify-content: center; margin-top: 20px; color: var(--ob-muted); font-size: 12px; }
.ob-footer { border-top: 1px solid var(--ob-line); min-height: 110px; display: flex; align-items: center; gap: 30px; flex-wrap: wrap; padding-block: 30px; }.ob-footer > span { font-size: 11px; color: var(--ob-muted); }.ob-footer nav { display: flex; flex-wrap: wrap; gap: 22px; margin-left: auto; font-size: 11px; color: var(--ob-muted); }
.ob-auth-layout { display: grid; grid-template-columns: 1fr 460px; gap: 90px; align-items: start; padding-block: 76px 100px; }.ob-auth-story { position: sticky; top: 40px; }.ob-auth-story h1 { font: 500 clamp(45px, 5vw, 68px)/1.03 'Space Grotesk', sans-serif; letter-spacing: -.04em; margin: 25px 0; }.ob-auth-story h1 span { color: var(--ob-accent); }.ob-auth-story > p { color: var(--ob-muted); max-width: 35ch; font-size: 15px; }
.ob-auth-benefits { margin-top: 32px; padding: 0; list-style: none; }.ob-auth-benefits li { padding: 15px 0; border-bottom: 1px solid var(--ob-line); display: flex; gap: 18px; font-size: 13px; }.ob-auth-benefits li > span { color: var(--ob-accent); font: 11px ui-monospace, monospace; padding-top: 3px; }.ob-auth-benefits b { display: block; font-weight: 500; }.ob-auth-benefits small { color: var(--ob-muted); font-size: 11px; }
.ob-auth-tour { display: block; margin-top: 28px; border: 1px solid var(--ob-line); border-radius: 8px; overflow: hidden; }.ob-auth-tour img { display: block; width: 100%; aspect-ratio: 105/53; object-fit: cover; }.ob-auth-tour > span { display: flex; justify-content: space-between; padding: 12px 16px; font-size: 11px; }.ob-auth-tour:hover { border-color: var(--ob-accent); }
.onboarding-page .auth-panel { width: 100%; padding: 32px; border: 1px solid var(--ob-line); border-radius: 12px; background: var(--ob-soft); box-shadow: none; animation: none; }.onboarding-page .auth-tabs { display: flex; gap: 20px; padding: 0 0 18px; margin: 0 0 28px; border-bottom: 1px solid var(--ob-line); background: none; }.onboarding-page .auth-tab-btn { min-height: 32px; padding: 0; color: var(--ob-muted); border: 0; background: transparent; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 0; box-shadow: none; }.onboarding-page .auth-tab-btn.active { color: var(--ob-ink); box-shadow: 0 19px 0 -17px var(--ob-accent); }
.onboarding-page .tab-pane { display: none; }.onboarding-page .tab-pane.active { display: block; animation: none; }.onboarding-page .panel-head { margin-bottom: 26px; }.onboarding-page .panel-head h2 { font: 500 27px/1.3 'Space Grotesk', sans-serif; letter-spacing: -.04em; margin: 0; }.onboarding-page .panel-head p { font-size: 12px; line-height: 1.65; margin: 8px 0 0; color: var(--ob-muted); }.onboarding-page .field-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .15px; color: var(--ob-ink); margin: 0 0 7px; }
.onboarding-page .auth-panel input:not([type="checkbox"]), .onboarding-page .auth-panel select, .onboarding-page .auth-panel textarea { width: 100%; max-width: 100%; height: 45px; padding: 11px 13px; border: 1px solid var(--ob-line); background: var(--ob-bg); border-radius: 6px; color: var(--ob-ink); font-size: 13px; margin-bottom: 20px; box-shadow: none; }.onboarding-page .auth-panel input::placeholder { color: var(--ob-muted); opacity: .65; }.onboarding-page .auth-panel textarea { height: 85px; resize: vertical; }.onboarding-page .auth-panel input:focus { border-color: var(--ob-accent); }
.onboarding-page .auth-panel .btn-primary { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 47px; padding: 12px 15px; border: 0; border-radius: 6px; background: var(--ob-accent); color: var(--ob-accent-ink); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: none; }.onboarding-page .auth-panel button:disabled { opacity: .45; cursor: not-allowed; }.onboarding-page .auth-panel .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }.onboarding-page .auth-panel #passkey-btn { border: 1px solid var(--ob-line); background: transparent; color: var(--ob-ink); font-weight: 500; }.onboarding-page .forgot-link { display: block; text-align: right; margin: -8px 0 24px; font-size: 11px; color: var(--ob-accent); }
.onboarding-page .optional-details { border-top: 1px solid var(--ob-line); border-bottom: 1px solid var(--ob-line); padding: 15px 0; margin-bottom: 22px; }.onboarding-page .optional-details summary { color: var(--ob-muted); font-size: 12px; cursor: pointer; }.onboarding-page .optional-details summary small { font-size: 10px; }.onboarding-page .optional-body { padding-top: 22px; }.onboarding-page .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.onboarding-page .agree-row { display: flex; gap: 11px; align-items: start; margin: 0 0 24px; }.onboarding-page .agree-row input { flex: 0 0 16px; width: 16px; height: 16px; accent-color: var(--ob-accent); margin-top: 3px; }.onboarding-page .agree-row label { font-size: 11px; color: var(--ob-muted); line-height: 1.7; }.onboarding-page .agree-row a { text-decoration: underline; text-underline-offset: 3px; }
.onboarding-page :is(#msg,#tmsg,#rtmsg,#login-msg) { min-height: 20px; font-size: 12px; line-height: 1.6; margin-top: 16px; overflow-wrap: anywhere; }.onboarding-page .ok { color: #8ebf9d; }.onboarding-page .err { color: #efa59a; }.onboarding-page .warning-alert { display: flex; gap: 10px; background: var(--ob-bg); border-left: 2px solid var(--ob-accent); padding: 12px; color: var(--ob-muted); font-size: 11px; margin-bottom: 20px; }.onboarding-page .warning-alert svg { flex-shrink: 0; }.onboarding-page .code-input { text-align: center; letter-spacing: .3em; font-family: ui-monospace, monospace !important; }
.onboarding-page #login-2fa-panel, .onboarding-page #no-email-form { margin-top: 24px; border-top: 1px solid var(--ob-line); padding-top: 20px; }.onboarding-page #no-email-form h3 { font-size: 15px; }.onboarding-page #no-email-form p { font-size: 12px; color: var(--ob-muted); }.onboarding-page #support-actions { margin-top: 20px; }.onboarding-page #resend-btn { border: 1px solid var(--ob-line); border-radius: 5px; background: transparent; color: var(--ob-ink); font-size: 12px; padding: 10px; cursor: pointer; }.onboarding-page #no-email-link { display: none; font-size: 11px; color: var(--ob-accent); }
.onboarding-page .pw-strength { display: none; margin: -10px 0 18px; }.onboarding-page .pw-strength-bars { display: flex; gap: 4px; height: 3px; background: var(--ob-line); }.onboarding-page .pw-strength-bars > div { flex: 1; }.onboarding-page .pw-strength-text { font-size: 10px; text-align: right; margin-top: 5px; }.onboarding-page .invite-banner { font-size: 12px; color: var(--ob-accent); border: 1px solid var(--ob-line); border-radius: 5px; padding: 12px; margin-bottom: 18px; }
.onboarding-page .dev-test-access { margin: 15px auto; width: min(1180px, calc(100% - 40px)); }.onboarding-page #dev-test-btn { border: 1px solid var(--ob-line); background: var(--ob-panel); color: var(--ob-ink); padding: 10px; border-radius: 5px; }.ob-form-note { color: var(--ob-muted); text-align: center; font-size: 10px; margin: 18px 0 0; }
.ob-password-wrap { position: relative; }.onboarding-page .ob-password-wrap input { padding-right: 64px !important; }.onboarding-page .ob-password-toggle { position: absolute; right: 10px; top: 10px; min-height: 25px; font-size: 10px; color: var(--ob-muted); background: none; border: 0; padding: 0 5px; cursor: pointer; }
.ob-auth-tour img { height: auto; }
.onboarding-page .ob-theme-toggle { width: 32px; height: 32px; border: 1px solid var(--ob-line); background: none; border-radius: 50%; color: var(--ob-muted); font-size: 18px; padding: 0; cursor: pointer; flex-shrink: 0; }
.ob-theme-toggle:hover { color: var(--ob-accent); }
.onboarding-page .auth-tab-btn { position: relative; }
.onboarding-page .auth-tab-btn.active { box-shadow: none; }
.auth-tab-btn.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -19px; height: 2px; background: var(--ob-accent); }
.ob-login, .ob-nav .ob-button-small { white-space: nowrap; }
@media(max-width: 760px) { .ob-nav-actions { gap: 10px; }.ob-nav .ob-button-small { padding-inline: 12px; gap: 12px; font-size: 11px; }.onboarding-page .ob-theme-toggle { width: 28px; height: 28px; }.ob-nav { gap: 12px; } }
.ob-help-head { padding: 70px 0 40px; }.ob-help-head h1 { font: 500 clamp(45px, 6vw, 76px)/1.1 'Space Grotesk', sans-serif; letter-spacing: -.06em; margin: 25px 0; }.ob-help-head p { max-width: 60ch; color: var(--ob-muted); }.ob-help-content { display: grid; grid-template-columns: 220px 1fr; gap: 70px; margin-bottom: 100px; }.ob-help-nav { position: sticky; top: 30px; align-self: start; display: flex; flex-direction: column; gap: 15px; font-size: 12px; color: var(--ob-muted); }.ob-help-group { margin-bottom: 50px; scroll-margin-top: 30px; }.ob-help-group h2 { font: 500 27px/1.3 'Space Grotesk', sans-serif; letter-spacing: -.03em; }.ob-help-content .ob-faq-list a { color: var(--ob-accent); }
@media(max-width: 1000px) { .ob-nav-links { margin-right: 0; gap: 18px; }.ob-auth-layout { display: flex; flex-direction: column; gap: 35px; padding-block: 45px 60px; }.ob-auth-story { position: static; width: 100%; }.ob-hero-actions { grid-template-columns: 1fr; }.ob-hero-actions small { grid-column: auto; }.ob-auth-story h1 { font-size: 52px; } }
@media(max-width: 760px) { .ob-width { width: calc(100% - 40px); }.ob-nav { min-height: 80px; gap: 16px; }.ob-nav-links { display: none; }.ob-nav-actions { gap: 16px; }.ob-brand { font-size: 20px; }.ob-nav .ob-brand img { width: 26px; height: 26px; }.ob-hero { padding: 50px 0 35px; }.ob-hero h1 { font-size: clamp(52px, 10.8vw, 80px); margin: 25px 0 30px; }.ob-hero-bottom { display: block; }.ob-hero-bottom p { font-size: 14px; }.ob-hero-actions { margin-top: 25px; display: flex; flex-wrap: wrap; gap: 18px; }.ob-hero-actions small { width: 100%; }.ob-video-bar { padding: 12px; font-size: 8px; }.ob-video-tag { display: none; }.ob-tour-caption { display: block; }.ob-tour-caption a { margin-top: 15px; }.ob-section-line > span { font-size: 8px; }.ob-section-intro { display: block; }.ob-section-intro h2 { margin: 20px 0; }.ob-section-intro p { font-size: 13px; }.ob-explore { padding-top: 60px; }.ob-feature-grid { grid-template-columns: 1fr; }.ob-feature { padding: 25px; }.ob-feature-symbol,.ob-chat-art,.ob-terminal { height: 140px; margin: 24px 0; }.ob-feature h3 { font-size: 31px; }.ob-community { margin-top: 60px; padding-block: 35px; }.ob-faq { display: block; padding-block: 60px; }.ob-faq-list { margin-top: 30px; }.ob-faq-list summary { font-size: 14px; }.ob-final { padding-block: 55px; }.ob-footer { gap: 15px; }.ob-footer > span { width: 100%; }.ob-footer nav { margin-left: 0; gap: 18px; }.ob-auth-layout { display: flex; flex-direction: column; gap: 35px; padding-block: 45px 60px; }.ob-auth-story { position: static; width: 100%; }.ob-auth-story h1 { font-size: 48px; }.ob-auth-benefits,.ob-auth-tour { display: none; }.ob-auth-story > p { max-width: 40ch; font-size: 13px; }.onboarding-page .auth-panel { padding: 25px; }.ob-help-content { display: block; }.ob-help-nav { position: static; flex-direction: row; flex-wrap: wrap; margin-bottom: 35px; gap: 12px 20px; } }
@media(max-width: 380px) { .ob-width { width: calc(100% - 28px); }.ob-nav .ob-brand img { display: none; }.ob-nav-actions { gap: 12px; }.ob-login { font-size: 11px; }.ob-nav .ob-button-small { padding-inline: 11px; gap: 12px; }.ob-eyebrow { font-size: 9px; letter-spacing: 1.1px; }.ob-hero h1 { font-size: 46px; }.ob-hero-actions { align-items: start; flex-direction: column; }.onboarding-page .auth-panel { padding: 20px; }.onboarding-page .auth-tabs { gap: 18px; }.onboarding-page .field-grid { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion: reduce) { .onboarding-page *, .onboarding-page *::before, .onboarding-page *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
.ob-student-hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px; padding-block: 65px 45px; }
.ob-student-hero h1 { font-size: clamp(52px, 6.7vw, 94px); margin-bottom: 26px; }
.ob-student-intro { color: var(--ob-muted); font-size: 17px; margin: 0 0 30px; }
.ob-student-hero .ob-hero-actions { justify-content: start; }
.ob-campus-orbit { position: relative; height: 400px; width: 100%; max-width: 470px; justify-self: end; isolation: isolate; }
.ob-orbit-ring { position: absolute; border: 1px dashed var(--ob-line); border-radius: 50%; inset: 30px 5px; transform: rotate(-18deg); }
.ob-ring-inner { inset: 73px 50px; border-style: solid; opacity: .5; transform: rotate(18deg); }
.ob-orbit-core { position: absolute; inset: 115px 75px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.ob-orbit-core > img { width: 78px; height: 78px; filter: drop-shadow(0 0 30px #b894ec36); animation: ob-logo-breathe 5s ease-in-out infinite; }
.ob-orbit-core > span { font: 700 30px 'Space Grotesk', sans-serif; letter-spacing: -1.5px; }.ob-orbit-core > span > span { color: var(--ob-accent); }.ob-orbit-core small { font: 8px ui-monospace, monospace; letter-spacing: 0; white-space: nowrap; color: var(--ob-muted); }
.ob-campus-sticker { position: absolute; width: 80px; height: 80px; display: grid; place-items: center; padding: 10px; border-radius: 20px; background: #fff; border: 1px solid #ffffff30; box-shadow: 0 15px 40px #0003; animation: ob-logo-float 6s ease-in-out infinite; }
.ob-campus-sticker img { width: 100%; height: 100%; object-fit: contain; }
.ob-sticker-1 { left: 12%; top: 8%; rotate: -12deg; }.ob-sticker-2 { right: 7%; top: 14%; rotate: 10deg; animation-delay: -1s; }.ob-sticker-3 { right: 0; top: 49%; rotate: -9deg; animation-delay: -2.5s; }.ob-sticker-4 { right: 19%; bottom: 3%; rotate: 12deg; animation-delay: -4s; }.ob-sticker-5 { left: 4%; bottom: 8%; rotate: -7deg; animation-delay: -1.8s; }.ob-sticker-6 { left: 0; top: 42%; rotate: 9deg; animation-delay: -3.2s; }
.ob-orbit-label { position: absolute; right: 0; bottom: 0; font: 8px ui-monospace, monospace; letter-spacing: 1.2px; color: var(--ob-muted); }
.ob-schools { padding: 26px 0 45px; scroll-margin-top: 25px; }.ob-schools-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; }.ob-schools h2 { font: 500 clamp(23px, 2.6vw, 33px)/1.25 'Space Grotesk', sans-serif; letter-spacing: -.04em; margin: 10px 0 0; }.ob-district-mark { flex-shrink: 0; background: #fff; border-radius: 50%; padding: 8px; width: 60px; height: 60px; }.ob-district-mark img { width: 100%; height: 100%; object-fit: contain; }
.ob-school-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }.ob-school-card { display: flex; align-items: center; gap: 14px; padding: 17px 15px; border: 1px solid var(--ob-line); border-radius: 9px; background: var(--ob-soft); font-size: 13px; font-weight: 600; transition: border-color .2s, transform .2s, background .2s; }.ob-school-card:hover { border-color: var(--ob-accent); background: var(--ob-panel); transform: translateY(-4px); }.ob-school-mark { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; background: #fff; border-radius: 12px; padding: 6px; }.ob-school-mark img { width: 100%; height: 100%; object-fit: contain; }.ob-school-card small { display: block; color: var(--ob-muted); font-size: 9px; font-weight: 400; margin-top: 3px; }.ob-school-arrow { margin-left: auto; color: var(--ob-muted); font-size: 12px; }
.ob-school-games { display: grid; grid-template-columns: 1.2fr 1fr; gap: 45px; align-items: center; border: 1px solid var(--ob-line); background: var(--ob-soft); border-radius: 16px; padding: 46px; margin-bottom: 65px; scroll-margin-top: 25px; }.ob-games-copy h2 { font: 500 clamp(34px,4.4vw,58px)/1.07 'Space Grotesk',sans-serif; letter-spacing: -.055em; margin: 22px 0; }.ob-games-copy h2 span { color: var(--ob-accent); }.ob-games-copy > p { font-size: 14px; max-width: 38ch; color: var(--ob-muted); margin-bottom: 24px; }.ob-school-tools { display: flex; margin-top: 18px; color: var(--ob-muted) !important; font-size: 11px; }
.ob-games-art { color: var(--ob-accent); border: 1px solid var(--ob-line); border-radius: 11px; padding: 20px; background: var(--ob-bg); position: relative; overflow: hidden; }.ob-arcade-label { display: flex; align-items: center; gap: 11px; font: 8px ui-monospace,monospace; letter-spacing: .8px; color: var(--ob-muted); }.ob-arcade-label img { border-radius: 8px; }.ob-arcade-label i { width: 6px; height: 6px; background: #d9f395; border-radius: 50%; margin-left: auto; box-shadow: 0 0 12px #d9f39580; }.ob-controller { width: 80%; margin: 23px auto 15px; animation: ob-controller-tilt 6s ease-in-out infinite; }.ob-controller svg { width: 100%; display: block; }.ob-game-tokens { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }.ob-game-tokens span { border: 1px solid var(--ob-line); border-radius: 20px; padding: 5px 9px; font: 8px ui-monospace,monospace; letter-spacing: .7px; color: var(--ob-muted); }.ob-game-campus-marks { display: flex; justify-content: center; gap: 9px; border-top: 1px solid var(--ob-line); padding-top: 19px; margin-top: 22px; }.ob-game-campus-marks img { width: 35px; height: 35px; background: #fff; border-radius: 8px; padding: 4px; object-fit: contain; }
.ob-student-hero + .ob-schools + .ob-school-games ~ .ob-explore { padding-top: 65px; }.ob-section-intro { margin-bottom: 30px; }.ob-section-intro h2 { font-size: clamp(30px,4vw,48px); }.ob-feature { padding: 28px; }.ob-feature h3 { font-size: 30px; }.ob-feature-symbol, .ob-chat-art, .ob-terminal { height: 90px; margin-block: 22px; }.ob-terminal { height: 110px; padding: 10px 17px; }.ob-terminal p { margin: 5px 0; }.ob-product-mark { display: flex; align-items: center; justify-content: flex-start; gap: 16px; background: transparent; padding: 0; }.ob-product-mark svg { width: 62px; height: 62px; }.ob-product-mark > img { object-fit: contain; border-radius: 13px; }.ob-chat-art .ob-matrix-wordmark { font: 500 23px ui-monospace,monospace; background: none; color: var(--ob-ink); padding: 0; border-radius: 0; }.ob-faq { scroll-margin-top: 25px; padding-block: 65px; }.ob-faq-list details { padding-block: 19px; }
.ob-auth-campus-marks { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; }.ob-auth-campus-marks img { width: 38px; height: 38px; object-fit: contain; background: #fff; border-radius: 8px; padding: 5px; }
.ob-motion-ready .ob-reveal { transition: opacity .6s ease, translate .6s ease, border-color .2s, background .2s, transform .2s; }.ob-motion-ready .ob-reveal.ob-reveal-pending { opacity: 0; translate: 0 18px; }
@keyframes ob-logo-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes ob-logo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes ob-controller-tilt { 0%,100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-5px); } }
@media (prefers-reduced-motion: no-preference) { html:has(body.onboarding-page) { scroll-behavior: smooth; }.ob-hero-copy { animation: ob-hero-enter .7s ease both; } }
@keyframes ob-hero-enter { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width: 1100px) { .ob-school-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.ob-campus-orbit { height: 360px; }.ob-campus-sticker { width: 66px; height: 66px; }.ob-orbit-core { inset: 100px 55px; }.ob-orbit-core small { font-size: 7px; }.ob-school-games { gap: 30px; padding: 35px; } }
@media(max-width: 760px) { .ob-student-hero { grid-template-columns: 1fr; padding-top: 42px; gap: 18px; }.ob-student-hero h1 { font-size: clamp(46px,10.5vw,72px); }.ob-student-intro { font-size: 14px; margin-bottom: 20px; }.ob-campus-orbit { height: 280px; max-width: 350px; justify-self: center; }.ob-campus-sticker { width: 59px; height: 59px; padding: 7px; border-radius: 15px; }.ob-orbit-core { inset: 78px 65px; }.ob-orbit-core > img { width: 55px; height: 55px; }.ob-orbit-core > span { font-size: 25px; }.ob-orbit-core small { font-size: 6px; }.ob-ring-inner { inset: 65px 45px; }.ob-schools { padding-top: 12px; }.ob-schools h2 { font-size: 25px; }.ob-school-card { gap: 9px; padding: 13px 10px; font-size: 11px; }.ob-school-mark { width: 43px; height: 43px; flex-basis: 43px; padding: 4px; border-radius: 9px; }.ob-school-arrow { display: none; }.ob-school-grid { gap: 9px; }.ob-district-mark { width: 47px; height: 47px; padding: 6px; }.ob-school-games { grid-template-columns: 1fr; gap: 28px; padding: 25px; margin-bottom: 45px; }.ob-games-copy h2 { font-size: 38px; }.ob-games-art { padding: 17px; }.ob-controller { max-width: 215px; margin-block: 17px; }.ob-game-campus-marks { gap: 7px; }.ob-feature h3 { font-size: 28px; }.ob-faq { padding-block: 50px; }.ob-auth-campus-marks { gap: 8px; }.ob-auth-campus-marks img { width: 33px; height: 33px; } }
@media(max-width: 380px) { .ob-school-card { flex-direction: column; align-items: flex-start; gap: 9px; }.ob-student-hero .ob-hero-actions { gap: 14px; }.ob-game-campus-marks img { width: 28px; height: 28px; }.ob-orbit-core { inset-inline: 55px; }.ob-games-copy h2 { font-size: 33px; } }
@media(prefers-reduced-motion: reduce) { .ob-motion-ready .ob-reveal.ob-reveal-pending { opacity: 1; translate: none; } }
.ob-school-site { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 24px 27px; margin-bottom: 24px; border: 1px solid var(--ob-line); border-radius: 12px; background: var(--ob-panel); }.ob-school-site-brand { display: flex; align-items: center; gap: 14px; }.ob-school-site-brand > img { border-radius: 12px; }.ob-school-site-brand > span { font: 700 23px 'Space Grotesk',sans-serif; letter-spacing: -.8px; }.ob-school-site-brand > span > span { color: var(--ob-accent); }.ob-school-site-brand small { display: block; margin-top: 7px; font: 8px ui-monospace,monospace; letter-spacing: .8px; color: var(--ob-muted); }.ob-school-site > p { margin: 0; font-size: 12px; color: var(--ob-muted); }.ob-school-site > .ob-button { flex-shrink: 0; }
.ob-auth-school-site { display: flex; gap: 13px; align-items: center; padding: 15px; margin-top: 20px; border: 1px solid var(--ob-line); border-radius: 9px; background: var(--ob-panel); }.ob-auth-school-site > img { border-radius: 9px; flex-shrink: 0; }.ob-auth-school-site > span:last-child { margin-left: auto; color: var(--ob-accent); }.ob-auth-school-site b { display: block; font: 600 16px 'Space Grotesk',sans-serif; }.ob-auth-school-site small { display: block; font-size: 10px; color: var(--ob-muted); margin-top: 4px; }.ob-auth-school-site:hover { border-color: var(--ob-accent); }.ob-join-district > img { background: #fff; padding: 5px; border-radius: 50%; object-fit: contain; }.ob-auth-story h1 { font-size: clamp(45px,5vw,68px); }
@media(max-width: 1000px) { .ob-school-site { flex-wrap: wrap; }.ob-school-site > p { flex: 1; }.ob-school-site > .ob-button { width: 100%; justify-content: center; } }
@media(max-width: 760px) { .ob-school-site { padding: 23px; gap: 20px; }.ob-school-site > p { flex-basis: 100%; }.ob-school-site-brand > span { font-size: 23px; }.ob-auth-story h1 { font-size: 48px; }.ob-auth-school-site { padding: 12px; }.ob-auth-school-site small { font-size: 9px; }.ob-auth-campus-marks { margin-top: 18px; } }
@media(max-width: 760px) { .ob-ring-outer { inset: 35px 30px; } }

.ob-auth-benefits li { grid-template-columns: minmax(0, 1fr); }

.signup-tour {margin:24px auto 0;max-width:920px;}
.signup-tour video {display:block;width:100%;height:auto;max-height:440px;border:1px solid var(--ob-line,#8883);border-radius:16px;background:#17191b;aspect-ratio:1440/726;}
.enroll-page .ob-auth-layout {padding-top:30px;}