:root{font-family:Inter,Arial,system-ui,sans-serif;color:#edf1ef;background:#0b131a;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;height:100dvh;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #e1b37c;outline-offset:3px}
#viewport{position:fixed;inset:0;width:100%;height:100%;z-index:0}#viewport canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
#hud{position:fixed;inset:0;z-index:2;pointer-events:none}.ui-root{position:absolute;inset:0;--accent:#d7a66f;--subtext:#94a4ab}.hud-element,.visibility-button{pointer-events:auto}
.ui-root:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,11,16,.42),transparent 46%),linear-gradient(0deg,rgba(4,11,16,.31),transparent 30%);pointer-events:none}.noise-overlay{position:absolute;inset:0;opacity:.2;pointer-events:none;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 3px,rgba(255,255,255,.012) 4px)}
.masthead{position:absolute;left:30px;right:190px;top:21px;display:flex;align-items:center;gap:33px;height:43px}.logo{font-family:'Barlow Condensed',Impact,sans-serif;font-size:26px;letter-spacing:2px;font-weight:800;white-space:nowrap;display:flex;gap:10px;align-items:center}.logo small{color:#a6b1b4;font-size:21px;font-weight:500}.mark{display:inline-flex;width:30px;height:30px;border:2px solid var(--accent);border-radius:50%;justify-content:center;align-items:center;transform:rotate(-22deg)}.mark span{width:11px;height:24px;border:3px solid var(--accent);border-radius:50% 4px 50% 4px;transform:rotate(21deg)}.edition{font:10px 'DM Mono',monospace;color:#b4c1c2;letter-spacing:1.5px;border-left:1px solid #697376;padding-left:25px}.edition b{color:var(--accent)}
.control-panel{position:absolute;left:24px;top:84px;bottom:88px;width:340px;padding:0 22px 19px;overflow:auto;scrollbar-color:#7180834d transparent;scrollbar-width:thin;background:linear-gradient(135deg,rgba(13,25,32,.93),rgba(13,22,29,.81));border:1px solid rgba(164,186,192,.19);border-radius:6px;box-shadow:0 24px 65px rgba(0,0,0,.36);backdrop-filter:blur(17px)}.control-panel::-webkit-scrollbar{width:4px}.control-panel::-webkit-scrollbar-thumb{background:#56686b}
.panel-head{padding:27px 0 18px;border-bottom:1px solid rgba(182,202,204,.14)}.eyebrow{display:flex;align-items:center;gap:8px;font:10px 'DM Mono',monospace;letter-spacing:1.2px;color:var(--accent)}.pulse-dot,.live-led,.storm-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:#d9ac75;box-shadow:0 0 12px #ffc083bd;animation:pulse 2s ease-in-out infinite}.panel-head h1{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:800;line-height:.87;font-size:47px;letter-spacing:1.15px;margin:20px 0 15px}.panel-head h1 em{font-style:normal;color:var(--accent)}.panel-head p{margin:0;color:#96a6aa;font-size:11px;line-height:1.6;letter-spacing:.35px}
.play-row{display:grid;grid-template-columns:1fr 45px 58px;gap:8px;padding:18px 0 19px}.play-row button{border-radius:3px;height:43px;border:1px solid rgba(188,205,203,.19);font-weight:800;font-size:12px;letter-spacing:1.2px}.primary-play{background:var(--accent);color:#151c20;border-color:var(--accent)!important}.primary-play:hover{background:#f1c18b}.primary-play span:first-child{font-size:15px;margin-right:8px}.minor-play{background:#263239dd;color:#d8e1df;font-family:'DM Mono',monospace}.minor-play:hover,.minor-play.selected{background:#526064;color:#f1c18b}
.group-title{margin:2px 0 12px;display:flex;align-items:center;gap:9px;font-size:10px;font-weight:800;letter-spacing:.9px;color:#e2e8e6}.group-title span{font:10px 'DM Mono',monospace;color:#b78c59}.group-title small{font:9px 'DM Mono',monospace;margin-left:auto;color:#667f85;letter-spacing:0}.ef-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.ef-option{height:32px;border-radius:2px;border:1px solid rgba(173,193,192,.2);background:#1b2a32;color:#9cabb0;font:600 11px 'DM Mono',monospace}.ef-option.selected{color:#171f23;background:var(--accent);border-color:var(--accent)}.ef-option:hover:not(.selected){color:#e5eaea;border-color:#bba17a}.ef-readout{display:flex;justify-content:space-between;align-items:center;margin:9px 0 21px;gap:7px}.ef-readout b{font:700 10px 'DM Mono',monospace;color:#e0b17c}.ef-readout span{font:9px 'DM Mono',monospace;color:#768c91}
.slider-stack{padding:3px 0 6px}.slider-item{margin-bottom:18px}.slider-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.slider-heading label{font-size:11px;font-weight:650;color:#d2dddd}.slider-heading output{font:11px 'DM Mono',monospace;color:var(--accent);white-space:nowrap}.slider-item input[type=range]{appearance:none;-webkit-appearance:none;width:100%;height:3px;margin:14px 0 5px;border:0;border-radius:5px;outline:0;background:linear-gradient(90deg,var(--accent) 0,var(--accent) var(--range-progress),#35494e var(--range-progress),#35494e 100%)}.slider-item input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;background:#efd8b4;border:2px solid #9e7650;border-radius:50%;box-shadow:0 0 0 3px #d7a66f1c}.slider-item input[type=range]::-moz-range-thumb{width:10px;height:10px;background:#efd8b4;border:2px solid #9e7650;border-radius:50%}.slider-sub{font-size:10px;color:#657e85}
.camera-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.camera-option{height:33px;border:1px solid rgba(173,193,192,.2);background:#1a2931;color:#94a5aa;font:700 9px 'DM Mono',monospace;border-radius:2px}.camera-option.selected{color:#162124;background:#a5b9b9;border-color:#a5b9b9}.mode-help{font-size:10px;color:#92a4a5;margin:10px 0 19px}.note{font:9px/1.7 'DM Mono',monospace;color:#60777c;padding-top:14px;border-top:1px solid #a2bcc128}
.telemetry-panel{position:absolute;right:27px;top:86px;width:252px;background:linear-gradient(140deg,#0b1720ec,#0d1921c9);border:1px solid rgba(168,189,189,.23);padding:20px;border-radius:5px;box-shadow:0 24px 65px #0004;backdrop-filter:blur(12px)}.telemetry-head{display:flex;justify-content:space-between;font:9px 'DM Mono',monospace;letter-spacing:1px;color:#7d9296}.live-tag{color:#e7c28d}.live-led{width:6px;height:6px;margin-right:4px}.telemetry-row{margin-top:23px;border-bottom:1px solid #a3bbbe29;padding-bottom:20px}.telemetry-row>span{display:block;font:10px 'DM Mono',monospace;letter-spacing:1.5px;color:#90a5aa}.telemetry-row strong{font:700 69px/.99 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:#e0b582}.telemetry-row strong small{font:700 13px 'DM Mono',monospace;letter-spacing:.6px;color:#91a3a6}.telemetry-mini{display:grid;grid-template-columns:1fr 1fr;gap:20px 10px;padding:19px 0 25px}.telemetry-mini>div>span{display:block;font:9px 'DM Mono',monospace;letter-spacing:.6px;color:#758e95;margin-bottom:6px}.telemetry-mini b{font:700 22px 'Barlow Condensed',Impact,sans-serif;letter-spacing:1px;color:#e8eeee}.track{padding-bottom:17px}.track-top{display:flex;justify-content:space-between;font:9px 'DM Mono',monospace;color:#92a7a9;letter-spacing:.65px;margin-bottom:10px}.track-top span:last-child{color:#d6b080}.track-line{height:3px;width:100%;background:#34464a;position:relative}.track-line>div{height:3px;background:#dab27a;width:19%;transition:width .18s linear}.coordinates{font:9px 'DM Mono',monospace;color:#748c91}.coordinates>span:first-child{color:#c3d2d2}.frame-ref{float:right;color:#57747b}
.bottom-left,.bottom-right{position:absolute;bottom:30px}.bottom-left{left:30px}.storm-tag{font:700 11px 'DM Mono',monospace;letter-spacing:1.5px}.storm-dot{background:#b9d0cb;box-shadow:0 0 10px #a5d1d8;margin-right:5px}.time-caption{margin-top:8px;font:9px 'DM Mono',monospace;color:#879b9e;letter-spacing:.9px}.bottom-right{right:30px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}.bottom-right b{font:700 12px 'DM Mono',monospace;color:#d2e1e2}.bottom-right span{font:9px 'DM Mono',monospace;color:#8a9ea3;letter-spacing:.3px}
.visibility-button{position:absolute;top:25px;right:28px;border:1px solid #a0b6b44c;border-radius:3px;color:#ccd8d5;background:#0a1418bb;padding:10px 12px;font:700 10px 'DM Mono',monospace;letter-spacing:1px;transition:background .2s}.visibility-button span{margin-left:10px;color:#d4a76f}.visibility-button:hover{background:#26333a}
.hud-element{transition:opacity .24s ease,transform .24s ease}.ui-hidden .hud-element{opacity:0;pointer-events:none;transform:translateY(9px)}.ui-hidden .visibility-button{background:#16252dcc}.is-paused .pulse-dot,.is-paused .live-led{background:#91a2a3;box-shadow:none;animation:none}
.free-pad{display:none}.free-camera .free-pad{display:grid;position:absolute;right:22px;bottom:112px;grid-template-columns:repeat(3,43px);gap:5px}.free-pad button{background:#1a2c36d9;border:1px solid #a3b2b650;border-radius:4px;color:#deebed;font-size:16px;height:40px;touch-action:none}.free-pad button:active{background:#d6aa74;color:#121a1e}
.loading-screen{position:fixed;inset:0;z-index:9;background:radial-gradient(circle at 50% 55%,#21343e,#07121a 66%);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:opacity .65s,visibility .65s}.loading-screen.loaded{opacity:0;visibility:hidden;pointer-events:none}.loading-ring{width:64px;height:64px;border:2px solid #adbac044;border-left-color:#dcac75;border-radius:50%;animation:spin 1.3s linear infinite}.loading-brand{font:800 30px 'Barlow Condensed',Impact,sans-serif;letter-spacing:2.5px}.loading-brand span{color:#dda66b}.loading-caption{font:10px 'DM Mono',monospace;letter-spacing:1.4px;color:#87a2ad}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{50%{opacity:.36;box-shadow:0 0 2px #ffc083}}
@media(max-width:1120px){.edition{display:none}.telemetry-panel{width:207px;right:18px;padding:15px}.telemetry-row strong{font-size:55px}.control-panel{left:15px;width:318px;top:80px;bottom:80px}.masthead{left:20px}.bottom-left{left:20px}.bottom-right{right:18px}}
@media(max-width:700px){
 .masthead{top:11px;left:14px;right:104px;height:35px}.logo{font-size:20px;letter-spacing:.6px;gap:7px}.logo small{font-size:16px}.mark{width:23px;height:23px}.mark span{width:8px;height:18px}
 .visibility-button{top:14px;right:11px;font-size:9px;padding:8px}.visibility-button span{margin-left:1px}
 .control-panel{left:9px;right:9px;top:auto;bottom:9px;width:auto;height:39dvh;max-height:390px;padding:0 16px 18px;border-radius:8px;background:#0b1822ee}
 .panel-head{padding:17px 0 12px}.panel-head h1{font-size:36px;margin:11px 0}.panel-head p{display:none}.play-row{padding:13px 0}
 .telemetry-panel{top:57px;right:10px;width:166px;padding:12px;background:#0b1822ce}.telemetry-head{font-size:8px}.telemetry-head>span:last-child{display:none}
 .telemetry-row{margin-top:10px;padding-bottom:9px}.telemetry-row strong{font-size:46px}.telemetry-row strong small{font-size:10px}.telemetry-mini{gap:10px;padding:11px 0 13px}.telemetry-mini>div>span{font-size:7px}.telemetry-mini b{font-size:17px}.track{padding-bottom:10px}.coordinates,.frame-ref{display:none}
 .bottom-left{display:none}.bottom-right{bottom:calc(39dvh + 18px);right:11px}.bottom-right span{display:none}.bottom-right b{font-size:9px}
 .free-camera .free-pad{right:auto;left:13px;bottom:calc(39dvh + 22px);grid-template-columns:repeat(3,37px)}.free-pad button{height:33px}
 .slider-item{margin-bottom:14px}
}
@media(max-width:390px){.logo small{display:none}.telemetry-panel{width:148px}.control-panel{height:43dvh}.bottom-right{bottom:calc(43dvh + 18px)}.free-camera .free-pad{bottom:calc(43dvh + 20px)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}