:root{
  --bg:#05070b;
  --ink:#f4f7ff;
  --accent:#9fc7ff;
}
*{box-sizing:border-box}
html{height:100%;background:var(--bg)}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#030509 0%,#070a11 100%);
  height:100vh;height:100dvh;
  display:grid;grid-template-rows:minmax(0,1fr);
  overflow:hidden;
}
main{min-height:0;height:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
.stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

header{
  position:absolute;top:0;left:0;right:0;z-index:12;
  height:calc(var(--header-height) + env(safe-area-inset-top,0px));display:flex;align-items:center;justify-content:space-between;
  padding-top:env(safe-area-inset-top,0px);
}
.brand{display:flex;align-items:center}
.brand-mark{position:relative}
nav{display:flex;align-items:center;gap:34px;color:#c0c9d8;font-size:13px;letter-spacing:.04em}
.nav-cta{display:inline-flex;align-items:center}
.hero{isolation:isolate;height:100%;min-height:0;flex-direction:column;align-items:center}

.planet-window{flex:1 0 auto}
.planet-stage{z-index:3;aspect-ratio:1;touch-action:pan-y pinch-zoom;user-select:none;cursor:grab}
.planet-stage.dragging{cursor:grabbing}
#planet{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:50%;outline:none}
.planet-fallback{position:absolute;inset:0;display:none;background:url("../assets/earth/earth-fallback.webp") center / contain no-repeat}
.planet-fallback.on{display:block}
.planet-stage.is-static{cursor:default}

footer{position:absolute;z-index:9;inset:auto 0 0;padding:0 max(clamp(22px,4.6vw,72px),env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(clamp(22px,4.6vw,72px),env(safe-area-inset-left,0px));background:transparent;border:0;pointer-events:none}
footer a{pointer-events:auto}
.footer-meta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 20px;margin:0;color:#7f8a9b;font-size:11px;line-height:1.65;letter-spacing:.02em}
.footer-entity{color:#a9bcda;font-weight:700}
.footer-copyright{white-space:nowrap}
.footer-github{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;margin:-5px 0;vertical-align:middle}
.footer-github svg{display:block;width:16px;height:16px;fill:currentColor}
.footer-icp:hover,.footer-icp:focus-visible{text-decoration:underline;text-underline-offset:3px}

@media (max-width:620px){
  .nav-cta{white-space:nowrap}
  .planet-window{flex:none}
  footer{padding:0 16px calc(20px + env(safe-area-inset-bottom,0px))}
  .footer-meta{flex-direction:column;flex-wrap:nowrap;text-align:center;gap:3px}
}