:root {
  /* DESIGN typography tokens: Sans** explanatory copy Interactions grammatical—words */
  --bone: #F4EEDC;
  --ink: #11131F;
  --violet: #6E44FF;
  --red: #E23D5A;
  --green: #3DDC97;
  --blue: #3A86FF;
  --erasure: #B8B1A4;
  --shadow: #242038;
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --design-token-sans-markdown: 'Sans**';
  --code: 'Recursive', monospace;
  --kr: 'Noto Serif KR', serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .38;
  background-image:
    radial-gradient(circle at 18% 20%, rgba(36,32,56,.08) 0 1px, transparent 1px),
    radial-gradient(circle at 75% 62%, rgba(110,68,255,.07) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,19,31,.035) 1px, transparent 1px);
  background-size: 23px 31px, 37px 29px, 72px 72px;
  mix-blend-mode: multiply;
}

.drift-field {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.spore {
  position: absolute;
  font-family: var(--code);
  color: var(--violet);
  opacity: .42;
  animation: sporeDrift linear infinite;
  font-variation-settings: 'MONO' 1, 'wght' 650, 'slnt' -8;
}

@keyframes sporeDrift {
  from { transform: translate3d(0, 110vh, 0) rotate(0deg); }
  to { transform: translate3d(var(--x), -20vh, 0) rotate(360deg); }
}

.masthead {
  position: fixed;
  z-index: 12;
  top: 24px;
  left: 28px;
  right: 28px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  pointer-events: none;
}

.wordmark {
  pointer-events: auto;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--code);
  font-size: clamp(15px, 2vw, 19px);
  font-variation-settings: 'MONO' 1, 'wght' 720, 'slnt' -4;
  border-bottom: 2px solid var(--red);
}

.running-note {
  color: var(--shadow);
  font-size: 12px;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.chapter-tabs {
  position: fixed;
  z-index: 13;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chapter-tabs a {
  width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--shadow);
  text-decoration: none;
  font-family: var(--code);
  font-size: 18px;
  background: rgba(244,238,220,.62);
  border: 1px solid rgba(17,19,31,.22);
  box-shadow: 5px 5px 0 rgba(36,32,56,.12);
  transition: transform .3s ease, color .3s ease, border-color .3s ease;
}

.chapter-tabs a.active {
  color: var(--violet);
  border-color: var(--violet);
  transform: translateX(-8px) rotate(-5deg);
}

.scene {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 12vh 9vw;
  overflow: hidden;
  border-bottom: 1px solid rgba(17,19,31,.16);
}

.draft-scene { min-height: 100vh; }

.margin, .annotation {
  position: absolute;
  font-family: var(--code);
  font-size: 12px;
  line-height: 1.45;
  color: var(--blue);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.left-note { left: 4vw; top: 34vh; transform: rotate(-3deg); }
.left-note span { color: var(--erasure); }
.right { right: 8vw; bottom: 16vh; max-width: 240px; color: var(--red); }

.specimen-stage {
  position: absolute;
  left: 7vw;
  bottom: 15vh;
  width: min(920px, 74vw);
  min-height: 430px;
  transform: rotate(-2.5deg);
}

.paragraph-organism {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .18em;
  font-family: var(--serif);
  font-size: clamp(42px, 7vw, 96px);
  line-height: .94;
  font-variation-settings: 'SOFT' 42, 'WONK' 1, 'wght' 620;
  max-width: 980px;
}

.line { display: block; transform: translateX(var(--drift, 0px)) skewY(var(--skew, 0deg)); transition: transform .55s cubic-bezier(.2,.8,.2,1); }
.line-b { margin-left: 8vw; }
.line-c { margin-left: 3vw; }
.line-d { margin-left: 12vw; }
.line-e { margin-left: 6vw; }

.token {
  appearance: none;
  border: 0;
  padding: 0 .04em;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  position: relative;
}

.token::after {
  content: attr(data-role);
  position: absolute;
  left: 0;
  bottom: 100%;
  font-family: var(--code);
  font-size: 11px;
  color: var(--bone);
  background: var(--shadow);
  padding: 5px 7px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px) rotate(2deg);
  transition: .25s ease;
}

.token:hover::after { opacity: 1; transform: translateY(-4px) rotate(-2deg); }
.noun { color: var(--violet); }
.verb { color: var(--red); font-variation-settings: 'SOFT' 80, 'WONK' 1, 'wght' 760; }
.operator, .brace { font-family: var(--code); color: var(--green); font-variation-settings: 'MONO' 1, 'wght' 800, 'slnt' -10; }
.punct { color: var(--blue); display: inline-block; transform-origin: 50% 0; animation: commaSwing 2.8s ease-in-out infinite; }

@keyframes commaSwing { 0%,100% { transform: rotate(-10deg); } 50% { transform: rotate(18deg); } }

.parse-arcs {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: visible;
}

.parse-arcs path, .rail-diagram path {
  fill: none;
  stroke: var(--violet);
  stroke-width: 2;
  stroke-dasharray: 620;
  stroke-dashoffset: calc(620 - (620 * var(--progress, 0)));
  filter: drop-shadow(0 0 7px rgba(110,68,255,.25));
}

.hidden-clause {
  position: absolute;
  left: 54%;
  top: 34%;
  max-width: 320px;
  padding: 16px 18px;
  background: rgba(244,238,220,.84);
  border: 1px solid var(--green);
  color: var(--shadow);
  font-family: var(--code);
  opacity: 0;
  transform: translateY(20px) rotate(4deg);
  transition: .35s ease;
  z-index: 4;
}

.hidden-clause.open { opacity: 1; transform: translateY(0) rotate(-2deg); }

.corner-fragments {
  position: absolute;
  right: 10vw;
  top: 16vh;
  display: grid;
  gap: 18px;
  font-family: var(--code);
  color: var(--violet);
  font-size: clamp(20px, 4vw, 58px);
  transform: rotate(8deg);
}

.corner-fragments span:nth-child(even) { color: var(--red); transform: translateX(60px); }
.scene-caption { position: absolute; bottom: 5vh; right: 10vw; max-width: 360px; color: var(--shadow); }

.chapter-label {
  font-family: var(--code);
  color: var(--red);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 4vh;
}

h1, h2 {
  font-family: var(--serif);
  font-weight: 650;
  line-height: .95;
  margin: 0;
  max-width: 940px;
}

h1 { font-size: clamp(54px, 9vw, 126px); }
h2 { font-size: clamp(46px, 8vw, 104px); }

.parse-layout { position: relative; height: 52vh; margin-top: 7vh; }
.folded-strip {
  position: absolute;
  left: -4vw;
  top: 4vh;
  width: 88vw;
  padding: 20px 32px;
  display: flex;
  gap: 30px;
  align-items: center;
  background: rgba(255,255,255,.22);
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: skewX(-12deg) rotate(1deg);
  font-family: var(--code);
}
.folded-strip b { font-family: var(--serif); font-size: 42px; color: var(--violet); }
.folded-strip i { color: var(--red); }
.folded-strip em { color: var(--green); font-style: normal; }
.rail-diagram { position: absolute; left: 0; bottom: 2vh; width: 86vw; height: 38vh; }
.rail-diagram .red { stroke: var(--red); }
.rail-diagram .green { stroke: var(--green); }
.rail-diagram circle { fill: var(--bone); stroke: var(--blue); stroke-width: 3; }
.grammar-tags { position: absolute; right: 5vw; bottom: 12vh; display: grid; gap: 9px; }
.grammar-tags span { font-family: var(--code); border: 1px solid var(--shadow); padding: 8px 12px; background: rgba(244,238,220,.74); }

.fork-columns { min-height: 58vh; display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; gap: 3vw; }
.vellum {
  padding: clamp(28px, 5vw, 70px);
  background: rgba(244,238,220,.56);
  border: 1px solid rgba(17,19,31,.28);
  box-shadow: 18px 24px 0 rgba(36,32,56,.08);
  backdrop-filter: blur(1px);
}
.fork-pane { transform: rotate(-3deg); }
.fork-pane.offset { transform: translateY(12vh) rotate(4deg); }
.proof-stamp { font-family: var(--code); color: var(--red); text-transform: uppercase; border: 2px solid var(--red); padding: 6px 10px; }
.fork-pane p { font-family: var(--serif); font-size: clamp(34px, 5vw, 72px); line-height: 1; }
.rail-word { font-family: var(--code); color: var(--violet); font-size: 22px; }
.fork-spine { font-family: var(--serif); font-size: 14vw; color: var(--green); text-align: center; }
.constraint-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.constraint, .type-blocks button, .quiet-invitation {
  border: 1px solid var(--ink);
  background: var(--bone);
  color: var(--ink);
  padding: 12px 16px;
  font-family: var(--code);
  font-size: 15px;
  box-shadow: 5px 5px 0 var(--erasure);
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, color .25s ease;
}
.constraint:hover, .type-blocks button:hover, .quiet-invitation:hover { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--erasure); color: var(--violet); }

