:root {
  /* DESIGN typography tokens retained for compliance: IBM Plex Mono* Mono** for wordmark; Space Mono* Mono** for timestamps. */
  --abyss: #061826;
  --sonar: #0B3A5B;
  --teal: #0F7C80;
  --marble: #E7E1D4;
  --paper: #F7F1E6;
  --coral: #FF5A6E;
  --violet: #5B4B8A;
  --mono: "IBM Plex Mono", "Space Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --space: "Space Mono", "IBM Plex Mono", ui-monospace, monospace;
  --human: "Noto Sans", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--marble);
  background:
    radial-gradient(circle at 18% 12%, rgba(15, 124, 128, .28), transparent 34rem),
    radial-gradient(circle at 86% 28%, rgba(91, 75, 138, .24), transparent 30rem),
    linear-gradient(180deg, #020910 0%, var(--abyss) 24%, #082138 55%, #02080e 100%);
  font-family: var(--human);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: 40;
  background-image:
    repeating-linear-gradient(0deg, rgba(247, 241, 230, .04) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255, 90, 110, .035) 0 1px, transparent 1px 13px);
  mix-blend-mode: screen;
}

.fixed-depth { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }

.watercolor {
  position: absolute;
  border-radius: 45% 55% 60% 40%;
  filter: blur(22px) saturate(130%);
  mix-blend-mode: screen;
  animation: diffuse 18s ease-in-out infinite alternate;
}

.bloom-one {
  width: 58vw; height: 54vw; left: -18vw; top: 3vh;
  background: radial-gradient(circle, rgba(11,58,91,.72), rgba(15,124,128,.28) 42%, transparent 68%);
}

.bloom-two {
  width: 42vw; height: 45vw; right: -10vw; top: 45vh;
  background: radial-gradient(circle, rgba(91,75,138,.5), rgba(255,90,110,.12) 38%, transparent 70%);
  animation-delay: -7s;
}

.waterline {
  position: absolute;
  left: -12vw; width: 124vw; height: 16vh;
  border-top: 1px solid rgba(231, 225, 212, .16);
  background: linear-gradient(100deg, transparent, rgba(15,124,128,.18), transparent, rgba(255,90,110,.08), transparent);
  clip-path: polygon(0 38%, 12% 25%, 27% 44%, 44% 19%, 62% 39%, 77% 24%, 100% 34%, 100% 100%, 0 100%);
  animation: tide 12s ease-in-out infinite alternate;
}
.waterline-a { top: 28vh; }
.waterline-b { top: 68vh; transform: rotate(-3deg); animation-delay: -5s; }

.marble-ruin {
  position: absolute;
  bottom: -8vh;
  display: flex;
  gap: 1.2vw;
  opacity: .33;
  filter: blur(.3px) drop-shadow(8px 0 0 rgba(255,90,110,.08)) drop-shadow(-7px 0 0 rgba(15,124,128,.1));
}
.ruin-left { left: 6vw; }
.ruin-right { right: 8vw; transform: scaleX(-1); }
.marble-ruin i {
  display: block; width: clamp(24px, 4vw, 58px); height: 74vh;
  background:
    linear-gradient(90deg, transparent 0 16%, rgba(6,24,38,.28) 17% 23%, transparent 24% 38%, rgba(6,24,38,.22) 39% 46%, transparent 47%),
    radial-gradient(circle at 30% 20%, var(--paper), var(--marble) 48%, rgba(231,225,212,.46));
  clip-path: polygon(13% 0, 100% 6%, 88% 100%, 0 96%);
}

.cursor-compass {
  position: fixed; left: 0; top: 0; width: 86px; height: 86px; margin: -43px 0 0 -43px;
  pointer-events: none; z-index: 50; opacity: 0;
  border: 1px solid rgba(15,124,128,.8); border-radius: 50%;
  box-shadow: 0 0 36px rgba(15,124,128,.32), inset 0 0 22px rgba(15,124,128,.18);
  transition: opacity .35s ease;
}
.cursor-compass span { position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed rgba(255,90,110,.6); }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: clamp(28px, 6vw, 86px);
  isolation: isolate;
  overflow: hidden;
}

.opening { min-height: 112vh; display: flex; align-items: flex-end; }

