:root {
  /* Design parser token compatibility: Space Grotesk** for labels */
  --ink: #101014;
  --blush: #FF4F86;
  --lemon: #FFE14D;
  --blue: #A7E9FF;
  --cream: #FFF4D8;
  --violet: #7A45FF;
  --mint: #55FFB2;
  --mood: var(--cream);
  --poster: Impact, Haettenschweiler, "Arial Black", system-ui, sans-serif;
  --round: "Trebuchet MS", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  --label: "Space Grotesk**", "Space Grotesk", "Arial Narrow", Arial, system-ui, sans-serif;
  --hand: "Comic Sans MS", "Bradley Hand", "Marker Felt", cursive;
}

* { box-sizing: border-box; }

html {
  scroll-snap-type: y mandatory;
  background: var(--ink);
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--round);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,79,134,.28) 0 7px, transparent 8px 22px),
    linear-gradient(90deg, rgba(16,16,20,.09) 1px, transparent 1px),
    var(--mood);
  background-size: 36px 36px, 18px 18px, auto;
  transition: background-color .35s steps(2, end);
}

body.mood-cold { --mood: var(--blue); }
body.mood-hot { --mood: var(--blush); }
body.mood-paper { --mood: var(--cream); }
body.mood-violet { --mood: var(--violet); }
body.mood-quiet { --mood: var(--cream); }

.review-ritual { width: 100%; }

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  border-bottom: 10px solid var(--ink);
}

.cold-open { background: var(--cream); }
.tear-stage, .cold-face, .warm-face, .serrated-tear { position: absolute; inset: 0; }
.cold-face {
  background: var(--blue);
  clip-path: polygon(0 0, 53% 0, 43% 10%, 53% 21%, 44% 35%, 55% 50%, 45% 64%, 54% 80%, 42% 100%, 0 100%);
}
.warm-face {
  background: var(--blush);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 45% 100%, 54% 80%, 45% 64%, 55% 50%, 44% 35%, 53% 21%, 43% 10%);
}
.serrated-tear {
  left: 41%;
  width: 18%;
  background: repeating-linear-gradient(135deg, var(--ink) 0 12px, transparent 12px 24px);
  clip-path: polygon(44% 0, 56% 0, 47% 12%, 59% 24%, 45% 38%, 61% 53%, 46% 69%, 58% 84%, 43% 100%, 34% 100%, 48% 84%, 36% 69%, 50% 53%, 35% 38%, 49% 24%, 37% 12%);
  opacity: .95;
}
.speed-lines {
  position: absolute; inset: -10% -20%; opacity: .35;
  background: repeating-conic-gradient(from -20deg at 52% 52%, transparent 0 5deg, var(--ink) 5.5deg 6.5deg, transparent 7deg 15deg);
  animation: jitter 2.1s steps(2, end) infinite;
}
.blush-blot {
  position: absolute;
  width: 24vmin; height: 18vmin;
  left: 25%; top: 29%;
  background: var(--blush);
  border: 7px solid var(--ink);
  border-radius: 55% 45% 62% 38%;
  transform: rotate(-12deg) translateX(-22vmin);
  box-shadow: 12px 14px 0 var(--violet);
  animation: blushPeek 1.4s cubic-bezier(.2,1.7,.4,.9) .25s forwards;
}
.wordmark {
  position: absolute;
  left: 8vw; top: 36vh;
  margin: 0;
  padding: .08em .22em .14em;
  font-family: var(--poster);
  font-size: clamp(3.5rem, 13vw, 13rem);
  line-height: .8;
  letter-spacing: -.08em;
  color: var(--cream);
  background: var(--ink);
  border: 8px solid var(--ink);
  transform: rotate(-4deg);
  text-shadow: 8px 7px 0 var(--blush), -5px -4px 0 var(--mint);
  z-index: 3;
}
.ignore-label, .section-tag, .side-score, .rubric {
  font-family: var(--label);
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: .08em;
}
.ignore-label {
  position: absolute; left: 51vw; top: 31vh; z-index: 4;
  background: var(--lemon); border: 5px solid var(--ink);
  padding: .5rem 1rem; transform: rotate(7deg);
  box-shadow: 7px 7px 0 var(--ink);
  animation: labelSlap .5s steps(2, end) .9s both;
}
.side-score {
  position: absolute; top: 14vh; writing-mode: vertical-rl;
  background: var(--cream); border: 4px solid var(--ink); padding: 1rem .5rem;
  box-shadow: 6px 6px 0 var(--ink); font-size: .8rem;
}
.left-score { left: 2vw; }
.right-score { right: 2vw; transform: rotate(180deg); }
.opening-mutter {
  position: absolute; right: 7vw; bottom: 11vh; max-width: 25rem;
  font-size: clamp(1.1rem, 2vw, 1.8rem); background: var(--cream);
  border: 5px solid var(--ink); padding: 1rem; transform: rotate(2deg);
}
.comic-burst {
  position: absolute; right: 18vw; top: 12vh; width: 10rem; height: 10rem;
  display: grid; place-items: center; font-family: var(--poster); font-size: 7rem;
  color: var(--ink); background: var(--lemon);
  clip-path: polygon(50% 0,59% 31%,91% 16%,73% 45%,100% 58%,67% 62%,76% 95%,50% 72%,21% 98%,31% 64%,0 56%,29% 44%,12% 13%,42% 31%);
  animation: wobble .8s steps(2,end) infinite;
}

