:root {
  /* Interface microtype: Space Grotesk for HUD coordinates */
  /* Grotes */
  /* **Space Grotesk** */
  --font-audit-marker: "Grotesk**";
  --ink-night: #17132A;
  --paper-dawn: #FFF2C7;
  --neon-sakura: #FF4FA3;
  --electric-cyan: #32E6FF;
  --sunrise-acid: #E9FF4F;
  --cassette-violet: #7B5CFF;
  --soft-acetate: #CDEBFF;
  --chapter-hue: 0deg;
}

* { box-sizing: border-box; }

html {
  background: var(--ink-night);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 400vh;
  overflow-x: hidden;
  color: var(--paper-dawn);
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  background:
    radial-gradient(circle at 72% 12%, rgba(123, 92, 255, .34), transparent 28vw),
    radial-gradient(circle at 14% 82%, rgba(255, 79, 163, .22), transparent 35vw),
    linear-gradient(160deg, #17132A 0%, #221747 47%, #17132A 100%);
}

.rough-filter {
  position: absolute;
  width: 0;
  height: 0;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .2;
  background-image:
    repeating-radial-gradient(circle at 10% 20%, rgba(255, 242, 199, .16) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(100deg, rgba(205, 235, 255, .05) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
}

.cursor-ripple {
  position: fixed;
  width: 26px;
  height: 26px;
  left: 0;
  top: 0;
  pointer-events: none;
  border: 2px solid var(--neon-sakura);
  border-radius: 44% 56% 46% 54%;
  transform: translate(-50%, -50%) scale(.2);
  opacity: 0;
  z-index: 60;
  filter: drop-shadow(0 0 12px var(--neon-sakura));
}

.hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  filter: url(#roughInk);
}

.hud-pane {
  position: absolute;
  top: 24px;
  width: min(28vw, 330px);
  min-height: 116px;
  padding: 18px 20px;
  border: 1px solid rgba(50, 230, 255, .58);
  border-radius: 22px 18px 26px 17px;
  background: linear-gradient(135deg, rgba(205, 235, 255, .14), rgba(255, 242, 199, .05));
  backdrop-filter: blur(13px) saturate(1.45);
  box-shadow: 0 0 34px rgba(50, 230, 255, .18), inset 0 0 24px rgba(255, 242, 199, .05);
  animation: bounceBoot .9s cubic-bezier(.2,1.7,.4,1) both;
}

.hud-pane-left { left: 28px; transform: rotate(-1.1deg); }
.hud-pane-right { right: 28px; transform: rotate(1.2deg); animation-delay: .12s; }

.tech-label {
  display: block;
  color: var(--electric-cyan);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(50, 230, 255, .8);
}

.hand-note {
  display: block;
  margin-top: 8px;
  color: var(--paper-dawn);
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 23px;
  transform: rotate(-2deg);
}

.frequency-ladder {
  display: flex;
  gap: 10px;
  margin-top: 17px;
  align-items: end;
}

.frequency-ladder i {
  display: block;
  width: 2px;
  height: 28px;
  background: var(--electric-cyan);
  box-shadow: 0 0 11px var(--electric-cyan);
}
.frequency-ladder i:nth-child(2n) { height: 17px; background: var(--sunrise-acid); }
.frequency-ladder i:nth-child(3n) { height: 39px; background: var(--neon-sakura); }

.signal-bars { position: absolute; right: 22px; bottom: 18px; display: flex; gap: 5px; align-items: end; }
.signal-bars b { width: 9px; border-radius: 8px; background: var(--sunrise-acid); box-shadow: 0 0 12px var(--sunrise-acid); animation: barFlicker 1.7s infinite steps(2); }
.signal-bars b:nth-child(1) { height: 14px; }
.signal-bars b:nth-child(2) { height: 24px; animation-delay: .2s; }
.signal-bars b:nth-child(3) { height: 34px; animation-delay: .33s; }
.signal-bars b:nth-child(4) { height: 48px; animation-delay: .47s; }

.corner {
  position: absolute;
  width: 78px;
  height: 78px;
  border-color: var(--electric-cyan);
  filter: drop-shadow(0 0 10px var(--electric-cyan));
  animation: bounceBoot .75s cubic-bezier(.2,1.75,.42,1) both;
}
.c1 { top: 22px; left: 22px; border-top: 3px solid; border-left: 3px solid; }
.c2 { top: 22px; right: 22px; border-top: 3px solid; border-right: 3px solid; animation-delay: .08s; }
.c3 { bottom: 22px; left: 22px; border-bottom: 3px solid; border-left: 3px solid; animation-delay: .16s; }
.c4 { bottom: 22px; right: 22px; border-bottom: 3px solid; border-right: 3px solid; animation-delay: .24s; }

.dial {
  position: absolute;
  left: calc(50% - 92px);
  top: 28px;
  width: 184px;
  height: 184px;
  pointer-events: auto;
  cursor: grab;
  animation: dialDrop 1s cubic-bezier(.19,1.8,.35,1) both .22s;
}
.dial-ring {
  position: absolute;
  inset: 7px;
  border: 2px dashed rgba(50, 230, 255, .85);
  border-radius: 50%;
  box-shadow: 0 0 22px rgba(50, 230, 255, .45), inset 0 0 22px rgba(123, 92, 255, .28);
  animation: rotateDial 18s linear infinite;
}
.dial-cross::before, .dial-cross::after {
  content: "";
  position: absolute;
  left: 50%; top: 18px; bottom: 18px;
  width: 1px;
  background: rgba(255, 242, 199, .42);
}
.dial-cross::after { transform: rotate(90deg); }
.dial-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 62px; height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 44% 56%;
  display: grid; place-items: center;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: 22px;
  color: var(--ink-night);
  background: var(--sunrise-acid);
  box-shadow: 0 0 26px rgba(233, 255, 79, .55);
}

.ruler { position: absolute; left: 16vw; right: 16vw; height: 18px; opacity: .6; background: repeating-linear-gradient(90deg, transparent 0 17px, rgba(50,230,255,.75) 17px 19px); }
.ruler-top { top: 12px; }
.ruler-bottom { bottom: 12px; }

.broadcast-world {
  position: relative;
  min-height: 400vh;
  filter: hue-rotate(var(--chapter-hue));
  transition: filter .8s ease;
}

.notebook-grid {
  position: fixed;
  inset: 0;
  transform: skewX(-5deg) translateX(-2vw);
  opacity: .18;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(8.333vw - 1px), rgba(50, 230, 255, .55) calc(8.333vw - 1px) 8.333vw),
    repeating-linear-gradient(0deg, transparent 0 79px, rgba(205, 235, 255, .25) 79px 80px);
}

.stream-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}
.stream-path, .stream-glow {
  fill: none;
  stroke: var(--electric-cyan);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1900;
  stroke-dashoffset: 1900;
  filter: url(#roughInk) drop-shadow(0 0 13px rgba(50, 230, 255, .8));
  animation: drawStream 2.4s ease-out forwards .35s, streamWobble 5s ease-in-out infinite 2.7s;
}
.stream-glow { stroke: var(--neon-sakura); stroke-width: 12; opacity: .17; filter: blur(8px); }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: 25vh 8vw 12vh;
  z-index: 10;
  opacity: .35;
  transform: translate3d(0, 34px, 0) scale(.98);
  transition: opacity .55s ease, transform .8s cubic-bezier(.2,1.35,.35,1);
}
.chapter.active { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.chapter-two { padding-left: 28vw; }
.chapter-three { padding-left: 12vw; padding-top: 18vh; }
.chapter-four { padding-left: 16vw; }

.horizon {
  position: absolute;
  left: 0; right: 0; bottom: 16vh;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255,242,199,.5), rgba(50,230,255,.8), transparent);
  transform: rotate(-1deg);
}

