:root{--bg:#08141b;--panel:#0c1c24;--panel2:#0f242b;--line:#244047;--soft:#7f9da1;--bright:#e1ebe5;--mint:#83e6d1;--coral:#eaa783;--muted:#54737c;--font:'Inter','Avenir Next','Segoe UI',Arial,sans-serif;--mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace}
*{box-sizing:border-box}html,body{margin:0;height:100%;color:var(--bright);background:var(--bg);font-family:var(--font)}button,input,select{font:inherit}button{cursor:pointer;transition:background .16s ease,border .16s ease,color .16s ease}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.app{height:100vh;min-height:650px;display:flex;flex-direction:column;max-width:2500px;margin:0 auto;background:linear-gradient(150deg,#0a1c24,#071118 78%)}
.topbar{height:76px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:17px;background:#081820}
.brand-mark{width:39px;height:39px;border:1px solid #527579;display:grid;place-items:center;position:relative;flex-shrink:0;transform:rotate(45deg)}.brand-mark span{transform:rotate(-45deg);font-weight:900;font-size:21px;color:var(--mint)}.brand-mark i{position:absolute;width:7px;height:7px;background:var(--coral);right:-4px;top:-4px}
.eyebrow,.micro,.pane-heading,.readout-label,.toolbar,.viewport-technical,.axis-info,.scene-title,.footer{font-family:var(--mono);letter-spacing:.11em;font-size:10px}
.eyebrow{color:#7ba7ab;font-size:9px}.sep{color:#567b7d;padding:0 6px}.vtag{font-size:9px;color:var(--coral);margin-left:5px}
.brand-title{font-weight:850;font-size:23px;line-height:1.17;letter-spacing:.07em}.brand-title span{color:var(--mint);font-weight:400}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:.1em;font-family:var(--mono);color:var(--mint);white-space:nowrap}.dot,.live-icon,.pulse,.safety-dot{width:6px;height:6px;border-radius:100%;background:var(--mint);box-shadow:0 0 10px #53d7b9;display:inline-block}.top-divider{height:24px;width:1px;background:var(--line);margin:0 13px}.subtle{color:#8aabab}.subtle b{color:#c8d9d1}
.workspace{overflow:hidden;display:grid;grid-template-columns:minmax(260px,304px) minmax(420px,1fr) minmax(250px,282px);min-height:0;flex:1}
.sidebar{background:#091920;overflow:auto;scrollbar-width:thin;scrollbar-color:#2e5459 transparent}.controls{border-right:1px solid var(--line);padding:24px 21px 32px}.telemetry{border-left:1px solid var(--line);padding:25px 21px}
.panel-intro{padding:2px 0 25px}.micro{color:var(--mint);font-size:9px;font-weight:650}.micro span,.with-number span{float:right;color:#58868a}.panel-intro h1{font-size:28px;letter-spacing:-.042em;line-height:1.15;font-weight:650;margin:18px 0 12px}.panel-intro em{color:var(--mint);font-style:normal}.panel-intro p{color:#8ca6a7;font-size:12px;line-height:1.75;margin:0}
.pane-heading{border-top:1px solid var(--line);padding:19px 0 15px;color:#c5d6d1;font-size:10px;font-weight:bold}.pane-heading span{color:var(--mint);padding-right:8px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.mode{background:#10272f;border:1px solid #2b4950;color:#b2c6c3;text-align:left;padding:10px 9px;font-family:var(--mono);font-size:12px;font-weight:bold}.mode small{display:block;color:#688d91;font-weight:400;letter-spacing:0;margin-top:8px}.mode:hover{background:#183640}.mode.active{background:#133b3d;border-color:#6bd6c0;color:#95f2dd}.mode.active small{color:#84b3aa}
.control-group{padding:14px 0 16px}.control-group.compact{padding:0 0 11px}.control-block{margin:0 0 20px}.control-block:last-child{margin-bottom:9px}.control-block.is-hidden{display:none}.setting{display:flex;justify-content:space-between;align-items:baseline;font-size:12px;color:#b7cbc6;margin-bottom:12px}.setting output{font-family:var(--mono);font-size:12px;color:var(--mint);font-weight:700;white-space:nowrap}
input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#5cccb5 0 var(--progress,50%),#29464c var(--progress,50%) 100%);outline:none;border-radius:10px;cursor:pointer;display:block;margin:0}input[type=range]::-webkit-slider-thumb{appearance:none;height:12px;width:12px;background:#c5fff0;border:2px solid #092a2e;border-radius:50%;box-shadow:0 0 0 1px #59c4b2}input[type=range]::-moz-range-thumb{height:10px;width:10px;background:#c5fff0;border:2px solid #092a2e;border-radius:50%}
.action-row{display:flex;gap:8px;margin:21px 0 3px}.primary{background:var(--mint);border:1px solid var(--mint);color:#0a2a2b;font-size:11px;font-weight:800;letter-spacing:.07em;padding:14px 8px;flex:1}.primary:hover{background:#b1ffeb}.play-icon{font-size:17px;margin-right:7px;vertical-align:-1px}.secondary{padding:0 17px;background:#10252c;color:#a5d9ce;border:1px solid #345159;font-size:22px}.secondary:hover{background:#1d3f48}.primary:disabled{opacity:.4;cursor:not-allowed}
.presets{display:grid;gap:7px}.presets button{border:1px solid #28464d;background:#0d232a;padding:12px 10px;display:flex;justify-content:space-between;color:#9ebbb9;text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:.035em}.presets button span{color:var(--mint)}.presets button:hover{border-color:var(--mint);background:#183339}
.mainstage{display:flex;flex-direction:column;min-width:0;min-height:0;background:#091920}
.viewport{flex:1;min-height:380px;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,#183b45,#071920)}.viewport canvas{width:100%;height:100%;display:block;touch-action:none}.viewport-grain{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,transparent 82%,#07151bdd),linear-gradient(90deg,#08151b62,transparent 25%,transparent 75%,#08151b40)}
.scene-title{position:absolute;top:24px;left:28px;display:flex;align-items:center;gap:9px;color:#a5bebd;font-size:10px}.scene-title b{color:#dbece8;font-weight:600}.viewport-technical{position:absolute;right:25px;top:24px;color:#8babaa;font-size:9px}.viewport-technical span{color:var(--mint)}
.axis-info{position:absolute;bottom:24px;left:28px;color:#cedfda;display:flex;flex-direction:column;gap:9px}.axis-info b{font-size:10px;font-weight:650}.axis-info small{font-size:9px;color:#7d9c9b}.axis-info .pulse{margin-bottom:3px}
.overlay-controls{display:flex;position:absolute;bottom:24px;right:25px;gap:5px}.overlay-controls button{font-family:var(--mono);font-size:10px;color:#d6e4df;padding:9px 11px;border:1px solid #64828799;background:#10252baf;backdrop-filter:blur(10px)}.overlay-controls button:hover,.overlay-controls button.active{color:var(--mint);border-color:#80c6bb}
.crosshair{pointer-events:none;position:absolute;left:50%;top:50%;opacity:.23}.crosshair i:first-child{position:absolute;width:15px;height:1px;background:#b1dcd1;left:-7px;top:0}.crosshair i:last-child{position:absolute;height:15px;width:1px;background:#b1dcd1;left:0;top:-7px}
.render-error{background:#291917ee;border:1px solid #af6b61;color:#ffd9ca;position:absolute;left:20%;right:20%;top:40%;text-align:center;padding:22px;line-height:1.6}
.toolbar{min-height:54px;flex:none;border-top:1px solid #2b4e52;border-bottom:1px solid #28464a;display:flex;align-items:center;gap:14px;padding:0 22px;flex-wrap:wrap;color:#86a4a4;letter-spacing:.035em}.toolbar-label{font-size:9px;color:#819f9f;margin-right:8px}.toggle{display:flex;align-items:center;gap:5px;white-space:nowrap;font-size:9px;cursor:pointer;color:#b4cbc5}.toggle input{accent-color:#82dbc5;cursor:pointer;width:13px;height:13px}.toolbar-spacer{flex:1}.toolbar select,.pause-btn{background:#102932;border:1px solid #2f5357;color:#c8e6df;font-family:var(--mono);font-size:10px;padding:8px 7px;max-width:130px}.pause-btn{min-width:84px}.pause-btn:hover{border-color:var(--mint)}
.timeseries{height:222px;flex:none;background:linear-gradient(180deg,#0b222a,#091a21);padding:20px 27px 7px;display:flex;flex-direction:column}.plot-header{display:flex;align-items:end;justify-content:space-between}.plot-header h2{font-weight:500;font-size:17px;margin:5px 0 0}.plot-header .unit{font-size:11px;color:#729da0;font-family:var(--mono)}.plot-legend{display:flex;gap:17px;font-family:var(--mono);font-size:9px;color:#a5bcba;white-space:nowrap}.plot-legend i{display:inline-block;width:13px;height:2px;vertical-align:4px;margin-right:6px}.legend-teal{background:var(--mint)}.legend-coral{background:var(--coral)}.timeseries canvas{width:100%;height:100px;flex:1;min-height:0;display:block;margin-top:10px}.plot-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;font-family:var(--mono);color:#718e92;letter-spacing:.035em;margin-top:5px}.plot-bottom button{background:transparent;color:var(--mint);border:none;font-size:10px;letter-spacing:.05em;padding:5px}.plot-bottom button:hover{text-decoration:underline}
.readout{padding:20px 0 17px;border-bottom:1px solid var(--line)}.primary-reading{margin-top:17px}.readout-label{color:#91aeb0;font-size:10px}.readout-number{display:flex;align-items:baseline;margin-top:13px;gap:6px;white-space:nowrap}.readout-number strong{font-family:var(--mono);font-weight:450;font-size:40px;letter-spacing:-.095em;color:#d0fff0;font-variant-numeric:tabular-nums}.readout-number em{font-family:var(--mono);font-size:17px;font-style:normal;color:#68cbb8}.readout-number.small{margin-top:9px}.readout-number.small strong{font-size:25px;color:#dce9e5;letter-spacing:-.07em}.readout-number.small em{font-size:12px}
.scale-marks{display:flex;align-items:center;gap:8px;font-family:var(--mono);color:#7b9ca0;font-size:9px;margin-top:17px}.meter{height:5px;background:linear-gradient(90deg,#ad6e5e,#334749 50%,#5ac4b4);flex:1;position:relative;border-radius:8px}.meter:after{content:'';height:14px;width:1px;background:#ccd8ca;position:absolute;left:50%;top:-4px;opacity:.45}.meter #meter-marker{position:absolute;left:50%;top:-3px;width:4px;height:11px;background:#d4fff2;box-shadow:0 0 8px #66e7ce;transform:translateX(-50%);transition:left .06s}
.telemetry .pane-heading{padding-top:22px}.derived{margin:0}.derived div{display:flex;justify-content:space-between;gap:8px;border-bottom:1px solid #20383d;padding:13px 0;font-size:11px}.derived dt{color:#94aeb0}.derived dt small{font-family:var(--mono);color:#598b91;font-size:10px;padding-left:4px}.derived dd{margin:0;color:#d3e5e1;font-family:var(--mono);white-space:nowrap}
.theory-card{margin:27px -2px 21px;border:1px solid #315357;background:linear-gradient(145deg,#122e33,#0b2129);padding:16px}.theory-card .formula{font-family:Georgia,'Cambria Math',serif;font-size:19px;color:#d3f8e8;margin:21px 0 15px;white-space:nowrap}.theory-card p{font-size:11px;color:#a2b8b5;line-height:1.75;margin:0}.formula-secondary{font-family:Georgia,serif;color:var(--coral);font-size:17px;margin-top:15px}.bottom-note{display:flex;gap:10px;align-items:start}.safety-dot{background:var(--coral);box-shadow:none;margin-top:5px;flex-shrink:0}.bottom-note p{margin:0;font-size:10px;line-height:1.7;color:#7f9998}.bottom-note b{color:#d6c2aa;letter-spacing:.1em;font-size:9px}
.footer{min-height:32px;flex:none;background:#061219;border-top:1px solid #1d373e;padding:0 20px;display:flex;align-items:center;justify-content:space-between;color:#688a8e;gap:12px;font-size:9px;letter-spacing:.06em}
@media(min-width:1600px){.workspace{grid-template-columns:330px minmax(560px,1fr) 315px}.sidebar.controls{padding-left:29px;padding-right:29px}.sidebar.telemetry{padding-left:28px;padding-right:28px}}
@media(max-width:1170px){.workspace{grid-template-columns:250px minmax(360px,1fr)}.telemetry{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 22px}.telemetry>.with-number,.telemetry>.pane-heading,.telemetry>.derived,.telemetry>.theory-card,.telemetry>.bottom-note{grid-column:1/-1}.telemetry .readout{margin:0}.readout-number strong{font-size:31px}.readout-number.small strong{font-size:24px}.derived{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.derived div{display:block}.derived dd{margin-top:6px}.theory-card{margin:12px 0}.sidebar.controls{max-height:calc(100vh - 108px)}.footer span:nth-child(2){display:none}}
@media(max-width:730px){.app{height:auto;min-height:100vh}.workspace{overflow:visible}.topbar{height:66px;padding:0 16px}.brand-title{font-size:19px}.eyebrow{font-size:8px}.top-right .subtle,.top-divider{display:none}.top-right{font-size:9px}.workspace{display:flex;flex-direction:column}.mainstage{order:1}.viewport{min-height:350px;height:51vh;flex:none}.controls{order:2;max-height:none!important;border-right:0;border-top:1px solid var(--line);padding:20px}.telemetry{order:3;grid-template-columns:repeat(2,minmax(0,1fr));padding:20px}.toolbar{padding:10px 13px;gap:11px}.toolbar-label{width:100%}.timeseries{height:215px;padding:15px}.scene-title{left:15px;top:15px;max-width:75%;line-height:1.7}.viewport-technical{display:none}.axis-info{left:15px;bottom:16px}.overlay-controls{right:10px;bottom:13px}.overlay-controls button{padding:7px;font-size:9px}.footer{flex-wrap:wrap;padding:10px 14px;gap:7px}.plot-legend{font-size:8px;gap:8px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}