:root{--bg:#0c1d24;--glass:#0b1b21ed;--line:#ffffff25;--text:#ecf2ec;--dim:#b3c3bd;--acid:#c5e8a8;--muted:#71857f}*{box-sizing:border-box}
html,body{height:100%;width:100%;overflow:hidden;margin:0;background:#152c33;color:var(--text);font-family:Inter,'Segoe UI',Arial,sans-serif}body{font-size:13px}
#viewport{position:fixed;inset:0;width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
#reticle{position:fixed;top:50%;left:50%;z-index:3;opacity:.34;pointer-events:none;transform:translate(-50%,-50%);width:22px;height:22px}#reticle span:first-child{position:absolute;top:10px;left:0;height:1px;width:22px;background:white}#reticle span:last-child{position:absolute;left:10px;top:0;width:1px;height:22px;background:white}
.hud{pointer-events:none;position:fixed;inset:0;z-index:5}.hud button,.hud input{pointer-events:auto}.topbar{position:absolute;left:0;right:0;top:0;height:79px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:linear-gradient(#0b1d26ed,#0b1d2608);border-bottom:1px solid #ffffff1a}.brand{display:flex;align-items:center;gap:13px}.brand-mark{font-size:36px;font-weight:850;line-height:1;letter-spacing:-7px;color:var(--acid)}.brand-mark span{color:#e6eee2}.brand strong{font-size:15px;letter-spacing:2.2px}.brand strong em{font-style:normal;font-weight:400;color:var(--acid)}.brand small{display:block;font-size:9px;letter-spacing:2.1px;color:#b1c2c1;margin-top:5px}.top-right{display:flex;align-items:center;gap:14px;font-size:10px;letter-spacing:1.2px}.top-right>strong{font-size:10px;font-weight:500;color:#fff}.top-divider{height:13px;width:1px;background:#ffffff6b}.live-dot,.status-circle{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 15px var(--acid)}button{color:inherit;font:inherit;cursor:pointer}#toggle-ui{background:#ffffff14;border:1px solid var(--line);padding:8px 10px;font-size:10px;letter-spacing:1px;border-radius:4px}
.panel{position:absolute;top:98px;left:24px;bottom:65px;width:320px;overflow:auto;pointer-events:auto;padding:23px 23px 22px;background:var(--glass);border:1px solid #ffffff21;box-shadow:0 12px 90px #0005;scrollbar-width:thin;scrollbar-color:#70847c transparent}.eyebrow{color:var(--acid);font-size:10px;letter-spacing:2.1px;font-weight:650}.tinybar{display:inline-block;height:7px;width:7px;background:var(--acid);margin-right:5px}
h1{font-size:32px;line-height:1.04;font-weight:600;letter-spacing:-1.7px;margin:20px 0 13px}h1 i{font-style:normal;color:var(--acid);font-weight:380}.intro{font-size:12px;line-height:1.65;color:#c0cdc8;margin:0 0 24px}.section-title{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px;margin-top:21px;margin-bottom:12px;color:#f0f4eb;font-weight:650;font-size:10px;letter-spacing:1.5px}.section-title span{color:#7c9488;font-weight:400}.vistas{display:grid;gap:4px}.vista{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:10px 8px;background:transparent;border:1px solid transparent;font-size:10px;letter-spacing:.65px;color:#b9c8c3;transition:all .15s}.vista span{color:var(--muted);font-size:9px}.vista b{margin-left:auto;font-size:15px;font-weight:400}.vista:hover,.vista.active{color:var(--acid);background:#afdb8c15;border-color:#b3df952c}.vista.active span{color:var(--acid)}
.weather-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.weather{background:#112a3088;border:1px solid #ffffff27;border-radius:3px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:9px 4px;font-size:19px;min-height:64px}.weather span{font-size:9px;letter-spacing:.8px}.weather.active{border-color:var(--acid);background:#bedda91e;color:var(--acid)}.slider-label{margin-top:18px;margin-bottom:9px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.1px;color:#adbfbb}.slider-label strong{color:var(--acid);font-size:10px;font-weight:650}input[type=range]{accent-color:var(--acid);width:100%;height:3px;margin:0;display:block}.slider-ends{display:flex;justify-content:space-between;font-size:8px;color:#869994;letter-spacing:.3px;margin-top:10px}.key-guide{display:grid;gap:8px}.key-guide>div{display:flex;align-items:center;gap:5px}.key-guide small{margin-left:6px;font-size:9px;letter-spacing:1px;color:#a3b7b0}.kbd{border:1px solid #ffffff3b;border-radius:3px;background:#ffffff0a;padding:3px 5px;font-size:9px;color:#fff}.attribution{border-top:1px solid #ffffff18;padding-top:16px;color:#7f968b;font-size:10px;line-height:1.5;margin-bottom:0}
.telemetry{position:absolute;right:24px;bottom:65px;width:265px;background:var(--glass);border:1px solid #ffffff29;padding:16px 16px 11px;pointer-events:auto}.telemetry-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;font-weight:650;padding-bottom:12px}.signal{color:var(--acid);font-size:8px;letter-spacing:.75px}.map-view{height:150px;position:relative;overflow:hidden;background:#284048;border:1px solid #ffffff25}.map-view img{width:100%;height:100%;object-fit:cover;opacity:.76;filter:saturate(.63) contrast(1.07)}#map-pin{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid white;background:var(--acid);box-shadow:0 0 0 6px #c5e8a844;left:34%;top:21%;transform:translate(-50%,-50%)}.map-scale,.map-north{position:absolute;right:9px;bottom:7px;font-size:9px;font-weight:bold;text-shadow:0 1px 8px black}.map-north{top:7px;bottom:auto}.readout{margin-top:15px}.readout>span,.readout-duo span{display:block;color:#93a9a3;letter-spacing:1.1px;font-size:9px}.readout strong{display:block;color:var(--acid);font-size:12px;letter-spacing:1.1px;margin-top:6px}.readout-duo{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 0;border-top:1px solid #ffffff16;margin-top:12px}.readout-duo+ .readout-duo{margin-top:0}.readout-duo strong{display:block;font-size:12px;letter-spacing:.5px;margin-top:6px;font-weight:600}.readout-duo>div:last-child{text-align:right}
.bottom-bar{position:absolute;left:24px;right:24px;bottom:17px;display:flex;justify-content:space-between;align-items:center;color:#edf1eb;font-size:9px;letter-spacing:1.35px;text-shadow:0 1px 7px #001}.bottom-bar>div{display:flex;align-items:center;gap:11px}.bottom-bar b{font-size:8px;color:var(--acid)}.bottom-bar strong{font-weight:550}.bottom-bar>span{color:#e2ede1}
.loader{position:fixed;inset:0;z-index:10;display:grid;place-items:center;background:#0a1c25;transition:opacity .9s,visibility .9s}.loader.ready{opacity:0;visibility:hidden;pointer-events:none}.loader-content{text-align:center;width:330px}.loader-symbol{font-size:92px;letter-spacing:-20px;font-weight:800;color:var(--acid);margin-right:20px}.loader-symbol span{color:white}.loader-label{letter-spacing:6px;font-weight:700;font-size:18px}.loader-copy{font-size:12px;letter-spacing:1px;color:#9fb7b0;margin-top:16px}.loading-line{width:100%;height:2px;background:#ffffff1c;margin-top:24px;overflow:hidden}.loading-line span{display:block;width:32%;height:100%;background:var(--acid);animation:loading 1.7s infinite ease-in-out}.loader-content small{display:block;margin-top:18px;color:#738c8b;letter-spacing:1.2px;font-size:10px}@keyframes loading{from{transform:translateX(-110%)}to{transform:translateX(425%)}}
#error{position:fixed;z-index:30;left:50%;top:35%;transform:translateX(-50%);padding:25px;max-width:500px;background:#1b2223;color:#ffe9df;line-height:1.7;border:1px solid #ec9c6e;box-shadow:0 20px 100px #0009}body.ui-hidden .panel,body.ui-hidden .telemetry,body.ui-hidden .bottom-bar{display:none}
@media(max-width:960px){.panel{width:270px;left:12px;padding:16px;top:90px;bottom:55px}.telemetry{width:210px;right:12px;bottom:55px}.topbar{padding:0 15px}.top-right>strong{display:none}.bottom-bar>div:nth-child(2){display:none}h1{font-size:27px}}
@media(max-width:610px){.top-right .top-divider,.top-right>#engine{display:none}.panel{width:225px;max-height:calc(100vh - 160px)}.telemetry{width:150px;bottom:53px;padding:10px}.telemetry-head{font-size:7px;letter-spacing:0}.map-view{height:95px}.readout-duo strong{font-size:9px}.readout>span,.readout-duo span{font-size:7px}.readout strong{font-size:9px}.bottom-bar{left:12px;right:12px;font-size:8px}}