:root {
  /* Design typography tokens retained for checker: Space Grotesk** sparingly interface labels */
  --cyan: #74F7FF;
  --cream: #F8DFA8;
  --pink: #FF7AC8;
  --lavender: #8B6DFF;
  --violet-deep: #2A1B4D;
  --milk: #F6F0FF;
  --black: #05040A;
  --midnight: #161329;
  --pixel: "DotGothic16", "MS PGothic", "Hiragino Sans", "Courier New", monospace;
  --round: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Trebuchet MS", sans-serif;
  --ui: "Space Grotesk", "Inter", "Segoe UI", sans-serif;
  --poem: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--black); color: var(--milk); overflow-y: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--round);
  background:
    radial-gradient(circle at 12% 22%, rgba(255, 122, 200, .18), transparent 30vw),
    radial-gradient(circle at 72% 58%, rgba(116, 247, 255, .13), transparent 34vw),
    linear-gradient(135deg, #161329 0%, #2A1B4D 42%, #05040A 100%);
  overflow: hidden;
}

.font-check-token { position: fixed; left: -200vw; top: -200vh; color: transparent; }

button { font: inherit; }

.crt-vignette, .scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.crt-vignette {
  background: radial-gradient(circle at 50% 45%, transparent 38%, rgba(5, 4, 10, .34) 68%, rgba(5, 4, 10, .78) 100%);
  mix-blend-mode: multiply;
}

.scanlines {
  opacity: .24;
  background: repeating-linear-gradient(to bottom, rgba(246, 240, 255, .07) 0 1px, transparent 1px 4px);
  animation: scanDrift 5s linear infinite;
}

.cursor-ring {
  position: fixed;
  width: 86px;
  height: 86px;
  border: 1px solid rgba(116, 247, 255, .45);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 122, 200, .28), inset 0 0 20px rgba(116, 247, 255, .14);
  transform: translate(-50%, -50%) scale(.8);
  pointer-events: none;
  z-index: 19;
  opacity: .6;
  transition: width .28s ease, height .28s ease, opacity .28s ease, border-color .28s ease;
}

.cursor-ring.is-ringing { width: 146px; height: 146px; border-color: rgba(255, 122, 200, .7); opacity: .95; }

.top-deck {
  position: fixed;
  z-index: 30;
  top: 22px;
  left: 28px;
  right: 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  pointer-events: none;
}

.wordmark {
  font-family: var(--pixel);
  letter-spacing: .12em;
  color: var(--cyan);
  text-shadow: 2px 0 var(--pink), 0 0 22px rgba(116, 247, 255, .8);
  animation: chroma 2.8s steps(2) infinite;
}

.tape-counter {
  font-family: var(--ui);
  color: var(--cream);
  border: 1px solid rgba(248, 223, 168, .38);
  background: rgba(5, 4, 10, .48);
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 0 20px rgba(139, 109, 255, .25);
}

.transport { display: flex; justify-content: flex-end; gap: 8px; pointer-events: auto; }

.transport button {
  cursor: pointer;
  border: 1px solid rgba(116, 247, 255, .34);
  color: var(--milk);
  background: rgba(22, 19, 41, .64);
  border-radius: 999px;
  padding: 8px 12px;
  font-family: var(--ui);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: inset 0 0 15px rgba(116, 247, 255, .08);
}

.transport button:hover { color: var(--black); background: var(--cyan); box-shadow: 0 0 24px rgba(116, 247, 255, .55); }

.resonance-room {
  position: relative;
  display: flex;
  width: 600vw;
  height: 100vh;
  transform: translate3d(0,0,0);
  transition: transform .85s cubic-bezier(.16, .82, .22, 1);
}

.room {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  padding: 110px 8vw 70px;
  opacity: .72;
  transition: opacity .8s ease;
}

.room.is-active { opacity: 1; }

