:root {
  --black: #09090B;
  --paper: #F2EDE3;
  --red: #FF2A3D;
  --cyan: #00D7C8;
  --violet: #4B2E83;
  --gray: #6E6A66;
  --syne: "Syne", Inter, system-ui, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --kr: "Noto Sans KR", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
}

body {
  margin: 0;
  color: var(--paper);
  background: var(--black);
  font-family: var(--syne);
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    radial-gradient(circle at 18% 21%, rgba(242, 237, 227, .38) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(255, 42, 61, .22) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 48%, rgba(110, 106, 102, .18) 49% 51%, transparent 52%);
  background-size: 17px 19px, 23px 29px, 100% 100%;
  mix-blend-mode: screen;
}

.cursor-redaction {
  position: fixed;
  left: 0;
  top: 0;
  width: 190px;
  height: 19px;
  background: var(--red);
  transform: translate(-220px, -40px) rotate(-2deg);
  pointer-events: none;
  z-index: 49;
  mix-blend-mode: difference;
  transition: opacity .25s ease;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.hero-scene {
  display: grid;
  place-items: center;
  background:
    linear-gradient(123deg, transparent 0 57%, rgba(75, 46, 131, .62) 57.2% 66%, transparent 66.2%),
    radial-gradient(circle at 53% 52%, rgba(0, 215, 200, .07), transparent 36%),
    var(--black);
}

.corner-note {
  position: absolute;
  font-family: var(--kr);
  font-size: clamp(.72rem, 1.1vw, .95rem);
  color: var(--gray);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.top-left { left: 3vw; top: 3vh; }
.bottom-right { right: 3vw; bottom: 3vh; }

.split-wordmark {
  position: relative;
  margin: 0;
  font-family: var(--syne);
  font-weight: 800;
  font-size: clamp(5.6rem, 17vw, 18rem);
  letter-spacing: -.12em;
  line-height: .72;
  color: var(--paper);
  text-transform: lowercase;
}

.plane {
  display: inline-block;
  will-change: transform;
  text-shadow: 9px 0 0 rgba(255, 42, 61, .8), -5px 5px 0 rgba(0, 215, 200, .45);
}

.plane-left { transform: translateX(-8vw) skewY(-4deg); }
.plane-right { transform: translateX(6vw) translateY(4vh) skewY(5deg); }
.plane-ai { transform: translateX(2vw) translateY(-2vh); letter-spacing: -.08em; }

.fault-dot {
  color: var(--red);
  animation: verdictBlink .84s steps(1) infinite;
}

@keyframes verdictBlink {
  0%, 42% { opacity: 1; filter: none; }
  43%, 76% { opacity: .12; filter: blur(2px); }
  77%, 100% { opacity: 1; }
}

.hero-serif {
  position: absolute;
  left: 9vw;
  bottom: 17vh;
  max-width: 520px;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.2vw, 4rem);
  line-height: .95;
  color: rgba(242, 237, 227, .74);
}

.scroll-instruction {
  position: absolute;
  right: 8vw;
  top: 22vh;
  color: var(--red);
  font-family: var(--kr);
  writing-mode: vertical-rl;
  letter-spacing: .16em;
}

.equivalence-mark span,
.mini-equivalence b {
  display: block;
  width: 100%;
  height: 14px;
  background: var(--cyan);
}

.equivalence-mark span + span,
.mini-equivalence b + b { margin-top: 20px; transform: translateX(13%); }

.hero-mark {
  position: absolute;
  width: min(42vw, 620px);
  opacity: .16;
  transform: rotate(-8deg);
}

.claim-scene {
  background: var(--paper);
  color: var(--black);
  padding: 9vh 8vw;
}

.proof-grid {
  position: absolute;
  inset: 0;
  opacity: .38;
  background-image: linear-gradient(var(--gray) 1px, transparent 1px), linear-gradient(90deg, var(--gray) 1px, transparent 1px);
  background-size: 64px 64px;
}

.paper-panel {
  position: relative;
  width: min(860px, 78vw);
  min-height: 58vh;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: var(--paper);
  border: 3px solid var(--black);
  box-shadow: 18px 18px 0 var(--red), -9px -9px 0 var(--cyan);
  transform: rotate(-2.6deg);
}

.label-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  color: var(--gray);
  font-family: var(--kr);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.claim-paper h2,
.question-paper h2 {
  margin: 8vh 0 2rem;
  font-size: clamp(3rem, 9vw, 10rem);
  line-height: .78;
  letter-spacing: -.08em;
}

.claim-paper p,
.question-paper p,
.synthesis-copy {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.7vw, 3.1rem);
  line-height: 1;
}

