:root {
  /* typography compliance tokens: IBM Plex Mono only for tiny coordinates or calibration marks so the design avoids the overused mono-heavy feel. IBM Plex Sans** for interface labels */
  --ink: #0B1020;
  --plaster: #F4EFE3;
  --red: #E84A5F;
  --teal: #00BFA6;
  --yellow: #F6C945;
  --violet: #6C63FF;
  --graphite: #2A2E3F;
  --progress: 0;
  --lens-x: 0px;
  --lens-y: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--plaster);
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(11, 16, 32, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 16, 32, .045) 1px, transparent 1px);
  background-size: calc(42px + var(--progress) * 24px) calc(42px + var(--progress) * 24px);
  transform: translate(calc(var(--progress) * -38px), calc(var(--progress) * 28px)) rotate(calc(var(--progress) * 1deg));
  z-index: 1;
}

.cursor-orbit {
  position: fixed;
  width: 28px;
  height: 28px;
  border: 2px solid var(--violet);
  border-radius: 50%;
  translate: -50% -50%;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: multiply;
  opacity: .72;
}

.chamber-marks {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mark {
  width: 18px;
  height: 18px;
  border: 2px solid var(--ink);
  background: var(--plaster);
  transform: rotate(45deg);
  cursor: pointer;
  position: relative;
  transition: background .35s, transform .35s, border-color .35s;
}

.mark span {
  position: absolute;
  right: 24px;
  top: -5px;
  transform: rotate(-45deg);
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  transition: opacity .25s;
}

.mark.active, .mark:hover { background: var(--red); border-color: var(--red); transform: rotate(90deg) scale(1.2); }
.mark:hover span, .mark.active span { opacity: 1; }

.chamber {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--plaster);
  padding: 7vw;
}

.chamber:nth-child(even) { background: var(--ink); color: var(--plaster); }
.chamber:nth-child(even) .mark, .chamber:nth-child(even) .coordinate { color: var(--plaster); }

.wordmark {
  position: absolute;
  left: 7vw;
  top: 18vh;
  margin: 0;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(54px, 11vw, 170px);
  line-height: .86;
  letter-spacing: -.08em;
  max-width: 8ch;
  transform: translate(var(--shift-x), var(--shift-y)) rotate(var(--angle));
  z-index: 5;
}

.wordmark span { color: var(--red); display: block; margin-left: 18vw; }

.literata, .essay h2, .essay p, .thesis, .final-copy h2 { font-family: "Literata", serif; }

.thesis {
  position: absolute;
  right: 10vw;
  bottom: 13vh;
  width: min(410px, 70vw);
  font-size: clamp(24px, 3vw, 46px);
  line-height: 1.05;
  z-index: 6;
}

.coordinate, .micro, .axis-label, .pin, .impossible-ruler span {
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}

.coordinate { position: absolute; left: 9vw; bottom: 8vh; color: var(--graphite); z-index: 6; }

.calibration-gate {
  position: absolute;
  inset: 8vh 12vw 10vh 5vw;
  border: 3px solid var(--ink);
  transform: skewY(-7deg) rotate(-2deg);
  opacity: .9;
}

.calibration-gate span { position: absolute; width: 34px; height: 34px; border: 4px solid var(--red); }
.calibration-gate span:nth-child(1) { left: -18px; top: -18px; }
.calibration-gate span:nth-child(2) { right: -18px; top: 18%; border-color: var(--teal); }
.calibration-gate span:nth-child(3) { left: 43%; bottom: -18px; border-color: var(--yellow); }
.calibration-gate span:nth-child(4) { right: 12%; bottom: 20%; border-color: var(--violet); }

.para-lens {
  position: absolute;
  border-radius: 50%;
  border: 4px solid currentColor;
  overflow: hidden;
  box-shadow: 0 0 0 12px rgba(108, 99, 255, .12);
}

.hero-lens {
  width: clamp(280px, 42vw, 620px);
  aspect-ratio: 1;
  right: 6vw;
  top: 11vh;
  color: var(--ink);
  transform: translate(calc(var(--lens-x) * .025), calc(var(--lens-y) * .025)) rotate(calc(-10deg + var(--progress) * 30deg));
  z-index: 4;
}

.lens-plane { position: absolute; inset: 0; opacity: .86; mix-blend-mode: multiply; }
.lens-plane.red { background: var(--red); clip-path: polygon(0 0, 60% 0, 42% 100%, 0 100%); }
.lens-plane.teal { background: var(--teal); clip-path: polygon(40% 0, 100% 16%, 100% 100%, 55% 100%); }
.lens-plane.yellow { background: var(--yellow); clip-path: polygon(0 58%, 100% 37%, 100% 100%, 0 100%); }
.lens-plane.violet { background: var(--violet); clip-path: polygon(0 0, 100% 0, 72% 100%, 8% 70%); }
.lens-bar { position: absolute; top: -8%; bottom: -8%; left: 43%; width: 16%; background: currentColor; transform: rotate(3deg); }

.registration-cross { position: absolute; width: 96px; height: 96px; z-index: 3; }
.registration-cross::before, .registration-cross::after { content: ""; position: absolute; background: var(--ink); }
.registration-cross::before { left: 45px; top: 0; width: 5px; height: 96px; }
.registration-cross::after { top: 45px; left: 0; height: 5px; width: 96px; }
.cross-a { left: 12vw; top: 62vh; transform: rotate(6deg); }
.cross-b { right: 23vw; bottom: 10vh; transform: rotate(-17deg); opacity: .45; }
.axis-label { position: absolute; padding: 8px 12px; border: 1px solid var(--ink); background: var(--plaster); z-index: 7; }
.label-one { left: 59vw; top: 15vh; }
.label-two { left: 18vw; top: 75vh; color: var(--red); }

.chapter {
  position: absolute;
  left: 5vw;
  top: 5vh;
  font-family: "Unbounded", sans-serif;
  font-size: clamp(90px, 18vw, 260px);
  line-height: 1;
  color: rgba(246, 201, 69, .92);
  z-index: 0;
}

.orbit-system { position: absolute; width: 62vw; height: 62vw; left: 3vw; top: 12vh; max-height: 78vh; max-width: 78vh; }
.orbit-lens { width: 36%; aspect-ratio: 1; left: 32%; top: 32%; color: var(--plaster); animation: lensSpin 16s linear infinite; }
.orbit-ring { position: absolute; inset: 8%; border: 2px solid rgba(244, 239, 227, .6); border-radius: 50%; animation: orbit 22s linear infinite; }
.orbit-ring span { position: absolute; left: 50%; top: -10px; font-family: "IBM Plex Mono", monospace; color: var(--yellow); background: var(--ink); padding: 4px 8px; }
.ring-two { inset: 19%; animation-duration: 15s; animation-direction: reverse; border-color: var(--teal); }
.ring-three { inset: 31%; animation-duration: 10s; border-color: var(--red); }

.axis-drawing { position: absolute; inset: 16vh 6vw 10vh 18vw; width: 76vw; height: 68vh; z-index: 1; }
.draw-path { fill: none; stroke: var(--yellow); stroke-width: 5; stroke-dasharray: 1200; stroke-dashoffset: calc(1200 - var(--progress) * 1200); }
.draw-path.secondary { stroke: rgba(244, 239, 227, .5); stroke-width: 2; }

.essay { position: absolute; z-index: 4; width: min(440px, 70vw); }
.essay h2 { font-size: clamp(32px, 4.2vw, 62px); line-height: .98; margin: 0 0 22px; font-weight: 600; }
.essay p:not(.micro) { font-size: 18px; line-height: 1.45; }
.orbit-copy { right: 8vw; bottom: 12vh; }
.micro { color: var(--red); margin: 0 0 16px; }

