:root {
  --cold: #101014;
  --paper: #F4EFE7;
  --annoyed: #FF2E4D;
  --blush: #FF8FB3;
  --cyan: #7CEBFF;
  --violet: #4B2A68;
  --soft: #FFE66D;
  --heat: 0;
  --peel: 0px;
  --stamp: -13deg;
  --cursor: #FF2E4D;
  --display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --warm-serif: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cold);
  color: var(--paper);
  font-family: Inter, system-ui, sans-serif;
  cursor: none;
  overflow-x: hidden;
}

button { font: inherit; color: inherit; cursor: none; }
.mono { font-family: var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.cursor-pencil {
  position: fixed; width: 18px; height: 18px; left: 0; top: 0; z-index: 1000;
  pointer-events: none; border-left: 4px solid var(--cursor); border-bottom: 4px solid var(--cursor);
  transform: translate(-50%, -50%) rotate(-28deg); mix-blend-mode: difference;
}
.cursor-pencil::after { content: ""; position: absolute; width: 34px; height: 3px; background: var(--cursor); left: 5px; top: 11px; transform: rotate(28deg); }
.temperature-meter {
  position: fixed; right: 18px; top: 18px; z-index: 50; display: flex; gap: 8px; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--paper); mix-blend-mode: difference;
}
.temperature-meter i { width: 90px; height: 5px; border: 1px solid currentColor; background: linear-gradient(90deg, #7CEBFF calc(var(--heat) * 100%), transparent 0); }

.critique-panel {
  min-height: 100vh; position: relative; overflow: hidden; isolation: isolate; padding: clamp(24px, 5vw, 74px);
  background: var(--paper); color: var(--cold); border-bottom: 14px solid var(--cold);
}
.critique-panel::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: linear-gradient(rgba(16,16,20,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16,16,20,.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
h1, h2 { font-family: var(--display); line-height: .82; margin: 0; font-weight: 900; letter-spacing: .01em; }

.cold-open { background: linear-gradient(105deg, #101014 0 58%, #F4EFE7 58.2%); color: #F4EFE7; }
.domain-mark { position: absolute; right: 24px; top: 22px; font-size: clamp(30px, 5vw, 84px); writing-mode: vertical-rl; color: #F4EFE7; }
.revision { position: absolute; left: 34px; top: 32px; font-size: 11px; color: #7CEBFF; }
.rejected-stamp {
  position: absolute; left: 10vw; top: 32vh; font-family: var(--display); font-size: clamp(86px, 18vw, 270px);
  color: transparent; -webkit-text-stroke: 7px #FF2E4D; border: 9px solid #FF2E4D; padding: .02em .12em;
  transform: rotate(var(--stamp)) scale(calc(1 + var(--heat) * .03)); opacity: .96; filter: drop-shadow(10px 10px 0 rgba(255,46,77,.18));
  animation: stampJolt 2.8s steps(2, end) infinite;
}
@keyframes stampJolt { 0%, 88%, 100% { translate: 0 0; } 90% { translate: -7px 5px; } 92% { translate: 4px -3px; } }
.tiny-note { position: absolute; right: 13vw; bottom: 17vh; background: #FFE66D; color: #101014; border: 0; padding: 12px 18px; transform: rotate(4deg); box-shadow: 7px 7px 0 #FF2E4D; font-family: var(--jp); }
.tiny-note.revealed { background: #FF8FB3; box-shadow: 7px 7px 0 #7CEBFF; }
.tiny-note.revealed::after { content: " — I measured the margins twice"; font-family: var(--warm-serif); font-style: italic; }
.aside-jp { position: absolute; right: 32vw; top: 18vh; font-family: var(--jp); color: #FF8FB3; opacity: .12; font-size: 18px; }
.crop { position: absolute; width: 54px; height: 54px; border-color: #FF2E4D; opacity: .9; }
.crop-a { left: 24px; top: 24px; border-left: 4px solid; border-top: 4px solid; }
.crop-b { right: 24px; top: 24px; border-right: 4px solid; border-top: 4px solid; }
.crop-c { left: 24px; bottom: 24px; border-left: 4px solid; border-bottom: 4px solid; }
.crop-d { right: 24px; bottom: 24px; border-right: 4px solid; border-bottom: 4px solid; }
.red-pencil-line { position: absolute; background: #FF2E4D; height: 5px; transform-origin: left; opacity: .85; }
.line-one { width: 32vw; left: 7vw; bottom: 22vh; transform: rotate(-8deg) scaleX(var(--heat)); }
.line-two { width: 20vw; right: 16vw; top: 38vh; transform: rotate(14deg) scaleX(calc(.2 + var(--heat))); }

.margin-attack { display: grid; grid-template-columns: 120px 1fr; background: #F4EFE7; }
.left-gutter { grid-row: 1 / span 2; border-right: 7px solid #101014; display: flex; flex-direction: column; justify-content: space-around; font-family: var(--mono); color: #FF2E4D; }
.margin-attack h2 { font-size: clamp(140px, 26vw, 390px); color: #101014; transform: translateX(-18px); }
.argument-stack { position: absolute; right: 7vw; top: 13vh; display: grid; gap: 18px; transform: rotate(-7deg); }
.hostile-label { background: #101014; border: 3px solid #FF2E4D; color: #F4EFE7; padding: 14px 22px; font-family: var(--mono); text-transform: uppercase; transition: .18s; }
.hostile-label:hover { background: #FF8FB3; color: #101014; border-color: #101014; transform: translateX(-16px) rotate(3deg); }
.hostile-label:hover::after { content: " / secretly precise"; }
.margin-copy { max-width: 480px; margin: 0 0 0 7vw; font-family: var(--warm-serif); font-style: italic; font-size: clamp(22px, 3vw, 46px); }
.pencil-circle { position: absolute; left: 42vw; bottom: 12vh; width: 210px; height: 120px; border: 6px solid #FF2E4D; border-radius: 50%; transform: rotate(-18deg); border-left-color: transparent; }
.angry-arrow { position: absolute; right: 25vw; bottom: 24vh; color: #FF2E4D; font-size: 120px; transform: rotate(22deg); }
.crossout-note { position: absolute; left: 19vw; top: 62vh; padding: 18px 24px; background: #FFE66D; color: #101014; font-family: var(--jp); transform: rotate(5deg); }
.crossout-note::after { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 5px; background: #FF2E4D; transform: rotate(-7deg) scaleX(1); transition: .3s; }
.crossout-note.repaired::after { transform: rotate(-7deg) scaleX(0); }

.blush-underlayer { background: #FF8FB3; display: grid; place-items: center; }
.peel-board { position: absolute; inset: 0; background: #101014; color: #F4EFE7; padding: 9vw; clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--peel)), calc(100% - var(--peel)) 100%, 0 100%); transition: clip-path .1s; }
.peel-board h2 { font-size: clamp(90px, 16vw, 230px); color: #F4EFE7; }
.peel-corner { position: absolute; right: 0; bottom: 0; width: calc(80px + var(--peel)); height: calc(80px + var(--peel)); background: linear-gradient(135deg, #F4EFE7, #7CEBFF); box-shadow: -18px -18px 30px rgba(0,0,0,.3); }
.warm-layer { text-align: center; color: #101014; }
.confession { font-family: var(--warm-serif); font-size: clamp(34px, 7vw, 110px); font-style: italic; max-width: 900px; }
.blush-cloud { position: absolute; border-radius: 999px; background: radial-gradient(circle, #FFE66D, #FF8FB3 55%, transparent 70%); filter: blur(8px); opacity: .75; }
.cloud-a { width: 340px; height: 180px; left: 12vw; bottom: 10vh; }.cloud-b { width: 260px; height: 160px; right: 9vw; top: 17vh; }
.poster-strip { position: absolute; right: 12vw; top: 0; bottom: 0; width: 74px; background: #F4EFE7; color: #4B2A68; writing-mode: vertical-rl; font-family: var(--jp); display: grid; place-items: center; letter-spacing: .18em; }

.prototype-tantrum { background: #101014; color: #F4EFE7; }
.prototype-tantrum h2 { font-size: clamp(70px, 13vw, 190px); color: #FF2E4D; max-width: 760px; }
.wireframe-face { position: absolute; right: 12vw; top: 21vh; width: 310px; height: 250px; border: 5px solid #7CEBFF; background: rgba(124,235,255,.08); }
.brow { position: absolute; width: 90px; height: 8px; background: #FF2E4D; top: 62px; }.brow.left { left: 48px; transform: rotate(18deg); }.brow.right { right: 48px; transform: rotate(-18deg); }
.eye { position: relative; display: inline-block; width: 48px; height: 48px; border: 4px solid #F4EFE7; margin: 100px 27px 0 57px; }
.mouth { position: absolute; left: 90px; bottom: 46px; width: 130px; height: 28px; border-bottom: 7px solid #FF2E4D; transform: rotate(-3deg); }
.ruler-snap { position: absolute; left: 7vw; bottom: 14vh; height: 72px; width: 70vw; border-top: 4px solid #FFE66D; display: flex; justify-content: space-between; transform: translateX(calc((1 - var(--heat)) * -70px)); transition: transform .2s steps(4); }
.ruler-snap::before { content: "revision numbers / 00 14 28 42 56 70"; position: absolute; left: 0; top: -28px; font-family: var(--mono); font-size: 10px; color: #7CEBFF; letter-spacing: .12em; }
.ruler-snap span { width: 3px; height: 48px; background: #FFE66D; }
.coord { position: absolute; left: 8vw; bottom: 8vh; color: #7CEBFF; }
.tantrum-burst { position: absolute; right: 8vw; bottom: 13vh; font-family: var(--display); font-size: 70px; color: #FFE66D; transform: rotate(9deg); }
.alignment-guide { position: absolute; background: #7CEBFF; opacity: .45; }.guide-h { height: 2px; left: 0; right: 0; top: 50%; }.guide-v { width: 2px; top: 0; bottom: 0; left: 56%; }

.secret-moodboard { background: linear-gradient(#F4EFE7 0 55%, #4B2A68 55%); color: #101014; }
.secret-moodboard h2 { font-size: clamp(64px, 12vw, 170px); max-width: 650px; }
.desk-shadow { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: radial-gradient(ellipse at center, rgba(16,16,20,.6), transparent 64%); }
.swatch-tray { position: absolute; right: 9vw; top: 15vh; display: flex; gap: 16px; padding: 18px; background: #101014; transform: rotate(4deg); }
.swatch { width: 62px; height: 90px; border: 4px solid #F4EFE7; transition: .2s; }.swatch:hover, .swatch.selected { transform: translateY(-18px) rotate(-5deg); }
.red { background: #FF2E4D; }.cyan { background: #7CEBFF; }.pink { background: #FF8FB3; }.butter { background: #FFE66D; }
.paper-flower { position: absolute; left: 18vw; bottom: 12vh; width: 180px; height: 180px; animation: reluctantSpin 10s linear infinite; }
@keyframes reluctantSpin { 0%, 20% { rotate: 0deg; } 45%, 100% { rotate: 35deg; } }
.paper-flower i { position: absolute; inset: 40px; background: #F4EFE7; border: 3px solid #FF2E4D; transform-origin: bottom center; }.paper-flower i:nth-child(2){ rotate: 45deg; }.paper-flower i:nth-child(3){ rotate: 90deg; }.paper-flower i:nth-child(4){ rotate: 135deg; }.paper-flower b { position: absolute; inset: 70px; border-radius: 50%; background: #FFE66D; }
.sticky { position: absolute; right: 19vw; bottom: 20vh; background: #FFE66D; padding: 26px; font-family: var(--mono); transform: rotate(-8deg); box-shadow: 12px 12px 0 #FF2E4D; }.sticky em { font-family: var(--warm-serif); text-transform: none; }
.tape { position: absolute; height: 36px; width: 42vw; background: repeating-linear-gradient(90deg, rgba(244,239,231,.85), rgba(244,239,231,.85) 18px, rgba(255,230,109,.9) 18px, rgba(255,230,109,.9) 36px); opacity: .9; }.diagonal-a { left: -8vw; top: 52vh; transform: rotate(-12deg); }.diagonal-b { right: -8vw; bottom: 22vh; transform: rotate(16deg); }

.almost-confession { background: #4B2A68; color: #F4EFE7; }
.almost-confession h2 { position: absolute; left: 8vw; top: 14vh; font-size: clamp(76px, 14vw, 210px); color: #FF8FB3; }
.almost-confession blockquote { position: absolute; right: 10vw; bottom: 17vh; max-width: 520px; margin: 0; font-family: var(--warm-serif); font-size: clamp(30px, 5vw, 76px); font-style: italic; }
.acetate-sheet { position: absolute; width: 38vw; height: 48vh; border: 3px solid #7CEBFF; background: rgba(124,235,255,.2); backdrop-filter: blur(2px); box-shadow: 18px 18px 0 rgba(16,16,20,.24); font-family: var(--mono); padding: 24px; }
.sheet-a { right: 13vw; top: 11vh; transform: rotate(-6deg) translate(var(--drag-x, 0), var(--drag-y, 0)); }.sheet-b { right: 22vw; top: 22vh; transform: rotate(5deg); background: rgba(255,143,179,.18); }
.heart-sticker { position: absolute; left: 48vw; bottom: 25vh; width: 78px; height: 78px; border-radius: 50%; background: #FFE66D; color: #FF2E4D; display: grid; place-items: center; font-size: 58px; transform: rotate(-14deg); }
.tear-edge { position: absolute; left: 0; right: 0; bottom: 0; height: 60px; background: linear-gradient(135deg, #F4EFE7 25%, transparent 25%) 0 0/42px 60px; }

.final-revision { background: radial-gradient(circle at 50% 30%, #FF8FB3, #F4EFE7 42%, #FFE66D 100%); display: grid; place-items: center; color: #101014; }
.final-frame { position: relative; width: min(76vw, 960px); min-height: 62vh; border: 8px solid #101014; display: grid; place-items: center; text-align: center; background: rgba(244,239,231,.72); box-shadow: 22px 22px 0 #FF8FB3, -22px -22px 0 #7CEBFF; padding: 40px; }
.final-frame h2 { font-size: clamp(66px, 12vw, 170px); }
.final-line { font-family: var(--warm-serif); font-style: italic; font-size: clamp(22px, 3vw, 42px); }
.final-crop { position: absolute; width: 46px; height: 46px; border-color: #FF2E4D; }.top-left { left: -28px; top: -28px; border-left: 5px solid; border-top: 5px solid; }.top-right { right: -28px; top: -28px; border-right: 5px solid; border-top: 5px solid; }.bottom-left { left: -28px; bottom: -28px; border-left: 5px solid; border-bottom: 5px solid; }.bottom-right { right: -28px; bottom: -28px; border-right: 5px solid; border-bottom: 5px solid; }
.ribbon { position: absolute; width: 12vw; height: 6px; background: #FF2E4D; }.ribbon-a { left: 12vw; top: 24vh; transform: rotate(42deg); }.ribbon-b { right: 13vw; bottom: 21vh; transform: rotate(-28deg); }
.quiet-pattern { position: absolute; inset: auto 0 4vh; text-align: center; color: rgba(16,16,20,.2); font-family: var(--mono); letter-spacing: .5em; }

@media (max-width: 760px) {
  .critique-panel { padding: 22px; }
  .domain-mark { writing-mode: horizontal-tb; left: 22px; right: auto; }
  .margin-attack { grid-template-columns: 56px 1fr; }
  .argument-stack, .wireframe-face, .swatch-tray { right: 22px; }
  .acetate-sheet { width: 72vw; height: 36vh; }
}