:root{color-scheme:dark;--bg:#081720;--panel:#102530;--ink:#edf6f4;--muted:#b3c8cc;--line:#31505c;--accent:#f1c471;--teal:#82e4d4;--button:#193440}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Microsoft YaHei","PingFang SC",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:var(--button);border:1px solid var(--line);border-radius:9px;min-height:44px;padding:8px 15px;cursor:pointer;white-space:nowrap;font-size:18px}button:hover{border-color:var(--accent)}button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button[aria-pressed=true],button[aria-current=step]{background:var(--accent);color:#15252d;border-color:var(--accent);font-weight:700}button:disabled{opacity:.4;cursor:default}#app{max-width:1920px;margin:auto;min-height:100dvh;padding:16px 24px 8px;display:grid;grid-template-rows:auto auto minmax(410px,1fr) auto auto;gap:12px;height:100dvh}header,.brand,nav,.question,.modes,.stagebar,.view-tabs,.view-tools,.stage-bottom,.phase-line,.controls,.speed,footer,.dialog-head{display:flex;align-items:center;gap:10px}header,.question,.stagebar,.stage-bottom,.phase-line,footer,.dialog-head{justify-content:space-between}.brand-icon{font-size:50px;color:var(--accent);line-height:1}h1{font-size:27px;letter-spacing:.04em;margin:0}h1 span{font-size:21px;font-weight:400;margin-left:12px}.brand p{margin:4px 0 0;color:var(--muted);font-size:14px}.question h2{font-size:24px;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;min-height:0}.stage{position:relative;border:1px solid var(--line);border-radius:18px;background:#06151f;display:flex;flex-direction:column;min-height:410px;overflow:hidden}.stagebar{padding:12px 16px;position:relative;z-index:1}.viewport{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}#scene{display:block;width:100%;height:100%;min-height:300px}#scene text{font-family:"Microsoft YaHei",sans-serif;fill:#fff;font-size:var(--label-size,42px);paint-order:stroke;stroke:#071721;stroke-width:9px;stroke-linejoin:round}.stage-bottom{padding:8px 16px 12px;color:#d7e9e9;font-size:17px}.scale-note{font-size:13px;color:#acc1c9}.stagebar button{font-size:17px;min-height:40px;padding:6px 12px}aside{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:0}aside h2{font-size:26px;line-height:1.35;margin:0}aside p{font-size:20px;line-height:1.55;margin:0}.phase-line{color:var(--accent);font-size:16px}#condition{color:var(--muted);font-size:15px}.signal-chain{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:17px;margin-top:auto}.signal-chain span{border-bottom:2px solid var(--line);padding:6px 0}.signal-chain .active{color:var(--accent);border-color:var(--accent)}.signal-chain b{transform:rotate(-90deg);font-weight:400}.response-card{padding:12px;background:var(--bg);border-radius:10px;color:var(--teal)}.readout-title{display:flex;justify-content:space-between;align-items:center;font-size:18px;color:var(--ink)}.readout-title span{font-size:12px;color:var(--muted)}#trace{width:100%;height:65px}#trace text{fill:var(--muted);font-size:14px}.response-card p{font-size:17px;line-height:1.35}.key-note{font-size:16px!important;color:var(--muted)}.transport{display:flex;flex-direction:column;gap:10px}.timeline{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.timeline button{background:transparent;min-height:42px;font-size:18px}.timeline button[aria-current=step]{color:var(--accent);border-color:var(--accent);background:#f1c47112}.controls{flex-wrap:wrap}.primary{background:var(--accent);color:#17232a;font-weight:700;min-width:160px}.speed{margin-left:auto;font-size:16px}.speed button{min-width:46px;font-size:16px}#playStatus{font-size:16px;color:var(--muted);min-width:85px}footer{font-size:13px;color:var(--muted)}dialog{max-width:800px;width:calc(100% - 32px);max-height:85dvh;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:18px;padding:24px;font-size:18px;line-height:1.7}dialog::backdrop{background:#000b}dialog h2{margin:0}dialog h3{color:var(--accent);font-size:21px}dialog a{color:var(--teal)}.dialog-head{position:sticky;top:-24px;background:var(--panel);padding:10px 0}#assetError{position:absolute;top:50%;background:#501f23;color:white;padding:20px}.contrast{--bg:#000;--panel:#07101a;--ink:#fff;--muted:#e0edf3;--line:#a2b5c1;--accent:#ffe198;--teal:#aaffed;--button:#142735}.contrast #scene text{stroke-width:12px}.contrast .stage{border:2px solid #d8e4ec}.contrast .timeline button[aria-current=step]{background:#ffe198;color:#000}
@media(min-width:1600px){#app{padding:22px 34px 14px;gap:16px}.workspace{grid-template-columns:minmax(0,1fr) 330px}aside h2{font-size:30px}aside p{font-size:23px}.question h2{font-size:28px}}
@media(max-width:1100px){#app{padding:12px;height:auto;min-height:100dvh;grid-template-rows:auto auto auto auto auto}.workspace{grid-template-columns:minmax(0,1fr) 250px}.stage{height:500px}aside{padding:15px}aside p{font-size:18px}aside h2{font-size:24px}.question{align-items:flex-start;gap:12px}.question h2{font-size:22px}h1 span{font-size:18px}.stagebar{padding:10px;gap:6px}.stagebar button{padding:6px 8px}.scale-note{display:none}}
@media(max-width:760px){header{align-items:flex-start;flex-wrap:wrap}h1{font-size:25px}h1 span{font-size:18px}nav{width:100%;gap:8px}nav button{flex:1;padding:7px 10px;font-size:16px}.question{flex-direction:column}.question h2{font-size:22px;line-height:1.45}.modes{width:100%}.modes button{flex:1}.workspace{grid-template-columns:1fr}.stage{height:490px;min-height:380px}.stagebar{flex-wrap:wrap}.view-tabs,.view-tools{gap:6px}.stagebar button{font-size:16px}aside{display:grid;grid-template-columns:1fr;gap:9px}aside h2{font-size:24px}aside p{font-size:19px}.signal-chain{margin:0}.response-card{display:none}.timeline{grid-template-columns:repeat(4,1fr)}.timeline button{font-size:17px;padding:8px 5px}.controls{gap:8px}.controls>button{flex:1;padding:8px 11px}.controls .primary{flex-basis:100%;min-width:0}.speed{margin-left:0}.stage-bottom{font-size:16px}.stage{height:420px}footer{flex-wrap:wrap}#playStatus{margin-left:auto}}
@media(max-height:740px) and (min-width:1101px){#app{height:auto;min-height:100dvh}.stage{height:420px}aside{gap:8px;padding:14px}aside p{font-size:18px}aside h2{font-size:24px}.response-card{padding:8px}#trace{height:48px}}

@media(max-width:600px){.stage{height:355px;min-height:355px}#scene{min-height:230px}.stage-bottom{font-size:15px;flex-wrap:wrap}}