:root {
  /* Design typography tokens: IBM Plex Mono for timestamp marks; Space Grotesk for bar labels. */
  --black: #07030A;
  --cherry: #FF0A54;
  --magenta: #FF4FD8;
  --cyan: #00F5FF;
  --lime: #B6FF00;
  --violet: #7A5CFF;
  --syrup: #3A0018;
  --ice: #F7E7FF;
  --display: 'Alfa Slab One', Rockwell, 'Cooper Black', Georgia, serif;
  --space: 'Space Grotesk', Inter, Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ice);
  font-family: var(--space);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 10, 84, .24), transparent 28rem),
    radial-gradient(circle at 82% 19%, rgba(122, 92, 255, .22), transparent 34rem),
    linear-gradient(90deg, rgba(0, 245, 255, .035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 79, 216, .028) 1px, transparent 1px),
    var(--black);
  background-size: auto, auto, 92px 92px, 92px 92px, auto;
}

body.charm-active { cursor: none; }

.noise,
.flash-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.noise {
  opacity: .34;
  mix-blend-mode: screen;
  background-image:
    repeating-radial-gradient(circle at 18% 22%, rgba(247, 231, 255, .18) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(112deg, transparent 0 13px, rgba(255, 255, 255, .035) 14px, transparent 15px 28px);
}

.flash-layer {
  z-index: 32;
  opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(247, 231, 255, .7), rgba(255, 79, 216, .13) 18%, transparent 42%);
  transition: opacity 180ms ease;
}

.flash-layer.flash { opacity: .55; }

.night-walk { position: relative; z-index: 2; }

.scene {
  min-height: 100vh;
  position: relative;
  display: grid;
  place-items: center;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.3rem, 5vw, 6rem);
  isolation: isolate;
}

.scene::before {
  content: "";
  position: absolute;
  inset: 7% 5%;
  border: 1px solid rgba(247, 231, 255, .12);
  border-radius: 2rem;
  background:
    radial-gradient(circle at 8% 14%, rgba(255, 79, 216, .16), transparent 14rem),
    radial-gradient(circle at 78% 70%, rgba(0, 245, 255, .12), transparent 18rem),
    linear-gradient(135deg, rgba(58, 0, 24, .68), rgba(7, 3, 10, .18));
  box-shadow: inset 0 0 38px rgba(255, 10, 84, .16), 0 0 42px rgba(0, 245, 255, .08);
  z-index: -2;
}

.scene::after {
  content: attr(data-scene);
  position: absolute;
  right: 5vw;
  top: 10vh;
  font-family: var(--mono);
  font-size: .8rem;
  color: rgba(182, 255, 0, .72);
  letter-spacing: .22em;
  text-shadow: 0 0 14px var(--lime);
}

.hero { text-align: center; overflow: hidden; }

.hero::before {
  inset: 0;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 10, 84, .24), transparent 10rem),
    radial-gradient(circle at 50% 65%, rgba(0, 245, 255, .14), transparent 26rem),
    linear-gradient(180deg, rgba(7, 3, 10, .96), rgba(58, 0, 24, .74), rgba(7, 3, 10, .92));
}

.hero-chrome,
.kicker,
.label-strip,
.chapter-rail a,
.diary-card,
.snippet {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
}

.hero-chrome {
  color: var(--cyan);
  font-size: clamp(.68rem, 1.5vw, .92rem);
  text-shadow: 0 0 12px var(--cyan);
  animation: flicker 3.1s infinite steps(1);
}

.brand {
  position: relative;
  margin: 1rem 0 .4rem;
  font-family: var(--display);
  font-size: clamp(4.2rem, 14vw, 15rem);
  line-height: .82;
  letter-spacing: -.075em;
  color: var(--ice);
  text-shadow: 5px 5px 0 var(--cherry), -5px -3px 0 var(--violet), 0 0 32px rgba(255, 10, 84, .7);
  transform: scale(.84) translateY(1rem);
  animation: titleSlam 800ms cubic-bezier(.18, 1.6, .28, .98) forwards;
}

.brand::before,
.brand::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 2px var(--magenta);
  transform: translate(1.3vw, -.7vw);
  opacity: .62;
}

.brand::after {
  -webkit-text-stroke-color: var(--cyan);
  transform: translate(-.8vw, .9vw);
  opacity: .44;
}

.confession {
  width: min(680px, 88vw);
  margin: 0 auto;
  color: rgba(247, 231, 255, .76);
  font-size: clamp(1rem, 2.1vw, 1.38rem);
  line-height: 1.6;
}

