@charset "UTF-8";
:root { color-scheme:dark;--ink:#081c22;--panel:#10272e;--panel2:#142f36;--border:rgba(178,215,211,.13);--text:#edf1e9;--muted:#9fb6b7;--quiet:#708f94;--mint:#b2d9cc;--gold:#e7b08c;--warm:#da846e;--serif:Georgia,'Times New Roman',serif;--sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}

* { box-sizing:border-box}
html,body { margin:0;min-height:100%;background:var(--ink);color:var(--text);font-family:var(--sans);font-size:14px}
body { overflow:hidden}
button,input,textarea,select { font:inherit}
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent}
button { cursor:pointer}
button { color:inherit;border:0;background:none}
button:disabled { cursor:default;opacity:.35}
a { color:var(--mint);text-decoration:none}
button,select,input,textarea,a { outline-offset:4px}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--gold)}
button:hover { color:#fff}
button svg,span[data-icon] svg { width:18px;height:18px;display:block;flex:none}
svg { vertical-align:middle}
button { transition:background .18s,color .18s,border-color .18s,opacity .18s}
h1,h2,h3,h4,p { margin:0}
h1,h2,h3 { font-weight:400}
p { line-height:1.65}
small { font-size:11px}
strong { font-weight:600}
[hidden] { display:none!important}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link { position:fixed;top:-60px;left:20px;z-index:100;background:var(--mint);color:var(--ink);padding:12px}
.skip-link:focus { top:12px}
.eyebrow { font-size:10px;font-weight:650;letter-spacing:.16em;line-height:1.5;color:var(--muted);text-transform:uppercase}

.app { height:100vh;height:100dvh;display:flex;flex-direction:column}
.app-header { height:82px;min-height:82px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 30px;gap:28px;background:#0b2026;z-index:5}
.brand { display:flex;align-items:center;gap:13px;min-width:240px;color:var(--text)}
.brand strong { display:block;font-family:var(--serif);font-size:25px;letter-spacing:-.8px;font-weight:400;line-height:1.1}
.brand small { font-size:8px;letter-spacing:.18em;color:var(--quiet);display:block;margin-top:7px}
.main-nav { height:100%;display:flex;align-items:stretch;gap:28px}
.nav-button { position:relative;font-size:12px;font-weight:500;color:var(--muted);padding:0 2px}
.nav-button.active { color:var(--mint)}
.nav-button.active:after { content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--mint)}
.header-actions { display:flex;align-items:center;gap:12px}
.primary-button,.secondary-button { display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:7px;padding:12px 17px;font-weight:600;font-size:12px;min-height:42px}
.primary-button { background:var(--mint);color:#0e2c32}
.primary-button:hover { background:#d4e9dd;color:#092229}
.secondary-button { border:1px solid #38575c;background:#18353d;color:var(--mint)}
.secondary-button:hover { background:#24454a}
.icon-button { width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--muted);border-radius:6px;flex:none}
.icon-button:hover { background:rgba(178,217,204,.1)}
.text-button { display:inline-flex;align-items:center;gap:8px;padding:8px 0;text-align:left;font-size:12px;line-height:1.5;color:var(--mint)}

.workspace { display:grid;grid-template-columns:225px minmax(0,1fr) 310px;flex:1;min-height:0;outline:none}
.stage-rail { border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding:32px 22px 20px;background:#0c2228}
.rail-heading h1 { font-family:var(--serif);font-size:25px;line-height:1.22;letter-spacing:-.6px;margin-top:11px}
.rail-heading p { font-size:11px;color:var(--quiet);margin-top:12px}
.stage-list { margin:31px -9px 24px;position:relative}
.stage-list:before { content:'';position:absolute;top:22px;bottom:29px;left:21px;width:1px;background:var(--border)}
.stage-button { display:flex;align-items:flex-start;gap:13px;width:100%;text-align:left;padding:16px 12px;border-radius:7px;position:relative;margin-bottom:3px;color:var(--muted)}
.stage-button:before { content:'';width:7px;height:7px;border:1px solid #68858a;border-radius:50%;background:#10272e;margin:6px 0 0 6px;flex:none;z-index:1}
.stage-button.active { background:#1b3b41;color:var(--text)}
.stage-button.active:before { background:var(--mint);border-color:var(--mint);box-shadow:0 0 0 4px #2c514f}
.stage-button:hover { background:#142f36}
.stage-button .stage-year { font-size:10px;letter-spacing:.05em;color:var(--quiet);display:block;margin-bottom:5px}
.stage-button.active .stage-year { color:var(--mint)}
.stage-button strong { font-size:12px;line-height:1.45;display:block;font-weight:500}
.stage-button .stage-sub { font-size:10px;color:var(--quiet);display:block;margin-top:6px;line-height:1.5}
.rail-bottom { margin-top:auto}
.rail-bottom p { font-size:10px;color:var(--quiet);line-height:1.8;margin:15px 0}
.rail-bottom .text-button { font-size:10px;width:100%;justify-content:space-between;gap:5px}
.rail-bottom .text-button svg { width:14px;height:14px}
.small-rule { height:1px;background:var(--border);margin:12px 0}
.basis-link { display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted);line-height:1.5;text-align:left;padding:5px 0}
.status-dot { width:5px;height:5px;display:inline-block;background:var(--gold);border-radius:50%;flex:none}

.explorer { min-width:0;min-height:0;display:flex;flex-direction:column;position:relative;background:radial-gradient(ellipse at 45% 42%,#17353c 0%,#0c222a 45%,#081c22 78%)}
.stage-heading { min-height:96px;padding:25px 29px 18px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid rgba(178,215,211,.055)}
.stage-heading h2 { font-family:var(--serif);font-size:30px;letter-spacing:-.6px;margin-top:5px;line-height:1.15}
.stage-heading .eyebrow { font-size:9px;color:var(--mint)}
.age-badge { display:flex;align-items:center;gap:9px;color:var(--muted);flex:none}
.age-badge svg { width:16px;height:16px;color:var(--quiet)}
.age-badge small { display:block;font-size:7px;letter-spacing:.13em;color:var(--quiet);margin-bottom:5px}
.age-badge strong { display:block;font-size:10px;font-weight:400}
.viewer-shell { position:relative;flex:1;min-height:280px;overflow:hidden}
.single-view,.heart-view { width:100%;height:100%;min-height:0}
.heart-view { position:relative;touch-action:none;outline-offset:-3px}
.heart-view canvas { display:block;width:100%;height:100%}
.view-topline { position:absolute;top:18px;left:28px;right:22px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.view-topline button { pointer-events:auto}
.view-tag { font-size:8px;color:var(--quiet);letter-spacing:.15em}
.view-presets { position:absolute;top:70px;left:23px;display:flex;flex-direction:column;gap:2px;background:rgba(9,29,35,.65);border:1px solid var(--border);border-radius:7px;padding:4px;backdrop-filter:blur(8px)}
.view-preset { font-size:9px;color:var(--quiet);padding:7px 9px;border-radius:4px;min-width:45px}
.view-preset:hover { background:#1c3d44}
.view-preset.active { background:#23464c;color:var(--mint)}
.viewer-legend { display:flex;gap:16px;align-items:center;position:absolute;bottom:48px;left:29px;font-size:9px;color:var(--muted);pointer-events:none}
.viewer-legend>span { display:flex;align-items:center;gap:5px}
.viewer-legend button { padding:3px;pointer-events:auto;color:var(--quiet)}
.viewer-legend svg { width:12px;height:12px}
.swatch { width:6px;height:6px;border-radius:50%;display:inline-block}
.heart-swatch { background:#cd7969}
.pa-swatch { background:#a3d2c5}
.repair-swatch { background:#ead3ad}
.viewer-caption { position:absolute;bottom:19px;left:29px;right:23px;display:flex;justify-content:space-between;gap:15px;align-items:center;pointer-events:none;font-size:8px}
.basis-label { display:inline-flex;align-items:center;gap:6px;color:#b3bab0;font-size:9px}
.interaction-hint { color:#64838a;font-size:8px}
.viewer-toolbar { display:flex;align-items:center;justify-content:center;gap:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:rgba(11,32,39,.82);min-height:65px;padding:8px 12px;flex:none}
.tool-group { display:flex;align-items:center;gap:4px;border-right:1px solid var(--border);padding:0 10px}
.tool-group:last-child { border-right:0}
.tool-button { display:flex;align-items:center;flex-direction:column;justify-content:center;gap:6px;min-width:51px;min-height:44px;font-size:9px;color:var(--muted);padding:4px 8px;border-radius:6px}
.tool-button svg { width:17px;height:17px}
.tool-button[aria-pressed="true"] { background:#1d3b42;color:var(--mint)}
.tool-button:hover { background:#1a363e}
.visual-note { font-size:10px;color:var(--muted);line-height:1.5;padding:9px 22px;background:#163139;border-bottom:1px solid var(--border);flex:none}
.loading-view { position:absolute;inset:0;background:#0d242c;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:4;color:var(--muted)}
.loading-view p { font-family:var(--serif);font-size:23px;color:var(--text)}
.loading-view small { color:var(--quiet)}
.loading-orbit { width:42px;height:42px;border:1px solid #25494f;border-top-color:var(--mint);border-radius:50%;animation:spin 1.6s linear infinite}
@keyframes spin { to { transform:rotate(360deg)}
}
.fallback-view { position:absolute;inset:60px 80px 90px;z-index:3;background:#112b33;border:1px solid var(--border);border-radius:10px;padding:25px;overflow:auto}
.fallback-view h3 { font-family:var(--serif);font-size:23px;margin-bottom:10px}
.fallback-view p { font-size:12px;color:var(--muted)}
.fallback-view svg { width:100%;height:auto;max-height:220px;margin-top:15px}


.inspector { border-left:1px solid var(--border);display:flex;min-height:0;flex-direction:column;background:#0e252c}
.inspector-tabs { height:56px;min-height:56px;display:flex;border-bottom:1px solid var(--border);padding:0 18px;gap:22px}
.inspector-tab { font-size:11px;color:var(--quiet);position:relative;padding:0 0}
.inspector-tab.active { color:var(--mint)}
.inspector-tab.active:after { content:'';position:absolute;bottom:0;height:2px;background:var(--mint);left:0;right:0}
.inspector-panel { overflow-y:auto;flex:1;min-height:0;padding:25px 22px 20px;scrollbar-width:thin;scrollbar-color:#36545a transparent}
.panel-intro h3,.explanation-title { font-family:var(--serif);font-size:25px;line-height:1.2;letter-spacing:-.4px;margin:10px 0 13px}
.panel-intro p,.explanation-summary { font-size:12px;color:var(--muted);line-height:1.8}
.explanation-role { font-size:11px;color:var(--quiet);line-height:1.7;margin:0 0 18px}
.selection-banner { display:flex;align-items:center;justify-content:space-between;color:var(--mint);font-size:10px;margin-bottom:18px}
.selection-banner button { font-size:10px;color:var(--quiet);padding:3px}
.key-points { padding:0;margin:20px 0;list-style:none}
.key-points li { font-size:11px;line-height:1.7;color:var(--muted);padding:9px 0 9px 13px;position:relative;border-top:1px solid rgba(178,215,211,.06)}
.key-points li:before { content:'';width:3px;height:3px;border-radius:50%;background:var(--gold);position:absolute;left:0;top:17px}
.source-pills { display:flex;flex-wrap:wrap;gap:6px;margin:16px 0}
.source-pill { font-size:9px;display:inline-flex;align-items:center;gap:4px;color:#afc6c3;border:1px solid #2b4950;background:#102c34;padding:5px 7px;border-radius:4px;line-height:1.35;text-align:left}
.source-pill svg { width:10px;height:10px;flex:none}
.source-pill:hover { background:#23434a;color:var(--text)}
.section-label { font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--quiet);margin:24px 0 12px}
.metrics { display:grid;gap:9px}
.metric { border-top:1px solid var(--border);padding:13px 0 5px}
.metric-top { display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.metric-label { font-size:10px;color:var(--muted);line-height:1.4;max-width:145px}
.metric-value { font-size:20px;letter-spacing:-.7px;font-weight:400;color:var(--mint);text-align:right;line-height:1.1;white-space:nowrap}
.metric-value small { font-size:9px;color:var(--quiet);display:block;letter-spacing:0;margin-top:4px}
.metric-context { font-size:9px;line-height:1.6;color:var(--quiet);margin-top:8px}
.metric-source { font-size:8px;margin-top:6px;color:#89adae;text-decoration:underline;text-underline-offset:3px;padding:0}
.geometry-note { font-size:10px;line-height:1.7;color:var(--quiet);border-left:2px solid #7d6652;padding-left:10px;margin-top:20px}
.structure-list { display:flex;flex-direction:column;gap:3px}
.structure-link { display:flex;align-items:center;justify-content:space-between;width:100%;font-size:11px;color:var(--muted);padding:8px 0;gap:8px;text-align:left;border-bottom:1px solid rgba(178,215,211,.05)}
.structure-link span { display:flex;align-items:center;gap:8px}
.structure-link i { height:5px;width:5px;border-radius:50%;background:var(--mint);flex:none}
.structure-link svg { width:12px;height:12px;color:var(--quiet)}
.structure-link.active { color:var(--mint)}
.inspector-footer { padding:10px 22px;border-top:1px solid var(--border);flex:none}
.inspector-footer .text-button { font-size:10px;color:var(--quiet)}
.inspector-footer svg { width:14px;height:14px}
.ask-panel { display:flex;flex-direction:column;padding-bottom:18px}
.ask-context { font-size:9px;color:var(--mint);background:#1b383f;padding:9px 10px;border-radius:5px;margin:17px 0 14px;line-height:1.5}
.question-suggestions { display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.question-suggestions button { font-size:10px;line-height:1.5;color:var(--muted);border:1px solid #294951;border-radius:5px;padding:8px 9px;text-align:left}
.question-suggestions button:hover { background:#1b3941;color:var(--mint)}
.answer-history { display:flex;flex-direction:column;gap:17px;margin-bottom:18px}
.question-bubble { font-size:11px;font-weight:500;color:var(--mint);line-height:1.6;padding-bottom:8px}
.answer-bubble { font-size:11px;line-height:1.8;color:var(--muted)}
.answer-bubble h4 { font-size:11px;color:var(--text);margin-bottom:8px;font-weight:550}
.answer-bubble p { margin-bottom:9px;line-height:1.8}
.answer-bubble .source-pills { margin:10px 0}
.answer-related { display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.answer-related button { font-size:9px;color:var(--mint);text-decoration:underline;text-align:left;line-height:1.5;padding:3px 0}
.question-form { margin-top:auto;border:1px solid #3b5c61;background:#132f37;border-radius:8px;overflow:hidden;flex:none}
.question-form:focus-within { border-color:var(--mint)}
.question-form textarea { width:100%;border:0;background:none;resize:vertical;min-height:66px;max-height:150px;padding:12px;color:var(--text);font-size:11px;line-height:1.6;outline:none}
.question-form textarea::placeholder { color:var(--quiet)}
.question-form>div { display:flex;align-items:center;justify-content:space-between;padding:0 9px 9px 12px;gap:8px}
.question-form>div>span { font-size:7px;color:var(--quiet)}
.question-form button { display:flex;align-items:center;justify-content:center;width:29px;height:29px;border-radius:5px;background:var(--mint);color:#0b262d}
.question-form button svg { width:15px;height:15px}

.narration-player { background:#153139;border-top:1px solid #315359;padding:15px 26px 11px;flex:none}
.narration-top { display:flex;align-items:center;justify-content:space-between;gap:15px}
.chapter-trigger { text-align:left;display:grid;grid-template-columns:1fr 16px;column-gap:18px;row-gap:4px}
.chapter-trigger .eyebrow { font-size:8px;color:var(--gold);grid-column:1}
.chapter-trigger strong { font-family:var(--serif);font-size:18px;font-weight:400;grid-column:1}
.chapter-trigger>span:last-child { grid-column:2;grid-row:1/3;align-self:center;color:var(--quiet)}
.chapter-trigger svg { width:14px;height:14px}
.narration-top-actions { display:flex;gap:2px}
.caption-text { font-size:12px;line-height:1.65;color:#c9d8d4;margin:13px 0 10px;min-height:38px;max-height:64px;overflow-y:auto;scrollbar-width:thin}
.playback-row { display:flex;align-items:center;gap:8px}
.playback-row .icon-button { width:25px;height:28px}
.playback-row .icon-button svg { width:14px;height:14px}
.audio-play { width:31px;height:31px;border-radius:50%;background:var(--mint);color:#0b262d;display:flex;align-items:center;justify-content:center;flex:none}
.audio-play svg { width:15px;height:15px}
.audio-play:hover { background:#dcf2e7;color:#0b262d}
.audio-time { font-size:9px;font-variant-numeric:tabular-nums;color:var(--quiet);min-width:63px;margin-left:5px}
.playback-row input[type=range] { accent-color:var(--mint);height:3px;flex:1;min-width:35px}
.playback-row select { background:transparent;border:0;color:var(--muted);font-size:10px;width:49px}
.playback-row select option { background:#18343d}
.audio-status { font-size:9px;color:var(--quiet);line-height:1.4;min-height:0;margin-top:4px}
.audio-status:empty { display:none}

.sheet-dialog { border:1px solid #37565b;background:#10282f;color:var(--text);border-radius:14px;padding:0;width:min(820px,calc(100vw - 40px));max-height:calc(100dvh - 60px);box-shadow:0 30px 100px #0008}
.sheet-dialog::backdrop { background:rgba(0,13,19,.73);backdrop-filter:blur(7px)}
.dialog-header { padding:25px 29px 23px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:sticky;top:0;background:#112b32;z-index:1}
.dialog-header h2 { font-family:var(--serif);font-size:31px;line-height:1.18;letter-spacing:-.6px;margin-top:6px}
.dialog-header .eyebrow { color:var(--gold);font-size:9px}
.dialog-content { padding:25px 29px 30px}
.dialog-content>p { font-size:13px;color:var(--muted);line-height:1.8;margin-bottom:20px}
.dialog-content h3 { font-family:var(--serif);font-size:23px;margin:24px 0 13px}
.dialog-content h4 { font-size:13px;margin-bottom:8px;color:var(--mint)}
.dialog-content ul { padding-left:18px;color:var(--muted);font-size:12px;line-height:1.8}
.dialog-content .source-pills { margin:8px 0}
.source-card { padding:19px 20px;background:#143139;border:1px solid var(--border);border-radius:7px;margin:12px 0}
.source-card .source-meta { font-size:9px;letter-spacing:.04em;color:var(--gold);margin-bottom:10px;display:flex;gap:12px;flex-wrap:wrap}
.source-card h3 { font-family:var(--sans);font-size:14px;line-height:1.5;font-weight:550;margin:0 0 9px}
.source-card p { font-size:12px;color:var(--muted);line-height:1.8}
.source-card p+p { margin-top:10px}
.source-card small { display:block;color:var(--quiet);font-size:10px;line-height:1.7;margin-top:10px}
.source-card a { display:inline-block;font-size:11px;margin-top:10px;text-decoration:underline;text-underline-offset:3px}
.evidence-actions { display:flex;gap:10px;flex-wrap:wrap;margin:19px 0}
.evidence-actions button { font-size:11px;padding:10px 14px;border:1px solid #35575d;border-radius:6px;color:var(--mint)}
.evidence-actions button:hover { background:#1d3c43}
.basis-grid { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.basis-card { padding:19px;border:1px solid #315159;border-radius:8px;background:#15323a}
.basis-card .eyebrow { font-size:8px;color:var(--gold);margin-bottom:10px;display:block}
.basis-card h3 { font-family:var(--sans);font-size:14px;font-weight:550;margin:0 0 10px}
.basis-card p { font-size:11px;color:var(--muted);line-height:1.8}
.uncertainty-item { padding:17px 0;border-top:1px solid var(--border)}
.uncertainty-item h4 { color:#e5d3b9;font-weight:500;font-size:13px;line-height:1.5}
.uncertainty-item p { font-size:12px;color:var(--muted);line-height:1.8}
.journey-event { display:grid;grid-template-columns:115px 1fr;gap:25px;padding:20px 0;border-bottom:1px solid var(--border)}
.journey-event .event-date { font-size:11px;color:var(--mint);line-height:1.6}
.journey-event .event-age { font-size:9px;color:var(--quiet);margin-top:7px;line-height:1.5}
.journey-event h3 { font-size:20px;margin:0 0 9px;line-height:1.25}
.journey-event p { font-size:12px;color:var(--muted);line-height:1.8}
.event-explore { font-size:10px;color:var(--mint);text-decoration:underline;text-underline-offset:3px;margin-top:8px;padding:4px 0}
.glossary-search { width:100%;border:1px solid #3b5c61;border-radius:6px;background:#0d252d;color:var(--text);padding:12px;margin-bottom:15px;font-size:13px}
.glossary-item { padding:15px 0;border-bottom:1px solid var(--border)}
.glossary-item h3 { font-size:15px;font-family:var(--sans);font-weight:550;margin:0 0 6px;color:var(--mint)}
.glossary-item p { font-size:12px;color:var(--muted);line-height:1.8}
.chapter-list { display:grid;gap:8px}
.chapter-item { display:grid;grid-template-columns:29px 1fr auto;align-items:center;gap:12px;width:100%;text-align:left;padding:15px;background:#16333b;border:1px solid var(--border);border-radius:6px}
.chapter-item.active { border-color:var(--mint)}
.chapter-item .chapter-num { font-family:var(--serif);font-size:22px;color:var(--gold)}
.chapter-item strong { font-size:13px;display:block;font-weight:500}
.chapter-item small { font-size:10px;color:var(--quiet);display:block;margin-top:5px}
.transcript-chapter { padding:21px 0;border-bottom:1px solid var(--border)}
.transcript-chapter h3 { font-size:23px;margin:5px 0 12px}
.transcript-chapter p { font-size:13px;color:var(--muted);line-height:1.9}
.transcript-chapter .text-button { font-size:10px;margin-top:8px}
.help-grid { display:grid;grid-template-columns:1fr 1fr;gap:15px}
.help-grid div { padding:17px;background:#16333b;border:1px solid var(--border);border-radius:7px}
.help-grid strong { font-size:12px;display:block;margin-bottom:8px;color:var(--mint)}
.help-grid p { font-size:11px;line-height:1.8;color:var(--muted)}
.toast { position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:100;background:var(--mint);color:#102b30;padding:12px 19px;font-size:12px;border-radius:7px;box-shadow:0 4px 25px #0004;max-width:90vw;line-height:1.5}
.noscript { position:fixed;inset:30%;z-index:100;background:#193a41;padding:30px;border:1px solid var(--mint);line-height:1.8}

/* Responsive workbench. Controls, canvas and captions occupy separate rows. */
:root {
  --muted: #b0c3c3;
  --quiet: #88a5a9;
  --border: rgba(178, 215, 211, .16);
  --rail-width: 190px;
  --inspector-width: 330px;
}
html { overflow-x: clip; scroll-behavior: smooth; }
body { overflow: auto; font-size: 14px; }
button, a, input, select, textarea { touch-action: manipulation; }
button { line-height: 1.4; }
button:disabled { opacity: .45; }
img { max-width: 100%; height: auto; }
small { font-size: 12px; }
.eyebrow { font-size: 11px; letter-spacing: .12em; }
.app { height: 100dvh; min-height: 860px; width: 100%; max-width: 100%; }
.app-header { min-height: 80px; height: 80px; padding: 0 26px; gap: 24px; }
.brand { min-width: 204px; gap: 12px; }
.brand strong { font-size: 26px; }
.brand small { font-size: 9px; letter-spacing: .13em; margin-top: 6px; }
.main-nav { gap: 24px; min-width: 0; }
.nav-button { font-size: 13px; white-space: nowrap; min-height: 44px; }
.header-actions { gap: 9px; flex: none; }
.primary-button, .secondary-button { min-height: 44px; font-size: 13px; padding: 11px 16px; border-radius: 9px; }
.icon-button { width: 40px; height: 40px; border-radius: 8px; }
.text-button { font-size: 13px; min-height: 38px; }
.workspace { grid-template-columns: var(--rail-width) minmax(0, 1fr) var(--inspector-width); min-width: 0; }
.workspace > * { min-width: 0; }

/* Timeline navigation */
.stage-rail { padding: 27px 17px 20px; scrollbar-width: thin; scrollbar-color: #36545a transparent; }
.rail-heading h1 { font-size: 25px; line-height: 1.25; }
.rail-heading .eyebrow { font-size: 10px; }
.rail-heading p { font-size: 12px; line-height: 1.65; }
.stage-list { margin: 25px -7px 24px; }
.stage-button { padding: 13px 9px; gap: 10px; min-height: 80px; }
.stage-button strong { font-size: 13px; line-height: 1.45; }
.stage-button .stage-year { font-size: 11px; margin-bottom: 4px; }
.stage-button .stage-sub { font-size: 11px; margin-top: 5px; }
.stage-list:before { left: 18px; }
.rail-bottom p { font-size: 12px; line-height: 1.65; }
.rail-bottom .text-button, .basis-link { font-size: 11px; line-height: 1.6; }
.rail-bottom .text-button { gap: 7px; }
.rail-bottom .text-button svg { flex: none; }

/* A roomy center column with an actual toolbar above the model. */
.explorer { overflow-y: auto; overflow-x: clip; scrollbar-width: thin; scrollbar-color: #36545a transparent; }
.stage-heading { flex: none; min-height: 100px; padding: 20px 25px; align-items: flex-start; flex-wrap: wrap; gap: 12px 24px; }
.stage-heading > div:first-child { min-width: 0; flex: 1 1 260px; }
.stage-heading h2 { font-size: clamp(27px, 2.2vw, 34px); line-height: 1.18; overflow-wrap: break-word; }
.stage-heading .eyebrow { font-size: 10px; line-height: 1.5; }
.age-badge { align-self: center; max-width: 100%; gap: 9px; }
.age-badge small { font-size: 9px; letter-spacing: .09em; margin-bottom: 4px; }
.age-badge strong { font-size: 12px; line-height: 1.5; white-space: normal; }
.age-badge svg { width: 18px; height: 18px; }
.viewer-shell { display: flex; flex-direction: column; flex: 1 0 465px; min-height: 465px; overflow: visible; }
.viewer-top-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 20px; background: rgba(10, 32, 39, .66); border-bottom: 1px solid var(--border); flex: none; position: relative; z-index: 3; }
.view-topline { position: static; inset: auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; pointer-events: auto; flex: 1 1 190px; order: 0; }
.view-topline .icon-button { width: 34px; height: 34px; }
.view-tag { font-size: 10px; line-height: 1.5; letter-spacing: .1em; }
.view-presets { position: static; inset: auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 3px; padding: 4px; flex: 0 1 auto; order: 1; border-radius: 9px; background: #102b33; backdrop-filter: none; }
.view-preset { font-size: 11px; min-height: 32px; min-width: 43px; padding: 6px 9px; border-radius: 5px; color: #a6c0c2; }
.view-preset.active { background: #2c5156; color: #e0f0e6; }
.view-settings { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; margin-left: auto; max-width: 100%; order: 2; }
.view-settings > label, .view-settings > span, .view-settings .settings-label { font-size: 11px; color: var(--quiet); }
.view-settings select { max-width: 100%; min-height: 36px; padding: 7px 28px 7px 10px; background: #15333b; color: var(--text); border: 1px solid #36575d; border-radius: 7px; font-size: 12px; }
#appearance-controls, .appearance-controls { display: inline-flex; border: 1px solid #37585d; border-radius: 8px; padding: 3px; gap: 3px; background: #102931; }
.appearance-controls .setting-label { align-self: center; padding: 0 6px; font-size: 10px; color: var(--quiet); white-space: nowrap; }
button[data-appearance] { min-height: 32px; border-radius: 5px; padding: 5px 10px; font-size: 12px; color: var(--muted); white-space: nowrap; }
button[data-appearance].active, button[data-appearance][aria-pressed="true"] { background: #32534f; color: #e1f1e5; }
#gallery-button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 7px 10px; border: 1px solid #36575d; border-radius: 8px; font-size: 12px; white-space: nowrap; color: var(--mint); background: #142f37; }
#gallery-button svg { width: 16px; height: 16px; }
.viewer-stage { display: flex; flex-direction: column; position: relative; flex: 1; min-height: 365px; isolation: isolate; }
.single-view { position: relative; display: flex; flex: 1; height: auto; min-height: 290px; }
.heart-view { --scene-label-inset-top: 16px; --scene-label-inset-right: 16px; --scene-label-inset-bottom: 42px; --scene-label-inset-left: 16px; flex: 1; min-width: 0; min-height: 0; height: auto; overflow: hidden; }
.single-view > .heart-view { min-height: 290px; }
.viewer-legend { position: static; inset: auto; flex: none; flex-wrap: wrap; gap: 7px 16px; padding: 12px 22px 0; font-size: 11px; min-height: 30px; pointer-events: auto; background: rgba(8, 28, 34, .25); }
.viewer-legend > span { gap: 6px; }
.viewer-legend button { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 4px; }
.viewer-legend svg { width: 14px; height: 14px; }
.swatch { width: 7px; height: 7px; }
.viewer-caption { position: static; inset: auto; flex: none; padding: 8px 22px 15px; gap: 10px 18px; align-items: flex-start; flex-wrap: wrap; pointer-events: auto; background: rgba(8, 28, 34, .25); }
.basis-label { font-size: 11px; line-height: 1.5; }
.interaction-hint { font-size: 10px; line-height: 1.5; color: var(--quiet); }
.viewer-toolbar { flex: none; min-height: 76px; padding: 9px 12px; gap: 4px; flex-wrap: wrap; background: #0f2931; }
.tool-group { padding: 0 8px; gap: 3px; min-width: 0; }
.tool-button { min-height: 50px; min-width: 58px; padding: 6px 9px; gap: 6px; font-size: 11px; border-radius: 8px; }
.tool-button svg { width: 19px; height: 19px; }
.tool-button[aria-pressed="true"] { background: #26484d; color: #d9eee2; }
.visual-note { font-size: 12px; line-height: 1.6; padding: 11px 22px; }
.model-controls-toggle, #model-controls-toggle { display: none; }
.loading-view { z-index: 5; padding: 24px; text-align: center; }
.loading-view small { font-size: 12px; }
.fallback-view { inset: 24px; padding: 24px; }
.fallback-view p { font-size: 14px; }


/* Reading and questions */
.inspector { min-width: 0; }
.inspector-tabs { min-height: 58px; height: 58px; padding: 0 23px; gap: 24px; flex: none; }
.inspector-tab { font-size: 13px; min-height: 44px; white-space: nowrap; }
.inspector-panel { padding: 25px 23px; overflow-wrap: break-word; }
.panel-intro h3, .explanation-title { font-size: 28px; line-height: 1.22; margin: 10px 0 15px; }
.panel-intro p, .explanation-summary, .answer-bubble { font-size: 14px; line-height: 1.8; }
.explanation-role { font-size: 13px; line-height: 1.75; }
.selection-banner, .selection-banner button { font-size: 12px; }
.key-points { margin: 22px 0; }
.key-points li { font-size: 13px; line-height: 1.75; padding: 11px 0 11px 14px; }
.key-points li:before { top: 20px; width: 4px; height: 4px; }
.source-pills { gap: 7px; }
.source-pill { font-size: 11px; padding: 7px 9px; border-radius: 6px; max-width: 100%; overflow-wrap: anywhere; }
.source-pill svg { width: 12px; height: 12px; }
.section-label { font-size: 10px; margin: 28px 0 14px; }
.metric { padding: 16px 0 8px; }
.metric-label { font-size: 12px; max-width: 155px; line-height: 1.5; }
.metric-value { font-size: 24px; line-height: 1.15; }
.metric-value small { font-size: 11px; line-height: 1.5; }
.metric-context { font-size: 12px; line-height: 1.7; margin-top: 10px; }
.metric-source { font-size: 11px; min-height: 30px; margin-top: 4px; }
.geometry-note { font-size: 12px; line-height: 1.75; padding-left: 12px; }
.structure-link { font-size: 13px; line-height: 1.5; min-height: 43px; padding: 10px 0; }
.structure-link span { min-width: 0; }
.structure-link svg { flex: none; width: 15px; height: 15px; }
.inspector-footer { padding: 10px 23px; }
.inspector-footer .text-button { font-size: 12px; }
.ask-context { font-size: 12px; padding: 11px 12px; border-radius: 7px; }
.question-suggestions button { min-height: 38px; font-size: 12px; padding: 9px 10px; border-radius: 7px; }
.answer-history { gap: 24px; }
.question-bubble, .answer-bubble h4 { font-size: 14px; line-height: 1.6; }
.answer-bubble p { line-height: 1.8; }
.answer-related button { font-size: 12px; min-height: 30px; }
.question-form { border-radius: 10px; }
.question-form textarea { font-size: 14px; min-height: 90px; padding: 13px; line-height: 1.65; }
.question-form > div { padding: 0 10px 10px 13px; }
.question-form > div > span { font-size: 10px; line-height: 1.5; }
.question-form button { width: 38px; height: 38px; border-radius: 7px; flex: none; }
.question-form button svg { width: 18px; height: 18px; }

/* Narration stays in document flow; it never floats across the model. */
.narration-player { position: relative; flex: none; padding: 15px 22px 14px; background: #17373e; }
.narration-top { align-items: flex-start; gap: 10px; }
.chapter-trigger { min-width: 0; gap: 5px 12px; padding: 0; }
.chapter-trigger .eyebrow { font-size: 10px; line-height: 1.5; }
.chapter-trigger strong { font-size: 21px; line-height: 1.25; overflow-wrap: break-word; }
.narration-top-actions { flex: none; }
.narration-top-actions .icon-button { width: 34px; height: 34px; }
.caption-text { font-size: 14px; line-height: 1.7; min-height: 38px; max-height: 64px; margin: 12px 0; scrollbar-color: #547773 transparent; }
.playback-row { gap: 7px; min-height: 40px; }
.playback-row .icon-button { width: 30px; height: 36px; }
.playback-row .icon-button svg { width: 17px; height: 17px; }
.audio-play { width: 38px; height: 38px; }
.audio-play svg { width: 18px; height: 18px; }
.audio-time { font-size: 11px; min-width: 72px; margin-left: 3px; }
.playback-row select { min-height: 36px; width: 54px; font-size: 12px; }
.playback-row input[type="range"] { min-width: 40px; min-height: 28px; }
.audio-status { font-size: 11px; line-height: 1.6; margin-top: 6px; }

/* Public story, guide images and supporting reading */
.sheet-dialog { width: min(960px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); overflow-x: clip; overflow-y: auto; border-radius: 18px; }
.dialog-header { padding: 27px 32px 24px; align-items: flex-start; gap: 20px; }
.dialog-header > div { min-width: 0; }
.dialog-header h2 { font-size: clamp(27px, 3vw, 37px); line-height: 1.15; overflow-wrap: break-word; }
.dialog-header .eyebrow { font-size: 10px; }
.dialog-header .icon-button { flex: none; }
.dialog-content { padding: 28px 32px 34px; }
.dialog-content > p { font-size: 15px; line-height: 1.85; }
.dialog-content h3 { font-size: 26px; line-height: 1.25; }
.dialog-content h4 { font-size: 15px; line-height: 1.5; }
.dialog-content ul { font-size: 14px; line-height: 1.8; }
.source-card { padding: 22px; border-radius: 10px; }
.source-card .source-meta { font-size: 11px; gap: 8px 14px; }
.source-card h3 { font-size: 16px; line-height: 1.5; }
.source-card p, .uncertainty-item p, .journey-event p { font-size: 14px; line-height: 1.85; }
.source-card small { font-size: 12px; line-height: 1.75; }
.source-card a { font-size: 13px; }
.evidence-actions button { font-size: 13px; min-height: 42px; border-radius: 8px; }
.basis-grid { gap: 16px; }
.basis-card { padding: 22px; border-radius: 10px; }
.basis-card .eyebrow { font-size: 10px; }
.basis-card h3 { font-size: 16px; line-height: 1.5; }
.basis-card p, .help-grid p { font-size: 14px; line-height: 1.8; }
.uncertainty-item h4 { font-size: 15px; }
.journey-event { grid-template-columns: 125px minmax(0, 1fr); gap: 25px; padding: 24px 0; }
.journey-event .event-date { font-size: 13px; }
.journey-event .event-age { font-size: 12px; line-height: 1.6; }
.journey-event h3 { font-size: 24px; }
.event-explore { font-size: 13px; min-height: 34px; }
.glossary-search { font-size: 16px; min-height: 46px; }
.glossary-item h3 { font-size: 18px; }
.glossary-item p { font-size: 14px; line-height: 1.8; }
.chapter-item { padding: 17px; border-radius: 9px; grid-template-columns: 32px minmax(0, 1fr) auto; }
.chapter-item strong { font-size: 15px; line-height: 1.5; }
.chapter-item small { font-size: 12px; line-height: 1.5; }
.transcript-chapter h3 { font-size: 27px; }
.transcript-chapter p { font-size: 15px; line-height: 1.9; }
.transcript-chapter .text-button { font-size: 13px; }
.help-grid { gap: 16px; }
.help-grid > div { padding: 21px; border-radius: 10px; }
.help-grid strong { font-size: 15px; line-height: 1.5; }
.story-intro { max-width: none; font-size: 17px; line-height: 1.85; color: #d6e2dd; }
.story-intro > p { max-width: 65ch; }
.story-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 28px; align-items: center; margin: 0 0 28px; }
.story-hero > * { min-width: 0; }
.story-hero figure { margin: 0; }
.story-hero figcaption { margin-top: 10px; color: var(--quiet); font-size: 12px; line-height: 1.7; }
.story-hero img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border); background: #0b242b; }
.story-hero h3 { font-size: 31px; line-height: 1.17; margin: 0 0 16px; }
.story-hero p { font-size: 15px; line-height: 1.85; color: var(--muted); }
.story-hero p + p { margin-top: 14px; }
.story-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 28px; }
.story-actions button, .story-actions a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid #45665f; border-radius: 9px; font-size: 13px; line-height: 1.5; color: var(--mint); background: #1b3c41; }
.story-actions .primary-button, .story-actions button:first-child { color: #0b292f; background: var(--mint); border-color: var(--mint); }
.story-highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; margin: 26px 0 32px; }
.story-highlights > * { margin: 0; padding: 19px; border: 1px solid #315159; background: #15343b; border-radius: 10px; min-width: 0; }
.story-highlights strong { display: block; font-size: 17px; line-height: 1.4; color: #d8eade; margin-bottom: 8px; }
.story-highlights p, .story-highlights small { font-size: 13px; color: var(--muted); line-height: 1.75; }
.story-highlights span { display: block; font-size: 13px; color: var(--muted); line-height: 1.75; }
.story-step { padding: 22px 24px; margin: 15px 0; border: 1px solid #2d4c52; border-left: 3px solid #a9cdbd; border-radius: 0 11px 11px 0; background: #122f37; }
.story-step .eyebrow { color: #d9b59b; }
.story-step h3 { margin: 7px 0 12px; font-size: 24px; line-height: 1.3; }
.story-step p { font-size: 14px; line-height: 1.85; color: var(--muted); }
.story-step p + p { margin-top: 12px; }
.visual-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 23px 0; }
.art-card { min-width: 0; margin: 0; border: 1px solid #31535a; border-radius: 13px; overflow: hidden; background: #15323a; }
.art-card img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: #0d252d; }
.art-card figcaption, .art-card .art-caption, .art-card > div { padding: 19px 20px 22px; }
.art-card h3 { font-size: 23px; margin: 0 0 10px; line-height: 1.3; }
.art-card p, .art-card figcaption { font-size: 14px; line-height: 1.8; color: var(--muted); }
.art-card small { display: block; font-size: 12px; line-height: 1.7; color: var(--quiet); margin-top: 10px; }
.art-card .secondary-button { margin-top: 16px; text-align: left; }
.story-privacy { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12px !important; line-height: 1.8; color: var(--quiet) !important; }
.toast { font-size: 13px; max-width: min(560px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 9px; }

/* Presentation uses the same rows and safe canvas insets. */
.presentation .stage-rail, .presentation .inspector { display: none; }
.presentation .workspace { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.presentation .stage-heading { padding-left: clamp(24px, 4vw, 70px); padding-right: clamp(24px, 4vw, 70px); }
.presentation .viewer-top-controls, .presentation .viewer-legend, .presentation .viewer-caption { padding-left: clamp(24px, 4vw, 70px); padding-right: clamp(24px, 4vw, 70px); }
.presentation .narration-player { padding-left: max(24px, calc((100vw - 1040px) / 2)); padding-right: max(24px, calc((100vw - 1040px) / 2)); }
.presentation .caption-text { font-size: 15px; }

@media (min-width: 1600px) {
  :root { --rail-width: 210px; --inspector-width: 360px; }
  .stage-rail { padding: 32px 22px 24px; }
  .inspector-panel { padding: 28px; }
  .inspector-tabs { padding: 0 28px; }
  .stage-heading { padding: 24px 32px; }
  .viewer-top-controls { padding-left: 27px; padding-right: 27px; }
  .viewer-stage { min-height: 400px; }
  .single-view, .single-view > .heart-view { min-height: 325px; }
}

/* Tablet landscape: five stage chips above a substantial model and reading panel. */
@media (max-width: 1239px) {
  .app { min-height: 920px; }
  .app-header { padding: 0 20px; gap: 17px; }
  .brand { min-width: 180px; }
  .brand strong { font-size: 24px; }
  .brand img { width: 34px; height: 34px; }
  .main-nav { gap: 20px; }
  .header-actions { gap: 5px; }
  .workspace { grid-template-columns: minmax(0, 1fr) 320px; grid-template-rows: auto minmax(0, 1fr); }
  .stage-rail { grid-column: 1 / -1; grid-row: 1; display: block; padding: 12px 20px; overflow-x: auto; overflow-y: hidden; border-right: 0; border-bottom: 1px solid var(--border); scrollbar-width: thin; overscroll-behavior-x: contain; }
  .rail-heading, .rail-bottom { display: none; }
  .stage-list { display: flex; gap: 9px; width: max-content; min-width: 100%; margin: 0; }
  .stage-list:before, .stage-button:before { display: none; }
  .stage-button { flex: 1 0 160px; min-width: 150px; width: auto; min-height: 66px; margin: 0; padding: 11px 14px; border: 1px solid #29464d; border-radius: 9px; gap: 0; }
  .stage-button.active { border-color: #719b8f; background: #23454a; }
  .stage-button .stage-year { font-size: 10px; margin-bottom: 4px; }
  .stage-button strong { font-size: 12px; }
  .stage-button .stage-sub { display: none; }
  .explorer { grid-column: 1; grid-row: 2; }
  .inspector { grid-column: 2; grid-row: 2; }
  .stage-heading { padding: 19px 22px; gap: 12px; min-height: 100px; }
  .stage-heading h2 { font-size: 29px; }
  .view-topline { flex-basis: 140px; }
  .viewer-top-controls { padding: 12px 17px; gap: 9px 12px; }
  .view-settings { width: 100%; justify-content: flex-start; margin-left: 0; }
  .tool-group { padding: 0 6px; }
  .tool-button { min-width: 54px; font-size: 10px; padding: 6px 8px; }
  .inspector-tabs { padding: 0 21px; gap: 22px; }
  .inspector-panel { padding: 24px 21px; }
  .interaction-hint { display: none; }
  .presentation .explorer { grid-column: 1; grid-row: 1; }
  .presentation .view-settings { width: auto; margin-left: auto; }
}


/* Tablet portrait and phones follow the page, without miniature scrolling panels. */
@media (max-width: 979px) {
  .app { height: auto; min-height: 100dvh; }
  .app-header { height: auto; min-height: 78px; flex-wrap: wrap; padding: 16px 22px 0; gap: 12px 18px; }
  .brand { min-width: 0; margin-right: auto; }
  .header-actions { margin-left: auto; }
  .main-nav { order: 3; flex: 1 0 100%; justify-content: flex-start; align-items: stretch; gap: 29px; min-height: 47px; overflow-x: auto; }
  .nav-button { min-height: 46px; font-size: 13px; }
  .workspace { display: flex; flex-direction: column; min-height: 0; flex: none; }
  .stage-rail { order: 0; width: 100%; padding: 13px 20px; flex: none; }
  .stage-list { min-width: max-content; }
  .stage-button { flex: 0 0 auto; min-width: 145px; }
  .explorer { order: 1; overflow: visible; min-height: 0; }
  .stage-heading { padding: 24px; min-height: 100px; }
  .stage-heading h2 { font-size: 32px; }
  .viewer-shell { flex: none; min-height: 0; }
  .viewer-top-controls { padding: 13px 20px; }
  .view-topline { flex: 1 1 220px; }
  .view-settings { width: auto; margin-left: auto; }
  .viewer-stage { height: clamp(510px, 68vw, 670px); min-height: 0; flex: none; }
  .single-view, .single-view > .heart-view { min-height: 0; }
  .viewer-toolbar { min-height: 80px; padding: 12px 18px; gap: 6px; }
  .tool-group { gap: 5px; padding: 0 10px; }
  .tool-button { min-width: 61px; font-size: 11px; min-height: 52px; }
  .viewer-legend { padding-left: 24px; padding-right: 24px; font-size: 12px; }
  .viewer-caption { padding-left: 24px; padding-right: 24px; }
  .basis-label { font-size: 12px; }
  .inspector { order: 2; border-left: 0; border-top: 1px solid #36575c; height: auto; min-height: 0; background: #102a32; }
  .inspector-tabs { position: sticky; top: 0; z-index: 6; background: #102a32; padding: 0 26px; gap: 32px; min-height: 62px; height: 62px; }
  .inspector-tab { font-size: 14px; }
  .inspector-panel { overflow: visible; min-height: 0; max-height: none; padding: 29px 26px; flex: none; }
  .panel-intro, #explanation-content { max-width: 780px; }
  .panel-intro h3, .explanation-title { font-size: 32px; }
  .panel-intro p, .explanation-summary, .answer-bubble { font-size: 15px; line-height: 1.85; }
  .key-points li { font-size: 14px; }
  .metrics { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 19px 25px; }
  .metric-label { max-width: 160px; }
  .structure-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 25px; }
  .structure-link { font-size: 14px; }
  .question-suggestions button { font-size: 13px; }
  .question-form { margin-top: 20px; max-width: 780px; }
  .question-form textarea { font-size: 16px; min-height: 100px; }
  .question-bubble, .answer-bubble h4 { font-size: 15px; }
  .answer-history { max-width: 780px; }
  .inspector-footer { padding: 12px 26px; }
  .narration-player { padding: 20px 24px 18px; }
  .caption-text { font-size: 15px; max-height: 104px; }
  .chapter-trigger strong { font-size: 24px; }
  .playback-row { gap: 11px; }
  .presentation .workspace { display: flex; }
  .presentation .explorer { min-height: 0; height: auto; }
  .presentation .viewer-stage { height: min(76dvh, 760px); min-height: 480px; }
  .presentation .viewer-top-controls, .presentation .viewer-legend, .presentation .viewer-caption { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 600px) {
  .app-header { padding: 14px 16px 0; gap: 10px 12px; }
  .brand { gap: 9px; }
  .brand strong { font-size: 24px; }
  .brand img { width: 32px; height: 32px; }
  .brand small { display: none; }
  .header-actions #help-button { display: none; }
  .primary-button.story-start { min-height: 44px; padding: 8px 12px; font-size: 12px; gap: 7px; white-space: nowrap; }
  .story-start span:last-child { display: inline; }
  .story-start svg { width: 16px; height: 16px; }
  .main-nav { justify-content: space-between; gap: 12px; min-height: 46px; }
  .nav-button { font-size: 12px; padding: 0 1px; }
  .stage-rail { padding: 12px 16px; }
  .stage-list { gap: 8px; }
  .stage-button { min-width: 134px; min-height: 66px; padding: 10px 12px; }
  .stage-button strong { font-size: 12px; }
  .stage-button .stage-year { font-size: 10px; }
  .stage-heading { padding: 22px 20px 20px; gap: 13px; }
  .stage-heading h2 { font-size: 31px; line-height: 1.2; }
  .stage-heading > div:first-child { flex-basis: 100%; }
  .age-badge { width: 100%; }
  .age-badge > span:last-child { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; }
  .age-badge small { font-size: 9px; margin: 0; }
  .age-badge strong { font-size: 12px; }
  .viewer-top-controls { padding: 12px 16px; gap: 10px 8px; }
  .view-topline { flex: 1 1 100%; order: 0; }
  .view-topline .icon-button { width: 34px; height: 32px; }
  .view-presets { order: 1; flex: 1 1 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .view-preset { font-size: 12px; min-width: 0; min-height: 36px; padding: 6px; }
  .view-settings { order: 2; justify-content: space-between; width: 100%; margin-left: 0; gap: 8px; }
  .view-settings > label, .view-settings > span, .view-settings .settings-label { font-size: 11px; }
  button[data-appearance] { min-height: 34px; padding: 5px 9px; font-size: 12px; }
  #gallery-button { min-height: 40px; font-size: 12px; padding: 7px 9px; }
  .viewer-stage { height: clamp(470px, 112vw, 590px); }
  .heart-view { --scene-label-inset-right: 12px; --scene-label-inset-left: 12px; --scene-label-inset-bottom: 42px; }
  .viewer-legend { font-size: 11px; gap: 6px 12px; padding: 10px 18px 0; }
  .viewer-caption { padding: 9px 18px 15px; }
  .basis-label { font-size: 11px; line-height: 1.6; }
  .viewer-toolbar { display: flex; justify-content: flex-start; align-items: stretch; gap: 8px; padding: 12px 14px; }
  .tool-group { flex: 1 1 auto; padding: 0; border: 0; gap: 4px; justify-content: space-evenly; }
  .tool-group:first-child { flex-basis: 100%; }
  .tool-button { flex: 1 1 0; min-width: 0; min-height: 49px; padding: 6px 7px; font-size: 11px; }
  .tool-button svg { width: 19px; height: 19px; }
  .tool-group.tools-secondary { border-left: 1px solid var(--border); padding-left: 7px; }
  .tools-secondary .tool-button { display: flex; }
  .viewer-toolbar .icon-button { align-self: center; width: 35px; height: 40px; }
  .model-controls-toggle, #model-controls-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; color: var(--mint); padding: 10px 16px; font-size: 13px; background: #14323a; border-top: 1px solid var(--border); }
  .viewer-toolbar[data-expanded="false"] .tools-secondary { display: none; }
  .visual-note { padding: 12px 18px; font-size: 12px; }
  .inspector-tabs { padding: 0 20px; gap: 28px; min-height: 59px; height: 59px; }
  .inspector-panel { padding: 25px 20px; }
  .panel-intro h3, .explanation-title { font-size: 30px; }
  .metrics { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .metric-top { display: flex; }
  .metric-value { text-align: right; margin-top: 0; }
  .metric-value small { display: block; margin-left: 0; }
  .metric-label { max-width: 58%; font-size: 13px; }
  .metric-context { font-size: 13px; }
  .structure-list { grid-template-columns: minmax(0, 1fr); }
  .structure-link { min-height: 46px; }
  .inspector-footer { padding: 12px 20px; }
  .narration-player { padding: 18px 18px 16px; }
  .chapter-trigger strong { font-size: 22px; }
  .narration-top-actions { gap: 0; }
  .narration-top-actions .icon-button { width: 32px; height: 36px; }
  .caption-text { font-size: 14px; max-height: 120px; line-height: 1.75; }
  .playback-row { display: grid; grid-template-columns: 32px 40px 32px minmax(70px, 1fr) 54px 32px; gap: 8px 7px; }
  .playback-row .icon-button { width: 32px; }
  .audio-play { width: 40px; height: 40px; }
  .audio-time { min-width: 0; font-size: 11px; margin-left: 4px; }
  .playback-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; width: 100%; margin: 0; min-height: 28px; }
  .playback-row select { grid-column: 5; grid-row: 1; width: 54px; }
  #audio-mute { grid-column: 6; grid-row: 1; }
  .audio-status { font-size: 11px; line-height: 1.6; }
  .sheet-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 24px); border-radius: 13px; }
  .dialog-header { padding: 22px 20px 20px; gap: 12px; }
  .dialog-header h2 { font-size: 29px; }
  .dialog-header .icon-button { width: 34px; height: 36px; }
  .dialog-content { padding: 24px 20px 28px; }
  .dialog-content > p { font-size: 14px; }
  .basis-grid, .help-grid, .story-hero, .story-highlights, .visual-gallery { grid-template-columns: minmax(0, 1fr); }
  .story-hero { gap: 22px; }
  .story-hero h3 { font-size: 29px; }
  .story-intro { font-size: 16px; }
  .story-highlights { gap: 11px; }
  .story-highlights > * { padding: 18px; }
  .story-step { padding: 20px 18px; }
  .story-actions { gap: 9px; }
  .story-actions button, .story-actions a { flex: 1 1 auto; }
  .art-card img { aspect-ratio: auto; height: auto; }
  .journey-event { grid-template-columns: minmax(0, 1fr); gap: 11px; padding: 24px 0; }
  .journey-event .event-date { font-size: 13px; }
  .journey-event .event-age { font-size: 12px; margin-top: 2px; }
  .journey-event h3 { font-size: 24px; }
  .chapter-item { grid-template-columns: 26px minmax(0, 1fr) auto; padding: 15px 12px; gap: 10px; }
  .chapter-item strong { font-size: 14px; }
  .chapter-item small { font-size: 11px; }
  .source-card { padding: 18px; }
  .presentation .stage-heading, .presentation .viewer-top-controls { padding-left: 18px; padding-right: 18px; }
  .presentation .viewer-stage { height: 66dvh; min-height: 470px; }
  .presentation .narration-player { padding: 18px; }
  .fallback-view { inset: 16px; padding: 20px; }
  .noscript { inset: 12%; padding: 24px; }
}

@media (max-width: 359px) {
  .app-header { padding-left: 12px; padding-right: 12px; gap: 10px 7px; }
  .brand { gap: 7px; }
  .brand strong { font-size: 22px; }
  .brand img { width: 28px; height: 28px; }
  .primary-button.story-start { padding: 8px 9px; font-size: 11px; }
  .main-nav { gap: 7px; }
  .nav-button { font-size: 11px; }
  .view-settings > label, .view-settings > span, .view-settings .settings-label { flex-basis: 100%; }
  .playback-row { grid-template-columns: 30px 38px 30px minmax(58px, 1fr) 48px 30px; gap: 7px 4px; }
  .playback-row select { width: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}


/* Keep the complete story player comfortably in view after a mobile start. */
.narration-player { scroll-margin-bottom: 24px; }

/* Journey navigation remains available when the surrounding workbench is hidden. */
.journey-controls {
  flex: none;
  min-width: 0;
  padding: 15px 22px 13px;
  border-bottom: 1px solid #36565b;
  background: linear-gradient(115deg, #17383e, #112d35);
}
.journey-control-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 13px; min-width: 0; }
.journey-moment { display: flex; flex-direction: column; gap: 7px; flex: 1 1 200px; min-width: 0; }
.journey-moment label { color: #c7ddd2; font-size: 11px; font-weight: 600; letter-spacing: .025em; }
.journey-moment select {
  width: 100%; max-width: 100%; min-width: 0; min-height: 44px;
  padding: 10px 32px 10px 12px; border: 1px solid #52756e; border-radius: 8px;
  background: #0e2b33; color: #edf3e9; font-size: 13px; line-height: 1.45;
}
.journey-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 2 1 430px; min-width: 0; gap: 7px; }
.journey-actions button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; min-height: 44px; padding: 9px 10px; border: 1px solid #416269; border-radius: 8px;
  background: #1b3d45; color: #d3e8df; font-size: 12px; font-weight: 500; line-height: 1.4; text-align: center;
}
.journey-actions button > span:last-child { min-width: 0; overflow-wrap: break-word; }
.journey-actions button svg { width: 16px; height: 16px; flex: none; }
.journey-actions button:hover { background: #2a4f55; border-color: #7a9e96; }
.journey-actions button[aria-pressed="true"], .journey-actions button[aria-expanded="true"] { background: #315650; border-color: #94bca8; color: #f0f7ed; }
.journey-actions .journey-play { background: var(--mint); border-color: var(--mint); color: #0a2a30; font-weight: 650; }
.journey-actions .journey-play:hover { background: #d4ebdc; border-color: #d4ebdc; color: #09252b; }
.journey-status-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 7px 14px; margin-top: 10px; min-width: 0; }
#journey-status { flex: 1 1 250px; font-size: 12px; line-height: 1.65; color: #adc7c6; overflow-wrap: break-word; }
#journey-status:empty { display: none; }
#listen-here { min-height: 40px; padding: 7px 11px; color: #d4eadc; font-size: 12px; border: 1px solid #476a65; border-radius: 7px; background: #16383e; }
#listen-here:hover { background: #294b4e; }
.presentation .journey-controls { padding-left: clamp(24px, 4vw, 70px); padding-right: clamp(24px, 4vw, 70px); }

/* Learning can be opened beside the presentation without leaving the current view. */
.presentation-panel-heading { display: none; }
.presentation.presentation-question-open .presentation-panel-heading { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 12px 18px; border-bottom: 1px solid #45665f; background: #1a393d; }
.presentation-panel-heading > span { min-width: 0; color: #c7e0d3; font-size: 13px; line-height: 1.5; }
#close-presentation-panel { flex: none; min-height: 40px; padding: 8px 11px; border: 1px solid #789b8b; border-radius: 8px; color: #e2efdf; background: #31514a; font-size: 12px; line-height: 1.4; }
.presentation #close-learning-panel { display: none; }
.learning-panel-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 9px 12px; margin-bottom: 12px; }
.learning-panel-top .eyebrow { flex: 1 1 110px; font-size: 10px; line-height: 1.6; }
#close-learning-panel {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 8px 10px; border: 1px solid #3e6266; border-radius: 8px;
  background: #193b43; color: var(--mint); font-size: 12px; line-height: 1.4;
}
#close-learning-panel svg { width: 15px; height: 15px; }
.panel-intro .learning-scope { margin: 13px 0 17px; padding: 11px 12px; border-left: 2px solid #a9cbbd; border-radius: 0 6px 6px 0; background: #193941; color: #bfd2cb; font-size: 12px; line-height: 1.75; }
.presentation.presentation-question-open .inspector { display: flex; }


/* Narration exposes its current context and gives auto-advance an explicit control. */
.narration-context { margin-top: 12px; padding: 9px 11px; border: 1px solid #42645f; border-radius: 7px; background: #123139; color: #c8dfd2; font-size: 12px; line-height: 1.65; }
.narration-context:empty { display: none; }
.narration-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #3a5a5c; }
.narration-options label { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; flex: 1 1 220px; font-size: 12px; line-height: 1.6; color: #bdd2cb; }
.narration-options input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--mint); }
.narration-options button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 11px; border: 1px solid #58786f; border-radius: 7px; background: #1b3b40; color: #d4e7da; font-size: 12px; }
.narration-options button svg { width: 15px; height: 15px; }

/* Chapters are grouped by historical moment; full titles stay visible. */
.chapter-dialog { width: min(960px, calc(100vw - 48px)); }
.chapter-current { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 0 0 26px; padding: 19px 21px; border: 1px solid #5a7e6f; border-radius: 12px; background: #1c3b3c; }
.chapter-current > div { display: flex; flex-wrap: wrap; gap: 9px; min-width: 0; flex: 1 1 100%; }
.chapter-current > p { flex: 1 1 100%; }
.chapter-current p { font-size: 14px; line-height: 1.75; color: #d1e1d7; }
.chapter-current p + p { margin-top: 5px; }
.chapter-current .eyebrow { font-size: 10px; color: #e5c2a5; }
.chapter-current h3 { margin: 5px 0 9px; font-size: 24px; line-height: 1.25; }
.chapter-current button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 9px 13px; border: 1px solid #7b9d89; border-radius: 8px; color: #d6eadc; background: #294b48; font-size: 13px; line-height: 1.4; }
.chapter-current button:first-of-type { background: #b2d9cc; border-color: #b2d9cc; color: #0c2b30; }
.chapter-current button svg { width: 16px; height: 16px; }
.chapter-groups { display: grid; gap: 27px; }
.chapter-group { min-width: 0; }
.chapter-group > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 7px 16px; margin-bottom: 12px; }
.chapter-group h3, .chapter-groups > section > h3 { font-size: 24px; line-height: 1.3; margin: 0 0 12px; }
.chapter-group > header h3 { margin: 0; }
.chapter-group > header p, .chapter-group > header small { font-size: 12px; color: var(--quiet); line-height: 1.6; }
.chapter-dialog .chapter-list { gap: 9px; }
.chapter-dialog .chapter-item { grid-template-columns: 32px minmax(0, 1fr) auto; padding: 17px; gap: 5px 13px; }
.chapter-dialog .chapter-item .chapter-num { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.chapter-dialog .chapter-item > span:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; min-width: 0; }
.chapter-dialog .chapter-item strong { font-size: 15px; line-height: 1.5; white-space: normal; overflow: visible; overflow-wrap: break-word; }
.chapter-dialog .chapter-item small { font-size: 12px; line-height: 1.6; }
.chapter-duration { display: block; color: #a5c2bd; font-size: 11px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.chapter-action { display: grid; grid-template-columns: 14px auto; grid-template-rows: auto auto; align-items: center; justify-content: end; gap: 3px 5px; color: #c6e2d2; font-size: 12px; line-height: 1.5; white-space: nowrap; }
.chapter-action > .chapter-duration { grid-column: 1 / -1; grid-row: 1; justify-self: end; text-align: right; }
.chapter-action > svg { grid-column: 1; grid-row: 2; }
.chapter-action > span:last-child:not(.chapter-duration) { grid-column: 2; grid-row: 2; }
.chapter-action svg { width: 14px; height: 14px; }
.chapter-item > .chapter-duration { grid-column: 3; grid-row: 1; align-self: end; text-align: right; }
.chapter-item > .chapter-action { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.chapter-dialog .chapter-item > svg { grid-column: 3; grid-row: 1 / span 2; }
.chapter-dialog .chapter-item.active { background: #244b48; border-color: #9cc4ae; }
.chapter-start { margin: -5px 0 22px; }
.chapter-start .text-button { min-height: 42px; padding: 8px 0; font-size: 13px; }

@media (min-width: 980px) {
  .presentation.presentation-question-open .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 350px; grid-template-rows: minmax(0, 1fr); }
  .presentation.presentation-question-open .explorer { grid-column: 1; grid-row: 1; }
  .presentation.presentation-question-open .inspector { grid-column: 2; grid-row: 1; min-height: 0; border-left: 1px solid #4a6965; }
  .presentation.presentation-question-open .stage-heading, .presentation.presentation-question-open .journey-controls, .presentation.presentation-question-open .viewer-top-controls { padding-left: 24px; padding-right: 24px; }
  .presentation.presentation-question-open .narration-player { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 980px) and (max-width: 1279px) {
  .presentation.presentation-question-open .workspace { grid-template-columns: minmax(0, 1fr) 320px; }
}


@media (max-width: 1239px) {
  .journey-controls { padding: 14px 20px 12px; }
  .journey-moment { flex-basis: 190px; }
  .journey-actions { flex-basis: 420px; }
}

@media (max-width: 979px) {
  .journey-controls, .presentation .journey-controls { padding: 18px 24px 15px; }
  .journey-moment { flex-basis: 230px; }
  .journey-actions { flex-basis: 440px; }
  .journey-actions button { min-height: 46px; font-size: 13px; }
  .journey-moment select { min-height: 46px; font-size: 15px; }
  .journey-moment label { font-size: 12px; }
  #journey-status { font-size: 13px; }
  .presentation.presentation-question-open .workspace { display: flex; flex-direction: column; }
  .presentation.presentation-question-open .explorer { order: 1; }
  .presentation.presentation-question-open .inspector { order: 2; position: relative; min-height: 0; max-height: none; height: auto; border-top: 1px solid #55766e; }
  .learning-panel-top { gap: 10px 18px; }
  .learning-panel-top .eyebrow { font-size: 11px; }
  #close-learning-panel { min-height: 44px; padding: 9px 13px; font-size: 13px; }
  .panel-intro .learning-scope { font-size: 13px; }
  .presentation.presentation-question-open .presentation-panel-heading { position: sticky; top: 0; z-index: 7; padding-left: 24px; padding-right: 24px; }
  .presentation.presentation-question-open .inspector-tabs { top: 64px; }
  .narration-context { font-size: 13px; }
  .narration-options label, .narration-options button { font-size: 13px; }
}

@media (max-width: 600px) {
  .journey-controls, .presentation .journey-controls { padding: 16px 18px 14px; }
  .journey-control-row { gap: 13px; }
  .journey-moment { flex: 1 1 100%; }
  .journey-moment select { font-size: 16px; min-height: 46px; }
  .journey-actions { flex: 1 1 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .journey-actions button { min-height: 46px; padding: 10px; font-size: 13px; }
  .journey-status-row { margin-top: 12px; gap: 8px; }
  #journey-status { flex-basis: 100%; font-size: 12px; line-height: 1.75; }
  #listen-here { font-size: 12px; min-height: 42px; }
  .narration-context { font-size: 12px; line-height: 1.75; }
  .narration-options { gap: 7px; }
  .narration-options label { flex-basis: 100%; font-size: 12px; }
  .narration-options button { min-height: 42px; font-size: 12px; }
  .chapter-dialog { width: calc(100vw - 20px); }
  .chapter-current { padding: 17px; gap: 11px 9px; margin-bottom: 24px; }
  .chapter-current > div { flex-basis: 100%; }
  .chapter-current h3 { font-size: 23px; }
  .chapter-current button { flex: 1 1 115px; min-height: 44px; padding: 9px 10px; font-size: 12px; }
  .chapter-groups { gap: 25px; }
  .chapter-group h3, .chapter-groups > section > h3 { font-size: 23px; }
  .chapter-dialog .chapter-item { grid-template-columns: 24px minmax(0, 1fr) auto; padding: 15px 12px; gap: 5px 9px; }
  .chapter-dialog .chapter-item strong { font-size: 14px; line-height: 1.55; }
  .chapter-dialog .chapter-item small { font-size: 11px; line-height: 1.65; }
  .chapter-dialog .chapter-item .chapter-num { font-size: 21px; }
  .chapter-duration { font-size: 10px; }
  .chapter-action { font-size: 11px; gap: 4px; }
}

@media (max-width: 359px) {
  .journey-controls, .presentation .journey-controls { padding-left: 14px; padding-right: 14px; }
  .journey-actions button { padding: 9px 7px; font-size: 12px; gap: 6px; }
  .chapter-dialog .chapter-item { grid-template-columns: 21px minmax(0, 1fr) auto; padding: 14px 10px; gap: 5px 7px; }
}

/* General reading links keep their icons small and their titles readable. */
.learning-sources { display: grid; gap: 10px; margin: 15px 0; padding: 12px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.learning-sources a { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
.learning-sources svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.answer-entry > .eyebrow { margin-bottom: 9px; font-size: 10px; line-height: 1.6; }
.question-form { position: relative; }
.sr-only { top: 0; left: 0; padding: 0; border: 0; clip-path: inset(50%); }

/* Compare is a focused page: one pair of models, one shared set of controls. */
.compare-heading-actions, .comparison-toolbar, .comparison-context { display: none; }
.app.is-compare { height: auto; min-height: 100dvh; }
.app.is-compare .workspace { display: block; flex: none; width: 100%; max-width: 1440px; margin: 0 auto; }
.app.is-compare .stage-rail,
.app.is-compare .age-badge,
.app.is-compare .journey-controls,
.app.is-compare .viewer-top-controls,
.app.is-compare .viewer-toolbar,
.app.is-compare .inspector { display: none; }
.app.is-compare .explorer { display: flex; height: auto; overflow: visible; min-height: 0; }
.app.is-compare .stage-heading { min-height: 112px; padding: 26px 28px 22px; align-items: center; border: 0; gap: 18px 24px; }
.app.is-compare .stage-heading > div:first-child { flex: 1 1 260px; }
.app.is-compare .stage-heading h2 { font-size: clamp(30px, 2.7vw, 40px); margin-top: 6px; }
.app.is-compare .stage-heading .eyebrow { color: #a9c8bc; }
.app.is-compare .compare-heading-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 1 auto; min-width: 0; }
.compare-heading-actions .primary-button { min-height: 46px; padding: 11px 16px; font-size: 13px; }
#compare-presentation { border: 1px solid #39595e; background: #143039; width: 44px; height: 44px; }
#compare-narration-toggle { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #42665f; border-radius: 8px; min-height: 44px; padding: 10px 12px; font-size: 12px; color: #d5e6da; background: #18373d; }
#compare-narration-toggle svg { width: 15px; height: 15px; }
.app.is-compare .viewer-shell,
.app.is-compare .viewer-stage { flex: none; height: auto; min-height: 0; overflow: visible; }
.compare-view { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; width: 100%; min-width: 0; padding: 0 28px; }
.compare-pane { position: relative; display: flex; flex-direction: column; min-width: 0; height: clamp(410px, 48dvh, 530px); border: 1px solid #36565b; border-radius: 13px; overflow: hidden; background: radial-gradient(ellipse at 50% 55%, #1b3d43 0%, #0c242c 75%); }
.compare-pane-heading { position: relative; flex: none; min-width: 0; padding: 14px 16px; background: #143139; border-bottom: 1px solid #2d4d52; }
.compare-label-line { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.compare-label-line label { display: inline-flex; align-items: center; gap: 8px; color: #dce9de; font-size: 12px; font-weight: 600; line-height: 1.4; }
.compare-index { display: inline-flex; align-items: center; justify-content: center; width: 23px; height: 23px; flex: none; border: 1px solid #67877b; border-radius: 6px; color: #d3e8d8; background: #294b48; font-size: 11px; }
.compare-age { color: #a9c2bf; font-size: 12px; line-height: 1.5; }
.compare-pane-heading select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: 44px; padding: 10px 31px 10px 12px; border: 1px solid #4f706a; border-radius: 8px; background: #0e2931; color: #e8efe5; font-size: 14px; line-height: 1.4; }
.compare-pane .heart-view { position: relative; flex: 1; width: 100%; min-height: 0; height: auto; --scene-label-inset-top: 14px; --scene-label-inset-bottom: 32px; }
.app.is-compare .comparison-toolbar { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 16px 28px 0; min-width: 0; }
.comparison-primary-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.comparison-primary-controls button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 13px; border: 1px solid #365a5d; border-radius: 8px; background: #15343b; color: #c1d8cf; font-size: 12px; line-height: 1.4; }
.comparison-primary-controls button svg { width: 17px; height: 17px; }
.comparison-primary-controls button:hover { background: #23494d; border-color: #658b7e; }
.comparison-primary-controls button[aria-pressed="true"] { background: #31554e; border-color: #9ec6b1; color: #eef6ea; }
.comparison-options { min-width: 0; margin-left: auto; }
.comparison-options > summary { display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; min-height: 44px; padding: 10px 13px; border: 1px solid #365a5d; border-radius: 8px; background: #102d35; color: #b6d1ca; font-size: 12px; line-height: 1.4; list-style: none; }
.comparison-options > summary::-webkit-details-marker { display: none; }
.comparison-options > summary::after { content: ''; display: block; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.comparison-options > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.comparison-options[open] { flex: 1 1 100%; margin-left: 0; }
.comparison-options[open] > summary { width: fit-content; margin-left: auto; color: #e0ecdf; background: #24463f; border-color: #789a89; }
.comparison-options[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }
.comparison-options-body { display: grid; grid-template-columns: minmax(0, 2fr) minmax(200px, 1fr); align-items: start; gap: 22px; min-width: 0; margin-top: 12px; padding: 20px; border: 1px solid #385a5b; border-radius: 10px; background: #123039; }
.comparison-options-body fieldset { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; min-width: 0; border: 0; }
.comparison-options-body fieldset legend { margin-bottom: 14px; padding: 0; color: #cfdfd3; font-size: 12px; }
.comparison-options-body label { display: flex; flex-direction: column; gap: 7px; min-width: 0; color: #b9d1c9; font-size: 12px; line-height: 1.5; }
.comparison-options-body select { display: block; width: 100%; min-width: 0; max-width: 100%; min-height: 43px; padding: 10px 30px 10px 10px; border: 1px solid #476a64; border-radius: 7px; background: #0e2830; color: #e2ede0; font-size: 13px; line-height: 1.4; }
.comparison-options-body label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; gap: 9px; min-height: 37px; }
.comparison-options-body input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--mint); }
.comparison-options-body > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; align-content: start; }
.app.is-compare .comparison-context { display: block; flex: 1 1 100%; width: 100%; margin: 0; padding: 0 0 5px; color: #a1bbb8; font-size: 12px; line-height: 1.65; text-align: center; }
.app.is-compare .viewer-legend { padding: 8px 28px 0; min-height: 0; font-size: 11px; justify-content: center; gap: 8px 16px; background: none; }
.app.is-compare .viewer-caption { padding: 5px 28px 22px; justify-content: center; text-align: center; background: none; }
.app.is-compare .interaction-hint { display: none; }
.app.is-compare .basis-label { font-size: 11px; }
.app.is-compare .visual-note { margin: 0 28px 18px; padding: 12px 15px; border: 1px solid #355453; border-radius: 8px; font-size: 12px; }
.app.is-compare .narration-player { padding: 20px 28px; border-bottom: 1px solid #315359; }

/* The comparison's question panel uses both models and never steals their width. */
.ask-composer { flex: none; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ask-composer .question-form { margin-top: 0; margin-bottom: 22px; }
#learning-empty { font-size: 14px; line-height: 1.8; color: var(--muted); padding: 18px 0; }
#learning-empty svg { display: block; width: 28px; height: 28px; margin: 0 0 16px; color: #9fc6b3; }
#learning-empty h4 { color: #d0e1d6; font-size: 17px; font-weight: 500; line-height: 1.5; margin: 0 0 9px; }
#learning-empty p { color: #a9c2b9; font-size: 14px; line-height: 1.8; }
.learning-reading { margin-top: 17px; border-top: 1px solid #3c5e58; border-bottom: 1px solid #3c5e58; }
.learning-reading > summary { cursor: pointer; min-height: 42px; padding: 12px 2px; color: #bbd2c7; font-size: 12px; line-height: 1.5; }
.learning-reading > summary::marker { color: #82aa96; }
.learning-reading > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.learning-reading .learning-sources { margin: 0; padding: 0 0 13px; border: 0; }
.app.is-compare.comparison-question-open .inspector { display: block; position: static; height: auto; min-height: 0; max-height: none; border-left: 0; border-top: 1px solid #476862; background: #102a31; }
.app.is-compare .inspector-tabs,
.app.is-compare .inspector-footer,
.app.is-compare .presentation-panel-heading { display: none; }
.app.is-compare .ask-panel { display: grid; grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 60px); padding: 32px 28px 38px; overflow: visible; flex: none; scroll-margin-top: 20px; }
.app.is-compare .ask-composer { align-self: start; }
.app.is-compare .panel-intro { max-width: none; }
.app.is-compare .panel-intro h3 { font-size: 31px; margin: 3px 0 12px; }
.app.is-compare .panel-intro p { font-size: 14px; line-height: 1.75; }
.app.is-compare .learning-panel-top { margin-bottom: 14px; }
.app.is-compare #close-learning-panel { display: inline-flex; min-height: 40px; padding: 8px 10px; font-size: 12px; background: #1c3a3d; }
.app.is-compare .panel-intro .learning-scope { margin: 11px 0 0; padding: 0; border: 0; background: none; color: #a8c0b8; font-size: 12px; line-height: 1.7; }
.app.is-compare .ask-context { padding: 12px 13px; margin: 18px 0 13px; font-size: 12px; line-height: 1.7; background: #1b3c40; border: 1px solid #355a56; }
.app.is-compare .ask-context > span { display: flex; align-items: flex-start; gap: 8px; }
.app.is-compare .ask-context > span + span { margin-top: 8px; }
.app.is-compare .ask-context b { display: inline-flex; align-items: center; justify-content: center; width: 21px; height: 21px; flex: none; border: 1px solid #67877b; border-radius: 5px; background: #294b48; color: #d3e8d8; font-size: 10px; line-height: 1; }
.app.is-compare .ask-context small { display: block; padding-top: 10px; margin-top: 10px; border-top: 1px solid #3b5d58; color: #a7c4b7; font-size: 11px; line-height: 1.6; }
.app.is-compare .question-suggestions { gap: 8px; margin-bottom: 15px; }
.app.is-compare .question-suggestions button { min-height: 42px; padding: 9px 11px; font-size: 12px; line-height: 1.5; }
.app.is-compare .question-form { margin: 0; max-width: none; }
.app.is-compare .question-form textarea { min-height: 106px; font-size: 14px; }
.app.is-compare .question-form button { width: 40px; height: 40px; }
.app.is-compare .answer-history { min-width: 0; min-height: 0; max-width: none; max-height: none; overflow: visible; margin: 0; gap: 26px; }
.app.is-compare #learning-empty { padding: 28px; margin: 0; border: 1px dashed #486861; border-radius: 12px; background: #122f35; align-self: start; color: #afc8c0; }
.app.is-compare .answer-entry { padding: 24px; border: 1px solid #3d625b; border-radius: 12px; background: #16353b; }
.app.is-compare .question-bubble { font-size: 18px; line-height: 1.5; font-weight: 550; color: #e2ede1; padding-bottom: 16px; }
.app.is-compare .answer-bubble { font-size: 14px; line-height: 1.8; }
.app.is-compare .answer-bubble h4 { color: #d7e6d9; }
.answer-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; }
.answer-comparison > * { min-width: 0; padding: 15px; border: 1px solid #466b60; border-radius: 9px; background: #1c3e40; }
.comparison-answer-label { display: block; margin-bottom: 8px; color: #d7e8d8; font-size: 12px; font-weight: 600; line-height: 1.6; }
.answer-comparison p { font-size: 13px; line-height: 1.8; margin: 0; }

@media (max-width: 979px) {
  .app.is-compare .stage-heading { padding: 24px 22px 21px; min-height: 0; }
  .app.is-compare .stage-heading > div:first-child { flex-basis: 240px; }
  .app.is-compare .compare-heading-actions { gap: 8px; }
  .compare-heading-actions .primary-button { padding: 10px 13px; font-size: 12px; }
  .compare-view { gap: 13px; padding: 0 22px; }
  .compare-pane { height: 435px; }
  .compare-pane-heading { padding: 13px; }
  .compare-pane-heading select { font-size: 13px; padding-left: 10px; }
  .compare-label-line { gap: 7px; }
  .compare-age { font-size: 11px; }
  .app.is-compare .comparison-toolbar { margin: 15px 22px 0; }
  .comparison-options-body { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; }
  .app.is-compare .comparison-context { padding-left: 0; padding-right: 0; }
  .app.is-compare .ask-panel { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 28px 24px 34px; }
  .app.is-compare .question-form textarea { font-size: 16px; }
  .app.is-compare .ask-context { max-width: none; }
  .app.is-compare .panel-intro h3 { font-size: 31px; }
  .app.is-compare .answer-entry { padding: 23px; }
}

@media (max-width: 699px) {
  .app.is-compare .stage-heading { padding: 23px 18px 20px; gap: 17px; }
  .app.is-compare .stage-heading > div:first-child { flex-basis: 100%; }
  .app.is-compare .stage-heading h2 { font-size: 33px; }
  .app.is-compare .compare-heading-actions { width: 100%; justify-content: flex-start; }
  .compare-heading-actions .primary-button { flex: 1; min-height: 46px; font-size: 13px; }
  #compare-narration-toggle { order: 3; width: 100%; justify-content: center; font-size: 12px; }
  .compare-view { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px; }
  .compare-pane { height: 430px; }
  .compare-pane-heading { padding: 13px 14px; }
  .compare-pane-heading select { font-size: 14px; min-height: 44px; }
  .compare-age { font-size: 12px; }
  .app.is-compare .comparison-toolbar { margin: 14px 16px 0; gap: 10px; }
  .comparison-primary-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; }
  .comparison-primary-controls button { min-height: 44px; padding: 9px 7px; font-size: 12px; gap: 6px; }
  .comparison-primary-controls button svg { width: 16px; height: 16px; }
  .comparison-options { width: 100%; margin: 0; }
  .comparison-options > summary, .comparison-options[open] > summary { width: 100%; margin: 0; justify-content: space-between; min-height: 44px; padding: 10px 13px; }
  .comparison-options-body { padding: 16px; margin-top: 10px; }
  .comparison-options-body fieldset { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .comparison-options-body select { min-height: 46px; font-size: 16px; }
  .comparison-options-body > div { gap: 8px; }
  .app.is-compare .comparison-context { padding: 0 3px 4px; font-size: 11px; }
  .app.is-compare .viewer-legend { padding: 8px 20px 0; gap: 7px 11px; font-size: 10px; }
  .app.is-compare .viewer-caption { padding: 7px 20px 20px; }
  .app.is-compare .basis-label { font-size: 10px; }
  .app.is-compare .visual-note { margin: 0 16px 16px; }
  .app.is-compare .narration-player { padding: 18px; }
  .app.is-compare .ask-panel { padding: 25px 18px 30px; gap: 24px; }
  .app.is-compare .panel-intro h3 { font-size: 29px; }
  .app.is-compare .question-suggestions button { font-size: 13px; }
  .app.is-compare .question-form textarea { min-height: 110px; }
  .app.is-compare .answer-entry { padding: 19px 17px; }
  .app.is-compare .question-bubble { font-size: 17px; }
  .answer-comparison { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 17px 0; }
  .answer-comparison > * { padding: 14px; }
  .answer-comparison p { font-size: 14px; }
  .app.is-compare #learning-empty { padding: 21px; }
}

@media (max-width: 359px) {
  .compare-view { padding: 0 12px; }
  .compare-pane-heading { padding: 12px; }
  .compare-pane-heading select { font-size: 13px; }
  .app.is-compare .comparison-toolbar { margin-left: 12px; margin-right: 12px; }
  .comparison-primary-controls button { font-size: 11px; gap: 5px; padding: 9px 5px; }
  .app.is-compare .ask-panel { padding-left: 15px; padding-right: 15px; }
}