:root {
  --stamp-red: #D72638;
  --correction: #FF5A5F;
  --cream: #FFF3D6;
  --blue: #79B8FF;
  --green: #4DAA57;
  --charcoal: #191716;
  --yellow: #F6C90E;
  --pink: #F7A8B8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--charcoal);
  color: var(--cream);
  font-family: "Zen Kaku Gothic New", sans-serif;
}

body {
  cursor: crosshair;
}

.desk-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 90, 95, .16), transparent 28%),
    radial-gradient(circle at 78% 60%, rgba(246, 201, 14, .08), transparent 32%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(0deg, rgba(255,243,214,.018) 0 2px, transparent 2px 11px);
  z-index: 1;
}

.gate {
  display: flex;
  width: 500vw;
  height: 100vh;
  transition: transform .9s cubic-bezier(.7, 0, .17, 1);
  will-change: transform;
}

.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
  flex: 0 0 100vw;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
}

h1, h2 {
  font-family: "RocknRoll One", sans-serif;
  margin: 0;
  line-height: .9;
  letter-spacing: -.06em;
}

h1 {
  position: absolute;
  right: 7vw;
  bottom: 10vh;
  color: var(--stamp-red);
  font-size: clamp(76px, 13vw, 210px);
  text-shadow: 5px 5px 0 rgba(255,243,214,.12), 0 0 34px rgba(215,38,56,.32);
  transform: rotate(-6deg);
}

h2 {
  color: var(--cream);
  font-size: clamp(46px, 8vw, 132px);
  text-shadow: 3px 3px 0 var(--stamp-red);
}

.caption, .scene-copy {
  font-size: clamp(16px, 1.55vw, 24px);
  line-height: 1.8;
  max-width: 560px;
  color: rgba(255, 243, 214, .82);
  font-weight: 700;
}

.stamp-nav {
  position: fixed;
  z-index: 10;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}

.nav-stamp {
  width: 76px;
  height: 52px;
  border: 3px solid var(--stamp-red);
  background: rgba(255, 243, 214, .9);
  color: var(--stamp-red);
  font-family: "BIZ UDPMincho", serif;
  font-weight: 700;
  transform: rotate(-5deg);
  box-shadow: inset 0 0 0 2px rgba(215,38,56,.18), 4px 5px 0 rgba(0,0,0,.36);
  transition: transform .22s ease, background .22s ease;
}

.nav-stamp:nth-child(even) { transform: rotate(4deg); }
.nav-stamp.active { background: var(--stamp-red); color: var(--cream); transform: rotate(0deg) scale(1.08); }
.nav-stamp.safe { border-color: var(--green); color: var(--green); }
.nav-stamp.safe.active { background: var(--green); color: var(--cream); }

.warning-tape {
  position: absolute;
  height: 42px;
  color: var(--charcoal);
  background: repeating-linear-gradient(135deg, var(--yellow) 0 18px, var(--charcoal) 18px 28px);
  font-family: "DotGothic16", monospace;
  letter-spacing: .12em;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
}

.warning-tape.top { left: -5vw; top: 26px; width: 58vw; transform: rotate(-2deg); }
.warning-tape.diagonal { right: -8vw; bottom: 18vh; width: 54vw; transform: rotate(-24deg); }

.desk-label {
  position: absolute;
  left: 5vw;
  top: 16vh;
  font-family: "DotGothic16", monospace;
  color: var(--yellow);
  font-size: 18px;
  letter-spacing: .18em;
}

.receipt-strip {
  position: absolute;
  background: var(--cream);
  color: var(--charcoal);
  border: 1px solid rgba(25,23,22,.25);
  box-shadow: 0 20px 60px rgba(0,0,0,.52), inset 0 -18px 28px rgba(246,201,14,.1);
  font-weight: 900;
}

.receipt-strip p { margin: 0; }
.receipt-code { display: block; font-family: "DotGothic16", monospace; color: var(--stamp-red); margin-bottom: 15px; font-size: 15px; }
.receipt-strip.incoming {
  left: -16vw;
  top: 42vh;
  width: min(1020px, 86vw);
  padding: 28px 44px;
  font-size: clamp(25px, 3.2vw, 54px);
  transform: rotate(1.8deg);
  animation: receiptEnter 1.7s cubic-bezier(.22, .8, .2, 1) both;
}

