:root {
  --proof-paper: #F4F0E6;
  --ink-black: #171411;
  --moon-slate: #46566A;
  --verdigris-logic: #2F7F73;
  --contradiction-carmine: #B63A46;
  --brass-lemma: #C19A4A;
  --well-blue: #0E2A3A;
  --serif: "Instrument Serif", serif;
  --sans: "Manrope", sans-serif;
  --kr: "Noto Serif KR", serif;
  --display: "Fraunces", serif;
}

* { box-sizing: border-box; }

html {
  background: var(--proof-paper);
  color: var(--ink-black);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  background:
    radial-gradient(circle at 18% 8%, rgba(193, 154, 74, .16), transparent 34vw),
    linear-gradient(115deg, rgba(70, 86, 106, .08), transparent 45%),
    var(--proof-paper);
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .38;
  background-image:
    repeating-linear-gradient(73deg, rgba(23, 20, 17, .035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(244, 240, 230, .4) 0 2px, rgba(23, 20, 17, .018) 2px 3px);
  mix-blend-mode: multiply;
}

.lantern-cursor {
  position: fixed;
  width: 34vw;
  height: 34vw;
  left: -17vw;
  top: -17vw;
  pointer-events: none;
  z-index: 4;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(193, 154, 74, .18), rgba(244, 240, 230, .06) 34%, transparent 68%);
  transform: translate3d(var(--cursor-x, 50vw), var(--cursor-y, 50vh), 0);
  transition: opacity .4s ease;
}

.theorem-rail {
  position: fixed;
  z-index: 6;
  left: clamp(18px, 3vw, 42px);
  top: 4vh;
  bottom: 4vh;
  width: 42px;
  border-left: 1px solid rgba(70, 86, 106, .42);
  border-right: 1px solid rgba(193, 154, 74, .52);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  color: var(--moon-slate);
  background: rgba(244, 240, 230, .38);
  backdrop-filter: blur(5px);
}

.rail-title {
  writing-mode: vertical-rl;
  font: 700 11px/1 var(--sans);
  letter-spacing: .34em;
}

.rail-mark {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 86, 106, .35);
  border-radius: 50%;
  font: 500 10px/1 var(--sans);
  transition: .5s ease;
}

.rail-mark.active {
  color: var(--proof-paper);
  background: var(--verdigris-logic);
  border-color: var(--brass-lemma);
  box-shadow: 0 0 0 5px rgba(47, 127, 115, .14);
}

.proof-lines {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 100%;
  height: 500vh;
  pointer-events: none;
  overflow: visible;
}

.main-proof-path,
.branch-line {
  fill: none;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.main-proof-path {
  stroke: var(--ink-black);
  stroke-width: 2.2;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--path-progress, .02));
  opacity: .78;
}

.branch-line {
  stroke: var(--brass-lemma);
  stroke-width: 1.4;
  stroke-dasharray: 11 16;
  opacity: .42;
  transition: opacity .6s ease, stroke .6s ease;
}

body.room-1 .branch-a,
body.room-2 .branch-b,
body.room-2 .branch-c,
body.room-4 .branch-d {
  opacity: .88;
  stroke: var(--verdigris-logic);
}

body.room-3 .branch-c {
  opacity: .9;
  stroke: var(--contradiction-carmine);
  filter: blur(.4px);
}

.room {
  position: relative;
  min-height: 100vh;
  padding: clamp(70px, 10vh, 120px) clamp(28px, 7vw, 110px) clamp(58px, 9vh, 100px) clamp(92px, 13vw, 180px);
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(260px, .58fr);
  grid-template-rows: auto 1fr;
  gap: clamp(20px, 4vw, 70px);
  isolation: isolate;
  overflow: hidden;
}

.room::before {
  content: "";
  position: absolute;
  inset: clamp(20px, 4vw, 54px);
  border: 1px solid rgba(70, 86, 106, .24);
  transform: skewY(-2deg);
  pointer-events: none;
  z-index: -1;
}

.room-label {
  grid-column: 1 / -1;
  display: flex;
  gap: 18px;
  align-items: baseline;
  color: var(--moon-slate);
  letter-spacing: .14em;
  text-transform: uppercase;
  font: 700 12px/1 var(--sans);
}

.room-label em {
  font: 400 15px/1 var(--kr);
  letter-spacing: .05em;
  color: var(--verdigris-logic);
}

