@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;600&family=Barlow:wght@400;500;600&display=swap');
:root{color-scheme:dark;--lime:#d8ec8b;--white:#edece6;--muted:#abaea7;--px:0px;--py:0px}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#101211;font-family:Barlow,Arial,sans-serif;color:var(--white)}button{font:inherit;color:inherit}#viewport{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(ellipse,#242320,#090b0a)}#frame{position:relative;width:min(100vw,177.7778vh);height:min(56.25vw,100vh);overflow:hidden;background:#b07855;isolation:isolate}#world{position:absolute;inset:0;overflow:hidden}.scene-layer{position:absolute;inset:-1.2%;will-change:transform}.terrain{transform:translate(calc(var(--px)*-.15),calc(var(--py)*-.15)) scale(1.015)}.settlement{mask-image:linear-gradient(transparent 20%,#000 45%,#000 75%,transparent 96%);transform:translate(calc(var(--px)*-.38),calc(var(--py)*-.28)) scale(1.015)}.foreground{mask-image:linear-gradient(transparent 65%,#000 92%);transform:translate(calc(var(--px)*-.75),calc(var(--py)*-.55)) scale(1.015)}.horizon-haze{position:absolute;inset:12% -15% 42%;background:radial-gradient(ellipse at 55% 30%,#f0b88925,transparent 65%);filter:blur(18px);animation:haze 28s ease-in-out infinite alternate;mix-blend-mode:screen}.sunlight{position:absolute;inset:0;background:radial-gradient(ellipse at 68% 0%,#fff0c629,transparent 55%);mix-blend-mode:screen;pointer-events:none}#atmosphere{position:absolute;inset:0;width:100%;height:100%;opacity:.7}.grade{position:absolute;inset:0;background:linear-gradient(180deg,#9c6b3210,transparent 40%,#7330050c);mix-blend-mode:soft-light}.vignette{position:absolute;inset:0;background:linear-gradient(0deg,#121411aa,transparent 25%,transparent 80%,#17191640),linear-gradient(90deg,#0d131250,transparent 32%);box-shadow:inset 0 0 90px #20170824;pointer-events:none}.topbar{position:absolute;inset:0 0 auto;height:8.4%;min-height:52px;display:flex;align-items:center;gap:3%;padding:0 2%;background:#191d1be8;border-bottom:1px solid #e6e4d326;backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:18px;flex:1}.planet{width:30px;height:30px;border-radius:50%;background:linear-gradient(130deg,#ef8a53,#b7432a 42%,#2a302a 85%);box-shadow:inset -7px -4px 10px #181d1a55}h1{font-weight:500;font-size:clamp(14px,1.3vw,24px);letter-spacing:.21em;white-space:nowrap;margin:0}h1 span{font-weight:400;color:#b5b8af}.location{font-family:'Barlow Condensed',sans-serif;font-size:clamp(12px,.95vw,18px);letter-spacing:.19em;white-space:nowrap}.location span{color:#676f66;margin:0 12px}.sol{display:grid;grid-template-columns:auto auto;gap:1px 20px;margin-left:auto;font-size:12px;letter-spacing:.18em}.sol small{font-size:10px;color:#9eaa9a}.sun-icon{grid-row:span 2;font-size:30px;color:#dfdfce;align-self:center}.status{position:absolute;left:2%;top:14%;width:145px;padding:16px 16px 0;background:linear-gradient(120deg,#1d2423ce,#19211e80);border:1px solid #d8e0d520;backdrop-filter:blur(16px);border-radius:3px;box-shadow:0 10px 35px #151c1620}.status-heading{font-size:10px;letter-spacing:.15em;white-space:nowrap;display:flex;align-items:center;gap:8px;color:#c1c7bc}.status-heading i,.condition i{width:4px;height:4px;background:var(--lime);display:inline-block;box-shadow:0 0 8px #d8ec8b50}.metric{display:flex;gap:12px;padding:17px 0;border-bottom:1px solid #ccd9c419}.metric:last-child{border:0}.symbol{width:18px;color:#d2d7ca;font-size:24px;line-height:27px}.metric>div{flex:1}.metric label{display:block;font-size:12px;color:#b6c0b3;letter-spacing:.06em}.metric strong{display:block;font-size:24px;font-weight:400;letter-spacing:.04em;margin-top:3px;font-family:'Barlow Condensed',sans-serif}.metric strong span{font-size:16px;margin-left:3px;color:#c8d1c1}.metric small{display:block;color:#bfce9e;font-size:9px;letter-spacing:.12em;margin-top:5px}.bar{height:2px;background:#8c9b824b;margin-top:9px}.bar:before{content:'';display:block;width:var(--value);height:100%;background:var(--lime)}.scene-caption{position:absolute;left:14%;bottom:15%;text-shadow:0 2px 25px #241c15}.eyebrow{font-size:10px;letter-spacing:.25em;color:#eee1cb}h2{font-size:clamp(20px,2.4vw,44px);font-weight:400;letter-spacing:-.015em;margin:8px 0 10px}.scene-caption p{font-size:10px;letter-spacing:.18em;color:#d9d4c5}.scene-caption p span{padding:0 12px;color:#dbe9a9}.condition{position:absolute;right:2.5%;bottom:15%;font-size:10px;letter-spacing:.15em}.condition i{margin-right:8px}.condition span{display:block;font-size:9px;letter-spacing:.13em;color:#cac8b8;margin-top:9px;padding-left:15px}.bottom{position:absolute;inset:auto 0 0;height:9%;min-height:55px;background:#191e1bed;border-top:1px solid #d4d9c529;display:flex;align-items:center;padding:0 2%;gap:24px;backdrop-filter:blur(10px)}.sector{display:flex;align-items:center;gap:15px;font-size:12px;letter-spacing:.17em}.sector-number{font-family:'Barlow Condensed',sans-serif;font-size:34px;color:#89927f;border-right:1px solid #7a866c55;padding-right:17px}.sector small{display:block;font-size:9px;letter-spacing:.2em;color:#969f8e;margin-top:5px}.view-label{margin:auto;font-size:10px;letter-spacing:.22em;color:#afb7a5;display:flex;align-items:center;gap:12px}.view-label>span{width:22px;height:2px;background:var(--lime)}.controls{display:flex;gap:8px}button{border:1px solid #c7d0b626;background:#c5d2ba05;border-radius:3px;height:36px;padding:0 13px;cursor:pointer;transition:background .2s,border-color .2s;font-size:18px}button span{font-size:10px;letter-spacing:.14em;margin-left:7px;vertical-align:2px}button:hover{background:#d8ec8b13;border-color:#d8ec8b80}button:focus-visible{outline:2px solid var(--lime);outline-offset:4px}.topbar,.status,.scene-caption,.condition,.bottom{transition:opacity .65s,transform .65s}.cinema .topbar,.cinema .status,.cinema .scene-caption,.cinema .condition,.cinema .bottom{opacity:0;pointer-events:none;visibility:hidden}.cinema-signature{position:absolute;bottom:5%;left:3%;font-size:12px;letter-spacing:.28em;opacity:0;transition:opacity .8s;text-shadow:0 2px 12px #000}.cinema-signature span{display:block;font-size:10px;color:#d9d4c5;margin-top:9px;letter-spacing:.2em}#exit-cinema{position:absolute;right:3%;bottom:5%;opacity:0;visibility:hidden;background:#18201988}.cinema .cinema-signature,.cinema #exit-cinema{opacity:1;visibility:visible}.paused .horizon-haze{animation-play-state:paused}@keyframes haze{from{transform:translateX(-3%);opacity:.6}to{transform:translateX(3%);opacity:1}}@media(max-width:1100px){.status{width:124px;padding:12px;top:13%}.metric{padding:10px 0;gap:8px}.metric strong{font-size:20px}.status-heading{font-size:8px}.scene-caption{left:17%}.location{display:none}.view-label{display:none}.controls{margin-left:auto}}@media(max-width:760px){.topbar{min-height:38px}.planet{width:22px;height:22px}.brand{gap:10px}h1{font-size:12px;letter-spacing:.12em}h1 span{display:none}.sol{font-size:10px;gap:0 8px}.sol small{font-size:8px}.sun-icon{font-size:22px}.status{display:none}.scene-caption{left:4%;bottom:23%}h2{font-size:22px}.eyebrow,.scene-caption p{font-size:8px}.condition{display:none}.bottom{min-height:42px}.sector{font-size:10px;gap:9px}.sector small{font-size:7px}.sector-number{font-size:25px;padding-right:8px}button{height:30px;padding:0 9px}button span{font-size:8px}.controls{gap:5px}.cinema-signature{font-size:10px}}@media(prefers-reduced-motion:reduce){.horizon-haze{animation:none}.scene-layer{will-change:auto}.topbar,.status,.scene-caption,.condition,.bottom{transition:none}}