:root {
  --abyss: #07111F;
  --canal: #0B2A3D;
  --aqua: #42F6E8;
  --pink: #FF5C9A;
  --lavender: #8E7CFF;
  --cream: #FFF1C7;
  --black: #020407;
  --orange: #FF8A3D;
  --display: Shrikhand, Georgia, "Times New Roman", serif;
  --jp: "Noto Sans JP", "Arial Unicode MS", "Hiragino Sans", "Yu Gothic", sans-serif;
  --space: "Space Grotesk", "Trebuchet MS", "Gill Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --design-font-token: "Grotesk**";
  --design-font-regex-token: "Grotesk*";
  /* IBM Plex Mono only for timestamps. Space Grotesk** for modern caption blocks. */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--cream);
  font-family: var(--space);
  background:
    radial-gradient(circle at 20% 8%, rgba(66, 246, 232, .13), transparent 24rem),
    radial-gradient(circle at 80% 44%, rgba(255, 92, 154, .12), transparent 20rem),
    linear-gradient(180deg, var(--black) 0%, var(--abyss) 23%, var(--canal) 54%, var(--black) 100%);
  overflow-x: hidden;
}

body.signal-lock { --pink: #FF8A3D; }

.crt-noise,
.scanline-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.crt-noise {
  opacity: .22;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.18) 0 1px, transparent 1.8px),
    radial-gradient(circle at 58% 71%, rgba(66,246,232,.18) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 35%, rgba(255,92,154,.18) 0 1px, transparent 1.5px);
  background-size: 43px 37px, 61px 53px, 29px 31px;
  animation: noiseDrift 1.2s steps(3) infinite;
}

.scanline-veil {
  opacity: .42;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(180deg, rgba(66,246,232,.11) 0 1px, transparent 1px 7px);
  animation: scanRoll 7s linear infinite;
}

.depth-meter {
  position: fixed;
  right: 1rem;
  top: 14vh;
  width: 3px;
  height: 72vh;
  background: rgba(255,241,199,.12);
  z-index: 25;
}

.depth-meter span {
  display: block;
  width: 100%;
  height: 0%;
  background: linear-gradient(var(--aqua), var(--pink), var(--orange));
  box-shadow: 0 0 14px var(--aqua);
}

.bezel-nav {
  position: fixed;
  left: 50%;
  bottom: .85rem;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: .45rem;
  padding: .45rem;
  border: 1px solid rgba(255,241,199,.16);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(2,4,7,.76), rgba(7,17,31,.92));
  box-shadow: inset 0 0 20px rgba(66,246,232,.08), 0 18px 50px rgba(0,0,0,.45);
}

.bezel-nav a {
  color: var(--cream);
  text-decoration: none;
  font: 700 .68rem var(--mono);
  letter-spacing: .08em;
  padding: .65rem .78rem;
  border-radius: 999px;
  background: rgba(11,42,61,.78);
  border: 1px solid rgba(66,246,232,.2);
}

.bezel-nav a.active { color: var(--black); background: var(--aqua); }

.chamber {
  position: relative;
  min-height: 108vh;
  overflow: hidden;
  isolation: isolate;
  padding: 8vh 8vw 14vh;
}

.chamber::before {
  content: attr(data-scene);
  position: absolute;
  top: 2.8rem;
  left: 6vw;
  font: 700 .72rem var(--mono);
  letter-spacing: .18em;
  color: rgba(255,241,199,.45);
  text-transform: uppercase;
}

.current {
  position: absolute;
  left: -18vw;
  top: 18vh;
  width: 138vw;
  height: var(--current-height, 7rem);
  transform: rotate(-17deg);
  background:
    repeating-linear-gradient(90deg, transparent 0 24px, rgba(66,246,232,.18) 24px 26px),
    linear-gradient(90deg, transparent, rgba(66,246,232,.22), rgba(142,124,255,.18), rgba(2,4,7,.65), transparent);
  filter: blur(.2px);
  opacity: .75;
  z-index: -1;
  animation: currentPulse 9s ease-in-out infinite alternate;
}