h1, h2, p { margin: 0; }

h1,
h2 {
  font-family: var(--serif);
  font-weight: 400;
}

small,
.lemma-number {
  display: block;
  font: 700 11px/1.3 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--moon-slate);
}

.opening-stamp {
  align-self: center;
  transform: rotate(-2deg);
  border: 1px solid rgba(193, 154, 74, .75);
  padding: clamp(22px, 4vw, 48px);
  max-width: 670px;
  background: rgba(244, 240, 230, .72);
  box-shadow: 18px 18px 0 rgba(70, 86, 106, .07);
}

.opening-stamp h1 {
  font-size: clamp(76px, 13vw, 178px);
  line-height: .78;
  letter-spacing: -.055em;
  color: var(--ink-black);
}

.opening-stamp p:last-child {
  margin-top: 24px;
  max-width: 350px;
  font-size: clamp(17px, 1.6vw, 24px);
  color: var(--moon-slate);
}

.folded-screen,
.vellum-sheet,
.theorem-window,
.false-branch,
.conclusion {
  position: relative;
  background: linear-gradient(132deg, rgba(255,255,255,.34), rgba(244,240,230,.64) 42%, rgba(70,86,106,.07));
  border: 1px solid rgba(70, 86, 106, .33);
  box-shadow: 0 30px 70px rgba(23, 20, 17, .1);
  transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .8s ease, border-color .8s ease;
}

.statement.is-lit {
  border-color: var(--verdigris-logic);
  filter: drop-shadow(0 0 18px rgba(47, 127, 115, .19));
}

.statement h2,
.conclusion h2 {
  font-size: clamp(39px, 5vw, 82px);
  line-height: .95;
  letter-spacing: -.025em;
}

.statement p,
.conclusion p,
.well-note {
  margin-top: 20px;
  max-width: 430px;
  color: var(--moon-slate);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.65;
}

.screen-one {
  grid-column: 2;
  align-self: end;
  padding: clamp(24px, 4vw, 52px);
  transform: rotate(5deg) translateY(-7vh);
  clip-path: polygon(0 0, 86% 0, 100% 16%, 100% 100%, 0 100%);
}

.pin {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  right: 22px;
  top: 20px;
  background: var(--ink-black);
  box-shadow: 0 0 0 6px rgba(23, 20, 17, .08);
}

.brass-pin { background: var(--brass-lemma); }

.korean-note,
.margin-lemma,
.closing-marginalia {
  position: absolute;
  font-family: var(--kr);
  color: var(--moon-slate);
  writing-mode: vertical-rl;
  letter-spacing: .08em;
}

.note-top { right: 6vw; top: 14vh; }

.gate-frame {
  position: absolute;
  left: 14vw;
  bottom: 9vh;
  width: 33vw;
  height: 26vh;
  border: 1px solid rgba(23, 20, 17, .22);
  border-top-color: var(--brass-lemma);
  transform: perspective(600px) rotateX(62deg) rotateZ(-8deg);
}

.compass-arc {
  position: absolute;
  border: 1px solid var(--brass-lemma);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  opacity: .55;
}

.arc-one { width: 36vw; height: 36vw; right: -10vw; bottom: -16vw; }

.axiom-courtyard {
  background:
    linear-gradient(180deg, rgba(244, 240, 230, .94), rgba(244, 240, 230, .82)),
    radial-gradient(circle at 70% 30%, rgba(47, 127, 115, .14), transparent 30%);
}

.courtyard-stones {
  position: absolute;
  inset: auto 8vw 8vh 14vw;
  height: 36vh;
  opacity: .45;
}

.courtyard-stones span {
  position: absolute;
  width: 90px;
  height: 42px;
  border: 1px solid rgba(70, 86, 106, .35);
  border-radius: 50%;
  transform: rotate(var(--r));
}

.courtyard-stones span:nth-child(1) { left: 5%; bottom: 7%; --r: -9deg; }
.courtyard-stones span:nth-child(2) { left: 28%; bottom: 30%; --r: 14deg; }
.courtyard-stones span:nth-child(3) { left: 49%; bottom: 12%; --r: -17deg; }
.courtyard-stones span:nth-child(4) { left: 70%; bottom: 42%; --r: 7deg; }
.courtyard-stones span:nth-child(5) { left: 84%; bottom: 5%; --r: 22deg; }

