/* sticker-peel showpiece: Decimals kit (sand-cream paper washed with blush, warm brown-black ink, a book serif
   set tight, a handwritten scrawl). Two peel stages share the window: a top band whose stickers only peel and snap
   back, and a low one whose buns are pads (two copies on one seat) and whose floor is 300px below the window, so a
   torn bun falls out of sight and the next one is already in its seat. Two smaller canvases also keep the WebGL
   cheap enough to film smoothly. */
:root { --paper: #ede8e1; --ink: #4d4638; --blush: #f4c9be; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 Arial, Helvetica, sans-serif; overflow: hidden; }
.clip { overflow: clip; height: 100svh; min-height: 640px; position: relative;
  background: radial-gradient(70% 45% at 50% 46%, rgba(244, 201, 190, .55), rgba(244, 201, 190, 0) 100%); }
.peel { position: absolute; left: 0; right: 0; --peel-bleed: 28px; }
.peel--top { top: 0; height: 36svh; }
.peel--low { top: 60svh; height: calc(40svh + 300px); }
.copy { position: absolute; z-index: 3; left: 50%; top: 47svh; translate: -50% -50%; display: grid; justify-items: center; gap: 22px; text-align: center; width: max-content; }
.scrawl { font: 400 34px/1 "La Belle Aurore", cursive; color: #8a6f62; rotate: -4deg; margin-bottom: -6px; }
h2 { margin: 0; font: 400 clamp(46px, 7.4vw, 78px)/1.02 "Newsreader", Georgia, serif; letter-spacing: -.035em; }
.btn { display: inline-block; padding: 14px 26px; border-radius: 999px; background: var(--ink); color: #fffdf8; text-decoration: none; font-size: 16px; }
@media (max-width: 600px) { .scrawl { font-size: 26px; } .copy { gap: 16px; } }