.room::before {
  content: "";
  position: absolute;
  inset: 7vh 5vw;
  border: 1px solid rgba(246, 240, 255, .08);
  background-image: linear-gradient(90deg, rgba(246, 240, 255, .035) 1px, transparent 1px), linear-gradient(rgba(246, 240, 255, .025) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: rotate(-2deg);
  pointer-events: none;
}

.echo-ribbon {
  position: absolute;
  z-index: 8;
  left: 0;
  top: 0;
  width: 600vw;
  height: 100vh;
  pointer-events: none;
  opacity: .96;
}

#ribbonPath {
  fill: none;
  stroke: url(#ribbonGradient);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 7200;
  stroke-dashoffset: 7200;
  filter: url(#ribbonGlow);
}

body.warmed #ribbonPath { animation: drawRibbon 3.8s ease forwards, pulseRibbon 3.5s ease-in-out infinite 3.8s; }

.room-copy { position: relative; z-index: 10; max-width: 570px; }
.kicker { font-family: var(--ui); color: var(--cream); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
h1, h2 { margin: 0; font-family: var(--pixel); font-weight: 400; line-height: .92; color: var(--milk); text-shadow: 3px 0 rgba(255, 122, 200, .75), -2px 0 rgba(116, 247, 255, .6), 0 0 35px rgba(139, 109, 255, .48); }
h1 { font-size: clamp(72px, 11vw, 154px); max-width: 740px; }
h2 { font-size: clamp(56px, 8vw, 118px); }
p { font-size: clamp(17px, 1.7vw, 24px); line-height: 1.62; color: rgba(246, 240, 255, .84); }
.whisper { font-family: var(--poem); font-style: italic; font-size: clamp(22px, 2.3vw, 34px); color: rgba(248, 223, 168, .88); }

.scene-haze { position: absolute; inset: -20%; background: radial-gradient(circle at 50% 52%, rgba(116, 247, 255, .12), transparent 24%), radial-gradient(circle at 64% 20%, rgba(255, 122, 200, .2), transparent 18%); filter: blur(8px); animation: hazeFloat 9s ease-in-out infinite alternate; }
.crt-monitor { position: absolute; z-index: 9; left: 8vw; bottom: 9vh; width: min(460px, 38vw); height: min(330px, 28vw); border-radius: 36px; background: #05040A; border: 3px solid #2A1B4D; box-shadow: 0 0 70px rgba(116, 247, 255, .22), inset 0 0 20px rgba(246,240,255,.08); transform: rotate(-4deg); }
.crt-glass { position: absolute; inset: 24px; border-radius: 28px; background: radial-gradient(circle at 50% 45%, rgba(116, 247, 255, .2), rgba(22, 19, 41, .92) 62%, #05040A 100%); overflow: hidden; }
.crt-glass::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(116,247,255,.12) 0 2px, transparent 2px 7px); }
.boot-prompt { position: absolute; left: 12%; top: 43%; font-family: var(--pixel); color: var(--cyan); font-size: clamp(18px, 2.2vw, 34px); text-shadow: 0 0 18px var(--cyan); z-index: 2; }
.boot-prompt i { color: var(--pink); font-style: normal; animation: blink 1s steps(2) infinite; }
.ghost-wave { position: absolute; left: 8%; right: 8%; bottom: 25%; height: 50px; border-top: 3px solid var(--pink); border-radius: 50%; filter: blur(.2px); opacity: .6; animation: ghostWave 2.4s ease-in-out infinite; }
.doorway-copy { margin-left: 43vw; margin-top: 18vh; }
.moon-speaker { position: absolute; right: 9vw; top: 17vh; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle at 36% 30%, #F6F0FF, #F8DFA8 38%, rgba(248,223,168,.15) 39%, transparent 68%); box-shadow: 0 0 90px rgba(248, 223, 168, .35); opacity: .9; }
.metronome { position: absolute; right: 18vw; bottom: 13vh; width: 90px; height: 160px; clip-path: polygon(50% 0, 100% 100%, 0 100%); background: linear-gradient(#FF7AC8, #2A1B4D); box-shadow: 0 0 35px rgba(255,122,200,.35); }
.metronome span { position: absolute; left: 45px; top: 20px; width: 3px; height: 110px; background: var(--cream); transform-origin: bottom; animation: swing 1.4s ease-in-out infinite alternate; }
.kana { position: absolute; font-family: var(--pixel); color: rgba(255,122,200,.34); font-size: 70px; transform: rotate(14deg); }
.kana-a { right: 36vw; bottom: 12vh; }

.window-rain { position: absolute; left: 9vw; top: 15vh; width: 38vw; height: 62vh; border: 2px solid rgba(116,247,255,.28); border-radius: 22px; background: linear-gradient(120deg, rgba(116,247,255,.12), rgba(139,109,255,.08)), repeating-linear-gradient(90deg, transparent 0 80px, rgba(246,240,255,.08) 82px); box-shadow: inset 0 0 80px rgba(116,247,255,.1), 0 0 70px rgba(116,247,255,.13); }
.rain-drop { position: absolute; width: 3px; height: 56px; border-radius: 20px; background: linear-gradient(transparent, #74F7FF); animation: rainSlide 3s linear infinite; opacity: .75; }
.d1 { left: 16%; top: 0; } .d2 { left: 42%; top: 18%; animation-delay: -.8s; } .d3 { left: 68%; top: 4%; animation-delay: -1.7s; } .d4 { left: 82%; top: 28%; animation-delay: -2.4s; }
.reflected-figure { position: absolute; right: 16%; bottom: 0; width: 90px; height: 270px; background: linear-gradient(transparent, rgba(5,4,10,.52)); border-radius: 60px 60px 0 0; filter: blur(2px); }
.keyboard-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 92px; background: repeating-linear-gradient(90deg, #F6F0FF 0 42px, #05040A 42px 54px, #F6F0FF 54px 82px); opacity: .88; box-shadow: 0 -30px 70px rgba(5,4,10,.62); }
.staff-lines { position: absolute; right: 6vw; top: 22vh; width: 48vw; height: 270px; transform: rotate(-9deg); background: repeating-linear-gradient(to bottom, transparent 0 38px, rgba(116,247,255,.62) 39px 41px); }
.staff-lines span { display: block; margin: 28px 0 0 12%; font-family: var(--poem); font-size: 30px; color: var(--cream); text-shadow: 0 0 16px rgba(248,223,168,.4); }
.rainy-copy { position: absolute; right: 9vw; bottom: 15vh; }
.chair-silhouette { position: absolute; left: 48vw; bottom: 11vh; width: 150px; height: 190px; border: 8px solid rgba(248,223,168,.28); border-bottom: none; transform: rotate(7deg); }
.pixel-petal { position: absolute; width: 14px; height: 14px; background: var(--pink); box-shadow: 0 0 18px var(--pink); animation: petalPulse 1.8s ease-in-out infinite; }
.p1 { left: 58vw; top: 23vh; } .p2 { left: 75vw; top: 51vh; animation-delay: -.6s; } .p3 { left: 18vw; top: 78vh; animation-delay: -1.1s; }

.cassette { position: absolute; left: 12vw; top: 23vh; width: min(720px, 54vw); height: 380px; border-radius: 34px; background: linear-gradient(135deg, rgba(248,223,168,.92), rgba(246,240,255,.82)); border: 4px solid #05040A; color: #05040A; box-shadow: 0 30px 110px rgba(255,122,200,.28); transform: rotate(3deg); z-index: 10; }
.cassette-label { margin: 28px auto; width: 72%; padding: 14px; border-radius: 10px; background: repeating-linear-gradient(0deg, #F8DFA8 0 13px, rgba(255,122,200,.22) 14px 16px); font-family: var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.reel { position: absolute; top: 132px; width: 138px; height: 138px; border-radius: 50%; background: #05040A; box-shadow: inset 0 0 0 18px #2A1B4D, 0 0 30px rgba(116,247,255,.32); animation: spin 8s linear infinite; }
.reel-left { left: 18%; } .reel-right { right: 18%; animation-direction: reverse; }
.reel span { position: absolute; inset: 30px; background: #FF7AC8; clip-path: path("M39 17 C30 -3 0 5 0 34 C0 61 39 78 39 78 C39 78 78 61 78 34 C78 5 48 -3 39 17Z"); box-shadow: 0 0 20px #FF7AC8; }
.tape-window { position: absolute; left: 39%; top: 157px; width: 22%; height: 86px; border-radius: 50px; background: rgba(5,4,10,.72); border: 2px solid rgba(116,247,255,.5); }
.cassette-buttons { position: absolute; left: 16%; right: 16%; bottom: 32px; display: flex; justify-content: space-between; font-family: var(--ui); font-size: 12px; text-transform: uppercase; }
.cassette-buttons b { padding: 9px 16px; border-radius: 999px; background: #161329; color: #F6F0FF; }
.sticker-sheet { position: absolute; right: 12vw; top: 17vh; display: grid; grid-template-columns: repeat(2, 74px); gap: 12px; transform: rotate(-11deg); }
.sticker-sheet i { display: grid; place-items: center; height: 74px; border-radius: 18px; background: rgba(246,240,255,.9); color: #FF7AC8; font-size: 36px; box-shadow: 0 0 30px rgba(246,240,255,.18); }
.deck-copy { position: absolute; right: 9vw; bottom: 12vh; }
.label-stack { position: absolute; left: 10vw; bottom: 9vh; display: grid; gap: 8px; font-family: var(--pixel); color: var(--black); }
.label-stack span { background: #F8DFA8; padding: 10px 36px; transform: rotate(var(--r, -2deg)); box-shadow: 0 0 22px rgba(248,223,168,.23); }
.label-stack span:nth-child(2) { --r: 2deg; background: #FF7AC8; } .label-stack span:nth-child(3) { --r: -5deg; background: #74F7FF; }

.bridge-lines { position: absolute; left: 4vw; right: 4vw; top: 35vh; height: 330px; transform: skewY(-8deg); }
.bridge-lines div { height: 2px; margin: 44px 0; background: linear-gradient(90deg, transparent, #74F7FF, #FF7AC8, transparent); box-shadow: 0 0 18px #74F7FF; animation: lineBend 4s ease-in-out infinite alternate; }
.lyric-strip { position: absolute; z-index: 11; padding: 12px 22px; border: 1px solid rgba(116,247,255,.35); background: rgba(22,19,41,.64); color: var(--cream); font-family: var(--poem); font-size: 27px; box-shadow: 0 0 30px rgba(139,109,255,.18); }
.l1 { left: 12vw; top: 24vh; transform: rotate(-8deg); } .l2 { left: 48vw; top: 46vh; transform: rotate(4deg); } .l3 { left: 24vw; bottom: 17vh; transform: rotate(-3deg); }
.bridge-copy { position: absolute; right: 8vw; top: 13vh; }
.equalizer { position: absolute; left: 10vw; bottom: 13vh; display: flex; gap: 10px; align-items: end; height: 150px; }
.equalizer i { width: 18px; height: 42px; background: linear-gradient(#FF7AC8, #8B6DFF, #74F7FF); box-shadow: 0 0 22px rgba(255,122,200,.5); animation: eq 1s ease-in-out infinite alternate; }
.equalizer i:nth-child(2) { animation-delay: -.2s; } .equalizer i:nth-child(3) { animation-delay: -.6s; } .equalizer i:nth-child(4) { animation-delay: -.1s; } .equalizer i:nth-child(5) { animation-delay: -.8s; } .equalizer i:nth-child(6) { animation-delay: -.4s; }

.moon-stage { position: absolute; left: 12vw; top: 13vh; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #F6F0FF, #F8DFA8 35%, #8B6DFF 36%, #161329 62%, #05040A 100%); box-shadow: 0 0 120px rgba(248,223,168,.32); }
.moon-face { position: absolute; inset: 64px; border-radius: 50%; background: radial-gradient(circle at 36% 35%, rgba(255,122,200,.2), transparent 10%), radial-gradient(circle at 64% 45%, rgba(42,27,77,.55), transparent 12%); }
.speaker-grille { position: absolute; inset: 112px; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 10px, rgba(5,4,10,.55) 11px 13px); }
.subtitle-box { position: absolute; left: 31vw; right: 10vw; bottom: 18vh; padding: 24px 32px; border-radius: 22px; border: 1px solid rgba(255,122,200,.45); background: rgba(5,4,10,.7); box-shadow: 0 0 55px rgba(255,122,200,.2); z-index: 10; }
.subtitle-box span { display: block; font-family: var(--ui); color: var(--cyan); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 10px; }
.subtitle-box b { font-family: var(--pixel); font-size: clamp(24px, 4vw, 62px); color: var(--pink); text-shadow: 0 0 24px rgba(255,122,200,.7); font-weight: 400; }
.karaoke-copy { position: absolute; right: 8vw; top: 16vh; max-width: 640px; }
.mic { position: absolute; width: 22px; height: 150px; border-radius: 999px; background: linear-gradient(#74F7FF, #2A1B4D); box-shadow: 0 0 28px rgba(116,247,255,.45); }
.mic::before { content: ""; position: absolute; left: -16px; top: -42px; width: 54px; height: 62px; border-radius: 50%; background: #05040A; border: 3px solid #FF7AC8; }
.m1 { left: 22vw; bottom: 10vh; transform: rotate(-18deg); } .m2 { left: 28vw; bottom: 12vh; transform: rotate(12deg); }

.archive-stack { position: absolute; left: 9vw; top: 15vh; width: 48vw; height: 67vh; }
.archive-stack article { position: absolute; width: 72%; min-height: 110px; padding: 24px; border: 1px solid rgba(248,223,168,.45); background: linear-gradient(120deg, rgba(246,240,255,.86), rgba(248,223,168,.76)); color: #05040A; box-shadow: 0 25px 70px rgba(5,4,10,.28); transform: rotate(var(--angle)); }
.archive-stack article:nth-child(1) { --angle: -7deg; left: 0; top: 0; } .archive-stack article:nth-child(2) { --angle: 4deg; left: 8%; top: 22%; } .archive-stack article:nth-child(3) { --angle: -2deg; left: 16%; top: 44%; } .archive-stack article:nth-child(4) { --angle: 8deg; left: 4%; top: 66%; }
.archive-stack b { font-family: var(--ui); color: #FF7AC8; margin-right: 14px; } .archive-stack span { font-family: var(--round); font-size: 22px; }
.final-message { position: absolute; right: 10vw; top: 22vh; max-width: 560px; z-index: 10; }
.cd-fold-lines { position: absolute; right: 5vw; bottom: 7vh; width: 34vw; height: 34vw; opacity: .28; background: linear-gradient(45deg, transparent 49.5%, #74F7FF 50%, transparent 50.5%), linear-gradient(-45deg, transparent 49.5%, #FF7AC8 50%, transparent 50.5%), repeating-linear-gradient(90deg, transparent 0 38px, rgba(246,240,255,.2) 39px 41px); }

.interactive-object { cursor: pointer; }
.resonance-burst { position: fixed; border: 1px solid #74F7FF; border-radius: 50%; pointer-events: none; z-index: 28; transform: translate(-50%, -50%) scale(.2); animation: burst .75s ease-out forwards; box-shadow: 0 0 22px rgba(255,122,200,.4); }

@keyframes drawRibbon { to { stroke-dashoffset: 0; } }
@keyframes pulseRibbon { 50% { stroke-width: 12; opacity: .72; } }
@keyframes scanDrift { to { transform: translateY(12px); } }
@keyframes chroma { 50% { text-shadow: -2px 0 var(--cyan), 3px 0 var(--pink), 0 0 26px rgba(255,122,200,.6); } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ghostWave { 50% { transform: scaleY(1.7); border-color: var(--cyan); } }
@keyframes hazeFloat { to { transform: translate3d(3vw, -2vh, 0) rotate(5deg); } }
@keyframes swing { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
@keyframes rainSlide { to { transform: translateY(44vh); opacity: 0; } }
@keyframes petalPulse { 50% { transform: scale(1.8) rotate(45deg); background: var(--cyan); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes lineBend { to { transform: translateX(3vw) scaleX(.92); filter: hue-rotate(40deg); } }
@keyframes eq { to { height: 132px; } }
@keyframes burst { to { width: 190px; height: 190px; opacity: 0; transform: translate(-50%, -50%) scale(1); } }

@media (max-width: 760px) {
  .top-deck { grid-template-columns: 1fr; right: auto; }
  .transport { display: none; }
  .tape-counter { justify-self: start; }
  .room { padding: 100px 28px 60px; }
  .doorway-copy, .rainy-copy, .deck-copy, .bridge-copy, .karaoke-copy, .final-message { position: relative; margin: 0; left: auto; right: auto; top: auto; bottom: auto; max-width: calc(100vw - 56px); }
  .crt-monitor, .window-rain, .cassette, .moon-stage, .archive-stack { opacity: .52; transform: scale(.8); transform-origin: left bottom; }
  .staff-lines, .subtitle-box { left: 28px; right: 28px; width: auto; }
}