.vellum-sheet { padding: clamp(25px, 4vw, 54px); backdrop-filter: blur(6px); }
.sheet-left { align-self: center; transform: rotate(-3deg); }
.sheet-right { grid-column: 2; align-self: start; transform: rotate(4deg) translateY(7vh); }

.scale {
  position: absolute;
  left: 47vw;
  bottom: 12vh;
  width: 300px;
  height: 190px;
  transform-origin: 50% 35%;
  transition: transform .9s ease;
}

body.room-1 .scale { transform: rotate(-3deg); }

.scale-beam,
.scale-post { position: absolute; background: var(--brass-lemma); }
.scale-beam { width: 270px; height: 3px; top: 45px; left: 15px; transform: rotate(2deg); }
.scale-post { width: 3px; height: 120px; top: 45px; left: 148px; }
.scale-pan {
  position: absolute;
  top: 86px;
  width: 82px;
  height: 28px;
  border: 1px solid var(--brass-lemma);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brass-lemma);
  font-family: var(--serif);
  font-size: 24px;
}
.pan-left { left: 0; }
.pan-right { right: 0; }
.margin-lemma { left: 8.5vw; bottom: 14vh; }

.inference-bridge {
  background: linear-gradient(135deg, var(--proof-paper), #e8e4d9 52%, rgba(70, 86, 106, .2));
}

.bridge-planks {
  position: absolute;
  left: 13vw;
  right: 10vw;
  top: 47vh;
  height: 18vh;
  transform: rotate(-12deg);
  display: flex;
  gap: 18px;
}

.bridge-planks i {
  flex: 1;
  border: 1px solid rgba(23, 20, 17, .18);
  background: rgba(193, 154, 74, .08);
}

.therefore-word {
  position: absolute;
  left: 18vw;
  top: 13vh;
  font-family: var(--display);
  font-size: clamp(80px, 15vw, 220px);
  line-height: .8;
  color: rgba(193, 154, 74, .28);
  transform: rotate(-8deg);
}

.theorem-window {
  padding: clamp(25px, 4vw, 52px);
  align-self: center;
  transform: translateX(4vw) rotate(-1deg);
}

.theorem-window-low {
  grid-column: 2;
  align-self: end;
  transform: translateY(-6vh) rotate(3deg);
}

.abacus {
  position: absolute;
  right: 9vw;
  top: 14vh;
  width: 240px;
  height: 80px;
  border-top: 1px solid var(--moon-slate);
  border-bottom: 1px solid var(--moon-slate);
}

.abacus span {
  position: absolute;
  top: 25px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--verdigris-logic);
  transform: translateX(var(--shift, 0));
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}

.abacus span:nth-child(1) { left: 4px; }
.abacus span:nth-child(2) { left: 42px; }
.abacus span:nth-child(3) { left: 80px; }
.abacus span:nth-child(4) { left: 126px; }
.abacus span:nth-child(5) { left: 164px; }
.abacus span:nth-child(6) { left: 202px; }
body.room-2 .abacus span:nth-child(2n) { --shift: 18px; }
body.room-2 .abacus span:nth-child(2n+1) { --shift: -10px; }

