:root {
  /* Design typography note: Space Grotesk** for small proof labels. */
  --ink: #09070B;
  --cobalt: #173CFF;
  --red: #FF2E4D;
  --acid: #D7FF3F;
  --paper: #FFF7EA;
  --blush: #FFB3C7;
  --poster: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --serif-jp: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --space: "Space Grotesk", "Inter", system-ui, sans-serif;
  --design-font-token: "Grotesk* Grotesk**";
  --soft: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ink);
  font-family: var(--space);
}

.equation-theater { position: relative; isolation: isolate; background: var(--ink); }

.operator-stage {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 247, 234, .14);
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .18;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255, 247, 234, .8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 34%, rgba(255, 46, 77, .65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 78%, rgba(23, 60, 255, .7) 0 1px, transparent 1.5px);
  background-size: 19px 21px, 31px 29px, 43px 41px;
  animation: grainJitter .9s steps(2, end) infinite;
}

.cursor-orbit {
  position: fixed;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid var(--acid);
  border-radius: 50%;
  transform: translate3d(-40px, -40px, 0);
  pointer-events: none;
  z-index: 40;
  mix-blend-mode: difference;
}

.first-addend { background: radial-gradient(circle at 78% 18%, rgba(255,179,199,.14), transparent 24rem), var(--ink); }

.stage-rail {
  position: absolute;
  left: 1.1rem;
  top: 2rem;
  bottom: 2rem;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--blush);
  font-size: .72rem;
  border-left: 2px solid var(--red);
  padding-left: .7rem;
  z-index: 3;
}

.plus-window { font-family: var(--poster); font-weight: 900; line-height: .8; }

.hero-plus {
  position: absolute;
  left: 12vw;
  top: -28vh;
  width: 120vmin;
  height: 120vmin;
  display: grid;
  place-items: center;
  font-size: 118vmin;
  transform: rotate(-7deg);
  transition: transform .8s cubic-bezier(.2, .9, .1, 1);
}

.plus-core, .plus-shadow { position: absolute; }
.plus-core { color: var(--red); text-shadow: -18px 18px 0 var(--cobalt), 9px -9px 0 rgba(255,179,199,.65); }
.plus-shadow { color: transparent; -webkit-text-stroke: 2px var(--paper); transform: translate(36px, -25px); opacity: .4; }

.domain-stamp {
  position: absolute;
  left: 26vw;
  top: 47vh;
  z-index: 4;
  font-family: var(--poster);
  color: var(--paper);
  font-size: clamp(4rem, 13vw, 14rem);
  letter-spacing: .02em;
  transform: rotate(-7deg) translateX(var(--stamp-x, -9vw));
  text-shadow: 6px 6px 0 var(--cobalt);
  animation: stampSlide 1.4s cubic-bezier(.14, .86, .2, 1) both;
}

.domain-stamp span { color: var(--red); }

.proof-note {
  position: absolute;
  z-index: 5;
  max-width: 17rem;
  padding: .7rem .9rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cobalt);
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .75rem;
}
.note-a { right: 11vw; top: 14vh; transform: rotate(7deg); }
.note-b { left: 10vw; bottom: 13vh; transform: rotate(-4deg); font-family: var(--serif-jp); text-transform: none; color: var(--red); }
.note-c { right: 18vw; bottom: 16vh; transform: rotate(-10deg); background: var(--blush); }

.confession-fragments span {
  position: absolute;
  color: var(--blush);
  font-family: var(--serif-jp);
  font-size: clamp(1rem, 2vw, 1.9rem);
  animation: drift 8s ease-in-out infinite alternate;
}
.confession-fragments span:nth-child(1) { left: 18vw; top: 21vh; }
.confession-fragments span:nth-child(2) { right: 7vw; top: 58vh; animation-delay: -2s; }
.confession-fragments span:nth-child(3) { left: 54vw; top: 34vh; animation-delay: -4s; }
.confession-fragments span:nth-child(4) { left: 35vw; bottom: 7vh; color: var(--acid); animation-delay: -1s; }

.carry-remainder { background: var(--paper); color: var(--ink); }
.carry-remainder::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: repeating-linear-gradient(115deg, transparent 0 20px, rgba(255,46,77,.08) 20px 22px);
}

.stage-title {
  position: absolute;
  left: 4vw;
  top: 5vh;
  font-family: var(--poster);
  font-size: clamp(4rem, 11vw, 12rem);
  line-height: .82;
  color: var(--ink);
  text-shadow: 7px 7px 0 var(--blush), -8px 11px 0 var(--cobalt);
  max-width: 9ch;
}

.addend-strip {
  position: absolute;
  left: -15vw;
  width: 130vw;
  display: flex;
  gap: 2rem;
  padding: 1.1rem 2rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--space);
  text-transform: uppercase;
  letter-spacing: .13em;
  white-space: nowrap;
  box-shadow: 0 10px 0 var(--red);
}
.strip-one { top: 45vh; transform: rotate(14deg); animation: riverOne 12s linear infinite; }
.strip-two { top: 52vh; transform: rotate(-12deg); background: var(--red); color: var(--paper); box-shadow: 0 10px 0 var(--cobalt); animation: riverTwo 14s linear infinite; }

.operator-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10rem;
  height: 10rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--red);
  color: var(--paper);
  font-family: var(--poster);
  font-size: 12rem;
  line-height: 1;
  box-shadow: -14px 12px 0 var(--cobalt), 0 0 0 14px var(--paper), 0 0 0 18px var(--ink);
  transition: transform .7s cubic-bezier(.2, .9, .1, 1);
}

.operand-orbit { position: absolute; inset: 0; }
.operand {
  position: absolute;
  left: 50%; top: 50%;
  display: block;
  width: 3rem; height: 2rem;
  background: var(--acid);
  border: 2px solid var(--ink);
  transform-origin: -12vw -7vh;
  animation: orbit 8s linear infinite;
}
.operand.ticket { border-radius: .2rem; animation-delay: -1s; }
.operand.key { width: 1.2rem; height: 3.4rem; border-radius: 1rem 1rem .1rem .1rem; background: var(--cobalt); animation-delay: -3s; }
.operand.ribbon { background: var(--blush); clip-path: polygon(0 0,100% 0,80% 50%,100% 100%,0 100%,20% 50%); animation-delay: -5s; }
.operand.dot { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--red); animation-delay: -6s; }
.operand.note { background: var(--paper); animation-delay: -7s; }

.carry-mark {
  position: absolute;
  right: 5vw;
  bottom: 10vh;
  background: var(--acid);
  color: var(--ink);
  font-family: var(--poster);
  font-size: clamp(2rem, 6vw, 6rem);
  padding: .2em .35em;
  transform: rotate(4deg);
  box-shadow: -8px 8px 0 var(--red);
}

.receipt-tape {
  position: absolute;
  right: 11vw;
  top: -2rem;
  width: 11rem;
  padding: 2rem 1rem;
  background: repeating-linear-gradient(to bottom, var(--paper) 0 32px, #f0e5d2 32px 34px);
  border: 2px solid var(--ink);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: unspool 6s ease-in-out infinite alternate;
}
.receipt-tape span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }

.proof-us {
  background: linear-gradient(90deg, var(--ink) 0 62%, var(--red) 62% 63%, var(--paper) 63%);
}
.chalk-field { position: absolute; inset: 5vh 5vw; border: 2px solid rgba(255,247,234,.28); }
.proof-number {
  position: absolute; left: 2vw; top: -2vh;
  font-family: var(--poster); font-size: 25vw; color: rgba(255,247,234,.08);
}
.proof-us h1 {
  position: absolute; left: 7vw; top: 8vh; margin: 0;
  font-family: var(--poster); font-size: clamp(5rem, 16vw, 16rem); line-height: .78;
  color: var(--paper); text-shadow: 10px 9px 0 var(--cobalt);
}
.pull-quote {
  position: absolute; left: 45vw; top: 18vh; max-width: 17rem;
  font-family: var(--soft); font-size: clamp(1.8rem, 3.4vw, 4rem); line-height: .95;
  color: var(--blush); transform: rotate(-6deg);
}
.jp-large {
  position: absolute; right: 5vw; bottom: 3vh;
  font-family: var(--serif-jp); font-size: clamp(5rem, 17vw, 17rem); color: var(--ink);
  text-shadow: -6px 6px 0 var(--blush), 8px -8px 0 var(--cobalt);
}
.correction-strip {
  position: absolute; padding: .55rem 1rem; font-family: var(--space); text-transform: uppercase; letter-spacing: .1em;
  color: var(--paper); border: 2px solid var(--paper);
}
.correction-strip.red { left: 16vw; bottom: 24vh; background: var(--red); transform: rotate(8deg); }
.correction-strip.blue { right: 7vw; top: 22vh; background: var(--cobalt); transform: rotate(-12deg); }
.correction-strip.blush { left: 34vw; top: 52vh; background: var(--blush); color: var(--ink); transform: rotate(-3deg); }
.annotation-lines { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke: var(--acid); stroke-width: 4; stroke-dasharray: 900; animation: drawLine 5s ease-in-out infinite alternate; }
.stage-lights { position: absolute; left: 0; right: 0; bottom: 2vh; display: flex; justify-content: center; gap: 1rem; }
.stage-lights span { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; background: var(--paper); color: var(--ink); font-family: var(--poster); font-size: 2rem; box-shadow: 0 0 24px var(--blush); }

.one-more { background: var(--ink); }
.room-plus { position: absolute; inset: 6vh 6vw; transition: transform .9s cubic-bezier(.2,.9,.1,1); }
.arm { position: absolute; display: grid; gap: 1.2rem; }
.arm.horizontal { left: 0; right: 0; top: 38%; height: 24%; grid-template-columns: 1fr 1fr; background: var(--paper); color: var(--ink); border: 4px solid var(--red); }
.arm.vertical { top: 0; bottom: 0; left: 38%; width: 24%; grid-template-rows: 1fr 1fr; background: var(--red); color: var(--paper); border: 4px solid var(--paper); }
.arm article { display: flex; flex-direction: column; justify-content: center; padding: 2rem; font-family: var(--space); text-transform: uppercase; letter-spacing: .08em; }
.arm b { font-family: var(--poster); font-size: clamp(2rem, 4vw, 5rem); letter-spacing: 0; }
.arm span { max-width: 18rem; }
.lantern-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 18vmin; height: 18vmin; display: grid; place-items: center; border-radius: 50%;
  background: var(--acid); color: var(--ink); font-family: var(--poster); font-size: 18vmin;
  box-shadow: 0 0 2rem var(--acid), 0 0 5rem var(--red), 10px 10px 0 var(--cobalt);
  animation: lantern 2.8s ease-in-out infinite;
}
.final-copy { position: absolute; left: 7vw; bottom: 7vh; max-width: 38rem; z-index: 3; }
.proof-label { color: var(--acid); text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; }
.final-copy h2 { margin: .1em 0; font-family: var(--poster); font-size: clamp(4rem, 12vw, 13rem); line-height: .75; color: var(--paper); text-shadow: 8px 8px 0 var(--red); }
.final-copy p { font-family: var(--serif-jp); color: var(--blush); font-size: clamp(1.1rem, 2vw, 2rem); }

[data-reactive-plus].is-doubt { transform: rotate(45deg) scale(1.03); }
.hero-plus.is-doubt { transform: rotate(38deg) scale(1.03); }
.operator-node.is-doubt { transform: translate(-50%, -50%) rotate(45deg) scale(1.07); }
.room-plus.is-doubt { transform: rotate(45deg) scale(.96); }

@keyframes grainJitter { 50% { transform: translate(2px, -1px); } }
@keyframes stampSlide { from { --stamp-x: -55vw; opacity: 0; } to { --stamp-x: -9vw; opacity: 1; } }
@keyframes drift { from { transform: translate3d(-1rem, .5rem, 0) rotate(-2deg); } to { transform: translate3d(1.4rem, -1rem, 0) rotate(3deg); } }
@keyframes riverOne { to { translate: 8vw 0; } }
@keyframes riverTwo { to { translate: -8vw 0; } }
@keyframes orbit { from { transform: rotate(0deg) translateX(18vw) rotate(0deg); } to { transform: rotate(360deg) translateX(18vw) rotate(-360deg); } }
@keyframes unspool { from { transform: translateY(-18%); } to { transform: translateY(8%); } }
@keyframes drawLine { from { stroke-dashoffset: 900; } to { stroke-dashoffset: 0; } }
@keyframes lantern { 50% { box-shadow: 0 0 3.4rem var(--acid), 0 0 7rem var(--red), -10px 10px 0 var(--cobalt); transform: translate(-50%, -50%) scale(1.08); } }

@media (max-width: 760px) {
  .domain-stamp { left: 17vw; top: 50vh; font-size: 23vw; }
  .hero-plus { left: -22vw; top: -11vh; font-size: 125vmin; }
  .proof-note { font-size: .62rem; }
  .stage-title { top: 7vh; }
  .addend-strip { width: 190vw; left: -45vw; }
  .operator-node { width: 7rem; height: 7rem; font-size: 8rem; }
  .receipt-tape { right: 2vw; width: 9rem; }
  .proof-us { background: var(--ink); }
  .pull-quote { left: 11vw; top: 50vh; }
  .jp-large { color: var(--paper); opacity: .45; }
  .arm article { padding: 1rem; }
  .arm b { font-size: 2rem; }
  .arm span { font-size: .68rem; }
}