*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-size:14px}
[hidden]{display:none!important}
:root{--amber:#c9b0ff;--amber-dim:rgba(201,176,255,.18);--panel:rgba(12,15,25,.85)}
#ui{grid-template-columns:minmax(0,1fr) minmax(0,380px)}
.brand h1{font-size:clamp(22px,2.7vw,36px);letter-spacing:.02em}
.back{display:block;width:fit-content;color:var(--mute);text-decoration:none;font-size:11px;margin-bottom:20px;pointer-events:auto}
.back:hover{color:var(--fg)}
.eyebrow{font-size:10px;letter-spacing:.16em}
.route{display:inline-block;margin-top:16px;padding:7px 10px;border:1px solid var(--line);border-left:2px solid var(--amber);color:#b8bdce;font-size:11px;background:#0a0e16a8}
.panel{gap:13px}
.panel p{font-size:13px;line-height:1.85}
.stage-no .en{max-width:210px;font-size:9px;line-height:1.6}
.sim-label{margin-left:auto;color:var(--mute);letter-spacing:.06em;font-size:9px}
#steps{grid-template-columns:repeat(var(--stage-count,12),minmax(86px,1fr))}
.step.on{border-color:rgba(201,176,255,.7);background:rgba(201,176,255,.08)}
.step.done::after{background:rgba(201,176,255,.4)}
.btn:hover{border-color:rgba(201,176,255,.55)}
#chart{width:100%;height:auto;margin-top:8px}
.stack-key{display:flex;gap:5px;flex-wrap:wrap;padding-top:3px}
.stack-key span{font:10px var(--f-mono);color:#adb6c8;display:flex;align-items:center;gap:4px}
.stack-key span::before{content:"";width:6px;height:6px;background:var(--layer);border-radius:1px}
.sources{border-top:1px solid var(--line);padding-top:11px;font-size:11px;color:var(--mute)}
.sources summary{cursor:pointer;color:#a9a3ba}
.sources p{font-size:11px;margin-top:10px;line-height:1.8;color:var(--mute)}
.sources a{display:block;color:#c9b0ff;text-underline-offset:3px;margin-top:10px;line-height:1.6}
#sLive dd{font-size:11.5px}
#sLive dd.pass{color:#8ee8c1}
#err{z-index:10;background:#080b10;gap:10px;align-content:center}
#err a{color:var(--amber)}
@media(max-width:900px){.brand h1{max-width:340px}.brand p{max-width:300px;line-height:1.7}}
@media(max-width:760px){#ui{grid-template-columns:minmax(0,1fr)}.back{margin-bottom:8px}.route{display:none}.brand h1{font-size:23px}.eyebrow{font-size:8px}.panel{max-height:33vh;gap:8px}.panel p{font-size:12px;line-height:1.7}.stack-key{display:none}.panel h2{font-size:18px}.live{padding:9px}.live-h{font-size:9px}.brand p{display:none}#sLive{font-size:11px}#chart{max-height:100px;object-fit:contain}}
@media(max-height:550px) and (min-width:761px){.panel{max-height:calc(100vh - 175px)}.brand .route,.brand p{display:none}.back{margin-bottom:8px}}