:root{--bg:#07111e;--panel:#0a1828;--line:#213247;--line2:#17293b;--text:#e1eef7;--muted:#70899e;--cyan:#48dae8;--orange:#f0ac61;--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--text);font:13px var(--font)}body{min-height:100vh;background-image:radial-gradient(ellipse at 43% -32%,#142c43 0%,transparent 60%)}.shell{max-width:1560px;margin:auto;padding:19px 23px 12px}.header{display:flex;justify-content:space-between;align-items:center;padding:0 2px 22px;border-bottom:1px solid #2c3f52;margin-bottom:17px}.brand{display:flex;gap:14px;align-items:center}.mark{width:54px;height:54px;border:1px solid #4ed3e2;color:#9beaf0;display:flex;justify-content:center;align-items:center;font-size:20px;font-weight:800;letter-spacing:-4px;box-shadow:inset 0 0 18px #39b5c824}.mark span{font-size:13px;transform:translateY(8px);color:#e2b47b}.brandline{font-size:9px;letter-spacing:2.25px;color:var(--muted);font-weight:800;margin-bottom:5px}h1{margin:0;font-size:21px;font-weight:850;letter-spacing:2px}h1 span{font-weight:400;color:#8db6c8;font-size:16px}.sep{color:#496275;margin:0 6px}.header-right{display:flex;align-items:center;gap:10px;font-size:9px;font-weight:750;letter-spacing:1.45px;color:#9bb3c3}.dot,.pulse,.indicator{display:inline-block;border-radius:50%;width:6px;height:6px;background:#4adbcc;box-shadow:0 0 12px #42e8d9}.tiny-id{border-left:1px solid var(--line);padding-left:16px;margin-left:7px;color:#658398}.workspace{display:grid;grid-template-columns:minmax(0,1.72fr) minmax(300px,.72fr);gap:13px}.card{border:1px solid #233548;background:linear-gradient(138deg,#0c1b2d,#091626 65%);border-radius:6px;overflow:hidden;box-shadow:0 11px 36px #01091340}.section-top{height:71px;padding:17px 19px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line2)}.eyebrow{font-size:9px;font-weight:850;color:#628fa4;letter-spacing:1.8px;margin-bottom:6px}.section-top h2{font-weight:800;font-size:12px;letter-spacing:1.5px;margin:0;color:#d2e5f1}.stage-status,.data-label,.control-id{font-size:9px;letter-spacing:1.1px;color:#8ca9b8;font-weight:800}.stage-status{display:flex;align-items:center;gap:11px}.stage{grid-column:1;grid-row:1}.controls{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column}.viewport{height:435px;position:relative;background:radial-gradient(ellipse at 45% 26%,#17304b,#091624 74%)}canvas#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas#scene:active{cursor:grabbing}.overlay{position:absolute;pointer-events:none;color:#849caf;font-size:9px;letter-spacing:1px;font-weight:650}.top-left{top:19px;left:19px;display:flex;flex-direction:column;gap:9px}.label{padding:7px 10px;background:#0b1b2bc4;border-left:2px solid #4c6e87;display:flex;flex-direction:column;gap:4px}.label strong{font-size:9px;color:#c0d9e9;font-weight:700;letter-spacing:.7px}.top-right{top:24px;right:22px;display:flex;flex-direction:column;gap:7px;align-items:flex-end}.annotation{border:1px solid #25536a;color:#7fc9dd;background:#0a2233b0;padding:5px 8px;font-size:8px;letter-spacing:1.1px}.annotation.amber{border-color:#6d533b;color:#d9a36a}.bottom-left{bottom:16px;left:19px;color:#68899f}.orbit-symbol{font-size:19px;color:#58bfce;vertical-align:middle;margin-right:4px}.bottom-right{bottom:17px;right:22px;color:#bddae9}.line-glyph{display:inline-block;width:6px;height:6px;background:#4de0d3;margin-right:6px;border-radius:50%}.stage-footer{height:47px;border-top:1px solid var(--line2);display:flex;align-items:center;padding:0 18px;gap:23px;font-size:9px;letter-spacing:1.05px;color:#8ea9b9;font-weight:750}.indicator{width:7px;height:7px;box-shadow:none;margin-right:6px}.indicator.amber{background:var(--orange)}.spacer{flex:1}.toggle{cursor:pointer;white-space:nowrap}.toggle input{accent-color:var(--cyan);vertical-align:middle;margin-right:5px}.panel-content{padding:18px 20px 0;flex:1}.preset label{display:block;font-size:9px;letter-spacing:1.3px;color:#8daabc;font-weight:800;margin-bottom:10px}.preset select{appearance:none;background:#10263b;color:#c8e0ed;border:1px solid #2b4c64;outline:none;padding:12px 13px;width:100%;font-size:11px;font-weight:700;letter-spacing:.6px;border-radius:3px;cursor:pointer}.control-group{margin-top:23px}.control-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}.control-title label{font-size:10px;letter-spacing:1.1px;color:#a1becc;font-weight:800}.control-title output{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#74dce6;font-size:13px;white-space:nowrap;font-weight:700}.control-group input[type=range]{width:100%;height:3px;appearance:none;background:#264154;border-radius:10px;outline:none;cursor:pointer;accent-color:#49d8df;display:block;margin:15px 0 9px}.control-group input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#8ceaf1;box-shadow:0 0 0 4px #2c9cac31;border:1px solid #d4fdff}.control-group input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#8ceaf1;border:0}.minmax{display:flex;justify-content:space-between;color:#52748b;font-size:9px}.control-note{display:flex;gap:10px;border:1px solid #244156;background:#11283a7d;padding:12px;margin-top:22px}.control-note .note-icon{display:grid;place-items:center;flex:none;border:1px solid #5b8ca5;color:#75bfd2;width:19px;height:19px;border-radius:50%;font-weight:bold}.control-note strong{font-size:9px;color:#9bc0d1;letter-spacing:1px}.control-note p{margin:5px 0 0;color:#7599ab;font-size:10px;line-height:1.55}.control-buttons{padding:18px 20px 11px}.control-buttons button{cursor:pointer;background:#102439;color:#b5d6e5;border:1px solid #2e4961;border-radius:3px;font-weight:800;letter-spacing:.9px;font-size:10px;transition:.15s ease;min-height:40px}.control-buttons button:hover{border-color:#4fd0de;background:#14334a}.control-buttons button.primary{width:100%;background:#55cfdb;color:#051c2b;border-color:#55cfdb;font-size:12px}.control-buttons button.primary:hover{background:#83eaf1}.button-row{display:flex;gap:8px;margin-top:9px}.button-row button{flex:1}.control-buttons p{color:#62899e;font-size:9px;min-height:24px;margin:12px 0 0;line-height:1.45}.telemetry{grid-column:1;grid-row:2}.metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:18px 10px 21px}.metric{padding:0 13px;border-right:1px solid #253e53}.metric:last-child{border:0}.metric>span{display:block;font-size:9px;letter-spacing:1px;color:#7699ae;font-weight:800;white-space:nowrap}.metric strong{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;display:block;color:#d4eff5;font-size:27px;font-weight:750;letter-spacing:-1.7px;margin:12px 0 4px;white-space:nowrap}.metric strong span{font-size:11px;color:#80b3c6;letter-spacing:0;font-weight:500}.metric small{font-size:9px;color:#668ba3}.scope,.trend{min-width:0}.scope{grid-column:1}.trend{grid-column:2}.scope-legend{display:flex;gap:7px;align-items:center;color:#93adbe;font-size:10px}.scope-legend i{display:inline-block;width:10px;height:3px;background:var(--cyan);margin-left:7px}.scope-legend i.amber-bg{background:var(--orange)}.chart-wrap{height:205px;padding:14px 17px 5px}.chart-wrap canvas{width:100%;height:100%;display:block}.chart-meta{display:flex;justify-content:space-between;padding:0 20px 17px;color:#68899c;font-size:9px;font-weight:700;letter-spacing:.7px}footer{display:flex;align-items:center;margin-top:20px;padding:0 4px;color:#55758b;font-size:9px;letter-spacing:1.1px;font-weight:750;gap:2px;flex-wrap:wrap}
@media(max-width:1120px){.workspace{grid-template-columns:minmax(0,1fr) 320px}.metric strong{font-size:21px}.metric>span{font-size:8px}.viewport{height:390px}.stage-footer{gap:13px}}@media(max-width:890px){.workspace{grid-template-columns:1fr}.stage,.controls,.telemetry,.scope,.trend{grid-column:1;grid-row:auto}.controls{grid-row:auto}.panel-content{display:grid;grid-template-columns:1fr 1fr;column-gap:23px}.preset,.control-note{grid-column:1 / -1}.control-note{margin-bottom:12px}.controls .control-buttons{max-width:500px}.viewport{height:420px}.metrics{grid-template-columns:repeat(4,1fr)}.metric strong{font-size:25px}}@media(max-width:600px){.shell{padding:11px}.header{padding-bottom:14px}.header-right{display:none}.mark{width:42px;height:42px}.brandline{font-size:8px;letter-spacing:1px}h1{font-size:16px}h1 span{font-size:12px}.section-top{height:64px;padding:13px}.viewport{height:340px}.top-right{display:none}.top-left{top:10px;left:10px}.bottom-left{font-size:7px}.stage-footer{padding:0 9px;font-size:8px;gap:9px}.panel-content{display:block;padding:14px}.metrics{grid-template-columns:repeat(2,1fr);row-gap:22px}.metric:nth-child(2){border:0}.metric strong{font-size:25px}.metric small{font-size:8px}.chart-wrap{height:180px}footer{line-height:1.7}footer .spacer{display:none}}