.thermal-edge {
  position: absolute;
  right: -18px;
  top: 0;
  width: 28px;
  height: 100%;
  background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(25,23,22,.18) 8px 10px);
  clip-path: polygon(0 0, 100% 5%, 45% 10%, 100% 15%, 45% 20%, 100% 25%, 45% 30%, 100% 35%, 45% 40%, 100% 45%, 45% 50%, 100% 55%, 45% 60%, 100% 65%, 45% 70%, 100% 75%, 45% 80%, 100% 85%, 45% 90%, 100% 95%, 0 100%);
}

@keyframes receiptEnter {
  from { transform: translateX(-45vw) rotate(1.8deg); opacity: .35; }
  to { transform: translateX(0) rotate(1.8deg); opacity: 1; }
}

.ruler {
  position: absolute;
  left: 10vw;
  top: 31vh;
  width: 68vw;
  height: 70px;
  background: rgba(247, 168, 184, .42);
  border: 2px solid rgba(255, 90, 95, .75);
  color: var(--cream);
  display: flex;
  justify-content: space-around;
  align-items: end;
  padding-bottom: 8px;
  font-family: "DotGothic16", monospace;
  transform: rotate(-5deg);
  backdrop-filter: blur(3px);
  animation: rulerSweep 3.4s ease-in-out infinite alternate;
}

.ruler::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: repeating-linear-gradient(90deg, rgba(215,38,56,.7) 0 2px, transparent 2px 26px);
}

@keyframes rulerSweep { to { transform: translateX(5vw) rotate(-5deg); } }

