:root {
  --paper: #FFF8E7;
  --pink: #FF7AAE;
  --graphite: #29232E;
  --blue: #5AA7FF;
  --vermilion: #E83B2F;
  --yuzu: #FFE24A;
  --mint: #79E6C8;
  --gothic: "Dela Gothic One", Impact, "Arial Black", sans-serif;
  --sansjp: "Noto Sans JP", Inter, system-ui, sans-serif;
  --mincho: "Shippori Mincho", Georgia, serif;
  --hand: "Zen Kurenaido", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--sansjp);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .42;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(41,35,46,.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 78% 62%, rgba(232,59,47,.12) 0 1px, transparent 1.5px),
    linear-gradient(rgba(90,167,255,.13) 1px, transparent 1px);
  background-size: 19px 19px, 31px 31px, 100% 34px;
  mix-blend-mode: multiply;
}

.tabs {
  position: fixed;
  right: 0;
  top: 11vh;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}
.tab {
  color: var(--graphite);
  text-decoration: none;
  font: 800 12px/1 var(--sansjp);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 3px solid var(--graphite);
  border-right: 0;
  padding: 14px 12px 14px 18px;
  background: var(--blue);
  box-shadow: -5px 5px 0 var(--graphite);
  transform-origin: right center;
  transition: transform .28s cubic-bezier(.2,1.6,.3,1), background .2s;
}
.tab:hover { transform: translateX(-14px) rotate(0deg) !important; background: var(--yuzu); }
.tab-one { transform: rotate(-3deg); background: var(--pink); }
.tab-two { transform: rotate(2deg); background: var(--blue); }
.tab-three { transform: rotate(-1deg); background: var(--yuzu); }
.tab-four { transform: rotate(4deg); background: var(--vermilion); color: var(--paper); }
.tab-five { transform: rotate(-2deg); background: var(--mint); }

.theatre { position: relative; z-index: 2; }
.act {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  border-bottom: 4px dashed rgba(41,35,46,.3);
  isolation: isolate;
}
.act::before {
  content: attr(data-act);
  position: absolute;
  left: 18px;
  top: 18px;
  font: 900 13px/1 var(--sansjp);
  letter-spacing: .22em;
  color: var(--paper);
  background: var(--graphite);
  padding: 9px 12px;
  transform: rotate(-2deg);
  z-index: 4;
}

.giant {
  position: absolute;
  font-family: var(--gothic);
  font-weight: 900;
  line-height: .75;
  letter-spacing: -.09em;
  color: var(--graphite);
  text-shadow: 10px 10px 0 var(--pink), -8px -6px 0 var(--yuzu);
  user-select: none;
  will-change: transform;
}
.giant-demo { font-size: clamp(9rem, 30vw, 29rem); left: -8vw; top: 19vh; transform: rotate(-6deg); animation: tremble 1.7s steps(2,end) infinite; }
.giant-because { font-size: clamp(6rem, 18vw, 20rem); left: -32vw; top: 28vh; color: var(--blue); text-shadow: 9px 9px 0 var(--graphite), -8px -8px 0 var(--paper); transform: rotate(5deg); }
.giant-etto { font-size: clamp(8rem, 25vw, 26rem); right: -8vw; top: 8vh; color: var(--pink); text-shadow: 11px 11px 0 var(--graphite), -10px -5px 0 var(--mint); transform: rotate(10deg); }
.giant-datte { font-size: clamp(8rem, 28vw, 28rem); left: -7vw; bottom: 5vh; color: var(--vermilion); text-shadow: 10px 10px 0 var(--graphite), -10px -7px 0 var(--blue); transform: rotate(-9deg); }
.giant-but { font-size: clamp(11rem, 34vw, 33rem); right: -12vw; top: 19vh; color: rgba(121,230,200,.72); text-shadow: 9px 9px 0 var(--graphite); transform: rotate(7deg); }

@keyframes tremble { 0%,100% { translate: 0 0; } 35% { translate: -3px 2px; } 60% { translate: 4px -1px; } }

