:root {
  --deep-syntax: #07111F;
  --cyan: #47D7FF;
  --ink: #6D4CFF;
  --moon: #EAF6F2;
  --acid: #D7FF4A;
  --slate: #5F7188;
  --plum: #120A1C;
  --mineral: #11283A;
  --display: "Bricolage Grotesque", "Lato", "Inter", system-ui, sans-serif;
  --body: "Commissioner", "IBM Plex Sans", "Inter", system-ui, sans-serif;
  --serif: "Fraunces", "Lora", Georgia, serif;
}

* { box-sizing: border-box; }
html { background: #07111F; color: #EAF6F2; }
body {
  margin: 0;
  overflow: hidden;
  font-family: var(--body);
  background: linear-gradient(135deg, #07111F 0%, #120A1C 46%, #11283A 100%);
  color: #EAF6F2;
  font-variant-numeric: tabular-nums;
}
button { font: inherit; color: inherit; }

.narrative-shell {
  height: 100vh;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.narrative-shell::-webkit-scrollbar { height: 0; }

.probability-chamber {
  position: relative;
  flex: 0 0 100vw;
  height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  isolation: isolate;
  padding: clamp(28px, 5vw, 76px);
  background:
    radial-gradient(circle at 15% 18%, rgba(71, 215, 255, .18), transparent 32%),
    radial-gradient(circle at 74% 36%, rgba(109, 76, 255, .18), transparent 30%),
    linear-gradient(135deg, #07111F 0%, #120A1C 52%, #11283A 100%);
}
.probability-chamber::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle, rgba(234,246,242,.54) 0 1px, transparent 1.4px),
    linear-gradient(90deg, transparent 0 48px, rgba(95,113,136,.08) 49px 50px);
  background-size: 79px 83px, 50px 50px;
  mix-blend-mode: screen;
}

.confidence-spine {
  position: fixed;
  z-index: 30;
  left: 26px;
  top: 9vh;
  bottom: 9vh;
  width: 54px;
  border-left: 1px solid rgba(71, 215, 255, .45);
}
.spine-label {
  position: absolute;
  left: -18px;
  top: -28px;
  transform: rotate(-90deg);
  transform-origin: left center;
  color: #5F7188;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 10px;
}
.spine-tick {
  position: absolute;
  left: -5px;
  width: 34px;
  height: 2px;
  border: 0;
  padding: 0;
  background: #5F7188;
  cursor: pointer;
  transition: width .35s ease, background .35s ease, box-shadow .35s ease;
}
.spine-tick:nth-of-type(1) { top: 8%; }
.spine-tick:nth-of-type(2) { top: 36%; }
.spine-tick:nth-of-type(3) { top: 64%; }
.spine-tick:nth-of-type(4) { top: 92%; }
.spine-tick span {
  position: absolute;
  left: 46px;
  top: -9px;
  color: #5F7188;
  font-size: 11px;
  letter-spacing: .08em;
}
.spine-tick.active { width: 58px; background: #D7FF4A; box-shadow: 0 0 24px rgba(215,255,74,.75); }
.spine-mercury {
  position: absolute;
  left: -8px;
  top: 8%;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #47D7FF;
  box-shadow: 0 0 28px #47D7FF;
  transition: top .5s cubic-bezier(.2,.8,.2,1);
}

.observatory-stage { display: grid; align-items: end; }
.confidence-aurora {
  position: absolute;
  inset: 8% -16% 22% 4%;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(71,215,255,.28), transparent 34%),
    radial-gradient(ellipse at 62% 36%, rgba(109,76,255,.32), transparent 38%),
    radial-gradient(ellipse at 48% 74%, rgba(215,255,74,.14), transparent 24%);
  filter: blur(34px);
  animation: aurora 13s ease-in-out infinite alternate;
}
@keyframes aurora { from { transform: translateX(-4%) skewX(-8deg); } to { transform: translateX(5%) skewX(9deg) scale(1.05); } }
.stage-copy { position: relative; z-index: 2; max-width: 88vw; padding-left: clamp(40px, 9vw, 118px); padding-bottom: 5vh; }
.field-note { color: #5F7188; letter-spacing: .16em; text-transform: uppercase; font-size: 12px; margin: 0 0 18px; }
h1, h2 { font-family: var(--display); margin: 0; line-height: .86; letter-spacing: -.07em; }
h1 { font-size: clamp(78px, 20vw, 285px); text-shadow: 0 0 42px rgba(71,215,255,.18); }
h2 { font-size: clamp(58px, 9vw, 132px); max-width: 940px; }
.stage-line { max-width: 720px; margin: 24px 0 0; color: rgba(234,246,242,.8); font-size: clamp(18px, 2vw, 28px); line-height: 1.35; }
.translation-orbit { position: absolute; inset: 4vh 3vw auto 9vw; width: 84vw; height: 48vh; fill: none; z-index: 1; overflow: visible; }
.translation-orbit path { stroke: rgba(71,215,255,.35); stroke-width: 1.4; stroke-dasharray: 10 16; }
.translation-orbit text { fill: #47D7FF; font-family: var(--serif); font-size: 23px; letter-spacing: .06em; opacity: .9; }
.orbit-one { animation: orbitDrift 18s linear infinite alternate; }
@keyframes orbitDrift { to { transform: translateY(24px) rotate(-2deg); } }
.punctuation-field span, .aligned-fragments span {
  position: absolute;
  color: #D7FF4A;
  font-family: var(--serif);
  font-size: clamp(24px, 4vw, 58px);
  text-shadow: 0 0 20px rgba(215,255,74,.5);
  animation: satellite 9s ease-in-out infinite;
}
.punctuation-field span:nth-child(1) { left: 66%; top: 18%; }
.punctuation-field span:nth-child(2) { left: 82%; top: 42%; animation-delay: -2s; }
.punctuation-field span:nth-child(3) { left: 18%; top: 28%; animation-delay: -4s; }
.punctuation-field span:nth-child(4) { left: 54%; top: 12%; animation-delay: -1s; }
.punctuation-field span:nth-child(5) { left: 76%; top: 66%; animation-delay: -6s; }
.punctuation-field span:nth-child(6) { left: 37%; top: 48%; animation-delay: -3s; }
.punctuation-field span:nth-child(7) { left: 90%; top: 16%; animation-delay: -5s; }
@keyframes satellite { 50% { transform: translate(20px,-28px) rotate(18deg); opacity: .45; } }

.maybe-moth { position: absolute; z-index: 4; width: 18px; height: 12px; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle, #EAF6F2, #47D7FF 54%, transparent 68%); filter: blur(.2px); animation: moth 7s ease-in-out infinite; }
.maybe-moth::before, .maybe-moth::after { content: ""; position: absolute; width: 12px; height: 16px; top: -4px; border: 1px solid rgba(215,255,74,.65); border-radius: 70% 12%; }
.maybe-moth::before { left: -8px; transform: rotate(-28deg); }
.maybe-moth::after { right: -8px; transform: rotate(28deg) scaleX(-1); }
.moth-a { left: 62%; top: 62%; } .moth-b { left: 28%; top: 18%; animation-delay: -2s; } .moth-c { left: 88%; top: 24%; animation-delay: -4s; }
@keyframes moth { 50% { transform: translate(36px,-30px) rotate(14deg); } }

.chamber-title-wrap { position: relative; z-index: 4; margin-left: clamp(56px, 10vw, 160px); margin-top: 4vh; }
.decision-boundary { position: absolute; z-index: 1; inset: -20% auto -20% 48%; width: 18vw; background: linear-gradient(90deg, transparent, rgba(109,76,255,.35), rgba(71,215,255,.16), transparent); transform: skewX(-18deg); filter: blur(1px); }
.boundary-b { left: 34%; transform: skewX(24deg); background: linear-gradient(90deg, transparent, rgba(215,255,74,.24), rgba(109,76,255,.32), transparent); }
.semantic-topography { position: absolute; inset: auto 5vw 8vh auto; width: 48vw; height: 36vh; opacity: .5; background: repeating-radial-gradient(ellipse at center, transparent 0 18px, rgba(71,215,255,.45) 19px 20px, transparent 21px 35px); transform: rotate(-8deg); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.topo-b { inset: 10vh auto auto 8vw; transform: rotate(9deg); opacity: .28; }
.particle-cloud { position: absolute; inset: 0; z-index: 3; }
.phoneme-particle { position: absolute; padding: 9px 13px; border: 1px solid rgba(71,215,255,.35); border-radius: 999px; color: #47D7FF; background: rgba(7,17,31,.52); box-shadow: 0 0 20px rgba(71,215,255,.15); animation: floatParticle 8s ease-in-out infinite; }
.phoneme-particle:nth-child(1){left:18%;top:54%;}.phoneme-particle:nth-child(2){left:31%;top:28%;animation-delay:-1s}.phoneme-particle:nth-child(3){left:48%;top:72%;animation-delay:-2s}.phoneme-particle:nth-child(4){left:78%;top:24%;animation-delay:-3s}.phoneme-particle:nth-child(5){left:68%;top:58%;animation-delay:-4s}.phoneme-particle:nth-child(6){left:22%;top:78%;animation-delay:-5s}.phoneme-particle:nth-child(7){left:86%;top:76%;animation-delay:-6s}.phoneme-particle:nth-child(8){left:56%;top:36%;animation-delay:-7s}.phoneme-particle:nth-child(9){left:42%;top:16%;animation-delay:-2.7s}.phoneme-particle:nth-child(10){left:72%;top:84%;animation-delay:-5.7s}
@keyframes floatParticle { 50% { transform: translate(18px,-34px); filter: blur(1.4px); } }
.utterance-lens { position: absolute; z-index: 5; left: 52vw; top: 38vh; width: min(440px, 36vw); min-height: 260px; padding: 30px; border: 1px solid rgba(234,246,242,.18); border-radius: 34% 18% 28% 16% / 18% 34% 16% 28%; background: linear-gradient(135deg, rgba(234,246,242,.12), rgba(71,215,255,.08)); backdrop-filter: blur(18px); box-shadow: inset 0 0 36px rgba(234,246,242,.05), 0 30px 80px rgba(0,0,0,.38); transition: transform .45s ease, box-shadow .45s ease; }
.utterance-lens.zoomed { transform: scale(1.08) rotate(-1.5deg); box-shadow: 0 0 70px rgba(71,215,255,.3), 0 30px 80px rgba(0,0,0,.45); }
.lens-caption, .utterance-lens b { display: block; color: #47D7FF; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; margin-bottom: 22px; }
.uncertain-fragment { display: block; font-family: var(--display); font-size: clamp(30px, 4vw, 56px); line-height: .98; }
.candidate-stack { margin-top: 26px; color: rgba(234,246,242,.72); }
.candidate-stack p { margin: 9px 0; } .candidate-stack i { color: #D7FF4A; font-family: var(--serif); margin-right: 10px; }
.margin-annotation { position: absolute; z-index: 6; color: #5F7188; font-family: var(--serif); font-style: italic; letter-spacing: .05em; }
.note-one { left: 18vw; bottom: 12vh; } .note-two { right: 10vw; top: 18vh; }

.chamber-branch { background: linear-gradient(135deg, #120A1C 0%, #07111F 50%, #11283A 100%); }
.diagonal-title { transform: rotate(-4deg); margin-top: 11vh; }
.translation-wheel { position: absolute; left: 8vw; bottom: 8vh; width: 360px; height: 360px; border: 1px dashed rgba(71,215,255,.4); border-radius: 50%; animation: wheel 26s linear infinite; }
.translation-wheel::before { content: ""; position: absolute; inset: 72px; border-radius: 50%; border: 1px solid rgba(109,76,255,.48); box-shadow: 0 0 45px rgba(109,76,255,.2); }
.translation-wheel span { position: absolute; left: 50%; top: 50%; color: #47D7FF; transform-origin: 0 0; font-size: 13px; letter-spacing: .08em; }
.translation-wheel span:nth-child(1){transform:rotate(0deg) translateX(180px)}.translation-wheel span:nth-child(2){transform:rotate(60deg) translateX(180px)}.translation-wheel span:nth-child(3){transform:rotate(120deg) translateX(180px)}.translation-wheel span:nth-child(4){transform:rotate(180deg) translateX(180px)}.translation-wheel span:nth-child(5){transform:rotate(240deg) translateX(180px)}.translation-wheel span:nth-child(6){transform:rotate(300deg) translateX(180px)}
@keyframes wheel { to { transform: rotate(360deg); } }
.lens-row { position: absolute; z-index: 6; left: 34vw; right: 6vw; bottom: 12vh; height: 330px; }
.utterance-lens.compact { position: absolute; width: 300px; min-height: 190px; left: 0; top: 55px; }
.utterance-lens.compact:nth-child(2) { left: 27vw; top: 0; }
.utterance-lens.compact:nth-child(3) { left: 49vw; top: 108px; }
.utterance-lens strong { display: block; font-family: var(--display); font-size: 28px; line-height: 1; }
.utterance-lens em { display: block; margin-top: 20px; color: #5F7188; font-family: var(--serif); }
.utterance-lens.violet { border-color: rgba(109,76,255,.45); background: rgba(109,76,255,.12); }
.utterance-lens.acid { border-color: rgba(215,255,74,.5); background: rgba(215,255,74,.08); }
.decision-curve { position: absolute; left: 28vw; top: 32vh; width: 56vw; height: 24vh; z-index: 3; overflow: visible; }
.decision-curve path { fill: none; stroke: #D7FF4A; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 16 20; filter: drop-shadow(0 0 15px rgba(215,255,74,.55)); }

.chamber-collapse { background: linear-gradient(135deg, #07111F 0%, #120A1C 48%, #07111F 100%); }
.bayes-beam { position: absolute; z-index: 2; left: 42%; top: -20%; width: 18vw; height: 140%; transform: skewX(-28deg); background: linear-gradient(90deg, transparent, rgba(215,255,74,.1), rgba(71,215,255,.28), rgba(109,76,255,.18), transparent); filter: blur(2px); animation: beamChoose 5.8s ease-in-out infinite alternate; }
@keyframes beamChoose { to { transform: translateX(16vw) skewX(-28deg); } }
.cloud-collapse span { position: absolute; z-index: 4; font-family: var(--display); font-size: clamp(20px, 4vw, 64px); color: rgba(234,246,242,.72); filter: blur(2px); transition: transform 1s ease, color 1s ease, filter 1s ease; }
.cloud-collapse.locked span { color: #EAF6F2; filter: blur(0); text-shadow: 0 0 24px rgba(71,215,255,.24); }
.cloud-collapse span:nth-child(1){left:15%;top:28%}.cloud-collapse span:nth-child(2){left:56%;top:22%}.cloud-collapse span:nth-child(3){left:32%;top:60%;color:#6D4CFF}.cloud-collapse span:nth-child(4){left:62%;top:62%}.cloud-collapse span:nth-child(5){left:20%;top:72%;color:#5F7188}.cloud-collapse span:nth-child(6){left:76%;top:34%}.cloud-collapse span:nth-child(7){left:45%;top:44%;color:#D7FF4A}.cloud-collapse span:nth-child(8){left:72%;top:76%}.cloud-collapse span:nth-child(9){left:12%;top:48%;color:#47D7FF}.cloud-collapse span:nth-child(10){left:84%;top:14%;color:#D7FF4A}
.collapse-title { margin-top: 62vh; max-width: 760px; }
.verdict-meter { position: absolute; z-index: 6; right: 8vw; top: 14vh; width: 280px; height: 280px; border: 1px solid rgba(71,215,255,.35); border-radius: 50%; color: #5F7188; display: grid; place-items: center; font-family: var(--serif); font-style: italic; }
.verdict-meter span:first-child { position: absolute; left: -30px; bottom: 42px; }
.verdict-meter span:last-child { position: absolute; right: -22px; top: 48px; color: #D7FF4A; }
.verdict-meter i { position: absolute; left: 50%; bottom: 50%; width: 2px; height: 118px; background: #47D7FF; box-shadow: 0 0 22px #47D7FF; transform-origin: bottom center; transform: rotate(-42deg); transition: transform 1.2s cubic-bezier(.19,1,.22,1); }
.verdict-meter.decided i { transform: rotate(46deg); }

.chamber-reading { display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 52%, rgba(71,215,255,.15), transparent 32%), linear-gradient(135deg, #07111F 0%, #11283A 56%, #120A1C 100%); }
.reading-room { position: relative; z-index: 5; width: min(980px, 78vw); }
.verdict-reveal { margin: 42px auto 0; padding: 32px clamp(24px, 5vw, 72px); border-top: 1px solid rgba(71,215,255,.4); border-bottom: 1px solid rgba(71,215,255,.4); font-family: var(--serif); font-style: italic; font-size: clamp(34px, 6vw, 86px); line-height: 1.05; color: #EAF6F2; text-shadow: 0 0 30px rgba(71,215,255,.2); clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.19,1,.22,1); }
.verdict-reveal.revealed { clip-path: inset(0 0 0 0); }
.reading-copy { max-width: 680px; margin: 34px auto 0; color: rgba(234,246,242,.72); font-size: 20px; line-height: 1.5; }
.aligned-fragments span { font-size: 18px; color: #47D7FF; animation-duration: 12s; }
.aligned-fragments span:nth-child(1){left:12%;top:18%}.aligned-fragments span:nth-child(2){left:80%;top:22%;animation-delay:-2s}.aligned-fragments span:nth-child(3){left:16%;top:76%;animation-delay:-4s}.aligned-fragments span:nth-child(4){left:74%;top:72%;animation-delay:-6s}.aligned-fragments span:nth-child(5){left:48%;top:14%;animation-delay:-8s}

@media (max-width: 900px) {
  body { overflow: auto; }
  .narrative-shell { display: block; overflow: auto; scroll-snap-type: y mandatory; }
  .probability-chamber { min-height: 100vh; }
  .confidence-spine { display: none; }
  .stage-copy, .chamber-title-wrap { padding-left: 0; margin-left: 0; }
  .utterance-lens, .utterance-lens.compact { position: relative; left: auto !important; top: auto !important; width: 86vw; margin: 32px auto; }
  .lens-row { position: relative; left: auto; right: auto; bottom: auto; height: auto; margin-top: 40px; }
  .translation-wheel, .verdict-meter { opacity: .38; transform: scale(.8); }
  .collapse-title { margin-top: 56vh; }
}