:root {
  /* Typography compliance notes: IBM Plex Mono counts frames like a nervous production assistant. IBM Plex Mono for the mechanical frame-count system that tries—and fails—to keep everything tidy. IBM Plex Mono in small doses for timing codes. Interactions should feel characterful: hover states can snap “don’t touch” before softening into “...okay”. Space Grotesk stays controlled. Space Grotesk when the studio pretends to be professional. Space Grotesk wordmark. Space Grotesk** for studio identity. Groteskk Grotes Grotesk* */
  --ice-ink: #101827;
  --frost-blue: #8FD8FF;
  --blush-impact: #FF4F79;
  --cream-paper: #FFF0D6;
  --warning-red: #E60033;
  --violet-shadow: #6A3DFF;
  --graphite: #232323;
  --display: Impact, Haettenschweiler, "Arial Black", fantasy;
  --space: "Space Grotesk", "Arial Narrow", Arial, sans-serif;
  --jp: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ice-ink); }
body {
  margin: 0;
  color: var(--cream-paper);
  background: var(--ice-ink);
  font-family: var(--space);
  overflow-x: hidden;
  cursor: crosshair;
}

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .13;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 10% 20%, var(--frost-blue) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 80%, var(--blush-impact) 0 1px, transparent 1px),
    linear-gradient(115deg, transparent 0 47%, rgba(255,240,214,.18) 48% 49%, transparent 50%);
  background-size: 17px 17px, 23px 23px, 90px 90px;
}

.cursor-pencil {
  position: fixed;
  left: 0;
  top: 0;
  width: 42px;
  height: 10px;
  z-index: 40;
  pointer-events: none;
  transform: translate3d(-80px, -80px, 0) rotate(-18deg);
}
.cursor-pencil span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cream-paper) 0 10%, var(--warning-red) 10% 24%, var(--frost-blue) 24% 78%, var(--graphite) 78% 100%);
  border: 2px solid var(--graphite);
  clip-path: polygon(0 50%, 14% 0, 100% 0, 100% 100%, 14% 100%);
}

.frame-counter {
  position: fixed;
  left: 18px;
  bottom: 16px;
  z-index: 25;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--frost-blue);
  background: rgba(16,24,39,.78);
  border: 1px solid var(--frost-blue);
  padding: 8px 10px;
  box-shadow: 4px 4px 0 var(--violet-shadow);
}

.studio-tabs {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 25;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  transform: rotate(-1.5deg);
}
.studio-tabs a {
  position: relative;
  display: block;
  padding: 10px 12px;
  color: var(--ice-ink);
  background: var(--frost-blue);
  border: 2px solid var(--ice-ink);
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 4px 4px 0 var(--graphite);
  transition: transform .16s steps(2), background .16s, color .16s;
}
.studio-tabs a::after {
  content: "don't touch";
  position: absolute;
  left: 4px;
  top: 100%;
  min-width: 90px;
  color: var(--cream-paper);
  background: var(--warning-red);
  opacity: 0;
  transform: translateY(-4px);
  padding: 4px 6px;
}
.studio-tabs a:hover { background: var(--blush-impact); transform: translate(-3px, 3px) rotate(2deg); }
.studio-tabs a:hover::after { content: attr(data-soft); opacity: 1; }

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(78px, 8vw, 128px) clamp(20px, 6vw, 86px);
}
.scene::before {
  content: attr(data-scene);
  position: absolute;
  right: 4vw;
  bottom: 4vw;
  font-family: var(--mono);
  font-size: clamp(74px, 16vw, 210px);
  color: transparent;
  -webkit-text-stroke: 1px rgba(143,216,255,.28);
  z-index: -1;
}

.cold-open {
  background:
    linear-gradient(90deg, rgba(143,216,255,.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(143,216,255,.08) 1px, transparent 1px),
    radial-gradient(circle at 78% 70%, rgba(255,79,121,.18), transparent 24%),
    var(--ice-ink);
  background-size: 46px 46px, 46px 46px, auto, auto;
}
.cel {
  position: absolute;
  border: 2px solid rgba(143,216,255,.75);
  background: rgba(143,216,255,.12);
  box-shadow: inset 0 0 38px rgba(143,216,255,.13), 12px 12px 0 rgba(106,61,255,.22);
  backdrop-filter: blur(1px);
}
.cel::before, .cel::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid var(--frost-blue);
  border-radius: 50%;
  top: 14px;
}
.cel::before { left: 16px; }
.cel::after { right: 16px; }
.cel-a { inset: 12% 42% 18% 7%; transform: rotate(-4deg); clip-path: polygon(0 0, 100% 8%, 92% 100%, 5% 88%); }
.cel-b { inset: 25% 8% 12% 45%; transform: rotate(5deg); clip-path: polygon(6% 0, 96% 10%, 100% 88%, 0 100%); }