.redaction-stack {
  position: absolute;
  right: -10vw;
  bottom: 9vh;
  width: 44vw;
}

.redaction-stack i {
  display: block;
  height: clamp(20px, 3vw, 42px);
  margin: 18px 0;
  background: var(--black);
  transform: skewX(-12deg);
}

.marginalia {
  position: absolute;
  right: 6vw;
  top: 12vh;
  max-width: 280px;
  font-family: var(--kr);
  color: var(--violet);
  font-size: clamp(1rem, 1.6vw, 1.6rem);
  transform: rotate(4deg);
}

.stamp {
  display: grid;
  place-items: center;
  width: 156px;
  height: 156px;
  border: 8px solid currentColor;
  border-radius: 50%;
  color: var(--red);
  font-family: var(--syne);
  font-weight: 800;
  font-size: 2rem;
  transform: rotate(-13deg);
}

.draggable {
  position: absolute;
  left: 63vw;
  bottom: 17vh;
  cursor: grab;
  user-select: none;
  z-index: 5;
}

.draggable.dragging { cursor: grabbing; filter: drop-shadow(0 0 22px rgba(255, 42, 61, .6)); }

.counter-scene {
  background: var(--black);
  color: var(--paper);
}

.tear-band {
  position: absolute;
  inset: -15vh 29vw -15vh auto;
  width: 25vw;
  background: var(--red);
  transform: rotate(16deg);
  box-shadow: 0 0 0 28px rgba(242, 237, 227, .08);
}

.counter-copy {
  position: absolute;
  left: -2vw;
  top: 11vh;
  font-size: clamp(5rem, 15vw, 16rem);
  line-height: .7;
  letter-spacing: -.09em;
  color: transparent;
  -webkit-text-stroke: 3px var(--paper);
  transform: rotate(-4deg);
}

.serif-shard {
  position: absolute;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2.3rem, 6.5vw, 8rem);
  line-height: .84;
  color: var(--paper);
  max-width: 720px;
}

.shard-one { right: 5vw; top: 15vh; }
.shard-two { left: 11vw; bottom: 14vh; color: rgba(242, 237, 227, .62); }

.diagonal-type {
  position: absolute;
  left: 5vw;
  top: 50vh;
  color: var(--red);
  font-size: clamp(1.4rem, 4vw, 5rem);
  font-weight: 800;
  transform: rotate(-18deg);
  white-space: nowrap;
}

.split-bubble {
  position: absolute;
  padding: 1rem 1.4rem;
  border: 2px solid var(--cyan);
  font-family: var(--kr);
  color: var(--cyan);
}

.bubble-a { right: 13vw; bottom: 20vh; transform: rotate(6deg); }
.bubble-b { right: 28vw; bottom: 10vh; transform: rotate(-5deg); }

.evidence-scene {
  background: linear-gradient(180deg, var(--paper), #d9d1c5);
  color: var(--black);
}

.evidence-title {
  position: absolute;
  top: 4vh;
  left: 4vw;
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 13rem);
  line-height: .72;
  letter-spacing: -.1em;
  color: var(--black);
  opacity: .92;
}

.proof-card {
  position: absolute;
  width: min(390px, 78vw);
  min-height: 260px;
  padding: 1.5rem;
  background: rgba(242, 237, 227, .78);
  border: 2px solid var(--black);
  box-shadow: 12px 14px 0 rgba(9, 9, 11, .25);
  backdrop-filter: blur(2px);
}

.proof-card p {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 3vw, 3rem);
  line-height: 1;
}

.card-label {
  font-family: var(--kr);
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: .11em;
}

.card-a { left: 10vw; top: 32vh; transform: rotate(-7deg); }
.card-b { right: 11vw; top: 19vh; transform: rotate(5deg); }
.card-c { left: 38vw; bottom: 8vh; transform: rotate(-1deg); }

.mini-equivalence { width: 130px; transform: rotate(-4deg); }
.mini-equivalence b { height: 8px; background: var(--red); }
.ghost { opacity: .42; width: 132px; height: 132px; font-size: 1.6rem; }

