:root{color-scheme:dark;--bg:#070d16;--panel:#0c1520;--edge:#1d3440;--text:#e4f0f1;--muted:#78919b;--aqua:#70ebdc;--soft:#132532;font:14px/1.45 system-ui,-apple-system,Segoe UI,Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}button,select,input{font:inherit}button,select{border:1px solid #294251;border-radius:6px;background:#142530;color:#d5e8e9}button{cursor:pointer;padding:11px 17px;font-weight:650;transition:background .18s,transform .18s}button:hover{background:#254051}button:active{transform:scale(.98)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--aqua);outline-offset:3px}.shell{display:flex;min-height:100vh}.sidebar{flex:0 0 320px;width:320px;background:#0d1720;border-right:1px solid #1f3540;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;padding:26px 23px 22px}.brandmark{font-size:40px;color:#65ecd9;text-shadow:0 0 24px #42ffee52}.brand h1{letter-spacing:.13em;font-size:18px;margin:2px 0;font-weight:850}.eyebrow,.kicker{font-size:10px;letter-spacing:.22em;color:#70adad;font-weight:760}.assetcode{display:flex;align-items:center;gap:9px;padding:13px 23px;border-block:1px solid var(--edge);font:700 10px monospace;color:#b2ced0;letter-spacing:.09em}.assetcode span:last-child{color:#6e858e;margin-left:auto}.statusdot{width:6px;height:6px;border-radius:100%;display:inline-block;background:#6ce9c4;box-shadow:0 0 8px #67eac7}.sidebarbody{padding:25px 23px;flex:1;overflow-y:auto}.sidebarbody .kicker{margin:0 0 17px}.field{display:block;color:#9eb2b9;font-size:12px;margin:0 0 16px}.field select{display:block;margin-top:7px;width:100%;height:38px;padding:0 9px}.divider{height:1px;background:#1a3440;margin:24px 0}.range{margin:0 0 19px}.range .top{display:flex;justify-content:space-between;color:#aabec4;font-size:12px;margin-bottom:6px}.range output{font:600 11px ui-monospace,SFMono-Regular,Consolas,monospace;color:#73e9d9}input[type=range]{width:100%;height:4px;appearance:none;background:#2e4b53;border-radius:4px;accent-color:#70e4d4}input[type=range]::-webkit-slider-thumb{appearance:none;background:#89f4de;border:2px solid #0b2b31;border-radius:50%;width:14px;height:14px;box-shadow:0 0 9px #62eacb62}.checks{display:flex;flex-direction:column;gap:13px;color:#9cb4bb;font-size:12px}.checks label{display:flex;gap:9px;align-items:center}.checks input{accent-color:#65ddce}.colors{display:flex;justify-content:space-between}.colors label{display:flex;gap:10px;align-items:center;flex-direction:column;color:#9cb4bb;font-size:12px}.colors input{width:75px;height:36px;border:1px solid #304650;border-radius:4px;padding:2px;background:#0c1c27;cursor:pointer}.sidefoot{border-top:1px solid var(--edge);padding:18px 23px}.sidefoot strong{font-size:10px;letter-spacing:.12em;color:#8bb7ba}.sidefoot p{font-size:11px;line-height:1.65;color:#68818c}.workspace{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;height:62px;border-bottom:1px solid #18303e;padding:0 29px;background:#0b1420;color:#b0c6ca;font-size:10px;letter-spacing:.065em}.topbar b{color:#f2fafb}.crumb{color:#63818e}.topright{display:flex;align-items:center;gap:10px;color:#80a4a5;font-size:10px}.badge{margin-left:8px;padding:5px 8px;border:1px solid #285052;border-radius:4px;color:#6ed7cd}.viewport{position:relative;flex:1;min-height:490px;background:#08111d;overflow:hidden}#stage{width:100%;height:100%;position:absolute;inset:0;display:block;touch-action:none}.corner{position:absolute;pointer-events:none}.tl{top:42px;left:43px;max-width:360px}.hero{font-size:clamp(29px,4vw,54px);letter-spacing:-.055em;font-weight:700;line-height:1.02;margin:13px 0}.hero i{font-weight:500;color:#80f1de}.desc{color:#829da7;font-size:13px;line-height:1.7;max-width:300px}.tr{right:35px;top:35px;text-align:right;display:flex;flex-direction:column;gap:2px}.metriclabel{color:#708c94;letter-spacing:.18em;font:700 10px ui-monospace,Consolas,monospace;margin-top:10px}.metric{font:700 24px ui-monospace,Consolas,monospace;color:#dff9f6}.metric small{font-size:12px;color:#83bfb8}.axislabels{position:absolute;left:34px;bottom:23px;color:#6b8e98;font:700 10px ui-monospace,monospace;letter-spacing:.06em;pointer-events:none}.axislabels span{padding:0 9px;color:#33545d}.renderpill{position:absolute;right:28px;bottom:22px;display:flex;gap:11px;align-items:center;font:700 10px ui-monospace,monospace;color:#8ac2b9;pointer-events:none}.mono{color:#576f7c}.controls{min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:15px 27px;background:#0b1722;border-top:1px solid #203743}.transport{display:flex;gap:9px;flex-wrap:wrap}.controls button{font-size:12px}.controls button.primary{color:#061d23;background:#83eadd;border-color:#83eadd}.controls button.primary:hover{background:#bbfff4}.smalltext{font-size:10px;letter-spacing:.12em;color:#617d89}.smalltext span{padding:0 8px;color:#3e6d78}.details{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:20px;padding:18px 28px 24px;border-top:1px solid #1c303b;background:#09121b}.details div{min-width:0}.details small{display:block;color:#71999b;font-size:9px;font-weight:750;letter-spacing:.17em;margin-bottom:5px}.details strong{display:block;color:#c1d4d7;font-size:11px;font-weight:550;overflow-wrap:anywhere}
@media(max-width:1100px){.sidebar{flex-basis:275px;width:275px}.smalltext,.details{display:none}.tl{left:24px;top:25px}.tr{right:19px;top:17px}.hero{font-size:36px}.desc{font-size:11px}.viewport{min-height:520px}}@media(max-width:750px){.shell{flex-direction:column}.sidebar{width:100%;flex-basis:auto;order:2}.workspace{order:1;min-height:78vh}.brand,.assetcode,.sidefoot{display:none}.sidebarbody{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;padding:18px}.sidebarbody .kicker,.sidebarbody .divider{grid-column:1/-1}.sidebarbody .divider{margin:8px 0}.sidebarbody .field{margin:0}.sidebarbody #sliders{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.sidebarbody .checks,.sidebarbody .colors{grid-column:1/-1}.topbar{height:50px;padding:0 16px}.topright{display:none}.viewport{min-height:60vh}.tl{top:15px;left:18px;max-width:240px}.tl .hero{font-size:28px}.tl .desc{display:none}.tr{top:15px;right:16px}.metric{font-size:18px}.axislabels,.renderpill{display:none}.controls{padding:10px}}