.stage-copy, .folded-slip, .desk-strip, .runaway, .chorus-collapse, .honest-panel, .blue-arrow {
  position: absolute;
  z-index: 5;
  border: 3px solid var(--graphite);
  box-shadow: 8px 8px 0 var(--graphite);
}
.copy-a { left: 11vw; top: 16vh; max-width: 370px; font: 700 clamp(2rem,4vw,4rem)/.96 var(--mincho); background: var(--paper); padding: 22px; transform: rotate(-4deg); }
.copy-b { right: 16vw; top: 20vh; background: var(--pink); padding: 18px 24px; font: 900 24px var(--sansjp); border-radius: 28px 28px 28px 4px; transform: rotate(8deg); }
.copy-c { left: 48vw; bottom: 15vh; background: var(--paper); color: var(--vermilion); padding: 14px 18px; font: 700 18px var(--hand); text-decoration: line-through wavy var(--vermilion) 3px; transform: rotate(3deg); }
.torn { clip-path: polygon(0 5%, 7% 0, 19% 4%, 31% 0, 43% 5%, 55% 0, 70% 4%, 86% 0, 100% 6%, 97% 100%, 82% 96%, 65% 100%, 46% 96%, 27% 100%, 10% 95%, 0 100%); }
.sticker::after { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(41,35,46,.55); border-radius: inherit; }

.comma-curtain { position: absolute; inset: -10vh -5vw auto; height: 38vh; color: var(--vermilion); font: 900 13vw/.42 var(--gothic); letter-spacing: -.05em; opacity: .92; transform: rotate(-4deg); }
.punctuation { position: absolute; right: 9vw; bottom: 9vh; font: 900 48px var(--hand); color: var(--blue); animation: scurry 5s ease-in-out infinite; }
@keyframes scurry { 0%,100% { transform: translate(0,0) rotate(-7deg); } 35% { transform: translate(-55px,-28px) rotate(9deg); } 70% { transform: translate(26px,-72px) rotate(-15deg); } }

.stamp { position: absolute; z-index: 9; border: 5px solid var(--vermilion); color: var(--vermilion); background: transparent; font: 900 44px/1 var(--gothic); padding: 10px 16px; transform: rotate(-14deg); box-shadow: none; cursor: pointer; mix-blend-mode: multiply; }
.stamp-but { right: 22vw; bottom: 28vh; }
.datte-stamp { left: 42vw; top: 24vh; border-radius: 50%; animation: stampLand 2.2s cubic-bezier(.2,1.6,.3,1) infinite; }
@keyframes stampLand { 0%,40%,100% { transform: scale(1) rotate(9deg); opacity: .72; } 48% { transform: scale(1.45) rotate(-4deg); opacity: 1; } 56% { transform: scale(.92) rotate(12deg); } }

.tape-stage { position: fixed; left: 0; top: 24vh; width: 100vw; height: 52vh; z-index: 11; pointer-events: none; overflow: visible; }
.tape-path { fill: none; stroke: var(--yuzu); stroke-width: 25; stroke-linecap: square; stroke-dasharray: 28 18; filter: drop-shadow(5px 5px 0 rgba(41,35,46,.48)); stroke-dashoffset: var(--tape-offset, 900); transition: stroke-dashoffset .1s linear; }
.tape-shadow { fill: none; stroke: rgba(255,248,231,.72); stroke-width: 11; stroke-dasharray: 34 22; stroke-dashoffset: calc(var(--tape-offset, 900) * -0.7); }

