:root{color-scheme:dark;--ink:#e8f2fa;--muted:#7f95a7;--edge:rgba(144,183,208,.17);--cyan:#6adfea;--gold:#d5b177;--bg:#09121e;--panel:#101e2c;--panel2:#0c1825;font-family:Inter,'Segoe UI',Arial,sans-serif;}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.app{min-height:100vh;display:flex;flex-direction:column;overflow:hidden}.topbar{height:80px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 33px;background:#0c1723;border-bottom:1px solid var(--edge);z-index:3}.brand{display:flex;gap:15px;align-items:center}.logo{width:37px;height:37px;border:1px solid #37687b;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:4px;transform:rotate(-26deg)}.logo span{height:17px;width:3px;background:#6bd4d9;border-radius:4px}.logo span:nth-child(2){height:27px;opacity:.75}.logo span:nth-child(3){height:21px;opacity:.5}.brand-head{font-size:17px;letter-spacing:.16em;font-weight:800}.brand-head span{font-size:12px;color:#8a9cab;letter-spacing:.08em;font-weight:500}.brand-sub{font-size:9px;color:#829cb0;letter-spacing:.26em;margin-top:4px}.top-center{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.18em;color:#94aabc}.live-pulse,.chip-dot{width:7px;height:7px;border-radius:50%;background:#68dfca;display:inline-block;box-shadow:0 0 13px #4ed5ba}.top-divider{margin:0 12px;color:#466277}.top-actions{display:flex;gap:8px}.button{border:1px solid var(--edge);background:#152638;color:#d8e9ef;border-radius:5px;padding:9px 13px;font-size:12px;letter-spacing:.02em}.button:hover{background:#203b50;border-color:#427084}.button.subtle{font-weight:600}.layout{display:grid;flex:1;min-height:calc(100vh - 116px);grid-template-columns:minmax(0,1fr) 354px;grid-template-rows:minmax(540px,1fr) 258px}.viewport-wrap{grid-column:1;grid-row:1;position:relative;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 54% 48%,#153145 0,#0e2132 44%,#081322 100%)}.viewport{position:absolute;inset:0}.viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}.viewport-grain{pointer-events:none;position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(255,255,255,.007) 4px);opacity:.6}.hud-title{z-index:1;position:absolute;top:42px;left:44px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:.23em;color:var(--cyan);font-weight:700}.hud-title h1{font-weight:450;letter-spacing:-.035em;font-size:clamp(30px,3.2vw,51px);line-height:1.12;margin:18px 0 13px}.hud-title h1 em{font-style:normal;color:#77c8d5}.hud-title p{font-size:12px;letter-spacing:.03em;color:#94adbf}.scene-chip{position:absolute;z-index:1;pointer-events:none;font-size:9px;letter-spacing:.13em;color:#88a1b1;font-weight:600}.chip-top{top:27px;right:29px;display:flex;align-items:center;gap:10px}.chip-bottom{bottom:27px;right:30px}.chip-sep{color:#4b7181}.view-corners i{pointer-events:none;position:absolute;z-index:1;width:21px;height:21px;border:1px solid #416479;opacity:.6}.view-corners i:nth-child(1){top:18px;left:18px;border-right:0;border-bottom:0}.view-corners i:nth-child(2){top:18px;right:18px;border-left:0;border-bottom:0}.view-corners i:nth-child(3){bottom:18px;left:18px;border-right:0;border-top:0}.view-corners i:nth-child(4){bottom:18px;right:18px;border-left:0;border-top:0}.axis-widget{position:absolute;bottom:85px;right:32px;width:70px;height:70px;opacity:.8}.axis-widget:after{content:'';position:absolute;left:30px;top:30px;width:8px;height:8px;border-radius:50%;background:#a1cedb}.axis-widget span{position:absolute;font-size:10px;font-weight:800}.axis-y{color:#96e0ce;left:30px;top:0}.axis-y:after{content:'';position:absolute;left:4px;top:13px;height:23px;border-left:1px solid #96e0ce}.axis-x{color:#e5a1a6;left:0;top:50px}.axis-x:after{content:'';position:absolute;left:12px;top:-11px;width:23px;border-top:1px solid #e5a1a6;transform:rotate(-26deg)}.axis-z{color:#b6b9f3;right:2px;top:52px}.axis-z:before{content:'';position:absolute;right:12px;top:-12px;width:23px;border-top:1px solid #b6b9f3;transform:rotate(25deg)}.legend{position:absolute;bottom:108px;left:43px;display:flex;flex-direction:column;gap:10px;color:#9eb6c5;font-size:11px}.legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px}.legend-dot.aqua{background:#66d5e2;box-shadow:0 0 8px #51bcd7}.legend-line{display:inline-block;margin:0 8px 2px 0;width:17px;border-top:2px solid #55d7e8}.play-controls{position:absolute;left:43px;bottom:36px;display:flex;align-items:center;gap:8px}.primary-play{background:#73d9dd;color:#0a2932;border:0;border-radius:50%;font-size:17px;width:43px;height:43px;font-weight:700}.primary-play:hover{background:#abf4f6}.round-icon{height:36px;width:36px;border-radius:50%;border:1px solid #365e75;color:#b8dbe5;background:#173043;font-size:21px}.round-icon:hover{background:#25465d}.timecode{font-family:Consolas,'Courier New',monospace;font-size:12px;letter-spacing:.04em;margin-left:15px;color:#91a8b8}
.sidebar{grid-column:2;grid-row:1/3;min-height:0;background:linear-gradient(#111f2d,#0f1c29);border-left:1px solid var(--edge);display:flex;flex-direction:column}.sidebar-head{display:flex;justify-content:space-between;align-items:center;margin:29px 27px 12px}.side-tag{font-size:9px;letter-spacing:.11em;color:#748b9a;border:1px solid #2d4457;padding:6px 8px;border-radius:3px}.side-intro{margin:0 27px 22px}.side-intro h2{font-size:21px;font-weight:500;letter-spacing:-.025em;margin:4px 0 7px}.side-intro p{margin:0;color:#849bad;font-size:12px}.preset-strip{display:flex;gap:6px;margin:0 27px 22px}.preset{flex:1;border:1px solid #304557;border-radius:4px;padding:9px 5px;background:#142637;color:#91a6b5;font-size:11px}.preset.active{background:#244b58;border-color:#5babb2;color:#d6f5f5}.preset:hover{border-color:#74cdd5}.scroll-panel{overflow:auto;min-height:0;padding:0 27px 25px;scrollbar-width:thin;scrollbar-color:#2b4f64 transparent}.section-title{border-top:1px solid var(--edge);padding-top:17px;margin:7px 0 23px;display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.14em;color:#adc4d0;font-size:10px;font-weight:700}.section-title span:last-child{color:#57798a}.control{margin-bottom:23px}.control label{display:flex;justify-content:space-between;align-items:baseline;gap:7px;font-size:12px;color:#c6d8e3}.control output{font-family:Consolas,monospace;font-size:12px;color:#75d9de;font-weight:600;white-space:nowrap}input[type=range]{appearance:none;width:100%;height:3px;margin:22px 0 11px;background:linear-gradient(to right,#4caeb8,#386178);border-radius:10px;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:3px solid #87e3e7;background:#173647;border-radius:50%;box-shadow:0 0 0 3px #18313e}input[type=range]::-moz-range-thumb{width:11px;height:11px;border:3px solid #87e3e7;background:#173647;border-radius:50%}.range-labels{display:flex;justify-content:space-between;font-size:10px;color:#6e879a}.toggles{margin-top:-5px}.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0 13px;font-size:12px;color:#b3cbd6;cursor:pointer}.toggle-row input{position:absolute;opacity:0}.toggle-track{display:block;position:relative;border-radius:12px;width:33px;height:18px;background:#405466;border:1px solid #557186}.toggle-track:after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:#aebfca;border-radius:50%;transition:transform .2s}.toggle-row input:checked+.toggle-track{background:#317f87}.toggle-row input:checked+.toggle-track:after{transform:translateX(15px);background:#c3ffff}.note{display:flex;gap:10px;border:1px solid #315165;border-radius:5px;background:#112d3b;color:#97b1bc;font-size:11px;line-height:1.5;padding:13px;margin-top:12px}.note-icon{font-size:15px;color:#72c8d3}
.analytics{grid-column:1;grid-row:2;background:#0c1825;border-top:1px solid var(--edge);padding:22px 33px 12px;display:flex;flex-direction:column;min-height:0}.analytics-title{display:flex;align-items:center;justify-content:space-between}.analytics-title h2{font-weight:500;margin:5px 0 0;font-size:19px;letter-spacing:-.02em}.status-state{display:flex;align-items:center;gap:7px;color:#adcfce;font-size:10px;letter-spacing:.14em}.status-dot{display:block;width:7px;height:7px;background:#7bd9cf;border-radius:50%}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:18px}.metric{border-right:1px solid var(--edge);padding:0 18px}.metric:first-child{padding-left:0}.metric:last-child{border:0}.metric-label{display:flex;justify-content:space-between;color:#7f9bae;font-size:9px;letter-spacing:.12em;white-space:nowrap}.metric-symbol{color:#5daab7;font-size:11px}.metric strong{display:block;font-family:Consolas,'Courier New',monospace;font-weight:500;font-size:clamp(16px,1.6vw,24px);letter-spacing:-.05em;margin-top:8px}.metric strong small{font-size:11px;color:#8eaabb}.metric-foot{margin-top:6px;font-size:8px;color:#658295;letter-spacing:.05em;white-space:nowrap}.metric-foot b{color:#c39f6d}.tiny-track{display:block;height:3px;background:#263b4b;margin:7px 10px 0 0}.tiny-track i{display:block;width:0;height:100%;background:#6bd9da}.charts{display:none;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;min-height:115px}.chart-block{background:#101f2c;border:1px solid #1d3849;border-radius:5px;padding:10px 11px}.chart-head,.chart-footer{display:flex;justify-content:space-between;font-size:9px;color:#9db0be;letter-spacing:.08em}.chart-head span:last-child{color:#70c9d4}.chart-block canvas{width:100%;height:63px;display:block}.chart-footer{font-size:8px;color:#5c7b8d}.analytic-foot{display:flex;justify-content:space-between;color:#69899a;letter-spacing:.08em;font-size:9px;margin-top:auto;padding-top:13px}.tiny-status{display:inline-block;background:#80d5cd;border-radius:50%;height:5px;width:5px;margin-right:6px}.footer{height:36px;background:#08111a;border-top:1px solid #1d3241;color:#678298;display:flex;justify-content:space-between;align-items:center;font-size:9px;letter-spacing:.1em;padding:0 33px}.footer-muted{color:#406175}.footer i{color:#60bdcc;font-style:normal;margin:0 5px}
#help{background:#102332;color:#c6dbe6;border:1px solid #3d6478;border-radius:10px;width:min(500px,92vw);box-shadow:0 25px 130px #0009;padding:26px}.modal-top{display:flex;justify-content:space-between}.modal-top h2{margin:0;font-size:21px}.modal-top .close{background:none;border:none;color:#9bb6c8;font-size:26px}#help p{line-height:1.6;font-size:13px}.modal-button{margin-top:7px}
@media(min-height:900px) and (min-width:1000px){.charts{display:grid}.layout{grid-template-rows:minmax(560px,1fr) 352px}.analytics{padding:24px 33px 12px}}
@media(max-width:1200px){.layout{grid-template-columns:minmax(0,1fr) 320px}.top-center{display:none}.analytics{padding-left:22px;padding-right:22px}.metric{padding:0 8px}.metric-label{font-size:8px}.sidebar-head,.side-intro{margin-left:20px;margin-right:20px}.preset-strip{margin-left:20px;margin-right:20px}.scroll-panel{padding-left:20px;padding-right:20px}}
@media(max-width:850px){.topbar{padding:0 15px;height:65px}.layout{display:flex;flex-direction:column}.viewport-wrap{height:68vh;min-height:440px}.sidebar{order:3;border-left:0;border-top:1px solid var(--edge);height:auto;max-height:none}.scroll-panel{max-height:none;overflow:visible}.analytics{order:2;height:auto;min-height:240px}.footer{height:auto;min-height:40px;gap:9px;padding:12px 15px;flex-wrap:wrap}.footer span:nth-child(2){display:none}.charts{display:grid}.hud-title{left:25px;top:57px}.hud-title h1{font-size:34px}.play-controls{left:25px}.legend{left:25px}.metric strong{font-size:18px}}
@media(max-width:510px){.hide-small{display:none}.brand-head{font-size:13px}.brand-sub{font-size:8px}.top-actions{gap:5px}.top-actions .button{padding:8px}.viewport-wrap{min-height:400px;height:58vh}.hud-title h1{font-size:29px}.hud-title p{max-width:230px;font-size:11px}.chip-top{top:22px;font-size:8px;right:28px}.chip-bottom{display:none}.legend{bottom:95px}.play-controls{bottom:25px}.axis-widget{right:18px;bottom:52px}.analytics{padding:19px 15px}.metric-grid{grid-template-columns:repeat(2,1fr);row-gap:17px}.metric:nth-child(2){border:0}.metric:nth-child(3){padding-left:0}.metric strong{font-size:21px}.charts{gap:9px;margin-top:17px}.chart-head{font-size:7px}}