:root {
  --ink: #07090F;
  --slate: #1E2A44;
  --chalk: #ECE8D8;
  --cyan: #82E6D6;
  --vellum: #B9B5A3;
  --red: #D94B4B;
  --violet: #6D5BD0;
  --serif: "Fraunces", serif;
  --sans: "Instrument Sans", sans-serif;
  --kr: "Noto Serif KR", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body {
  margin: 0;
  color: var(--chalk);
  background:
    radial-gradient(circle at 80% 8%, rgba(130, 230, 214, .12), transparent 28rem),
    radial-gradient(circle at 18% 64%, rgba(109, 91, 208, .12), transparent 30rem),
    var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image: repeating-radial-gradient(circle at 20% 30%, rgba(236,232,216,.22) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.inference-map {
  position: fixed;
  inset: 0 auto 0 0;
  width: 100vw;
  height: 100vh;
  z-index: 20;
  pointer-events: none;
  opacity: .95;
}

#inference-path, .inference-shadow {
  fill: none;
  vector-effect: non-scaling-stroke;
}

#inference-path {
  stroke: var(--cyan);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 12px rgba(130, 230, 214, .8));
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.inference-shadow {
  stroke: rgba(185, 181, 163, .22);
  stroke-width: .7;
  stroke-dasharray: 5 8;
}

.theorem-strip {
  position: fixed;
  z-index: 60;
  top: 50%;
  right: 1.2rem;
  transform: translateY(-50%);
  display: grid;
  gap: .75rem;
}

.strip-mark {
  width: 7.5rem;
  padding: .55rem .7rem;
  text-decoration: none;
  color: rgba(236, 232, 216, .48);
  border-left: 1px solid rgba(185, 181, 163, .35);
  background: rgba(7, 9, 15, .34);
  backdrop-filter: blur(12px);
  transition: color .4s ease, border-color .4s ease, transform .4s ease;
}

.strip-mark span { display: block; font-family: var(--kr); font-size: .72rem; }
.strip-mark b { display: block; font-weight: 500; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; }
.strip-mark.active { color: var(--cyan); border-color: var(--cyan); transform: translateX(-.55rem); }

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid rgba(185, 181, 163, .12);
}

.chamber h1, .chamber h2, .wordmark {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -.055em;
}

.premise-chamber {
  background: linear-gradient(160deg, rgba(30, 42, 68, .88), var(--ink) 64%);
}

.floor-grid {
  position: absolute;
  inset: 42% -20% -16%;
  transform: perspective(720px) rotateX(64deg) rotateZ(-7deg);
  background-image:
    linear-gradient(rgba(185,181,163,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,181,163,.12) 1px, transparent 1px);
  background-size: 5rem 5rem;
  opacity: .38;
}

.wordmark {
  position: absolute;
  left: 6vw;
  bottom: 10vh;
  font-size: clamp(4rem, 11vw, 13rem);
  color: var(--chalk);
  text-shadow: 0 1.2rem 3rem rgba(0,0,0,.55);
}

.invitation {
  position: absolute;
  left: 8vw;
  bottom: 7vh;
  margin: 0;
  color: var(--cyan);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .78rem;
}

