:root {
  /* Typography compliance terms: IBM Plex Mono** only in tiny doses for timestamps; IBM Plex Sans** for raw testimony passages and explanatory copy. It provides human warmth and clarity against the more synthetic display faces. */
  --deep: #06111F;
  --verdict: #8EDBFF;
  --glass: #C7F2FF;
  --leaf: #74F2B4;
  --violet: #34235E;
  --ink: #05070A;
  --root: #EAFBFF;
  --zen: 'Zen Dots', system-ui, sans-serif;
  --orbit: 'Orbitron', system-ui, sans-serif;
  --plex: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--root);
  background: var(--deep);
  font-family: var(--plex);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.site-shell {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 20%), rgba(116, 242, 180, .12), transparent 18rem),
    radial-gradient(circle at 72% 18%, rgba(52, 35, 94, .48), transparent 32rem),
    linear-gradient(180deg, #05070A 0%, #06111F 44%, #05070A 100%);
}

.site-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background:
    repeating-linear-gradient(90deg, rgba(199, 242, 255, .035) 0 1px, transparent 1px 9vw),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(142, 219, 255, .028) 24px);
  mix-blend-mode: screen;
}

.case-nav, .corner-stamp {
  position: fixed;
  z-index: 50;
  font-family: var(--orbit);
  color: rgba(199, 242, 255, .72);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: clamp(.56rem, .8vw, .72rem);
}

.case-nav {
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.case-nav a {
  padding-left: .85rem;
  border-left: 1px solid rgba(142, 219, 255, .35);
  transition: color .3s ease, border-color .3s ease, transform .3s ease;
}

.case-nav a:hover, .case-nav a.active {
  color: var(--leaf);
  border-color: var(--leaf);
  transform: translateX(.35rem);
}

.corner-stamp { pointer-events: none; opacity: .62; }
.top-left { top: 1rem; left: 1rem; }
.top-right { top: 1rem; right: 1rem; }
.bottom-left { bottom: 1rem; left: 1rem; }
.bottom-right { bottom: 1rem; right: 1rem; }

.verdict-vine {
  position: fixed;
  inset: 10vh -5vw auto -5vw;
  width: 110vw;
  height: 50vh;
  z-index: 2;
  pointer-events: none;
  opacity: .55;
}

.verdict-vine path, .root-split path {
  fill: none;
  stroke: var(--verdict);
  stroke-width: 2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(142, 219, 255, .72));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

#mainVine { animation: drawVine 5s ease-in-out forwards; }
.vine-branch { stroke: var(--leaf) !important; animation: drawVine 3.4s ease-in-out forwards; animation-delay: 1.2s; }
.branch-two { animation-delay: 1.8s; }
.branch-three { animation-delay: 2.5s; }

.scene {
  position: relative;
  min-height: 100vh;
  padding: clamp(5rem, 8vw, 7rem) clamp(1.2rem, 5vw, 6rem);
  display: grid;
  overflow: hidden;
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: 8% 5%;
  border: 1px solid rgba(199, 242, 255, .08);
  clip-path: polygon(0 0, 88% 0, 100% 12%, 100% 100%, 12% 100%, 0 84%);
  pointer-events: none;
  z-index: -1;
}

.scene-label {
  position: absolute;
  top: 5.5rem;
  right: clamp(1rem, 4vw, 4rem);
  z-index: 5;
  font-family: var(--orbit);
  color: var(--glass);
  letter-spacing: .22em;
  text-transform: uppercase;
  font-size: .72rem;
}

.scene-label.vertical {
  writing-mode: vertical-rl;
  right: auto;
  left: clamp(1rem, 4vw, 4rem);
}

.summons {
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  align-items: center;
  background: radial-gradient(circle at 70% 45%, rgba(142, 219, 255, .13), transparent 28rem), var(--ink);
}

.threshold-slit {
  position: absolute;
  left: 13%;
  top: 0;
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, var(--verdict), transparent);
  box-shadow: 0 0 28px var(--verdict);
  opacity: .5;
}

.evidence-slip, .glass-note, .final-pane {
  border: 1px solid rgba(199, 242, 255, .25);
  background: linear-gradient(135deg, rgba(199, 242, 255, .10), rgba(5, 7, 10, .70));
  box-shadow: inset 0 0 35px rgba(142, 219, 255, .06), 0 0 42px rgba(5, 7, 10, .5);
  backdrop-filter: blur(12px);
  clip-path: polygon(0 0, 94% 0, 100% 12%, 100% 100%, 8% 100%, 0 88%);
}

.hero-copy {
  position: relative;
  z-index: 4;
  width: min(48rem, 92vw);
  padding: clamp(1.5rem, 4vw, 3rem);
  margin-left: clamp(.5rem, 5vw, 5rem);
}

.eyebrow, .case-number, .glass-note span {
  display: block;
  font-family: var(--mono);
  color: var(--leaf);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: .72rem;
  margin-bottom: 1rem;
}

