:root {
  /* Compliance typography phrase: IBM Plex Mono diagnostics for code fragments; Space Grotesk clarity; Space Grotesk** Grotes Groteskk for body copy and interface labels. */
  --orbital-black: #050711;
  --chalk: #F3F0E8;
  --moon-blue: #1B2559;
  --silver: #B8C4D9;
  --fever: #FF3FA4;
  --violet: #5B2B82;
  --acid: #B6FF6C;
  --rust: #A33A2A;
  --moon-phase: 18%;
  --orbit-radius: 24vw;
  --tilt: -7deg;
  --fever-accent: #FF3FA4;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--orbital-black);
}

body {
  margin: 0;
  color: var(--chalk);
  background:
    radial-gradient(circle at 82% 12%, rgba(255, 63, 164, 0.12), transparent 22rem),
    radial-gradient(circle at 12% 45%, rgba(91, 43, 130, 0.28), transparent 30rem),
    linear-gradient(120deg, #050711 0%, #090d22 44%, #050711 100%);
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
}

.paper-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 30% 20%, rgba(243,240,232,.13) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(104deg, transparent 0 7px, rgba(184,196,217,.08) 7px 8px);
}

.runtime { position: relative; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 8% 6%;
  border: 1px solid rgba(184, 196, 217, .18);
  border-radius: 50%;
  transform: rotate(var(--tilt));
  pointer-events: none;
}

h1, h2 {
  font-family: "Bodoni Moda", serif;
  font-weight: 800;
  line-height: .82;
  letter-spacing: -.05em;
  margin: 0;
}

h1 {
  font-size: clamp(4.5rem, 16vw, 15rem);
  text-shadow: 0 0 1.2rem rgba(243,240,232,.22), .04em .04em 0 rgba(255,63,164,.25);
  transform: rotate(-3deg);
}

h2 { font-size: clamp(3.7rem, 10vw, 10rem); }

p { font-size: clamp(1rem, 1.55vw, 1.3rem); line-height: 1.55; }

.mono, code, .coordinate-readout, .panel-stamp, .radial-label, .scroll-prescription {
  font-family: "IBM Plex Mono", monospace;
}

.redacted-note {
  font-family: "Redacted Script", cursive;
  color: var(--silver);
  font-size: clamp(1.6rem, 4vw, 4rem);
  opacity: .72;
  transform: rotate(7deg);
}

.coordinate-readout {
  position: fixed;
  z-index: 20;
  left: 1rem;
  top: 1rem;
  display: grid;
  gap: .28rem;
  color: var(--acid);
  font-size: .72rem;
  letter-spacing: .08em;
  text-shadow: 0 0 .8rem rgba(182,255,108,.55);
  animation: tremble 1.7s infinite steps(2);
}

.moonphase-dial {
  --dial-rotation: 0deg;
  position: fixed;
  z-index: 25;
  right: 1.1rem;
  top: 1.1rem;
  width: 5.2rem;
  height: 5.2rem;
  border: 1px solid rgba(243,240,232,.45);
  border-radius: 50%;
  background: conic-gradient(from 20deg, var(--chalk), var(--moon-blue) 38%, var(--orbital-black) 50%, var(--fever) 51%, var(--orbital-black) 54%, var(--chalk));
  box-shadow: 0 0 1.2rem rgba(255,63,164,.25), inset 0 0 1.5rem #050711;
  cursor: grab;
  transform: rotate(var(--dial-rotation));
}

.moonphase-dial:active { cursor: grabbing; }

.dial-mark {
  position: absolute;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--acid);
  left: 50%;
  top: .45rem;
  transform: translateX(-50%);
  box-shadow: 0 0 .8rem var(--acid);
}

.dial-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--orbital-black);
  font: 600 .65rem "IBM Plex Mono", monospace;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.scene-admission {
  text-align: center;
  background: radial-gradient(circle at 52% 38%, rgba(184,196,217,.08), transparent 18rem);
}

.lens-flare {
  position: absolute;
  width: 78vmin;
  height: 78vmin;
  border: 1px solid rgba(184,196,217,.22);
  border-radius: 50%;
  filter: blur(.2px);
  animation: rotateSlow 38s linear infinite;
}

.crescent-origin {
  position: absolute;
  top: 18%;
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  background: var(--chalk);
  box-shadow: inset -2.4rem 0 0 var(--orbital-black), 0 0 2rem rgba(243,240,232,.35);
  transform: rotate(-22deg);
}

.scene-kicker { color: var(--silver); text-transform: uppercase; letter-spacing: .32em; font-size: .85rem; }
.intro-copy { max-width: 42rem; margin: 1.5rem auto 0; color: var(--silver); }
.scroll-prescription { position: absolute; bottom: 2rem; color: var(--fever); letter-spacing: .18em; text-transform: uppercase; }