.floating-premises { position: absolute; inset: 0; }
.premise-tile {
  position: absolute;
  width: 18rem;
  min-height: 8rem;
  padding: 1.1rem;
  border: 1px solid rgba(236, 232, 216, .27);
  border-radius: .25rem;
  background: linear-gradient(135deg, rgba(236,232,216,.14), rgba(130,230,214,.035));
  box-shadow: inset 0 0 2rem rgba(236,232,216,.04), 0 1rem 4rem rgba(0,0,0,.35);
  backdrop-filter: blur(11px);
  transform: translate3d(var(--drift-x, 0), var(--drift-y, 0), 0) rotate(var(--tilt, 0deg));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.premise-tile span { color: var(--cyan); font-weight: 700; letter-spacing: .16em; }
.premise-tile em { display: block; margin-top: 1.1rem; color: var(--chalk); font-family: var(--serif); font-size: 1.45rem; font-style: normal; line-height: 1.05; }
.tile-a { top: 10vh; right: 12vw; --tilt: -8deg; }
.tile-b { top: 26vh; right: 33vw; --tilt: 5deg; }
.tile-c { top: 43vh; right: 8vw; --tilt: 10deg; }
.tile-d { top: 15vh; right: 55vw; --tilt: -3deg; }

.chamber-label {
  position: absolute;
  left: 9vw;
  top: 13vh;
  max-width: 31rem;
}
.chamber-label small, .court-copy small { color: var(--vellum); letter-spacing: .18em; text-transform: uppercase; }
.chamber-label h1 { margin: .4rem 0; font-size: clamp(3rem, 7vw, 8rem); line-height: .86; }
.chamber-label p, .fork-caption, .mirror-title p, .gallery-center p, .court-copy p { color: rgba(236,232,216,.74); line-height: 1.7; }

.fork-chamber {
  background: radial-gradient(circle at 64% 46%, rgba(130,230,214,.1), transparent 24rem), linear-gradient(90deg, var(--ink), var(--slate));
  perspective: 1000px;
}
.hinge-plane {
  position: absolute;
  top: 18vh;
  width: min(34rem, 40vw);
  min-height: 58vh;
  padding: 3rem;
  border: 1px solid rgba(185,181,163,.3);
  background: rgba(236,232,216,.075);
  backdrop-filter: blur(14px);
  transform-style: preserve-3d;
  transition: transform .7s ease;
}
.plane-near { left: 13vw; transform: rotateY(-18deg) rotateZ(-2deg); }
.plane-far { right: 14vw; top: 28vh; transform: rotateY(24deg) rotateZ(4deg); opacity: .84; }
.fork-chamber.active .plane-near { transform: rotateY(-4deg) translateX(2vw); }
.fork-chamber.active .plane-far { transform: rotateY(8deg) translateX(-2vw); }
.operator { color: var(--cyan); font-size: clamp(5rem, 13vw, 14rem); font-family: var(--serif); line-height: .75; opacity: .7; }
.hinge-plane h2 { font-size: clamp(2.6rem, 5vw, 6rem); margin: 1rem 0; }
.hinge-plane i { font-family: var(--kr); color: var(--vellum); font-style: normal; }
.paper-gate { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 48%, rgba(185,181,163,.16) 49%, transparent 51%); pointer-events: none; }
.right-gate { transform: scaleX(-1); }
.fork-caption { position: absolute; left: 46vw; bottom: 12vh; max-width: 22rem; }

.mirror-chamber {
  background: radial-gradient(circle at 50% 50%, rgba(217,75,75,.12), transparent 18rem), var(--ink);
}
.semicircle { position: absolute; top: 16vh; width: 42vw; height: 68vh; border: 1px solid rgba(236,232,216,.2); }
.left-arc { left: 7vw; border-radius: 50% 0 0 50%; border-right: none; }
.right-arc { right: 7vw; border-radius: 0 50% 50% 0; border-left: none; }
.mirror-crack { position: absolute; left: 50%; top: 12vh; width: 2px; height: 76vh; background: var(--red); box-shadow: 0 0 24px rgba(217,75,75,.76); transform: translateX(-50%) scaleY(.2); transform-origin: top; transition: transform 1s ease; }
.mirror-chamber.active .mirror-crack { transform: translateX(-50%) scaleY(1); }
.mirror-crack:before, .mirror-crack:after { content:""; position:absolute; width: 5rem; height: 1px; background: var(--red); top: 37%; }
.mirror-crack:before { right: 0; transform: rotate(-34deg); }
.mirror-crack:after { left: 0; top: 62%; transform: rotate(31deg); }
.refraction { position: absolute; font-family: var(--serif); font-size: clamp(4rem, 12vw, 12rem); color: rgba(236,232,216,.09); }
.refraction-one { left: 8vw; bottom: 15vh; transform: scaleX(-1); }
.refraction-two { right: 8vw; top: 14vh; }
.mirror-title { position: absolute; left: 14vw; top: 24vh; max-width: 27rem; }
.mirror-title span { font-family: var(--kr); color: var(--red); }
.mirror-title h2 { font-size: clamp(3rem, 7vw, 8rem); line-height: .85; margin: .3rem 0; }