.title-cluster { width: min(920px, 88vw); margin: 0 0 11vh 0; position: relative; z-index: 3; }
.label, .scene-title span, .marginalia, .plaque, .side-caption { font-family: var(--space); letter-spacing: .18em; text-transform: uppercase; }
.label { color: var(--teal); font-size: .82rem; }
h1 {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(3.2rem, 12vw, 11rem);
  line-height: .82;
  letter-spacing: -.08em;
  color: var(--paper);
  text-shadow: 4px 0 0 rgba(255,90,110,.44), -5px 0 0 rgba(15,124,128,.38), 0 18px 44px rgba(0,0,0,.55);
}
.glyph { display: inline-block; opacity: 0; transform: translateY(18px) skewX(-8deg); filter: blur(6px); }
.glyph.visible { opacity: 1; transform: translateY(0) skewX(0); filter: blur(0); transition: .55s cubic-bezier(.16,.84,.2,1); }
.undertow { max-width: 680px; font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.7; color: rgba(231,225,212,.78); }

.marginalia.vertical { position: absolute; right: 2vw; top: 14vh; writing-mode: vertical-rl; color: rgba(247,241,230,.42); font-size: .72rem; }
.plaque {
  position: absolute; top: 17vh; left: 12vw; padding: 18px 26px;
  background: rgba(231,225,212,.12); border: 1px solid rgba(231,225,212,.26);
  color: rgba(247,241,230,.55); clip-path: polygon(3% 0, 100% 8%, 96% 100%, 0 88%);
}

.sample {
  font-family: var(--mono);
  color: var(--paper);
  background: linear-gradient(115deg, rgba(247,241,230,.16), rgba(231,225,212,.07));
  border: 1px solid rgba(231,225,212,.24);
  box-shadow: 0 18px 50px rgba(0,0,0,.28), inset 0 0 22px rgba(247,241,230,.04);
  backdrop-filter: blur(9px);
  padding: 14px 18px;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.sample.magnetized { filter: saturate(150%); box-shadow: 0 0 36px rgba(15,124,128,.35), 6px 0 0 rgba(255,90,110,.28), -6px 0 0 rgba(15,124,128,.28); }
.shard { position: absolute; max-width: 360px; clip-path: polygon(0 12%, 91% 0, 100% 82%, 8% 100%); }
.shard-coral { border-color: rgba(255,90,110,.55); color: #F7F1E6; }
.shard-teal { border-color: rgba(15,124,128,.65); }
.signal-shard { right: 11vw; bottom: 30vh; transform: rotate(-6deg); }
.output-shard { right: 28vw; top: 34vh; transform: rotate(5deg); }
.violet { color: #E7E1D4; border-color: rgba(91,75,138,.8); }

.ripple {
  position: absolute; width: 20px; height: 20px; border-radius: 50%; pointer-events: none;
  border: 1px solid var(--coral); opacity: .75; transform: translate(-50%, -50%) scale(.2);
  animation: ripple 1.2s ease-out forwards;
}

.scene-title { position: relative; z-index: 4; max-width: 720px; }
.scene-title.right { margin-left: auto; text-align: right; }
.scene-title span { color: var(--coral); font-size: .78rem; }
h2 { font-family: var(--mono); font-size: clamp(2.4rem, 7vw, 7rem); line-height: .9; letter-spacing: -.06em; margin: 14px 0; }

.mishear { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4vw; align-items: center; }
.bust-fragment {
  width: min(440px, 78vw); height: 62vh; justify-self: center; position: relative;
  background: radial-gradient(circle at 48% 22%, var(--paper), var(--marble) 35%, rgba(231,225,212,.18) 36%, transparent 62%);
  clip-path: polygon(33% 5%, 67% 1%, 81% 27%, 72% 58%, 88% 100%, 15% 94%, 28% 58%, 15% 30%);
  opacity: .78; filter: drop-shadow(10px 0 0 rgba(255,90,110,.14)) drop-shadow(-12px 0 0 rgba(15,124,128,.16));
}
.bust-fragment:after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 14px, rgba(6,24,38,.28) 15px 16px); mix-blend-mode: multiply; }
.face-lines { position: absolute; left: 28%; top: 24%; z-index: 2; font-family: var(--mono); color: var(--abyss); line-height: 1.6; }
.transcript-field { display: flex; flex-direction: column; gap: 22px; transform: rotate(-2deg); }
.side-caption { position: absolute; right: 5vw; bottom: 8vh; width: 280px; color: rgba(231,225,212,.55); font-size: .72rem; line-height: 1.7; }

.correction { min-height: 108vh; }
.coral-cut { position: absolute; inset: 0 42% 0 35%; background: linear-gradient(180deg, transparent, rgba(255,90,110,.82), transparent); clip-path: polygon(45% 0, 57% 0, 49% 38%, 68% 55%, 42% 100%, 33% 100%, 52% 58%, 34% 36%); filter: blur(1px); opacity: .72; }
.inscription {
  margin-top: 16vh; max-width: 610px; padding: 34px;
  background: linear-gradient(135deg, rgba(247,241,230,.22), rgba(231,225,212,.08));
  color: var(--paper); border: 1px solid rgba(231,225,212,.3); clip-path: polygon(2% 4%, 100% 0, 96% 91%, 0 100%);
}
.inscription span, .inscription em { display: block; font-family: var(--space); color: var(--coral); letter-spacing: .12em; text-transform: uppercase; }
.inscription strong { display: block; font-family: var(--mono); font-size: clamp(1.6rem, 4vw, 3.8rem); line-height: 1; margin: 24px 0; }
.floating-notes .shard:nth-child(1) { right: 8vw; top: 44vh; }
.floating-notes .shard:nth-child(2) { left: 46vw; bottom: 12vh; }
.floating-notes .shard:nth-child(3) { left: 10vw; bottom: 18vh; }

.reform { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.amphitheater { position: absolute; inset: 18vh 5vw auto auto; width: 62vw; height: 58vh; opacity: .45; transform: perspective(700px) rotateX(62deg) rotateZ(-7deg); }
.amphitheater div { height: 22%; margin: 12px; border: 1px solid rgba(231,225,212,.38); border-radius: 50%; background: radial-gradient(ellipse, transparent 45%, rgba(231,225,212,.16) 46% 58%, transparent 60%); }
.reform-copy { max-width: 470px; font-size: 1.25rem; line-height: 1.8; color: rgba(247,241,230,.72); }
.comment-face { position: relative; width: min(420px, 80vw); height: 520px; justify-self: center; filter: drop-shadow(0 30px 60px rgba(0,0,0,.35)); }
.comment-face:before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 22%, rgba(247,241,230,.88), rgba(231,225,212,.3) 36%, transparent 66%); clip-path: polygon(30% 0, 69% 4%, 88% 38%, 72% 80%, 48% 100%, 24% 76%, 13% 34%); }
.comment-face span { position: absolute; font-family: var(--mono); background: rgba(6,24,38,.72); padding: 8px 10px; color: var(--paper); border: 1px solid rgba(15,124,128,.46); }
.comment-face span:nth-child(1){ left: 24%; top: 19%; } .comment-face span:nth-child(2){ left: 50%; top: 32%; } .comment-face span:nth-child(3){ left: 18%; top: 48%; } .comment-face span:nth-child(4){ left: 45%; top: 61%; color: var(--coral); } .comment-face span:nth-child(5){ left: 34%; top: 76%; }

