.demo-intro { grid-template-columns:1fr; padding-bottom:32px; }
.demo-intro .hero-copy { max-width:780px; }
.case-demo { margin-block:24px 56px; }
.demo-stage { overflow:hidden; border-radius:32px; background:var(--information,#eaf2fb); }
.demo-heading { padding:28px 32px 8px; display:flex; align-items:baseline; gap:24px; justify-content:space-between; }
.demo-heading h2 { font-size:32px; letter-spacing:-.03em; margin:0; }
.demo-heading span { font-size:13px; flex-shrink:0; }
.demo-speech { min-height:88px; margin:0; padding:16px 32px; font-size:21px; line-height:1.4; max-width:65ch; }
.demo-world { height:480px; position:relative; }
.demo-world canvas { width:100%; height:100%; display:block; }
.demo-labels { display:flex; justify-content:space-around; gap:12px; padding:8px 24px; font-size:14px; color:var(--ink); }
.demo-labels span { flex:1; text-align:center; }
.demo-controls { padding:20px 32px 28px; }
.demo-controls-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.demo-controls button,.demo-mock button { min-height:44px; padding:10px 18px; border:0; border-radius:999px; font:inherit; font-size:14px; cursor:pointer; background:#fff; color:#25282d; }
.demo-controls button:hover { background:#cbdafe; }
.demo-controls button:focus-visible,.demo-mock :is(button,input,select):focus-visible { outline:3px solid #245bce; outline-offset:4px; }
.demo-controls input { flex:1; min-width:90px; accent-color:#245bce; }
.demo-controls time { font-size:13px; font-variant-numeric:tabular-nums; }
.demo-chapters { display:flex; gap:8px; margin-top:14px; }
.demo-chapters button { flex:1; min-width:0; padding-inline:4px; background:transparent; }
.demo-chapters button[aria-current] { color:#245bce; background:#fff; font-weight:650; }
.demo-note { font-size:13px; color:var(--muted); margin-top:12px; }
.demo-error { margin:10px 0; font-size:14px; }
.demo-mock { margin-top:48px; }
.demo-mock h2 { font-size:34px; margin-bottom:16px; }
.demo-mock > p { max-width:70ch; }
.demo-workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:32px; margin-top:24px; padding:32px; border-radius:28px; background:#f0f2f4; }
.demo-settings label { display:block; font-size:15px; margin-bottom:20px; }
.demo-settings :is(input,select) { display:block; width:100%; max-width:100%; min-height:44px; padding:9px 12px; margin-top:8px; border:1px solid #9aa4af; border-radius:8px; background:white; color:#25282d; font:inherit; }
.demo-settings input[type=checkbox] { display:inline-block; width:20px; min-height:20px; margin-right:8px; vertical-align:middle; }
.demo-result { min-width:0; }
.demo-result h3 { font-size:24px; margin:0 0 16px; }
.demo-result p { line-height:1.6; }
.demo-result ol { padding-left:22px; margin-block:16px; }
.demo-result li { margin-block:8px; }
.demo-mock .demo-next { background:#26272b; color:white; margin-right:8px; }
.demo-mock button:disabled { opacity:.55; cursor:default; }
.demo-count { font-size:14px; margin-top:20px; }
.demo-fallback { display:none; padding:32px; }
.demo-world[data-renderer=fallback] canvas { display:none; }
.demo-world[data-renderer=fallback] .demo-fallback { display:block; }
@media(max-width:760px){.demo-heading{padding:24px 20px 8px;display:block}.demo-heading h2{font-size:27px}.demo-heading span{display:block;margin-top:10px}.demo-speech{padding:14px 20px;min-height:112px;font-size:18px}.demo-world{height:360px}.demo-controls{padding:16px 20px 24px}.demo-labels{font-size:12px;padding-inline:12px;gap:8px}.demo-workbench{grid-template-columns:1fr;padding:24px;gap:24px}.demo-chapters{gap:4px}.demo-chapters button{font-size:13px}.demo-controls-row input{flex-basis:100%;order:2}.demo-stage{border-radius:24px}.demo-mock h2{font-size:29px}}
@media(prefers-reduced-motion:reduce){.case-demo *{scroll-behavior:auto!important;transition:none!important}}

/* Shot framing changes throughout the story; fixed spatial labels would point at the wrong objects. */
.demo-labels { display:none; }