.current-two { --current-height: 10rem; top: 25vh; }
.current-three { --current-height: 15rem; top: 32vh; background: linear-gradient(90deg, transparent, rgba(255,92,154,.35), rgba(66,246,232,.18), rgba(11,42,61,.75), transparent); }
.current-four { --current-height: 20rem; top: 39vh; }
.current-five { --current-height: 27rem; top: 45vh; background: linear-gradient(90deg, transparent, rgba(255,138,61,.25), rgba(255,241,199,.14), rgba(11,42,61,.65), transparent); }

.wordmark,
.huge-ident,
.ident-slab,
h2 {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.055em;
}

.cold-open {
  display: grid;
  align-content: center;
  background: radial-gradient(ellipse at 50% 76%, rgba(11,42,61,.62), transparent 38%), var(--black);
}

.wordmark {
  position: relative;
  margin: 0 0 0 7vw;
  max-width: 13ch;
  color: transparent;
  font-size: clamp(4.6rem, 16vw, 15rem);
  line-height: .76;
  -webkit-text-stroke: 1px rgba(255,241,199,.2);
  text-shadow: 0 0 30px rgba(66,246,232,.22);
  animation: identReveal 4.5s ease-in-out infinite alternate;
}

.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: var(--cream);
  clip-path: polygon(0 34%, 100% 27%, 100% 57%, 0 66%);
  opacity: .82;
}

.wordmark::after {
  color: var(--aqua);
  transform: translate(7px, 9px) scaleY(-1);
  opacity: .27;
  filter: blur(2px);
  clip-path: polygon(0 59%, 100% 48%, 100% 100%, 0 100%);
}

.ident-slab {
  position: absolute;
  color: rgba(255,241,199,.045);
  font-size: clamp(8rem, 24vw, 25rem);
  white-space: nowrap;
}

.ident-left { left: -6vw; top: 8vh; transform: rotate(-8deg); }
.ident-right { right: -13vw; bottom: 4vh; transform: rotate(8deg); }

.scene-tag,
.mono { font-family: var(--mono); }
.scene-tag { position: absolute; top: 9rem; right: 8vw; color: var(--aqua); opacity: .7; }

.subtitle-ribbon,
.warning-label,
.speech-burst,
.cream-panel,
.closing-title {
  background: var(--cream);
  color: var(--black);
  box-shadow: 10px 12px 0 rgba(255,92,154,.42), 0 0 34px rgba(255,241,199,.13);
}

.subtitle-ribbon {
  width: max-content;
  max-width: 80vw;
  margin: 2rem 0 0 45vw;
  padding: 1rem 1.4rem;
  font: 800 clamp(1rem, 2vw, 1.7rem) var(--jp);
  transform: rotate(-4deg);
  animation: lazyJerk 6s ease-in-out infinite;
}

.caption-jp,
.jp {
  font-family: var(--jp);
  color: var(--pink);
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  margin-left: 12vw;
}

.rain-glass {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,241,199,.15) 0 1px, transparent 1.6px);
  background-size: 19px 31px;
  opacity: .16;
  transform: skewX(-10deg);
}

.buoy {
  position: absolute;
  width: 5.8rem;
  height: 7.2rem;
  border-radius: 48% 48% 44% 44%;
  background: linear-gradient(160deg, var(--pink), var(--orange) 48%, var(--canal) 49% 63%, var(--cream) 64%);
  border: 2px solid rgba(255,241,199,.68);
  box-shadow: 0 0 32px rgba(255,92,154,.32);
  color: var(--black);
  display: grid;
  place-items: center;
  font: 900 2rem var(--jp);
  z-index: 3;
}

.buoy small {
  position: absolute;
  bottom: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: .25rem .45rem;
  background: var(--black);
  color: var(--cream);
  font: 700 .55rem var(--mono);
}

