:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;--bg:#06111b;--panel:#0a1622;--line:#21313f;--muted:#7e96a6;--text:#d6e5ee;--cyan:#62def0;--orange:#eaa143}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text)}button,input{font:inherit}button{cursor:pointer;transition:background .2s,border-color .2s,transform .2s}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.app-shell{height:100dvh;min-height:620px;display:grid;grid-template-columns:minmax(0,1fr) 346px;background:var(--bg)}
.viewport{position:relative;min-width:0;overflow:hidden;background:radial-gradient(circle at 50% 40%,#143449,#06101a 76%)}
#canvas{position:absolute;inset:0;width:100%;height:100%}#canvas canvas{width:100%;height:100%;display:block;outline:none}
.scene-top{position:absolute;top:30px;left:36px;right:32px;display:flex;gap:12px;align-items:flex-start;justify-content:space-between;pointer-events:none}
.eyebrow{color:#72b8c4;font-weight:800;letter-spacing:.19em;font-size:10px}.dot{width:4px;height:4px;background:var(--cyan);display:inline-block;border-radius:50%;margin:0 8px 2px}
.product-name{margin-top:9px;font-size:31px;letter-spacing:.03em;font-weight:850;line-height:1.15;color:#effcff}.product-name span{color:var(--cyan);font-weight:500}
.product-sub{color:#9fb4c5;font-size:12px;letter-spacing:.07em;margin-top:7px}.live-token{display:flex;gap:9px;align-items:center;background:#0b1b29e8;color:#84a5b9;border:1px solid #355066;border-radius:2px;padding:12px 15px;font-weight:800;letter-spacing:.12em;font-size:10px;white-space:nowrap}.live-token.live{color:#86f6bb;border-color:#277b62}.pulse{width:8px;height:8px;border-radius:50%;background:#8293a0;box-shadow:0 0 0 4px #8ca3b01c}.live .pulse{background:#5cf5a0;box-shadow:0 0 12px #5cf5a088}
.scene-metrics{position:absolute;left:28px;bottom:116px;display:flex;gap:0;background:#05111edb;border:1px solid #315064cc;backdrop-filter:blur(6px);pointer-events:none}.metric{min-width:122px;padding:15px 18px;border-right:1px solid #253a49}.metric:last-child{border:0}.metric>span{font-size:9px;letter-spacing:.13em;font-weight:800;color:#94aeba}.metric strong{display:block;font-weight:600;margin-top:7px;color:#e8f9ff;font-size:26px;font-variant-numeric:tabular-nums;line-height:1}.metric small{font-size:12px;font-weight:500;color:var(--cyan)}
.scene-bottom{position:absolute;bottom:30px;left:28px;right:28px;display:flex;flex-wrap:wrap;gap:20px;align-items:end;justify-content:space-between}.scene-help{color:#93abbb;font-size:11px;line-height:2.3;max-width:390px}kbd{font-family:inherit;font-size:10px;color:#cfdee7;border:1px solid #496075;padding:4px 6px;border-radius:2px;white-space:nowrap}.camera-presets{display:flex;flex-wrap:wrap;gap:4px}.camera,.snapshot{font-size:10px;font-weight:800;letter-spacing:.1em;background:#0c1b29e8;color:#a8bece;border:1px solid #3a5063;padding:11px 13px}.camera:hover,.snapshot:hover{border-color:var(--cyan);color:#d6fbff}.camera.active{background:#1b6374;color:white;border-color:#4fb9cb}.snapshot{border-color:#9a7442;color:#ffdb9e}
.scale-tag{position:absolute;right:30px;top:126px;color:#92a9b8;font:700 9px ui-monospace,monospace;letter-spacing:.09em}.sep{color:var(--orange);margin:0 6px}
.dashboard{height:100%;overflow:auto;background:var(--panel);border-left:1px solid #2c4253;scrollbar-color:#335263 #08131f;scrollbar-width:thin}.dashboard-header{padding:31px 25px 18px}.dashboard-header h1{font-size:24px;letter-spacing:-.04em;margin:10px 0 6px;font-weight:720;color:#f1fbff}.dashboard-header p{font-size:12px;line-height:1.7;color:#8ba4b5;margin:0}
.control-section{padding:20px 25px 21px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.section-heading h2{margin:0;font-size:12px;letter-spacing:.055em;text-transform:uppercase;color:#cde1ef}.count{font:600 10px ui-monospace,monospace;color:#517486}
.button-grid{display:grid;gap:9px}.primary,.danger,.minor{padding:13px 11px;width:100%;font-size:10px;letter-spacing:.12em;font-weight:850;border-radius:3px}.primary{color:#052334;background:#64cde0;border:1px solid #89e3ef}.primary:hover{background:#9deefa}.danger{background:#281b24;border:1px solid #8a3945;color:#f5a3a8}.danger:hover{background:#44212c}.minor{background:#152534;border:1px solid #395669;color:#b8cddd}.minor:hover{background:#244051}.wide{margin-top:17px}
.slider-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#a8c0d0;margin-top:20px;margin-bottom:10px}.slider-head output,.bank-info output{font:700 13px ui-monospace,monospace;color:var(--cyan)}input[type=range]{appearance:none;width:100%;height:5px;border-radius:4px;background:#294152;outline:none;accent-color:var(--cyan);cursor:pointer;margin:4px 0 8px}input[type=range]::-webkit-slider-thumb{appearance:none;background:#83dfe9;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 3px #5de0ed24;border:2px solid #d5f8fe}input[type=range]::-moz-range-thumb{background:#83dfe9;width:13px;height:13px;border-radius:50%;border:2px solid #d5f8fe}.range-labels{display:flex;justify-content:space-between;color:#547084;font:700 9px ui-monospace,monospace}.bank{padding:4px 0 13px}.bank+.bank{border-top:1px solid #172838;padding-top:15px}.bank-info{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.055em;font-weight:650;margin-bottom:9px;color:#b5c9d6}.bank-info output{font-size:11px}.bank-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px;background:#47badc}.bank-dot.orange{background:#e58b45}.bank-dot.green{background:#4fc7ad}.bank-dot.purple{background:#a396e2}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0 11px;gap:12px;font-size:12px;color:#b3c7d5}.toggle-row input{accent-color:#66d9e8;cursor:pointer;height:16px;width:16px}.tiny-label{font-size:9px;font-weight:800;letter-spacing:.13em;margin:21px 0 10px;color:#7794a6}.module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.module-chip{border:1px solid #2a4154;background:#0e202e;padding:9px 6px;font-size:10px;color:#aac3d2;display:flex;align-items:center;gap:7px;cursor:pointer}.module-chip input{accent-color:#62d3e2;cursor:pointer;margin:0}
.selection-box{background:#0b1c29}.selected-name{font-size:13px;color:#f1f8fd;font-weight:700;margin-bottom:9px}.selected-description{font-size:11px;color:#91a9ba;line-height:1.65;min-height:40px}.runtime-info{display:flex;gap:8px;justify-content:space-between;border-top:1px solid #264154;margin-top:19px;padding-top:13px;font-size:8px;letter-spacing:.06em;color:#5f91a0;font-weight:800}.dashboard footer{padding:22px 25px 30px;font-size:9px;line-height:1.8;color:#668193;letter-spacing:.04em;border-top:1px solid var(--line)}
@media(max-width:1100px){.app-shell{grid-template-columns:minmax(0,1fr) 320px}.scene-metrics{left:15px;bottom:134px}.metric{min-width:95px;padding:13px 11px}.metric strong{font-size:22px}.scene-bottom{left:15px;right:15px}.product-name{font-size:26px}.scene-top{left:20px}}
@media(max-width:760px){.app-shell{height:auto;display:flex;flex-direction:column}.viewport{height:73svh;min-height:480px}.dashboard{height:auto;overflow:visible;border-left:0;border-top:1px solid #294559}.scene-top{left:15px;right:15px;top:18px}.product-name{font-size:22px}.product-sub{font-size:10px}.live-token{padding:8px;font-size:9px}.scale-tag{display:none}.scene-metrics{left:10px;right:10px;bottom:95px}.metric{flex:1;min-width:0;padding:10px 8px}.metric strong{font-size:16px}.metric small{font-size:9px}.metric>span{font-size:7px}.scene-bottom{bottom:14px;gap:8px}.scene-help{display:none}.camera,.snapshot{font-size:9px;padding:9px 8px}.dashboard-header,.control-section{padding-left:20px;padding-right:20px}}