:root{color-scheme:dark;--bg:#06121f;--nav:#071725;--line:#1a3247;--cyan:#76e4e3;--text:#ebf5fb;--secondary:#8eabb9;--muted:#527387;--amber:#ffc282;--coral:#ff8e72;font-family:Inter,'Segoe UI',Arial,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}body{font-size:13px;overflow-x:hidden}.app-shell{min-height:100vh;display:grid;grid-template-columns:310px minmax(500px,1fr) 340px}.rail{background:#071826;border-right:1px solid #173449;display:flex;flex-direction:column;padding:23px 22px 20px;min-width:0}.brand{display:flex;align-items:center;gap:11px}.brand-mark{width:42px;height:42px;display:grid;place-items:center;border:1px solid #236378;background:linear-gradient(130deg,#154052,#0b2437);border-radius:11px}.brand-title{font-size:13px;font-weight:900;letter-spacing:1.7px;white-space:nowrap}.brand-title span{color:#76d9d6}.brand-sub{font-size:9px;letter-spacing:1.8px;color:#7394a7;margin-top:4px}.rail-title{margin-top:46px}.eyebrow{font-size:10px;letter-spacing:1.85px;color:#6edbcd;font-weight:800}.rail-title h1{margin:8px 0 4px;font-size:40px;letter-spacing:-1.5px;font-weight:820;line-height:1.06}.slash{font-weight:350;color:#3d6f80}.rail-title p{font-size:15px;line-height:1.44;color:#a3bccb;margin:10px 0 0}.separator{height:1px;background:#1e3547;margin:23px 0}.panel-heading{font-size:10px;letter-spacing:1.25px;font-weight:750;color:#dbe9f2;display:flex;align-items:center;gap:9px;white-space:nowrap}.panel-heading>span:first-child{color:#76e4e3;border:1px solid #245d69;padding:4px 5px;border-radius:4px}.muted-dot{font-size:8px!important;color:#66a791;font-weight:700;letter-spacing:.35px;margin-left:auto}.param-list{padding-top:7px}.param{margin-top:16px}.param-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}.param-head label{font-size:12px;font-weight:560;color:#b9d0dc}.param-head output{font-family:Consolas,'Courier New',monospace;font-size:13px;color:#a6f3e6;font-weight:750;white-space:nowrap}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;background:linear-gradient(to right,#54d6c9 0%,#54d6c9 var(--pct,30%),#2a485c var(--pct,30%),#2a485c 100%);border-radius:9px;outline:0;cursor:pointer;margin:12px 0 5px}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:2px solid #0c2b38;border-radius:50%;background:#87f4e0;box-shadow:0 0 0 1px #65c9bf}input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#87f4e0;border:2px solid #0c2b38;border-radius:50%}.scale{display:flex;justify-content:space-between;font-family:Consolas,monospace;font-size:9px;color:#50748a}.small-label{display:block;font-size:10px;color:#84a0b1;font-weight:750;letter-spacing:1.2px;margin-bottom:9px}select{width:100%;border:1px solid #27465b;background:#0c2436;color:#d7ecf2;border-radius:7px;padding:10px 12px;font-size:12px;outline:0;cursor:pointer}.rail-footer{margin-top:auto;padding-top:24px;color:#6e8b9d;font-size:9px;letter-spacing:1px;display:flex;align-items:center;gap:6px;white-space:nowrap}.green-circle{height:7px;width:7px;border-radius:50%;background:#5dd8af;box-shadow:0 0 10px #5dd8af}.workspace{display:flex;min-width:0;flex-direction:column;background:#081725}.topbar{height:70px;border-bottom:1px solid #1a3447;display:flex;align-items:center;justify-content:space-between;padding:0 32px}.breadcrumb{font-size:10px;font-weight:650;letter-spacing:1.3px;color:#9ab3c2}.breadcrumb span{color:#2f6476;padding:0 10px}.top-right{display:flex;align-items:center;gap:18px;font-size:10px;letter-spacing:1.1px}.system-status{color:#7ce2b4}.build-no{color:#7295aa;border-left:1px solid #254357;padding-left:16px}.viewport-section{padding:30px 31px 0;flex:1;min-height:0}.viewport-header{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:23px}.viewport-header h2{font-size:25px;letter-spacing:-.7px;font-weight:700;margin:9px 0 0}.view-tools{display:flex;gap:7px}.ghost-btn{border:1px solid #294659;border-radius:6px;background:#10273a;color:#9fc4d0;padding:10px 12px;font-size:10px;font-weight:750;letter-spacing:.7px;cursor:pointer}.ghost-btn:hover,.outline-btn:hover{border-color:#76d5d8;color:white}.viewport-wrap{height:clamp(360px,57vh,650px);position:relative;border:1px solid #1f485b;overflow:hidden;background:radial-gradient(ellipse at 58% 40%,#173653,#071725 78%);border-radius:9px}.viewport-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 85px #020e1ca6}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.canvas-tag{position:absolute;top:21px;z-index:1;color:#9bc6d2;font-size:10px;letter-spacing:1.3px;font-weight:850;pointer-events:none;display:flex;align-items:center;gap:7px}.canvas-tag small{display:block;font-size:9px;font-weight:550;color:#60879c;letter-spacing:.6px}.canvas-tag.left{left:22px}.canvas-tag.right{right:22px;text-align:right;display:block}.canvas-tag.right small{margin-top:7px}.pulse{width:7px;height:7px;display:inline-block;border-radius:50%;background:#6af2db;box-shadow:0 0 12px #70ead0}.scene-bottom{position:absolute;bottom:18px;left:22px;right:22px;display:flex;gap:10px;align-items:center;justify-content:space-between;font-size:9px;color:#94b8c8;font-weight:750;letter-spacing:.8px;pointer-events:none}.color-legend{display:flex;gap:9px;align-items:center}.color-legend i{height:7px;width:7px;background:#4ab0d4;border-radius:50%}.gradient{display:inline-block;width:105px;height:7px;border-radius:10px;background:linear-gradient(90deg,#11508f,#20a9d3,#68e3dd,#f7b852,#f95a54)}.transport{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:13px}.transport-left{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.primary-btn{border:1px solid #87e4d8;border-radius:6px;background:#79e6d4;color:#092332;font-weight:900;font-size:11px;letter-spacing:.35px;padding:14px 19px;cursor:pointer;box-shadow:0 5px 25px #55dac21d}.primary-btn:hover:not(:disabled){background:#b0fff0}.primary-btn:disabled{opacity:.55;cursor:not-allowed}.btn-symbol{font-size:17px;vertical-align:-2px;margin-right:6px}.outline-btn{border:1px solid #2a4d61;border-radius:6px;background:#102b3e;color:#aac9d5;font-weight:800;font-size:10px;padding:14px 15px;cursor:pointer}.speed-control{display:flex;gap:7px;align-items:center;margin-left:7px;font-size:9px;letter-spacing:1px;color:#8cadbf}.speed-control select{width:75px;font-family:monospace;font-size:12px;padding:9px}.timebox{text-align:right;min-width:100px}.timebox span{display:block;color:#7193a9;font-size:9px;letter-spacing:1px;margin-bottom:5px}.timebox strong{font-size:20px;letter-spacing:1px;font-family:Consolas,monospace;font-variant-numeric:tabular-nums}.bottom-strip{border-top:1px solid #1c3446;padding:26px 31px 29px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px}.strip-card{border-right:1px solid #20384b;padding-right:10px;min-width:0}.strip-card:last-child{border:0}.strip-card span{display:block;color:#7799ad;font-size:9px;font-weight:800;letter-spacing:.8px;line-height:1.5}.strip-card strong{display:block;margin:10px 0 5px;font-family:Consolas,monospace;font-size:21px;color:#e8f7ff;letter-spacing:-.8px;white-space:nowrap}.strip-card strong.limitation{font-size:14px;letter-spacing:.2px;color:#ffb888}.strip-card small{font-size:10px;color:#6e90a2}.telemetry{background:#091a2a;border-left:1px solid #1e3a50;padding:33px 21px 22px;min-width:0;display:flex;flex-direction:column}.right-heading h3,.chart-head h3{margin:10px 0 7px;font-size:23px;letter-spacing:-.5px}.right-sub{font-size:11px;color:#7e9fb1}.data-card{border:1px solid #28465a;border-radius:7px;background:linear-gradient(145deg,#122c40,#0b2234);padding:15px}.hero-data{margin-top:26px;padding:20px 18px}.data-card span{font-size:10px;letter-spacing:1px;font-weight:800;color:#92b7c8}.measurement{display:flex;align-items:baseline;gap:9px;margin:10px 0 6px}.measurement strong{font-family:Consolas,monospace;font-size:48px;font-weight:750;letter-spacing:-2.5px;color:#80f2e6}.measurement small{font-size:15px;color:#85b5c6}.tiny-note{font-size:10px;color:#7896a9;margin-top:14px}.tiny-led{height:6px;width:6px;border-radius:50%;background:#78ecdb;display:inline-block;margin-right:6px}.data-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.data-grid .data-card{min-height:104px;padding:13px 12px}.data-grid .data-card span{font-size:9px;letter-spacing:.7px}.data-grid .data-card strong{font-family:Consolas,monospace;display:block;font-size:23px;letter-spacing:-1px;margin-top:11px}.data-grid .data-card small{color:#6f92a5;font-size:10px}.chart-head{display:flex;justify-content:space-between;align-items:end;margin-top:32px}.chart-head h3{font-size:18px;margin-top:8px}.chart-range{font-family:Consolas,monospace;font-size:10px;color:#7595a9}.chart-legend{display:flex;gap:15px;margin:13px 0 8px;font-size:10px;color:#9cb8c9}.chart-legend span{display:flex;align-items:center;gap:5px}.chart-legend i{width:7px;height:7px;border-radius:50%;display:inline-block}.legend-cyan{background:#6fe3e0}.legend-gold{background:#edc17d}.legend-coral{background:#fa826f}.chart-container{height:195px;min-height:160px;border:1px solid #213b4c;background:#081726;border-radius:6px}#trace{width:100%;height:100%;display:block}.meter-wrap{margin:24px 0 16px}.meter-line{display:flex;justify-content:space-between;color:#9ebcca;font-size:10px;font-weight:750;letter-spacing:.8px}.meter-track{height:7px;background:#234458;border-radius:10px;overflow:hidden;margin-top:11px}.meter-bar{height:100%;width:100%;background:linear-gradient(90deg,#23989e,#72e2d4);border-radius:10px;transition:width .08s linear}.warning{font-size:10px;line-height:1.5;color:#98a8b3;border:1px solid #4b483d;background:#2a2a2738;border-radius:5px;padding:10px}.warning.active{border-color:#d18a51;color:#ffcca1;background:#49302169}.right-footer{margin-top:auto;padding-top:17px}.export-btn{width:100%;border:1px solid #337b82;background:#0e333e;color:#8cf2df;border-radius:6px;min-height:41px;cursor:pointer;font-size:10px;font-weight:850;letter-spacing:.85px}.export-btn small{color:#7da5b2;margin-left:5px}.export-btn.secondary{margin-top:7px;border-color:#355369;background:#0e2436;color:#aec9d6}.export-btn:hover{background:#1d4953}.keyboard-help{font-size:9px;color:#628298;line-height:2.6;margin-top:9px}.keyboard-help span{margin-left:7px;margin-right:3px;color:#9cb2c4;border:1px solid #335066;border-radius:3px;padding:2px 4px}.toast{position:fixed;bottom:18px;left:50%;transform:translate(-50%,20px);background:#173a4b;color:#c5fff0;border:1px solid #3b8191;padding:11px 15px;border-radius:7px;opacity:0;transition:transform .25s,opacity .25s;z-index:20;pointer-events:none}.toast.visible{opacity:1;transform:translate(-50%,0)}
@media(max-width:1320px){.app-shell{grid-template-columns:265px minmax(390px,1fr) 300px}.rail{padding:20px 16px}.topbar{padding:0 20px}.viewport-section{padding:22px 20px 0}.bottom-strip{padding:20px}.telemetry{padding:25px 15px}.viewport-wrap{height:clamp(350px,51vh,550px)}.transport-left{gap:6px}.outline-btn{padding:12px}.primary-btn{padding:12px}.build-no{display:none}}
@media(max-width:1030px){.app-shell{grid-template-columns:260px minmax(430px,1fr);grid-template-areas:'rail main' 'rail tele'}.rail{grid-area:rail}.workspace{grid-area:main}.telemetry{grid-area:tele;border-top:1px solid #254156;border-left:0;display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.right-heading,.hero-data,.chart-head,.chart-legend,.chart-container,.meter-wrap,.warning,.right-footer{grid-column:span 2}.data-grid{grid-column:span 2}.right-footer{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:start}.export-btn.secondary{margin:0}.keyboard-help{grid-column:span 2}.viewport-wrap{height:450px}}
@media(max-width:710px){.app-shell{display:block}.rail{padding:18px 16px}.rail-title{margin-top:20px}.rail-title h1{font-size:32px}.rail-title p br{display:none}.param-list{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}.separator{margin:18px 0}.rail-footer{padding-top:12px}.topbar{height:54px}.breadcrumb{font-size:8px}.top-right{font-size:8px}.viewport-section{padding:21px 12px 0}.viewport-header h2{font-size:20px}.viewport-header{display:block}.view-tools{margin-top:12px}.viewport-wrap{height:400px}.canvas-tag.right,.scene-bottom #sceneHint{display:none}.transport{align-items:stretch;flex-direction:column;padding:14px 0}.timebox{text-align:left}.bottom-strip{grid-template-columns:1fr 1fr;gap:20px;padding:18px 12px}.strip-card strong{font-size:19px}.telemetry{padding:20px 12px;display:block}.hero-data{margin-top:14px}.chart-container{height:220px}.right-footer{display:block}.export-btn.secondary{margin-top:8px}}
@media(prefers-reduced-motion:reduce){.toast,.meter-bar{transition:none}}