:root{
  color-scheme:dark;
  --bg:#070704;
  --surface:#0b0b06;
  --text:#e9e2c8;
  --muted:#8d876f;
  --faint:#575342;
  --amber:#d2b36d;
  --line:rgba(210,179,109,.22);
  --line-strong:rgba(210,179,109,.48);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg)}
body{min-height:100svh;overflow:hidden;color:var(--text);font-family:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace}
button,a{font:inherit;color:inherit}
button{border:0}
.observatory{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:var(--bg);isolation:isolate}
.observatory::before{content:"";position:absolute;inset:12px;border:1px solid rgba(210,179,109,.08);pointer-events:none}
.masthead{position:absolute;z-index:4;top:clamp(24px,4.5vh,52px);left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}
.series,.readout-kicker,.mode-hint,.footer,.mode-button,.loading{letter-spacing:.14em;text-transform:uppercase}
.series{margin:0 0 8px;color:var(--muted);font-size:10px}
h1{margin:0;font-size:clamp(21px,2.4vw,34px);font-weight:500;letter-spacing:.04em}
.live-status{display:flex;align-items:center;gap:8px;margin-top:2px;color:var(--muted);font-size:10px;letter-spacing:.12em}
.live-dot{width:6px;height:6px;border:1px solid var(--amber);border-radius:50%;box-shadow:0 0 9px rgba(210,179,109,.55)}
.live-dot.is-live{background:var(--amber)}
.live-dot.is-error{border-color:var(--faint);box-shadow:none}
.stage{position:absolute;inset:0;display:grid;place-items:center}
#globe{display:block;width:min(68vw,68vh,760px);height:min(68vw,68vh,760px);max-width:calc(100vw - 40px);max-height:calc(100svh - 220px);touch-action:none;cursor:default}
#globe.is-manual{cursor:grab}
#globe.is-manual:active{cursor:grabbing}
.observation-markers{position:absolute;width:min(72vw,72vh,800px);height:min(72vw,72vh,800px);max-width:calc(100vw - 28px);max-height:calc(100svh - 204px);pointer-events:none}
.marker{position:absolute;background:var(--line)}
.marker-top,.marker-bottom{left:50%;width:1px;height:12px}
.marker-top{top:0}.marker-bottom{bottom:0}
.marker-left,.marker-right{top:50%;width:12px;height:1px}
.marker-left{left:0}.marker-right{right:0}
.loading{position:absolute;z-index:6;left:50%;top:50%;display:flex;align-items:center;gap:12px;transform:translate(-50%,-50%);padding:11px 14px;color:var(--muted);background:rgba(7,7,4,.82);border:1px solid rgba(210,179,109,.16);font-size:9px;pointer-events:none;transition:opacity .45s ease,visibility .45s ease}
.loading.is-hidden{opacity:0;visibility:hidden}
.loading-ring{width:14px;height:14px;border:1px solid rgba(210,179,109,.18);border-top-color:var(--amber);border-radius:50%;animation:loading-spin 1.1s linear infinite}
@keyframes loading-spin{to{transform:rotate(360deg)}}
.view-mode{position:absolute;z-index:5;right:clamp(24px,5vw,72px);bottom:clamp(74px,9vh,104px);display:flex;gap:6px}
.mode-button{padding:7px 9px;background:transparent;color:var(--faint);border:1px solid rgba(210,179,109,.14);font-size:8px;cursor:pointer}
.mode-button:hover,.mode-button:focus-visible{color:var(--text);border-color:var(--line-strong);outline:none}
.mode-button.is-active{color:var(--amber);border-color:var(--line-strong);background:rgba(210,179,109,.06)}
.mode-hint{position:absolute;left:50%;bottom:clamp(118px,15vh,160px);margin:0;transform:translateX(-50%);color:var(--faint);font-size:9px;pointer-events:none}
.readout{position:absolute;z-index:4;left:clamp(24px,5vw,72px);bottom:clamp(66px,8vh,92px);width:min(520px,calc(100vw - 48px));pointer-events:none}
.readout-kicker{margin:0 0 10px;color:var(--faint);font-size:9px}
.readout-main{display:flex;align-items:baseline;gap:14px;min-width:0}
.readout-main strong{flex:none;color:var(--amber);font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-.04em}
.readout-main span{overflow:hidden;color:var(--text);font-size:clamp(12px,1.35vw,16px);text-overflow:ellipsis;white-space:nowrap}
.readout-meta{display:flex;gap:18px;margin-top:9px;color:var(--muted);font-size:9px;letter-spacing:.08em}
.footer{position:absolute;z-index:4;left:clamp(24px,5vw,72px);right:clamp(24px,5vw,72px);bottom:24px;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:20px;color:var(--faint);font-size:8px}
.footer p{margin:0;text-align:center}.footer a{text-decoration:none;border-bottom:1px solid transparent}.footer a:hover,.footer a:focus-visible{color:var(--text);border-color:currentColor}.counter{justify-self:start}.back-link{justify-self:end}
@media (max-width:720px){
  .observatory{min-height:540px}.observatory::before{inset:8px}.masthead{top:max(20px,env(safe-area-inset-top));left:20px;right:20px}.series{font-size:8px}h1{font-size:22px}.live-status{font-size:8px}
  #globe{width:min(92vw,58vh);height:min(92vw,58vh);max-width:none;max-height:none;transform:translateY(-3vh)}
  .observation-markers{width:min(96vw,62vh);height:min(96vw,62vh);max-width:none;max-height:none;transform:translateY(-3vh)}
  .loading{font-size:8px}.view-mode{right:20px;bottom:88px}.mode-button{padding:6px 7px;font-size:7px}.mode-hint{bottom:170px;font-size:8px}
  .readout{left:20px;bottom:84px;width:calc(100vw - 40px);padding-right:150px}.readout-main{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px}.readout-main strong{font-size:27px}.readout-main span{font-size:11px}.readout-meta{margin-top:6px;font-size:8px}
  .footer{left:20px;right:20px;bottom:max(16px,env(safe-area-inset-bottom));grid-template-columns:1fr auto;font-size:7px}.footer p{display:none}
}
@media (max-width:520px){.readout{padding-right:0;bottom:118px}.view-mode{left:20px;right:auto;bottom:78px}.mode-hint{bottom:174px}}
@media (prefers-reduced-motion:reduce){.loading-ring{animation-duration:2s}.loading{transition:none}}
