@font-face {
  font-family: 'QuizChain Display';
  src: url('/landing-assets/cormorant-garamond.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
:root { color-scheme: dark; background: #030817; font-family: 'Segoe UI', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  color: #d2d2e1;
  background: radial-gradient(ellipse at 76% 57%, #10152e66, transparent 42%),
    radial-gradient(ellipse at 18% 95%, #17113933, transparent 45%), #030817;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
canvas { display: block; pointer-events: none; }
#space { position: fixed; inset: 0; width: 100%; height: 100%; }
.landing-page { display: flex; flex-direction: column; min-height: 100svh; }
.landing { position: relative; flex: 1; width: min(100%, 1680px); margin: 0 auto; isolation: isolate; }
.intro { position: relative; z-index: 2; width: 70%; padding: clamp(72px, 12svh, 150px) 0 40px 8%; pointer-events: none; }
h1 {
  margin: 0 0 18px -6px;
  width: max-content;
  font-family: 'QuizChain Display', 'Baskerville', 'Times New Roman', serif;
  font-weight: 400;
  font-size: clamp(136px, calc(10vw + 64px), 224px);
  line-height: 1.08;
  letter-spacing: -.065em;
  background: linear-gradient(112deg, #b8edff 3%, #8ae9f4 28%, #d2ccff 61%, #b697eb 94%);
  color: #c1d9f7;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px #56c8ff25);
}
.coming { margin: 18px 0 0; font-family: 'QuizChain Display', 'Baskerville', serif; font-size: clamp(34px, 3.4vw, 52px); font-weight: 400; color: #c1bad9; letter-spacing: .005em; }
.period { color: #ad9ed6; }
.features { list-style: none; margin: clamp(32px, 5svh, 56px) 0 0; padding: 0; width: min(100%, 660px); }
.features li { position: relative; padding: 11px 0 11px 34px; font-size: clamp(20px, 1.9vw, 30px); font-weight: 350; letter-spacing: -.018em; line-height: 1.55; text-wrap: pretty; }
.features li::before { content: ''; position: absolute; left: 0; top: calc(11px + .775em - 5.5px); width: 11px; height: 11px; border-radius: 50%; background: #a573ec; box-shadow: 0 0 9px #a671ec80, inset 0 0 3px #f7daff88; }
.features li:nth-child(even)::before { background: #79cde9; box-shadow: 0 0 9px #71d2f080, inset 0 0 3px #e4fbff88; }
.magic { position: absolute; top: 25%; right: 8%; width: 44%; height: 73%; z-index: 1; }
#river { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-wand { position: absolute; height: 100%; width: auto; left: 48%; top: 0; transform: translateX(-50%) rotate(16deg); transform-origin: 50% 50%; object-fit: contain; filter: drop-shadow(0 0 15px #69c3ff33); user-select: none; }
#stardust { position: fixed; inset: 0; z-index: 6; width: 100%; height: 100%; }
#cursor-wand { display: none; position: fixed; top: 0; left: 0; z-index: 7; height: 68px; width: auto; pointer-events: none; transform-origin: 50% 6%; filter: drop-shadow(0 0 4px #7edbff99); }
.page-footer { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 1680px); margin: 0 auto; padding: 16px 8% max(24px, env(safe-area-inset-bottom)); }
.legal-links { display: flex; gap: 12px; font-size: 11px; color: #686a87; }
.legal-links a { color: #9294ae; text-decoration: none; }
.legal-links a:hover, .legal-links a:focus-visible { color: #d3d2ec; text-decoration: underline; }
.legal-page main { max-width: 800px; margin: auto; padding: 60px 24px; }
.legal-page h1 { width: auto; font: 38px/1.2 'Baskerville', Georgia, serif; letter-spacing: 0; margin: 35px 0; -webkit-text-fill-color: #d6daf0; filter: none; }
.legal-copy { white-space: pre-wrap; font: 16px/1.8 system-ui, sans-serif; }
.legal-page a { color: #b5d7f7; }
@media (hover: hover) and (pointer: fine) {
  .wand-cursor, .wand-cursor * { cursor: none; }
  .wand-cursor #cursor-wand { display: block; }
}
@media (min-width: 701px) and (max-width: 1000px) {
  .magic { top: 32%; height: 65%; right: 4%; width: 46%; }
  .hero-wand { left: 50%; }
}
@media (max-width: 700px) {
  .intro { width: 100%; padding: clamp(48px, 10svh, 90px) 8% 28px; }
  h1 { font-size: min(21.5vw, 154px); margin-left: -2px; letter-spacing: -.06em; white-space: nowrap; }
  .coming { font-family: 'Segoe UI', system-ui, sans-serif; font-size: clamp(25px, 6vw, 34px); margin-top: 25px; font-weight: 350; letter-spacing: -.04em; color: #d0cfe0; }
  .features { margin-top: clamp(32px, 5svh, 48px); width: 68%; }
  .features li { font-size: clamp(14px, 3.5vw, 19px); padding: 19px 0 19px 25px; min-height: 70px; border-bottom: 1px solid #a29bc922; }
  .features li:last-child { border: 0; }
  .features li::before { width: 10px; height: 10px; top: 26px; }
  .magic { width: 44%; height: calc(100% - 230px); top: 230px; right: 5%; overflow: clip; }
  .hero-wand { height: 86%; top: 7%; left: 62%; transform: translateX(-50%) rotate(8deg); }
  .page-footer { padding-inline: 8%; }
}
@media (max-width: 370px) {
  .features { width: 70%; }
  .magic { right: 4%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }