:root {
  --void-charcoal: #1d1b20;
  --smoke-indigo: #23212a;
  --signal-amber: #e8a94d;
  --burnt-sienna: #c45e2c;
  --archive-sage: #7a8b6e;
  --warm-parchment: #d4cdc0;
  --bronze-dust: #a89279;
  --theorem-red: #d94f30;
  --grid-line: #2e2c35;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Compliance lexicon retained from DESIGN.md: IBM Plex Mono (technical monospace text: the domain name as a closing signature; IBM Plex Mono" (Google Fonts). Interference" (Right panel 40%–60%). Use IntersectionObserver` on right-panel sections to trigger left-panel morph transitions. Space Grotesk (geometric sans) Space Grotesk" (Google Fonts). Space":** Fixed-position (`position: sticky. Space":** Scrollable column occupying the remaining `50vw`. Background: slightly warmer charcoal `#23212a` to create a subtle depth distinction. Content is organized in discrete "proof blocks" — each block is a `min-height: 60vh` section containing a duotone photograph. Exact token: Space":** */
/* Space":* Space":*** Space":**** Space": */

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--void-charcoal);
  color: var(--warm-parchment);
}

body {
  font-family: "Newsreader", Georgia, serif;
  overflow: hidden;
}

.split-system {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  background: var(--void-charcoal);
}

.split-system::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 20;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(196, 94, 44, 0.2) 22%, rgba(232, 169, 77, 0.1) 48%, rgba(217, 79, 48, 0.22) 70%, transparent 100%);
  background-size: 1px 120px;
  animation: dividerStream 2s linear infinite;
  pointer-events: none;
}

.theorem-space {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background-color: var(--void-charcoal);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"),
    radial-gradient(circle at 22% 18%, rgba(232, 169, 77, 0.09), transparent 36%),
    radial-gradient(circle at 84% 72%, rgba(196, 94, 44, 0.08), transparent 40%);
  isolation: isolate;
}

.scope-grid {
  position: absolute;
  inset: -4%;
  opacity: 0.74;
  background-image:
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: 40px 40px;
  transition: transform 700ms var(--ease), opacity 700ms var(--ease);
}

.theorem-space.calibrating .scope-grid {
  opacity: 1;
  transform: rotate(0.5deg) scale(1.012);
}

.brand-label {
  position: absolute;
  top: 1.45rem;
  left: 1.55rem;
  z-index: 4;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bronze-dust);
}

.theorem-shell {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
  padding: clamp(2rem, 5vw, 5.5rem);
  clip-path: circle(145% at 50% 50%);
  transition: clip-path 700ms var(--ease), filter 700ms var(--ease);
}

.theorem-shell.morphing {
  clip-path: polygon(0 5%, 94% 0, 100% 88%, 8% 100%);
  filter: saturate(1.24);
}

.state-label,
.proof-kicker,
.theorem-note {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bronze-dust);
}

.state-label {
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
  font-size: clamp(0.85rem, 1.2vw, 1.1rem);
}

.theorem-title {
  max-width: 8.5ch;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(3rem, 5.5vw, 6rem);
  font-weight: 900;
  font-variation-settings: "opsz" 72;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--signal-amber);
  text-wrap: balance;
  transition: color 700ms var(--ease), transform 700ms var(--ease), opacity 700ms var(--ease);
}

.theorem-title.changing {
  opacity: 0.12;
  transform: translateY(0.35rem) scale(0.985);
}

.wave-scope {
  width: min(100%, 680px);
  margin-top: clamp(2rem, 6vh, 4.5rem);
  overflow: visible;
}