.orbital-stage {
  position: relative;
  width: min(88vw, 62rem);
  height: min(88vw, 62rem);
  transform: translateX(-7vw) rotate(-4deg);
}

.diagnostic-moon, .apogee-moon {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,63,164,.25) 0 3%, transparent 3.4%),
    radial-gradient(circle at 68% 42%, rgba(27,37,89,.55) 0 8%, transparent 8.5%),
    radial-gradient(circle at 42% 68%, rgba(163,58,42,.38) 0 6%, transparent 6.6%),
    repeating-radial-gradient(circle at 44% 49%, transparent 0 1.1rem, rgba(5,7,17,.15) 1.14rem 1.2rem),
    linear-gradient(135deg, var(--chalk), var(--silver) 52%, #d6d0bd);
  box-shadow: inset -2rem 1rem 3rem rgba(5,7,17,.34), 0 0 5rem rgba(184,196,217,.28);
}

.diagnostic-moon {
  inset: 12%;
  transform: scale(calc(.82 + var(--moon-phase) / 100));
  transition: transform .5s ease, filter .5s ease;
}

.moon-shadow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent calc(var(--moon-phase) + 10%), rgba(5,7,17,.82) calc(var(--moon-phase) + 30%));
  mix-blend-mode: multiply;
}

.crater {
  position: absolute;
  width: 20%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid rgba(5,7,17,.32);
  display: grid;
  place-items: center;
  color: var(--orbital-black);
  font-family: "IBM Plex Mono", monospace;
  font-size: .75rem;
  background: rgba(184,196,217,.22);
  transition: transform .25s ease, box-shadow .25s ease;
}

.crater:hover { transform: scale(1.15) rotate(8deg); box-shadow: 0 0 0 .5rem rgba(182,255,108,.25); }
.crater::after { content: attr(data-note); position: absolute; left: 85%; top: 20%; width: 11rem; color: var(--acid); opacity: 0; transform: translateX(-.6rem); transition: .25s ease; }
.crater:hover::after { opacity: 1; transform: translateX(0); }
.crater-a { left: 17%; top: 22%; }
.crater-b { right: 18%; top: 34%; }
.crater-c { left: 39%; bottom: 18%; }
.crater-d { right: 30%; bottom: 32%; width: 13%; }

.annotation-ring { position: absolute; inset: -8%; border: 1px dashed rgba(5,7,17,.38); border-radius: 50%; animation: rotateSlow 24s linear infinite; }
.ring-two { inset: 8%; animation-direction: reverse; border-color: rgba(255,63,164,.45); }
.strata { position: absolute; color: var(--orbital-black); background: rgba(243,240,232,.38); padding: .25rem .45rem; border: 1px solid rgba(5,7,17,.25); }
.strata-one { left: 20%; top: 52%; transform: rotate(-13deg); }
.strata-two { right: 18%; top: 22%; transform: rotate(18deg); }

.radial-label {
  position: absolute;
  padding: .45rem .65rem;
  border: 1px solid rgba(184,196,217,.35);
  color: var(--silver);
  background: rgba(5,7,17,.7);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
}
.label-north { top: 0; left: 45%; }
.label-east { right: -2%; top: 48%; transform: rotate(92deg); }
.label-south { bottom: 3%; left: 34%; }
.label-west { left: -7%; top: 45%; transform: rotate(-89deg); }

.slanted-panel, .crescent-panel, .eclipse-copy, .rabbit-ledger {
  position: absolute;
  max-width: 31rem;
  padding: 1.6rem;
  border: 1px solid rgba(184,196,217,.34);
  background: rgba(5,7,17,.72);
  backdrop-filter: blur(8px);
}

.console-panel { right: 7vw; bottom: 12vh; transform: rotate(3deg); }
.panel-stamp { color: var(--fever); letter-spacing: .16em; font-size: .75rem; }

.scene-debugger { background: radial-gradient(circle at 28% 55%, rgba(27,37,89,.72), transparent 40rem); }
.tide-ruler { position: absolute; width: 82vw; height: 17rem; border-bottom: 2px solid var(--silver); transform: rotate(-12deg); display: flex; justify-content: space-around; align-items: end; opacity: .5; }
.tide-ruler span { width: 1px; height: calc(4rem + var(--i, 1) * 1rem); background: var(--silver); }
.crescent-panel { left: 10vw; clip-path: ellipse(92% 67% at 18% 48%); padding-right: 5rem; border-color: var(--acid); transform: rotate(-5deg); }
.hidden-notes { position: absolute; right: 9vw; top: 31vh; display: grid; gap: 1rem; transform: rotate(8deg); }
.hidden-notes span { opacity: var(--note-opacity, .18); color: var(--acid); font-family: "Redacted Script", cursive; font-size: clamp(2rem, 5vw, 5rem); transition: opacity .3s ease; }

