/* Shared layout contract; theme skins change presentation, never action semantics. */
:root{--ui-bar:64px;--ui-line:var(--border,#dfe3ed);--ui-paper:var(--surface,#fff);--ui-ink:var(--text,#20283d);--ui-muted:var(--muted,#69738b);--ui-accent:var(--accent,#667eea);--ui-round:16px}
html[data-style=stardust]{--radius:12px;--radius-lg:20px;--ui-round:18px;--font:"Inter","PingFang SC","Microsoft YaHei",sans-serif}
html[data-style=stardust][data-mode=dark]{--bg:#0b1020;--bg-2:#080d19;--surface:#131b2e;--surface-2:#1b2540;--border:#29334b;--text:#edf1fc;--muted:#a0acc5;--dim:#7a88a6;--accent:#a9b8ff;--accent-2:#c5b3fa;--accent-fg:#111a32}
html[data-style=stardust][data-mode=light]{--bg:#f3f5fa;--surface:#fff;--surface-2:#eef1f9;--border:#dce2ef;--text:#20283d;--muted:#64708a;--accent:#4d5fc0;--accent-fg:#fff}
.ui-header,.ui-dialog,.ui-header *,.ui-dialog *{box-sizing:border-box}
body.ui-ready{padding-top:var(--ui-bar)!important}
.ui-header{position:fixed;inset:0 0 auto;z-index:70;height:var(--ui-bar);display:flex;align-items:center;gap:16px;padding:0 max(24px,env(safe-area-inset-right)) 0 max(24px,env(safe-area-inset-left));border-bottom:1px solid var(--ui-line);background:var(--ui-paper);color:var(--ui-ink);font:14px/1.4 var(--font,system-ui);isolation:isolate}
.ui-header .ui-control,.ui-dialog .ui-control{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 14px;margin:0;border:1px solid var(--ui-line);border-radius:10px;background:transparent;color:var(--ui-ink);font:inherit;text-decoration:none;cursor:pointer;letter-spacing:normal;box-shadow:none}
.ui-header .ui-control:hover,.ui-dialog .ui-control:hover{background:var(--surface-2,#eef1f9)}
.ui-header #ui-back{font-size:23px;padding:0;border-color:transparent}
.ui-header .ui-identity{min-width:0;display:grid;gap:1px}
.ui-wordmark{font:9px/1.2 var(--mono,monospace);letter-spacing:2px;color:var(--ui-muted)}
.ui-page-title{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-header-actions{display:flex;gap:8px;margin-left:auto;flex-shrink:0}
.ui-header #ui-settings-button{font-size:21px;padding:0}
.ui-header :focus-visible,.ui-dialog :focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.ui-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(440px,100%);max-width:100%;height:100dvh;max-height:100dvh;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));border:0;border-left:1px solid var(--ui-line);background:var(--ui-paper);color:var(--ui-ink);font:14px/1.6 var(--font,system-ui);overflow:auto;overscroll-behavior:contain;text-align:left;border-radius:0;box-shadow:-20px 0 80px #0003}
.ui-dialog:not([open]){display:none!important}
.ui-dialog::backdrop{background:#03091b80;backdrop-filter:blur(6px)}
.ui-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--ui-line)}
.ui-dialog-head h2{margin:0;color:var(--ui-ink);font-size:22px;font-weight:600;letter-spacing:0}
.ui-section{display:block;margin:0;padding:24px 0;border-bottom:1px solid var(--ui-line)}
.ui-section h3{margin:0 0 14px;font-size:14px;color:var(--ui-ink);letter-spacing:.06em}
.ui-dialog .ui-note{font-size:12px;color:var(--ui-muted);line-height:1.8;margin:12px 0 0}
.ui-theme-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ui-dialog .ui-theme-choice{display:flex;flex-direction:column;align-items:stretch;gap:9px;min-height:76px;width:100%;padding:9px;border:1px solid var(--ui-line);border-radius:12px;background:transparent;color:var(--ui-ink);font:12px var(--font,system-ui);cursor:pointer}
.ui-swatch{height:26px;border-radius:6px;border:1px solid #ffffff30}
.ui-dialog [aria-pressed=true]{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 12%,transparent);box-shadow:0 0 0 1px var(--ui-accent)}
.ui-mode{display:flex;gap:8px;margin-top:18px}.ui-mode>*{flex:1}
.ui-dialog button:disabled{opacity:.4;cursor:not-allowed}
.ui-motion{display:flex;align-items:center;gap:12px;min-height:64px;margin:0;border-bottom:1px solid var(--ui-line)}
.ui-motion input{width:18px;height:18px;accent-color:var(--ui-accent)}
.ui-directory-list{display:grid;gap:8px;padding-top:20px}
.ui-dialog .ui-app-link{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px;border:1px solid var(--ui-line);border-radius:12px;color:var(--ui-ink);text-decoration:none}
.ui-app-link:hover,.ui-app-link[aria-current]{background:var(--surface-2)}
.ui-app-icon{font-size:22px}.ui-app-arrow{margin-left:auto;font-size:12px;color:var(--ui-muted)}
.ui-embedded{--ui-bar:0px}.ui-embedded>.ui-header{display:none}
.ui-dialog .ui-native-settings{display:block!important;margin:0;position:static}
.ui-native-settings>summary{display:none!important}
.ui-dialog .settings-menu{display:block!important;position:static!important;width:auto!important;max-height:none!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;color:var(--ui-ink)!important;overflow:visible!important}
.ui-dialog .settings-menu section{padding:16px 0;border-bottom:1px solid var(--ui-line)}
.ui-dialog .settings-menu label{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.ui-dialog .settings-menu .switch-row{flex-direction:row;align-items:center;justify-content:space-between}
.ui-dialog .settings-menu input:not([type=checkbox]){width:100%;min-width:0}
.ui-dialog .settings-menu button{min-height:44px}
.ui-dialog .settings-menu small{color:var(--ui-muted)}
/* Theme-specific surface, rhythm and typography, with stable action positions. */
html[data-style=stardust] .ui-header{background:color-mix(in srgb,var(--ui-paper) 94%,transparent);backdrop-filter:blur(20px)}
html[data-style=stardust] .ui-dialog-head h2{letter-spacing:-.04em}
html[data-style=paper] .ui-header{border-bottom:3px double var(--ui-line)}
html[data-style=paper] .ui-wordmark{letter-spacing:3px}
html[data-style=paper] .ui-dialog :is(.ui-control,.ui-theme-choice,.ui-app-link){border-radius:0}
html[data-style=inkwash] .ui-header{border-bottom:1px solid var(--ui-line);background:var(--ui-paper)}
html[data-style=inkwash] .ui-page-title{letter-spacing:.18em;font-weight:400}
html[data-style=inkwash] .ui-dialog{background-image:repeating-linear-gradient(0deg,transparent,transparent 5px,#8b837106 6px)}
html[data-style=inkwash] :is(.ui-header,.ui-dialog) :is(.ui-control,.ui-theme-choice,.ui-app-link){border-radius:3px}
html[data-style=terminal] :is(.ui-header,.ui-dialog){font-family:var(--mono,monospace)}
html[data-style=terminal] .ui-wordmark::before{content:'> '}
html[data-style=terminal] :is(.ui-header,.ui-dialog) :is(.ui-control,.ui-theme-choice,.ui-app-link){border-radius:2px}
html[data-style=neon] .ui-header{border-bottom-color:var(--ui-accent);box-shadow:0 2px 20px color-mix(in srgb,var(--ui-accent) 12%,transparent)}
html[data-style=neon] .ui-dialog{border-left-color:var(--ui-accent)}
@media(max-width:640px){:root{--ui-bar:calc(56px + env(safe-area-inset-top))}.ui-header{padding:env(safe-area-inset-top) 12px 0;gap:8px}.ui-wordmark{font-size:8px;letter-spacing:1.2px}.ui-page-title{font-size:15px}.ui-header-actions{gap:4px}.ui-header .ui-control{padding:8px 10px}.ui-dialog{width:100%;padding:calc(16px + env(safe-area-inset-top)) 20px 24px}.ui-embedded{--ui-bar:0px}}
@media(prefers-reduced-motion:reduce){.ui-header *,.ui-dialog *{animation:none!important;transition:none!important}}
@media print{.ui-header,.ui-dialog{display:none!important}body.ui-ready{padding-top:0!important}}
/* Collapse by transforming the shell; its reserved space stays stable while scrolling. */
.ui-header{transition:transform .58s cubic-bezier(.22,.75,.25,1),box-shadow .58s;will-change:transform}
.ui-header.ui-header-collapsed{transform:translateY(calc(-100% + 5px));box-shadow:0 1px 18px color-mix(in srgb,var(--ui-accent) 10%,transparent)}
.ui-nav-reveal{position:fixed;top:0;left:calc(50% - 32px);z-index:71;width:64px;min-height:44px;padding:0;display:grid;place-items:start center;background:transparent;border:0;cursor:pointer;color:var(--ui-ink)}
.ui-nav-reveal[hidden]{display:none}
.ui-nav-reveal span{margin-top:8px;width:32px;height:3px;border-radius:99px;background:var(--ui-accent);box-shadow:0 0 10px color-mix(in srgb,var(--ui-accent) 30%,transparent)}
.ui-nav-reveal:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-3px;border-radius:10px}
.ui-header.ui-header-motion-off{transition:none}
@media(prefers-reduced-motion:reduce){.ui-header{transition:none}}
@media print{.ui-nav-reveal{display:none!important}}
/* The opening reveals the shared navbar on the same envelope as homepage content. */
body[data-ui-page=home]>.ui-header{opacity:var(--home-reveal,1)}
html[data-home-stage=waiting],html[data-home-stage=preparing],html[data-home-stage=playing]{background:#04060e!important}
html:is([data-home-stage=waiting],[data-home-stage=preparing]) body[data-ui-page=home]{background:#04060e!important;overflow:hidden}
html:is([data-home-stage=playing],[data-home-stage=rewinding]) body[data-ui-page=home]{overflow:hidden;background:color-mix(in srgb,var(--bg) calc(var(--home-reveal,0)*100%),#04060e)!important}
html:is([data-home-stage=waiting],[data-home-stage=preparing]) body[data-ui-page=home]>.ui-header{opacity:0;pointer-events:none}
html:is([data-home-stage=waiting],[data-home-stage=preparing]) #boot{opacity:0}
html[data-home-stage=entering] body[data-ui-page=home]{background:color-mix(in srgb,#04060e calc(var(--home-exit,0)*100%),var(--bg))!important;overflow:hidden}

.ui-dialog #ui-home-replay[hidden]{display:none}
.ui-dialog #ui-home-replay:disabled{cursor:default}