.plates { position: absolute; inset: 12vh 14vw 12vh 10vw; transform: rotate(-7deg); }
.plate { position: absolute; width: 42vw; height: 28vh; padding: 22px; font-family: "Unbounded", sans-serif; font-size: clamp(34px, 7vw, 100px); border: 3px solid var(--ink); mix-blend-mode: multiply; display: flex; align-items: end; }
.plate-red { background: rgba(232, 74, 95, .72); left: 4vw; top: 3vh; }
.plate-teal { background: rgba(0, 191, 166, .68); right: 4vw; top: 25vh; transform: rotate(12deg); }
.plate-yellow { background: rgba(246, 201, 69, .75); left: 18vw; bottom: 4vh; transform: rotate(-10deg); }
.split-lens { position: absolute; right: 11vw; top: 11vh; width: 30vw; height: 46vh; display: flex; gap: 8px; }
.half { flex: 1; overflow: hidden; border: 3px solid var(--ink); background: var(--plaster); }
.half.right { transform: scaleX(-1); background: var(--ink); color: var(--plaster); }
.mini { width: 24vw; aspect-ratio: 1; top: 8vh; left: -4vw; color: currentColor; }
.folded-strip { position: absolute; left: 8vw; bottom: 9vh; width: 80vw; display: flex; font-family: "Literata", serif; font-size: clamp(24px, 3.8vw, 56px); transform: perspective(900px) rotateX(24deg); }
.folded-strip span { flex: 1; padding: 28px; background: var(--ink); color: var(--plaster); border: 2px solid var(--plaster); }
.folded-strip span:nth-child(2) { background: var(--violet); transform: rotateY(-18deg); }
.inversion-coord { right: 8vw; left: auto; top: 8vh; bottom: auto; }

.scale { background: var(--plaster); }
.chapter.huge { right: -5vw; left: auto; top: -4vh; font-size: clamp(160px, 32vw, 520px); color: var(--red); opacity: .82; }
.impossible-ruler { position: absolute; left: 8vw; top: 15vh; width: 78vw; height: 42px; border-top: 5px solid var(--ink); display: flex; justify-content: space-between; transform: rotate(9deg); }
.impossible-ruler span { position: relative; padding-top: 18px; }
.impossible-ruler span::before { content: ""; position: absolute; top: -20px; left: 50%; width: 3px; height: 22px; background: var(--ink); }
.hinged-panel { position: absolute; border: 3px solid var(--ink); background: var(--plaster); box-shadow: 18px 18px 0 var(--yellow); transform-style: preserve-3d; transition: transform .4s; }
.panel-a { left: 12vw; top: 35vh; width: min(470px, 42vw); padding: 36px; transform: perspective(900px) rotateY(-16deg) rotateZ(-3deg); }
.panel-b { right: 11vw; bottom: 12vh; width: min(390px, 38vw); padding: 32px; font-family: "Literata", serif; font-size: 28px; transform: perspective(900px) rotateY(18deg) rotateZ(5deg); box-shadow: -18px 18px 0 var(--teal); }
.panel-a h2 { font-family: "Literata", serif; font-size: clamp(32px, 4vw, 56px); line-height: 1; margin: 0; }
.folded-seal { width: 190px; aspect-ratio: 1; left: 54vw; bottom: 22vh; color: var(--ink); transform: rotate(34deg); }
.aperture-wipe { position: absolute; inset: -20%; background: radial-gradient(circle at 60% 52%, transparent 0 17%, rgba(11, 16, 32, .92) 17.4% 100%); transform: scale(calc(.7 + var(--progress) * .55)); opacity: .22; pointer-events: none; }

