@font-face{font-family:Bowlby;src:url(fonts/bowlby.woff2) format("woff2");font-display:swap}
@font-face{font-family:Bagel;src:url(fonts/bagel.woff2) format("woff2");font-display:swap}
@font-face{font-family:Marker;src:url(fonts/marker.woff2) format("woff2");font-display:swap}
@font-face{font-family:Mono;src:url(fonts/mono.woff2) format("woff2");font-display:swap}
@font-face{font-family:Mono;src:url(fonts/mono-700.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#f1ead8;--paper2:#f6f1e4;--ink:#141210;
  --lime:#b8f23a;--lime2:#8fcf17;--pink:#ff4f9a;--orange:#ff6b2c;--blue:#3d8bff;
  --grow:1;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--paper);color:var(--ink);font-family:Mono,ui-monospace,monospace;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .08  0 0 0 0 .07  0 0 0 0 .06  0 0 0 .22 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.defs{position:absolute;width:0;height:0}

/* photocopy grime: toner edges + halftone corners + smudges */
.grime{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 0 0,rgba(20,18,16,.13) 0 1.4px,transparent 2px) 0 0/7px 7px,
    radial-gradient(ellipse at 88% 12%,rgba(255,79,154,.16),transparent 38%),
    radial-gradient(ellipse at 6% 92%,rgba(184,242,58,.22),transparent 40%),
    radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(20,18,16,.16) 100%);
  -webkit-mask:radial-gradient(ellipse at 50% 50%,transparent 30%,#000 75%);
          mask:radial-gradient(ellipse at 50% 50%,transparent 30%,#000 75%);
}
.grime::after{content:"";position:absolute;inset:0;
  background:linear-gradient(97deg,transparent 0 2%,rgba(20,18,16,.10) 2.3%,transparent 3.2%) ,
             linear-gradient(90deg,rgba(20,18,16,.18),transparent 3%,transparent 97%,rgba(20,18,16,.2));}
.doodles{position:fixed;inset:0;pointer-events:none;z-index:0}
.doodles svg{position:absolute;filter:url(#boil);opacity:.9}

/* app shell */
.app{position:relative;z-index:1;height:100svh;height:100dvh;width:100%;max-width:560px;margin:0 auto;overflow:visible}
.app.shake{animation:shake .38s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-3px) rotate(.4deg)}30%,50%,70%{transform:translate(-7px,3px) rotate(-.6deg)}40%,60%{transform:translate(7px,-2px)}}

.bar{position:absolute;top:0;left:0;right:0;height:58px;padding:12px 16px 0;display:flex;align-items:center;justify-content:space-between;z-index:5;transition:opacity .4s}
.bar.off{opacity:0;pointer-events:none}
.logo{font-family:Bowlby;font-size:18px;letter-spacing:.02em;padding:2px 10px;background:var(--ink);color:var(--lime);transform:rotate(-3deg);box-shadow:3px 3px 0 var(--pink)}
.bar__r{display:flex;align-items:center;gap:10px}
.streak{display:flex;align-items:center;gap:4px;font-family:Marker;font-size:18px}
.streak svg{width:22px;height:22px}
.ico-btn{width:44px;height:44px;display:grid;place-items:center;border:3px solid var(--ink);background:var(--paper2);border-radius:50%;box-shadow:2px 2px 0 var(--ink)}
.ico-btn svg{width:22px;height:22px}

/* screens */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:64px 16px calc(58px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.screen.on{opacity:1;visibility:visible;transition:opacity .35s}
#s-intro{padding-top:28px}

/* big type */
.title{font-family:Bagel;font-weight:400;font-size:min(19vw,108px);line-height:1;letter-spacing:-.01em;display:flex;justify-content:center;margin-top:4px;min-height:.9em}
.title span{display:inline-block;color:var(--ink);text-shadow:4px 3px 0 var(--lime),-2px -1px 0 rgba(255,79,154,.75);opacity:0;transform:scale(3) rotate(var(--r));filter:url(#boilSoft)}
.title span.in{animation:dropIn .55s cubic-bezier(.3,1.2,.5,1) forwards}
@keyframes dropIn{0%{opacity:1;transform:translateY(-110vh) rotate(calc(var(--r) * -4))}62%{transform:translateY(0) rotate(var(--r)) scale(1.25,.7)}80%{transform:translateY(-14px) rotate(var(--r)) scale(.92,1.1)}100%{opacity:1;transform:rotate(var(--r))}}
.title span.in.wig{animation:dropIn .55s cubic-bezier(.3,1.2,.5,1) forwards,wig 2.4s ease-in-out .6s infinite}
@keyframes wig{0%,100%{transform:rotate(var(--r))}50%{transform:rotate(calc(var(--r) * -1)) translateY(-4px)}}
.tag{font-family:Marker;font-size:24px;margin:2px 0 8px;transform:rotate(-2deg);opacity:0;transition:opacity .5s}
.tag.in{opacity:1}
.tag::after{content:"";display:block;height:6px;margin-top:-4px;background:var(--pink);opacity:.55;transform:skewX(-20deg)}

/* big button */
.big{position:relative;width:min(100%,380px);min-height:68px;padding:10px 18px;font-family:Bowlby;font-size:22px;letter-spacing:.02em;text-transform:uppercase;transform:rotate(-1.2deg);flex-shrink:0;transition:transform .12s}
.big::before{content:"";position:absolute;inset:0;background:var(--lime);border:4px solid var(--ink);box-shadow:6px 6px 0 var(--ink);filter:url(#boil)}
.big span{position:relative;display:inline-flex;align-items:center;gap:10px}
.big span svg{width:26px;height:26px}
.big:active{transform:rotate(-1.2deg) translate(4px,4px)}
.big:active::before{box-shadow:2px 2px 0 var(--ink)}
.big.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:rotate(-1.2deg) scale(1.04)}}
.big.hide{opacity:0;pointer-events:none}
#introBtn{transition:opacity .5s}
.ghost{width:56px;height:56px;display:grid;place-items:center;border:3px dashed var(--ink);border-radius:50%;flex-shrink:0;background:var(--paper2)}
.ghost svg{width:24px;height:24px}
.ghost--txt{width:auto;border-radius:0;padding:0 16px;height:56px;font-family:Marker;font-size:20px;transform:rotate(1.5deg)}

/* stages + dino */
.stage{position:relative;flex:1;width:100%;display:grid;place-items:center;min-height:0}
.dino-slot{position:relative;width:min(70vw,300px);aspect-ratio:1;transform:scale(var(--grow));transition:transform .9s cubic-bezier(.3,1.7,.5,1)}
.dino-slot svg{position:relative;z-index:1;width:100%;height:100%;overflow:visible}
.stage--intro .dino-slot{position:absolute;opacity:0;pointer-events:none;width:min(78vw,330px)}
.stage--intro.hatched .dino-slot{animation:popOut .7s cubic-bezier(.2,1.7,.4,1) forwards}
@keyframes popOut{0%{opacity:0;transform:translateY(40px) scale(.2)}100%{opacity:1;transform:none}}

.dino .bob,.dino .tail,.dino .arm,.dino .jaw{transform-box:view-box}
.dino .bob{animation:bob 2.4s ease-in-out infinite;transform-origin:150px 280px}
@keyframes bob{50%{transform:translateY(-6px) scaleY(1.02)}}
.dino .tail{animation:wag 1.8s ease-in-out infinite;transform-origin:100px 205px}
@keyframes wag{50%{transform:rotate(-9deg)}}
.dino .arm{animation:wave 1.2s ease-in-out infinite;transform-origin:186px 186px}
@keyframes wave{50%{transform:rotate(-14deg)}}
.dino .lid{transform-origin:228px 71px;transform-box:view-box;transform:scaleY(0);animation:blink 4.2s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96%{transform:scaleY(1)}}
/* faces */
.dino .f-happy,.dino .f-sad,.dino .m-open,.dino .tear,.dino .f-zz{display:none}
.dino[data-face=happy] .f-norm,.dino[data-face=happy] .lid{display:none}
.dino[data-face=happy] .f-happy{display:inline}
.dino[data-face=sad] .f-sad,.dino[data-face=sad] .tear{display:inline}
.dino[data-face=sad] .f-norm,.dino[data-face=sad] .lid{display:none}
.dino[data-mouth=open] .m-open{display:inline}
.dino[data-mouth=open] .m-shut{display:none}
.dino .tear{animation:drip 1.1s ease-in infinite}
@keyframes drip{0%{transform:translateY(0);opacity:1}100%{transform:translateY(46px);opacity:0}}
.dino.no-hat .hat{display:none}
.dino.chomp .jaw{animation:chomp .5s steps(2) 3}
@keyframes chomp{50%{transform:translateY(5px)}}
.dino.jump .bob{animation:jump .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes jump{0%{transform:none}35%{transform:translateY(-46px) rotate(-6deg)}70%{transform:translateY(0) scaleY(.88)}100%{transform:none}}
.dino.dance .bob{animation:dance .5s ease-in-out infinite}
@keyframes dance{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(5deg) translateY(-14px)}}

/* egg */
.egg{position:absolute;width:min(46vw,200px);cursor:pointer;animation:eggDrop .7s cubic-bezier(.3,1.5,.6,1) both;outline:none}
.egg__svg{width:100%;overflow:visible;transform-origin:50% 95%}
.egg.wobble .egg__svg{animation:wob .45s ease-in-out}
.egg.idle .egg__svg{animation:idleWob 2.6s ease-in-out infinite}
@keyframes idleWob{0%,80%,100%{transform:none}85%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
@keyframes wob{25%{transform:rotate(-12deg)}50%{transform:rotate(10deg)}75%{transform:rotate(-5deg)}}
@keyframes eggDrop{0%{transform:translateY(-120vh) rotate(-20deg)}100%{transform:none}}
.crack{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset .3s}
.egg[data-hits="1"] .c1,.egg[data-hits="2"] .c1,.egg[data-hits="2"] .c2{stroke-dashoffset:0}
.egg.burst .egg__top{animation:flyTop .8s cubic-bezier(.2,.7,.4,1) forwards}
.egg.burst .egg__bot{animation:flyBot .8s cubic-bezier(.2,.7,.4,1) forwards}
.egg.burst .crack{opacity:0}
@keyframes flyTop{100%{transform:translate(-160px,-260px) rotate(-120deg);opacity:0}}
@keyframes flyBot{100%{transform:translate(170px,220px) rotate(80deg);opacity:0}}
.egg.burst{pointer-events:none}
.tapme{position:absolute;right:-34px;top:-18px;font-family:Marker;font-size:22px;color:var(--pink);transform:rotate(12deg);animation:nudge 1s ease-in-out infinite;white-space:nowrap}
.tapme::before{content:"";position:absolute;left:-22px;bottom:-16px;width:24px;height:24px;border-left:3px solid var(--pink);border-bottom:3px solid var(--pink);border-radius:0 0 0 18px;transform:rotate(-30deg)}
@keyframes nudge{50%{transform:rotate(12deg) translate(4px,-4px)}}
.egg.burst .tapme,.egg[data-hits="1"] .tapme,.egg[data-hits="2"] .tapme{opacity:0}

.splat{position:absolute;width:min(90vw,420px);aspect-ratio:1;pointer-events:none;opacity:0;z-index:-1}
.splat.in{animation:splat .5s ease-out forwards}
@keyframes splat{0%{opacity:0;transform:scale(.2) rotate(-20deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
.splat svg{width:100%;height:100%;filter:url(#boil)}

/* feed */
.ask{font-family:Bowlby;font-weight:400;font-size:clamp(24px,7.2vw,36px);line-height:1.15;text-transform:uppercase;text-align:center;margin-top:6px;filter:url(#boilSoft)}
.ask em{font-style:normal;background:var(--ink);color:var(--lime);padding:0 8px;display:inline-block;transform:rotate(-2deg)}
.strip{position:relative;background:var(--paper2);width:min(100%,400px);margin:16px 0 0;padding:14px 18px;box-shadow:0 2px 0 rgba(0,0,0,.08);transform:rotate(.8deg)}
.strip::before,.strip::after{content:"";position:absolute;top:-12px;width:64px;height:26px;background:rgba(255,79,154,.6);transform:rotate(-8deg)}
.strip::before{left:-14px}
.strip::after{right:-14px;transform:rotate(9deg);background:rgba(184,242,58,.75)}
#taskInput{width:100%;font-family:Marker;font-size:26px;border:0;background:none;outline:none;color:var(--ink);border-bottom:3px solid var(--ink);padding:2px 0}
#taskInput::placeholder{color:rgba(20,18,16,.32)}
.strip.nudge{animation:shake .38s}
.chips{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.chip{display:flex;align-items:center;gap:6px;padding:8px 12px;border:2.5px solid var(--ink);background:var(--paper2);font-size:14px;font-weight:700;transform:rotate(var(--r,0deg));box-shadow:2px 2px 0 var(--ink)}
.chip svg{width:18px;height:18px}
.chip:active{transform:translate(2px,2px)}
.feed-dino{flex:1;width:100%;display:flex;align-items:center;justify-content:center;gap:4px;min-height:0;position:relative}
.dino-slot--peek{width:min(36vw,170px);flex-shrink:0;align-self:flex-end;margin-bottom:-6px}
.times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.time{position:relative;width:min(24vw,96px);aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotate(var(--r))}
.time::before{content:"";position:absolute;inset:0;background:var(--paper2);border:3px solid var(--ink);filter:url(#boil);transition:background .15s}
.time b{position:relative;font-family:Bowlby;font-weight:400;font-size:clamp(26px,8vw,36px);line-height:1}
.time i{position:relative;font-style:normal;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.time.sel::before{background:var(--ink)}
.time.sel{color:var(--lime);transform:rotate(var(--r)) scale(1.07)}
.time small{position:absolute;top:-12px;left:-12px;font-family:Marker;font-size:13px;background:var(--pink);color:#fff;border:2px solid var(--ink);padding:1px 6px;white-space:nowrap;transform:rotate(-10deg);z-index:2}

/* focus */
.now{font-size:13px;text-transform:uppercase;letter-spacing:.18em;font-weight:700;margin-top:8px}
.doing{font-family:Marker;font-weight:400;font-size:clamp(26px,8vw,38px);line-height:1.05;text-align:center;max-width:94%;margin-top:4px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.doing::after{content:"";display:block;height:8px;margin-top:-8px;background:var(--lime);opacity:.8;transform:skewX(-20deg);position:relative;z-index:-1}
.stage--focus .dino-slot{width:min(64vw,270px);margin-right:26%}
.mouthstrip{position:absolute;left:83%;top:40%;width:56%;height:44px;background:var(--paper2);border:2.5px solid var(--ink);transform:rotate(-8deg);transform-origin:0 50%;display:flex;align-items:center;padding:0 10px 0 22px;overflow:hidden;clip-path:inset(-4px -4px -4px var(--eaten,0%));transition:clip-path .8s}
.mouthstrip span{font-family:Marker;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumbs{position:absolute;inset:0;pointer-events:none}
.crumb{position:absolute;width:8px;height:6px;background:var(--paper2);border:1.5px solid var(--ink);animation:crumb .9s ease-in forwards}
@keyframes crumb{100%{transform:translate(var(--dx),70px) rotate(240deg);opacity:0}}
.timer{font-family:Bowlby;font-size:clamp(48px,16vw,80px);line-height:.9;letter-spacing:.01em;text-shadow:4px 4px 0 var(--lime);margin-bottom:12px;font-variant-numeric:tabular-nums;filter:url(#boilSoft)}
.timer.up{color:var(--pink);text-shadow:4px 4px 0 var(--ink);animation:pulse 1s infinite}
.focus-btns,.row-btns{display:flex;gap:12px;width:min(100%,400px);align-items:center}
.focus-btns .big,.row-btns .big{flex:1}

.bubble{position:absolute;top:2%;right:2%;max-width:52%;background:var(--paper2);border:3px solid var(--ink);padding:8px 14px;font-family:Marker;font-size:20px;line-height:1.1;transform:rotate(4deg) scale(.4);opacity:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),opacity .2s;z-index:3;box-shadow:3px 3px 0 var(--ink)}
.bubble::after{content:"";position:absolute;left:18px;bottom:-15px;width:20px;height:20px;background:var(--paper2);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);transform:skewX(30deg) rotate(30deg)}
.bubble.in{opacity:1;transform:rotate(4deg) scale(1)}
.bubble.cry{background:var(--pink);color:#fff}
.bubble.cry::after{background:var(--pink)}
.bubble--home{top:6%;right:6%}

/* done */
.stamp{position:absolute;top:4%;z-index:4;font-family:Bowlby;font-size:clamp(36px,10.5vw,58px);color:var(--pink);border:8px solid var(--pink);padding:0 14px;line-height:1.05;transform:rotate(-10deg) scale(4);opacity:0;mix-blend-mode:multiply;filter:url(#boil)}
.stamp.in{animation:slam .38s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes slam{0%{opacity:0;transform:rotate(-10deg) scale(4)}100%{opacity:.92;transform:rotate(-10deg) scale(1)}}
.grew{position:absolute;bottom:4%;right:6%;font-family:Marker;font-size:30px;background:var(--lime);border:3px solid var(--ink);padding:2px 14px;transform:rotate(-6deg) scale(0);transition:transform .5s cubic-bezier(.3,1.8,.5,1)}
.grew.in{transform:rotate(-6deg) scale(1)}
.bones{display:flex;gap:10px;justify-content:center;margin:6px 0 16px}
.bone{width:56px;height:30px;opacity:.25;transition:opacity .3s,transform .5s cubic-bezier(.3,1.8,.5,1)}
.bone.on{opacity:1}
.bone.pop{animation:bonePop .6s cubic-bezier(.3,1.8,.5,1)}
@keyframes bonePop{0%{transform:scale(0) rotate(-90deg)}100%{transform:none}}
.bone svg{width:100%;height:100%;filter:url(#boil)}

/* home */
.stage--home{align-items:end}
.stage--home .dino-slot{width:min(76vw,330px);z-index:1;grid-area:1/1;margin-bottom:8px}
.stage--done .dino-slot{width:min(70vw,290px)}
.nest{position:absolute;bottom:0;z-index:2;width:min(78vw,340px);height:70px;background:
  repeating-linear-gradient(12deg,transparent 0 6px,var(--ink) 6px 8px,transparent 8px 13px),
  repeating-linear-gradient(-14deg,transparent 0 5px,#8a6a3c 5px 8px,transparent 8px 12px),#c9a463;
  border-radius:50%;border:4px solid var(--ink);filter:url(#boil)}
.meter{display:flex;align-items:center;gap:14px;margin-top:12px}
.meter .bones{margin:0}
.meter .bone{width:44px;height:24px}
.size{font-family:Bowlby;font-size:17px;text-transform:uppercase;background:var(--ink);color:var(--paper2);padding:2px 10px;transform:rotate(-2deg)}
.eaten{width:min(100%,400px);display:flex;flex-wrap:wrap;gap:6px;justify-content:center;max-height:76px;overflow-y:auto;margin:12px 0 14px;scrollbar-width:none}
.eaten:empty{display:none}
.ate{display:flex;align-items:center;gap:5px;padding:4px 10px;background:var(--paper2);border:2px solid var(--ink);font-size:13px;font-weight:700;text-decoration:line-through;text-decoration-thickness:2px;transform:rotate(var(--r))}
.ate svg{width:14px;height:14px;flex-shrink:0}

/* sheet + alert */
.sheet{position:absolute;inset:0;z-index:20;background:rgba(20,18,16,.32);display:grid;place-items:end center;padding:16px 16px calc(56px + env(safe-area-inset-bottom))}
.sheet__card{background:var(--paper);width:min(100%,360px);padding:28px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;border:4px solid var(--ink);box-shadow:8px 8px 0 var(--pink);transform:rotate(-1.5deg)}
.sheet__q{font-family:Bowlby;font-size:28px;text-transform:uppercase;line-height:1;text-align:center}
.sheet__q em{font-style:normal;color:var(--pink)}
.alert{position:absolute;left:16px;right:16px;top:64px;z-index:30;background:var(--pink);color:#fff;border:3px solid var(--ink);padding:12px 14px;font-size:14px;font-weight:700;box-shadow:4px 4px 0 var(--ink)}

/* short phones */
@media (max-height:700px){
  .title{font-size:min(16vw,88px)}
  .dino-slot{width:min(58vw,250px)}
  .stage--focus .dino-slot{width:min(60vw,230px)}
  .stage--home .dino-slot{width:min(66vw,280px)}
  .ask{font-size:clamp(22px,6.6vw,32px)}
  .strip{margin-top:12px;padding:10px 16px}
  .chips{margin-top:10px}
  .timer{font-size:clamp(44px,14vw,70px);margin-bottom:8px}
  .big{min-height:60px;font-size:20px}
  .time{width:min(21vw,84px)}
  .nest{height:56px}
}
@media (min-width:700px){
  .stage--focus .dino-slot{margin-right:30%}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01s!important;animation-iteration-count:1!important}
}

/* ===== WOW intro layer ===== */
.title{position:relative;z-index:3}
.tag,#introBtn{position:relative;z-index:3}
.scan{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--ink);clip-path:inset(0 0 0 0)}
.scan i{position:absolute;left:0;right:0;top:0;height:46px;transform:translateY(-60px);background:linear-gradient(transparent,rgba(184,242,58,.0) 10%,rgba(214,255,140,.95) 48%,#fff 50%,rgba(214,255,140,.95) 52%,transparent);box-shadow:0 0 60px 30px rgba(184,242,58,.45);mix-blend-mode:screen}
.scan.go{animation:scanClip 1.15s cubic-bezier(.6,.05,.4,1) forwards}
.scan.go i{animation:scanBar 1.15s cubic-bezier(.6,.05,.4,1) forwards}
@keyframes scanClip{0%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(100% 0 0 0)}}
@keyframes scanBar{0%{transform:translateY(-60px)}100%{transform:translateY(100vh)}}
.scan.done{display:none}
.flash{position:fixed;inset:0;z-index:55;background:#fffef6;opacity:0;pointer-events:none}
.flash.go{animation:flash .55s ease-out}
@keyframes flash{0%{opacity:0}8%{opacity:1}100%{opacity:0}}
.fx{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.shard{position:absolute;width:var(--s);height:var(--s);background:#fbf8ef;border:3px solid var(--ink);clip-path:polygon(50% 0,100% 40%,80% 100%,10% 85%,0 30%);animation:shard 1.3s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes shard{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}
.conf{position:absolute;width:var(--w);height:var(--h);background:var(--c);border:2px solid var(--ink);animation:conf var(--t) cubic-bezier(.25,.5,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0)}30%{opacity:1}100%{transform:translate(var(--dx),var(--dy)) rotate(var(--rot));opacity:0}}

.rays{position:absolute;width:190vmax;height:190vmax;left:50%;top:50%;margin:-95vmax 0 0 -95vmax;opacity:0;transition:opacity .8s;pointer-events:none;z-index:-2}
.rays svg{width:100%;height:100%;animation:spin 40s linear infinite}
.rays.on{opacity:1}
.rays.pump{animation:pump .35s ease-out}
@keyframes pump{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}

.stage--intro{z-index:2}
.tapes{position:absolute;inset:0 -16px;pointer-events:none;z-index:-1}
.tape{position:absolute;left:calc(50% - 90vw);width:180vw;height:38px;top:64%;background:var(--lime);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);display:flex;align-items:center;overflow:hidden;opacity:0;transition:opacity .6s}
.tape--a{transform:rotate(-14deg)}
.tape--b{transform:rotate(11deg);background:var(--pink);color:#fff;top:73%}
.tapes.on .tape{opacity:.92}
.tape__in{display:flex;white-space:nowrap;font-family:Bowlby;font-size:17px;letter-spacing:.06em;animation:marq 14s linear infinite}
.tape--b .tape__in{animation-direction:reverse;animation-duration:17s}
.tape__in span{padding:0 14px;display:inline-flex;align-items:center;gap:28px}
.tape__in span::after{content:"";width:12px;height:12px;background:currentColor;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes marq{to{transform:translateX(-50%)}}

.excuses{position:absolute;inset:0;pointer-events:none;z-index:3}
.excuse{position:absolute;font-family:Marker;font-size:17px;background:var(--paper2);border:2px solid var(--ink);padding:3px 10px;white-space:nowrap;box-shadow:3px 3px 0 rgba(20,18,16,.25);transform:rotate(var(--r));animation:floaty 3.6s ease-in-out infinite;animation-delay:var(--d);opacity:0;transition:opacity .5s}
.excuse.on{opacity:1}
@keyframes floaty{50%{translate:0 -9px}}
.excuse::after{content:"";position:absolute;left:-6%;right:-6%;top:50%;height:5px;background:var(--pink);transform:scaleX(0) rotate(-6deg);transform-origin:0 50%;transition:transform .28s cubic-bezier(.5,0,.3,1);border-radius:3px}
.excuse.x::after{transform:scaleX(1) rotate(-6deg)}
.excuse.fall{animation:fall .9s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes fall{to{translate:var(--fx) 110vh;rotate:var(--fr)}}

.bubble--rawr{top:auto;bottom:62%;right:4%;font-family:Bowlby;font-size:30px;background:var(--lime);transform:rotate(-8deg) scale(.3)}
.bubble--rawr::after{background:var(--lime)}
.bubble--rawr.in{transform:rotate(-8deg) scale(1)}
.egg.charge .egg__svg{filter:drop-shadow(0 0 18px rgba(255,79,154,.7))}
.dino .pupil{transform:translate(var(--px,0px),var(--py,0px));transition:transform .12s linear}
@media (prefers-reduced-motion:reduce){.scan{display:none}.rays svg,.tape__in{animation:none}}