:root{color-scheme:dark;--bg:#08111d;--panel:#0d1a2a;--line:#25364a;--muted:#8295a8;--text:#e5edf1;--mint:#58d3c4;--blue:#49aacc;--yellow:#efb65a}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,Arial,Helvetica,sans-serif;font-size:13px;letter-spacing:.01em}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
#app{display:flex;flex-direction:column;min-height:100vh;min-width:320px}.topbar{height:73px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:#0b1826;gap:18px;flex:none}.brandmark{display:flex;align-items:center;gap:15px;white-space:nowrap}.mark{display:grid;place-items:center;width:43px;height:43px;background:#173b42;border:1px solid #37726f;color:#b5faf1;font-size:25px;font-weight:900;transform:skew(-7deg)}.p-dot{font-size:12px;color:var(--yellow)}.brandmark strong{display:block;font-size:18px;letter-spacing:2.5px}.brand-sub{color:var(--mint)}.brandmark small{display:block;margin-top:4px;font-size:9px;font-weight:700;letter-spacing:1.5px;color:#7894a4}.centerbrand{color:#90b7c3;font-size:10px;letter-spacing:1.6px;font-weight:700;white-space:nowrap}.topbar-sep{color:#3b5569;margin:0 13px}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#4bd9b4;box-shadow:0 0 9px #4bd9b490;margin-right:8px}.top-actions{display:flex;align-items:center;gap:17px}.status{font-size:9px;font-weight:800;letter-spacing:1.1px;color:#7ed8ac;white-space:nowrap}.btn{border-radius:5px;padding:11px 13px;font-size:11px;font-weight:800;letter-spacing:.8px;transition:background .15s,border-color .15s}.ghost{background:#142638;border:1px solid #32485b;color:#c0d7df}.ghost:hover{background:#22394a}
.workspace{display:grid;grid-template-columns:290px minmax(370px,1fr) 300px;flex:1;min-height:655px}.controls,.telemetry{background:var(--panel);padding:27px 22px;min-width:0}.controls{border-right:1px solid var(--line)}.telemetry{border-left:1px solid var(--line)}.section-heading{font-size:11px;color:#d8e9ef;letter-spacing:1.7px;font-weight:900;display:flex;align-items:center;gap:10px;white-space:nowrap}.section-heading>span{color:var(--mint);font-size:11px}.panel-intro{color:var(--muted);font-size:11px;line-height:1.75;margin:15px 0 25px}.subsection{color:#6f9fad;font-size:10px;font-weight:900;letter-spacing:1.7px;border-bottom:1px solid #23384c;padding-bottom:12px;margin:26px 0 16px}.control{margin:0 0 20px}.control-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:12px;font-size:12px}.control-head label{color:#c4d5de}.control-head output{color:#a5f1e5;white-space:nowrap;font-size:11px;font-weight:700}input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:4px;border-radius:8px;background:linear-gradient(90deg,#4bbba9 35%,#2b4355 35%);outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#d4f9f0;border:3px solid #31a895;box-shadow:0 0 0 2px #0d1a2a}input[type=range]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#d4f9f0;border:2px solid #31a895}.scale{display:flex;justify-content:space-between;color:#587284;font-size:9px;letter-spacing:.8px;margin-top:8px}.row-buttons{display:flex;gap:9px}.row-buttons .btn{flex:1}.primary{border:1px solid #59cdbd;background:#4abfae;color:#082525}.primary:hover{background:#79ebd5}.outline{border:1px solid #41596b;background:transparent;color:#bed2dd}.outline:hover{background:#1e3748}.storm{margin-top:11px;width:100%;border:1px solid #8d6637;background:linear-gradient(120deg,#4a3524,#342b27);color:#f6cb8b;text-align:left}.storm>span{float:right;color:#bf9874;font-size:9px}.storm:hover{background:#6c492d}.disclaimer{border:1px solid #324653;background:#152737;padding:12px;margin-top:23px;font-size:10px;line-height:1.7;color:#869eac}.mini-icon{font-weight:900;color:#e6b76c;margin-right:5px}.main{display:flex;flex-direction:column;min-width:0;background:#081321}.scene-head{padding:31px 32px 25px;display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font-size:10px;color:#65b8bc;letter-spacing:1.8px;font-weight:900}.divider-dot{color:#405c71;margin:0 8px}.scene-head h1{margin:9px 0 6px;font-weight:850;letter-spacing:2.2px;font-size:27px}.scene-head p{margin:0;color:#8ba2b3;font-size:12px}.scene-id{text-align:right;white-space:nowrap;border-left:1px solid #2e4255;padding-left:18px}.scene-id span{display:block;font-size:9px;letter-spacing:1.2px;color:#6f94a5}.scene-id strong{display:block;font-size:22px;letter-spacing:3px;margin:4px 0;color:#ccefeb}
.viewport{position:relative;flex:1;min-height:400px;overflow:hidden;background:radial-gradient(ellipse at center,#15364a 0,#081321 70%)}#scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#scene:active{cursor:grabbing}.viewport-top,.viewport-bottom{position:absolute;z-index:2;left:23px;right:22px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none}.viewport-top{top:20px}.viewport-bottom{bottom:22px}.viewport-top>* ,.viewport-bottom>*{pointer-events:auto}.viewport-tag{color:#d4ebef;font-size:10px;letter-spacing:1px;font-weight:800;background:#0b1d2cc7;border:1px solid #284453;padding:9px 11px;white-space:nowrap}.view-toggle{display:flex;border:1px solid #30495d;padding:3px;background:#101d2ae8;border-radius:4px}.view-toggle button{font-size:9px;letter-spacing:.6px;font-weight:800;border:0;background:transparent;color:#7496aa;padding:8px;border-radius:3px;white-space:nowrap}.view-toggle button.active{background:#2e686a;color:#e3fffa}.view-toggle button:hover{color:#d4eff1}.view-help{color:#a5c2cf;background:#0e2132b0;padding:8px 10px;border-radius:4px;font-size:10px}.mouse-icon{font-size:17px;vertical-align:-2px;margin-right:4px}.sep{color:#527284;margin:0 5px}.switch-wrap{display:flex;align-items:center;gap:9px;font-size:9px;color:#c9e2e9;letter-spacing:.7px;font-weight:800;white-space:nowrap;background:#102233cf;padding:9px 11px;border-radius:4px}.toggle{position:relative;width:29px;height:16px}.toggle input{opacity:0;position:absolute}.toggle span{display:block;width:29px;height:16px;background:#456078;border-radius:10px;cursor:pointer}.toggle span:after{content:'';position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#e6f7f3;transition:transform .15s}.toggle input:checked+span{background:#3b9a8c}.toggle input:checked+span:after{transform:translateX(13px)}.compass{position:absolute;top:88px;right:27px;display:flex;align-items:center;flex-direction:column;color:#84a4b7;font-size:12px;font-weight:800;pointer-events:none}.needle{font-size:25px;color:#7bd2c0}.scene-error{position:absolute;inset:30% 15%;z-index:5;padding:25px;background:#281e25;border:1px solid #b57c76;border-radius:8px;color:#ffd2c7;line-height:1.6}.scene-footer{padding:14px 26px;border-top:1px solid #243b4a;border-bottom:1px solid #243b4a;display:flex;align-items:center;justify-content:space-between;gap:15px}.legend{display:flex;align-items:center;gap:15px;flex-wrap:wrap}.legend span,.coordinates{font-size:9px;color:#92aebc;font-weight:800;letter-spacing:.6px;white-space:nowrap}.legend .legend-title{color:#55798b;margin-right:3px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}.coordinates{color:#63c4b9}.bottom-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:25px 26px;gap:13px}.bottom-metrics>div{border-left:2px solid #244a56;padding-left:14px}.bottom-metrics span{display:block;color:#628b9d;font-size:9px;font-weight:900;letter-spacing:1px;white-space:nowrap}.bottom-metrics strong{display:block;font-size:23px;font-variant-numeric:tabular-nums;margin:8px 0;color:#e5f5f5}.bottom-metrics small{display:block;color:#8297a5;font-size:10px}
.time-label{color:#718c9e;font-size:10px;letter-spacing:1.1px;font-weight:800;margin-top:34px}.big-stat{display:flex;align-items:baseline;gap:9px;padding-bottom:24px;border-bottom:1px solid #26394d}.big-stat strong{color:#e5f6f3;font-size:48px;line-height:1.1;margin-top:8px;letter-spacing:-2px;font-variant-numeric:tabular-nums}.big-stat span{font-size:10px;color:#72a8ae;letter-spacing:1px}.readout-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:23px}.readout-grid>div{padding:14px;background:#142739;border:1px solid #274052}.readout-grid small{display:block;color:#8da9b7;font-size:9px;letter-spacing:1px;font-weight:900}.readout-grid strong{display:block;font-size:25px;font-variant-numeric:tabular-nums;margin:10px 0}.readout-grid em{font-size:13px;font-style:normal;color:#88aaba}.signal{font-size:9px;font-weight:900;letter-spacing:1px}.aqua,.ok{color:#67c5ba!important}.gold{color:#e6b76c}.chart-header{display:flex;align-items:center;justify-content:space-between;gap:5px;color:#a2bbc6;font-size:10px;letter-spacing:1px;font-weight:900;margin:28px 0 11px}.chart-note{font-size:9px;letter-spacing:0;color:#8ea6b3}.chart-note i{display:inline-block;height:2px;width:12px;background:#3ecabc;vertical-align:middle}.chart-note i.orange{background:#d59a54}#trend{display:block;width:100%;height:166px;background:transparent}.chart-scale{display:flex;justify-content:space-between;color:#627f91;font-size:9px;letter-spacing:.6px}.activity{margin:5px 0 26px}.activity-row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:11px 0;border-bottom:1px solid #253b4e}.activity-row span{font-size:9px;color:#91abb9;letter-spacing:.65px;font-weight:700}.activity-row b{font-size:9px;color:#7890a1;white-space:nowrap}.telemetry-footer{font-size:9px;line-height:2;color:#648194;letter-spacing:.9px;border-left:2px solid #3d7f85;padding-left:13px}.telemetry-footer strong{color:#9fc5c8}.footbar{min-height:32px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 20px;background:#09131e;border-top:1px solid #22394a;color:#526f82;font-size:9px;letter-spacing:.5px}.footbar b{color:#78d7ba}
@media(max-width:1320px){.workspace{grid-template-columns:252px minmax(350px,1fr) 262px}.controls,.telemetry{padding:22px 16px}.centerbrand{display:none}.scene-head{padding:24px 20px}.bottom-metrics{padding:20px}.bottom-metrics span{white-space:normal}.scene-head h1{font-size:22px}.readout-grid strong{font-size:23px}}
@media(max-width:1050px){.workspace{grid-template-columns:minmax(250px,31%) 1fr;grid-template-areas:'controls main' 'telemetry main'}.controls{grid-area:controls}.main{grid-area:main;min-height:740px}.telemetry{grid-area:telemetry;border-left:0;border-top:1px solid var(--line)}.topbar{padding:0 18px}.viewport-bottom{flex-wrap:wrap}.bottom-metrics{grid-template-columns:repeat(2,1fr);row-gap:24px}}
@media(max-width:710px){.topbar{height:auto;min-height:68px;padding:12px}.brandmark strong{font-size:15px}.brandmark small{font-size:8px}.status{display:none}.top-actions{gap:5px}.ghost{padding:8px;font-size:10px}.workspace{display:flex;flex-direction:column}.main{order:0;min-height:0}.controls{order:1;border-top:1px solid var(--line);border-right:0}.telemetry{order:2}.scene-head{padding:19px}.scene-head h1{font-size:22px}.scene-id{display:none}.viewport{height:430px;flex:none;min-height:0}.viewport-top{left:10px;right:10px;top:12px;flex-wrap:wrap}.view-toggle button{padding:7px 5px;font-size:8px}.viewport-tag{font-size:8px}.viewport-bottom{left:8px;right:8px;bottom:10px}.view-help{font-size:9px}.switch-wrap{font-size:8px}.compass{top:115px;right:15px}.scene-footer{padding:11px}.legend{gap:8px}.legend span,.coordinates{font-size:8px}.coordinates{display:none}.bottom-metrics{padding:17px;gap:16px}.bottom-metrics strong{font-size:21px}.controls,.telemetry{padding:22px 18px}.footbar{flex-wrap:wrap}.footbar span:nth-child(2){display:none}}

/* ms-embed-fit: embed mode = fixed 100dvh app; panels scroll INSIDE (iframe scrolling="no" blocks page scroll) */
html body.embed-mode{height:100vh;height:100dvh;overflow:hidden}
body.embed-mode .topbar,body.embed-mode .footbar{display:none}
body.embed-mode #app{height:100vh;height:100dvh;min-height:0}
body.embed-mode .workspace{min-height:0;height:100%;overflow:hidden}
body.embed-mode .controls,body.embed-mode .telemetry,body.embed-mode .main{min-height:0;overflow-y:auto;overscroll-behavior:contain}
body.embed-mode .scene-head{padding:16px 24px 12px}
body.embed-mode .scene-head h1{font-size:22px;margin:5px 0 3px}
body.embed-mode .viewport{flex:none;height:max(300px,62dvh);min-height:0}
@media(max-width:1050px){
body.embed-mode .workspace{display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain}
body.embed-mode .main{order:0;min-height:0;overflow:visible;flex:none}
body.embed-mode .controls{order:1;overflow:visible;flex:none;border-top:1px solid var(--line);border-right:0}
body.embed-mode .telemetry{order:2;overflow:visible;flex:none;border-left:0}
body.embed-mode .viewport{height:max(320px,56dvh)}
}