:root{color-scheme:dark;--ink:#e9edf0;--muted:#8c9ba7;--line:#ffffff19;--cyan:#82d8df;--amber:#dfa968}*{box-sizing:border-box}body{margin:0;background:#0b1015;color:var(--ink);font:14px system-ui,Tahoma,sans-serif;overflow:hidden}#view{position:absolute;top:0;right:0;bottom:0;left:0}canvas{display:block}button,select,input{font:inherit}button,select{color:inherit;background:#ffffff08;border:1px solid var(--line);border-radius:7px;padding:8px 11px;cursor:pointer}button:hover,button.on{background:#c7eff0;color:#13252a;border-color:#c7eff0}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}header{position:absolute;left:30px;top:27px;width:290px;pointer-events:none}.eyebrow{font:10px ui-monospace,monospace;letter-spacing:3px;color:var(--amber)}h1{font-size:54px;letter-spacing:-3px;line-height:1;margin:13px 0 9px;font-weight:550}header p{font-size:13px;line-height:1.7;color:#aab8c1;margin:0}.stats{display:flex;gap:8px;margin-top:18px}.stat{border:1px solid var(--line);border-radius:7px;padding:8px 11px;background:#0b101588;min-width:78px}.stat small{display:block;font:9px monospace;color:var(--muted);margin-bottom:5px}.stat b{font:18px ui-monospace,monospace;color:var(--cyan)}.panel{background:#111922df;border:1px solid var(--line);border-radius:12px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}nav{position:absolute;right:24px;top:24px;width:360px;padding:14px}.row{display:flex;gap:5px;align-items:center;flex-wrap:wrap}.caption{font:10px monospace;letter-spacing:1.5px;color:var(--muted);margin-bottom:9px}.row+.caption{margin-top:14px}nav button{font-size:12px;padding:7px 10px}#explain{position:absolute;left:30px;bottom:165px;width:270px;padding:17px;border-left:2px solid var(--amber);background:linear-gradient(90deg,#0c141bee,transparent)}#explain h2{font-size:19px;margin:5px 0 9px}#explain p{color:#aebdc6;font-size:13px;line-height:1.8;margin:0}#controls{position:absolute;right:24px;bottom:165px;width:265px;padding:17px}label{display:block;font-size:12px;margin:11px 0}label output{float:right;font-family:monospace;color:var(--amber)}input[type=range]{display:block;width:100%;accent-color:var(--amber);margin:10px 0}.mini{font-size:10px;color:var(--muted);line-height:1.6}.stages{position:absolute;bottom:27px;left:50%;transform:translate(-50%);display:flex;gap:7px;width:min(770px,calc(100% - 48px));padding:9px}.stage{flex:1;min-width:0;text-align:left;padding:10px;background:transparent}.stage span{font:10px monospace;color:var(--amber);display:block;margin-bottom:7px}.stage.on span{color:#326169}.stage b{font-size:12px;font-weight:500}.stage i{display:block;height:22px;margin-top:9px;border-bottom:1px solid currentColor;opacity:.45;background:linear-gradient(155deg,transparent 45%,currentColor 47%,transparent 50%)}#hint{position:absolute;bottom:139px;left:50%;transform:translate(-50%);font:10px monospace;color:#82939f;white-space:nowrap}#labels{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.pin{position:absolute;font-size:11px;color:#bfdbde;padding:5px 8px;border:1px solid #80c8d54a;border-radius:5px;background:#101c24ce;cursor:pointer;pointer-events:auto;white-space:nowrap}.pin:before{content:"•";color:var(--cyan);padding-right:7px}.pin:hover{color:#fff;background:#244650}#leaders{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none}#error{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);max-width:470px;padding:24px;z-index:20;background:#202c37;border:1px solid #90c8ca;border-radius:12px;line-height:1.8}#error:empty{display:none}#loading{position:absolute;top:48%;width:100%;text-align:center;color:#9ab4bf;pointer-events:none}#status{font:10px monospace;color:#9faeae;margin-top:12px}#status:before{content:"● ";color:#8bc6aa}#reset{margin-left:auto}.mobile-note{display:none}@media (max-width:900px){header{left:18px;top:18px;width:220px}h1{font-size:39px}header p{font-size:11px}nav{right:14px;top:16px;width:300px}#explain{left:16px;width:215px;bottom:163px}#controls{right:14px;width:225px}#explain p{font-size:11px}.pin{font-size:10px}}@media (max-width:600px){header{width:180px}h1{font-size:34px}header p{display:none}.stats{gap:4px;margin-top:10px}.stat{padding:6px;min-width:57px}.stat b{font-size:13px}.stat small{font-size:8px}nav{width:166px;padding:9px}nav .caption{font-size:8px}nav button{font-size:10px;padding:5px}#explain{bottom:262px;width:180px;padding:8px}#explain h2{font-size:15px}#explain p{font-size:10px}#controls{bottom:107px;width:calc(100% - 28px);padding:10px 14px;display:grid;grid-template-columns:1fr 1fr;gap:0 16px}#controls>.caption,#controls>.mini{display:none}#controls label{margin:4px 0}#controls .row{grid-column:1/-1}#controls input{margin:5px 0}.stages{bottom:12px;width:calc(100% - 24px);gap:2px;padding:5px}.stage{padding:6px}.stage b{font-size:10px}.stage i{height:12px}.stage span{font-size:8px}#hint{display:none}.pin{display:none!important}}header p{max-width:230px}nav{width:310px}#explain{width:250px;background:linear-gradient(90deg,#101916e8,#10191655);bottom:172px}#controls{width:235px;bottom:174px}#diagnostics{margin-top:8px;font-size:11px;color:#a8b6b9}#diagnostics summary{cursor:pointer}#diagnostics label{margin:6px 0}#diagnostics input[type=checkbox]{accent-color:#c9a577}#renderInfo{font:9px/1.5 monospace;white-space:pre-wrap;display:block;margin-top:8px}#materialDialog{color:#deded4;background:#142024;border:1px solid #76868a;border-radius:12px;width:min(860px,92vw);max-height:90vh;overflow:auto}#materialDialog::backdrop{background:#000b}#materialSheet{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}#materialSheet img{width:100%;height:auto}#materialSheet figure{margin:0;text-align:center;font-size:12px}#closeMaterial{float:right;font-size:22px}.pin{background:#102020dc;border-color:#a7c2bd44}.stage.on{background:#d2be96;color:#1b2522}select{max-width:100%}@media (max-width:600px){nav{width:167px}#diagnostics{font-size:9px}#explain{width:175px;bottom:270px}#controls{width:calc(100% - 28px);bottom:108px}#materialSheet{grid-template-columns:repeat(2,1fr)}header p{display:none}}#sidebar{position:fixed;right:18px;top:65px;bottom:150px;width:300px;display:flex;flex-direction:column;gap:10px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:6;padding:0 4px 8px}#sidebar nav,#sidebar #controls{position:static;width:100%;padding:12px;border:0;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;display:block}.control-group{flex:none;background:#182630ed}.control-group>summary{padding:13px 14px;cursor:pointer;font-weight:600;font-size:13px}.control-group[open]>summary{border-bottom:1px solid var(--line)}#uiToggle{position:fixed;right:22px;top:18px;z-index:8;background:#20333eee;color:#e9f4f5}#sidebar[hidden]{display:none}#renderInfo{max-height:160px;overflow:auto}#diagnostics{border-top:1px solid var(--line);padding-top:10px}#diagnostics summary{padding:6px 0}body.panels-hidden #explain{display:none}.stages{bottom:18px;max-width:730px}.stage i{display:none!important}#hint{bottom:120px}#explain{bottom:143px}@media (max-width:1000px){#sidebar{width:270px}.stages{left:18px;transform:none;width:calc(100% - 324px)}#explain{width:210px}.stage span{font-size:8px}}@media (max-width:650px){header{top:15px;left:14px;width:170px}header .eyebrow{font-size:8px;letter-spacing:1px}h1{font-size:32px;margin:8px 0}.stats{margin-top:8px}#status{display:none}#uiToggle{right:12px;top:16px;font-size:11px}#sidebar{top:62px;right:10px;bottom:112px;width:min(290px,calc(100% - 20px))}#sidebar #controls label{margin:11px 0}#sidebar #controls>.mini{display:block}#explain{display:none}.stages{left:10px;bottom:10px;width:calc(100% - 20px);padding:5px}.stage span{font-size:7px}.stage b{font-size:10px}#hint{display:none}}.effect-controls{border-top:1px solid var(--line);margin-top:12px;padding-top:12px}.effect-controls summary{cursor:pointer;font-size:12px}.effect-controls input[type=checkbox]{accent-color:var(--amber)}