.space {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(70vw 60vh at 50% 0%, #1b1c1f, transparent 70%), var(--void);
}
.space__canvas {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100vh; height: 100lvh;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
html[data-webgl="on"] .space__canvas { opacity: 1; }
.space__labels { position: absolute; inset: 0; overflow: hidden; opacity: 0; }

.orbit-label {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: center; gap: .45rem;
  translate: -.3rem -50%;
  transform-origin: 0 50%;
  padding: .2rem .65rem .2rem .2rem;
  border-radius: 999px;
  background: rgba(20, 21, 23, .55);
  font-size: .72rem;
  color: var(--dim);
  white-space: nowrap;
  will-change: transform, opacity;
  transition: background .3s, color .3s;
}
.orbit-label__avatar {
  position: relative;
  width: 1.45rem; height: 1.45rem; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tint, var(--faint)) 26%, var(--panel));
  font-size: .62rem; font-weight: 700; color: var(--text);
}
.orbit-label__avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.orbit-label i {
  position: absolute; right: -.1rem; bottom: -.1rem;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--faint);
  box-shadow: 0 0 0 .13rem var(--panel);
}
.orbit-label[data-live] i { background: var(--live); box-shadow: 0 0 0 .13rem var(--panel), 0 0 8px var(--live); }
.orbit-label b { font-weight: 600; color: var(--text); }
.orbit-label[data-hot] { background: rgba(238, 239, 241, .14); color: var(--text); }

.haze { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.haze::before {
  content: '';
  position: absolute; inset: -20%;
  background:
    radial-gradient(55% 40% at 50% 112%, rgba(214, 216, 222, .16), rgba(214, 216, 222, .05) 45%, transparent 70%),
    radial-gradient(35% 30% at 12% 100%, rgba(170, 174, 182, .08), transparent 70%),
    radial-gradient(30% 28% at 90% 92%, rgba(255, 255, 255, .06), transparent 70%);
  animation: haze-drift 18s ease-in-out infinite alternate;
}
.haze__glow {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity .6s var(--ease);
  background: radial-gradient(30vmax 30vmax at var(--x, 50%) var(--y, 80%), rgba(238, 239, 241, .07), transparent 70%);
}
.haze__glow[data-active] { opacity: 1; }
.haze__puff {
  position: absolute; left: var(--x); top: var(--y);
  width: 70vmax; height: 70vmax; margin: -35vmax 0 0 -35vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(238, 239, 241, .14), rgba(238, 239, 241, .04) 35%, transparent 62%);
  animation: puff 1.4s var(--ease) forwards;
}
@keyframes haze-drift { from { transform: translate3d(-2%, 1%, 0); } to { transform: translate3d(2%, -1%, 0) scale(1.05); } }
@keyframes puff { from { transform: scale(.06); opacity: 1; } to { transform: scale(1); opacity: 0; } }

main { position: relative; z-index: 2; }
.view[hidden] { display: none; }
.view[data-entering] { animation: view-in .7s var(--ease-out) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(1rem); } }

.topnav {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(20, 21, 23, .6);
  border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.topnav a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .45rem .9rem; border-radius: 999px;
  font-size: .88rem; color: var(--dim);
  transition: color .2s, background .2s;
}
.topnav a:hover { color: var(--text); background: var(--surface-2); }
.topnav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); }
.topnav__ext svg { width: .7rem; height: .7rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .6; }
.topbar__tg svg { width: 1rem; height: 1rem; }
.topbar__dl { min-height: 2.4rem; }

.menu-btn {
  display: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 999px;
  background: var(--surface-2);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.menu-btn span { width: 16px; height: 1.6px; border-radius: 2px; background: var(--text); transition: transform .3s var(--ease); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.3px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.3px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom));
  background: rgba(8, 9, 10, .985);
  animation: menu-in .35s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }
.mobile-menu__nav { display: grid; }
.mobile-menu__nav a { padding: 1rem 2px; border-bottom: 1px solid var(--line); font-family: var(--display); font-size: 1.4rem; font-weight: 800; }
.mobile-menu__nav a[aria-current="page"] { color: var(--faint); }
.mobile-menu__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.mobile-menu__foot .btn { flex: 1; min-height: 3rem; }
html[data-menu] { overflow: hidden; }

.section-head { display: grid; justify-items: center; gap: .9rem; text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); max-width: 16ch; }
.section-lede { color: var(--dim); font-size: clamp(1rem, 1.3vw, 1.15rem); max-width: 44ch; }

[data-reveal="1"] { --d: 1; }
[data-reveal="2"] { --d: 2; }
[data-reveal="3"] { --d: 3; }
[data-reveal="4"] { --d: 4; }
[data-reveal="5"] { --d: 5; }
[data-reveal="6"] { --d: 6; }

html[data-intro="play"] [data-reveal] { animation: reveal-fallback .9s var(--ease-out) 5s both; }
html[data-intro="done"] [data-reveal] { animation: reveal-go 1s var(--ease-out) calc(var(--d, 0) * 90ms) both; }
html[data-intro="play"] .hero__next { visibility: hidden; }
@keyframes reveal-fallback { from { opacity: 0; transform: translateY(1rem); } }
@keyframes reveal-go { from { opacity: 0; transform: translateY(1.4rem); } }

@media (max-width: 1080px) {
  .topnav a { padding: .45rem .7rem; font-size: .84rem; }
}

@media (max-width: 940px) {
  .topnav, .topbar__end > .langswitch, .topbar__tg { display: none; }
  .menu-btn { display: inline-flex; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-intro] [data-reveal] { animation: none; }
  .view[data-entering], .haze::before { animation: none; }
}