.ears::before,
.ears::after {
  content: "";
  position: absolute;
  top: -2.2rem;
  width: 2px;
  height: 2.7rem;
  background: var(--aqua);
  transform-origin: bottom;
}
.ears::before { left: 2rem; transform: rotate(-24deg); }
.ears::after { right: 2rem; transform: rotate(24deg); }
.lamp {
  position: absolute;
  top: .65rem;
  right: 1rem;
  width: .7rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 18px var(--pink);
  animation: blink 1.3s steps(2) infinite;
}
.distant { right: 18vw; bottom: 16vh; transform: scale(.5); }
.bobbing { right: 14vw; top: 31vh; animation: bob 4s ease-in-out infinite; }
.ducking { left: 10vw; bottom: 16vh; animation: duck 5s ease-in-out infinite; }
.reflected { position: relative; inset: auto; transform: scaleY(-1); opacity: .28; filter: blur(1px); }
.warm { position: relative; inset: auto; box-shadow: 0 0 58px rgba(255,138,61,.72); }

.dont-watch { background: linear-gradient(180deg, rgba(7,17,31,.62), rgba(11,42,61,.75)); }
.tilted-frame {
  position: relative;
  width: min(42rem, 78vw);
  margin: 18vh 0 0 12vw;
  padding: 2.8rem;
  transform: rotate(-5deg);
  border: 1px solid rgba(66,246,232,.44);
  background: linear-gradient(135deg, rgba(2,4,7,.74), rgba(11,42,61,.52));
  box-shadow: inset 0 0 60px rgba(66,246,232,.06), 0 40px 80px rgba(0,0,0,.36);
  clip-path: polygon(0 6%, 94% 0, 100% 84%, 8% 100%);
}

.frame-top { color: var(--aqua); font-size: .72rem; margin-bottom: 1.5rem; }
h2 { font-size: clamp(3rem, 9vw, 8rem); line-height: .82; margin: 0 0 1.3rem; }
.tilted-frame p, .final-screen p { font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.55; color: rgba(255,241,199,.78); }
.diegetic-button {
  border: 1px solid rgba(255,241,199,.58);
  color: var(--cream);
  background: linear-gradient(90deg, rgba(255,92,154,.34), rgba(66,246,232,.12));
  font: 800 .85rem var(--jp);
  letter-spacing: .08em;
  padding: .95rem 1.15rem;
  cursor: pointer;
  transform: rotate(2deg);
}
.diegetic-button:active { transform: rotate(-2deg) translateY(2px); }
.warning-label { position: absolute; right: 12vw; bottom: 23vh; padding: .85rem 1rem; transform: rotate(7deg); font-weight: 900; }
.side-note { position: absolute; right: 7vw; top: 18vh; color: var(--aqua); }

.broken-tiles { position: absolute; left: 5vw; top: 10vh; display: flex; gap: .35rem; transform: rotate(9deg); }
.broken-tiles span { display: grid; place-items: center; width: 3rem; height: 3.4rem; background: rgba(255,241,199,.1); border: 1px solid rgba(255,241,199,.24); color: var(--cream); font: 900 1.4rem var(--mono); }

.koi { position: absolute; width: 5.5rem; height: 2rem; background: var(--orange); border-radius: 60% 35% 35% 60%; filter: drop-shadow(0 0 12px rgba(255,138,61,.45)); }
.koi::after { content: ""; position: absolute; right: -1.1rem; top: .25rem; border-left: 1.4rem solid var(--orange); border-top: .75rem solid transparent; border-bottom: .75rem solid transparent; }
.koi span { position: absolute; left: 1rem; top: .42rem; width: .4rem; height: .4rem; border-radius: 50%; background: var(--black); }
.koi-a { left: 58vw; top: 54vh; animation: swim 13s linear infinite; }
.koi-b { left: 75vw; top: 70vh; transform: scale(.7); animation: swim 16s linear infinite reverse; }