.node-tree span {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin: 14px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 10px rgba(0, 215, 200, .15);
}

.proof-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.proof-lines path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 4;
  stroke-dasharray: 1300;
  stroke-dashoffset: var(--dash, 1300);
  filter: drop-shadow(0 0 7px rgba(0, 215, 200, .7));
}

.synthesis-scene {
  display: grid;
  place-items: center;
  background: var(--black);
  color: var(--paper);
}

.violet-field {
  position: absolute;
  inset: 10vh 6vw;
  background: var(--violet);
  transform: rotate(3deg);
  opacity: .72;
}

.synthesis-scene h2 {
  position: relative;
  max-width: 960px;
  margin: 0;
  font-size: clamp(3.2rem, 9vw, 11rem);
  line-height: .78;
  letter-spacing: -.09em;
  text-align: center;
  mix-blend-mode: screen;
}

.cyan-network {
  position: absolute;
  inset: 20vh 14vw;
  border: 2px solid rgba(0, 215, 200, .45);
  transform: skewY(-7deg);
}

.cyan-network::before,
.cyan-network::after {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--cyan);
  transform-origin: left center;
}

.cyan-network::before { width: 72%; left: 8%; top: 31%; transform: rotate(18deg); }
.cyan-network::after { width: 64%; left: 19%; top: 67%; transform: rotate(-21deg); }

.spark {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 28px var(--cyan);
  animation: sparkJump 2.2s infinite ease-in-out;
}
.s1 { left: 10%; top: 29%; }
.s2 { right: 18%; top: 44%; animation-delay: .4s; }
.s3 { left: 31%; bottom: 20%; animation-delay: .8s; }
.s4 { right: 31%; bottom: 29%; animation-delay: 1.1s; }

@keyframes sparkJump {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(34px, -21px) scale(1.7); }
}

.fragment {
  position: absolute;
  padding: .8rem 1.2rem;
  background: var(--paper);
  color: var(--black);
  font-family: var(--kr);
  border: 2px solid var(--black);
}
.fragment-a { left: 9vw; top: 24vh; transform: rotate(-8deg); }
.fragment-b { right: 12vw; top: 32vh; transform: rotate(8deg); }
.fragment-c { left: 24vw; bottom: 17vh; transform: rotate(3deg); }

.synthesis-copy {
  position: absolute;
  right: 8vw;
  bottom: 8vh;
  max-width: 520px;
  color: rgba(242, 237, 227, .75);
}

.question-scene {
  display: grid;
  align-items: center;
  padding: 10vh 8vw;
  background:
    linear-gradient(95deg, transparent 0 50%, rgba(255, 42, 61, .95) 50.2% 54%, transparent 54.2%),
    var(--paper);
  color: var(--black);
}

.question-paper {
  position: relative;
  z-index: 2;
  max-width: 1040px;
}

.final-mark {
  position: absolute;
  right: 8vw;
  bottom: 18vh;
  width: min(36vw, 440px);
  transform: rotate(-2deg);
}
.final-mark span { background: var(--black); }
.final-mark span + span { background: var(--red); }

.minimal-nav {
  position: absolute;
  left: 8vw;
  bottom: 5vh;
  display: flex;
  gap: 2rem;
  color: var(--violet);
  font-family: var(--kr);
  font-weight: 900;
  text-transform: uppercase;
}

.scene.is-visible .paper-panel,
.scene.is-visible .proof-card,
.scene.is-visible .fragment,
.scene.is-visible .question-paper {
  animation: misregister .9s cubic-bezier(.17, .84, .26, 1) both;
}

@keyframes misregister {
  0% { opacity: .1; translate: 0 70px; filter: blur(3px); }
  54% { translate: -18px -8px; }
  76% { translate: 12px 3px; }
  100% { opacity: 1; translate: 0 0; filter: blur(0); }
}

@media (max-width: 760px) {
  .claim-scene, .question-scene { padding: 8vh 5vw; }
  .paper-panel { width: 90vw; }
  .redaction-stack, .marginalia { display: none; }
  .card-a, .card-b, .card-c { left: 6vw; right: auto; width: 86vw; }
  .card-a { top: 25vh; }
  .card-b { top: 49vh; }
  .card-c { bottom: 4vh; }
  .minimal-nav { flex-direction: column; gap: .7rem; }
}