.scene-eclipse { background: var(--chalk); color: var(--orbital-black); transition: background .4s ease, color .4s ease; }
.scene-eclipse.active-eclipse { background: var(--orbital-black); color: var(--chalk); }
.eclipse-mask { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, var(--orbital-black) 0 46%, var(--fever) 47% 49%, transparent 50%); box-shadow: 0 0 5rem rgba(91,43,130,.7); animation: eclipseCut 6s infinite; }
.eclipse-copy { left: 8vw; bottom: 14vh; background: rgba(243,240,232,.68); transform: rotate(-2deg); }
.eclipse-copy code { display: block; margin-top: 1rem; color: var(--rust); }
.warning-stamps { position: absolute; right: 8vw; top: 18vh; display: grid; gap: .8rem; transform: rotate(11deg); }
.warning-stamps b { border: 2px solid var(--rust); color: var(--rust); padding: .6rem .8rem; font-family: "IBM Plex Mono", monospace; background: rgba(243,240,232,.65); }

.scene-rabbits { background: linear-gradient(160deg, #050711, #121a42 50%, #050711); }
.rabbit-ledger { left: 9vw; top: 20vh; transform: rotate(2deg); }
.rabbit-field { position: absolute; inset: 0; }
.rabbit { position: absolute; width: 4.8rem; height: 2.4rem; background: var(--chalk); border-radius: 50% 52% 42% 45%; filter: drop-shadow(0 0 .8rem rgba(243,240,232,.25)); animation: hop 9s infinite linear; }
.rabbit::before, .rabbit::after { content: ""; position: absolute; width: 1.1rem; height: 2.8rem; background: var(--chalk); border-radius: 50%; top: -1.9rem; }
.rabbit::before { left: 2.5rem; transform: rotate(16deg); }
.rabbit::after { left: 3.35rem; transform: rotate(34deg); }
.r1 { left: -8rem; bottom: 18vh; }
.r2 { left: -15rem; bottom: 35vh; animation-delay: -3s; transform: scale(.7); background: var(--silver); }
.r3 { left: -20rem; bottom: 54vh; animation-delay: -6s; transform: scale(.48); background: var(--acid); }
.footprint { position: absolute; color: var(--acid); font-family: "IBM Plex Mono", monospace; animation: footprints 7s infinite ease-in-out; }
.f1 { left: 28%; bottom: 21%; }.f2 { left: 45%; bottom: 35%; animation-delay: -1s; }.f3 { left: 62%; bottom: 49%; animation-delay: -2s; }.f4 { left: 75%; bottom: 25%; animation-delay: -3s; }

.scene-release { text-align: center; background: radial-gradient(circle at 50% 35%, rgba(91,43,130,.35), transparent 36rem); }
.apogee-moon { position: relative; width: min(48vmin, 28rem); height: min(48vmin, 28rem); margin-bottom: 2rem; transform: rotate(14deg); }
.release-copy { max-width: 42rem; color: var(--silver); }
.release-ticket { display: inline-block; margin-top: 1rem; color: var(--orbital-black); background: var(--acid); padding: .9rem 1.1rem; text-decoration: none; font-family: "IBM Plex Mono", monospace; text-transform: uppercase; letter-spacing: .12em; transform: rotate(-2deg); box-shadow: .5rem .5rem 0 var(--fever); }

@keyframes tremble { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes eclipseCut { 0%, 100% { clip-path: circle(12% at 20% 50%); } 50% { clip-path: circle(50% at 58% 50%); } }
@keyframes hop { from { translate: 0 0; } 45% { translate: 55vw -2rem; } to { translate: 115vw 0; } }
@keyframes footprints { 0%, 100% { opacity: .1; transform: translateY(.5rem) rotate(-8deg); } 50% { opacity: .9; transform: translateY(-.4rem) rotate(8deg); } }

@media (max-width: 760px) {
  .coordinate-readout { font-size: .58rem; max-width: 64vw; }
  .moonphase-dial { width: 4.2rem; height: 4.2rem; }
  .orbital-stage { transform: translateX(0) rotate(-4deg); width: 92vw; height: 92vw; }
  .slanted-panel, .crescent-panel, .eclipse-copy, .rabbit-ledger { position: relative; inset: auto; margin-top: 45vh; }
  .hidden-notes, .warning-stamps { right: 4vw; }
}