.notebook-lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0 32px, rgba(90,167,255,.27) 33px 35px), linear-gradient(90deg, transparent 0 9vw, rgba(232,59,47,.35) 9.1vw 9.3vw, transparent 9.4vw); }
.desk-strip { left: 8vw; top: 18vh; width: 54vw; background: var(--yuzu); padding: 16px 280px 16px 24px; font: 900 19px var(--sansjp); transform: rotate(-2deg); }
.folded-slip { background: var(--paper); padding: 24px; font: 700 29px/1.1 var(--mincho); }
.slip-one { right: 10vw; top: 42vh; width: 280px; transform: rotate(7deg); background: var(--mint); }
.slip-two { left: 18vw; bottom: 11vh; width: 340px; transform: rotate(-8deg); background: var(--pink); }
.paperclip { position: absolute; right: 8vw; top: 15vh; font: 900 9rem var(--hand); color: var(--blue); transform: rotate(25deg); text-shadow: 5px 5px 0 var(--graphite); }

.corridor { position: absolute; left: 5vw; bottom: 12vh; z-index: 5; display: flex; gap: 18px; transform: perspective(700px) rotateY(-18deg) rotate(-2deg); }
.corridor p { width: 190px; min-height: 270px; margin: 0; padding: 20px; border: 3px solid var(--graphite); background: var(--paper); box-shadow: 8px 8px 0 var(--blue); font: 900 24px/1.05 var(--sansjp); transition: transform .4s cubic-bezier(.2,1.6,.3,1); }
.corridor.collapsed p { transform: translateX(calc(var(--i, 0) * -145px)) rotate(calc(var(--i, 0) * 3deg)); }
.corridor p:nth-child(1) { --i: 0; } .corridor p:nth-child(2) { --i: 1; } .corridor p:nth-child(3) { --i: 2; } .corridor p:nth-child(4) { --i: 3; } .corridor p:nth-child(5) { --i: 4; }
.runaway { left: 39vw; top: 38vh; background: var(--vermilion); color: var(--paper); padding: 16px 20px; max-width: 260px; font: 900 22px/1 var(--hand); transition: transform .18s ease-out; }
.blue-arrow { right: 12vw; bottom: 12vh; background: var(--blue); padding: 12px 18px; font: 900 24px var(--hand); transform: rotate(9deg); }
.eraser-crumbs i { position: absolute; width: 11px; height: 8px; background: var(--graphite); border-radius: 50%; opacity: .8; }
.eraser-crumbs i:nth-child(1) { left: 22vw; top: 24vh; } .eraser-crumbs i:nth-child(2) { left: 25vw; top: 28vh; } .eraser-crumbs i:nth-child(3) { left: 62vw; top: 18vh; } .eraser-crumbs i:nth-child(4) { left: 74vw; top: 55vh; } .eraser-crumbs i:nth-child(5) { left: 44vw; top: 76vh; }

.chorus-grid { position: absolute; inset: 15vh 7vw auto; z-index: 5; display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 18px; }
.chorus-grid span { min-height: 120px; padding: 18px; background: var(--paper); border: 3px solid var(--graphite); box-shadow: 7px 7px 0 var(--pink); font: 900 clamp(1.4rem,3vw,3rem)/.92 var(--gothic); transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.2,1.6,.3,1), opacity .3s; }
.chorus-grid span:nth-child(1) { --r: -5deg; } .chorus-grid span:nth-child(2) { --r: 3deg; } .chorus-grid span:nth-child(3) { --r: 6deg; } .chorus-grid span:nth-child(4) { --r: -2deg; } .chorus-grid span:nth-child(5) { --r: 8deg; } .chorus-grid span:nth-child(6) { --r: -8deg; }
.chorus-grid.collapsed span { transform: translateY(46vh) scale(.18) rotate(0deg); opacity: .18; }
.chorus-collapse { left: 24vw; bottom: 16vh; width: 52vw; background: var(--mint); padding: 24px 30px; font: 700 clamp(2rem,4vw,4rem)/1 var(--mincho); transform: rotate(-2deg) scale(.96); opacity: .72; transition: transform .5s, opacity .5s; }
.chorus-collapse.awake { transform: rotate(-2deg) scale(1.06); opacity: 1; }
.stamp-halo { position: absolute; right: 8vw; top: 34vh; width: 220px; height: 220px; display: grid; place-items: center; border: 8px double var(--vermilion); border-radius: 50%; color: var(--vermilion); font: 900 64px var(--gothic); transform: rotate(16deg); opacity: .65; }