.complaint-wall { background: var(--blush); }
.section-tag {
  position: absolute; left: 3vw; top: 3vh;
  display: inline-block; padding: .55rem .8rem;
  color: var(--cream); background: var(--ink); border: 4px solid var(--ink);
  box-shadow: 5px 5px 0 var(--mint); transform: rotate(-2deg); z-index: 5;
}
.shout {
  position: absolute; margin: 0; left: 5vw; top: 11vh;
  font-family: var(--poster); font-size: clamp(3rem, 9vw, 9rem); line-height: .78;
  letter-spacing: -.06em; color: var(--lemon);
  -webkit-text-stroke: 5px var(--ink); text-shadow: 10px 10px 0 var(--violet);
  z-index: 2;
}
.sticky-field { position: absolute; inset: 24vh 4vw 10vh 7vw; }
.nitpick {
  position: absolute; width: clamp(15rem, 26vw, 26rem); min-height: 10rem;
  padding: 1rem; background: var(--cream); border: 5px solid var(--ink);
  box-shadow: 10px 12px 0 var(--ink); transform: rotate(var(--r));
  transition: transform .18s steps(2,end), background .18s steps(2,end);
}
.nitpick::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 4.2rem; height: .45rem;
  background: var(--blush); box-shadow: 0 .7rem 0 var(--blush); transform: rotate(-2deg);
}
.nitpick::after {
  content: attr(data-soft); position: absolute; inset: auto .8rem .8rem .8rem;
  font-family: var(--hand); font-size: 1.2rem; color: var(--violet);
  opacity: 0; transform: translateY(10px) rotate(-2deg);
}
.nitpick:hover { background: var(--mint); transform: rotate(0) scale(1.05); z-index: 8; }
.nitpick:hover::after { opacity: 1; }
.nitpick b { display: block; margin: .7rem 0; font-family: var(--poster); font-size: clamp(1.6rem,3vw,3rem); line-height: .85; }
.nitpick em { display: block; margin-top: 1rem; font-style: normal; }
.note-one { --r: -7deg; left: 3%; top: 8%; }
.note-two { --r: 5deg; left: 33%; top: 2%; background: var(--blue); }
.note-three { --r: -3deg; right: 3%; top: 17%; }
.note-four { --r: 8deg; left: 42%; bottom: 2%; background: var(--lemon); }
.correction-tape {
  position: absolute; left: -4vw; bottom: 8vh; width: 110vw; padding: .55rem;
  font-family: var(--poster); font-size: 2rem; color: var(--cream); background: var(--ink);
  transform: rotate(-5deg); border-block: 8px solid var(--lemon); word-spacing: 2rem;
}
.hidden-soft { position: absolute; right: 3vw; bottom: 2vh; font-family: var(--hand); font-size: 1.3rem; }

