:root {
  /* IBM Plex Mono labels reading `claim` and coordinates for contradiction IDs */
  --plaster: #F4F0E8;
  --ink: #11100E;
  --red: #FF2A2A;
  --cyan: #00D7FF;
  --violet: #5A31F4;
  --chartreuse: #D8FF3D;
  --dust: #B8B0A6;
  --truth-a: #11100E;
  --truth-b: #00D7FF;
  --seam-x: 50vw;
  --pointer-x: 0;
  --pointer-y: 0;
  --scroll-progress: 0;
  --drift: 0px;
  --font-display: 'Unbounded', sans-serif;
  --font-serif: 'Noto Serif JP', serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--plaster);
  font-family: var(--font-serif);
  overflow-x: hidden;
  cursor: none;
}

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

.paper-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .31;
  background:
    radial-gradient(circle at 8% 12%, rgba(17,16,14,.09) 0 1px, transparent 1.5px),
    radial-gradient(circle at 61% 34%, rgba(255,42,42,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 86% 68%, rgba(0,215,255,.13) 0 1px, transparent 1.5px),
    repeating-linear-gradient(100deg, transparent 0 13px, rgba(184,176,166,.15) 13px 14px);
  background-size: 41px 41px, 53px 53px, 67px 67px, 100% 100%;
  mix-blend-mode: multiply;
}

.museum-grid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.strict-grid {
  background-image: repeating-linear-gradient(90deg, rgba(184,176,166,.27) 0 1px, transparent 1px calc(100vw / 12));
}

.wrong-grid {
  opacity: .35;
  transform: rotate(-4deg) scale(1.18);
  transform-origin: center;
  background-image: repeating-linear-gradient(90deg, rgba(255,42,42,.22) 0 1px, transparent 1px calc(100vw / 7));
}

.floor-plan {
  position: fixed;
  left: 22px;
  top: 24px;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(5, 30px);
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  mix-blend-mode: multiply;
}

.plan-title {
  grid-column: 1 / -1;
  padding-bottom: 5px;
  color: var(--red);
  letter-spacing: .08em;
}

.floor-plan a {
  border: 1px solid var(--dust);
  padding: 7px 0;
  text-align: center;
  background: rgba(244,240,232,.74);
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.floor-plan a.active {
  background: var(--ink);
  color: var(--plaster);
  transform: translateY(7px) rotate(-7deg);
}

.progress-seam {
  position: fixed;
  top: 0;
  left: calc(var(--seam-x) - 1px);
  width: 3px;
  height: 100vh;
  z-index: 15;
  pointer-events: none;
  background: linear-gradient(var(--red), var(--cyan));
  box-shadow: -5px 0 0 rgba(255,42,42,.42), 5px 0 0 rgba(0,215,255,.42);
  transform: skewX(calc(var(--scroll-progress) * 8deg));
}

.progress-seam span {
  position: absolute;
  left: -9px;
  top: 0;
  width: 21px;
  height: calc(var(--scroll-progress) * 100%);
  background: var(--chartreuse);
  mix-blend-mode: difference;
}

.cursor-proof {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 24px;
  height: 24px;
  border: 2px solid var(--red);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: width .22s ease, height .22s ease, border-radius .22s ease, background .22s ease, border-color .22s ease;
  mix-blend-mode: multiply;
}

.cursor-proof.square {
  width: 30px;
  height: 30px;
  border-radius: 0;
  border-color: var(--cyan);
  background: rgba(0,215,255,.2);
}

.room {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: clamp(88px, 10vw, 138px) clamp(24px, 6vw, 82px);
  display: grid;
  isolation: isolate;
}

.room-marker {
  align-self: start;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--red);
  letter-spacing: .12em;
  text-transform: uppercase;
  border-top: 1px solid var(--dust);
  padding-top: 10px;
  max-width: 420px;
}

.room-marker span { color: var(--ink); margin-left: 16px; }

.room-entry {
  min-height: 100vh;
  overflow: hidden;
  place-items: center;
  background:
    linear-gradient(90deg, transparent 0 calc(var(--seam-x) - 4px), rgba(255,42,42,.08) calc(var(--seam-x) - 4px), rgba(0,215,255,.1) calc(var(--seam-x) + 4px), transparent calc(var(--seam-x) + 4px)),
    var(--plaster);
}

.argument-seam {
  position: absolute;
  top: -10vh;
  left: calc(var(--seam-x) - 2px);
  width: 4px;
  height: 120vh;
  background: var(--red);
  box-shadow: 10px 0 0 var(--cyan), -13px 0 0 rgba(90,49,244,.55);
  transform: translateX(calc(var(--pointer-x) * 20px)) rotate(calc(var(--pointer-y) * 2deg));
  z-index: -1;
}

.entry-catalogue {
  position: absolute;
  top: 30px;
  right: 34px;
  display: flex;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  text-transform: uppercase;
}

.wordmark {
  position: relative;
  display: flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(58px, 15vw, 218px);
  line-height: .82;
  letter-spacing: -.09em;
  text-transform: lowercase;
  filter: contrast(1.08);
}

.wordmark-half {
  display: inline-block;
  will-change: transform, clip-path;
}

.wordmark-half.left {
  color: var(--ink);
  text-shadow: calc(var(--pointer-x) * -16px) calc(var(--pointer-y) * 9px) 0 rgba(255,42,42,.35);
  transform: translateX(calc(var(--pointer-x) * -26px)) translateY(calc(var(--pointer-y) * 10px));
  clip-path: inset(0 calc(2% + var(--pointer-x) * 4%) 0 0);
}

.wordmark-half.right {
  color: var(--violet);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: calc(var(--pointer-x) * 18px) calc(var(--pointer-y) * -9px) 0 var(--cyan), 10px -5px 0 rgba(216,255,61,.75);
  transform: translateX(calc(var(--pointer-x) * 32px)) translateY(calc(var(--pointer-y) * -14px)) scaleX(1.1);
  clip-path: inset(0 0 0 calc(3% - var(--pointer-x) * 3%));
}

.wordmark-dot {
  color: var(--red);
  transform: translateY(-.06em) rotate(18deg);
  margin: 0 .08em;
}

.floating-label {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  padding: 7px 10px;
  background: var(--plaster);
  border: 1px solid var(--ink);
  box-shadow: 5px 5px 0 var(--cyan);
  animation: labelDisagree 4s ease-in-out infinite alternate;
}

.label-claim { left: 16%; top: 27%; color: var(--red); }
.label-counter { right: 13%; top: 35%; box-shadow: -5px 5px 0 var(--red); }
.label-same { left: 28%; bottom: 21%; transform: rotate(-6deg); }
.label-evidence { right: 20%; bottom: 23%; color: var(--violet); transform: rotate(4deg); }

.entry-note {
  position: absolute;
  left: 9vw;
  bottom: 9vh;
  max-width: 390px;
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.25;
  color: var(--ink);
}

.glyph-system.entry-glyph {
  position: absolute;
  right: 7vw;
  bottom: 7vh;
  width: 190px;
  height: 190px;
  opacity: .8;
}

.glyph-stroke { position: absolute; display: block; background: var(--ink); }
.glyph-stroke.spear { width: 18px; height: 190px; left: 80px; top: 0; transform: rotate(44deg); background: var(--red); }
.glyph-stroke.shield { width: 120px; height: 130px; right: 0; bottom: 0; border: 14px solid var(--ink); border-radius: 50% 50% 44% 44%; background: transparent; }
.glyph-stroke.slash { width: 210px; height: 8px; left: -8px; top: 90px; transform: rotate(-16deg); background: var(--cyan); }

.room-opposites {
  background: linear-gradient(112deg, var(--plaster) 0 55%, rgba(0,215,255,.12) 55% 56%, transparent 56%), var(--plaster);
}

.duel-board {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(90px, auto);
  gap: clamp(12px, 2vw, 26px);
  margin-top: 40px;
}

.claim-panel, .counter-panel, .label-plaque, .empty-frame {
  position: relative;
  min-height: 260px;
  border: 1px solid var(--ink);
  background: rgba(244,240,232,.86);
  padding: clamp(18px, 3vw, 36px);
  transition: transform .45s ease, filter .45s ease;
}

.contradiction-pair:hover { filter: saturate(1.4); }

.claim-panel {
  grid-column: 1 / 7;
  transform: translateY(calc(var(--drift) * -0.25)) rotate(-1deg);
  box-shadow: 18px 18px 0 var(--red);
}

.counter-panel {
  grid-column: 7 / 13;
  margin-top: 80px;
  transform: translateY(calc(var(--drift) * 0.3)) rotate(2deg);
  box-shadow: -18px 18px 0 var(--cyan);
}

.panel-id, .label-plaque strong {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--violet);
}

.claim-panel h2, .counter-panel h2, .exit-placard h2 {
  margin: 24px 0 18px;
  font-family: var(--font-display);
  font-size: clamp(40px, 8vw, 92px);
  line-height: .88;
  letter-spacing: -.06em;
}