.hero-title { position: relative; max-width: 980px; margin-top: 8vh; z-index: 2; }
.kicker, .mono { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--frost-blue); }
.hero-title h1 {
  margin: 0;
  font-family: var(--space);
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: .75;
  font-size: clamp(72px, 17vw, 250px);
  text-shadow: -7px 0 0 var(--violet-shadow), 7px 0 0 rgba(255,79,121,.55);
}
.hero-title h1 em { display: block; color: var(--frost-blue); font-style: normal; transform: translateX(11vw); }
.controlled { max-width: 520px; font-family: var(--jp); font-size: clamp(18px, 2.2vw, 28px); color: var(--cream-paper); }
.speech {
  position: absolute;
  right: 10vw;
  top: 22vh;
  max-width: 280px;
  padding: 22px;
  color: var(--ice-ink);
  background: var(--cream-paper);
  border: 3px solid var(--ice-ink);
  font-family: var(--jp);
  font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 94% 73%, 65% 72%, 54% 100%, 45% 72%, 0 78%);
  transform: rotate(6deg);
}
.stamp-button {
  position: relative;
  z-index: 5;
  border: 4px solid var(--warning-red);
  color: var(--warning-red);
  background: transparent;
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: .06em;
  padding: 14px 22px;
  text-transform: uppercase;
  transform: rotate(-6deg);
  box-shadow: 5px 5px 0 var(--blush-impact);
  cursor: pointer;
}
.stamp-button:hover, .stamp-button.stamped { background: var(--warning-red); color: var(--cream-paper); animation: stamp .22s steps(2) both; }
.crack-lines i {
  position: absolute;
  left: 42%; top: 42%;
  width: 4px; height: 0;
  background: var(--blush-impact);
  transform-origin: top;
  opacity: 0;
}
.crack-lines i:nth-child(1){ transform: rotate(28deg); }
.crack-lines i:nth-child(2){ transform: rotate(-48deg); }
.crack-lines i:nth-child(3){ transform: rotate(105deg); }
.crack-lines i:nth-child(4){ transform: rotate(-115deg); }
.burst-word {
  position: absolute;
  right: 13vw;
  bottom: 12vh;
  font-family: var(--display);
  font-size: clamp(70px, 14vw, 190px);
  color: var(--blush-impact);
  text-shadow: 6px 6px 0 var(--ice-ink), 12px 12px 0 var(--violet-shadow);
  opacity: 0;
  transform: scale(.4) rotate(18deg);
}
body.cracked .crack-lines i { opacity: 1; height: 33vh; animation: drawCrack .45s steps(5) both; }
body.cracked .burst-word { opacity: 1; transform: scale(1) rotate(-9deg); transition: .24s steps(3); }

.registration { position: absolute; width: 62px; height: 62px; border: 2px solid var(--frost-blue); }
.registration::before, .registration::after { content:""; position:absolute; background:var(--frost-blue); }
.registration::before { left: 50%; top: -14px; bottom: -14px; width: 2px; }
.registration::after { top: 50%; left: -14px; right: -14px; height: 2px; }
.top-left { left: 26px; top: 72px; animation: jitter 1.6s steps(2) infinite; }
.bottom-right { right: 30px; bottom: 90px; animation: jitter 1.2s steps(2) infinite reverse; }
.timing-chart { position:absolute; left:6vw; bottom:11vh; display:grid; grid-template-columns:repeat(6, 36px); border:1px solid var(--frost-blue); font-family:var(--mono); color:var(--frost-blue); }
.timing-chart span { padding:16px 6px; border-right:1px solid var(--frost-blue); }