.basin { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 115vh; }
.moonpool { position: absolute; width: 70vw; height: 70vw; max-width: 820px; max-height: 820px; border-radius: 50%; background: radial-gradient(circle, rgba(247,241,230,.22), rgba(15,124,128,.2) 32%, rgba(11,58,91,.28) 54%, transparent 72%); filter: blur(8px); animation: moon 9s ease-in-out infinite alternate; }
.basin-title { z-index: 2; }
.basin-bowl { position: relative; z-index: 3; width: min(760px, 86vw); min-height: 260px; border-bottom: 2px solid rgba(231,225,212,.5); border-radius: 0 0 50% 50%; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding: 55px 30px; }
.basin-bowl .sample { position: relative; transform: rotate(var(--r, 0deg)); }
.basin-bowl .sample:nth-child(1){ --r:-8deg; } .basin-bowl .sample:nth-child(2){ --r:5deg; } .basin-bowl .sample:nth-child(3){ --r:-2deg; } .basin-bowl .sample:nth-child(4){ --r:9deg; }
.closing-line { z-index: 4; max-width: 620px; color: rgba(247,241,230,.7); font-size: 1.1rem; line-height: 1.8; }

@keyframes diffuse { to { transform: translate(5vw, 4vh) rotate(18deg) scale(1.08); border-radius: 63% 37% 44% 56%; } }
@keyframes tide { to { transform: translateY(22px) rotate(2deg); opacity: .68; } }
@keyframes ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(6); } }
@keyframes moon { to { transform: scale(1.07); opacity: .7; } }

@media (max-width: 800px) {
  .mishear, .reform { display: block; }
  .bust-fragment, .comment-face { margin: 8vh auto; }
  .shard { position: relative; inset: auto !important; margin: 18px 0; }
  .opening { display: block; padding-top: 28vh; }
  .title-cluster { margin-bottom: 6vh; }
  .side-caption, .marginalia.vertical { display: none; }
  .basin-bowl { flex-wrap: wrap; }
}