/* ==========================================================================
   KT design system tokens (tokens.json v1, Powder Blue accent).
   The shell is the KT dark theme; decision panel, gate bar, dialogs and toast
   are light surfaces. Each scope redefines the same tokens so descendants
   resolve the right pair, and sets color-scheme for native UI.
   ========================================================================== */
:root{
  --sans:"Open Sans","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --serif:"Crimson Text",Georgia,"Times New Roman",serif;
  --mono:Consolas,"Cascadia Mono","SF Mono",Inconsolata,"Courier New",monospace;
  --radius-none:0px;--radius-chip:2px;--radius-control:4px;--radius-card:6px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:22px;--space-6:26px;--space-7:34px;--space-8:46px;
  --shadow-shell-light:0 4px 8px rgba(0,0,0,0.14),0 0 2px rgba(0,0,0,0.12);
}
:root,.opening-art{
  color-scheme:dark;
  --surface:#161616;--surface-page:#111111;--surface-raised:rgba(255,255,255,0.035);--surface-fill:rgba(255,255,255,0.05);
  --band:#0d0d0d;--on-band:#ededed;
  --ink:#ededed;--ink-secondary:#c2c2c2;--ink-muted:#9a9a9a;--ink-label:#8c8c8c;--ink-disabled:#5c5c5c;
  --rule:rgba(255,255,255,0.08);--rule-strong:rgba(255,255,255,0.14);--rule-divider:#ededed;
  --accent:#b6d0e2;--accent-hover:#ccdeea;--accent-tint:rgba(182,208,226,0.16);--accent-wash:rgba(182,208,226,0.07);
  --accent-deep:#b6d0e2;--accent-line:#b6d0e2;--on-accent:#242424;--focus:#b6d0e2;
  --positive:#6cc56c;--positive-text:#6cc56c;--positive-bg:rgba(108,197,108,0.12);--positive-border:#6cc56c;
  --caution:#e3b341;--caution-text:#e3b341;--caution-bg:rgba(227,179,65,0.12);--caution-border:#e3b341;
  --negative:#f0707a;--negative-text:#f0707a;--negative-bg:rgba(240,112,122,0.12);--negative-border:#f0707a;
  --shadow-shell:none;
}
.gate-bar,.decision-deck,dialog,.toast,.skip-link{
  color-scheme:light;
  --surface:#ffffff;--surface-page:#fafafa;--surface-raised:#fafafa;--surface-fill:#f5f5f5;
  --band:#1a1a1a;--on-band:#ffffff;
  --ink:#242424;--ink-secondary:#424242;--ink-muted:#616161;--ink-label:#707070;--ink-disabled:#adadad;
  --rule:#e0e0e0;--rule-strong:#d1d1d1;--rule-divider:#242424;
  --accent:#b6d0e2;--accent-hover:#9dbfd6;--accent-tint:#d3e3ee;--accent-wash:#eef4f9;
  --accent-deep:#3e6a8a;--accent-line:#6b97b8;--on-accent:#242424;--focus:#3e6a8a;
  --positive:#107c10;--positive-text:#0e700e;--positive-bg:#f1faf1;--positive-border:#9fd89f;
  --caution:#a16e00;--caution-text:#6e5a00;--caution-bg:#fff9e5;--caution-border:#e8d48a;
  --negative:#b10e1c;--negative-text:#b10e1c;--negative-bg:#fdf3f4;--negative-border:#eeacb2;
  --shadow-shell:var(--shadow-shell-light);
  color:var(--ink);
}
.opening-art{background:var(--surface);color:var(--ink)}
body{font-size-adjust:from-font}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--surface);color:var(--ink);font-family:var(--sans)}
button,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.skip-link{position:fixed;left:16px;top:-60px;z-index:100;background:var(--surface);color:var(--ink);padding:12px 16px}
.skip-link:focus{top:12px}
.simulator{min-height:100vh;background:var(--surface)}
.topbar{height:72px;display:flex;align-items:center;padding:0 28px;border-bottom:1px solid var(--rule);background:rgba(17,17,17,0.949);backdrop-filter:blur(16px);position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;min-width:245px}
.brand-mark{width:42px;height:42px;border:1px solid rgba(255,255,255,0.4);border-radius:var(--radius-card);background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-weight:900;box-shadow:none}
.brand strong,.brand small{display:block}
.brand strong{font-size:15px}
.brand small{color:var(--ink-muted);font-size:9px;margin-top:2px}
.top-status{margin:auto;display:flex;align-items:center;gap:10px;text-transform:uppercase;font-size:9px;letter-spacing:1.4px;color:var(--ink-secondary)}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(182,208,226,0.094)}
.case-tag{border-left:1px solid var(--rule-strong);padding-left:12px;color:var(--ink-label)}
.top-actions{min-width:245px;display:flex;justify-content:flex-end;gap:10px}
.icon-button,.round-button{min-height:40px;border:1px solid var(--rule-strong);background:rgba(255,255,255,0.031);border-radius:var(--radius-card);padding:0 15px}
.round-button{width:40px;padding:0;border-radius:50%}
.icon-button:hover,.round-button:hover{background:rgba(255,255,255,0.075)}
.sim-shell{height:calc(100vh - 72px);min-height:690px;display:grid;grid-template-columns:255px minmax(0,1fr)}
.phase-sidebar{border-right:1px solid var(--rule);background:var(--surface);display:flex;flex-direction:column;padding:31px 25px 20px;min-height:0}
.project-lockup .kicker{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-muted)}
.project-lockup h1{font-size:32px;line-height:.98;letter-spacing:-1.5px;margin:12px 0 15px}
.project-lockup h1 span{color:var(--accent)}
.project-lockup p{font-size:10px;line-height:1.65;color:var(--ink-label)}
.phase-list{margin:25px -10px 15px;display:flex;flex-direction:column;overflow:auto}
.phase-button{position:relative;display:grid;grid-template-columns:29px minmax(0,1fr) 14px;gap:9px;align-items:center;min-height:53px;border:0;background:transparent;text-align:left;padding:7px 10px;border-radius:var(--radius-card)}
.phase-button:before{content:"";position:absolute;left:24px;top:41px;bottom:-13px;width:1px;background:rgba(255,255,255,0.106)}
.phase-button:last-child:before{display:none}
.phase-button:hover{background:rgba(255,255,255,0.031)}
.phase-button[aria-current=step]{background:var(--surface)}
.phase-number{position:relative;z-index:1;width:29px;height:29px;border:1px solid var(--rule-strong);background:var(--surface);border-radius:50%;display:grid;place-items:center;font:9px var(--mono);color:var(--ink-muted)}
.phase-button[aria-current=step] .phase-number{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.phase-button.done .phase-number{background:var(--positive);border-color:var(--positive);color:var(--surface)}
.phase-button strong,.phase-button small{display:block}
.phase-button strong{font-size:10px}
.phase-button small{font-size:9px;color:var(--ink-label);margin-top:3px}
.phase-state{font-size:11px;color:var(--ink-label)}
.phase-button[aria-current=step] .phase-state{color:var(--accent)}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--rule);padding-top:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sidebar-foot>span{grid-column:1/-1;font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-label)}
.sidebar-foot div{padding:9px 3px;border-radius:var(--radius-control);background:rgba(255,255,255,0.024);text-align:center}
.sidebar-foot strong,.sidebar-foot small{display:block}
.sidebar-foot strong{font-size:12px}
.sidebar-foot small{font-size:9px;color:var(--ink-label);margin-top:3px}
.cinematic{min-width:0;min-height:0;display:grid;grid-template-rows:62px minmax(315px,1fr) auto 75px;background:var(--surface)}
.metric-bar{display:grid;grid-template-columns:1.2fr repeat(4,minmax(120px,1fr));align-items:center;background:var(--surface-page);color:var(--ink);border-bottom:1px solid var(--rule)}
.metric-heading{padding:0 22px}
.metric-heading span,.metric-heading strong{display:block}
.metric-heading span{font-size:10px;color:var(--ink-muted)}
.metric-heading strong{font-size:12px;margin-top:3px}
.metric{height:100%;border-left:1px solid var(--rule);display:grid;grid-template-columns:1fr 34px;grid-template-rows:1fr 1fr;align-items:end;padding:10px 14px}
.metric>span{font-size:9px;color:var(--ink-label);align-self:end}
.metric>div{height:4px;background:var(--rule);border-radius:var(--radius-chip);align-self:start;overflow:hidden}
.metric i{display:block;height:100%;background:var(--accent-line);width:20%;transition:width .45s}
.metric strong{grid-column:2;grid-row:1/3;font:16px var(--mono);text-align:right;align-self:center}
.stage{position:relative;overflow:hidden;isolation:isolate;background:var(--surface)}
.stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .25s,transform 8s ease}
.stage.playing>img{transform:scale(1.035)}
.stage-wash{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,17,17,0.91) 0%,rgba(17,17,17,0.188) 48%,rgba(17,17,17,0.58) 100%),linear-gradient(0deg,rgba(17,17,17,0.91) 0%,transparent 55%);z-index:1}
.stage-grid{position:absolute;inset:0;z-index:2;background-image:linear-gradient(rgba(255,255,255,0.031) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.031) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,var(--surface),transparent 72%)}
.stage-topline{position:absolute;z-index:3;top:22px;left:24px;display:flex;gap:10px;align-items:center;font-size:9px}
.stage-topline span:first-child{background:var(--on-band);color:var(--on-accent);padding:8px 10px;border-radius:var(--radius-control)}
.stage-topline span:last-child{color:var(--ink-secondary)}
.camera-switch{position:absolute;right:22px;top:20px;z-index:4;display:flex;border:1px solid var(--rule-strong);background:rgba(17,17,17,0.8);padding:3px;border-radius:var(--radius-control)}
.camera-switch button{min-height:32px;padding:0 13px;border:0;background:transparent;border-radius:var(--radius-control);color:var(--ink-secondary);font-size:9px}
.camera-switch button[aria-pressed=true]{background:var(--on-band);color:var(--on-accent)}
.stage-caption{position:absolute;left:28px;bottom:31px;z-index:3;max-width:650px}
.phase-code{font:9px var(--mono);letter-spacing:1.5px;color:var(--accent)}
.stage-caption h2{font-size:clamp(27px,3vw,47px);line-height:1.02;letter-spacing:-2px;margin:11px 0 12px;text-shadow:0 2px 20px var(--surface)}
.stage-caption p{max-width:560px;color:var(--ink-secondary);font-size:11px;line-height:1.65}
.condition-chips{position:absolute;right:22px;bottom:30px;z-index:4;width:min(290px,31%);display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.condition-chip{max-width:100%;padding:8px 10px;background:rgba(17,17,17,0.851);border:1px solid var(--rule-strong);border-radius:var(--radius-control);font-size:9px;color:var(--ink-secondary)}
.condition-chip.good{border-color:var(--positive-border);color:var(--positive-text)}
.condition-chip.risk{border-color:var(--accent);color:var(--negative-text)}
.scene-disclosure{position:absolute;right:22px;bottom:10px;z-index:3;color:rgba(255,255,255,0.447);font-size:9px;text-transform:uppercase;letter-spacing:.8px}
.decision-deck{background:var(--surface-page);color:var(--ink);display:grid;grid-template-columns:minmax(220px,.9fr) minmax(520px,1.65fr);gap:26px;padding:22px 28px;border-top:1px solid var(--rule)}
.decision-deck:focus{outline:none}
.decision-kicker{display:block;text-transform:uppercase;letter-spacing:1px;font:9px var(--mono);color:var(--ink-label)}
.decision-context h3{font-size:20px;line-height:1.1;margin:7px 0 7px;letter-spacing:-.6px}
.decision-context p{font-size:9px;line-height:1.55;color:var(--ink-label)}
.decision-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.option{position:relative;border:1px solid var(--rule-strong);background:var(--surface);border-radius:var(--radius-card);text-align:left;padding:13px 38px 12px 14px;min-height:80px}
.option:hover{border-color:var(--ink-label);background:var(--surface-page)}
.option.selected{border-color:var(--accent-line);background:var(--accent-wash);box-shadow:none}
.option-letter{display:block;font:9px var(--mono);color:var(--ink-label);margin-bottom:6px}
.option strong{display:block;font-size:10px;line-height:1.35}
.option small{display:block;font-size:9px;line-height:1.45;color:var(--ink-label);margin-top:4px}
.option-mark{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--ink-disabled)}
.option.selected .option-mark{color:var(--accent-deep)}
.player-controls{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;gap:22px;align-items:center;padding:0 25px;background:var(--surface);border-top:1px solid var(--rule-strong)}
.transport{display:flex;gap:7px}
.transport button{width:38px;height:38px;border:1px solid var(--rule-strong);background:rgba(255,255,255,0.027);border-radius:var(--radius-control)}
.transport button:hover{background:rgba(255,255,255,0.071)}
.transport button:disabled{opacity:.35;cursor:default}
.transport .play-button{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:none}
.timeline-wrap{min-width:0}
.timeline-labels{display:flex;justify-content:space-between;color:var(--ink-muted);font-size:9px;margin-bottom:7px}
.timeline{width:100%}
input[type=range]{appearance:none;width:100%;height:3px;background:var(--surface);border-radius:var(--radius-chip)}
input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;background:var(--accent);border:2px solid var(--surface);border-radius:50%;box-shadow:0 0 0 2px var(--accent)}
.reset-button{border:1px solid var(--rule-strong);background:transparent;border-radius:var(--radius-control);min-height:38px;padding:0 13px;font-size:9px;color:var(--ink-muted)}
.reset-button:hover{background:rgba(255,255,255,0.051)}
.toast{position:fixed;left:50%;bottom:92px;z-index:80;transform:translate(-50%,20px);opacity:0;background:var(--surface);color:var(--ink);padding:11px 16px;border-radius:var(--radius-control);box-shadow:0 14px 50px rgba(0,0,0,0.533);font-size:10px;transition:.2s;pointer-events:none}
.toast.visible{opacity:1;transform:translate(-50%,0)}
dialog{width:min(680px,calc(100% - 28px));max-height:min(760px,calc(100dvh - 28px));padding:0;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface-page);color:var(--ink);box-shadow:0 30px 100px rgba(182,208,226,0.639)}
dialog::backdrop{background:rgba(17,17,17,0.8);backdrop-filter:blur(8px)}
.dialog-head{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--rule);font-size:9px;text-transform:uppercase;letter-spacing:1.2px}
.dialog-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--rule);background:var(--surface);font-size:20px}
.dialog-body{padding:28px 31px 32px;overflow:auto}
.dialog-kicker{font:9px var(--mono);letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-label)}
.dialog-body h2{font-size:32px;line-height:1.05;letter-spacing:-1.2px;margin:8px 0 17px}
.guide-list{list-style:none;padding:0;margin:24px 0}
.guide-list li{display:grid;grid-template-columns:25px 1fr;gap:10px;padding:13px 0;border-top:1px solid var(--rule);counter-increment:item}
.guide-list li:before{content:"0" counter(item);font:9px var(--mono);color:var(--accent-deep)}
.guide-list strong,.guide-list span{display:block}
.guide-list strong{font-size:11px}
.guide-list span{font-size:9px;color:var(--ink-label);margin-top:4px}
.fine-print{font-size:9px;line-height:1.65;color:var(--ink-label)}
.brief-summary{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--rule);border-radius:var(--radius-card);overflow:hidden;margin:18px 0}
.brief-summary div{padding:13px;border-right:1px solid var(--rule)}
.brief-summary div:last-child{border:0}
.brief-summary strong,.brief-summary span{display:block}
.brief-summary strong{font:17px var(--mono)}
.brief-summary span{font-size:9px;color:var(--ink-label);margin-top:4px}
.brief-list{display:flex;flex-direction:column;gap:8px;margin-top:19px}
.brief-item{padding:13px 15px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface)}
.brief-item span{display:block;font:9px var(--mono);text-transform:uppercase;color:var(--ink-label)}
.brief-item strong{display:block;font-size:10px;margin-top:5px}
.brief-conditions{margin-top:22px;padding:16px;background:var(--accent-wash);border-left:3px solid var(--accent-line);border-radius:var(--radius-control)}
.brief-conditions strong{font-size:10px}
.brief-conditions ul{margin:8px 0 0;padding-left:17px;font-size:9px;line-height:1.6}
.brief-link{display:inline-block;margin-top:22px;color:var(--accent-deep);font-size:9px}
.opening-art{height:230px;position:relative;overflow:hidden}
.opening-art img{width:100%;height:100%;object-fit:cover}
.opening-art>div{position:absolute;inset:0;background:linear-gradient(0deg,rgba(17,17,17,0.8),transparent)}
.opening-art span{position:absolute;left:25px;bottom:19px;font:9px var(--mono);letter-spacing:1px;color:var(--ink)}
.opening-copy{padding:29px 34px 27px}
.opening-copy h2{font-size:37px;line-height:1;margin:9px 0 14px;letter-spacing:-1.5px}
.opening-copy>p:not(.dialog-kicker){font-size:11px;line-height:1.7;color:var(--ink-label)}
.opening-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:21px 0}
.opening-facts span{border:1px solid var(--rule);border-radius:var(--radius-control);padding:11px;font-size:9px;color:var(--ink-label)}
.opening-facts strong{display:block;font:15px var(--mono);color:var(--ink);margin-bottom:3px}
.primary-action{width:100%;min-height:48px;border:0;border-radius:var(--radius-control);background:var(--accent);color:var(--ink);font-weight:700;display:flex;align-items:center;justify-content:space-between;padding:0 17px;box-shadow:none}
.text-action{display:block;margin:12px auto 10px;border:0;background:transparent;color:var(--ink-muted);font-size:9px}
.opening-copy>small{display:block;text-align:center;color:var(--ink-label);font-size:9px}
@media (max-width:1050px){.sim-shell{grid-template-columns:205px minmax(0,1fr)}.phase-sidebar{padding-left:18px;padding-right:18px}.project-lockup h1{font-size:27px}.metric-bar{grid-template-columns:1fr repeat(4,minmax(95px,1fr))}.metric{padding-left:9px;padding-right:9px}.stage-caption{max-width:55%}.decision-deck{grid-template-columns:minmax(190px,.75fr) minmax(430px,1.6fr);gap:18px}.condition-chips{width:34%}}
@media (max-width:760px){body{padding-bottom:65px}.topbar{height:62px;padding:0 15px}.brand{min-width:0}.brand-mark{width:37px;height:37px}.brand small,.top-status,.icon-button{display:none}.top-actions{margin-left:auto;min-width:0}.sim-shell{height:auto;min-height:calc(100dvh - 62px);display:block}.phase-sidebar{display:block;padding:16px 16px 14px;border:0;border-bottom:1px solid var(--rule)}.project-lockup h1{font-size:25px;margin:7px 0 0}.project-lockup h1 br{display:none}.project-lockup p,.sidebar-foot{display:none}.project-lockup .kicker{font-size:9px}.phase-list{position:fixed;z-index:40;left:0;right:0;bottom:0;height:65px;margin:0;display:grid;grid-template-columns:repeat(6,1fr);background:rgba(17,17,17,0.969);border-top:1px solid var(--rule-strong);overflow:visible;padding-bottom:env(safe-area-inset-bottom)}.phase-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:65px;padding:4px 1px;border-radius:0;text-align:center}.phase-button:before,.phase-button small,.phase-state{display:none}.phase-button[aria-current=step]{background:var(--surface)}.phase-number{width:24px;height:24px}.phase-button strong{font-size:9px;white-space:nowrap}.cinematic{display:flex;flex-direction:column}.metric-bar{order:1;grid-template-columns:1fr repeat(4,44px);min-height:58px}.metric-heading{padding:0 12px}.metric-heading span{font-size:9px}.metric-heading strong{font-size:9px}.metric{display:block;height:auto;padding:8px 5px;border-left:1px solid var(--rule)}.metric>span{display:block;font-size:0}.metric>span:before{font-size:9px;color:var(--ink-label)}.metric[data-metric=certainty]>span:before{content:"PLAN"}.metric[data-metric=capital]>span:before{content:"CAP"}.metric[data-metric=support]>span:before{content:"PLACE"}.metric[data-metric=leasing]>span:before{content:"LEASE"}.metric>div{margin-top:4px}.metric strong{display:block;font-size:11px;text-align:left;margin-top:3px}.stage{order:2;height:390px;min-height:390px}.stage-wash{background:linear-gradient(0deg,rgba(17,17,17,0.918) 0%,rgba(17,17,17,0.145) 72%),linear-gradient(90deg,rgba(17,17,17,0.502),transparent)}.stage-topline{top:14px;left:14px}.stage-topline span:last-child{display:none}.camera-switch{right:12px;top:12px}.camera-switch button{padding:0 9px;font-size:9px}.stage-caption{left:16px;right:16px;bottom:23px;max-width:none}.stage-caption h2{font-size:28px;letter-spacing:-1.3px;margin:8px 0}.stage-caption p{font-size:9px;padding-right:0}.condition-chips{left:16px;right:16px;bottom:138px;width:auto;align-items:flex-start}.condition-chip{display:none}.condition-chip:first-child{display:block}.scene-disclosure{right:13px;bottom:7px;font-size:9px}.decision-deck{order:3;display:block;padding:20px 15px}.decision-context h3{font-size:20px}.decision-options{margin-top:15px;grid-template-columns:1fr}.option{min-height:72px}.player-controls{order:4;grid-template-columns:auto 1fr;gap:12px;padding:14px 15px;min-height:75px}.transport button{width:36px;height:36px}.timeline-wrap{min-width:0}.reset-button{display:none}.toast{bottom:78px;width:max-content;max-width:calc(100% - 30px)}dialog{max-height:calc(100dvh - 20px)}.opening-art{height:175px}.opening-copy{padding:23px 21px}.opening-copy h2{font-size:31px}.opening-facts{grid-template-columns:1fr}.opening-facts span{display:flex;align-items:center;justify-content:space-between}.opening-facts strong{margin:0}.dialog-body{padding:23px 21px}.dialog-body h2{font-size:28px}.brief-summary{grid-template-columns:repeat(2,1fr)}.brief-summary div:nth-child(2){border-right:0}.brief-summary div:nth-child(-n/**/+2){border-bottom:1px solid var(--rule)}}
@media (max-width:380px){.stage{height:365px;min-height:365px}.camera-switch button{padding:0 7px}.stage-caption h2{font-size:25px}.phase-button strong{font-size:9px}.metric-bar{grid-template-columns:1fr repeat(4,40px)}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.stage>img,.metric i,.toast{transition:none!important}.stage.playing>img{transform:none}}
/* Cinematic phase imagery and motion graphics. */
.stage>img.scene-enter{animation:scene-reveal .72s cubic-bezier(.2,.72,.2,1) both}
.scan-beam{position:absolute;z-index:2;inset:-35% -20%;pointer-events:none;background:linear-gradient(105deg,transparent 43%,rgba(182,208,226,0.035) 49%,rgba(255,255,255,0.125) 50%,rgba(182,208,226,0.035) 51%,transparent 57%);transform:translateX(-45%);animation:scan-stage 8s ease-in-out infinite}
.motion-map{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;filter:drop-shadow(0 0 7px rgba(182,208,226,0.4))}
.motion-route{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:8 12;stroke-linecap:round;opacity:.7;animation:route-flow 7s linear infinite}
.route-b{stroke:var(--accent);animation-direction:reverse;animation-duration:9s}
.motion-zone{fill:rgba(182,208,226,0.075);stroke:rgba(182,208,226,0.502);stroke-width:1.5;stroke-dasharray:420;stroke-dashoffset:420;animation:draw-zone 2.4s ease forwards}
.zone-b{fill:rgba(182,208,226,0.063);stroke:rgba(182,208,226,0.502);animation-delay:.3s}
.motion-nodes circle{fill:var(--ink);stroke:var(--accent);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:node-pulse 2.2s ease-in-out infinite}
.motion-nodes circle:nth-child(2n){animation-delay:.8s}
.stage[data-phase="0"] .motion-route,.stage[data-phase="0"] .motion-zone{opacity:.18}
.stage[data-phase="1"] .zone-b,.stage[data-phase="1"] .route-b{opacity:.12}
.stage[data-phase="2"] .zone-a{opacity:.12}
.stage[data-phase="2"] .zone-b{fill:rgba(182,208,226,0.133);stroke:var(--accent)}
.stage[data-phase="3"] .motion-route{opacity:1;stroke-width:3}
.stage[data-phase="3"] .motion-zone{opacity:.95;fill:rgba(182,208,226,0.122)}
.stage[data-phase="4"] .zone-a,.stage[data-phase="4"] .zone-b{fill:rgba(182,208,226,0.125);stroke:var(--accent)}
.stage[data-phase="5"] .motion-route{stroke:var(--accent)}
.phase-callouts{position:absolute;z-index:4;inset:0;pointer-events:none}
.callout{position:absolute;display:flex;align-items:center;gap:7px;padding:6px 9px;border:1px solid var(--rule-strong);border-radius:var(--radius-chip);background:rgba(17,17,17,0.8);backdrop-filter:blur(8px);color:var(--ink);font:9px var(--mono);letter-spacing:.4px;box-shadow:0 8px 24px rgba(0,0,0,0.267);animation:callout-in .55s ease both}
.callout i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(182,208,226,0.145)}
.callout-1{left:18%;top:25%;animation-delay:.18s}
.callout-2{left:52%;top:33%;animation-delay:.34s}
.callout-3{right:16%;top:56%;animation-delay:.5s}
.evidence-peek{position:absolute;z-index:5;right:22px;top:65px;width:188px;min-height:59px;display:grid;grid-template-columns:58px 1fr 15px;align-items:center;gap:9px;border:1px solid var(--rule-strong);border-radius:var(--radius-card);padding:5px;background:rgba(17,17,17,0.839);text-align:left;box-shadow:0 10px 28px rgba(0,0,0,0.267);backdrop-filter:blur(10px)}
.evidence-peek:hover{border-color:var(--accent);background:var(--surface)}
.evidence-peek img{width:58px;height:46px;object-fit:cover;border-radius:var(--radius-control);background:var(--on-band)}
.evidence-peek small,.evidence-peek strong{display:block}
.evidence-peek small{font:9px var(--mono);text-transform:uppercase;letter-spacing:.7px;color:var(--ink-muted)}
.evidence-peek strong{font-size:9px;line-height:1.25;margin-top:3px}
.evidence-peek b{font-weight:400;color:var(--accent)}
.evidence-figure{margin:18px 0;border:1px solid var(--rule-strong);border-radius:var(--radius-card);overflow:hidden;background:var(--surface)}
.evidence-figure img{display:block;width:100%;max-height:420px;object-fit:contain}
.evidence-copy{font-size:11px;line-height:1.7;color:var(--ink-muted)}
.evidence-dialog-body .fine-print{border-top:1px solid var(--rule);margin-top:18px;padding-top:13px}
.camera-switch button{padding-left:11px;padding-right:11px}
@keyframes scene-reveal{from{opacity:.28;transform:scale(1.07) translateY(5px);filter:saturate(.4) blur(3px)}to{opacity:1;transform:scale(1);filter:saturate(1) blur(0)}}
@keyframes scan-stage{0%,18%{transform:translateX(-46%)}65%,100%{transform:translateX(46%)}}
@keyframes route-flow{to{stroke-dashoffset:-240}}
@keyframes draw-zone{to{stroke-dashoffset:0}}
@keyframes node-pulse{0%,100%{transform:scale(.75);opacity:.55}50%{transform:scale(1.5);opacity:1}}
@keyframes callout-in{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@media (max-width:760px){.camera-switch button{padding-left:6px;padding-right:6px}.evidence-peek{right:12px;top:54px;width:53px;min-height:47px;display:block;padding:3px}.evidence-peek img{width:45px;height:39px}.evidence-peek span,.evidence-peek b{display:none}.callout{font-size:9px;padding:5px 7px}.callout-1{left:8%;top:30%}.callout-2{left:47%;top:38%}.callout-3{right:8%;top:52%}.motion-map{opacity:.65}.scan-beam{animation-duration:10s}}
@media (prefers-reduced-motion:reduce){.stage>img.scene-enter,.scan-beam,.motion-route,.motion-zone,.motion-nodes circle,.callout{animation:none!important}.motion-zone{stroke-dashoffset:0}.callout{opacity:1}}
/* Design review pass: decision clarity, purposeful motion, and touch ergonomics. */
:root{--cv-touch:44px}
button{touch-action:manipulation}
.icon-button,.round-button{min-height:var(--cv-touch)}
.round-button{width:var(--cv-touch)}
.camera-switch button{min-height:40px}
.transport button{width:var(--cv-touch);height:var(--cv-touch)}
.project-lockup h1{max-width:205px;text-wrap:balance}
.decision-context p{max-width:42ch}
.option{min-height:112px;padding:13px 38px 11px 14px;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.option:active{background:var(--surface-fill)}
.option strong{font-size:11px}
.option small{font-size:9px;max-width:48ch}
.option-effects{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.impact-chip{display:inline-flex;align-items:baseline;gap:3px;border:1px solid var(--rule-strong);border-radius:var(--radius-chip);padding:3px 6px;background:var(--surface-page);color:var(--ink-muted);font:9px/1 var(--sans);white-space:nowrap}
.impact-chip b{font-weight:650}
.impact-chip.positive{border-color:var(--positive-border);background:var(--positive-bg);color:var(--positive-text)}
.impact-chip.negative{border-color:var(--negative-border);background:var(--negative-bg);color:var(--negative-text)}
.impact-chip.neutral{color:var(--ink-muted)}
.scan-beam{opacity:0;animation:none}
.stage.scene-changing .scan-beam,.stage.playing .scan-beam{opacity:1;animation:scan-stage 8s ease-in-out infinite}
.motion-route{animation-play-state:paused}
.stage.scene-changing .motion-route,.stage[data-view="strategy"] .motion-route,.stage[data-phase="3"] .motion-route,.stage[data-phase="5"] .motion-route{animation-play-state:running}
@media (max-width:760px){body{padding-bottom:0}.phase-sidebar{padding-bottom:10px}.project-lockup h1{font-size:27px;max-width:none}.project-lockup h1 br{display:block}.project-lockup .kicker{font-size:9px}.phase-list{position:static;height:auto;margin:14px -16px 0;display:flex;flex-direction:row;gap:8px;overflow-x:auto;padding:0 16px 5px;background:transparent;border:0;scroll-snap-type:x proximity;scrollbar-width:none}.phase-list::-webkit-scrollbar{display:none}.phase-button{flex:0 0 92px;min-height:52px;display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;justify-content:initial;gap:8px;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--radius-control);text-align:left;scroll-snap-align:start}.phase-button[aria-current=step]{border-color:rgba(182,208,226,0.4)}.phase-button:before,.phase-state{display:none}.phase-button small{display:block;font-size:9px}.phase-number{width:26px;height:26px}.phase-button strong{font-size:9px}.stage{height:430px;min-height:430px}.camera-switch button{min-height:var(--cv-touch);padding-left:8px;padding-right:8px;font-size:9px}.evidence-peek{width:126px;min-height:48px;display:grid;grid-template-columns:40px 1fr;gap:7px;padding:4px}.evidence-peek img{width:40px;height:38px}.evidence-peek span{display:block}.evidence-peek span small,.evidence-peek b{display:none}.evidence-peek strong{font-size:9px}.decision-context p{font-size:11px;line-height:1.55}.option{min-height:128px;padding:14px 38px 13px 15px}.option strong{font-size:13px}.option small{font-size:11px;line-height:1.5}.impact-chip{font-size:9px;padding:4px 7px}.transport button{width:var(--cv-touch);height:var(--cv-touch)}}
@media (max-width:380px){.phase-button{flex-basis:86px}.stage{height:410px;min-height:410px}.camera-switch button{padding-left:6px;padding-right:6px}.evidence-peek{width:112px}.evidence-peek strong{font-size:9px}}
@media (prefers-reduced-motion:reduce){.stage.scene-changing .scan-beam,.stage.playing .scan-beam{opacity:0;animation:none!important}.option{transition:none}}
/* Decision case pass: diligence gates, ledger, committee brief, readable type. */
.cinematic{grid-template-rows:auto minmax(315px,1fr) auto 75px}
.gate-bar{display:grid;grid-template-columns:minmax(170px,1.1fr) minmax(0,6fr);align-items:stretch;background:var(--surface-page);color:var(--ink);border-bottom:1px solid var(--rule)}
.gate-heading{padding:10px 18px;display:flex;flex-direction:column;justify-content:center}
.gate-heading span{font-size:11px;color:var(--ink-muted)}
.gate-heading strong{font-size:13px;margin-top:3px}
.gate-list{display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.gate{display:flex;flex-direction:column;justify-content:center;gap:5px;min-height:62px;padding:8px 11px;border:0;border-left:1px solid var(--rule);background:transparent;text-align:left;color:var(--ink)}
.gate:hover{background:var(--surface-fill)}
.gate-name{font-size:10.5px;font-weight:650;line-height:1.2}
.gate-name .short,.gate-status .short{display:none}
.gate-status{display:flex;align-items:center;gap:6px;font-size:10.5px;color:var(--ink-muted)}
.gate-status i,.pill i{width:8px;height:8px;border-radius:50%;flex:none;background:var(--ink-label)}
.s-pending .gate-status i,.pill.s-pending i{background:var(--caution)}
.s-supported .gate-status i,.pill.s-supported i{background:var(--positive)}
.s-failed .gate-status i,.pill.s-failed i{background:var(--negative)}
.gate.s-failed{background:var(--negative-bg)}
.gate.s-failed .gate-status{color:var(--negative-text);font-weight:650}
.gate-ahead{align-self:flex-start;font-size:9.5px;font-weight:650;color:var(--negative-text);border:1px solid var(--negative-border);border-radius:var(--radius-chip);padding:2px 7px;background:var(--surface)}
.gate.is-ahead{box-shadow:inset 0 -3px 0 var(--accent-line)}
.phase-button.na{opacity:.55}
.phase-button.na .phase-number{border-style:dashed}
.decision-deck.inactive .option{opacity:.5;cursor:not-allowed}
.option:disabled:hover{border-color:var(--rule-strong);background:var(--surface)}
.clear-choice{margin-top:12px;min-height:36px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:var(--surface);padding:0 12px;font-size:11.5px;color:var(--ink-secondary)}
.clear-choice:hover{background:var(--surface-fill)}
.impact-chip.program{border-color:var(--accent-hover);background:var(--accent-wash);color:var(--accent-deep)}
/* Readable type. */
.project-lockup .kicker{font-size:10px}
.project-lockup h1{font-size:25px;line-height:1.08;letter-spacing:-.8px}
.project-lockup p{font-size:12px;color:var(--ink-muted)}
.phase-button strong{font-size:12px}
.phase-button small{font-size:10px}
.phase-number{font-size:10px}
.sidebar-foot>span{font-size:10px}
.sidebar-foot strong{font-size:14px}
.sidebar-foot small{font-size:9.5px}
.top-status{font-size:10px}
.brand small{font-size:10.5px}
.icon-button{font-size:12.5px}
.stage-topline{font-size:11px}
.camera-switch button{font-size:11px}
.phase-code{font-size:10px}
.stage-caption h2{font-size:clamp(26px,2.6vw,40px);letter-spacing:-1.2px}
.stage-caption p{font-size:13px;max-width:600px}
.condition-chip{font-size:11px;line-height:1.45}
.scene-disclosure{font-size:9px}
.callout{font-size:10px}
.evidence-peek small{font-size:9px}
.evidence-peek strong{font-size:11px}
.decision-kicker{font-size:10px}
.decision-context h3{font-size:21px}
.decision-context p{font-size:12.5px;line-height:1.55}
.option-letter{font-size:9.5px}
.option strong{font-size:13.5px}
.option small{font-size:11.5px;line-height:1.5}
.impact-chip{font-size:10px;padding:4px 8px}
.timeline-labels{font-size:11px}
.reset-button{font-size:12px}
.toast{font-size:12.5px}
.dialog-head{font-size:11px}
.dialog-kicker{font-size:10.5px}
.fine-print{font-size:11.5px}
.guide-list strong{font-size:14px}
.guide-list span{font-size:12.5px;line-height:1.55}
.guide-list li:before{font-size:11px}
.opening-copy>p:not(.dialog-kicker){font-size:13.5px}
.opening-facts span{font-size:11px}
.text-action{font-size:12px}
.opening-copy>small{font-size:10.5px}
.opening-copy h2{font-size:31px;line-height:1.08}
.opening-disclosure{margin:0 0 16px;padding:10px 12px;border-left:3px solid var(--accent-line);background:var(--accent-wash);font-size:12px!important;color:var(--ink-muted)!important}
.evidence-copy{font-size:13.5px}
/* Brief and tables. */
dialog#brief-dialog,dialog#register-dialog,dialog#compare-dialog{width:min(860px,calc(100% - 28px))}
.dialog-body h3{margin:26px 0 10px;font-size:12px;letter-spacing:1.2px;text-transform:uppercase;color:var(--ink-label)}
.rec{font-size:28px!important}
.rec-stop{color:var(--negative-text)}
.rec-revise{color:var(--caution-text)}
.rec-advance{color:var(--positive-text)}
.rec-open{color:var(--ink-secondary)}
.brief-reason{font-size:13.5px;line-height:1.6;color:var(--ink-secondary);margin:0 0 6px}
.brief-note{font-size:12.5px;color:var(--ink-label)}
.data-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.45;background:var(--surface);border:1px solid var(--rule)}
.data-table th,.data-table td{padding:8px 10px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.data-table thead th{background:var(--surface-fill);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
.data-table tbody th{font-weight:650;color:var(--ink);width:26%}
.table-wrap{overflow-x:auto}
.tag{display:inline-block;white-space:nowrap;border-radius:var(--radius-chip);padding:2px 8px;font-size:10.5px;border:1px solid var(--rule-strong);background:var(--surface-page)}
.tag-fact{border-color:var(--positive-border);background:var(--positive-bg);color:var(--positive-text)}
.tag-proposal{border-color:var(--accent-hover);background:var(--accent-wash);color:var(--accent-deep)}
.tag-target{border-color:var(--caution-border);background:var(--caution-bg);color:var(--caution-text)}
.tag-missing{color:var(--ink-muted)}
.tag-open{border-color:var(--negative-border);background:var(--negative-bg);color:var(--negative-text)}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;border:1px solid var(--rule);border-radius:var(--radius-chip);padding:3px 9px;background:var(--surface);color:var(--ink-secondary);white-space:nowrap}
.gate-rows{display:flex;flex-direction:column;gap:8px}
.gate-row{border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);padding:11px 13px}
.gate-row-head{display:flex;justify-content:space-between;gap:10px;align-items:center}
.gate-row-head strong{font-size:13px}
.gate-row p{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--ink-muted)}
.gate-row ul,.gate-items{margin:7px 0 0;padding-left:17px;font-size:12px;line-height:1.5;color:var(--ink-secondary)}
.gate-row li.bad,.gate-items li{color:var(--negative-text)}
.ledger{display:flex;flex-direction:column;gap:8px}
.ledger-item{border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface);padding:11px 13px}
.ledger-item.inactive{opacity:.6;border-style:dashed}
.ledger-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ledger-head span{font:10.5px var(--mono);text-transform:uppercase;color:var(--ink-label)}
.undo{min-height:32px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:var(--surface);padding:0 11px;font-size:11.5px}
.undo:hover{background:var(--surface-fill)}
.ledger-item>strong{display:block;font-size:13.5px;margin-top:5px}
.ledger-item ul{margin:7px 0 0;padding-left:17px;font-size:12px;line-height:1.5;color:var(--ink-secondary)}
.ledger-item p{margin:6px 0 0;font-size:12px;line-height:1.5;color:var(--ink-muted)}
.ledger-source{font-size:11px!important;color:var(--ink-label)!important}
.steps{margin:0;padding-left:20px;font-size:12.5px;line-height:1.6;color:var(--ink-secondary)}
.brief-summary strong{font-size:16px}
.brief-summary span{font-size:10.5px}
.brief-disclosure{margin-top:22px;border-top:1px solid var(--rule);padding-top:13px}
.brief-link{font-size:12px}
@media (max-width:1180px){.gate-bar{grid-template-columns:1fr}.gate-heading{flex-direction:row;justify-content:space-between;align-items:baseline;padding:8px 16px;border-bottom:1px solid var(--rule)}.top-actions .icon-button{padding:0 11px}}
@media (max-width:1050px){.gate-name .full{display:none}.gate-name .short{display:inline}}
@media (max-width:760px){.top-actions .icon-button{display:inline-flex;align-items:center;font-size:11px;padding:0 9px}#open-register,#open-compare{display:none}.gate-list{grid-template-columns:repeat(3,minmax(0,1fr))}.gate{min-height:54px;padding:7px 9px;border-bottom:1px solid var(--rule)}.gate-status .full{display:none}.gate-status .short{display:inline}.gate-name{font-size:11px}.gate-status{font-size:10.5px}.gate-ahead{font-size:9px;padding:1px 6px}.gate-heading span{font-size:11px}.gate-heading strong{font-size:11.5px}.project-lockup h1{font-size:23px}.project-lockup p{display:none}.stage-caption p{font-size:12px}.condition-chip{font-size:10.5px}.callout{font-size:9px}.data-table{font-size:11.5px}.data-table th,.data-table td{padding:7px 8px}.register thead{display:none}.register tr{display:block;border-bottom:1px solid var(--rule-strong);padding:6px 0}.register th,.register td{display:block;border:0;padding:3px 8px;width:auto!important}.rec{font-size:24px!important}}
.brief-tools{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.brief-tools button{min-height:36px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:var(--surface);padding:0 12px;font-size:12px;color:var(--accent-deep)}
.brief-tools button:hover{background:var(--surface-fill)}
.toast{top:84px;bottom:auto;transform:translate(-50%,-12px)}
.toast.visible{transform:translate(-50%,0)}
@media (max-width:760px){.condition-chips{top:62px;bottom:auto;left:14px;right:148px;width:auto}.toast{top:70px;bottom:auto}}
/* KT surfaces and semantics that a color re-map alone cannot express. */
html,body,.simulator,.cinematic{background:var(--surface-page)}
.topbar,.player-controls{background:var(--band);color:var(--on-band)}
.phase-sidebar,.stage{background:var(--surface)}
.phase-button[aria-current=step]{background:var(--accent-wash)}
.brand-mark{border:0;border-radius:var(--radius-none);box-shadow:none}
.round-button{border-radius:var(--radius-control)}
.live-dot,.callout i,.gate-status i,.pill i{border-radius:0}
.condition-chip.risk{border-color:var(--negative-border);color:var(--negative-text)}
.gate.is-ahead{box-shadow:inset 0 -2px 0 var(--negative)}
.route-b{stroke:var(--ink-secondary)}
input[type=range]{background:var(--rule-strong)}
dialog{box-shadow:var(--shadow-shell)}
.data-table thead th{background:var(--ink);color:var(--surface);border-bottom:0}
/* Type: Crimson Text for titles, Open Sans for interface, mono for figures. */
.project-lockup h1,.stage-caption h2,.decision-context h3,.dialog-body h2,.opening-copy h2{font-family:var(--serif);font-weight:700;letter-spacing:0}
.stage-caption h2,.decision-context h3,.dialog-body h2,.opening-copy h2,.gate-row-head strong{text-wrap:balance}
.stage-caption p,.decision-context p,.evidence-copy,.brief-reason,.gate-row p,.guide-list span,.opening-copy>p,.fine-print,.ledger-item p{text-wrap:pretty}
.brief-summary strong,.sidebar-foot strong,.opening-facts strong{font-family:var(--mono);font-variant-numeric:tabular-nums}
.icon-button,.reset-button,.clear-choice,.undo,.brief-tools button,.text-action{transition:background-color .15s,border-color .15s}
.toast{top:150px;bottom:auto}
@media(max-width:760px){.toast{top:auto;bottom:16px;transform:translate(-50%,12px)}.toast.visible{transform:translate(-50%,0)}}

/* ==========================================================================
   Phone layout (760px and below), built from the approved mobile design.
   One scrolling column: band header, decision rail, 144px scene, title and
   summary, gate summary, then the question and options. Previous and Next
   are fixed at the bottom so the primary action stays in the thumb zone.
   Gates, context and phase evidence follow below the fold.
   Type is limited to 11, 14, 17 and 28px at weights 400 and 600.
   ========================================================================== */
.brand-step,.gate-title,.phase-summary,.gate-summary,.ctl-label,.next-brief,.phase-context,.phase-evidence,.scene-disclosure .short,.fx-m{display:none}
.brand .brand-step{display:none}
.fx-d{display:contents}
.brief-counts .bad strong{color:var(--negative-text)}
.brief-counts .warn strong{color:var(--caution-text)}

@media (max-width:760px){
  .phase-sidebar,.stage,.gate-summary,.player-controls,.phase-context,.phase-evidence{
    color-scheme:light;
    --surface:#ffffff;--surface-page:#fafafa;--surface-raised:#fafafa;--surface-fill:#f5f5f5;
    --ink:#242424;--ink-secondary:#424242;--ink-muted:#616161;--ink-label:#707070;--ink-disabled:#adadad;
    --rule:#e0e0e0;--rule-strong:#d1d1d1;--rule-divider:#242424;
    --accent:#b6d0e2;--accent-hover:#9dbfd6;--accent-tint:#d3e3ee;--accent-wash:#eef4f9;
    --accent-deep:#3e6a8a;--accent-line:#6b97b8;--on-accent:#242424;--focus:#3e6a8a;
    --positive:#107c10;--positive-text:#0e700e;--positive-bg:#f1faf1;--positive-border:#9fd89f;
    --caution:#a16e00;--caution-text:#6e5a00;--caution-bg:#fff9e5;--caution-border:#e8d48a;
    --negative:#b10e1c;--negative-text:#b10e1c;--negative-bg:#fdf3f4;--negative-border:#eeacb2;
    color:var(--ink);
  }
  html,body,.simulator,.sim-shell,.cinematic{background:#fafafa}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}

  /* Header band */
  .topbar{height:56px;gap:12px;padding:0 8px 0 16px;background:#1a1a1a;backdrop-filter:none;border-bottom:0}
  .brand{flex:1 1 auto;min-width:0;gap:12px}
  .brand-mark{width:32px;height:32px;border:0;border-radius:0;font-size:11px;font-weight:600}
  .brand strong{font-size:14px;font-weight:600;line-height:1.2}
  .brand small{display:none}
  .brand .brand-step{display:block;margin-top:4px;font:11px/1.2 var(--mono);color:#b6d0e2}
  .top-actions{flex:none;min-width:0;gap:8px}
  .top-actions .brief-button{height:44px;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-control);background:transparent;color:#ffffff;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
  .round-button{width:44px;height:44px;min-height:44px;border-color:rgba(255,255,255,0.14);background:transparent;color:#ffffff;font-size:14px}
  .sim-shell{min-height:0}

  /* Decision rail */
  .phase-sidebar{display:block;padding:0;border:0;border-bottom:1px solid var(--rule);background:var(--surface)}
  .project-lockup,.sidebar-foot{display:none}
  .phase-list{position:static;height:44px;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0;overflow:visible;background:transparent;border:0}
  .phase-button{height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-bottom:2px solid transparent;border-radius:0;background:transparent;opacity:1}
  .phase-button>span:not(.phase-number),.phase-button:before,.phase-state{display:none}
  .phase-button[aria-current=step]{background:transparent;border-bottom-color:var(--accent-line)}
  .phase-number{width:24px;height:24px;border:1px solid var(--rule-strong);border-radius:0;background:transparent;color:var(--ink-muted);font:11px var(--mono)}
  .phase-button.na .phase-number{border-style:dashed;color:var(--ink-disabled)}
  .phase-button.done .phase-number{background:var(--ink);border-color:var(--ink);color:#ffffff}
  .phase-button[aria-current=step] .phase-number{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}

  /* Scene, title and summary */
  .cinematic{display:flex;flex-direction:column}
  .stage{order:1;height:auto;min-height:0;padding-top:144px;overflow:visible;isolation:auto;background:transparent}
  .stage>img{inset:0 0 auto 0;height:144px;background:#161616}
  .stage.playing>img{transform:none}
  .stage-wash,.stage-grid,.scan-beam,.motion-map,.phase-callouts,.condition-chips,.evidence-peek{display:none}
  .scene-disclosure{top:12px;left:12px;right:auto;bottom:auto;padding:4px 8px;background:rgba(26,26,26,0.85);color:#ededed;font-size:11px;letter-spacing:0;text-transform:none}
  .scene-disclosure .full{display:none}
  .scene-disclosure .short{display:inline}
  .camera-switch{top:12px;right:12px;padding:0;border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-control);background:rgba(26,26,26,0.85);overflow:hidden}
  .camera-switch button{height:44px;min-height:44px;padding:0 8px;border-radius:0;background:transparent;color:#ededed;font-size:11px}
  .camera-switch button[aria-pressed=true]{background:#b6d0e2;color:#242424;font-weight:600}
  .stage-topline{top:108px;left:12px;bottom:auto}
  .stage-topline span:first-child{padding:4px 8px;border-radius:0;background:rgba(26,26,26,0.85);color:#ffffff;font-size:11px;font-weight:600}
  .stage-topline span:last-child{display:none}
  .stage-caption{position:static;max-width:none;display:flex;flex-direction:column;gap:8px;padding:16px 16px 12px}
  .phase-code,#phase-copy{display:none}
  .stage-caption h2{margin:0;font-size:28px;font-weight:600;line-height:1.15;letter-spacing:0;color:var(--ink);text-shadow:none}
  .stage-caption .phase-summary{display:block;max-width:none;margin:0;padding:0;font-size:14px;line-height:1.5;color:var(--ink-secondary)}

  /* Gate summary */
  .gate-summary{order:2;display:flex;align-items:center;gap:12px;min-height:44px;margin:0 16px;padding:0 12px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-control);color:var(--ink);font-size:11px;text-decoration:none}
  .gate-summary .gs-label{font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--ink-label)}
  .gate-summary .gs-item{display:flex;align-items:center;gap:4px;white-space:nowrap}
  .gate-summary .gs-item i{width:8px;height:8px;flex:none;background:var(--ink-label)}
  .gate-summary .s-pending i{background:var(--caution)}
  .gate-summary .s-supported i{background:var(--positive)}
  .gate-summary .s-failed{color:var(--negative-text)}
  .gate-summary .s-failed i{background:var(--negative)}
  .gate-summary .gs-ahead{color:var(--negative-text)}
  .gate-summary .gs-flag{color:var(--caution-text)}
  .gate-summary b{font:600 11px/16px var(--mono)}
  .gate-summary svg{flex:none;margin-left:auto}

  /* Question and options */
  .decision-deck{order:3;display:flex;flex-direction:column;gap:12px;padding:16px 16px 22px;border-top:0;background:transparent}
  .decision-context{display:contents}
  .decision-kicker{display:none}
  .decision-context h3{order:1;margin:0;font-family:var(--sans);font-size:17px;font-weight:600;line-height:1.35;letter-spacing:0}
  .decision-options{order:2;margin:0;display:flex;flex-direction:column;gap:8px}
  .decision-context p{order:3;margin:0;font-size:11px;line-height:1.45;color:var(--ink-muted)}
  .decision-deck.inactive .decision-context p{order:1;padding:12px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:var(--surface-fill);font-size:14px;line-height:1.5;color:var(--ink-secondary)}
  .clear-choice{order:4;align-self:flex-start;min-height:44px;padding:0 12px;font-size:11px}
  .option{min-height:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px 44px 12px 16px;border-radius:var(--radius-card)}
  .option-letter{margin:0;font:11px var(--mono);color:var(--ink-label)}
  .option.selected .option-letter{color:var(--accent-deep)}
  .option strong{font-size:14px;font-weight:600;line-height:1.4}
  .option small{margin:0;font-size:14px;line-height:1.5;color:var(--ink-muted)}
  .option-mark{top:12px;right:16px;transform:none;font-size:14px;color:transparent}
  .option.selected .option-mark{color:var(--accent-deep)}
  .option-effects{display:flex;flex-wrap:wrap;gap:4px;margin:0}
  .fx-d{display:none}
  .fx-m{display:contents}
  .impact-chip{padding:4px 8px;border-radius:var(--radius-chip);font-size:11px;font-weight:600}

  /* Previous and Next, fixed in the thumb zone */
  .player-controls{position:fixed;left:0;right:0;bottom:0;z-index:40;order:4;min-height:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--rule)}
  .transport{display:contents}
  #play,.timeline-wrap,.reset-button{display:none}
  .transport button{width:auto;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
  .transport #next,.transport .next-brief{background:var(--accent);border-color:var(--accent-hover);color:var(--on-accent)}
  .transport button:disabled{opacity:1;color:var(--ink-disabled);border-color:var(--rule)}
  .transport #next:disabled{background:var(--surface);border-color:var(--rule)}
  .ctl-label{display:inline}
  .ctl-arrow{font-size:14px;letter-spacing:0}
  .transport .next-brief{display:none}
  .player-controls[data-last=true] #next{display:none}
  .player-controls[data-last=true] .next-brief{display:flex}

  /* Gates, context and phase evidence, below the fold */
  .gate-bar{order:5;display:flex;flex-direction:column;gap:12px;padding:26px 16px 0;background:transparent;border:0;scroll-margin-top:12px}
  .gate-title,.m-eyebrow{display:block;margin:0;font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--ink-label)}
  .gate-heading{flex-direction:row;justify-content:space-between;align-items:baseline;gap:8px;padding:0;border:0}
  .gate-heading span,.gate-heading strong{margin:0;font-size:11px;font-weight:400;color:var(--ink-muted)}
  .gate-heading strong{font-family:var(--mono)}
  .gate-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .gate{min-height:64px;gap:4px;padding:8px 12px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface)}
  .gate-name{font-size:14px;font-weight:600}
  .gate-status{font-size:11px;gap:4px;color:var(--ink-secondary)}
  .gate.s-failed .gate-status{font-weight:600}
  .gate-ahead{font-size:11px;font-weight:600;padding:2px 8px}
  .gate.is-ahead{box-shadow:none;border-color:var(--negative-border)}
  .phase-context{order:6;display:flex;flex-direction:column;gap:12px;padding:26px 16px 0}
  .phase-context p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-secondary)}
  .context-chips{display:flex;flex-wrap:wrap;gap:8px}
  .context-chips span{padding:4px 8px;border:1px solid var(--rule-strong);border-radius:var(--radius-chip);background:var(--surface);font:11px var(--mono);color:var(--ink)}
  .context-conditions{display:flex;flex-direction:column;gap:8px}
  .context-conditions:empty{display:none}
  .phase-context .context-condition{display:flex;gap:8px;align-items:flex-start;padding:12px;border:1px solid var(--rule);border-radius:var(--radius-control);background:var(--surface)}
  .context-condition i{width:8px;height:8px;flex:none;margin-top:6px;background:var(--ink-label)}
  .context-condition.good i{background:var(--positive)}
  .context-condition.risk i{background:var(--negative)}
  .phase-evidence{order:7;display:flex;flex-direction:column;gap:12px;margin:26px 16px 34px;padding:22px;border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--surface)}
  .evidence-card{display:flex;flex-direction:column;gap:12px}
  .evidence-card h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.3;color:var(--ink)}
  .evidence-card img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--radius-control);background:#ffffff}
  .evidence-card p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-secondary)}
  .evidence-card .evidence-source{font-size:11px;line-height:1.45;color:var(--ink-label)}

  /* Toast sits above the fixed bar */
  .toast{top:auto;bottom:calc(92px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .stage{height:auto;min-height:0}
  .camera-switch button{padding:0 6px}
  .gate-summary{gap:8px}
}