:root{color-scheme:dark;--bg:#0b0f14;--panel:#101720;--text:#e5e8e8;--muted:#9ba9b4;--line:#283440;--accent:#b8c9c5;--gold:#d4b879;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:14px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}header{padding:25px 32px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);gap:20px}h1,h2{font-family:Georgia,serif;font-weight:400;margin:0}h1{font-size:30px;letter-spacing:-.6px}h2{font-size:25px;line-height:1.2}.eyebrow{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin:0 0 10px}.subtitle{color:var(--muted);font-size:12px;margin:9px 0 0}.header-tools{display:flex;gap:8px}button,select{font:inherit;color:var(--text);background:#17212c;border:1px solid #35414e;border-radius:6px;padding:8px 11px;cursor:pointer}button:hover{background:#24313f}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button.primary{background:var(--accent);color:#10201e;border-color:var(--accent);min-width:76px}main{display:grid;grid-template-columns:minmax(0,1fr) 315px;min-height:530px;height:calc(100vh - 235px)}#stage{position:relative;min-width:0;min-height:410px;overflow:hidden}canvas{display:block;width:100%;height:100%;touch-action:none}aside{padding:22px 23px;border-left:1px solid var(--line);overflow:auto}.case-controls{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;margin-bottom:24px}.case-controls label{font-size:11px;color:var(--muted);display:grid;gap:7px}.case-controls select{font-size:12px;width:100%;padding:8px 5px}#step-text{color:#b1bdc5;font-size:13px;line-height:1.65;margin:13px 0 18px;min-height:66px}#steps{list-style:none;padding:0;margin:0 0 24px}#steps button{border:0;background:transparent;width:100%;text-align:left;border-radius:0;font-size:12px;padding:8px 0;color:var(--muted);display:flex;gap:12px}#steps button span{font-variant-numeric:tabular-nums;color:#647782}#steps button.active{color:var(--text)}#steps button.active span{color:var(--gold)}summary{cursor:pointer;font-size:12px;color:#bbc6cc;padding:10px 0;border-top:1px solid var(--line)}.check{display:flex;align-items:center;gap:8px;font-size:12px;margin:12px 0;color:#b6c2c9}input[type=checkbox]{accent-color:var(--accent)}.orientation{position:absolute;left:24px;top:20px;font-size:10px;letter-spacing:1.1px;color:#82939f;pointer-events:none}.scene-hint{position:absolute;bottom:20px;left:24px;color:#728490;font-size:11px;pointer-events:none}#selected{position:absolute;left:24px;bottom:45px;padding:0;color:var(--gold);font-size:13px;pointer-events:none}#load{position:absolute;inset:0;display:grid;place-content:center;background:var(--bg);z-index:3;color:var(--muted)}.timeline{display:flex;align-items:center;gap:10px;border-top:1px solid var(--line);padding:13px 25px}.scrub{flex:1;display:grid;gap:9px;color:var(--muted);font-size:11px;min-width:80px}.scrub input{width:100%;accent-color:var(--accent)}footer{padding:10px 25px 17px;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#748591}a{color:#bbcaca}dialog{max-width:540px;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px;line-height:1.7}dialog::backdrop{background:#0009}.dialog-close{float:right}dialog h2{clear:both;padding-top:20px}.recording #record{border-color:var(--gold);color:var(--gold)}@media(max-width:850px){header{padding:20px}h1{font-size:25px}main{grid-template-columns:minmax(0,1fr) 270px}.timeline{padding:12px 16px}#back{display:none}footer{flex-wrap:wrap}}@media(max-width:620px){header{align-items:flex-start;padding:16px;gap:8px}h1{font-size:22px}.eyebrow{font-size:9px}.subtitle{max-width:230px;line-height:1.5}.header-tools{flex-direction:column}.header-tools button{font-size:11px;padding:7px}main{display:flex;flex-direction:column;height:auto;min-height:0}#stage{height:420px;min-height:420px}aside{border-left:0;border-top:1px solid var(--line);padding:18px}.case-controls{margin-bottom:18px}#step-text{min-height:0}#steps{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}#steps button{width:auto;font-size:11px;padding:4px 0}#steps button span{display:none}#steps li{margin-right:8px}.timeline{position:sticky;bottom:0;background:#0b0f14f2;gap:8px;z-index:2}.timeline button{font-size:11px;padding:9px}#record{display:none}#time-label{display:none}footer{line-height:1.6;padding:12px 16px}.orientation,.scene-hint,#selected{left:16px}}

.video-link{white-space:nowrap;border:1px solid #35414e;border-radius:6px;padding:8px 11px;text-decoration:none}