h1, h2, .oversize-glyph {
  font-family: var(--zen);
  font-weight: 400;
  margin: 0;
  color: var(--verdict);
  text-shadow: 0 0 18px rgba(142, 219, 255, .45);
}

h1 { font-size: clamp(3.4rem, 9vw, 9.5rem); letter-spacing: -.05em; text-transform: lowercase; }
h2 { font-size: clamp(2.5rem, 8vw, 8rem); line-height: .9; }

.draw-underline {
  display: block;
  height: 2px;
  width: 125%;
  margin: .75rem 0 1.5rem;
  background: linear-gradient(90deg, var(--verdict), var(--leaf), transparent);
  transform-origin: left;
  transform: scaleX(0);
  animation: underline 2.7s cubic-bezier(.18,.85,.22,1) .35s forwards;
  box-shadow: 0 0 14px var(--verdict);
}

.raw-line {
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.6vw, 1.45rem);
  line-height: 1.45;
  color: rgba(234, 251, 255, .88);
}

.narrative-action {
  position: absolute;
  right: clamp(1rem, 6vw, 8rem);
  bottom: clamp(4rem, 8vw, 7rem);
  z-index: 10;
  font-family: var(--orbit);
  color: var(--ink);
  background: var(--leaf);
  padding: .85rem 1.1rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .72rem;
  box-shadow: 0 0 28px rgba(116, 242, 180, .42);
  transition: transform .3s ease, box-shadow .3s ease;
}

.narrative-action:hover { transform: translateY(-.25rem); box-shadow: 0 0 45px rgba(116, 242, 180, .7); }

.specimen-hero {
  position: absolute;
  right: 4vw;
  top: 8vh;
  width: min(47vw, 42rem);
  height: 82vh;
  z-index: 1;
  opacity: .82;
}

.specimen svg, .botanical-panel svg { width: 100%; height: 100%; overflow: visible; }

.plant, .fern {
  fill: none;
  stroke: var(--leaf);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(116, 242, 180, .6));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: drawVine 4s ease forwards;
}

.leaf { fill: rgba(116, 242, 180, .035); stroke: var(--glass); animation-delay: .7s; }
.vein, .circuit, .nodes { animation-delay: 1.8s; }
.circuit { stroke: var(--verdict); }
.nodes circle, .nodes rect { fill: var(--leaf); stroke: var(--verdict); filter: drop-shadow(0 0 10px var(--leaf)); opacity: 0; animation: nodeBloom .9s ease 2.3s forwards; }

.evidence {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 2rem;
  background: radial-gradient(circle at 15% 70%, rgba(52, 35, 94, .5), transparent 28rem), var(--deep);
}

.oversize-glyph {
  position: absolute;
  left: 8vw;
  top: 7vh;
  font-size: clamp(5rem, 18vw, 18rem);
  opacity: .1;
}

.glass-stack { position: relative; z-index: 4; margin-left: 8vw; }
.glass-note { padding: clamp(1.2rem, 3vw, 2.5rem); width: min(36rem, 82vw); }
.glass-note.large h2 { font-size: clamp(2rem, 4.7vw, 5.2rem); }
.glass-note p { color: rgba(234, 251, 255, .8); line-height: 1.55; font-size: 1.07rem; }
.glass-note.small { position: absolute; width: 15rem; font-family: var(--mono); color: var(--glass); font-size: .78rem; }
.note-a { right: -5rem; top: -3rem; transform: rotate(4deg); }
.note-b { left: 4rem; bottom: -4rem; transform: rotate(-5deg); }

.botanical-panel { position: relative; height: min(72vh, 48rem); width: min(45vw, 40rem); justify-self: end; }
.ring { position: absolute; border: 1px solid rgba(142, 219, 255, .34); border-radius: 47% 53% 51% 49%; inset: 9%; animation: rotateRing 22s linear infinite; box-shadow: 0 0 35px rgba(142, 219, 255, .13); }
.ring-b { inset: 19% 2% 16% 18%; border-color: rgba(116, 242, 180, .25); animation-duration: 31s; animation-direction: reverse; }
.fern.frond { stroke: var(--glass); animation-delay: .5s; }
.fern.ticks { stroke: var(--verdict); animation-delay: 1.2s; }

.cross {
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 3rem;
  background: linear-gradient(115deg, var(--ink), var(--deep) 48%, rgba(52, 35, 94, .52));
}