.blush-tide { background: radial-gradient(circle at 70% 38%, rgba(255,92,154,.2), transparent 22rem), linear-gradient(var(--canal), var(--abyss)); }
.huge-ident { position: absolute; right: -5vw; top: 22vh; max-width: 9ch; color: rgba(255,241,199,.9); font-size: clamp(4rem, 15vw, 16rem); transform: rotate(8deg); text-shadow: 8px 0 rgba(255,92,154,.42); }
.jelly-loader { position: absolute; left: 16vw; top: 18vh; width: 9rem; height: 9rem; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 50% 25%, rgba(255,241,199,.8), rgba(66,246,232,.22) 55%, transparent 56%); animation: bob 5s ease-in-out infinite; }
.jelly-loader span { position: absolute; bottom: -4rem; width: 2px; height: 5rem; background: linear-gradient(var(--aqua), transparent); animation: tentacle 2s ease-in-out infinite; }
.jelly-loader span:nth-child(1) { left: 2.4rem; }
.jelly-loader span:nth-child(2) { left: 4.4rem; animation-delay: .3s; }
.jelly-loader span:nth-child(3) { left: 6.4rem; animation-delay: .6s; }
.jelly-loader i { position: absolute; inset: 25%; border: 3px solid transparent; border-top-color: var(--pink); border-radius: 50%; animation: spin 1.7s linear infinite; }
.buffer-ring { position: absolute; left: 31vw; top: 48vh; width: 9rem; height: 9rem; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--pink) 0deg, var(--pink) 133deg, rgba(255,241,199,.12) 134deg); font: 900 1.7rem var(--mono); color: var(--cream); }
.speech-burst { position: absolute; left: 9vw; bottom: 22vh; padding: 1.4rem; width: min(28rem, 72vw); transform: rotate(-6deg); font: 900 1.25rem var(--jp); }
.vhs-sticker { position: absolute; right: 9vw; bottom: 13vh; padding: .8rem 1rem; color: var(--orange); border: 1px dashed var(--orange); transform: rotate(11deg); font: 800 .8rem var(--mono); }
.heart-static { position: absolute; left: 49vw; top: 22vh; color: var(--pink); font-size: 7rem; animation: heartSnap 2.7s steps(2) infinite; }
.waveform { position: absolute; left: 52vw; bottom: 25vh; display: flex; gap: .5rem; align-items: center; }
.waveform i { width: .45rem; height: calc(1rem + var(--h, 3) * .7rem); background: var(--aqua); animation: bars 1s ease-in-out infinite alternate; }
.waveform i:nth-child(2n) { --h: 7; background: var(--pink); animation-delay: .2s; }
.waveform i:nth-child(3n) { --h: 5; background: var(--lavender); animation-delay: .4s; }

.underwater { min-height: 120vh; background: linear-gradient(180deg, var(--abyss), var(--canal) 46%, var(--black)); }
.subtitle-stream { position: absolute; left: 9vw; top: 20vh; width: min(58rem, 84vw); display: grid; gap: 2.2rem; }
.subtitle-stream p { margin: 0; width: max-content; max-width: 86vw; padding: .85rem 1.2rem; background: rgba(255,241,199,.9); color: var(--black); font: 900 clamp(1rem, 2vw, 1.55rem) var(--jp); transform: translateX(var(--drift, 0)) rotate(-2deg); animation: subtitleFloat 8s ease-in-out infinite; }
.subtitle-stream p:nth-child(2) { --drift: 12vw; animation-delay: -2s; }
.subtitle-stream p:nth-child(3) { --drift: 5vw; animation-delay: -4s; }
.underwater h2 { position: absolute; right: -2vw; bottom: 18vh; width: 8ch; color: rgba(66,246,232,.42); transform: rotate(90deg); transform-origin: center; }
.seaweed { position: absolute; left: 4vw; bottom: 10vh; display: flex; gap: 2rem; align-items: end; color: var(--aqua); font: 900 2rem var(--mono); opacity: .54; }
.seaweed span { writing-mode: vertical-rl; animation: seaweed 4s ease-in-out infinite; }
.reflection-buoy { position: absolute; right: 20vw; top: 47vh; }
.bubble-clock { position: absolute; right: 8vw; top: 18vh; display: grid; gap: 3.7rem; color: var(--cream); }
.bubble-clock span { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; border-radius: 50%; border: 1px solid rgba(66,246,232,.38); background: rgba(66,246,232,.07); animation: bubbleRise 6s ease-in-out infinite; }
.bubble-clock span:nth-child(2) { animation-delay: -2s; }
.bubble-clock span:nth-child(3) { animation-delay: -4s; }
.cream-panel { position: absolute; left: 24vw; bottom: 18vh; width: min(24rem, 65vw); padding: 1rem 1.2rem; transform: rotate(3deg); }