.stamp-pad {
  position: absolute;
  left: 14vw;
  bottom: 10vh;
  width: 190px;
  height: 78px;
  border-radius: 48%;
  background: radial-gradient(ellipse at center, var(--stamp-red), #82101a 72%);
  box-shadow: inset 0 8px 22px rgba(0,0,0,.55), 0 12px 30px rgba(0,0,0,.45);
}

.heat-lamp { background: radial-gradient(circle at 50% 0%, rgba(255,90,95,.22), transparent 45%), var(--charcoal); }
.lamp-cone {
  position: absolute;
  top: -18vh;
  left: 24vw;
  width: 52vw;
  height: 90vh;
  background: radial-gradient(ellipse at top, rgba(246,201,14,.28), rgba(255,90,95,.1) 44%, transparent 70%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  animation: lampPulse 2s ease-in-out infinite alternate;
}
@keyframes lampPulse { to { opacity: .62; transform: scaleX(1.04); } }

.manuscript-paper {
  position: absolute;
  left: 8vw;
  top: 27vh;
  width: 68vw;
  min-height: 270px;
  padding: 54px 64px;
  color: var(--charcoal);
  background-color: var(--cream);
  background-image: linear-gradient(rgba(215,38,56,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(215,38,56,.18) 1px, transparent 1px);
  background-size: 38px 38px;
  box-shadow: 0 30px 80px rgba(0,0,0,.46);
  transform: rotate(-1deg);
  font-size: clamp(28px, 4vw, 62px);
  font-weight: 900;
}

mark { background: transparent; color: inherit; }
.blast {
  position: relative;
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgba(247,168,184,.38), 0 0 0 34px rgba(255,90,95,.18);
  animation: halo 1.4s ease-in-out infinite alternate;
}
.blast.hot { box-shadow: 0 0 0 20px rgba(255,90,95,.35), 0 0 0 48px rgba(215,38,56,.2); }
@keyframes halo { to { box-shadow: 0 0 0 26px rgba(247,168,184,.22), 0 0 0 58px rgba(215,38,56,.11); } }
.underline-burn { border-bottom: 10px solid var(--correction); box-shadow: 0 14px 18px rgba(255,90,95,.32); }

.margin-note {
  position: absolute;
  background: rgba(255, 243, 214, .9);
  color: var(--stamp-red);
  border: 2px solid var(--stamp-red);
  font-family: "BIZ UDPMincho", serif;
  font-size: 18px;
  padding: 8px 12px;
  box-shadow: 3px 4px 0 rgba(215,38,56,.22);
}
.note-a { right: -52px; top: 28px; transform: rotate(8deg); }
.note-b { left: 90px; bottom: -22px; transform: rotate(-4deg); }

.impact-stamp {
  position: absolute;
  right: 12vw;
  top: 18vh;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 8px solid var(--stamp-red);
  background: rgba(255,243,214,.92);
  color: var(--stamp-red);
  font-family: "RocknRoll One", sans-serif;
  font-size: 42px;
  box-shadow: inset 0 0 0 9px rgba(215,38,56,.16), 0 18px 38px rgba(0,0,0,.44);
  transform: rotate(13deg);
  transition: transform .18s ease;
}
.impact-stamp.hit { transform: translateY(21vh) rotate(-8deg) scale(.92); }

.proof-loop {
  position: absolute;
  border: 7px solid var(--correction);
  border-radius: 50%;
  opacity: .82;
}
.loop-one { width: 260px; height: 110px; left: 14vw; top: 42vh; transform: rotate(-9deg); }
.loop-two { width: 190px; height: 95px; left: 47vw; top: 44vh; transform: rotate(6deg); }
.heat-lamp h2 { position: absolute; left: 8vw; bottom: 9vh; }
.heat-lamp .scene-copy { position: absolute; right: 12vw; bottom: 12vh; }

.evidence-margin { background: linear-gradient(120deg, var(--charcoal) 0 52%, #241c1a 52% 100%); }
.split-counter { position: absolute; inset: 10vh 9vw; display: grid; grid-template-columns: .9fr 1.1fr; gap: 6vw; align-items: center; }
.left-slip { transform: rotate(-2deg); }
.left-slip p { font-size: 24px; color: rgba(255,243,214,.8); font-weight: 700; }
.ghost {
  margin: 24px 0;
  width: max-content;
  padding: 12px 18px;
  color: rgba(121,184,255,.85);
  border: 1px dashed rgba(121,184,255,.75);
  font-family: "BIZ UDPMincho", serif;
  animation: whisper 2.6s ease-in-out infinite alternate;
}
.ghost-two { margin-left: 80px; animation-delay: .6s; }
@keyframes whisper { to { opacity: .45; transform: translateX(18px); } }
.stamp-station { position: relative; height: 460px; }
.stamp-block {
  position: absolute;
  display: grid;
  place-items: center;
  background: var(--cream);
  color: var(--stamp-red);
  border: 7px solid var(--stamp-red);
  font-family: "BIZ UDPMincho", serif;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 48px);
  box-shadow: inset 0 0 0 6px rgba(215,38,56,.15), 12px 16px 0 rgba(0,0,0,.38);
  animation: stampSquash 3s ease-in-out infinite;
}
.stamp-ask { width: 250px; height: 130px; left: 0; top: 18px; transform: rotate(-8deg); }
.stamp-big { width: 360px; height: 160px; right: 6vw; top: 140px; transform: rotate(5deg); animation-delay: .5s; }
.stamp-hard { width: 310px; height: 140px; left: 7vw; bottom: 10px; transform: rotate(-2deg); animation-delay: 1s; }
@keyframes stampSquash { 0%, 74%, 100% { scale: 1; } 80% { scale: 1.08 .9; } }
.blue-coupon {
  position: absolute;
  right: 13vw;
  bottom: 8vh;
  padding: 22px 34px;
  background: var(--blue);
  color: var(--charcoal);
  font-size: 22px;
  font-weight: 900;
  transform: rotate(3deg);
  box-shadow: 0 16px 35px rgba(0,0,0,.36);
}

.too-much-meter { background: radial-gradient(circle at 75% 30%, rgba(246,201,14,.13), transparent 33%), var(--charcoal); }
.too-much-meter h2 { position: absolute; left: 7vw; top: 8vh; }
.meter-console {
  position: absolute;
  left: 8vw;
  top: 28vh;
  width: 78vw;
  height: 54vh;
  background: var(--cream);
  color: var(--charcoal);
  border: 8px solid var(--stamp-red);
  box-shadow: 20px 25px 0 rgba(215,38,56,.26), 0 34px 80px rgba(0,0,0,.52);
  padding: 34px;
  transform: rotate(.8deg);
}
.meter-labels { display: flex; justify-content: space-between; font-family: "BIZ UDPMincho", serif; color: var(--stamp-red); font-weight: 700; font-size: 22px; }
.meter-track { position: relative; height: 34px; margin: 24px 0; background: linear-gradient(90deg, var(--green), var(--yellow), var(--correction), var(--stamp-red)); border: 3px solid var(--charcoal); }
.meter-fill { height: 100%; width: 0%; background: rgba(25,23,22,.22); transition: width .9s ease; }
.meter-needle { position: absolute; top: -18px; left: 0%; width: 12px; height: 70px; background: var(--charcoal); box-shadow: 0 0 0 4px var(--yellow); transition: left .9s ease; }
.seismograph { width: 100%; height: 58%; overflow: visible; }
.grid-line { stroke: rgba(25,23,22,.18); stroke-width: 2; stroke-dasharray: 8 10; }
.wave-shadow { fill: none; stroke: rgba(255,90,95,.22); stroke-width: 22; stroke-linecap: round; }
.wave { fill: none; stroke: var(--stamp-red); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1300; stroke-dashoffset: 1300; animation: drawWave 2.8s ease-in-out infinite alternate; }
@keyframes drawWave { to { stroke-dashoffset: 0; } }
.buzzer-code { font-family: "DotGothic16", monospace; color: var(--stamp-red); font-size: 20px; }
.verdict-row { position: absolute; right: 9vw; bottom: 5vh; display: flex; gap: 18px; }
.verdict-row span { padding: 14px 28px; border: 4px solid var(--stamp-red); color: var(--stamp-red); background: var(--cream); font-family: "BIZ UDPMincho", serif; font-weight: 700; font-size: 25px; transform: rotate(-4deg); }
.verdict-row .danger { background: var(--stamp-red); color: var(--cream); transform: rotate(5deg) scale(1.08); }

.soft-landing { background: radial-gradient(circle at 50% 44%, rgba(121,184,255,.18), transparent 40%), var(--charcoal); }
.final-tray {
  position: absolute;
  left: 9vw;
  top: 20vh;
  width: 74vw;
  height: 47vh;
  border-radius: 42px;
  background: linear-gradient(145deg, #241d1b, #0e0d0c);
  border: 3px solid rgba(255,243,214,.14);
  box-shadow: inset 0 0 60px rgba(0,0,0,.65), 0 35px 80px rgba(0,0,0,.55);
}
.receipt-strip.calm {
  left: 7vw;
  top: 11vh;
  width: 58vw;
  padding: 30px 42px;
  font-size: clamp(24px, 3.4vw, 56px);
  transform: rotate(-1.4deg);
  border-left: 12px solid var(--blue);
}
.safe-stamp {
  position: absolute;
  right: 5vw;
  top: -45px;
  width: 170px;
  height: 170px;
  display: grid;
  place-items: center;
  border: 7px solid var(--green);
  color: var(--green);
  background: rgba(255,243,214,.92);
  border-radius: 50%;
  font-family: "BIZ UDPMincho", serif;
  font-size: 42px;
  font-weight: 700;
  transform: rotate(14deg);
  box-shadow: inset 0 0 0 8px rgba(77,170,87,.16);
}
.coupon-stack { position: absolute; right: 4vw; bottom: -34px; display: grid; gap: 8px; }
.coupon-stack span { display: block; padding: 11px 20px; background: var(--blue); color: var(--charcoal); font-weight: 900; transform: rotate(-3deg); box-shadow: 0 8px 18px rgba(0,0,0,.28); }
.coupon-stack span:nth-child(even) { transform: rotate(3deg); background: var(--green); }
.soft-landing h2 { position: absolute; left: 9vw; bottom: 9vh; color: var(--blue); text-shadow: 3px 3px 0 rgba(77,170,87,.55); }
.soft-landing .scene-copy { position: absolute; right: 11vw; bottom: 10vh; }

.scroll-hint {
  position: fixed;
  z-index: 12;
  left: 26px;
  bottom: 20px;
  color: var(--yellow);
  font-family: "DotGothic16", monospace;
  letter-spacing: .12em;
}

@media (max-width: 760px) {
  .stamp-nav { right: 8px; transform: translateY(-50%) scale(.76); }
  .scene { padding: 26px; }
  .receipt-strip.incoming { top: 38vh; width: 88vw; padding: 22px; }
  h1 { right: 18vw; bottom: 8vh; }
  .manuscript-paper { left: 6vw; width: 82vw; padding: 34px 28px; }
  .split-counter { grid-template-columns: 1fr; inset: 11vh 12vw; }
  .stamp-station { height: 260px; scale: .65; transform-origin: left top; }
  .meter-console { width: 80vw; height: 48vh; padding: 18px; }
  .final-tray { width: 78vw; }
  .receipt-strip.calm { width: 62vw; left: 5vw; }
}