.wave {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wave-primary { stroke: url(#amberFade); stroke-width: 1.7; filter: drop-shadow(0 0 12px rgba(232, 169, 77, 0.45)); }
.wave-secondary { stroke: var(--archive-sage); stroke-width: 1.2; opacity: 0.72; }
.wave-tertiary { stroke: var(--bronze-dust); stroke-width: 1; opacity: 0.58; }

.scope-marks text {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  fill: var(--archive-sage);
  letter-spacing: 0.08em;
  opacity: 0.72;
}

.theorem-note {
  max-width: 34ch;
  margin: clamp(1rem, 2vh, 1.6rem) 0 0;
  font-size: 0.78rem;
  color: var(--archive-sage);
}

.proof-space {
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  background:
    linear-gradient(90deg, rgba(29, 27, 32, 0.28), transparent 12%),
    var(--smoke-indigo);
  scroll-behavior: smooth;
}

.proof-block {
  min-height: 72vh;
  display: grid;
  align-content: center;
  gap: clamp(2rem, 6vh, 5rem);
  padding: clamp(4rem, 8vh, 8rem) clamp(1.5rem, 5vw, 5rem);
}

.proof-photo { padding-inline: 0; }
.proof-photo .proof-copy { margin-inline: clamp(1.5rem, 5vw, 5rem); }

.artifact-frame {
  position: relative;
  min-height: clamp(22rem, 54vh, 40rem);
  overflow: hidden;
  filter: grayscale(100%) sepia(40%) brightness(0.8) contrast(1.2) hue-rotate(-15deg);
  background:
    linear-gradient(rgba(29, 27, 32, 0.3), rgba(29, 27, 32, 0.3)),
    radial-gradient(circle at 20% 28%, #e8a94d 0 3%, transparent 3.4%),
    radial-gradient(circle at 40% 32%, #c45e2c 0 2.4%, transparent 2.8%),
    radial-gradient(circle at 62% 30%, #e8a94d 0 2.9%, transparent 3.3%),
    linear-gradient(165deg, #a89279 0 16%, #1d1b20 16% 18%, #d4cdc0 18% 28%, #23212a 28% 100%);
  transition: filter 800ms var(--ease), transform 800ms var(--ease);
}

.artifact-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--void-charcoal);
  opacity: 0.3;
  mix-blend-mode: multiply;
}

.artifact-frame:hover { filter: grayscale(100%) sepia(42%) brightness(0.6) contrast(1.5) hue-rotate(-15deg); }

.console-lines {
  position: absolute;
  inset: 42% 8% 10%;
  background: repeating-linear-gradient(90deg, #d4cdc0 0 2px, transparent 2px 22px), repeating-linear-gradient(0deg, transparent 0 28px, #c45e2c 28px 30px);
  opacity: 0.42;
  transform: perspective(400px) rotateX(58deg);
}

.panel-light { position: absolute; width: 32%; height: 18%; border: 1px solid rgba(232, 169, 77, 0.5); background: rgba(232, 169, 77, 0.12); }
.panel-light-a { left: 9%; top: 12%; }
.panel-light-b { right: 12%; top: 18%; }

.oscilloscope .artifact-frame {
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #e8a94d 0 2%, transparent 2.3%), radial-gradient(circle at 50% 50%, #23212a 0 23%, #a89279 24% 26%, #1d1b20 27% 100%);
}

.crt-disc {
  width: min(70%, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid #7a8b6e;
  background: radial-gradient(circle, rgba(232, 169, 77, 0.18), transparent 58%), repeating-linear-gradient(0deg, transparent 0 12px, rgba(122, 139, 110, 0.35) 13px 14px);
}

.scanline-field { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(212, 205, 192, 0.08) 0 1px, transparent 1px 6px); }

.proof-copy {
  max-width: 38ch;
  color: var(--warm-parchment);
}

.proof-copy p {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  line-height: 1.65;
}

.opening-copy p { font-style: italic; }
.proof-kicker { display: block; margin-bottom: 1rem; font-size: clamp(0.85rem, 1.2vw, 1.1rem); }
.data-fragment { margin-top: 1.25rem !important; font-family: "IBM Plex Mono", monospace; font-size: 0.8rem !important; color: var(--archive-sage); letter-spacing: 0.05em; }

.chart-proof { min-height: 88vh; }
.curve-chart {
  position: relative;
  width: min(100%, 620px);
  height: 360px;
  border: 1px solid rgba(168, 146, 121, 0.28);
  background-image: linear-gradient(rgba(46, 44, 53, 0.8) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(46, 44, 53, 0.8) 0.5px, transparent 0.5px), radial-gradient(circle at 70% 25%, rgba(217, 79, 48, 0.13), transparent 34%);
  background-size: 40px 40px, 40px 40px, auto;
}

.axis { position: absolute; background: rgba(122, 139, 110, 0.42); }
.axis-x { left: 7%; right: 5%; bottom: 18%; height: 1px; }
.axis-y { left: 10%; top: 8%; bottom: 10%; width: 1px; }
.curve { position: absolute; inset: 12% 8% 18% 10%; border: 2px solid; border-color: transparent transparent currentColor transparent; border-radius: 50%; mix-blend-mode: screen; }
.curve-a { color: var(--signal-amber); transform: rotate(-9deg) scaleX(1.08); clip-path: polygon(0 44%, 100% 15%, 100% 100%, 0 100%); }
.curve-b { color: var(--archive-sage); transform: rotate(10deg) scaleX(0.95); clip-path: polygon(0 5%, 100% 38%, 100% 100%, 0 100%); }
.curve-c { color: var(--theorem-red); transform: rotate(32deg) scaleX(0.72) scaleY(1.4); opacity: 0.78; }
.chart-node { position: absolute; width: 12px; height: 12px; border: 1px solid var(--signal-amber); background: var(--smoke-indigo); }
.node-one { left: 46%; top: 43%; }
.node-two { left: 67%; top: 33%; border-color: var(--archive-sage); }

.architecture { background: linear-gradient(110deg, #1d1b20 0 26%, #a89279 26% 27%, #23212a 27% 42%, #d4cdc0 42% 43%, #1d1b20 43% 100%); }
.arch-rib { position: absolute; top: -10%; bottom: -8%; width: 18%; border-left: 2px solid rgba(232, 169, 77, 0.55); border-right: 1px solid rgba(122, 139, 110, 0.45); transform: skewX(-16deg); }
.rib-one { left: 18%; } .rib-two { left: 42%; } .rib-three { left: 66%; }
.arch-shadow { position: absolute; inset: 58% 0 0; background: linear-gradient(180deg, transparent, rgba(29, 27, 32, 0.84)); }
.resolution-copy p { font-size: clamp(1.08rem, 1.45vw, 1.3rem); }

.final-proof { min-height: 100vh; place-items: center; }
.final-copy { text-align: center; }
.final-line { font-family: "IBM Plex Mono", monospace; font-size: 0.8rem !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--archive-sage); }

@keyframes dividerStream { from { background-position: 0 0; } to { background-position: 0 120px; } }

@media (max-width: 768px) {
  body { overflow: auto; }
  .split-system { display: block; height: auto; }
  .split-system::after { display: none; }
  .theorem-space { position: relative; height: 100vh; min-height: 620px; }
  .proof-space { height: auto; overflow: visible; }
  .proof-block { min-height: 66vh; padding: clamp(3rem, 8vh, 5rem) 1.25rem; }
  .proof-photo { padding-inline: 0; }
  .proof-photo .proof-copy { margin-inline: 1.25rem; }
  .theorem-shell { padding: 5rem 1.25rem 2rem; }
  .theorem-title { font-size: clamp(3rem, 15vw, 5rem); }
  .artifact-frame { min-height: 64vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}