@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');

:root {
  color-scheme: dark;
  --night: #100d12;
  --ink: #f4f0e8;
  --muted: #9c929e;
  --accent: #b08d57;
  --klein: #002fa7;
  --neon-blue: #39e7ff;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(ellipse at 52% 48%, #21121e 0%, var(--night) 64%); color: var(--ink); font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.page { width: min(100% - 72px, 1160px); min-height: 100svh; margin: 0 auto; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .09; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }
.topbar, footer { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.topbar { height: 84px; border-bottom: 1px solid rgba(237,233,223,.13); }
.wordmark { font-size: 18px; font-weight: 600; letter-spacing: -.08em; }
.wordmark span { color: var(--klein); text-shadow: 0 0 12px rgba(0,47,167,.95), 0 0 22px rgba(0,47,167,.65); }
.coordinates, .eyebrow, .margin-note, footer { font-family: 'DM Mono', monospace; }
.coordinates { color: var(--muted); font-size: 9px; letter-spacing: .07em; }
.universe { min-height: min(720px, calc(100svh - 150px)); flex: 1; position: relative; display: grid; place-items: center; isolation: isolate; }
.universe::before { content: ''; position: absolute; width: min(58vw, 650px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0,47,167,.24), rgba(57,231,255,.08) 38%, transparent 70%); filter: blur(18px); z-index: -2; }
.center { position: relative; z-index: 1; text-align: center; padding: 50px 20px; }
.eyebrow { margin: 0 0 27px; color: var(--accent); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 0 14px rgba(176,141,87,.42); }
h1 { margin: 0; font-size: clamp(57px, 9vw, 110px); line-height: .94; font-weight: 600; letter-spacing: -.085em; text-shadow: 0 3px 0 rgba(0,47,167,.3); }
h1 em { font-family: 'Playfair Display', serif; color: var(--klein); font-weight: 500; letter-spacing: -.07em; text-shadow: 0 0 28px rgba(0,47,167,.8); }
.caption { margin: 30px 0 0; color: #a5a297; font-size: 13px; line-height: 1.8; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(237,233,223,.14); border-radius: 50%; pointer-events: none; }
.orbit-one { width: min(66vw, 710px); aspect-ratio: 1; transform: translate(-50%,-50%) rotate(-22deg) scaleY(.44); border-color: rgba(176,141,87,.52); box-shadow: 0 0 14px rgba(176,141,87,.2), inset 0 0 12px rgba(176,141,87,.1); animation: drift 32s linear infinite; }
.orbit-two { width: min(82vw, 900px); aspect-ratio: 1; transform: translate(-50%,-50%) rotate(31deg) scaleY(.42); border-color: rgba(0,47,167,.8); box-shadow: 0 0 18px rgba(0,47,167,.32); animation: drift 47s linear infinite reverse; }
.orbit-three { width: min(48vw, 530px); aspect-ratio: 1; transform: translate(-50%,-50%) rotate(70deg) scaleY(.6); border-color: rgba(57,231,255,.24); animation: drift 38s linear infinite; }
.spark { position: absolute; color: var(--accent); text-shadow: 0 0 16px currentColor; }
.spark-one { top: 23%; left: 24%; font-size: 19px; }
.spark-two { top: 27%; right: 20%; font-size: 40px; color: var(--klein); transform: rotate(12deg); }
.spark-three { bottom: 21%; right: 29%; font-size: 13px; color: var(--neon-blue); }
.margin-note { position: absolute; top: 50%; color: #73736a; font-size: 9px; letter-spacing: .04em; }
.note-left { left: 2%; transform: rotate(-90deg) translateX(-50%); transform-origin: left; }
.note-right { right: 2%; transform: rotate(90deg) translateX(50%); transform-origin: right; }
footer { min-height: 66px; border-top: 1px solid rgba(237,233,223,.13); color: var(--muted); font-size: 9px; letter-spacing: .03em; }
footer a { color: var(--ink); }
footer a span, .asterisk { color: var(--klein); text-shadow: 0 0 10px rgba(0,47,167,.9); }
@keyframes drift { from { rotate: 0deg; } to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
@media (max-width: 620px) {
  .page { width: calc(100% - 40px); }
  .topbar { height: 68px; }
  .universe { min-height: calc(100svh - 130px); }
  .universe::before { width: 95vw; }
  .orbit-one { width: 100vw; }
  .orbit-two { width: 125vw; }
  .orbit-three { width: 76vw; }
  .margin-note { font-size: 8px; }
  .note-left { left: -2%; }
  .note-right { right: -2%; }
  .spark-one { left: 9%; }
  .spark-two { right: 8%; }
  .spark-three { right: 12%; }
}