.model-sheet { background: var(--cream-paper); color: var(--ice-ink); }
.diagonal-paper { position:absolute; inset:-10%; background: linear-gradient(125deg, var(--frost-blue) 0 38%, transparent 38.2% 58%, var(--warning-red) 58.2% 62%, transparent 62.2%); opacity:.55; }
.scene-label { position:relative; font-family:var(--display); font-size:clamp(50px, 9vw, 126px); color:var(--ice-ink); transform:rotate(-3deg); z-index:2; }
.scene-label span { display:block; font-family:var(--mono); font-size:14px; color:var(--warning-red); }
.split-expression { position:absolute; left:8vw; bottom:7vh; width:min(54vw, 620px); height:min(55vw, 620px); border:5px solid var(--graphite); border-radius:48% 52% 42% 58%; overflow:hidden; background:var(--cream-paper); box-shadow:16px 16px 0 var(--violet-shadow); }
.face { position:absolute; inset:0; }
.cold-face { right:50%; clip-path:polygon(0 0, 50% 0, 50% 100%, 0 100%); background: repeating-linear-gradient(0deg, rgba(143,216,255,.35) 0 2px, transparent 2px 30px), var(--ice-ink); }
.warm-face { left:50%; clip-path:polygon(50% 0, 100% 0, 100% 100%, 50% 100%); background: radial-gradient(circle at 66% 53%, var(--blush-impact) 0 8%, transparent 8.5%), var(--cream-paper); }
.eye { position:absolute; top:36%; left:28%; width:70px; height:20px; border:5px solid currentColor; border-top:0; transform:rotate(-8deg); }
.warm-face .eye { left:62%; transform:rotate(12deg); color:var(--graphite); }
.mouth { position:absolute; left:34%; top:58%; width:78px; height:6px; background:var(--frost-blue); }
.blush { position:absolute; left:60%; top:48%; width:116px; height:46px; background:repeating-linear-gradient(90deg, var(--blush-impact) 0 12px, transparent 12px 22px); transform:rotate(-14deg); opacity:.85; }
.smear { position:absolute; inset:18% 4% 8% 50%; background:radial-gradient(circle, rgba(255,79,121,.24) 0 25%, transparent 26%); background-size:28px 28px; animation:jitter 1s steps(2) infinite; }
.blueprint-lines { position:absolute; inset:0; background:linear-gradient(90deg, transparent 49%, var(--frost-blue) 50%, transparent 51%); }
.notes-panel { position:relative; margin-left:auto; margin-top:8vh; max-width:520px; background:rgba(255,240,214,.86); border:3px solid var(--ice-ink); padding:24px; transform:rotate(2deg); box-shadow:-10px 10px 0 var(--frost-blue); z-index:3; }
.notes-panel h2, .blush-copy h2, .final-slate h2 { font-size:clamp(42px, 7vw, 92px); line-height:.9; margin:.1em 0; letter-spacing:-.05em; }
.pencil-path { position:absolute; right:4vw; bottom:7vh; width:45vw; }
.pencil-path path { fill:none; stroke:var(--graphite); stroke-width:8; stroke-linecap:round; stroke-dasharray:760; stroke-dashoffset:760; animation:pathDraw 2.8s ease-in-out infinite alternate; }

.dialogue-fight { background:linear-gradient(145deg, var(--ice-ink) 0 48%, var(--cream-paper) 48.2% 100%); }
.speed-lines { position:absolute; inset:0; background:conic-gradient(from 80deg at 20% 45%, transparent 0 8deg, rgba(143,216,255,.42) 8deg 9deg, transparent 9deg 18deg); animation:pulseLines .6s steps(2) infinite; }
.fight-grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:5vw; min-height:70vh; align-items:center; z-index:2; }
.balloon { min-height:260px; padding:34px; border:5px solid var(--graphite); color:var(--ice-ink); font-family:var(--jp); font-size:clamp(18px, 2vw, 25px); }
.balloon strong { display:block; font-family:var(--display); font-size:clamp(86px, 12vw, 170px); line-height:.75; }
.balloon.sharp { background:var(--frost-blue); clip-path:polygon(0 0, 95% 8%, 100% 76%, 70% 75%, 61% 100%, 50% 76%, 4% 86%); transform:rotate(-5deg); }
.balloon.soft { background:var(--cream-paper); clip-path:polygon(6% 4%, 100% 0, 96% 88%, 55% 79%, 35% 100%, 31% 77%, 0 84%); transform:rotate(5deg); }
.correction-tape { grid-column:1 / -1; justify-self:center; font-family:var(--display); color:var(--cream-paper); background:var(--warning-red); font-size:clamp(34px, 6vw, 88px); padding:8px 26px; transform:rotate(-2deg); box-shadow:8px 8px 0 var(--violet-shadow); }
.caption-strip { grid-column:1 / -1; font-family:var(--mono); color:var(--frost-blue); background:var(--ice-ink); border:1px solid var(--frost-blue); padding:12px; }
.pixel-punct { position:absolute; right:8vw; top:16vh; display:flex; gap:12px; }
.pixel-punct b { width:22px; height:22px; background:var(--blush-impact); clip-path:polygon(25% 0, 50% 20%, 75% 0, 100% 30%, 50% 100%, 0 30%); image-rendering:pixelated; animation:jitter .8s steps(2) infinite; }
.anger-mark { position:absolute; left:9vw; top:18vh; font-family:var(--display); font-size:120px; color:var(--warning-red); transform:rotate(15deg); }