.claim-panel p, .counter-panel p, .exit-placard p, .label-plaque p {
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
}

.cancel-line {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 51%;
  height: 7px;
  background: var(--red);
  transform: rotate(-4deg);
}

.cyan-offset {
  position: absolute;
  inset: 18px;
  border: 7px solid var(--cyan);
  transform: translate(18px, -15px);
  pointer-events: none;
}

.label-plaque {
  grid-column: 2 / 6;
  min-height: 160px;
  border-color: var(--dust);
  transform: translateX(20%) rotate(4deg);
}

.label-plaque span {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 4vw, 54px);
}

.empty-frame {
  grid-column: 8 / 12;
  min-height: 220px;
  background: transparent;
  border: 13px solid var(--ink);
  transform: translateX(-14%) rotate(-8deg);
}

.frame-cross {
  position: absolute;
  left: -20px;
  right: -20px;
  top: 50%;
  height: 8px;
  background: var(--red);
}

.frame-cross.one { transform: rotate(34deg); }
.frame-cross.two { transform: rotate(-34deg); background: var(--cyan); }

.opposite-arrows {
  position: absolute;
  bottom: 8vh;
  right: 8vw;
  font-family: var(--font-mono);
  color: var(--red);
  letter-spacing: .18em;
}

.room-studio {
  background: linear-gradient(180deg, var(--plaster), rgba(184,176,166,.24));
}

.studio-stage {
  position: relative;
  min-height: 72vh;
  margin-top: 20px;
}

.detached-frame {
  position: absolute;
  border: 2px solid var(--ink);
  background: rgba(244,240,232,.55);
  transition: transform .2s linear;
}

.frame-a { width: 34vw; height: 39vh; left: 9vw; top: 8vh; box-shadow: 23px 14px 0 var(--violet); transform: translateX(calc(var(--drift) * -.6)) rotate(5deg); }
.frame-b { width: 30vw; height: 27vh; right: 8vw; top: 17vh; box-shadow: -16px 18px 0 var(--cyan); transform: translateX(calc(var(--drift) * .7)) rotate(-7deg); }
.frame-c { width: min(40vw, 520px); height: 42vh; left: 31vw; bottom: 2vh; border-color: var(--red); background: rgba(216,255,61,.15); transform: translateY(calc(var(--drift) * -.35)) rotate(1deg); }

.registration-target {
  position: absolute;
  inset: 22%;
  border: 2px solid var(--red);
  border-radius: 50%;
  box-shadow: 0 0 0 22px transparent, 0 0 0 24px var(--cyan), inset 0 0 0 2px var(--ink);
}

.registration-target::before, .registration-target::after {
  content: '';
  position: absolute;
  background: var(--ink);
}

.registration-target::before { left: 50%; top: -26%; width: 2px; height: 152%; }
.registration-target::after { top: 50%; left: -26%; height: 2px; width: 152%; }

.folded-corner {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 92px;
  height: 92px;
  background: linear-gradient(135deg, transparent 0 50%, var(--chartreuse) 50%);
}

.mujun-glyph { width: 100%; height: 100%; overflow: visible; }
.glyph-path { fill: none; stroke-width: 10; stroke-linecap: square; stroke-linejoin: bevel; stroke-dasharray: 520; animation: crossExamine 5s ease-in-out infinite; }
.spear-path { stroke: var(--red); }
.shield-path { stroke: var(--ink); animation-delay: .5s; }
.cross-path { stroke: var(--cyan); animation-delay: 1s; }

.studio-caption {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  padding: 12px 14px;
  border: 1px solid var(--dust);
  background: var(--plaster);
}

.caption-left { left: 4vw; bottom: 15vh; transform: translateX(calc(var(--drift) * .5)) rotate(-4deg); }
.caption-right { right: 10vw; bottom: 6vh; transform: translateX(calc(var(--drift) * -.45)) rotate(5deg); }

.tape {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(184,176,166,.62);
  padding: 12px 58px;
  text-transform: uppercase;
}
.tape-one { left: 21vw; top: 3vh; transform: rotate(-10deg); }
.tape-two { right: 22vw; top: 47vh; transform: rotate(12deg); background: rgba(216,255,61,.62); }

.room-noise {
  overflow: hidden;
  background: var(--ink);
  color: var(--plaster);
}

.room-noise .room-marker { color: var(--cyan); border-color: rgba(244,240,232,.3); }
.room-noise .room-marker span { color: var(--plaster); }

.noise-field {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1vw;
  font-family: var(--font-display);
  font-size: clamp(30px, 7vw, 112px);
  line-height: .82;
  text-transform: uppercase;
  color: var(--plaster);
}