.evidence-shelf { background: var(--cream); }
.sideways { writing-mode: vertical-rl; left: 2vw; top: 18vh; font-size: clamp(2.8rem, 7vw, 7rem); }
.evidence-track {
  position: absolute; left: 17vw; top: 22vh; width: 120vw; height: 58vh;
  display: flex; gap: 2rem; align-items: center;
  transform: translateX(var(--shelf-shift, 0px)); transition: transform .5s cubic-bezier(.2,1.4,.32,1);
}
.evidence {
  flex: 0 0 clamp(15rem, 24vw, 25rem); min-height: 22rem; padding: 1.25rem;
  background: var(--cream); border: 5px solid var(--ink); box-shadow: 12px 12px 0 var(--blush);
  transform: rotate(var(--tilt)); position: relative; font-size: 1.2rem;
}
.evidence b { font-family: var(--poster); display: block; font-size: 2.6rem; line-height: .9; }
.evidence p { position: absolute; bottom: 1rem; left: 1rem; right: 1rem; }
.receipt { --tilt: -5deg; background: repeating-linear-gradient(0deg, var(--cream) 0 18px, rgba(16,16,20,.08) 19px 20px); }
.charm { --tilt: 6deg; background: var(--blue); border-radius: 44% 56% 48% 52%; }
.ticket { --tilt: -2deg; background: var(--lemon); clip-path: polygon(0 0,100% 0,100% 40%,92% 50%,100% 60%,100% 100%,0 100%,0 60%,8% 50%,0 40%); }
.screenshot { --tilt: 4deg; background: var(--mint); }
.bag { --tilt: -7deg; background: rgba(167,233,255,.72); backdrop-filter: blur(1px); }
.barcode { display: block; height: 5rem; margin-bottom: 1rem; background: repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px, var(--ink) 8px 11px, transparent 11px 18px); }
.horn-clip { width: 6rem; height: 6rem; border: 9px solid var(--ink); border-top-color: transparent; border-radius: 50%; transform: rotate(25deg); margin: 1rem auto; }
.shelf-nudge, .crack-button, .stamp, .open-envelope {
  font-family: var(--label); text-transform: uppercase; font-weight: 900; letter-spacing: .04em;
  background: var(--lemon); color: var(--ink); border: 5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: .8rem 1rem; cursor: pointer;
}
.shelf-nudge { position: absolute; right: 5vw; bottom: 7vh; transform: rotate(3deg); }

.rating-meltdown { background: var(--violet); color: var(--cream); }
.instrument-panel { position: absolute; inset: 27vh 5vw 12vh 5vw; display: grid; grid-template-columns: .6fr 1.1fr .7fr .8fr; gap: 2vw; align-items: center; }
.thermometer { height: 66vh; border: 7px solid var(--ink); background: var(--cream); border-radius: 4rem; position: relative; box-shadow: 10px 10px 0 var(--ink); overflow: hidden; }
.thermometer span { position: absolute; left: 18%; right: 18%; bottom: 5%; height: 72%; background: var(--blush); border: 5px solid var(--ink); border-radius: 4rem 4rem 2rem 2rem; animation: heat 1.8s steps(4,end) infinite; }
.denial-meter { color: var(--ink); text-align: center; }
.meter-face { position: relative; height: clamp(18rem,34vw,31rem); background: var(--blue); border: 7px solid var(--ink); border-radius: 50% 50% 8% 8%; box-shadow: 12px 12px 0 var(--blush); overflow: hidden; }
.meter-face::before { content: ""; position: absolute; inset: 18%; border: 6px solid var(--ink); border-bottom: 0; border-radius: 18rem 18rem 0 0; }
.needle { position: absolute; width: 45%; height: 8px; left: 50%; bottom: 24%; background: var(--lemon); border: 3px solid var(--ink); transform-origin: left center; transform: rotate(var(--needle-angle, -42deg)); transition: transform .35s cubic-bezier(.2,1.7,.4,.9); }
.meter-word { position: absolute; bottom: 12%; font-family: var(--poster); font-size: 2rem; }
.awful { left: 7%; } .fine { right: 9%; }
.crack-button { margin-top: 1.2rem; }
.stamp-pad { display: grid; gap: 1rem; transform: rotate(-4deg); }
.stamp { font-size: clamp(1.8rem,4vw,4rem); background: var(--cream); }
.stamp.active { background: var(--mint); transform: translate(6px,6px); box-shadow: 0 0 0 var(--ink); }
.cracked-seal { width: min(27vw, 21rem); aspect-ratio: 1; display: grid; place-items: center; background: var(--lemon); color: var(--ink); border: 7px solid var(--ink); border-radius: 50%; font-family: var(--poster); font-size: clamp(2.2rem,5vw,5rem); text-align: center; box-shadow: 14px 12px 0 var(--blush); clip-path: polygon(50% 0,61% 17%,80% 8%,83% 30%,100% 39%,87% 55%,97% 76%,74% 76%,62% 99%,48% 80%,29% 95%,24% 73%,1% 68%,17% 50%,4% 29%,28% 27%); }
.cracked-seal.cracked { animation: crack .45s steps(2,end) 2; }
.meltdown-copy { position: absolute; left: 8vw; bottom: 3vh; max-width: 42rem; font-size: 1.35rem; }

