:root{--base:#0d1d28;--panel:rgba(15,31,41,.93);--edge:rgba(178,199,196,.13);--accent:#dfad77;--bright:#f2f0e7;--muted:#81979c;--green:#8cb8a9}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:#0d1d28;color:var(--bright);font-family:'DM Sans',Arial,sans-serif}body{font-size:12px}button,select,input{font:inherit}button{cursor:pointer}#viewport{position:absolute;inset:0}#viewport canvas{display:block;width:100%;height:100%;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,22,29,.4),transparent 33%,transparent 80%,rgba(8,22,29,.15)),linear-gradient(0deg,rgba(8,24,31,.22),transparent 25%)}.topbar{position:absolute;top:0;left:0;right:0;height:92px;display:flex;align-items:center;padding:0 35px;gap:20px;background:linear-gradient(180deg,rgba(10,22,30,.85),rgba(10,22,30,.17));pointer-events:none}.topbar>*{pointer-events:auto}.brandmark{width:48px;height:48px;border:1px solid rgba(220,185,135,.65);display:grid;place-items:center}.brandglyph{font:600 19px 'Space Grotesk',sans-serif;letter-spacing:-2px}.branddot,.logo-large span{color:var(--accent)}.eyebrow,.panel-kicker,.section-label,.maphead,.bottom-note,.worldtag,.range-end,.bottomlegend{font:600 9px 'Space Grotesk',sans-serif;letter-spacing:1.65px}.eyebrow{color:var(--accent);margin-bottom:5px}.small-divider{color:var(--muted);margin:0 6px}.brandcopy h1{font:600 19px 'Space Grotesk',sans-serif;letter-spacing:1.1px;margin:0}.brandcopy .thin{font:400 12px 'Space Grotesk',sans-serif;color:#b9c8c9;letter-spacing:1.1px}.topright{margin-left:auto;display:flex;align-items:center;gap:20px}.status{color:var(--green);letter-spacing:1.7px;font-size:9px;font-weight:700}.status:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-right:8px;box-shadow:0 0 10px var(--green)}.iconbutton{background:#182f3b;border:1px solid var(--edge);color:#e0d9c9;width:38px;height:38px;font-size:23px}.controlpanel,.infopanel{position:absolute;top:105px;bottom:64px;background:var(--panel);border:1px solid var(--edge);backdrop-filter:blur(16px);overflow:auto;scrollbar-width:thin;scrollbar-color:#47606a #152732}.controlpanel{left:20px;width:320px;padding:23px 24px}.infopanel{right:20px;width:298px;padding:23px 20px;bottom:auto}.panel-kicker{color:var(--accent);display:flex;justify-content:space-between;white-space:nowrap}.panel-kicker span{color:#718d94}.worldtag{margin-top:31px;color:var(--muted)}.worldtag strong{color:#c5d2cd;font-weight:500;font-size:11px;margin-left:5px;letter-spacing:.4px}.controlpanel h2{font:600 37px/1.08 'Space Grotesk',sans-serif;letter-spacing:-1.5px;margin:16px 0 16px}.controlpanel h2 em{color:var(--accent);font-style:normal}.intro{color:#a7b8ba;font-size:11px;line-height:1.7;margin:0}.line{height:1px;background:var(--edge);margin:20px 0}.section-label{color:#d1d9d4;display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.section-label span{color:var(--accent)}input[type='range']{appearance:none;-webkit-appearance:none;width:100%;height:3px;background:#46575d;border-radius:0;accent-color:var(--accent);cursor:pointer}input[type='range']::-webkit-slider-thumb{appearance:none;height:12px;width:12px;background:var(--accent);border-radius:50%;border:2px solid #e8d6c1}.range-end{display:flex;justify-content:space-between;color:#6e8488;font-size:8px;margin-top:9px}.toggle{display:flex;align-items:center;justify-content:space-between;margin:12px 0;cursor:pointer;color:#afc0c0;font-size:11px}.toggle-symbol{font-style:normal;font-size:14px;color:#a7aba2;display:inline-block;margin-right:9px;width:16px;text-align:center}.toggle input{position:absolute;opacity:0}.toggle b{width:29px;height:15px;border-radius:12px;background:#364852;position:relative;transition:.2s}.toggle b:before{content:'';position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#87969a;transition:.2s}.toggle input:checked+b{background:#4a705f}.toggle input:checked+b:before{left:16px;background:#b0d8bd}select{width:100%;background:#203540;color:#d9e0de;padding:12px 11px;border:1px solid #405461;outline:none;letter-spacing:.3px;margin-bottom:10px;border-radius:0}.buttonrow{display:flex;gap:7px}.btn{border:1px solid #a39c8b;height:39px;font:600 9px 'Space Grotesk';letter-spacing:1px;color:#12252c;display:flex;align-items:center;justify-content:space-between;padding:0 15px;gap:18px;transition:.2s}.btn:hover{filter:brightness(1.16)}.btn-primary{background:var(--accent);border-color:var(--accent);flex:1}.btn-outline{background:transparent;border-color:#788b8f;color:#e3d8c6;flex:1}.btn-square{width:40px;justify-content:center;padding:0;background:#20333c;color:var(--bright);font-size:21px}.bottom-note{color:#6f878b;font-size:8px;line-height:1.8}.metricgrid{display:grid;grid-template-columns:1fr 1fr;gap:23px 6px;margin-top:26px}.metricgrid>div{display:flex;flex-direction:column}.metricgrid span,.metricgrid small{font:600 9px 'Space Grotesk';letter-spacing:1px;color:#94a7a8}.metricgrid strong{font:600 32px 'Space Grotesk';letter-spacing:-1px;margin:3px 0 0}.metricgrid small{color:#617e83;font-size:9px;letter-spacing:0}.divider-thin{height:1px;background:var(--edge);margin:22px 0}.maphead{display:flex;justify-content:space-between;gap:5px;font-size:8px;color:#d2ddd7;margin-bottom:10px}.mapcursor{color:#7e9599;letter-spacing:.6px;font-size:8px}#minimap{display:block;max-width:100%;width:100%;height:auto;border:1px solid #354d57;background:#1d333f;cursor:crosshair}.live-row{display:flex;justify-content:space-between;align-items:center;gap:4px;font:600 9px 'Space Grotesk';color:#90aab0;margin-top:15px;white-space:nowrap}.live-dot{display:inline-block;background:#6cb9a2;width:5px;height:5px;border-radius:50%;box-shadow:0 0 7px #6cb9a2;margin-right:5px}.controlhint{position:absolute;left:50%;transform:translateX(-50%);bottom:37px;display:flex;align-items:center;gap:11px;font:500 10px 'Space Grotesk';letter-spacing:.6px;color:#d0dcda;white-space:nowrap;text-shadow:0 1px 4px #111}.key{border:1px solid rgba(201,217,212,.4);padding:5px 6px;background:rgba(17,36,43,.75);font-size:9px}.bottomlegend{position:absolute;bottom:15px;left:22px;right:22px;display:flex;justify-content:space-between;color:rgba(216,220,213,.6);font-size:8px}.bottomlegend span:first-child{max-width:45%}#loading{z-index:25;position:absolute;inset:0;background:#0c1b24;display:grid;place-items:center;text-align:center}#loading[hidden]{display:none}.loading-inner{width:min(400px,calc(100vw - 55px))}.logo-large{font:600 61px 'Space Grotesk';letter-spacing:-8px;margin-bottom:33px}.loading-kicker{font:600 10px 'Space Grotesk';letter-spacing:3px;color:var(--accent)}#loading h2{font:600 19px 'Space Grotesk';letter-spacing:1px;margin:18px 0}.loadbar{height:2px;background:#273f4a;width:100%;margin:26px 0 15px}.loadbar div{height:100%;width:8%;background:var(--accent);transition:width .5s}#loadText{font-size:11px;color:#799096}#error{z-index:35;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);max-width:540px;background:#213540;border:1px solid #b37965;padding:40px;line-height:1.75}#error[hidden]{display:none}#error h2{font-size:25px;color:#f3ca9c}@media(max-width:1040px){.infopanel{width:235px}.controlpanel{width:265px;padding:16px}.controlpanel h2{font-size:30px}.brandcopy .thin{display:none}.controlhint{bottom:40px}}@media(max-width:740px){.topbar{height:67px;padding:0 12px;gap:9px}.brandmark{width:36px;height:36px}.brandcopy h1{font-size:13px}.eyebrow{font-size:7px}.topright{gap:7px}.status{font-size:7px}.controlpanel{top:auto;bottom:38px;left:7px;width:calc(100% - 14px);max-height:225px;padding:12px 15px;border-radius:2px}.controlpanel h2,.intro,.worldtag,.infopanel,.controlhint{display:none}.controlpanel .line{margin:10px 0}.controlpanel .panel-kicker{font-size:8px}.section-label{font-size:8px;margin-bottom:8px}.controlpanel select{padding:6px}.controlpanel .btn{height:30px}.controlpanel .bottom-note,.range-end{display:none}.bottomlegend{bottom:10px;left:10px;right:10px;font-size:7px}}