.saved { min-height: 112vh; background: radial-gradient(circle at 52% 62%, rgba(255,138,61,.28), transparent 25rem), linear-gradient(180deg, var(--black), var(--abyss)); display: grid; place-items: center; }
.viewing-nook { position: relative; width: min(66rem, 86vw); min-height: 34rem; border-radius: 3rem 3rem .8rem .8rem; background: linear-gradient(140deg, rgba(255,241,199,.12), rgba(11,42,61,.78)); border: 1px solid rgba(255,241,199,.22); box-shadow: inset 0 0 80px rgba(255,138,61,.08), 0 50px 120px rgba(0,0,0,.5); padding: 4rem; }
.lamp-buoy { float: left; margin: 2rem 3rem 2rem 0; }
.final-screen { margin-left: clamp(0rem, 16vw, 13rem); padding: 2rem; border: 1px solid rgba(255,241,199,.22); background: rgba(2,4,7,.52); box-shadow: 0 0 55px rgba(255,241,199,.08); }
.screen-chrome { color: var(--orange); margin-bottom: 1rem; }
.closing-title { display: inline-block; margin-top: 1rem; padding: 1rem 1.3rem; font: 900 clamp(1.4rem, 3vw, 2.4rem) var(--display); transform: rotate(-1deg); }
.final { position: absolute; bottom: 16vh; right: 8vw; background: linear-gradient(90deg, rgba(255,138,61,.4), rgba(255,92,154,.2)); }
.last-caption { position: absolute; left: 8vw; bottom: 18vh; color: var(--orange); }

.snap-flash::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255,92,154,.24);
  z-index: 40;
  pointer-events: none;
  animation: flashOut .28s ease-out forwards;
}

@keyframes noiseDrift { 50% { transform: translate(2px, -3px); } }
@keyframes scanRoll { to { background-position-y: 160px; } }
@keyframes currentPulse { to { transform: rotate(-14deg) translateX(4vw); opacity: .95; } }
@keyframes identReveal { to { filter: brightness(1.4) contrast(1.2); } }
@keyframes lazyJerk { 0%, 78%, 100% { transform: rotate(-4deg) translate(0); } 82% { transform: rotate(2deg) translate(18px, -10px); } }
@keyframes blink { 50% { opacity: .18; } }
@keyframes bob { 50% { transform: translateY(-18px) rotate(4deg); } }
@keyframes duck { 45% { transform: translateY(40px); opacity: .65; } 70% { transform: translateY(-12px); opacity: 1; } }
@keyframes swim { to { transform: translateX(-105vw); } }
@keyframes tentacle { 50% { transform: skewX(16deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes heartSnap { 50% { transform: scale(1.18) rotate(-8deg); opacity: .2; } }
@keyframes bars { to { transform: scaleY(.35); } }
@keyframes subtitleFloat { 0%, 100% { transform: translateX(var(--drift, 0)) translateY(0) rotate(-2deg); } 72% { transform: translateX(calc(var(--drift, 0) + 3vw)) translateY(-18px) rotate(1deg); } 78% { transform: translateX(calc(var(--drift, 0) - 1vw)) translateY(4px) rotate(-5deg); } }
@keyframes seaweed { 50% { transform: rotate(7deg); } }
@keyframes bubbleRise { 50% { transform: translateY(-24px); box-shadow: 0 0 18px rgba(66,246,232,.22); } }
@keyframes flashOut { to { opacity: 0; } }

@media (max-width: 720px) {
  .chamber { padding: 7vh 6vw 16vh; }
  .wordmark { margin-left: 0; }
  .subtitle-ribbon { margin-left: 3vw; }
  .tilted-frame { margin-left: 0; padding: 2rem; width: 88vw; }
  .huge-ident { right: -20vw; }
  .buffer-ring { left: 8vw; top: 58vh; }
  .waveform { left: 42vw; }
  .bezel-nav a { padding: .55rem .5rem; font-size: .58rem; }
  .viewing-nook { padding: 2rem; }
  .final-screen { margin-left: 0; margin-top: 10rem; }
}