.secret-afterword { background: var(--cream); }
.quiet-paper { position: absolute; inset: 8vh 8vw; background: rgba(255,244,216,.82); border: 2px dashed rgba(16,16,20,.25); }
.envelope { position: absolute; right: 9vw; bottom: 14vh; width: min(72vw, 46rem); height: 23rem; perspective: 1000px; }
.envelope::before { content: ""; position: absolute; inset: 33% 0 0; background: var(--blue); border: 6px solid var(--ink); box-shadow: 12px 12px 0 var(--violet); }
.flap { position: absolute; left: 0; right: 0; top: 0; height: 56%; background: var(--blush); border: 6px solid var(--ink); clip-path: polygon(0 0,100% 0,50% 100%); transform-origin: top; transition: transform 1s cubic-bezier(.2,.9,.2,1); z-index: 3; }
.letter { position: absolute; left: 8%; right: 8%; bottom: 9%; min-height: 16rem; padding: 1.4rem; background: var(--cream); border: 4px solid var(--ink); font-family: var(--hand); font-size: clamp(1.3rem,2.6vw,2.25rem); transform: translateY(62%); transition: transform 1.1s cubic-bezier(.2,1.2,.2,1) .15s; z-index: 2; }
.envelope.open .flap { transform: rotateX(172deg); }
.envelope.open .letter { transform: translateY(-36%); }
.signature { color: var(--blush); transform: rotate(-2deg); }
.open-envelope { position: absolute; left: 7vw; bottom: 15vh; background: var(--mint); }
.final-stamp { position: absolute; left: 12vw; top: 24vh; font-family: var(--poster); font-size: clamp(3rem,8vw,8rem); color: var(--blush); border: 8px solid var(--blush); padding: .2em; transform: rotate(-12deg); opacity: .76; }
.cursor-stamp { position: fixed; z-index: 40; pointer-events: none; left: 0; top: 0; padding: .25rem .45rem; background: var(--lemon); border: 3px solid var(--ink); font-family: var(--poster); opacity: 0; transform: translate(-50%,-50%) rotate(-8deg) scale(.8); transition: opacity .12s, transform .12s; }
.cursor-stamp.show { opacity: 1; transform: translate(-50%,-50%) rotate(7deg) scale(1); }

@keyframes blushPeek { to { transform: rotate(-12deg) translateX(0); } }
@keyframes labelSlap { from { transform: rotate(24deg) scale(1.7); opacity: 0; } to { transform: rotate(7deg) scale(1); opacity: 1; } }
@keyframes jitter { 0%,100% { transform: translate(0,0); } 50% { transform: translate(8px,-4px); } }
@keyframes wobble { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(8deg) scale(1.04); } }
@keyframes heat { 0%,100% { height: 45%; } 50% { height: 88%; } }
@keyframes crack { 0%,100% { transform: translate(0,0) rotate(0); } 33% { transform: translate(9px,-5px) rotate(4deg); } 66% { transform: translate(-7px,6px) rotate(-5deg); } }

@media (max-width: 820px) {
  .wordmark { left: 4vw; top: 38vh; font-size: 20vw; }
  .opening-mutter { right: 4vw; left: 4vw; bottom: 6vh; }
  .sticky-field { inset: 24vh 3vw 5vh; }
  .nitpick { width: 43vw; min-height: 13rem; }
  .note-two { left: 50%; } .note-three { left: 2%; top: 46%; } .note-four { left: 49%; bottom: 8%; }
  .evidence-track { left: 8vw; top: 30vh; }
  .instrument-panel { grid-template-columns: 1fr 1fr; inset: 24vh 4vw 8vh; }
  .thermometer { height: 34vh; }
  .final-stamp { top: 12vh; }
}