:root{--bg:#0e1418;--panel:rgba(14,22,26,.9);--gold:#e0b862;--gold2:#f6dc9a;--line:rgba(224,184,98,.55);--line2:rgba(224,184,98,.22);--text:#f4ecd6;--soft:#d6ccb2;--muted:#a69f88;--ok:#8fd9a0;--bad:#ff9a85;--warn:#ffd073;--serif:Georgia,"Times New Roman",serif;--sans:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font:14px/1.4 var(--sans);-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{overflow:hidden}
#app{position:relative;height:100vh;height:100dvh;width:100%;overflow:hidden}
body.embed-mode #app{height:100vh;height:100dvh}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
button,select,input{font:inherit;color:inherit}button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,#gl:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.hud{position:absolute;z-index:4;pointer-events:none}.hud>*{pointer-events:auto}
#title{left:22px;top:16px;max-width:52vw;text-shadow:0 2px 14px rgba(0,0,0,.7);pointer-events:none}
#title small{display:block;font:600 11px var(--sans);letter-spacing:.22em;color:#fff;border-bottom:1px solid var(--line2);padding-bottom:5px;margin-bottom:6px;width:max-content}
#title h1{margin:0;font:600 clamp(24px,3.6vw,50px)/1.04 var(--serif);color:#fff;text-transform:uppercase;letter-spacing:.01em}
#title p{margin:6px 0 0;font:400 clamp(13px,1.7vw,22px) var(--serif);color:#fff}
#modePill{right:22px;top:18px;border:1px solid var(--line);border-radius:999px;padding:7px 18px;font:600 12px var(--sans);letter-spacing:.18em;background:rgba(10,16,20,.55);backdrop-filter:blur(6px)}
#bar{left:20px;right:20px;bottom:14px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 18px;background:var(--panel);border:1px solid var(--line2);border-radius:18px;backdrop-filter:blur(10px);box-shadow:0 8px 30px rgba(0,0,0,.5)}
#bar .ctl{display:flex;align-items:center;gap:10px;min-width:150px;flex:1 1 170px}
#bar .ctl label{font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--soft);white-space:nowrap}
#bar .ctl output{font:600 14px var(--sans);color:var(--gold2);min-width:44px;font-variant-numeric:tabular-nums}
#bar .stat{display:flex;flex-direction:column;min-width:78px}#bar .stat small{font:600 10px var(--sans);letter-spacing:.14em;color:var(--muted);text-transform:uppercase}#bar .stat b{font:600 20px var(--sans);font-variant-numeric:tabular-nums}
#bar .sep{width:1px;align-self:stretch;background:var(--line2)}
input[type=range]{-webkit-appearance:none;appearance:none;height:6px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--p,50%),rgba(255,255,255,.15) var(--p,50%));flex:1;min-width:70px;touch-action:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold2);border:2px solid #2a1c08;box-shadow:0 0 8px rgba(246,220,154,.6)}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold2);border:2px solid #2a1c08}
.btn{border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:12px;padding:9px 16px;font:600 14px var(--sans);color:var(--text)}
.btn:hover{background:rgba(255,255,255,.14)}
.btn.go{background:linear-gradient(180deg,#f6dc9a,#c99a3c);color:#2a1c08;border-color:#f6dc9a;box-shadow:0 2px 14px rgba(224,184,98,.35)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden}.seg button{border:0;background:transparent;padding:7px 11px;font:600 12px var(--sans);color:var(--soft)}.seg button[aria-pressed=true]{background:var(--gold);color:#2a1c08}
#side{right:20px;top:64px;width:min(330px,calc(100vw - 24px));max-height:calc(100dvh - 190px);overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px 16px 14px;box-shadow:0 10px 36px rgba(0,0,0,.45);scrollbar-width:thin}
#side h2{margin:0 0 6px;font:600 17px var(--serif);color:var(--gold2)}
#side .row{display:flex;justify-content:space-between;gap:10px;margin:5px 0;font-size:13px;color:var(--soft)}#side .row b{color:var(--text);font-variant-numeric:tabular-nums}
#side canvas{width:100%;height:120px;display:block;margin:6px 0;background:rgba(0,0,0,.25);border-radius:8px}
#side .note{font-size:12px;color:var(--muted)}
details.sci{margin-top:8px;border-top:1px solid var(--line2);padding-top:6px;font-size:12.5px;color:var(--soft)}details.sci summary{cursor:pointer;font:600 13px var(--sans);color:var(--gold2)}details.sci p{margin:6px 0}details.sci code{font:12px ui-monospace,Consolas,monospace;color:#fff3c9}
.tog{display:flex;align-items:center;gap:6px;font:600 11px var(--sans);letter-spacing:.1em;color:var(--soft);text-transform:uppercase}
#hint{left:22px;bottom:96px;max-width:min(430px,60vw);font-size:12.5px;color:#fff;text-shadow:0 1px 8px #000;pointer-events:none}
#warn{left:50%;transform:translateX(-50%);top:70px;background:rgba(120,30,20,.9);border:1px solid #ff9a85;border-radius:10px;padding:6px 14px;font-size:13px;display:none}
.lbl{position:absolute;z-index:3;pointer-events:none;background:rgba(14,10,4,.78);border:1px solid var(--line);color:var(--gold2);border-radius:8px;padding:2px 9px;font:500 13px var(--serif);transform:translate(-50%,-130%);white-space:nowrap}
@media(max-width:760px){#side{top:auto;bottom:168px;right:10px;left:10px;width:auto;max-height:30dvh;font-size:12px}#bar{left:8px;right:8px;bottom:8px;padding:8px 10px;gap:6px 10px}#bar .ctl{min-width:130px}#title{max-width:70vw}#modePill{display:none}#hint{display:none}#bar .stat b{font-size:16px}}
#side h2{cursor:pointer;user-select:none}#side h2:before{content:'▾ ';color:var(--gold)}#side.collapsed h2:before{content:'▸ '}#side.collapsed>*:not(h2){display:none}#side.collapsed{padding-bottom:10px}