:root{color-scheme:dark;--gold:#f3cd80;--mint:#7fe7ca;--coral:#ff9a77;--violet:#b7a1ff;--ink:#f2efe4;--muted:#b6c5cd;--line:#8daab633}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 15% 0,#24504a66,transparent 65%),#0c131c;color:var(--ink);font:14px/1.5 system-ui,sans-serif}main{padding:20px;max-width:1200px;margin:auto}.eyebrow{text-transform:uppercase;color:var(--mint);letter-spacing:.13em;font-size:10px}h1{font:500 clamp(24px,3.5vw,34px)/1.12 Georgia,serif;margin:6px 0 12px}p{color:var(--muted);margin:5px 0}header{max-width:950px}.modes{display:flex;gap:8px;flex-wrap:wrap;margin:15px 0 10px}button{font:600 12px system-ui;cursor:pointer;color:var(--ink);padding:9px 13px;border:1px solid #adc6c23d;border-radius:10px;background:linear-gradient(135deg,#253c39,#141d28);transition:border-color .25s,box-shadow .25s}button:hover,button[aria-pressed=true]{border-color:var(--mint);color:#bcffe9;box-shadow:inset 0 0 17px #80edd214,0 0 15px #80edd225}button:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}.controls{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}.control{flex:1 1 160px;min-width:135px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;background:linear-gradient(110deg,#617b7812,#61787a06)}.control span{display:flex;gap:10px;justify-content:space-between;font-size:11px;color:var(--muted)}output{color:var(--gold);font-variant-numeric:tabular-nums}.control output{white-space:nowrap}input[type=range]{display:block;width:100%;appearance:none;margin:14px 0 7px;height:5px;border:1px solid #92dcbe30;border-radius:6px;background:linear-gradient(90deg,#619f8d,#243a4f);cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:1px solid #dcfff2;border-radius:50%;background:#acf5d9;box-shadow:0 0 9px #85f2d492}input[type=range]::-moz-range-thumb{width:14px;height:14px;border:1px solid #dcfff2;border-radius:50%;background:#acf5d9;box-shadow:0 0 9px #85f2d492}.viewport{margin:0;border:1px solid #89cbb95c;border-radius:16px;overflow:hidden;background:#0a121b;box-shadow:0 14px 36px #0004,inset 0 1px #b5ffe525}canvas{display:block;width:100%;height:360px;touch-action:none}body[data-solver=projection] canvas{height:340px}figcaption{font-size:12px;padding:13px 16px;color:var(--muted);border-top:1px solid var(--line)}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line)}.metrics div{background:#16252f;padding:12px 15px;min-width:0}.metrics output{display:block;font-size:20px;font-weight:700;color:var(--mint)}.metrics span{color:var(--muted);font-size:11px}.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:13px 0}.toolbar span{font-size:10px;color:#9dadba;margin-left:auto}.model{border:1px solid #b6a1ed35;border-radius:11px;padding:11px 14px;background:#bba5ef08}.model summary{color:#d0beff;cursor:pointer;font-size:12px;font-weight:600}.model pre{white-space:pre-wrap;color:#d5c5ff;font:12px/1.8 ui-monospace,monospace}.model p{font-size:12px}@media(max-width:600px){main{padding:13px}canvas{height:330px}body[data-solver=projection] canvas{height:320px}.control{flex-basis:130px}.metrics div{padding:9px}.metrics output{font-size:16px}.toolbar span{width:100%;margin-left:0}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}