.blush-layer { background:var(--ice-ink); }
.halftone-leak { position:absolute; inset:0; background:radial-gradient(circle, rgba(255,79,121,.9) 0 3px, transparent 3.5px); background-size:24px 24px; mask-image:radial-gradient(circle at var(--mx, 72%) var(--my, 52%), #000 0 25%, transparent 50%); opacity:.72; }
.acetate-stack { position:relative; width:min(720px, 88vw); height:62vh; margin-top:8vh; }
.acetate { position:absolute; inset:0; border:3px solid var(--frost-blue); background:rgba(143,216,255,.13); box-shadow:18px 18px 0 rgba(106,61,255,.25); }
.acetate span { font-family:var(--mono); color:var(--frost-blue); background:var(--ice-ink); padding:8px; }
.acetate.one { transform:rotate(-7deg); clip-path:polygon(0 4%, 100% 0, 92% 100%, 3% 91%); }
.acetate.two { transform:translate(58px, 28px) rotate(3deg); border-color:var(--blush-impact); background:rgba(255,79,121,.12); }
.acetate.three { transform:translate(112px, 62px) rotate(-1deg); }
.blush-copy { position:absolute; right:6vw; top:18vh; max-width:540px; color:var(--cream-paper); z-index:4; }
.secondary { position:absolute; right:18vw; bottom:14vh; }
.secondary::after { content:" ...okay"; color:var(--frost-blue); }

.final-retake { background:linear-gradient(100deg, var(--cream-paper) 0 52%, var(--ice-ink) 52.2%); color:var(--ice-ink); }
.final-slate { position:relative; max-width:920px; padding:34px; border:6px solid var(--graphite); background:var(--cream-paper); box-shadow:16px 16px 0 var(--warning-red); transform:rotate(-2deg); }
.final-slate p { font-family:var(--mono); color:var(--warning-red); letter-spacing:.1em; }
.redacted { display:flex; flex-wrap:wrap; gap:10px; font-family:var(--display); font-size:32px; }
.redacted span { color:var(--cream-paper); background:var(--graphite); padding:8px 14px; transform:rotate(var(--r, -2deg)); }
.redacted span:nth-child(2) { background:var(--blush-impact); --r: 3deg; }
.redacted span:nth-child(3) { background:var(--violet-shadow); --r: -5deg; }
.credits-note { position:absolute; right:7vw; bottom:15vh; max-width:340px; color:var(--cream-paper); font-family:var(--jp); font-size:24px; }
.heart-scorch { position:absolute; right:18vw; top:20vh; width:180px; height:180px; display:grid; place-items:center; color:var(--blush-impact); font-size:120px; filter:drop-shadow(0 0 34px var(--blush-impact)); animation:heartbeat 1.4s steps(3) infinite; }
.final-tab { position:absolute; left:8vw; bottom:10vh; color:var(--ice-ink); background:var(--frost-blue); border:3px solid var(--ice-ink); padding:14px 20px; font-family:var(--mono); text-transform:uppercase; text-decoration:none; box-shadow:7px 7px 0 var(--graphite); }

@keyframes jitter { 0%,100%{ transform:translate(0,0) rotate(-1deg);} 33%{ transform:translate(3px,-2px) rotate(1deg);} 66%{ transform:translate(-2px,2px) rotate(-2deg);} }
@keyframes stamp { 0%{ transform:scale(1.25) rotate(-8deg);} 100%{ transform:scale(1) rotate(-6deg);} }
@keyframes drawCrack { from{ height:0; } to{ height:33vh; } }
@keyframes pathDraw { to { stroke-dashoffset:0; } }
@keyframes pulseLines { 50%{ opacity:.45; transform:scale(1.03); } }
@keyframes heartbeat { 50%{ transform:scale(1.14) rotate(-4deg); } }

@media (max-width: 840px) {
  .studio-tabs { left: 8px; right: 8px; overflow-x: auto; }
  .studio-tabs a { flex: 0 0 auto; }
  .hero-title h1 em { transform: translateX(0); }
  .speech { position: relative; right: auto; top: auto; margin: 20px 0 30px auto; }
  .fight-grid { grid-template-columns: 1fr; }
  .split-expression { position: relative; left: auto; bottom: auto; width: 88vw; height: 88vw; }
  .notes-panel, .blush-copy { position: relative; right: auto; top: auto; margin: 28px 0; }
  .credits-note { position: relative; right: auto; bottom: auto; color: var(--ice-ink); margin-top: 38px; }
}