.buzz-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -12px 0 0 -12px;
  background: var(--cherry);
  box-shadow: 0 0 14px var(--cherry), 0 0 40px var(--cherry), 0 0 80px var(--magenta);
  z-index: 9;
  transition: transform 120ms linear, opacity 200ms ease;
  animation: buzz 460ms infinite alternate;
}

.sound-pop,
.lyric-burst,
.last-flare {
  font-family: var(--display);
  color: var(--cherry);
  text-shadow: 4px 4px 0 var(--magenta), -3px -2px 0 var(--cyan), 0 0 34px var(--cherry);
}

.sound-pop {
  position: absolute;
  bottom: 5vh;
  left: -1vw;
  font-size: clamp(5rem, 15vw, 16rem);
  opacity: .18;
  transform: rotate(-8deg);
}

.timeline-shell {
  position: absolute;
  top: 100vh;
  left: 50%;
  width: min(36vw, 260px);
  height: 500vh;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}

.stem-wire {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 12px rgba(255, 10, 84, .9));
}

.stem-wire path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#wirePath {
  stroke: var(--cherry);
  stroke-width: 9;
  stroke-dasharray: var(--wire-length, 4600);
  stroke-dashoffset: calc(var(--wire-length, 4600) * (1 - var(--wire-progress, .02)));
}

.wire-glow {
  stroke: var(--magenta);
  stroke-width: 24;
  opacity: .2;
  stroke-dasharray: var(--wire-length, 4600);
  stroke-dashoffset: calc(var(--wire-length, 4600) * (1 - var(--wire-progress, .02)));
}

.trace-splits path {
  stroke: var(--cyan);
  stroke-width: 4;
  opacity: .78;
  stroke-dasharray: 16 12;
  animation: traceRun 1.2s linear infinite;
}

.chapter {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 560px) minmax(0, 1fr);
  gap: 2rem;
  align-items: center;
}

.chapter.left .chapter-copy { grid-column: 1 / 3; justify-self: start; }
.chapter.right .chapter-copy { grid-column: 2 / 4; justify-self: end; text-align: right; }

.chapter-copy {
  max-width: 740px;
  position: relative;
  z-index: 6;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  border: 1px solid rgba(247, 231, 255, .18);
  border-radius: 1.7rem;
  background: linear-gradient(135deg, rgba(58, 0, 24, .82), rgba(7, 3, 10, .48));
  box-shadow: 0 0 40px rgba(255, 10, 84, .18), inset 0 0 28px rgba(247, 231, 255, .06);
  backdrop-filter: blur(6px);
}

.kicker {
  margin: 0 0 .7rem;
  color: var(--lime);
  font-size: .72rem;
  text-shadow: 0 0 12px rgba(182, 255, 0, .7);
}

h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 10.5rem);
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--ice);
  text-shadow: 5px 5px 0 var(--cherry), -4px -3px 0 var(--violet), 0 0 28px rgba(255, 79, 216, .65);
}

.chapter-copy p:not(.kicker) {
  margin: 1.2rem 0;
  font-size: clamp(1rem, 2vw, 1.34rem);
  line-height: 1.55;
  color: rgba(247, 231, 255, .82);
}

.label-strip {
  display: inline-block;
  padding: .55rem .8rem;
  color: var(--black);
  background: linear-gradient(90deg, var(--cyan), var(--magenta));
  border-radius: 999px;
  font-size: .66rem;
  font-weight: 700;
  box-shadow: 0 0 20px rgba(0, 245, 255, .35);
}

.node {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 26%, var(--ice), var(--magenta) 16%, var(--cherry) 44%, var(--syrup) 72%);
  box-shadow: 0 0 18px var(--cherry), 0 0 42px var(--magenta), 0 0 0 10px rgba(255, 10, 84, .12);
  z-index: 10;
  cursor: none;
}

.node span {
  position: absolute;
  inset: -13px;
  border-radius: 44% 56% 45% 55%;
  border: 1px dashed rgba(0, 245, 255, .72);
  animation: spin 4s linear infinite;
}

.node.fizz { animation: nodeFizz 380ms ease; }

.chapter-rail {
  position: fixed;
  z-index: 18;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  display: grid;
  gap: .7rem;
}

.chapter-rail a {
  color: var(--ice);
  text-decoration: none;
  font-size: .7rem;
  padding: .58rem .45rem;
  border: 1px solid rgba(247, 231, 255, .16);
  border-radius: 999px;
  background: rgba(58, 0, 24, .55);
  box-shadow: inset 0 0 16px rgba(255, 10, 84, .14);
}