.timestamp {
  margin: 0 0 18px;
  color: var(--electric-cyan);
  font-size: clamp(12px, 1.5vw, 18px);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(50, 230, 255, .6);
}

.wordmark, h2 {
  margin: 0;
  max-width: 980px;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(60px, 12vw, 180px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.07em;
  color: var(--paper-dawn);
  text-shadow: 3px 3px 0 var(--neon-sakura), -3px -2px 0 rgba(50, 230, 255, .75), 0 0 38px rgba(255, 79, 163, .25);
  animation: inkBreathe 4.5s ease-in-out infinite;
}
.wordmark span { display: block; color: var(--electric-cyan); font-style: italic; transform: translateX(7vw) rotate(-2deg); }
h2 { font-size: clamp(72px, 13vw, 170px); transform: rotate(-2deg); }

.transmission {
  width: min(620px, 72vw);
  margin: 28px 0 0 7vw;
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: clamp(25px, 3.1vw, 46px);
  line-height: 1.03;
  color: var(--paper-dawn);
  text-shadow: 0 0 18px rgba(255,242,199,.15);
}

.buoy, .marker-ray, .subtitle-strip, .margin-note, .memory-pane, .glyph, .sun-sliver {
  position: absolute;
  filter: url(#roughInk);
}

.buoy { width: 62px; height: 62px; opacity: 0; animation: buoyEnter .75s cubic-bezier(.22,1.8,.4,1) forwards; }
.circle { border: 4px solid var(--electric-cyan); border-radius: 48% 52% 42% 58%; background: rgba(50,230,255,.13); }
.triangle { width: 0; height: 0; border-left: 39px solid transparent; border-right: 39px solid transparent; border-bottom: 68px solid var(--sunrise-acid); filter: drop-shadow(0 0 14px var(--sunrise-acid)) url(#roughInk); }
.diamond { width: 58px; height: 58px; transform: rotate(45deg); border: 4px solid var(--neon-sakura); background: rgba(255,79,163,.16); }
.buoy-a { left: 19vw; top: 58vh; animation-delay: .7s; }
.buoy-b { left: 67vw; top: 31vh; animation-delay: .95s; }
.buoy-c { left: 82vw; top: 68vh; animation-delay: 1.13s; }
.buoy-d { right: 18vw; top: 58vh; animation-delay: .2s; }
.buoy-e { left: 12vw; top: 38vh; animation-delay: .35s; }

.sun-sliver { right: 13vw; bottom: 22vh; width: 210px; height: 74px; border-radius: 180px 180px 0 0; background: var(--paper-dawn); opacity: .42; box-shadow: 0 0 50px var(--paper-dawn); }

.margin-note {
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: clamp(22px, 2.4vw, 35px);
  color: var(--sunrise-acid);
  text-shadow: 0 0 16px rgba(233, 255, 79, .45);
  opacity: 0;
}
.chapter.active .margin-note { animation: notePop .7s cubic-bezier(.2,1.7,.4,1) forwards; }
.note-one { left: 6vw; top: 24vh; transform: rotate(-7deg); }
.note-two { right: 6vw; top: 42vh; transform: rotate(6deg); animation-delay: .16s !important; }
.note-three { left: 13vw; bottom: 17vh; transform: rotate(3deg); animation-delay: .32s !important; }
.marker-ray { width: 280px; height: 31px; border-radius: 50%; background: rgba(233,255,79,.44); mix-blend-mode: screen; }
.ray-one { left: 40vw; top: 21vh; transform: rotate(-19deg); }
.ray-two { left: 58vw; bottom: 22vh; transform: rotate(11deg); background: rgba(255,79,163,.4); }
.subtitle-strip { left: 34vw; bottom: 32vh; padding: 10px 18px; background: rgba(23,19,42,.72); border: 1px solid rgba(255,242,199,.45); color: var(--paper-dawn); font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-2deg); }

.pane-stack { position: relative; height: 62vh; }
.memory-pane {
  width: min(420px, 48vw);
  min-height: 230px;
  padding: 28px;
  border: 1px solid rgba(205, 235, 255, .48);
  border-radius: 30px 23px 34px 21px;
  background:
    linear-gradient(130deg, rgba(205,235,255,.19), rgba(255,242,199,.06)),
    radial-gradient(circle at 20% 12%, rgba(50,230,255,.28), transparent 28%),
    radial-gradient(circle at 78% 82%, rgba(255,79,163,.2), transparent 31%);
  backdrop-filter: blur(16px) saturate(1.7);
  box-shadow: 0 18px 60px rgba(0,0,0,.2), inset 0 0 30px rgba(255,255,255,.05);
  transform: rotate(-4deg);
  opacity: 0;
  transition: transform .45s ease, box-shadow .45s ease;
}
.chapter.active .memory-pane { animation: paneFloat .8s cubic-bezier(.2,1.6,.42,1) forwards; }
.memory-pane:hover { transform: rotate(0deg) translateY(-12px) scale(1.03); box-shadow: 0 28px 80px rgba(50,230,255,.2); }
.memory-pane:hover::after { opacity: 1; transform: translateY(0); }
.memory-pane::before { content: ""; position: absolute; left: 18px; right: 18px; top: 15px; height: 12px; border-radius: 20px; background: rgba(255,242,199,.22); }
.memory-pane::after { content: attr(data-subtitle); position: absolute; left: 24px; right: 24px; bottom: 20px; color: var(--sunrise-acid); font-family: "Patrick Hand", "Comic Sans MS", cursive; font-size: 24px; opacity: 0; transform: translateY(8px); transition: .35s ease; }
.memory-pane span { display: block; color: var(--electric-cyan); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; }
.memory-pane strong { display: block; margin-top: 26px; font-family: "Fraunces", Georgia, serif; font-size: 43px; line-height: .9; color: var(--paper-dawn); }
.memory-pane em { position: absolute; right: 24px; top: 24px; color: var(--neon-sakura); font-style: normal; }
.pane-one { left: 4vw; top: 6vh; }
.pane-two { left: 34vw; top: 20vh; transform: rotate(5deg); animation-delay: .15s !important; }
.pane-three { right: 4vw; top: 1vh; transform: rotate(-2deg); animation-delay: .3s !important; }

.river-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.glyph {
  font-family: "Patrick Hand", "Comic Sans MS", cursive;
  font-size: clamp(50px, 9vw, 130px);
  color: var(--sunrise-acid);
  text-shadow: 0 0 22px currentColor;
  animation: glyphRiver 8s ease-in-out infinite;
}
.g1 { left: 10vw; top: 58vh; color: var(--electric-cyan); }
.g2 { left: 27vw; top: 36vh; animation-delay: -.9s; }
.g3 { left: 44vw; top: 64vh; color: var(--neon-sakura); animation-delay: -1.8s; }
.g4 { left: 60vw; top: 29vh; color: var(--soft-acetate); animation-delay: -2.7s; }
.g5 { left: 74vw; top: 51vh; animation-delay: -3.4s; }
.g6 { left: 85vw; top: 25vh; color: var(--electric-cyan); animation-delay: -4.1s; }
.g7 { left: 92vw; top: 68vh; color: var(--neon-sakura); animation-delay: -4.8s; }
.g8 { left: 20vw; top: 75vh; color: var(--paper-dawn); animation-delay: -5.5s; }
.ghost-word { position: absolute; right: -22vw; bottom: 16vh; font-size: clamp(70px, 13vw, 170px); opacity: .25; white-space: nowrap; animation: driftOff 9s ease-in-out infinite; }

.chapter-tabs {
  position: fixed;
  left: 50%;
  bottom: 34px;
  transform: translateX(-50%) rotate(-1deg);
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(205,235,255,.38);
  border-radius: 99px;
  background: rgba(23,19,42,.45);
  backdrop-filter: blur(14px);
  filter: url(#roughInk);
}
.chapter-tabs button {
  border: 0;
  border-radius: 99px;
  padding: 11px 15px;
  color: var(--paper-dawn);
  background: transparent;
  font: 12px "Space Grotesk", "Inter", sans-serif;
  letter-spacing: .11em;
  text-transform: uppercase;
  cursor: pointer;
}
.chapter-tabs button.active { color: var(--ink-night); background: var(--electric-cyan); box-shadow: 0 0 20px rgba(50,230,255,.55); }

@keyframes bounceBoot { 0% { opacity: 0; transform: translateY(-28px) scale(.7) rotate(-5deg); } 62% { opacity: 1; transform: translateY(6px) scale(1.08) rotate(2deg); } 100% { opacity: 1; } }
@keyframes dialDrop { 0% { opacity: 0; transform: translateY(-50px) scale(.5) rotate(-25deg); } 70% { opacity: 1; transform: translateY(8px) scale(1.08) rotate(8deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes rotateDial { to { transform: rotate(360deg); } }
@keyframes barFlicker { 50% { opacity: .35; transform: translateY(3px); } }
@keyframes drawStream { to { stroke-dashoffset: 0; } }
@keyframes streamWobble { 0%,100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-9px) scaleY(1.05); } }
@keyframes inkBreathe { 0%,100% { font-variation-settings: "wght" 760; transform: scaleX(1); } 50% { font-variation-settings: "wght" 930; transform: scaleX(1.025); } }
@keyframes buoyEnter { 0% { opacity: 0; transform: translateY(-34px) scale(.3) rotate(-18deg); } 65% { opacity: 1; transform: translateY(8px) scale(1.18) rotate(8deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes notePop { 0% { opacity: 0; scale: .5; } 70% { opacity: 1; scale: 1.14; } 100% { opacity: 1; scale: 1; } }
@keyframes paneFloat { 0% { opacity: 0; translate: 0 48px; scale: .82; } 70% { opacity: 1; translate: 0 -8px; scale: 1.04; } 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes glyphRiver { 0%,100% { transform: translate(0,0) rotate(-8deg) scale(.95); } 50% { transform: translate(5vw,-8vh) rotate(9deg) scale(1.12); } }
@keyframes driftOff { 0%,100% { transform: translateX(0) rotate(-2deg); } 50% { transform: translateX(-18vw) rotate(2deg); } }

@media (max-width: 820px) {
  .hud-pane { width: 42vw; padding: 12px; }
  .dial { width: 118px; height: 118px; left: calc(50% - 59px); top: 120px; }
  .dial-knob { width: 45px; height: 45px; font-size: 17px; }
  .chapter { padding: 28vh 7vw 12vh; }
  .chapter-two, .chapter-three, .chapter-four { padding-left: 7vw; }
  .pane-two, .pane-three { left: 18vw; right: auto; }
  .memory-pane { width: 72vw; }
  .chapter-tabs { width: calc(100vw - 22px); overflow-x: auto; justify-content: flex-start; }
  .chapter-tabs button { white-space: nowrap; }
}