.noise-field span {
  display: block;
  border: 1px solid rgba(244,240,232,.16);
  padding: .12em;
  text-shadow: 5px 0 0 var(--red), -5px 0 0 var(--cyan);
  animation: silentVibrate .8s steps(2, end) infinite;
}

.noise-field span:nth-child(2n) { color: transparent; -webkit-text-stroke: 1px var(--plaster); animation-delay: .18s; }
.noise-field span:nth-child(3n) { color: var(--chartreuse); transform: rotate(-3deg); animation-delay: .33s; }

.redaction-reveal {
  position: absolute;
  left: 8vw;
  bottom: 11vh;
  max-width: 580px;
  font-size: clamp(21px, 3vw, 42px);
  line-height: 1.18;
}

.redaction-reveal p {
  display: inline;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: calc(20% + var(--scroll-progress) * 80%) 56%;
  background-position: 0 58%;
  background-repeat: no-repeat;
  color: var(--plaster);
  mix-blend-mode: screen;
}

.bent-stanchion {
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  width: 130px;
  height: 220px;
  border-left: 8px solid var(--dust);
  border-bottom: 8px solid var(--dust);
  border-radius: 0 0 0 70px;
  transform: rotate(-12deg);
}

.bent-stanchion::after {
  content: '?';
  position: absolute;
  right: -44px;
  top: -44px;
  font-family: var(--font-display);
  font-size: 130px;
  color: var(--cyan);
}

.room-exit {
  place-items: center;
  background:
    radial-gradient(circle at 52% 54%, rgba(90,49,244,.2), transparent 31%),
    linear-gradient(90deg, var(--plaster) 0 49%, rgba(255,42,42,.08) 49% 51%, var(--plaster) 51%);
}

.exit-placard {
  position: relative;
  width: min(760px, 88vw);
  padding: clamp(24px, 5vw, 58px);
  border: 1px solid var(--dust);
  background: rgba(244,240,232,.93);
  box-shadow: 26px 26px 0 var(--ink), -18px -18px 0 var(--cyan);
  transform: rotate(calc((var(--scroll-progress) - .8) * -18deg));
  z-index: 2;
}

.placard-kicker {
  font-family: var(--font-mono);
  color: var(--red);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.placard-rule {
  display: flex;
  justify-content: space-between;
  margin-top: 36px;
  padding-top: 14px;
  border-top: 1px solid var(--ink);
  font-family: var(--font-mono);
  color: var(--violet);
  text-transform: uppercase;
}

.exit-shadow {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(90px, 24vw, 330px);
  color: transparent;
  -webkit-text-stroke: 2px rgba(90,49,244,.45);
  transform: translate(5vw, 5vh) rotate(-12deg);
  z-index: 1;
}

.final-seam {
  position: absolute;
  left: 50%;
  top: 18vh;
  width: 46vw;
  height: 4px;
  background: linear-gradient(90deg, var(--red), var(--cyan), var(--chartreuse));
  transform: translateX(-50%) rotate(-3deg);
}

@keyframes labelDisagree {
  from { margin-left: -8px; clip-path: inset(0 0 0 0); }
  to { margin-left: 10px; clip-path: inset(0 5% 0 2%); }
}

@keyframes crossExamine {
  0% { stroke-dashoffset: 520; opacity: .25; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  62% { stroke-dashoffset: 0; filter: drop-shadow(10px -6px 0 var(--cyan)); }
  100% { stroke-dashoffset: -520; opacity: .4; }
}

@keyframes silentVibrate {
  0%, 100% { transform: translate(0, 0) skewX(0deg); }
  50% { transform: translate(4px, -2px) skewX(-3deg); }
}

@media (max-width: 760px) {
  .floor-plan { left: 12px; top: 12px; grid-template-columns: repeat(5, 25px); }
  .entry-catalogue { right: 16px; flex-direction: column; gap: 5px; }
  .wordmark { flex-wrap: wrap; justify-content: center; letter-spacing: -.07em; }
  .floating-label { font-size: 10px; }
  .duel-board { grid-template-columns: 1fr; }
  .claim-panel, .counter-panel, .label-plaque, .empty-frame { grid-column: 1; margin-top: 0; }
  .studio-stage { min-height: 90vh; }
  .frame-a, .frame-b, .frame-c { width: 72vw; left: 12vw; right: auto; }
  .frame-b { top: 31vh; }
  .frame-c { bottom: 8vh; }
  .noise-field { grid-template-columns: repeat(2, 1fr); }
}