.chapter-rail a.active { color: var(--black); background: var(--lime); box-shadow: 0 0 18px var(--lime); }

.prop {
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.prop-sign {
  right: 8vw;
  top: 16vh;
  width: 220px;
  height: 120px;
  display: grid;
  place-items: center;
  border: 3px solid var(--cyan);
  border-radius: 28px;
  color: var(--magenta);
  font-family: var(--display);
  font-size: 2.2rem;
  transform: rotate(8deg);
  box-shadow: 0 0 28px var(--cyan), inset 0 0 25px rgba(255, 79, 216, .24);
  animation: flicker 2.4s infinite steps(1);
}

.diary-card {
  position: absolute;
  right: 9vw;
  bottom: 14vh;
  width: min(260px, 72vw);
  color: var(--black);
  background: var(--ice);
  padding: 1rem;
  transform: rotate(-5deg);
  box-shadow: 10px 10px 0 rgba(255, 10, 84, .7);
  z-index: 4;
}

.prop-door {
  left: 8vw;
  top: 17vh;
  width: min(310px, 42vw);
  height: 54vh;
  border-radius: 38% 12% 32% 10%;
  background: linear-gradient(120deg, rgba(247, 231, 255, .75), rgba(122, 92, 255, .32) 22%, rgba(7, 3, 10, .82) 48%, rgba(255, 79, 216, .44));
  box-shadow: 0 0 36px rgba(247, 231, 255, .25), inset 0 0 44px rgba(0, 245, 255, .22);
}

.prop-door i,
.prop-door b {
  position: absolute;
  border-radius: 50%;
  background: var(--cherry);
  box-shadow: 0 0 22px var(--cherry);
}

.prop-door i { width: 24px; height: 24px; right: 32px; top: 46%; }
.prop-door b { width: 10px; height: 10px; left: 28px; top: 16%; }

.bead-curtain {
  position: absolute;
  right: 12vw;
  inset-block: 8vh;
  width: 260px;
  background: repeating-linear-gradient(90deg, transparent 0 16px, rgba(247, 231, 255, .2) 17px 19px, transparent 20px 32px);
  opacity: .6;
  filter: drop-shadow(0 0 10px var(--magenta));
}

.prop-cd {
  right: 8vw;
  top: 18vh;
  width: clamp(190px, 30vw, 390px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, var(--black) 0 11%, transparent 12%),
    conic-gradient(from 40deg, var(--cyan), var(--ice), var(--magenta), var(--violet), var(--cyan), var(--cherry), var(--ice));
  opacity: .64;
  box-shadow: 0 0 38px rgba(0, 245, 255, .3);
  mask: repeating-radial-gradient(circle, #000 0 7px, rgba(0,0,0,.35) 8px 9px, #000 10px 15px);
  animation: slowSpin 13s linear infinite;
}

.lyric-burst {
  position: absolute;
  left: 7vw;
  bottom: 8vh;
  font-size: clamp(4rem, 12vw, 13rem);
  line-height: .75;
  opacity: .3;
  transform: rotate(-7deg);
}

.circuit-panel {
  position: absolute;
  left: 7vw;
  bottom: 12vh;
  width: min(460px, 74vw);
  height: 280px;
  border: 1px solid rgba(0, 245, 255, .5);
  border-radius: 28px;
  background:
    linear-gradient(90deg, transparent 48%, rgba(0, 245, 255, .56) 49% 51%, transparent 52%),
    linear-gradient(0deg, transparent 46%, rgba(255, 10, 84, .38) 47% 50%, transparent 51%),
    radial-gradient(circle at 20% 30%, var(--cherry) 0 7px, transparent 8px),
    radial-gradient(circle at 72% 62%, var(--lime) 0 5px, transparent 6px),
    rgba(58, 0, 24, .46);
  box-shadow: 0 0 38px rgba(0, 245, 255, .22), inset 0 0 30px rgba(255, 79, 216, .14);
}

.circuit-panel span {
  position: absolute;
  width: 54px;
  height: 3px;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan);
}

.circuit-panel span:nth-child(1) { left: 15%; top: 28%; }
.circuit-panel span:nth-child(2) { left: 38%; top: 64%; transform: rotate(90deg); }
.circuit-panel span:nth-child(3) { right: 18%; top: 38%; }
.circuit-panel span:nth-child(4) { right: 34%; bottom: 21%; transform: rotate(-35deg); }
.circuit-panel span:nth-child(5) { left: 22%; bottom: 23%; transform: rotate(26deg); }

.drip-stack {
  position: absolute;
  right: 13vw;
  top: 13vh;
  display: flex;
  gap: 1rem;
}

.drip-stack i {
  width: 28px;
  height: 170px;
  border-radius: 20px 20px 70% 70%;
  background: linear-gradient(var(--cherry), var(--syrup));
  box-shadow: 0 0 20px rgba(255, 10, 84, .65);
  animation: drip 3s ease-in-out infinite alternate;
}

.drip-stack i:nth-child(2) { height: 230px; animation-delay: -.8s; background: linear-gradient(var(--magenta), var(--syrup)); }
.drip-stack i:nth-child(3) { height: 130px; animation-delay: -1.4s; background: linear-gradient(var(--cyan), var(--syrup)); }

.last-flare {
  position: absolute;
  right: 8vw;
  bottom: 13vh;
  font-size: clamp(7rem, 18vw, 20rem);
  animation: flarePulse 1.4s ease-in-out infinite;
}

.bubble-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.bubble {
  position: absolute;
  bottom: -60px;
  width: var(--s);
  height: var(--s);
  border: 1px solid rgba(255, 79, 216, .58);
  border-radius: 50%;
  box-shadow: inset 0 0 14px rgba(255, 10, 84, .2), 0 0 12px rgba(255, 79, 216, .32);
  left: var(--x);
  animation: bubbleUp var(--d) linear infinite;
  animation-delay: var(--delay);
}

.cursor-charm,
.cursor-tail {
  position: fixed;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
}

.cursor-charm {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 22%, var(--ice), var(--magenta) 20%, var(--cherry) 52%, var(--syrup));
  box-shadow: 0 0 16px var(--cherry), 0 0 28px var(--magenta);
  transform: translate(-50%, -50%);
}