.small-honest-window { background: radial-gradient(circle at 45% 44%, var(--mint), var(--paper) 38%, #fff4d6 70%); }
.honest-panel { left: 10vw; top: 19vh; width: min(560px, 75vw); min-height: 390px; background: var(--paper); padding: 54px 42px 36px; transform: rotate(-1deg); clip-path: inset(48% 48% 48% 48% round 8px); transition: clip-path .9s cubic-bezier(.2,1.1,.2,1), transform .8s cubic-bezier(.2,1.4,.2,1); }
.honest-panel.open { clip-path: inset(0 0 0 0 round 8px); transform: rotate(-1deg) translateY(-8px); }
.honest-panel h1 { margin: 0 0 18px; font: 700 clamp(2.2rem,5vw,5rem)/.92 var(--mincho); }
.honest-panel p { font: 500 19px/1.55 var(--sansjp); }
.quiet-jp { color: var(--vermilion); font-family: var(--hand) !important; }
.window-latch { position: absolute; right: 22px; top: 22px; width: 54px; height: 18px; background: var(--yuzu); border: 3px solid var(--graphite); transform: rotate(12deg); }
.open-window { position: absolute; left: 18vw; bottom: 14vh; z-index: 8; background: var(--mint); border: 4px solid var(--graphite); box-shadow: 8px 8px 0 var(--graphite); padding: 18px 24px; font: 900 18px var(--sansjp); cursor: pointer; transform: rotate(3deg); }

.mascot { position: absolute; z-index: 8; width: 76px; height: 60px; border: 4px solid var(--graphite); border-radius: 50% 50% 45% 45%; background: var(--paper); box-shadow: 7px 7px 0 var(--graphite); }
.mascot::before, .mascot::after { content: ""; position: absolute; top: -19px; width: 18px; height: 28px; border: 4px solid var(--graphite); border-radius: 50%; background: var(--blue); }
.mascot::before { left: 11px; } .mascot::after { right: 11px; }
.mascot span::before { content: ","; position: absolute; left: 20px; top: 1px; color: var(--vermilion); font: 900 55px var(--gothic); transform: rotate(20deg); }
.mascot span::after { content: "…"; position: absolute; right: 9px; bottom: 7px; font: 900 20px var(--hand); }
.mascot-peek { left: 4vw; bottom: 10vh; transform: rotate(-10deg); }
.mascot-push { right: 27vw; bottom: 18vh; transform: rotate(8deg); }
.mascot-hide { left: 15vw; top: 38vh; transform: rotate(-18deg); }
.mascot-final { left: 49vw; top: 55vh; transform: rotate(8deg); animation: bob 3s ease-in-out infinite; }
@keyframes bob { 50% { translate: 0 -16px; } }

.cursor-bubble { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; padding: 10px 14px; border: 3px solid var(--graphite); background: var(--pink); border-radius: 24px 24px 24px 3px; font: 900 14px var(--hand); box-shadow: 4px 4px 0 var(--graphite); transform: translate(-100px,-100px); }

@media (max-width: 760px) {
  .tabs { top: auto; bottom: 0; left: 0; right: auto; flex-direction: row; width: 100%; overflow: auto; align-items: flex-end; }
  .tab { border: 3px solid var(--graphite); font-size: 10px; padding: 11px; white-space: nowrap; }
  .copy-a { left: 7vw; top: 18vh; }
  .desk-strip { width: 83vw; padding-right: 18px; }
  .chorus-grid { grid-template-columns: 1fr 1fr; inset: 12vh 5vw auto; }
  .chorus-collapse { left: 7vw; width: 82vw; }
  .corridor { left: 4vw; transform: none; overflow: visible; }
  .corridor p { width: 150px; min-height: 220px; font-size: 19px; }
}