:root{color-scheme:dark;--bg:#09121b;--panel:#101d28;--paper:#e9e2ce;--brass:#d9a95b;--muted:#8d9da7;--border:#293540}
*{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--paper)}
#app{height:100dvh;min-height:650px;display:grid;grid-template-columns:minmax(0,1fr) 358px}
#viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 45% 40%,#263640 0%,#101b26 52%,#070e17 100%)}
#viewport>canvas{display:block;width:100%;height:100%;touch-action:none}
#viewportLabel{position:absolute;top:30px;left:34px;z-index:1;letter-spacing:.33em;font-weight:800;font-size:13px}#viewportLabel span{font-weight:400;color:#b6b6a8}
#status{position:absolute;left:34px;bottom:50px;font:11px ui-monospace,monospace;letter-spacing:.15em;color:#a4b6bd}
#scale{position:absolute;right:30px;bottom:50px;color:#d8cdb1;font:11px ui-monospace,monospace;letter-spacing:.13em}#scale span{color:#7e939e}
#panel{padding:42px 31px 24px;border-left:1px solid #2c3a44;background:linear-gradient(155deg,#122430,#0d1720 80%);overflow:auto}
.eyebrow{font:9px ui-monospace,monospace;letter-spacing:.14em;color:var(--brass);margin-bottom:20px}
h1{font-size:43px;letter-spacing:.14em;font-weight:600;margin:0;color:#f2ebdc}h1 small{font-size:18px;letter-spacing:.06em;color:var(--brass)}
p.intro{color:var(--brass);letter-spacing:.14em;text-transform:uppercase;font-size:12px;margin:6px 0 22px}
p.about{font-size:13px;line-height:1.8;color:#b7c2c6;margin:0 0 30px}
.control{border-top:1px solid var(--border);padding:17px 0 15px}.control label{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.015em}.control output{color:var(--brass);font-family:ui-monospace,monospace}.control input{appearance:none;-webkit-appearance:none;width:100%;height:4px;background:#41515a;outline:none;margin:21px 0 8px;accent-color:var(--brass);border-radius:8px}.control input::-webkit-slider-thumb{appearance:none;width:14px;height:14px;background:var(--brass);border:3px solid var(--panel);outline:1px solid #c9ab77;border-radius:50%;cursor:pointer}.control input::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--brass);cursor:pointer}.scaleLine{display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:#778b93;letter-spacing:.08em}
.buttons{display:flex;flex-wrap:wrap;gap:9px;margin:22px 0 18px}button{cursor:pointer;background:var(--brass);color:#09131d;border:1px solid var(--brass);padding:12px 14px;font-weight:800;font-size:10px;letter-spacing:.08em;transition:filter .2s}button:hover{filter:brightness(1.13)}button.secondary{color:#d1c7b2;background:#18262f;border-color:#485259}.telemetry{display:flex;gap:12px;border-top:1px solid var(--border);padding-top:20px}.telemetry>div{flex:1;min-width:0}.telemetry span{display:block;font:9px ui-monospace,monospace;color:#8a9aa0;margin-bottom:9px}.telemetry strong{font:13px ui-monospace,monospace;color:#dabc85}.legend{border-top:1px solid var(--border);margin-top:25px;padding-top:17px;color:#7f939d;font-size:10px;line-height:1.7}.legend i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#d8a65e;margin-right:7px}
@media(max-width:850px){#app{display:block;min-height:0;height:auto}#viewport{height:57vh;min-height:340px}#panel{padding:30px 23px}#status,#scale{bottom:20px;font-size:9px}#viewportLabel{left:20px;top:19px}}