.cursor-charm span {
  position: absolute;
  left: 11px;
  top: -13px;
  width: 18px;
  height: 20px;
  border-left: 3px solid var(--cyan);
  border-top: 3px solid var(--cyan);
  border-radius: 70% 0 0 0;
  filter: drop-shadow(0 0 6px var(--cyan));
}

.cursor-tail {
  height: 2px;
  width: 54px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--lime));
  transform-origin: right center;
  filter: drop-shadow(0 0 6px var(--cyan));
}

.snippet {
  position: fixed;
  z-index: 41;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%) translateY(1rem);
  width: min(520px, calc(100vw - 2rem));
  padding: .9rem 1rem;
  border: 1px solid var(--cyan);
  color: var(--ice);
  background: rgba(7, 3, 10, .86);
  box-shadow: 0 0 22px rgba(0, 245, 255, .25), inset 0 0 18px rgba(255, 10, 84, .18);
  opacity: 0;
  transition: opacity 180ms ease, transform 180ms ease;
  text-align: center;
  font-size: .73rem;
}

.snippet.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.spark {
  position: fixed;
  z-index: 39;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--cyan);
  box-shadow: 0 0 12px var(--cyan), 0 0 18px var(--lime);
  animation: sparkOut 520ms ease-out forwards;
}

@keyframes titleSlam { to { transform: scale(1) translateY(0); } }
@keyframes buzz { from { transform: scale(.85) translate(1px, -1px); } to { transform: scale(1.35) translate(-1px, 1px); } }
@keyframes flicker { 0%, 9%, 11%, 18%, 100% { opacity: 1; } 10%, 19% { opacity: .35; } 52% { opacity: .78; } }
@keyframes traceRun { to { stroke-dashoffset: -28; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slowSpin { to { transform: rotate(360deg); } }
@keyframes nodeFizz { 30% { transform: scale(1.35); filter: brightness(1.8); } 100% { transform: scale(1); } }
@keyframes drip { to { transform: translateY(28px) scaleY(1.08); } }
@keyframes flarePulse { 50% { transform: scale(1.08); filter: brightness(1.55); } }
@keyframes bubbleUp { to { transform: translateY(-115vh) scale(1.5); opacity: 0; } }
@keyframes sparkOut { to { transform: translate(var(--dx), var(--dy)) scale(.1); opacity: 0; } }

@media (max-width: 760px) {
  .chapter { grid-template-columns: 1fr; }
  .chapter.left .chapter-copy,
  .chapter.right .chapter-copy { grid-column: 1; text-align: left; }
  .timeline-shell { left: 24px; width: 120px; }
  .node { left: 24px; }
  .chapter-rail { display: none; }
  .prop-sign, .prop-door, .prop-cd, .circuit-panel, .bead-curtain, .drip-stack { opacity: .28; }
  h2 { font-size: clamp(3.4rem, 18vw, 6rem); }
}