.mirror { background: var(--ink); color: var(--plaster); }
.mirror-field { position: absolute; inset: 10vh 8vw; display: grid; grid-template-columns: 1fr 6px 1fr; gap: 4vw; }
.mirror-side { position: relative; border: 3px solid currentColor; overflow: hidden; }
.side-left { transform: skewY(-6deg); background: linear-gradient(115deg, rgba(232, 74, 95, .35) 0 48%, transparent 48%); }
.side-right { transform: skewY(6deg); background: linear-gradient(245deg, rgba(0, 191, 166, .35) 0 48%, transparent 48%); }
.big-label { position: absolute; font-family: "Unbounded", sans-serif; font-size: clamp(42px, 8vw, 120px); bottom: 6vh; left: 3vw; letter-spacing: -.06em; }
.side-right .big-label { right: 3vw; left: auto; transform: scaleX(-1); color: var(--yellow); }
.mirror-spine { background: var(--plaster); box-shadow: 0 0 0 10px rgba(108, 99, 255, .35); transform: rotate(calc(var(--progress) * 8deg)); }
.bracket { position: absolute; width: 32%; height: 54%; border: 10px solid var(--yellow); border-left: 0; right: 7%; top: 16%; }
.side-right .bracket { left: 7%; right: auto; border-left: 10px solid var(--red); border-right: 0; }
.mirror-copy { left: 11vw; top: 13vh; color: var(--plaster); }
.mirror-lens { width: 230px; aspect-ratio: 1; right: 17vw; top: 22vh; color: var(--plaster); animation: lensPulse 5s ease-in-out infinite; }

.convergence { background: var(--plaster); color: var(--ink); }
.constellation { position: absolute; inset: 10vh 9vw; border: 2px solid rgba(42, 46, 63, .2); }
.quiet-line { position: absolute; background: var(--graphite); transform-origin: center; opacity: .75; }
.horizontal { height: 3px; left: 8%; right: 8%; top: 50%; }
.vertical { width: 3px; top: 7%; bottom: 7%; left: 55%; }
.diagonal { height: 3px; left: 14%; right: 18%; top: 48%; transform: rotate(-26deg); background: var(--violet); }
.final-symbol { width: clamp(230px, 28vw, 420px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); color: var(--ink); }
.pin { position: absolute; background: var(--plaster); border: 1px solid var(--ink); padding: 7px 10px; }
.pin-a { left: 18%; top: 22%; }.pin-b { right: 16%; top: 19%; }.pin-c { left: 25%; bottom: 16%; }.pin-d { right: 21%; bottom: 24%; color: var(--red); }
.final-copy { position: absolute; left: 8vw; bottom: 8vh; width: min(570px, 76vw); }
.final-copy h2 { font-size: clamp(36px, 5vw, 72px); line-height: .98; margin: 0 0 26px; }
.next-frame { font-family: "IBM Plex Mono", monospace; color: var(--ink); text-decoration: none; border: 2px solid var(--ink); padding: 12px 18px; display: inline-block; background: var(--yellow); transform: rotate(-2deg); }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes lensSpin { to { transform: rotate(360deg); } }
@keyframes lensPulse { 0%, 100% { clip-path: circle(50% at 50% 50%); } 50% { clip-path: circle(35% at 43% 50%); } }

@media (max-width: 760px) {
  .chamber { padding: 28px; }
  .chamber-marks { right: 10px; }
  .wordmark { left: 4vw; top: 16vh; }
  .hero-lens { right: -20vw; top: 34vh; }
  .thesis { left: 8vw; right: auto; bottom: 8vh; }
  .orbit-system { width: 86vw; height: 86vw; left: -10vw; top: 18vh; }
  .essay { width: 76vw; right: auto; left: 8vw; bottom: 8vh; }
  .plate { width: 70vw; }
  .split-lens { right: -12vw; width: 62vw; }
  .folded-strip { flex-direction: column; font-size: 26px; }
  .panel-a, .panel-b { width: 75vw; left: 8vw; right: auto; }
  .panel-b { bottom: 9vh; }
  .mirror-field { inset: 16vh 8vw 8vh; gap: 12px; }
  .mirror-lens { right: 6vw; top: 12vh; width: 160px; }
}