:root{font-family:Inter,"Segoe UI",Arial,sans-serif;font-synthesis:none;color:#f3f1eb;background:#0b1015;font-size:14px;--ink:#ebebe7;--muted:#8c9b9d;--accent:#df986f;--teal:#8bb4a7;--glass:rgba(10,18,23,.79);--stroke:rgba(187,208,204,.14)}
*{box-sizing:border-box}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}
body{-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer;touch-action:manipulation}
button:focus-visible,input:focus-visible{outline:2px solid #e6a477;outline-offset:3px}
.viewport,.world-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}
.world-canvas{touch-action:none}
.screen-vignette,.screen-grain{pointer-events:none;position:absolute;inset:0;z-index:1}
.screen-vignette{background:linear-gradient(90deg,rgba(5,12,17,.76) 0%,rgba(5,12,17,.37) 24%,transparent 48%,rgba(3,9,15,.18) 70%,rgba(3,9,15,.7) 100%),linear-gradient(0deg,rgba(2,7,10,.85) 0%,transparent 18%,transparent 80%,rgba(5,10,13,.44) 100%)}
.screen-grain{opacity:.24;background-image:url('data:image/svg+xml,%3Csvg viewBox="0 0 180 180" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity=".16"/%3E%3C/svg%3E')}
.interface{position:absolute;inset:0;z-index:2;pointer-events:none;display:flex;flex-direction:column;padding:0 36px}
.interface.hidden-ui{display:none}
.topbar{flex:0 0 86px;display:flex;align-items:center;gap:30px;border-bottom:1px solid rgba(255,255,255,.15);pointer-events:auto}
.brand{display:flex;align-items:center;gap:12px;min-width:260px}
.brand-icon{border:1px solid #8cb7ad;border-radius:50%;width:34px;height:34px;display:grid;place-items:center;color:#bbddd4;box-shadow:0 0 0 4px rgba(114,166,153,.07);font-size:24px}
.brand-icon span{display:block;transform:rotate(-18deg);line-height:1}
.brand-name{font-weight:900;font-size:14px;letter-spacing:.21em;white-space:nowrap}
.brand-slash{color:#e4a078}
.brand-sub,.meta-label,.panel-kicker,.eyebrow,.storm-meter-label,.telemetry-name,.radar-title,.radar-footer,.footer-number>span,.footer-left small{font-family:Consolas,"SFMono-Regular",monospace;letter-spacing:.115em}
.brand-sub{font-size:9px;color:#849596;margin-top:5px;white-space:nowrap}
.spark{color:#dfa174;font-size:8px;margin:0 2px}
.top-meta{margin-left:auto;display:flex;gap:39px;white-space:nowrap}
.top-meta>div{display:flex;flex-direction:column;gap:4px}
.meta-label{color:#73888b;font-size:9px}
.top-meta strong{font-size:10px;letter-spacing:.14em;font-weight:650}
.top-actions{display:flex;align-items:center;gap:15px}
.live-indicator{white-space:nowrap;display:flex;align-items:center;gap:8px;font-family:Consolas,monospace;font-size:10px;letter-spacing:.11em;color:#adc9b7}
.live-indicator i,.radar-title i{width:6px;height:6px;border-radius:50%;background:#a9d28c;box-shadow:0 0 10px #a9d28c;animation:pulse 2s infinite;display:inline-block}
.live-indicator.paused i{background:#ef9b75;box-shadow:none;animation:none}
@keyframes pulse{50%{opacity:.43;box-shadow:0 0 2px #a9d28c}}
.small-button{border:1px solid rgba(255,255,255,.21);background:rgba(10,20,28,.42);color:#d6e0dc;padding:11px 13px;border-radius:3px;font-family:Consolas,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:10px;transition:background .2s}
.small-button:hover{background:rgba(28,43,50,.9)}
.panel-trigger{display:none}
.left-hud{position:absolute;left:36px;top:17%;width:min(340px,26vw)}
.eyebrow{display:flex;align-items:center;gap:10px;font-size:10px;color:#d2ae92;font-weight:700;margin-bottom:20px}
.eyebrow-rule{width:30px;height:1px;background:#df9c70}
h1{font-weight:830;font-size:clamp(29px,3vw,55px);line-height:.99;letter-spacing:-.045em;margin:0 0 20px;text-wrap:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.4)}
h1 em{color:#e5ad87;font-style:normal}
.scene-description{font-size:13px;line-height:1.75;color:#c2cfce;max-width:290px;margin:0 0 29px}
.storm-meter{border-left:2px solid #dc9b73;padding:3px 0 5px 16px;margin-bottom:27px}
.storm-meter-label{font-size:9px;color:#acb8b3}
.meter-row{display:flex;align-items:center;gap:13px;margin-top:6px}
.meter-row>strong{font-size:42px;line-height:1;font-weight:850;letter-spacing:-.06em}
.meter-row>div{display:flex;flex-direction:column;gap:6px}
.meter-row>div>span{font-family:Consolas,monospace;font-size:12px;font-weight:700;color:#e2aa85;letter-spacing:.08em}
.meter-row small{font-size:9px;color:#96a3a2}
.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;margin-bottom:24px}
.telemetry>div{display:flex;flex-direction:column;gap:7px}
.telemetry-name{font-size:9px;color:#a4b1b2}
.telemetry strong{font-size:25px;letter-spacing:-.055em;font-weight:750;font-variant-numeric:tabular-nums}
.telemetry strong small{font-size:11px;letter-spacing:0;color:#b4c3c1;font-weight:400}
.radar-block{background:rgba(8,18,23,.78);border:1px solid rgba(130,164,157,.24);max-width:330px;padding:12px 12px 11px;backdrop-filter:blur(12px)}
.radar-title,.radar-footer{display:flex;justify-content:space-between;align-items:center;color:#a4bcb9;font-size:8px;gap:8px;white-space:nowrap}
.radar-title i{width:5px;height:5px;margin-right:4px}
#radar{display:block;width:100%;height:136px;margin:10px 0 9px;border:1px solid rgba(93,124,128,.17);object-fit:fill}
.radar-footer{font-size:7px;color:#849999}
.control-panel{pointer-events:auto;position:absolute;top:101px;right:27px;bottom:87px;width:336px;display:flex;flex-direction:column;background:rgba(8,15,20,.9);border:1px solid rgba(187,207,203,.19);box-shadow:0 24px 90px rgba(0,0,0,.26);backdrop-filter:blur(20px);border-radius:4px;overflow:hidden}
.control-panel:before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#e39e77 0%,#e39e77 30%,transparent 80%)}
.panel-heading{padding:24px 22px 20px;display:flex;justify-content:space-between;border-bottom:1px solid var(--stroke)}
.panel-kicker{font-size:9px;color:#e6ad86;font-weight:650;display:flex;gap:13px}
.panel-kicker span{color:#788a8f}
h2{font-size:25px;line-height:1.1;letter-spacing:-.035em;margin:10px 0 8px}
.panel-heading p{color:#9daeb0;font-size:11px;margin:0}
.close-panel{display:none;background:none;border:0;color:#e8eeed;font-size:25px;align-self:start}
.panel-content{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#3d5052 transparent;padding:19px 22px 18px;flex:1}
.section-heading{display:flex;align-items:center;gap:10px;color:#d7ddda;font-family:Consolas,monospace;font-size:10px;font-weight:800;letter-spacing:.09em}
.section-heading .index{color:#e3a07b;font-size:9px;border:1px solid #87654e;padding:3px 4px}
.section-detail{margin-left:auto;font-size:8px;color:#7a9295;font-weight:400}
.section-heading.mt{border-top:1px solid var(--stroke);margin-top:25px;padding-top:18px}
.ef-options{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:15px 0 11px}
.ef-button{border:1px solid #334047;background:#142028;color:#a3b5b5;min-height:37px;padding:4px 0;font-family:Consolas,monospace;font-size:11px;font-weight:700;transition:.2s}
.ef-button:hover{border-color:#e1a77f;color:#fff}
.ef-button.selected{color:#101719;background:#e9a77b;border-color:#e9a77b;box-shadow:0 0 17px rgba(229,162,119,.16)}
.ef-info{display:flex;justify-content:space-between;gap:4px;font-family:Consolas,monospace;font-size:9px;color:#c8d2c9;letter-spacing:.03em}
.hazard-mark{color:#e49b76;font-size:8px;white-space:nowrap}
.slider-section{margin-top:17px}
.slider-label{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:11px;color:#d2dedb}
.slider-label output{font:700 12px Consolas,monospace;color:#e2b494;white-space:nowrap}
.range-control{--fill:50%;display:block;margin:14px 0 9px;appearance:none;width:100%;height:3px;border-radius:3px;outline:none;background:linear-gradient(90deg,#e3a47d var(--fill),#37464b var(--fill));cursor:pointer}
.range-control::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:3px solid #e7b28f;border-radius:50%;background:#172025;box-shadow:0 0 0 3px rgba(227,161,121,.15)}
.range-control::-moz-range-thumb{width:9px;height:9px;border:2px solid #e7b28f;border-radius:50%;background:#172025}
.slider-desc{color:#71898e;font-size:9px;line-height:1.45}
.switch-row{margin-top:20px;border-top:1px solid var(--stroke);padding-top:16px;display:flex;justify-content:space-between;align-items:center}
.switch-row>div{display:flex;flex-direction:column;gap:4px}
.switch-row strong{font-size:11px;font-weight:600}
.switch-row small{font-size:9px;color:#8ca0a2}
.switch{position:relative;width:37px;height:20px;cursor:pointer}
.switch input{opacity:0;position:absolute;width:100%;height:100%;margin:0;z-index:1;cursor:pointer}
.switch-track{display:block;background:#33434a;border-radius:30px;height:20px;transition:.2s}
.switch-track:after{content:"";position:absolute;width:14px;height:14px;left:3px;top:3px;border-radius:50%;background:#a5b8b8;transition:.2s}
.switch input:checked+.switch-track{background:#9e6a4b}
.switch input:checked+.switch-track:after{transform:translateX(17px);background:#f2c19b}
.camera-title{font-family:Consolas,monospace;color:#cbd4d1;font-size:10px;letter-spacing:.1em;font-weight:700;margin-top:24px}
.camera-options{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:10px}
.camera-option{text-transform:uppercase;color:#a2b2b4;background:#152127;border:1px solid #334348;font:700 9px Consolas,monospace;padding:11px 0}
.camera-option.selected{background:#425b58;border-color:#6b9586;color:#e8f5e9}
.camera-hint{font-size:9px;color:#87999b;line-height:1.55;margin:10px 0 0}
.panel-bottom{border-top:1px solid var(--stroke);padding:13px 16px;display:flex;gap:8px;background:rgba(14,24,30,.7)}
.secondary-action{padding:11px 9px;background:rgba(30,48,53,.74);color:#bdcfca;border:1px solid #354649;font-size:10px;flex:1;letter-spacing:.02em}
.secondary-action:hover{background:#354a50;color:#fff}
.footer-hud{position:absolute;bottom:0;left:36px;right:36px;height:74px;border-top:1px solid rgba(255,255,255,.18);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:10px}
.footer-left{display:flex;align-items:center;gap:11px}
.status-line{display:block;width:1px;height:31px;background:#93b8aa}
.footer-left>div{display:flex;flex-direction:column;gap:6px}
.footer-left strong,.transport-data>span:first-child{font:700 10px Consolas,monospace;letter-spacing:.105em;color:#c9ded6;white-space:nowrap}
.footer-left small{font-size:9px;color:#829798}
.transport{display:flex;align-items:center;gap:13px;justify-self:center;pointer-events:auto;min-width:255px}
.play-button{width:42px;height:42px;display:grid;place-items:center;background:#e3aa82;color:#101b20;border:none;font-size:19px;border-radius:2px;font-weight:800}
.play-button:hover{background:#f1c7a1}
.transport-data{display:flex;flex-direction:column;min-width:163px;gap:6px}
.progress-track{height:2px;background:#486064;width:100%}
#progress-fill{height:100%;width:0;background:#eeab7c;transition:width .2s linear}
.play-hint{font:8px Consolas,monospace;color:#81999b;letter-spacing:.045em}
.reset-button{background:transparent;color:#c3d2ce;border:1px solid #45585a;font-size:21px;height:35px;width:35px}
.reset-button:hover{background:#32444c}
.footer-right{display:flex;align-items:center;gap:26px;justify-content:flex-end}
.footer-number{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.footer-number>span{font-size:8px;color:#7b9498}
.footer-number strong{font:700 18px Consolas,monospace;font-variant-numeric:tabular-nums}
.footer-divider{height:23px;width:1px;background:#50616a}
.toast{position:absolute;left:50%;top:105px;transform:translate(-50%,-12px);background:rgba(14,29,33,.94);color:#e3b795;border:1px solid #83624a;letter-spacing:.13em;font:700 11px Consolas,monospace;padding:13px 18px;opacity:0;transition:.2s;pointer-events:none}
.toast.visible{opacity:1;transform:translate(-50%,0)}
.show-interface{display:none;position:absolute;top:17px;right:20px;z-index:5;background:rgba(12,24,30,.87);border:1px solid #758e87;padding:12px 17px;color:#d4e4dc;font-family:Consolas,monospace;letter-spacing:.08em}
.show-interface.visible{display:block}
.error-overlay{position:absolute;inset:0;z-index:20;background:#0c1116;color:#e8c7b2;display:grid;place-items:center;text-align:center;padding:20px;font-size:15px}
.error-overlay[hidden]{display:none}
@media(max-width:1250px){.top-meta{display:none}.top-actions{margin-left:auto}.control-panel{width:310px;right:16px}.left-hud{left:24px;width:300px}.interface{padding:0 24px}.footer-hud{left:24px;right:24px}h1{font-size:38px}.scene-description{font-size:12px}}
@media(max-width:940px){.left-hud{top:135px;width:255px}.scene-description{display:none}.left-hud h1{font-size:33px;margin-bottom:20px}.radar-block{max-width:255px}.control-panel{width:294px}.footer-right{display:none}.footer-hud{grid-template-columns:1fr 1fr}.transport{justify-self:end}.topbar{height:72px;flex-basis:72px}}
@media(max-width:740px){.interface{padding:0 16px}.topbar{height:65px;flex-basis:65px}.brand{min-width:0}.brand-icon{width:28px;height:28px;font-size:20px}.brand-name{font-size:12px;letter-spacing:.12em}.brand-sub{font-size:7px}.top-actions .live-indicator{display:none}.top-actions .small-button:not(.panel-trigger){display:none}.panel-trigger{display:block}.left-hud{left:17px;top:99px;width:245px}.left-hud h1{font-size:29px;line-height:1.07;margin-bottom:10px}.eyebrow{font-size:8px;margin-bottom:12px}.storm-meter{margin-bottom:15px}.meter-row>strong{font-size:32px}.meter-row small{display:none}.telemetry{gap:10px 8px;margin-bottom:12px}.telemetry strong{font-size:20px}.radar-block{display:none}.control-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-height:82vh;border-radius:12px 12px 0 0;transform:translateY(103%);transition:transform .25s ease;z-index:10;box-shadow:0 -20px 80px rgba(0,0,0,.5)}.control-panel.is-open{transform:translateY(0)}.close-panel{display:block}.panel-heading{padding:18px 20px}.panel-content{padding:17px 20px}.panel-bottom{padding-bottom:max(16px,env(safe-area-inset-bottom))}.footer-hud{bottom:max(8px,env(safe-area-inset-bottom));left:16px;right:16px;height:64px;grid-template-columns:1fr 1fr}.footer-left strong{font-size:8px}.footer-left small{font-size:7px}.transport{min-width:0;gap:8px}.transport-data{min-width:115px}.transport-data>span:first-child{font-size:8px}.play-hint{font-size:7px}.play-button{width:36px;height:36px}.reset-button{display:none}}
@media(max-height:700px) and (min-width:741px){.left-hud{top:115px}.left-hud h1{font-size:32px}.scene-description{margin-bottom:14px}.storm-meter{margin-bottom:14px}.telemetry{margin-bottom:10px}.radar-block{max-width:280px}.control-panel{top:84px;bottom:74px}.topbar{height:66px;flex-basis:66px}.footer-hud{height:62px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}