.cross-copy { max-width: 31rem; margin-left: 6vw; z-index: 4; }
.cross-copy p:not(.eyebrow), .deliberation-copy p, .final-pane p { color: rgba(234, 251, 255, .82); line-height: 1.58; font-size: clamp(1rem, 1.3vw, 1.24rem); }
.phrase-field { display: grid; gap: 1.4rem; z-index: 5; }
.phrase {
  appearance: none;
  border: 0;
  border-bottom: 1px solid rgba(142, 219, 255, .35);
  background: transparent;
  color: rgba(234, 251, 255, .74);
  text-align: left;
  font: 500 clamp(1.2rem, 2.1vw, 2rem)/1.2 var(--plex);
  padding: .9rem 0;
  cursor: pointer;
  transition: color .25s ease, border-color .25s ease, padding-left .25s ease;
}
.phrase:hover, .phrase.active { color: var(--leaf); border-color: var(--leaf); padding-left: 1rem; }
.root-split { position: absolute; right: 4vw; bottom: 12vh; width: min(62vw, 58rem); height: 18rem; opacity: .74; }
.thread { opacity: .22; transition: opacity .4s ease, stroke .4s ease; animation: drawVine 3.5s ease forwards; }
.thread.active { opacity: 1; stroke: var(--leaf); }

.deliberation {
  grid-template-columns: 1.1fr .9fr;
  align-items: center;
  background: radial-gradient(circle at 42% 50%, rgba(142, 219, 255, .16), transparent 23rem), #06111F;
}
.seed-chamber { position: relative; height: min(72vh, 45rem); margin-left: 8vw; }
.luminous-seed {
  position: absolute;
  left: 50%; top: 50%;
  width: clamp(8rem, 18vw, 16rem); height: clamp(12rem, 28vw, 24rem);
  transform: translate(-50%, -50%);
  border-radius: 48% 52% 45% 55% / 60% 42% 58% 40%;
  background: radial-gradient(circle at 50% 28%, var(--root), var(--verdict) 18%, rgba(116, 242, 180, .46) 36%, rgba(52, 35, 94, .18) 68%, transparent 72%);
  box-shadow: 0 0 70px rgba(142, 219, 255, .42), inset 0 0 42px rgba(5, 7, 10, .75);
  animation: pulseSeed 4s ease-in-out infinite;
}
.orbit-fragment {
  position: absolute;
  left: 50%; top: 50%;
  font-family: var(--mono);
  color: var(--glass);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .45rem .6rem;
  border: 1px solid rgba(199, 242, 255, .22);
  background: rgba(5, 7, 10, .5);
  animation: orbit 16s linear infinite;
}
.f2 { animation-duration: 21s; animation-delay: -4s; }
.f3 { animation-duration: 18s; animation-delay: -9s; }
.f4 { animation-duration: 24s; animation-delay: -14s; }
.deliberation-copy { width: min(34rem, 86vw); padding: clamp(1.3rem, 3vw, 2.7rem); z-index: 4; }

.verdict {
  min-height: 100vh;
  place-items: center;
  background: radial-gradient(circle at 84% 62%, rgba(116, 242, 180, .13), transparent 21rem), var(--ink);
}
.airlock-line { position: absolute; top: 0; bottom: 0; right: 18vw; width: 1px; background: linear-gradient(transparent, var(--leaf), var(--verdict), transparent); box-shadow: 0 0 25px var(--leaf); }
.final-pane { position: relative; z-index: 4; width: min(48rem, 86vw); padding: clamp(1.5rem, 4vw, 3.5rem); }
.final-pane h2 { font-size: clamp(2.3rem, 6vw, 6.5rem); }
.narrative-action.final { position: static; display: inline-block; margin-top: 1.5rem; }
.escape-vine { position: absolute; right: -10vw; bottom: 22vh; width: 55vw; height: 2px; background: linear-gradient(90deg, transparent, var(--leaf), var(--verdict)); box-shadow: 0 0 25px var(--leaf); transform: rotate(-12deg); }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

@keyframes underline { 0% { transform: scaleX(0); } 58% { transform: scaleX(1.05); } 72% { transform: scaleX(.91); } 100% { transform: scaleX(1); } }
@keyframes drawVine { to { stroke-dashoffset: 0; } }
@keyframes nodeBloom { to { opacity: 1; } }
@keyframes rotateRing { to { transform: rotate(360deg); } }
@keyframes pulseSeed { 0%, 100% { transform: translate(-50%, -50%) scale(.97); filter: brightness(.96); } 50% { transform: translate(-50%, -50%) scale(1.03); filter: brightness(1.18); } }
@keyframes orbit { from { transform: rotate(0deg) translateX(clamp(9rem, 24vw, 21rem)) rotate(0deg); } to { transform: rotate(360deg) translateX(clamp(9rem, 24vw, 21rem)) rotate(-360deg); } }

@media (max-width: 820px) {
  .case-nav { display: none; }
  .corner-stamp { display: none; }
  .scene { grid-template-columns: 1fr; padding: 5rem 1.1rem; }
  .summons { align-items: end; }
  .specimen-hero { width: 86vw; right: -10vw; opacity: .45; }
  .hero-copy, .glass-stack, .cross-copy, .seed-chamber { margin-left: 0; }
  .botanical-panel { width: 90vw; justify-self: center; order: -1; opacity: .75; }
  .note-a, .note-b { position: relative; inset: auto; margin-top: 1rem; transform: none; }
  .root-split { width: 92vw; right: 1rem; bottom: 4vh; }
  .deliberation-copy { margin-top: 2rem; }
}