.quantifier-chamber {
  background: linear-gradient(180deg, var(--slate), var(--ink));
}
.gallery-center { position: absolute; inset: 0; margin: auto; width: min(33rem, 70vw); height: 20rem; display: grid; place-items: center; text-align: center; z-index: 2; }
.gallery-center h2 { font-size: clamp(3rem, 6vw, 7rem); line-height: .85; margin: 0; }
.empty-circle { position: absolute; width: 18rem; height: 18rem; border: 1px solid rgba(130,230,214,.5); border-radius: 50%; box-shadow: inset 0 0 3rem rgba(130,230,214,.08); }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(185,181,163,.18); border-radius: 50%; transform: translate(-50%, -50%); animation: orbitSpin 28s linear infinite; }
.orbit-one { width: 32rem; height: 32rem; }
.orbit-two { width: 48rem; height: 48rem; animation-duration: 38s; animation-direction: reverse; }
.orbit-three { width: 66rem; height: 66rem; animation-duration: 54s; }
.glyph { position: absolute; width: 3.9rem; height: 3.9rem; border-radius: 50%; border: 1px solid rgba(130,230,214,.4); background: rgba(7,9,15,.72); color: var(--chalk); font-family: var(--kr); font-size: 1rem; box-shadow: 0 0 1.5rem rgba(130,230,214,.08); }
.glyph.selected { background: var(--cyan); color: var(--ink); transform: scale(1.18); }
.orbit .glyph:nth-child(1) { left: 50%; top: -2rem; }
.orbit .glyph:nth-child(2) { right: 0; top: 20%; }
.orbit .glyph:nth-child(3) { right: 10%; bottom: 8%; }
.orbit .glyph:nth-child(4) { left: 8%; bottom: 12%; }
.orbit .glyph:nth-child(5) { left: -1rem; top: 25%; }
.orbit .glyph:nth-child(6) { left: 25%; top: 4%; }
@keyframes orbitSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.therefore-chamber {
  background: radial-gradient(circle at 50% 28%, rgba(109,91,208,.26), transparent 22rem), linear-gradient(180deg, var(--ink), var(--slate));
}
.bracket-architecture { position: absolute; inset: 0; color: rgba(185,181,163,.16); font-family: var(--serif); font-size: clamp(18rem, 38vw, 44rem); line-height: 1; }
.bracket { position: absolute; }
.b1 { left: 3vw; top: 6vh; } .b2 { right: 3vw; top: 6vh; }
.b3 { left: 16vw; top: 18vh; } .b4 { right: 16vw; top: 18vh; }
.b5 { left: 30vw; top: 30vh; } .b6 { right: 30vw; top: 30vh; }
.court-floor { position: absolute; left: 8vw; right: 8vw; bottom: 7vh; height: 18vh; border-top: 1px solid rgba(236,232,216,.18); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(236,232,216,.08), transparent 64%); }
.seal { position: absolute; left: 50%; top: 13vh; transform: translate(-50%, -18rem); width: 13rem; height: 13rem; border-radius: 50%; display: grid; place-items: center; align-content: center; gap: .1rem; background: radial-gradient(circle at 36% 28%, #ECE8D8 0 3%, var(--violet) 4% 68%, #1E2A44 69%); color: var(--chalk); box-shadow: 0 0 4rem rgba(109,91,208,.65), inset 0 -.7rem 1.7rem rgba(7,9,15,.34); transition: transform 1.2s cubic-bezier(.18,.9,.2,1.15); }
.therefore-chamber.active .seal { transform: translate(-50%, 0); }
.seal span { font-family: var(--serif); font-size: 3.2rem; line-height: .8; }
.seal strong { font-family: var(--serif); font-size: 1.55rem; }
.seal em { font-family: var(--kr); font-style: normal; color: rgba(236,232,216,.8); }
.court-copy { position: absolute; left: 10vw; bottom: 14vh; max-width: 34rem; }
.court-copy h2 { font-size: clamp(3rem, 7vw, 8rem); line-height: .85; margin: .6rem 0; }

@media (max-width: 800px) {
  .theorem-strip { right: .5rem; }
  .strip-mark { width: 4.5rem; }
  .strip-mark b { display: none; }
  .premise-tile { width: 13rem; }
  .hinge-plane { width: 74vw; left: 10vw; right: auto; padding: 1.5rem; }
  .plane-far { top: 48vh; }
  .orbit-two, .orbit-three { width: 38rem; height: 38rem; }
}