:root{color-scheme:dark;--bg:#081320;--panel:#0e1d2c;--surface:#101f2f;--line:rgba(143,192,221,.12);--ink:#e9f4fd;--muted:#7f96a9;--accent:#5ad8f3;--orange:#f8a25b;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #5ad8f3;outline-offset:4px}.shell{max-width:1920px;margin:0 auto;min-height:100vh}.topbar{height:77px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 31px;gap:16px;background:#0a1724}.brandmark{width:37px;height:37px;border:1px solid #366c88;color:#62d5ee;display:grid;place-items:center;transform:rotate(45deg);border-radius:6px}.brandmark span{display:block;transform:rotate(-45deg);font-size:25px}.small-cap{font-size:10px;font-weight:800;letter-spacing:2.2px;color:#72a8c3}.dim{color:#597184}.brandname{font-size:22px;font-weight:900;letter-spacing:2.5px;line-height:1.15;margin-top:5px}.brandname span{font-weight:300;color:#88a2b4}.top-right{margin-left:auto;display:flex;align-items:center;gap:11px}.chip{font-size:10px;font-weight:750;letter-spacing:1.3px;border:1px solid #24506a;border-radius:4px;padding:10px 13px;color:#7adcf3}.chip.subtle{border-color:#22394a;color:#70899a}.live-dot:before{content:'';display:inline-block;width:7px;height:7px;background:#5ce9ac;border-radius:100%;margin-right:10px;box-shadow:0 0 8px #5ce9ac}.icon-button{background:transparent;border:1px solid #2b4659;color:#afc6d4;border-radius:4px;padding:8px 12px;white-space:nowrap;font-size:16px}.icon-button span{font-size:10px;letter-spacing:1px;margin-left:5px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 356px;grid-template-rows:minmax(555px,calc(100vh - 505px)) auto;min-height:calc(100vh - 119px)}.visual-area{position:relative;overflow:hidden;background:radial-gradient(ellipse at 44% 55%,#12334e 0%,#0b1c2e 46%,#081622 85%);min-height:570px}.visual-area::after{content:'';pointer-events:none;position:absolute;inset:0;box-shadow:inset 0 0 100px rgba(3,9,18,.38)}.eyebrow{position:absolute;z-index:4;top:34px;left:40px;color:#73b0c7;font-size:10px;letter-spacing:2px;font-weight:800;display:flex;gap:13px;align-items:center}.hairline{width:24px;height:1px;background:#54d7ee}.bullet{font-size:12px;color:#4a7286}.hero-title{position:absolute;z-index:2;top:65px;left:41px;pointer-events:none}.hero-title .name{font-size:clamp(24px,3vw,43px);font-weight:780;letter-spacing:-1.5px}.hero-title em{color:#69e2fa;font-style:normal}.hero-title p{color:#92a8bc;margin-top:6px;font-size:13px}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab;position:relative;z-index:1}#scene:active{cursor:grabbing}.scene-label{position:absolute;z-index:3;color:#91bbd1;font-size:9px;letter-spacing:1.5px;pointer-events:none;display:flex;gap:10px;align-items:center;text-align:right}.scene-label strong{display:block;font-weight:900;color:#d5e9f4;font-size:10px;letter-spacing:1px;margin-top:4px}.scene-label.top{right:9%;top:30%}.scene-label.bottom{left:8%;bottom:25%;text-align:left}.label-line{height:1px;width:44px;background:linear-gradient(90deg,transparent,#65c7e6)}.scene-corner{position:absolute;bottom:30px;color:#587c93;font-size:10px;letter-spacing:1.4px;font-weight:800;z-index:4}.scene-corner.left{left:39px}.scene-corner.right{right:35px}.status-line{display:inline-block;width:20px;height:3px;vertical-align:middle;background:#68d6ec;margin-right:7px}.dotsep{margin:0 5px;color:#3f6378}.legend{position:absolute;z-index:4;left:42px;bottom:70px;font-size:9px;letter-spacing:1.2px;color:#8aafc4;display:flex;align-items:center;gap:8px}.legend-swatch{width:17px;height:2px;background:var(--accent);box-shadow:0 0 9px var(--accent)}.legend-separator{width:16px}.warm-dot{width:7px;height:7px;border-radius:100%;background:var(--orange);box-shadow:0 0 9px var(--orange)}.webgl-error{z-index:15;position:absolute;top:42%;left:18%;width:65%;padding:18px;background:#3c202a;border:1px solid #ef9d76;border-radius:8px;color:#fbe7dc}.right-panel{background:#0f1d2d;display:flex;flex-direction:column;border-left:1px solid var(--line);min-height:570px}.panel-heading{padding:31px 25px 18px}.panel-heading .small-cap{display:flex;justify-content:space-between}.panel-heading .small-cap span{color:#60798c}.panel-heading h2{font-size:21px;margin:13px 0 6px;font-weight:740;letter-spacing:-.55px}.panel-heading p{font-size:12px;color:#7f9aad;margin:0}.mode-group{margin:0 22px 23px;display:flex;padding:3px;gap:3px;border:1px solid #2a4154;border-radius:6px;background:#0b1724}.mode{border:0;flex:1;background:none;color:#7791a5;font-size:9px;font-weight:800;letter-spacing:.4px;text-align:left;line-height:1.4;padding:10px 9px;border-radius:4px}.mode.active{background:#20394d;color:#c9f5ff;box-shadow:inset 0 0 0 1px #315f76}.mode small{display:block;font-size:8px;font-weight:600;letter-spacing:.65px;margin-top:3px;opacity:.7}.controls{padding:0 25px}.control{margin-bottom:23px}.control-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.control label{font-size:12px;font-weight:630}.control output{font-size:15px;color:#e4f8fc;font-variant-numeric:tabular-nums;font-weight:800;white-space:nowrap}.control output small{font-size:10px;font-weight:550;color:#7fb7c9}.control input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#45bada,#22435b);border-radius:4px;display:block;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;background:#d7f7fd;width:13px;height:13px;border:3px solid #219cc1;border-radius:100%;box-shadow:0 0 0 4px #154154}.control input[type=range]::-moz-range-thumb{background:#d7f7fd;width:9px;height:9px;border:3px solid #219cc1;border-radius:100%}.range-ends{display:flex;justify-content:space-between;margin-top:9px;color:#61798c;font-size:9px;letter-spacing:.8px}.hidden{display:none}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer;border-top:1px solid var(--line);padding:16px 0 12px;gap:10px}.toggle-row strong{display:block;font-size:12px}.toggle-row small{display:block;font-size:10px;color:#748c9e;margin-top:4px}.toggle-row input{position:absolute;opacity:0}.switch{height:20px;width:36px;position:relative;border-radius:20px;background:#31495b;flex-shrink:0;transition:.2s}.switch:after{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#8295a5;border-radius:50%;transition:.2s}.toggle-row input:checked+.switch{background:#147d9e}.toggle-row input:checked+.switch:after{left:19px;background:#d5fbff}.control-actions{display:flex;gap:7px;padding:18px 24px 21px;margin-top:auto}.primary-action{height:40px;flex:1;min-width:0;background:#57cee9;border:1px solid #57cee9;color:#092238;font-size:10px;font-weight:850;letter-spacing:.7px;border-radius:4px}.primary-action:hover{background:#95e9f7}.secondary-action{width:39px;flex-shrink:0;background:#192d40;color:#c0dce8;border:1px solid #395267;border-radius:4px;font-size:16px}.panel-footer{padding:13px 24px;display:flex;justify-content:space-between;border-top:1px solid var(--line);font-size:9px;color:#567588;letter-spacing:.7px}.panel-footer strong{color:#78adbd}.data-area{grid-column:1/-1;background:#0b1826;border-top:1px solid #294057;padding:29px 33px 20px}.data-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:22px}.data-heading .small-cap{color:#84aabb}.data-pip{display:inline-block;width:4px;height:4px;border-radius:100%;background:#478da1;vertical-align:middle;margin:0 5px}.data-heading h2{font-size:24px;letter-spacing:-.7px;margin:7px 0 0}.data-actions{display:flex;gap:9px}.data-actions button{background:#132c40;border:1px solid #2b5069;color:#a3c7dc;font-size:10px;letter-spacing:.7px;font-weight:800;padding:12px 16px;border-radius:4px}.data-actions button:hover{background:#244258}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:5px;overflow:hidden}.metric{padding:19px 21px 18px;background:linear-gradient(145deg,#122639,#0c1b2a);border-right:1px solid var(--line);min-width:0}.metric:last-child{border-right:0}.metric-name{display:flex;justify-content:space-between;gap:5px;font-size:9px;font-weight:820;letter-spacing:1.15px;color:#91b8c8}.metric-name span{color:#4e7288}.metric-value{color:#7de7f7;margin:12px 0 7px;font-size:32px;line-height:1.08;font-weight:750;letter-spacing:-.6px;font-variant-numeric:tabular-nums}.metric-value small{font-size:13px;font-weight:650;color:#7aaac0}.metric.warm .metric-value{color:#ffab69}.metric-hint{font-size:10px;color:#7891a5}.graphs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:17px}.graph{border:1px solid var(--line);background:#0d2031;border-radius:5px;padding:14px 16px 11px;min-width:0}.graph-title{display:flex;justify-content:space-between;align-items:center;font-size:12px;gap:10px;margin-bottom:4px}.graph-title strong{font-size:12px}.graph-title span{font-size:9px;letter-spacing:1px;font-weight:750;color:#a5c1d0}.graph-title small{color:#597d91}.graph-line{display:inline-block;width:17px;height:2px;vertical-align:middle;margin-right:7px}.graph-line.orange{background:#ffac70}.graph-line.cyan{background:#65dff3}.graph canvas{width:100%;height:110px;display:block}.fine-print{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#526e82;font-size:9px;font-weight:740;letter-spacing:1px;margin-top:17px}.micro-dot{display:inline-block;width:5px;height:5px;border:1px solid #5695a7;border-radius:50%;margin-right:8px}.footer{height:42px;padding:0 33px;display:flex;align-items:center;justify-content:space-between;font-size:9px;font-weight:800;color:#5e7d90;letter-spacing:1.3px;border-top:1px solid var(--line)}
@media(max-width:1150px){.workspace{grid-template-columns:minmax(0,1fr) 328px}.topbar{padding:0 18px}.panel-heading{padding-left:19px;padding-right:19px}.controls{padding:0 19px}.visual-area{min-height:570px}.hero-title .name{font-size:31px}.scene-label{display:none}}
@media(max-width:840px){.workspace{display:flex;flex-direction:column}.visual-area{height:570px;min-height:500px}.right-panel{min-height:0;border-top:1px solid var(--line);border-left:0}.controls{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.mode-group{max-width:450px}.panel-heading{padding:25px 22px}.control-actions{margin-top:0}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(2){border-right:0}.metric:nth-child(-n+2){border-bottom:1px solid var(--line)}.chip.subtle{display:none}}
@media(max-width:540px){.topbar{height:67px;padding:0 13px;gap:11px}.brandmark{width:31px;height:31px}.brandname{font-size:16px}.small-cap{font-size:8px}.brand .small-cap .dim{display:none}.top-right .chip{display:none}.icon-button span{display:none}.visual-area{height:455px;min-height:455px}.eyebrow{left:19px;top:23px;font-size:8px}.hero-title{left:19px;top:51px}.hero-title .name{font-size:29px}.hero-title p{font-size:11px;max-width:265px}.legend{left:19px;bottom:60px}.scene-corner{bottom:22px;font-size:8px}.scene-corner.left{left:19px}.scene-corner.right{right:15px;font-size:8px}.controls{display:block}.data-area{padding:23px 15px}.data-heading{align-items:flex-start}.data-heading h2{font-size:21px}.data-actions{flex-direction:column}.data-actions button{padding:9px 10px;font-size:8px}.metric{padding:15px 12px}.metric-name{font-size:8px}.metric-value{font-size:25px}.metric-hint{font-size:9px}.graphs{grid-template-columns:1fr}.footer{padding:0 15px;font-size:8px;gap:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
