:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#ebf1ee;background:#0b1822;font-synthesis:none;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #dfba7b;outline-offset:3px}
#simulation{width:100%;height:100%;display:block;touch-action:none}
#interface{position:absolute;inset:0;pointer-events:none;overflow:hidden}
#interface button,#interface input,#interface aside{pointer-events:auto}
.hud{position:absolute;inset:0;pointer-events:none;z-index:3}
.vignette{pointer-events:none;position:absolute;inset:0;background:radial-gradient(ellipse at 45% 42%,transparent 30%,rgba(4,10,17,.16) 65%,rgba(2,8,14,.61) 100%);z-index:1}
.filmgrain{pointer-events:none;position:absolute;inset:0;opacity:.09;z-index:2;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='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.topbar{height:78px;position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 3.15%;border-bottom:1px solid rgba(221,235,235,.1);background:linear-gradient(180deg,rgba(5,14,24,.78),rgba(5,14,24,.17));gap:28px}
.brand{display:flex;align-items:center;gap:13px;min-width:210px}
.brandmark{display:flex;gap:3px;align-items:center;transform:skewX(-13deg)}.brandmark span{height:23px;width:5px;background:#e4a86c;display:block}.brandmark span:nth-child(2){height:30px}.brandmark span:nth-child(3){height:15px}
.brandcopy strong{font-size:17px;letter-spacing:3px;font-weight:900}.brandcopy strong span{color:#e2a76b}.brandcopy small{display:block;color:#a2afb5;font-size:8px;letter-spacing:1.65px;margin-top:2px}
.top-center{display:flex;align-items:center;gap:10px;color:#b5c2c5;font-size:10px;letter-spacing:1.3px;font-weight:600}.top-center b{font-size:10px;color:#6e858b;letter-spacing:1px;padding-left:15px;border-left:1px solid #51606a;margin-left:10px}
.live-dot,.pulse{width:7px;height:7px;background:#f0926e;border-radius:50%;box-shadow:0 0 16px #ec9275;animation:pulse 2s infinite}.pulse{width:5px;height:5px;background:#95d7b6;box-shadow:0 0 11px #95d7b6}
@keyframes pulse{50%{opacity:.4;transform:scale(.7)}}
.top-actions{display:flex;align-items:center;gap:22px}.engine-status{font-size:10px;letter-spacing:1.1px;font-weight:700;color:#b3c7be;display:flex;align-items:center;gap:9px}.iconbtn{color:#e0eaec;background:#2536446a;border:1px solid #93b0b35c;border-radius:4px;width:37px;height:37px;font-size:21px}
.left-stack{position:absolute;left:3.15%;top:17.2%;width:min(520px,35vw);filter:drop-shadow(0 4px 15px rgba(0,0,0,.25))}
.eyebrow{color:#e3b088;font-size:10px;letter-spacing:2.1px;font-weight:800;display:flex;align-items:center;gap:11px}.redbar{width:19px;height:2px;background:#e0a171;display:block}
h1{margin:13px 0 0;font-size:clamp(52px,6.6vw,106px);line-height:.9;letter-spacing:-6px;font-weight:950;text-shadow:0 8px 48px #0b182066}h1 span{color:#e9ecea}h1 em{font-style:normal;color:#eaa574}
.subtitle{margin:16px 0 0;color:#dedcce;font-weight:800;letter-spacing:7px;font-size:17px}.blurb{color:#bdcbd0;font-size:13px;line-height:1.8;margin-top:24px;font-weight:450;letter-spacing:.25px}
.weather-strip{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}.weather-strip span{background:#10202c93;border:1px solid #9fb1bc42;color:#c4d1d2;padding:9px 10px;font-size:9px;font-weight:750;letter-spacing:1.1px;backdrop-filter:blur(8px)}
.severity{margin-top:43px;max-width:270px}.severity-label{color:#9dabb3;letter-spacing:1.7px;font-size:10px;font-weight:750}.severity-row{display:flex;align-items:center;gap:15px;margin:9px 0 14px}.severity-row>b{font-size:40px;font-weight:860;color:#e6a578;letter-spacing:-1px;line-height:1}.severity-row div strong{font-size:13px;letter-spacing:1.5px;display:block}.severity-row div small{font-size:8px;letter-spacing:1.2px;color:#86979f;display:block;margin-top:5px}.severity-bars{display:flex;gap:5px}.severity-bars span{height:5px;flex:1;background:#5b686f88;transform:skewX(-16deg)}.severity-bars span.active{background:linear-gradient(90deg,#d1af79,#e38e64)}
.controls-panel{position:absolute;right:2.9%;top:106px;bottom:136px;width:322px;display:flex;flex-direction:column;background:rgba(9,23,32,.82);border:1px solid rgba(171,196,199,.28);box-shadow:0 20px 90px #030b1399, inset 0 1px #cedee91a;backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);pointer-events:auto}
.panel-header{padding:20px 22px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #a0b8c01d}.panel-header small{display:block;color:#d8a275;letter-spacing:1.6px;font-size:9px;font-weight:800}.panel-header h2{font-size:17px;letter-spacing:1.6px;margin:4px 0 0}.panel-close{border:0;background:transparent;color:#9eb4bd;font-size:26px;display:none}
.panel-scroll{padding:20px 22px 12px;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:#4f6570 transparent}
.control-header{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#a6b9c1;font-size:9px;font-weight:800;letter-spacing:1.1px;white-space:nowrap}.control-header span:last-child{font-size:8px;color:#718891}.orange-dot{background:#dca57c;width:6px;height:6px;border-radius:50%}
.ef-selector{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:17px 0 11px}.ef-selector button{height:35px;color:#aabdc6;background:#23333d7e;border:1px solid #4a616a66;font-size:13px;font-weight:750;border-radius:2px}.ef-selector button.active{color:#121e26;background:#e3ae7f;border-color:#e3ae7f;box-shadow:0 0 21px #d6a06a48}
.ef-caption{display:flex;justify-content:space-between;font-size:9px;color:#778d98;letter-spacing:.8px}.ef-caption strong{font-size:9px;color:#e0ae82;letter-spacing:.5px}
.panel-divider{height:1px;background:#819da22a;margin:21px 0}
.slider-row{margin:20px 0 0}.slider-label{display:flex;justify-content:space-between;align-items:baseline;gap:14px}.slider-label label{color:#b8c8cc;font-size:11px;letter-spacing:.2px}.slider-label output{font-size:11px;font-weight:750;color:#e5d5c1;font-variant-numeric:tabular-nums}
input[type=range]{width:100%;height:17px;margin:9px 0 0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,#daa578 0%,#daa578 var(--progress),#536671 var(--progress),#536671 100%)}input[type=range]::-moz-range-track{height:3px;background:#536671}input[type=range]::-moz-range-progress{height:3px;background:#daa578}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:#edd2b3;box-shadow:0 0 0 3px #daa5783d}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#edd2b3}
.camera-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:15px}.camera-grid button{display:flex;align-items:center;gap:9px;height:38px;padding:0 10px;color:#adbec5;background:#1c2c37a6;border:1px solid #536b756d;border-radius:2px;font-size:9px;font-weight:850;letter-spacing:1px}.camera-grid button span{color:#d0b195;font-size:19px;line-height:1}.camera-grid button.active{border-color:#d3a476;background:#9b795329;color:#f1dfc7}.control-note{font-size:8px;letter-spacing:.55px;color:#7a8f98;line-height:1.9;margin:14px 0 8px}.panel-footer{height:40px;border-top:1px solid #849da52b;display:flex;align-items:center;gap:10px;padding:0 22px;color:#8ca49f;font-size:8px;letter-spacing:.85px;font-weight:700;flex-shrink:0}.pin-dot{height:5px;width:5px;border-radius:50%;background:#9dca9f}
.bottom-shell{position:absolute;bottom:0;left:0;right:0;z-index:3;background:linear-gradient(180deg,transparent,rgba(4,13,21,.96) 25%);padding:15px 3.15% 19px}
.stat-strip{display:flex;align-items:center;gap:0;margin-left:0;margin-right:365px;min-height:59px;max-width:790px}.stat{flex:1;padding:5px 25px;border-right:1px solid #b6cbd035}.stat:first-child{padding-left:0}.stat.last{border:0}.stat small{font-size:9px;color:#95aab4;letter-spacing:1.1px;font-weight:750;white-space:nowrap}.stat strong{display:block;font-size:25px;letter-spacing:-.55px;font-weight:800;margin-top:4px;white-space:nowrap;font-variant-numeric:tabular-nums}.stat em{font-size:9px;color:#e2b48a;letter-spacing:1.2px;font-style:normal;margin-left:5px;font-weight:800}
.transport{border-top:1px solid #aec5cb30;margin-top:15px;padding-top:13px;display:flex;align-items:center;justify-content:space-between}.transport-left{display:flex;gap:7px;align-items:center}.primary-play{background:#dcb084;color:#1b2429;padding:12px 21px;border:1px solid #f2c39c;display:flex;align-items:center;gap:10px;font-size:10px;font-weight:950;letter-spacing:1.2px;border-radius:2px;box-shadow:0 6px 24px #e6a7792b}.primary-play span:first-child{font-size:18px;line-height:0}.transport-btn{height:40px;background:#253540a8;border:1px solid #8fa9b45b;color:#bccdd0;padding:0 17px;border-radius:2px;font-size:10px;font-weight:850;letter-spacing:1px}.transport-btn.active{background:#b78a614d;border-color:#d0a477;color:#ffe1b8}.transport-btn:first-letter{font-size:17px}.telemetry{display:flex;align-items:center;gap:13px;font-size:9px;color:#829da7;letter-spacing:1.1px;font-weight:750}.telemetry .oscillate{color:#b1cbb5;font-size:19px;letter-spacing:-2px}.telemetry-divider{color:#50636d}
.left-bottom{position:absolute;bottom:170px;left:3.15%;font-size:9px;letter-spacing:1px;color:#8fa7ad;display:flex;gap:8px;align-items:center;white-space:nowrap}.left-bottom b{color:#d3b295}.compass-ring{width:24px;height:24px;border:1px solid #7f98a2;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#d4bbc0;font-weight:900;font-size:10px}
.settings-mobile{display:none}.show-ui{display:none;position:absolute;right:19px;top:19px;z-index:5;padding:12px 15px;border:1px solid #8dabb7;background:#0b1c29bc;color:#eee;letter-spacing:1px;font-size:10px;font-weight:800;backdrop-filter:blur(12px)}.ui-hidden .hud{display:none}.ui-hidden .show-ui{display:block}
.toast{position:absolute;top:91px;left:50%;transform:translate(-50%,-12px);opacity:0;transition:opacity .18s,transform .18s;z-index:7;white-space:nowrap;padding:12px 18px;background:#111f29dc;border:1px solid #a7835d;color:#e6c09e;font-size:10px;letter-spacing:1.25px;font-weight:800;pointer-events:none}.toast.toast-on{opacity:1;transform:translate(-50%,0)}
#fatal:not([hidden]){position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;max-width:560px;padding:25px;background:#451f23;border:1px solid #ffb7ab;color:#fff;line-height:1.6}
@media(max-height:840px) and (min-width:900px){.controls-panel{top:83px;bottom:113px}.panel-scroll{padding-top:14px}.panel-divider{margin:12px 0}.slider-row{margin-top:12px}.panel-header{padding-top:13px;padding-bottom:12px}.left-stack{top:15%}.severity{margin-top:22px}.bottom-shell{padding-bottom:8px}.left-bottom{bottom:146px}}
@media(max-width:1320px){.left-stack{width:39vw}h1{font-size:clamp(54px,6vw,80px)}.blurb{max-width:350px}.controls-panel{right:2%;width:303px}.top-center{font-size:9px}.stat-strip{margin-right:315px}.weather-strip{max-width:330px}}
@media(max-width:1030px){.brand{min-width:160px}.top-center b{display:none}.left-stack{top:17%;width:45vw}h1{font-size:64px;letter-spacing:-4px}.subtitle{font-size:14px;letter-spacing:4px}.weather-strip span{font-size:8px}.topbar{padding-left:25px;padding-right:25px}.controls-panel{width:280px}.stat-strip{margin-right:285px}.stat{padding:5px 14px}.stat small{font-size:8px}.stat strong{font-size:22px}.telemetry{display:none}}
@media(max-width:899px){.topbar{height:65px;padding:0 17px}.brandmark span{height:19px}.brandmark span:nth-child(2){height:24px}.brandcopy strong{font-size:13px}.brandcopy small{font-size:7px}.top-center{display:none}.engine-status{font-size:8px}.left-stack{left:19px;top:15%;width:calc(100% - 40px)}h1{font-size:clamp(51px,11.7vw,90px);letter-spacing:-3.2px}.subtitle{font-size:12px;letter-spacing:4px}.eyebrow{font-size:8px;letter-spacing:1.2px}.blurb{font-size:12px;margin-top:15px}.weather-strip{margin-top:17px}.severity{margin-top:24px;max-width:215px}.severity-row>b{font-size:32px}.severity-row div strong{font-size:11px}.severity-label{font-size:8px}.left-bottom{display:none}.bottom-shell{padding:13px 17px max(16px,env(safe-area-inset-bottom))}.stat-strip{margin-right:0;max-width:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0}.stat{padding:0 10px}.stat:first-child{padding-left:0}.stat small{font-size:7px;letter-spacing:.5px}.stat strong{font-size:19px}.stat em{font-size:7px;margin-left:1px}.transport{margin-top:11px;padding-top:11px}.primary-play{height:38px;padding:0 12px;font-size:9px}.transport-btn{padding:0 12px;height:38px}.transport-btn span{font-size:9px}.settings-mobile{display:block;position:absolute;right:17px;bottom:156px;padding:12px 17px;background:#0f2535bd;color:#f3d7b8;border:1px solid #d5aa7e92;font-size:10px;letter-spacing:1.4px;font-weight:900;backdrop-filter:blur(12px)}
.controls-panel{position:absolute;top:auto;left:0;right:0;bottom:0;width:100%;height:min(80vh,720px);z-index:9;background:rgba(8,24,35,.98);border:0;border-top:1px solid #d1a47a75;transform:translateY(103%);transition:transform .25s ease;box-shadow:0 -25px 90px #000a}.panel-open .controls-panel{transform:translateY(0)}.panel-header{padding:16px 24px}.panel-close{display:block}.panel-scroll{padding:16px 24px 20px;overflow-y:auto}.sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;row-gap:4px}.panel-footer{padding-left:24px}.ef-selector{max-width:500px}.camera-grid{max-width:520px;grid-template-columns:repeat(4,1fr)}.camera-grid button{justify-content:center}.control-note{font-size:9px}.weather-strip{max-width:400px}}
@media(max-width:550px){.engine-status{display:none}.topbar{height:59px}.left-stack{top:14.5%}.eyebrow{font-size:7px}.subtitle{font-size:10px;letter-spacing:3px;margin-top:13px}.blurb{font-size:11px}.weather-strip{gap:5px}.weather-strip span{padding:7px;font-size:7px}.severity{margin-top:24px}.severity-row{margin:7px 0 10px}.settings-mobile{bottom:162px;right:14px;font-size:9px;padding:10px 12px}.bottom-shell{padding-left:13px;padding-right:13px}.stat-strip{grid-template-columns:repeat(2,1fr);row-gap:10px}.stat{padding:0 6px;border-right:0}.stat:nth-child(odd){border-right:1px solid #b6cbd035}.stat:nth-child(3){padding-left:0}.stat small{font-size:8px}.stat strong{font-size:20px;margin-top:1px}.transport-left{width:100%;display:grid;grid-template-columns:2.4fr 1fr 1.25fr;gap:5px}.primary-play{font-size:8px;letter-spacing:0;padding:0 8px;justify-content:center}.transport-btn{padding:0 7px;font-size:9px}.transport-btn span{font-size:8px}.controls-panel{height:min(85vh,780px)}.sliders{display:block}.slider-row{margin-top:17px}.camera-grid{grid-template-columns:repeat(2,1fr)}.severity-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.live-dot,.pulse{animation:none}*{scroll-behavior:auto!important}}