/* Shared light/dark surfaces, including native form controls. */
:root{color-scheme:light}
.theme-toggle{width:32px;height:32px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:0;border-radius:50%;background:transparent;color:#75757d;margin-right:8px;transition:background .18s,color .18s,transform .18s}
.theme-toggle:hover{background:#eeeef2;color:#1d1d1f}.theme-toggle:active{transform:scale(.92)}
.key-actions .key-action{flex-direction:column;gap:5px;min-width:50px;padding:8px;background:transparent;border-color:transparent;color:#86868b;border-radius:10px}
.key-actions .key-action:hover{background:#f0f0f4;color:#42424a;box-shadow:none}.key-actions .key-delete:hover{color:#cc5555;background:#fff0ef}
html[data-theme=dark]{color-scheme:dark;--ink:#ececf0;--muted:#a0a3af;--blue:#69aaff;--line:#303540;--bg:#10141c}
html[data-theme=dark] body{background:var(--bg);color:var(--ink)}
html[data-theme=dark] header{background:#10141ce8;border-color:var(--line)}
html[data-theme=dark] :is(.live-dash,body[data-page=console]){background:#10141c}
html[data-theme=dark] :is(.panel,.stat,.user-menu,dialog,.plan){background:#181e29;border-color:var(--line);color:var(--ink)}
html[data-theme=dark] :is(.header-balance strong,nav a.active,.user-button,.auth-dialog){color:var(--ink)}
html[data-theme=dark] :is(.header-balance,.checkout-row,th,td,.side,.simple-plan){border-color:var(--line)}
html[data-theme=dark] :is(.user-avatar,.avatar,.close-modal,.auth-dialog .close-modal){background:#252c3a;color:#bfc7d5}
html[data-theme=dark] :is(.intro p,.demo-copy p,.credit-line,.payment-instruction,.auth-dialog .auth-heading p,.auth-dialog form label,dialog label,.scroll-cue,.scroll-cue span,.header-balance,.fine,nav a){color:#a0a3af}
html[data-theme=dark] :is(.side button:hover,.side button:focus-visible,.theme-toggle:hover){background:#232b39;color:#ececf0}
html[data-theme=dark] .side button.active{background:#293344;color:#f0f2f8}
html[data-theme=dark] :is(.btn,.key-button){background:#202837;border-color:#354052;color:#d2d8e3}
html[data-theme=dark] :is(.btn:hover,.key-button:hover){background:#2a3547}
html[data-theme=dark] :is(.btn.primary,.auth-submit){background:#147dea;border-color:#147dea;color:#fff}
html[data-theme=dark] .btn.primary:hover{background:#258af4}
html[data-theme=dark] .key-create{background:#1c3554;border-color:#294a71;color:#8ebfff}
html[data-theme=dark] :is(.key-copy,.key-actions .key-action){background:transparent;border-color:transparent;color:#9ba3b3}
html[data-theme=dark] :is(.key-copy:hover,.key-actions .key-action:hover){background:#283244;color:#e3e8f1}
html[data-theme=dark] .key-actions .key-delete:hover{background:#3a252d;color:#ff9393}
html[data-theme=dark] :is(input,select,.auth-dialog form input,#live-key-form select,.panel-head select){background:#121824;color:#e5e8ef;border-color:#394252}
html[data-theme=dark] input::placeholder{color:#818b9d}
html[data-theme=dark] :is(.checkout-card,.scan-payment .checkout-card,.code,.notice,.auth-tabs){background:#1a2230;color:#aeb8ca}
html[data-theme=dark] :is(.status,.pill){background:#19352f;color:#8dd6bf}
html[data-theme=dark] .status--inactive{background:#2b303a;color:#999eaa}
html[data-theme=dark] dialog::backdrop{background:#070a117a;backdrop-filter:blur(14px)}
html[data-theme=dark] :is(.auth-error,.account-error){color:#ff9494}
html[data-theme=dark] .story-stage:before{background:linear-gradient(#10141c,#10141c00)}
html[data-theme=dark] .story-stage:after{background:linear-gradient(#10141c00,#10141c)}
html[data-theme=dark] .story-demo .recording-slot{background:linear-gradient(135deg,#202438,#192936);border-color:#343b4c;outline-color:#343b4c;box-shadow:0 25px 70px -35px #0009}
html[data-theme=dark] .story-demo .recording-empty{background:transparent;color:#a0a6b5}
html[data-theme=dark] .recording-index{color:#4c5569}
html[data-theme=dark] .story-demo--4 .recording-slot:before{background:#232d3c;border-color:#394252}
html[data-theme=dark] .story-demo--4 .recording-slot{border-top-color:#232d3c}
html[data-theme=dark] #toast{background:#e4e9f3;color:#151b27}
@media(prefers-reduced-motion:reduce){.theme-toggle{transition:none}}
@media(max-width:600px){.theme-toggle{margin-right:2px;width:28px;height:28px}}
html[data-theme=dark] .story-stage{background:#10141c}
html[data-theme=dark] .auth-dialog form input:focus{background:#182131}

/* Crossfade the complete palette, including gradients, without moving content. */
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s;animation-timing-function:ease-in-out;mix-blend-mode:normal}
.story-glow{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 22% 32%,#224c8420,transparent 54%),radial-gradient(ellipse at 80% 66%,#62489918,transparent 53%),radial-gradient(ellipse at 50% 105%,#24575e12,transparent 52%);transition:opacity .35s ease}
html[data-theme=dark] .story-glow{opacity:1}
html[data-theme=dark] .story-stage .intro h1{color:#f2f4fa}
html[data-theme=dark] .soft-gradient{background-image:linear-gradient(110deg,#70bcff 5%,#9baaff 48%,#cb9bfa 95%)}
html[data-theme=dark] .story-stage :is(.intro p,.demo-copy p){color:#b8c1d2}
html[data-theme=dark] .story-stage :is(.scroll-cue,.scroll-cue span){color:#aab9d0}
html[data-theme=dark] .story-stage .case-accent{color:#ff819b;-webkit-text-fill-color:#ff819b}
html[data-theme=dark] .story-stage .recording-empty{color:#b1bace}
html[data-theme=dark] .story-stage .recording-empty small{color:#8f9cb3}
html[data-theme=dark] .story-stage .recording-index{color:#65758f}
@media(prefers-reduced-motion:reduce){.story-glow{transition:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}
@media(prefers-reduced-motion:reduce){html.theme-changing *,html.theme-changing *::before,html.theme-changing *::after{transition:none!important}}
/* Night accents: soft periwinkle actions with readable dark labels. */
html[data-theme=dark]{--blue:#a5baff}
html[data-theme=dark] :is(.btn.primary,.auth-submit){background:#a5baff;border-color:#a5baff;color:#14213c;font-weight:500}
html[data-theme=dark] :is(.btn.primary,.auth-submit):hover{background:#bdcbff;border-color:#bdcbff;color:#14213c;filter:none}
html[data-theme=dark] :is(.trial-link,.link,.auth-switch button,.auth-dialog #send-code,.back-link,.user-menu a,.user-menu button){color:#a5baff}
html[data-theme=dark] :is(.trial-link,.link,.auth-switch button,.auth-dialog #send-code,.back-link,.user-menu a,.user-menu button):hover{color:#d0daff}
html[data-theme=dark] .key-create{color:#bacaff;background:#26304c;border-color:#394667}
html[data-theme=dark] .key-create:hover{background:#313e5e;border-color:#506184}
html[data-theme=dark] .header-auth button:hover{color:#bacaff}
html[data-theme=dark] input:focus{outline-color:#a5baff55;border-color:#a5baff}
.theme-toggle{color:#7972c7;background:#8075d10b}
.theme-toggle:hover{color:#6558b7;background:#8275d51a}
html[data-theme=dark] .theme-toggle{color:#e8be72;background:#efbc6010}
html[data-theme=dark] .theme-toggle:hover{color:#ffdc96;background:#efbc6020}
/* Case headings had an explicit light-theme ink color. */
html[data-theme=dark] .story-stage .demo-copy h2{color:#f0f3fa}
html[data-theme=dark] .story-stage .demo-copy .intro-label{color:#b8c5dc}

/* Align the first action label with its table column heading. */
.key-actions .key-action:first-child{margin-left:-12px}
.pool-credit{overflow-wrap:anywhere}

/* Compact header controls share hover, press and keyboard feedback. */
header nav{gap:6px}
header nav a,header .header-balance,header .user-button,header .header-auth button{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid transparent;border-radius:12px;background:transparent;transition:background .16s,color .16s,border-color .16s,transform .16s}
header .header-balance{gap:7px;margin-right:2px;font-family:inherit}
header .user-button{gap:8px;padding:3px 5px 3px 10px}
header .theme-toggle{margin-right:2px;width:36px;height:36px;border-radius:12px}
header nav a.active{background:#f1f2f5}
header nav a:hover,header .header-balance:hover,header .user-button:hover,header .header-auth button:hover{background:#eeeef3;border-color:#e5e5eb;color:#1d1d1f}
header :is(nav a,.header-balance,.user-button,.header-auth button):active{transform:scale(.96);background:#e3e4eb}
header :is(nav a,.header-balance,.user-button,.header-auth button,.theme-toggle):focus-visible{outline:2px solid #8b9dcc;outline-offset:2px}
html[data-theme=dark] header nav a.active{background:#202735}
html[data-theme=dark] header :is(nav a,.header-balance,.user-button,.header-auth button):hover{background:#252e3d;border-color:#354153;color:#ececf0}
html[data-theme=dark] header :is(nav a,.header-balance,.user-button,.header-auth button):active{background:#303b4e}
@media(max-width:600px){header nav{gap:2px}header nav a,header .header-balance,header .header-auth button{padding:7px 8px}header .user-button{padding:3px}}
@media(prefers-reduced-motion:reduce){header :is(nav a,.header-balance,.user-button,.header-auth button){transition:none}}

#refresh-account{width:38px;height:38px;padding:0;flex-shrink:0}
#refresh-account[aria-busy="true"] svg{animation:account-refresh-spin .9s linear infinite}
@keyframes account-refresh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#refresh-account[aria-busy="true"] svg{animation:none}}

.user-menu #logout{color:#c94a4a}
.user-menu #logout:hover{color:#b73535;background:#fff0ef}
html[data-theme=dark] .user-menu #logout{color:#f08c8c}
html[data-theme=dark] .user-menu #logout:hover{color:#ffabab;background:#3a252d}

.live-dash>section>:not(.dash-title){transition:opacity .18s ease,transform .18s ease}
.live-dash>section.account-refreshing>:not(.dash-title){opacity:.45;transform:translateY(2px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.live-dash>section>:not(.dash-title){transition:none}.live-dash>section.account-refreshing>:not(.dash-title){transform:none}}

.session-loading{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--muted);font-size:14px}
.session-header-loading{width:76px;display:inline-flex;align-items:center;justify-content:center}
.session-spinner{display:inline-block;width:24px;height:24px;border:2px solid #8993a32e;border-top-color:#8993a3;border-radius:50%;animation:account-refresh-spin .8s linear infinite}
.session-header-loading .session-spinner{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.session-spinner{animation:none}}

/* Guest authentication links need an explicit dark-theme foreground. */
html[data-theme=dark] header .header-auth button{color:#e3e8f1}
html[data-theme=dark] header .header-auth>span{color:#8993a5}
html[data-theme=dark] header .header-auth button:hover,html[data-theme=dark] header .header-auth button:focus-visible{color:#f4f7ff;background:#252e3d;border-color:#354153}

/* Navigation and guest actions share one typographic hierarchy. */
header nav a,header .header-auth button{font-size:12px;font-weight:400;line-height:20px;color:#1d1d1f}
html[data-theme=dark] body header nav a[data-nav][href]{color:#e3e8f1}
html[data-theme=dark] body header nav a[data-nav][href]:hover,html[data-theme=dark] body header nav a[data-nav][href]:focus-visible{color:#f4f7ff;background:#252e3d;border-color:#354153}
/* Shared login, registration and password-reset dialog palette. */
html[data-theme=dark] dialog.auth-dialog{background:#181e29;color:#ececf0;border-color:#394252;box-shadow:0 24px 90px #0006}
html[data-theme=dark] .auth-dialog .auth-heading h2{color:#f0f3fa}
html[data-theme=dark] .auth-dialog :is(form label,.auth-heading p,.auth-switch,.auth-code-status){color:#b4bdcd}
html[data-theme=dark] .auth-dialog form input{background:#121824;color:#edf1f8;border-color:#596579;caret-color:#a5baff}
html[data-theme=dark] .auth-dialog form input::placeholder{color:#9aa7bc;opacity:1}
html[data-theme=dark] .auth-dialog form input:focus{background:#182131;border-color:#a5baff;outline:2px solid #a5baff55}
html[data-theme=dark] .auth-dialog form input:autofill{box-shadow:0 0 0 1000px #182131 inset;-webkit-text-fill-color:#edf1f8;caret-color:#a5baff}
html[data-theme=dark] .auth-dialog #send-code{color:#b4c6ff;border:1px solid #465573;border-radius:9px;background:#26304c;padding:10px 8px}
html[data-theme=dark] .auth-dialog #send-code:hover:not(:disabled){color:#e2e9ff;background:#313e5e}
html[data-theme=dark] .auth-dialog #send-code:disabled{color:#9ba7bc;background:#202735;border-color:#394252;opacity:1;cursor:default}
html[data-theme=dark] .auth-dialog .auth-submit:disabled{background:#3b4761;border-color:#4e5e7a;color:#c5cee0;opacity:1;cursor:default}
html[data-theme=dark] .auth-dialog .close-modal:hover{background:#354153;color:#f4f7ff}
html[data-theme=dark] .auth-dialog :is(.auth-switch button,.auth-forgot button):focus-visible{outline:2px solid #a5baff;outline-offset:3px;border-radius:5px}

.auth-dialog #auth-code::placeholder{letter-spacing:normal}

/* Full-row account exit action. */
.user-menu #logout{display:flex;align-items:center;gap:9px;width:calc(100% + 44px);margin:0 -22px -22px;padding:14px 22px;border-radius:0 0 15px 15px;text-align:left;transition:background-color .16s ease,color .16s ease}
.user-menu #logout svg{flex-shrink:0}
.user-menu #logout:is(:hover,:focus-visible){color:#b73535;background:#fff0ef}
html[data-theme=dark] .user-menu #logout:is(:hover,:focus-visible){color:#ffabab;background:#3a252d}

/* Console entrance: sidebar first, then the page content. */
.console-enter>section{animation:none}
.console-enter>.side,.console-enter>section>*{animation:console-page-in .48s cubic-bezier(.2,.7,.3,1) both}
.console-enter>section>:nth-child(1){animation-delay:.04s}
.console-enter>section>:nth-child(2){animation-delay:.09s}
.console-enter>section>:nth-child(n+3){animation-delay:.14s}
@keyframes console-page-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.console-enter>.side,.console-enter>section>*{animation:none}}

.user-menu.is-closing{animation:account-menu-out .18s ease-in both;pointer-events:none}
@keyframes account-menu-out{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-6px) scale(.98)}}
@media(prefers-reduced-motion:reduce){.user-menu.is-closing{animation:none;opacity:0}}

/* Align purchase actions across desktop plan cards. */
@media(min-width:751px){
.simple-plans>.simple-plan{display:flex;flex-direction:column}
.simple-plans>.simple-plan>.model-scope{margin-bottom:35px}
.simple-plans>.simple-plan>.btn{margin-top:auto}
}

/* In-place console loading; completion never waits for an animation. */
.console-enter>.side,.console-enter>section>*{animation:none}
.live-dash>section.account-refreshing>:not(.dash-title){opacity:.55;transform:none}
.skeleton-line{display:block;background:var(--line);border-radius:6px;height:14px}
.skeleton-name{width:64px;margin-top:16px}
.skeleton-label{width:90px;margin-bottom:24px}
.skeleton-value{width:130px;height:34px}
.skeleton-panel{margin-top:24px;min-height:215px}
.skeleton-row{width:100%;height:20px;margin-top:28px}
.console-skeleton{animation:skeleton-pulse 1.2s ease-in-out infinite alternate}
@keyframes skeleton-pulse{from{opacity:.5}to{opacity:.9}}
@media(prefers-reduced-motion:reduce){.console-skeleton{animation:none}}

/* Stable account shells: only their contents load. */
header .header-balance{width:103px;flex:0 0 103px;padding-right:7px;height:39px;box-sizing:border-box}
header .header-balance strong{display:block;min-width:0;flex:1;font-variant-numeric:tabular-nums;text-align:left}
header .user-button{width:auto;flex:0 0 auto;gap:5px;height:39px;box-sizing:border-box}
header .user-label{flex:0 0 auto;min-width:0}
header .is-loading .user-label{width:var(--user-name-width,24px)}
header .user-avatar{width:31px;height:31px;flex:0 0 31px}
.header-amount-placeholder{width:100%;height:13px}
.user-label>.skeleton-line{width:100%;height:12px}
.avatar-placeholder{width:12px;height:12px;border-radius:50%;background:currentColor;opacity:.25}
.live-dash .account>.avatar{width:34px;height:34px;min-width:34px;min-height:34px}
.account-name{display:block;height:23.4px;line-height:23.4px}
.account-name .skeleton-name{width:64px;height:13px;margin:0;position:relative;top:5px}
.is-loading .skeleton-line,.is-loading .avatar-placeholder,.account-name .skeleton-line{animation:skeleton-pulse 1.2s ease-in-out infinite alternate}
@media(max-width:750px){header .user-button{width:43px;flex-basis:43px;padding:3px 5px}}
@media(max-width:600px){header .header-balance{width:99px;flex-basis:99px}}
@media(prefers-reduced-motion:reduce){.is-loading .skeleton-line,.is-loading .avatar-placeholder,.account-name .skeleton-line{animation:none}}

.key-copy.is-copied{color:#279570}
html[data-theme=dark] .key-copy.is-copied{color:#82cfb0}

.key-panel table th:nth-child(3),.key-panel table td:nth-child(3){text-align:center}


/* Quiet ambient glow shared by pricing and the account workspace. */
html[data-theme=dark] body:is([data-page=pricing],[data-page=console]){background-color:#10141c;background-image:radial-gradient(ellipse at 20% 20%,#224c8420,transparent 55%),radial-gradient(ellipse at 85% 65%,#62489918,transparent 55%),radial-gradient(ellipse at 45% 110%,#24575e12,transparent 50%);background-attachment:fixed;background-size:100% 100vh}
html[data-theme=dark] body[data-page=console] .live-dash{background:transparent}

/* Continue the page ambience through the dark navigation bar. */
html[data-theme=dark] body:is([data-page=home],[data-page=pricing],[data-page=console])>header{background-color:#10141ce6;background-image:radial-gradient(ellipse 90vw 70vh at 20vw 20vh,#224c8420,transparent 65%),radial-gradient(ellipse 85vw 80vh at 85vw 65vh,#62489918,transparent 70%);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:#30354055;box-shadow:0 10px 28px -22px #18233755}

/* One continuous dark canvas behind the transparent navigation. */
html[data-theme=dark] body:is([data-page=home],[data-page=pricing],[data-page=console]){background-color:#10141c;background-image:radial-gradient(ellipse at 20% 20%,#224c8420,transparent 55%),radial-gradient(ellipse at 85% 65%,#62489918,transparent 55%),radial-gradient(ellipse at 45% 110%,#24575e12,transparent 50%);background-attachment:fixed;background-size:100% 100vh;background-repeat:no-repeat}
html[data-theme=dark] body:is([data-page=home],[data-page=pricing],[data-page=console])>header{background:transparent;border-bottom-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html[data-theme=dark] body[data-page=home] .story-glow{opacity:0}
html[data-theme=dark] body[data-page=home] :is(.story-track,.story-stage,.story-scene){background:transparent}

html[data-theme=dark] body[data-page=home] .story-stage::before,html[data-theme=dark] body[data-page=home] .story-stage::after{background:none}

/* Keep the dashboard shell still; only values and row contents pulse. */
.data-loading{position:relative;color:transparent!important;pointer-events:none;user-select:none}
.data-loading>*{visibility:hidden}
.data-loading::after{content:"";position:absolute;left:var(--loading-left,0px);right:auto;width:var(--loading-width,100%);top:50%;height:var(--loading-height,14px);transform:translateY(-50%);background:var(--line);border-radius:6px;animation:skeleton-pulse 1.2s ease-in-out infinite alternate}
.data-placeholder{animation:skeleton-pulse 1.2s ease-in-out infinite alternate}
.skeleton-number{width:100px;height:34px;margin:5px 0}
.key-panel td:nth-child(3)>.data-placeholder{margin:auto}
@media(prefers-reduced-motion:reduce){.data-loading::after,.data-placeholder{animation:none}}

.data-value{display:inline-block}