:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#090e12;color:#d9e6e9}*{box-sizing:border-box}body{margin:0;padding:30px 38px;max-width:1800px;margin-inline:auto}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow,.badge,footer,.note>span{font:10px Consolas,monospace;letter-spacing:2px;color:#77b9be}h1{font-size:28px;margin:9px 0 0;font-weight:600}h1 span{font-weight:300;color:#88a0aa}.badge{border:1px solid #284149;padding:10px;letter-spacing:1px}main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:30px;align-items:start}.viewer{min-width:0}.scene{position:relative;aspect-ratio:4/3;overflow:hidden;background:#000;border:1px solid #29444d;isolation:isolate}.world,.hud,.scene img,canvas,.flash,.black{position:absolute;inset:0;width:100%;height:100%}.world{transform-origin:50% 50.5%;will-change:transform}.scene img{image-rendering:pixelated;user-select:none}.hud{pointer-events:none}.stat{position:absolute;transform:translate(-50%,-50%);font-family:Consolas,monospace;font-size:clamp(10px,2.1vw,34px);font-weight:bold;color:#f5e5ff;text-shadow:2px 2px #261337;line-height:1}.stat.copper{color:#ffdc8c}.flash{background:#f1ffff;opacity:0;pointer-events:none}.black{background:#000;opacity:0;pointer-events:none}canvas{pointer-events:none}.transport{display:flex;justify-content:space-between;font:11px Consolas,monospace;color:#8fa8b2;padding:15px 0 10px}.transport>span:first-child{display:flex;align-items:center;gap:8px}i{width:6px;height:6px;border-radius:50%;background:#7cf9db;display:inline-block}.timeline{height:2px;background:#23323b}#progress{height:100%;width:0;background:#7cf9db}.hint,.approval{font-size:11px;color:#68818b;line-height:1.6}.hint{margin-top:12px}aside{border-top:1px solid #36505a;padding-top:20px}h2{font-size:21px;font-weight:500;margin:10px 0}.intro{font-size:12px;line-height:1.7;color:#8ba3ad;margin-bottom:24px}.control{display:block;margin-bottom:21px}.control>span{display:flex;justify-content:space-between;font-size:12px;margin-bottom:9px}output{font:11px Consolas,monospace;color:#89e8df}input[type=range]{width:100%;accent-color:#87e8df;height:4px;cursor:pointer}button{border:1px solid #88e8df;background:#88e8df;color:#08202a;font:600 12px Segoe UI,sans-serif;cursor:pointer;padding:13px 12px;border-radius:2px}button:hover{filter:brightness(1.12)}button:disabled{opacity:.4;cursor:default}button:focus-visible,input:focus-visible{outline:2px solid #f6bcff;outline-offset:4px}#start{width:100%;display:flex;justify-content:space-between}.actions>div{display:flex;gap:8px;margin-top:8px}.secondary{background:transparent;border-color:#314a54;color:#b9cbd1;flex:1}kbd{font-size:15px}.note{border-top:1px solid #23353e;margin-top:25px;padding-top:20px}.note p{color:#8ba3ad;font-size:12px;line-height:1.7}.approval{margin-top:24px}footer{display:flex;justify-content:space-between;border-top:1px solid #23353e;padding-top:18px;margin-top:26px;font-size:9px;color:#5a7681}@media(min-width:1700px){.stat{font-size:34px}}@media(max-width:900px){body{padding:20px}main{grid-template-columns:1fr}aside{max-width:600px;width:100%}.stat{font-size:3vw}header{gap:15px}h1{font-size:23px}.badge{font-size:8px}}@media(max-width:500px){body{padding:12px}header{align-items:start}.badge{max-width:100px}.eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:20px}footer{letter-spacing:0;font-size:8px}}
