:root{--bg:#07111a;--panel:#0c1b26;--panel2:#0e202d;--line:#203747;--text:#e7f0f5;--muted:#7b98a9;--amber:#e8a35d;--cyan:#6dbaca;--dark:#06131d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:radial-gradient(ellipse at 42% -30%,#163041 0%,#07111a 60%);color:var(--text);margin:0;font-family:Inter,"Segoe UI",Arial,sans-serif;font-size:13px}.shell{max-width:1670px;padding:0 35px;margin:auto}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}.topbar{height:76px;border-bottom:1px solid #24404a;display:flex;align-items:center;gap:28px}.brand{display:flex;gap:12px;align-items:center}.brand>span:last-child{display:flex;flex-direction:column;gap:2px}.brand strong{font-size:18px;letter-spacing:3px;font-weight:800}.brand small{font-size:8px;letter-spacing:2.1px;color:var(--muted)}.monogram{height:42px;width:43px;display:flex;align-items:center;justify-content:center;border:1px solid #486276;font-weight:800;font-size:24px;letter-spacing:-4px;color:#f3eee7}.monogram span{color:var(--amber)}.toplinks{margin-left:auto;display:flex;gap:18px;align-items:center;color:#7898a7;font:10px monospace;letter-spacing:1.3px}.sep{width:1px;height:17px;background:#344857}.statusdot,.livepulse{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6ed2aa;box-shadow:0 0 11px #6ed2aa}.version{color:#648093;font-size:10px;border:1px solid #264050;padding:9px 11px;letter-spacing:1.3px}.intro{display:flex;align-items:end;justify-content:space-between;gap:24px;padding:34px 0 36px}.eyebrow,.panel-kicker{font-family:monospace;font-size:10px;letter-spacing:2.2px;color:var(--amber);margin:0 0 13px}.serial{color:#5b7d90;margin-left:13px}h1{font-weight:650;font-size:clamp(36px,3.8vw,63px);line-height:1.05;letter-spacing:-2.7px;margin:0 0 13px}h1 em{font-style:normal;color:var(--amber)}.lead{font-size:14px;line-height:1.55;color:#9eb5c1;margin:0;max-width:700px}.concept{min-width:250px;margin-bottom:5px;padding-left:23px;border-left:2px solid #ae794e;display:flex;gap:7px;flex-direction:column}.concept .tiny{font:10px monospace;letter-spacing:1.6px;color:#b38d72}.concept strong{font-size:20px;font-weight:600}.concept>span{font:9px monospace;letter-spacing:1px;color:#7192a5}.workspace{display:grid;grid-template-columns:minmax(0,1.66fr) minmax(350px,.80fr);gap:17px;align-items:start}.left-panel,.right-panel{min-width:0}.viewport-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:#10212c;border:1px solid var(--line);border-bottom:0}.viewport-title{font-size:10px;letter-spacing:1.5px;font-weight:700;color:#c6d6df}.livepulse{width:6px;height:6px;margin-right:10px}.smallid{font-family:monospace;font-size:9px;color:#5e8092;margin-left:14px}.state{font:9px monospace;letter-spacing:1px;color:#72cbbb;border:1px solid #2f6a67;padding:6px 9px}.viewport{position:relative;min-height:405px;height:clamp(410px,38vw,610px);background:radial-gradient(ellipse at center,#173344 0%,#071723 77%);overflow:hidden;border:1px solid var(--line);border-top:0}.viewport canvas{display:block;width:100%;height:100%;touch-action:none}.viewport-vignette{position:absolute;inset:0;box-shadow:inset 0 0 85px 10px #07172270;pointer-events:none}.view-hint{position:absolute;left:20px;bottom:18px;font:10px monospace;letter-spacing:1.1px;color:#7291a1}.mouseicon{border:1px solid #54717d;padding:3px 6px;border-radius:4px;margin-right:7px}.hintsep{margin:0 7px;color:#46606c}.view-controls{position:absolute;right:16px;bottom:16px;display:flex;gap:6px}.view-controls button{background:#102735e8;border:1px solid #385264;color:#cedce3;padding:10px 11px;font:10px monospace;letter-spacing:1px}.view-controls button:hover,.view-controls button[aria-pressed=true]{border-color:#d6a063;color:#ffd1a0}.view-controls button:first-child{font-size:20px;line-height:10px}.axis-marker{position:absolute;left:25px;top:25px;color:var(--amber);display:flex;gap:10px;font:11px monospace;align-items:center}.axis-marker i{width:42px;height:1px;background:linear-gradient(90deg,var(--amber),#285766);transform:rotate(-20deg)}.canvas-tag{position:absolute;font:10px monospace;letter-spacing:1.7px;color:#a2c0ce;border:1px solid #35546988;padding:7px 9px;background:#081a2599;pointer-events:none}.canvas-tag b{color:var(--amber);font-weight:400;margin-left:6px}.tag-in{left:11%;top:32%}.tag-out{right:10%;top:28%}.gl-error{position:absolute;inset:30%;background:#12202ae9;padding:25px;border:1px solid #cd7754;color:#ffd4bc}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:14px;border:1px solid var(--line)}.metric{padding:17px 16px;background:#10222e;min-width:0}.metric-label{font-size:10px;letter-spacing:1.05px;color:#bacbd4;font-weight:700;white-space:nowrap}.metric-label span{display:block;color:#577a8c;margin-top:8px;font:9px monospace}.metric-value{font-size:29px;font-weight:550;letter-spacing:-1px;margin-top:17px;font-variant-numeric:tabular-nums}.metric-value small{font:10px monospace;color:#8babbb;margin-left:2px;letter-spacing:0}.metric-mini{font:9px monospace;color:#577b8d;margin-top:7px}.progress{height:3px;background:#284353;margin-top:12px}.progress span{display:block;height:100%;width:0;background:var(--amber)}.progress.torque span{background:var(--cyan)}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.chart-panel{border:1px solid var(--line);background:#0d1d29;padding:15px 16px 12px;min-width:0}.panel-heading{font-size:10px;letter-spacing:1.3px;font-weight:700;color:#cfdee6;display:flex;align-items:center;gap:9px}.panel-heading>span{color:var(--amber);font-family:monospace}.panel-heading small{font:9px monospace;color:#567588;margin-left:auto;white-space:nowrap}.chart{width:100%;height:122px;display:block;margin-top:18px}.chart-footer{display:flex;justify-content:space-between;font:9px monospace;color:#688a99;letter-spacing:1px}.key{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px}.key.amber{background:#e9a45a}.key.blue{background:#71bace}.right-panel{border:1px solid var(--line);background:#0d1d28;padding:20px 22px 17px}.control-title{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}.control-title h2{margin:5px 0 0;font-size:25px;letter-spacing:-.7px;font-weight:600}.panel-kicker{font-size:9px;margin:0}.designmark{font:10px monospace;color:#53778c;letter-spacing:1px}.presets{display:flex;flex-direction:column;gap:9px;padding:21px 0}.presets label{font:10px monospace;letter-spacing:1.4px;color:#a2becb}.presets select{background:#132b39;border:1px solid #335160;border-radius:0;padding:13px;color:#e5edf2;width:100%;cursor:pointer;font:12px monospace;outline:0}.panel-section{border-top:1px solid var(--line);padding:18px 0 15px}.section-head{display:flex;align-items:center;gap:10px;letter-spacing:1.1px;font-size:10px;font-weight:750;color:#c7d9e2;margin-bottom:22px}.section-head>span{color:var(--amber);font-family:monospace}.section-head small{color:#58788a;font:9px monospace;margin-left:auto;letter-spacing:.3px}.control{margin:0 0 21px}.control>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.control label{color:#a8bfcb;font-size:12px}.control output{color:#f0c08f;font:12px monospace;font-variant-numeric:tabular-nums}.control input[type=range]{appearance:none;width:100%;height:3px;background:linear-gradient(90deg,#e8a35d var(--pct,50%),#2b4755 var(--pct,50%));outline:none;cursor:pointer}.control input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:3px solid var(--amber);background:#102c3b;border-radius:50%;box-shadow:0 0 0 3px #e8a35d18}.control input[type=range]::-moz-range-thumb{width:8px;height:8px;border:3px solid var(--amber);background:#102c3b;border-radius:50%}.pitch-legend{display:flex;justify-content:space-between;background:#142a37;padding:9px 11px;color:#7897a9;font:10px monospace}.pitch-legend span:last-child{color:#e8a35d}.operations{border-top:1px solid var(--line);padding:20px 0}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.button-grid button{background:#162b39;border:1px solid #365468;color:#d2e1e8;padding:13px 9px;letter-spacing:.8px;font-size:10px;font-weight:700}.button-grid button:hover{filter:brightness(1.3)}.button-grid .primary{background:var(--amber);border-color:var(--amber);color:#171e20}.button-grid .stop{border-color:#754b4b;color:#e99d91}.button-grid .stop.active{background:#a64d43;color:white}.console-foot{border-top:1px solid var(--line);padding-top:14px}.console-foot>div{display:flex;align-items:center;justify-content:space-between;margin:0 0 11px}.console-foot span{color:#718f9e;font:10px monospace;letter-spacing:.4px}.console-foot strong{color:#c9dfe7;font:11px monospace;font-variant-numeric:tabular-nums}.console-foot button{width:100%;margin-top:8px;padding:13px;background:transparent;color:#c4d8e2;border:1px solid #496578;text-align:left;letter-spacing:1.1px;font:10px monospace}.console-foot button span{float:right;font-size:15px;color:var(--amber)}.footer{display:flex;gap:18px;justify-content:space-between;padding:23px 0 35px;font:9px monospace;letter-spacing:1px;color:#5f7f91}.footer b{color:#b5a18c;font-weight:400}.footer>span:nth-child(2){text-align:center}@media(max-width:1140px){.shell{padding:0 22px}.workspace{grid-template-columns:minmax(0,1fr)}.right-panel{display:block}.intro{padding:23px 0}.viewport{height:530px}.right-panel{padding:20px 24px}.right-panel .panel-section{padding-bottom:4px}}@media(max-width:640px){.shell{padding:0 12px}.topbar{height:65px}.toplinks,.version,.serial,.concept,.smallid{display:none}.intro{padding:22px 2px}.eyebrow{font-size:9px}h1{font-size:41px;letter-spacing:-1.7px}.lead{font-size:12px}.viewport{height:360px;min-height:350px}.tag-out,.tag-in{font-size:8px}.tag-in{left:5%;top:24%}.tag-out{right:6%;top:21%}.view-hint{display:none}.view-controls{right:8px;bottom:10px}.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-grid{grid-template-columns:1fr}.metric{padding:14px}.right-panel{padding:17px}.footer{flex-direction:column;gap:8px}}
