:root{font-family:Inter,'Segoe UI',Arial,sans-serif;background:#07121e;color:#deebf3;font-synthesis:none;--ink:#07121e;--panel:#101e2b;--panel2:#142635;--line:#263c4e;--muted:#8aa3b5;--cyan:#5de4d1;--orange:#f7b362;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(ellipse at 60% -30%,#18384b,transparent 42%),#07121e}
button,select,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.topbar{height:74px;padding:0 28px;display:flex;align-items:center;gap:13px;border-bottom:1px solid #254053;background:#071622f5;position:relative;z-index:2}
.brand-mark{display:grid;place-items:center;width:39px;height:39px;background:#d1eadf;color:#092532;font-size:33px;line-height:1;border-radius:9px}
.brand strong{display:block;font-size:17px;letter-spacing:2.1px;font-weight:900}.brand strong span{font-weight:600;color:#75aaad}.brand small{display:block;font-size:9px;letter-spacing:2px;color:#86a5b4;margin-top:4px}
.top-right{margin-left:auto;display:flex;align-items:center;gap:25px;color:#9cb5c2;font-size:10px;letter-spacing:1.3px;font-weight:750}.powered{display:flex;align-items:center;gap:9px}.tiny-dot{width:7px;height:7px;display:inline-block;background:#4de2c4;box-shadow:0 0 12px #43eac7;border-radius:100%}.version{color:#648295}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 355px;min-height:calc(100vh - 74px);max-width:1920px;margin:auto}.stage{min-width:0;padding:27px clamp(20px,3vw,52px) 42px}.sidebar{border-left:1px solid var(--line);background:#0c1a27;padding:28px 24px 45px;min-width:0}
.stage-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:22px}.eyebrow{font-size:10px;letter-spacing:2.3px;font-weight:800;color:#75b7ba}.stage-head h1{font-size:clamp(27px,2.9vw,41px);line-height:1.08;letter-spacing:-1.4px;margin:9px 0 7px;font-weight:800}.stage-head h1 em{font-weight:500;font-style:normal;color:#87c1bb}.stage-head p{margin:0;color:#91adbf;font-size:13px}.scene-tools{display:flex;gap:7px}.tool{background:#192d3b;border:1px solid #325165;border-radius:6px;color:#9eb8c9;letter-spacing:1px;font-size:10px;font-weight:800;padding:10px}.tool.active{background:#164144;border-color:#367d79;color:#73ede0}
.visual-wrap{position:relative;height:clamp(360px,48vh,660px);overflow:hidden;border:1px solid #355265;border-radius:9px;background:linear-gradient(175deg,#163044 0%,#112435 49%,#071524 100%)}
#scene{width:100%;height:100%;display:block;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.scene-overlay{pointer-events:none;position:absolute;inset:18px 18px auto;display:flex;justify-content:space-between}.corner-label{font-size:9px;font-weight:800;letter-spacing:2.2px;color:#c1d8df}.corner-label span{display:block;margin-top:7px;font-size:9px;color:#7eabb5;letter-spacing:1.5px}.compass{font-size:12px;font-weight:900;color:#9cb9c6}.compass span{color:#eeae6c;padding:0 6px}.scene-bottom{pointer-events:none;position:absolute;bottom:0;left:0;right:0;padding:19px 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px;background:linear-gradient(transparent,#091926d8)}.hint{font-size:9px;color:#6a91a5;letter-spacing:1.3px}.hint span{color:#ccdee5}.sun-readout{display:flex;gap:12px;align-items:center;font-size:9px;letter-spacing:1.5px;color:#d5ad74;white-space:nowrap}.sun-readout strong{font-size:17px;color:#e5e6ce;letter-spacing:0}
.status-strip{margin-top:11px;display:flex;gap:15px;align-items:center;justify-content:space-between;background:#122c35;border:1px solid #265461;border-radius:8px;padding:14px 17px}.status-strip>div{display:grid;grid-template-columns:10px auto;column-gap:12px;row-gap:4px;align-items:center}.status-dot{width:9px;height:9px;border-radius:50%;background:#52e5ba;box-shadow:0 0 12px #54d9b880}.status-dot.warn{background:#f9b45b;box-shadow:0 0 12px #f9b45b80}.status-dot.off{background:#a5b0bd;box-shadow:none}.status-strip strong{font-size:11px;letter-spacing:1.1px;color:#9aecdb}.status-strip small{grid-column:2;color:#9bb3c1;font-size:11px}.numeric{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;font-weight:800;color:#cce2e8}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}.metric{padding:19px 18px;border:1px solid #2b4251;border-radius:8px;background:linear-gradient(135deg,#152839,#0e1e2c)}.metric small{display:block;font-size:9px;letter-spacing:1.2px;font-weight:850;color:#92b0bf;min-height:25px}.metric strong{display:flex;align-items:baseline;gap:7px;font-size:clamp(23px,2.35vw,33px);margin-top:8px;letter-spacing:-.9px;font-variant-numeric:tabular-nums}.metric i{font-size:12px;letter-spacing:0;font-weight:550;font-style:normal;color:#91afbd}.metric-sub{display:block;font-size:10px;margin-top:9px;color:#6991a4}
.analysis-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:13px;margin-top:15px}.panel{border-radius:8px;background:#111f2e;border:1px solid #2b4558;padding:17px 18px;min-width:0}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:10px}.panel-title small{color:#719da9;font-size:9px;letter-spacing:1.6px;font-weight:800}.panel-title h2{margin:6px 0 0;font-size:14px;font-weight:750}.legend-swatch{font-size:9px;color:#96b1bc;white-space:nowrap}.chart-panel canvas{width:100%;height:156px;display:block;margin-top:13px}.flux-panel .pill,.pill{border:1px solid #43636b;background:#19343b;padding:6px 8px;border-radius:4px;color:#85e0d1;font-size:9px;white-space:nowrap;letter-spacing:.3px}.heatmap-wrap{margin-top:16px}#flux{width:100%;height:122px;display:block;border:1px solid #334d5d;border-radius:3px}.heatmap-axis{display:flex;justify-content:space-between;gap:8px;margin-top:5px;color:#7798a9;font-size:9px}.heatmap-legend{display:flex;align-items:center;gap:10px;margin-top:14px;color:#9cabb8;font-size:9px}.gradient{height:7px;border-radius:10px;flex:1;background:linear-gradient(to right,#071a33,#1a5775,#26bfa6,#f9c645,#f95c35,#ffe5af)}
.control-heading h2{margin:9px 0 4px;letter-spacing:-.5px;font-size:26px}.control-heading p{font-size:12px;color:#86a6b8;margin:0 0 21px}.player-row{display:flex;gap:8px}.primary,.secondary{border:none;border-radius:6px;height:41px;font-size:12px;font-weight:800}.primary{flex:1;background:#62d8c8;color:#082633}.primary:hover{background:#a0f3e7}.secondary{width:43px;background:#1d3444;color:#b2cbd5;border:1px solid #365164;font-size:25px}
.preset-wrap{margin:23px 0 15px}.preset-wrap>label{font-size:9px;letter-spacing:1.5px;color:#88a6b6;font-weight:850}.preset-wrap select{appearance:none;background:#132a39;border:1px solid #315063;color:#d4e6ed;border-radius:6px;width:100%;margin-top:9px;padding:11px 9px;font-size:11px}
.control-group{border-top:1px solid #284253;padding:17px 0 8px}.group-title{display:flex;align-items:center;gap:9px;margin-bottom:16px}.group-num{border:1px solid #3c6870;padding:4px 5px;color:#8fd6d0;font-size:9px;border-radius:3px}.group-title h3{margin:0;font-size:13px}.control{margin:0 0 16px}.control label{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:#b6d1dd}.control output{color:#83e7d8;font-size:11px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}.control input[type=range]{display:block;width:100%;height:4px;appearance:none;margin:12px 0 5px;border-radius:9px;background:#2e4e60;accent-color:#64e1cd;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border-radius:50%;border:2px solid #112b3b;background:#63dfcb;box-shadow:0 0 0 2px #60debf40}.control input:disabled{opacity:.4;cursor:not-allowed}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:10px 0 20px}.toggle-row strong{font-size:11px;font-weight:650}.toggle-row small{display:block;margin-top:5px;color:#7392a3;font-size:10px}.switch{position:relative;display:block;width:37px;height:22px;flex:none}.switch input{opacity:0;position:absolute}.switch span{display:block;height:22px;background:#345164;border-radius:20px;position:relative;transition:background .15s}.switch span:before{content:"";position:absolute;width:16px;height:16px;top:3px;left:3px;border-radius:50%;background:#d5e1e8;transition:transform .15s}.switch input:checked+span{background:#297c79}.switch input:checked+span:before{transform:translateX(15px);background:#87f5e2}
.controller-details{margin-top:9px;background:#132a39;border:1px solid #2a5360;border-radius:8px;padding:16px}.controller-details h2{font-size:14px}.controller-details dl{margin:14px 0 0}.controller-details dl div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #264555;font-size:11px}.controller-details dt{color:#88aabb}.controller-details dd{margin:0;color:#cee7e9;font-variant-numeric:tabular-nums;font-weight:800}
.footer-actions{display:flex;gap:8px;margin-top:16px}.export{border:1px solid #3b6170;border-radius:5px;background:#182f3e;padding:11px 5px;flex:1;font-size:11px;font-weight:750;color:#bee0e6}.export:hover{border-color:#6dc5b9}.disclaimer{font-size:10px;line-height:1.65;color:#688899;margin-top:21px}
@media (max-width:1190px){.workspace{grid-template-columns:minmax(0,1fr) 305px}.sidebar{padding:22px 16px}.stage{padding:24px 17px}.metrics{grid-template-columns:repeat(2,1fr)}.analysis-grid{grid-template-columns:1fr}.visual-wrap{height:420px}.legend-swatch{white-space:normal}}
@media (max-width:760px){.topbar{height:64px;padding:0 13px}.brand strong{font-size:14px}.brand small{font-size:7px;letter-spacing:1.1px}.top-right .version{display:none}.powered{font-size:8px}.workspace{display:flex;flex-direction:column}.stage{padding:18px 12px 24px}.stage-head{align-items:start;flex-direction:column;margin-bottom:15px}.stage-head h1{font-size:29px}.stage-head p{font-size:11px}.visual-wrap{height:350px}.scene-tools{align-self:flex-end}.scene-bottom{padding:15px}.hint{max-width:205px;font-size:8px;line-height:1.5}.status-strip{padding:12px;flex-wrap:wrap}.metrics{gap:8px}.metric{padding:13px}.metric small{font-size:8px}.metric strong{font-size:27px}.analysis-grid{gap:9px}.sidebar{border-left:0;border-top:1px solid var(--line);padding:24px 20px 45px}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:0s!important}}