.contradiction-well {
  color: var(--proof-paper);
  background:
    radial-gradient(circle at 58% 52%, rgba(182, 58, 70, .16), transparent 23%),
    radial-gradient(circle at 50% 64%, #06151d, var(--well-blue) 48%, #081e2a 100%);
}

.contradiction-well::before { border-color: rgba(244, 240, 230, .18); }
.contradiction-well .room-label,
.contradiction-well small { color: rgba(244, 240, 230, .68); }
.contradiction-well .room-label em { color: var(--brass-lemma); }

.well {
  position: absolute;
  left: 46vw;
  top: 28vh;
  width: clamp(260px, 35vw, 520px);
  height: clamp(260px, 35vw, 520px);
  border-radius: 50%;
  border: 1px solid rgba(244, 240, 230, .28);
  background: radial-gradient(circle, rgba(23,20,17,.95), rgba(14,42,58,.9) 48%, rgba(70,86,106,.2) 72%, transparent 73%);
  box-shadow: inset 0 0 55px rgba(0,0,0,.75), 0 0 80px rgba(182, 58, 70, .16);
}

.ink-bloom {
  position: absolute;
  inset: 24%;
  border-radius: 47% 53% 48% 52%;
  background: radial-gradient(circle, rgba(182, 58, 70, .98), rgba(182, 58, 70, .42) 46%, transparent 72%);
  filter: blur(9px);
  transform: scale(.25) rotate(0deg);
  opacity: 0;
  transition: transform 1.7s ease, opacity 1.2s ease;
}

body.room-3 .ink-bloom { opacity: 1; transform: scale(1.1) rotate(45deg); }

.ripple {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(182, 58, 70, .55);
  border-radius: 50%;
  opacity: 0;
  transform: scale(.4);
}

body.room-3 .ripple { animation: ripple 3.4s ease-out infinite; }
.ripple-two { animation-delay: .8s !important; }
.ripple-three { animation-delay: 1.6s !important; }

@keyframes ripple {
  0% { opacity: 0; transform: scale(.35); }
  18% { opacity: .68; }
  100% { opacity: 0; transform: scale(1.8); }
}

.false-branch {
  padding: clamp(24px, 4vw, 50px);
  align-self: center;
  max-width: 620px;
  background: rgba(14, 42, 58, .58);
  border-color: rgba(182, 58, 70, .65);
  transform: rotate(-2deg);
}

body.room-3 .false-branch { transform: rotate(-2deg) translateX(4vw) scale(.96); }

.negation-mirror {
  position: absolute;
  right: 11vw;
  bottom: 10vh;
  font: 300 clamp(110px, 16vw, 240px)/1 var(--display);
  color: rgba(182, 58, 70, .42);
}

.well-note { color: rgba(244, 240, 230, .72); align-self: end; max-width: 360px; }

.qed-lantern {
  background:
    radial-gradient(circle at 62% 40%, rgba(193, 154, 74, .45), transparent 22%),
    linear-gradient(150deg, #f8f4e9, var(--proof-paper) 62%, rgba(47, 127, 115, .18));
}

.lantern-operator {
  position: absolute;
  right: 16vw;
  top: 13vh;
  width: 170px;
  height: 220px;
  border: 1px solid var(--brass-lemma);
  border-radius: 50% 50% 44% 44%;
  display: grid;
  place-items: center;
  color: var(--brass-lemma);
  font: 300 98px/1 var(--display);
  box-shadow: 0 0 70px rgba(193, 154, 74, .34), inset 0 0 40px rgba(193, 154, 74, .18);
}

.conclusion {
  grid-column: 1 / 2;
  align-self: center;
  padding: clamp(30px, 5vw, 66px);
  max-width: 760px;
  transform: rotate(1.2deg);
}

.qed-square {
  position: absolute;
  right: 21vw;
  bottom: 18vh;
  width: clamp(110px, 16vw, 190px);
  height: auto;
}

.qed-square path {
  fill: none;
  stroke: var(--ink-black);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-dasharray: 480;
  stroke-dashoffset: 480;
  transition: stroke-dashoffset 1.9s cubic-bezier(.4,0,.1,1);
}

body.room-4 .qed-square path { stroke-dashoffset: 0; }

.final-seal {
  position: absolute;
  right: 9vw;
  bottom: 10vh;
  color: var(--verdigris-logic);
  border: 2px solid var(--verdigris-logic);
  padding: 13px 18px;
  font: 600 28px/1 var(--kr);
  transform: rotate(-8deg);
  opacity: .86;
}

.closing-marginalia { right: 6vw; top: 42vh; color: var(--verdigris-logic); }

.in-view .folded-screen,
.in-view .vellum-sheet,
.in-view .theorem-window,
.in-view .false-branch,
.in-view .conclusion {
  transform: translateY(var(--unfold, 0)) rotate(var(--angle, 0deg));
}

@media (max-width: 820px) {
  .room {
    grid-template-columns: 1fr;
    padding-left: 78px;
  }
  .screen-one,
  .sheet-right,
  .theorem-window-low { grid-column: 1; }
  .proof-lines { opacity: .48; }
  .well { left: 34vw; top: 45vh; }
  .scale, .abacus, .lantern-operator { transform: scale(.72); transform-origin: right top; }
  .opening-stamp h1 { font-size: clamp(66px, 20vw, 116px); }
}