.mutation-board { margin-top: 9vh; display: grid; gap: 40px; }
.redaction-line { font-family: var(--serif); font-size: clamp(36px, 7vw, 92px); line-height: 1.05; display: flex; gap: .25em; flex-wrap: wrap; align-items: center; }
.redacted { position: relative; color: transparent; }
.redacted::before { content: ''; position: absolute; left: 0; right: 0; top: 45%; height: .34em; background: var(--ink); clip-path: polygon(0 18%, 100% 0, 96% 88%, 4% 100%); }
.mutant { color: var(--red); animation: inkReveal 3s ease-in-out infinite; }
@keyframes inkReveal { 0%,100% { filter: blur(0); font-variation-settings: 'SOFT' 20, 'WONK' 0, 'wght' 520; } 50% { filter: blur(.8px); font-variation-settings: 'SOFT' 90, 'WONK' 1, 'wght' 850; } }
.type-blocks { display: flex; gap: 12px; flex-wrap: wrap; }
.side-korean { font-family: var(--kr); color: var(--blue); font-size: 22px; }

.recursion-mirror { display: grid; place-items: center; min-height: 52vh; perspective: 900px; }
.mirror-line { margin: 0; font-family: var(--code); font-size: clamp(22px, 4vw, 58px); color: var(--shadow); }
.mirror-line.top { transform: rotateX(34deg) translateY(30px); color: var(--violet); }
.mirror-line.middle { font-family: var(--serif); color: var(--ink); font-size: clamp(40px, 7vw, 94px); max-width: 900px; text-align: center; line-height: .95; }
.mirror-line.bottom { transform: rotateX(-34deg) translateY(-26px); color: var(--red); }
.parenthesis-gate { margin: 0 auto; max-width: 760px; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; font-family: var(--serif); font-size: clamp(24px, 4vw, 52px); cursor: pointer; }
.parenthesis-gate span { font-family: var(--code); color: var(--green); font-size: 1.8em; transition: transform .4s ease; }
.parenthesis-gate.open span:first-child { transform: translateX(-28px) rotate(-18deg); }
.parenthesis-gate.open span:last-child { transform: translateX(28px) rotate(18deg); }
.parenthesis-gate em { font-style: normal; clip-path: inset(0 48% 0 48%); transition: clip-path .45s ease; }
.parenthesis-gate.open em { clip-path: inset(0 0 0 0); }

.release-scene { display: grid; place-items: center; text-align: center; }
.release-poem { font-family: var(--serif); font-size: clamp(42px, 7vw, 100px); line-height: 1; }
.release-poem p { margin: .12em 0; }
.release-poem p:nth-child(2) { color: var(--violet); transform: translateX(-5vw); }
.release-poem p:nth-child(3) { color: var(--red); transform: translateX(4vw); }
.quiet-invitation { margin-top: 5vh; font-size: 18px; }
.compile-mark { margin-top: 28px; font-family: var(--code); color: var(--green); opacity: 0; transform: translateY(14px); transition: .4s ease; }
.compile-mark.visible { opacity: 1; transform: translateY(0); }

.baseline-bent .line-a { --drift: 18px; --skew: -1deg; }
.baseline-bent .line-b { --drift: -24px; --skew: .9deg; }
.baseline-bent .line-c { --drift: 32px; --skew: -1.3deg; }
.baseline-bent .line-d { --drift: -14px; --skew: 1.1deg; }
.baseline-bent .line-e { --drift: 22px; --skew: -.6deg; }

@media (max-width: 760px) {
  .running-note { display: none; }
  .chapter-tabs { right: 8px; }
  .scene { padding: 12vh 7vw; }
  .specimen-stage { left: 5vw; width: 88vw; bottom: 18vh; }
  .paragraph-organism { font-size: clamp(34px, 12vw, 62px); }
  .fork-columns { grid-template-columns: 1fr; }
  .fork-spine { font-size: 80px; }
  .rail-diagram { width: 100vw; left: -10vw; }
}