/* tokens: white #FFF, fur #989998, stripe #606060, pink #F1A3B1, ink #0D0D0D.
   Gaegu (display) / Short Stack (body) / Cutive Mono (CA). Hard 3px ink borders, no radius, no soft shadows.
   Motion: scroll-driven stretch. --p (0..1) is set by JS and replaced by animation-timeline where supported. */
@font-face{font-family:Gaegu;font-weight:400;src:url(fonts/gaegu-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:Gaegu;font-weight:700;src:url(fonts/gaegu-latin-700-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Short Stack";src:url(fonts/short-stack-latin-400-normal.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cutive Mono";src:url(fonts/cutive-mono-latin-400-normal.woff2) format("woff2");font-display:swap}
:root{--ink:#0D0D0D;--pink:#F1A3B1;--fur:#989998;--W:clamp(250px,24vw,360px);--neckW:calc(var(--W)*.342);--tileH:calc(var(--neckW)*420/353);--p:0}
*{box-sizing:border-box}
html{background:#fff;color:var(--ink);overflow-x:clip}
body{margin:0;font-family:"Short Stack",sans-serif;overflow-x:clip}
.intro{position:absolute;top:28px;left:4vw;width:calc(50vw - .752*var(--W) - 6vw);min-width:200px;z-index:3}
h1{font:700 clamp(54px,7vw,104px)/.9 Gaegu,sans-serif;margin:0 0 14px;transform:rotate(-2deg)}
.sub{font:400 clamp(24px,2.4vw,34px)/1.1 Gaegu;margin:0 0 18px}
.status{font:12px/1.3 "Short Stack";margin:0;border:3px solid var(--ink);display:inline-block;padding:3px 8px;background:var(--pink)}
.chrome{position:fixed;top:14px;right:84px;z-index:20;display:flex;gap:10px;align-items:center}
.buy{font:700 28px/1 Gaegu;color:var(--ink);background:var(--pink);border:3px solid var(--ink);padding:6px 12px;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}
.buy small{font:11px "Short Stack"}
.dex{font:15px/1 "Short Stack";color:var(--ink);background:#fff;border:3px solid var(--ink);padding:5px 9px;text-decoration:none;box-shadow:3px 3px 0 var(--ink)}
.buy:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.xlink img{display:block;width:54px;height:54px}
.stage{position:relative;width:var(--W);margin-left:calc(50% - .752*var(--W));padding-top:0}
.head-wrap{position:sticky;top:0;z-index:5;width:var(--W);height:var(--W);animation:drop .9s cubic-bezier(.3,1.5,.5,1) both}
.cover{position:absolute;left:calc(var(--W)*.578 - 6px);width:calc(var(--neckW) + 12px);top:0;height:calc(var(--W)*.96);background:#fff}
.head-rot{position:absolute;inset:0;transform-origin:76% 100%;transform:rotate(calc(-2deg - var(--p)*8deg))}
.head-bob{position:absolute;inset:0;transform-origin:76% 100%;animation:bob 5s ease-in-out infinite}
.head{width:100%;height:100%;display:block}
.pupil{position:absolute;width:calc(var(--W)*.0449);height:calc(var(--W)*.0449);margin:calc(var(--W)*-.0225) 0 0 calc(var(--W)*-.0225)}
.pupil i{display:block;width:100%;height:100%;background:url(assets/pupil.png) center/contain no-repeat}
.pl{left:23.44%;top:50.1%;transform:translate(calc(var(--W)*-.05*var(--p)),calc(var(--W)*.035*var(--p)))}
.pr{left:55.37%;top:34.7%;transform:translate(calc(var(--W)*.05*var(--p)),calc(var(--W)*-.03*var(--p)))}
.pl i{animation:wander 7s ease-in-out infinite}.pr i{animation:wander 9s ease-in-out -3s infinite reverse}
.drool{position:absolute;left:39.06%;top:79.3%;width:7.03%;display:flex;flex-direction:column;transform-origin:top;--s:1}
.drool img{display:block;width:100%}
.d-mid{height:calc(var(--W)*.0371*var(--s));object-fit:fill}
.d-bulb{height:auto}
.drop{position:absolute;width:7.03%;pointer-events:none;animation:fall 1s cubic-bezier(.5,0,1,.6) forwards;z-index:4}
.tag{position:absolute;left:calc(var(--W)*.757);top:calc(var(--W)*.9);transform:translateX(-50%) rotate(3deg);z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:calc(var(--W)*.6);background:var(--pink);border:3px solid var(--ink);padding:14px 10px 6px;font:inherit;color:var(--ink);cursor:pointer}
.tag .hole{position:absolute;top:4px;left:50%;width:9px;height:9px;margin-left:-4px;border:3px solid var(--ink);border-radius:50%;background:#fff}
.tag .lbl{font:15px Gaegu}
.tag code{font:400 clamp(13px,1.1vw,16px) "Cutive Mono",monospace;letter-spacing:.02em;user-select:all}
.tag .copied{position:absolute;right:-6px;top:-18px;font:700 20px Gaegu;background:#fff;border:3px solid var(--ink);padding:0 6px;display:none;transform:rotate(6deg)}
.tag.ok .copied{display:block}
.tag:active{transform:translateX(-50%) rotate(3deg) translateY(2px)}
.neck{position:absolute;left:calc(var(--W)*.578);top:calc(var(--W)*.96);width:var(--neckW);z-index:1;animation:grow 1.1s ease-out both}
.tiles{height:calc(var(--tileH)*70);background:url(assets/neck.png) top/100% var(--tileH) repeat-y}
.body{display:block;width:calc(var(--neckW)*820/353);max-width:none;height:auto;margin-top:-1px}
.stage::after{content:"";display:block;height:calc(var(--tileH)*70 + var(--neckW)*1.813 + 90px - var(--W)*.04)}
.note{position:absolute;margin:0;font:400 clamp(24px,2.3vw,34px)/1 Gaegu;top:calc(var(--W)*.96 + var(--tileH)*var(--k));width:calc(50vw - var(--neckW)/2 - 24px);z-index:2}
.note.r{left:calc(var(--W)*.578 + var(--neckW) + 18px);transform:rotate(2deg)}
.note.l{text-align:right;right:auto;left:calc(var(--W)*.578 - 18px);transform:translateX(-100%) rotate(-3deg)}
.note.end{top:calc(var(--W)*.96 + var(--tileH)*70 + var(--neckW)*1.813 + 8px);left:calc(var(--W)*.578);width:auto;white-space:nowrap}
.ruler{position:fixed;right:0;top:0;bottom:0;width:70px;z-index:10;border-left:3px solid var(--ink);background:#fff;opacity:0;pointer-events:none}
.js .ruler{opacity:1}
.marks{position:absolute;inset:0;overflow:hidden;background:
  repeating-linear-gradient(to bottom,var(--ink) 0 2px,transparent 2px 80px) right 0 top var(--off,0px)/14px 100% no-repeat,
  repeating-linear-gradient(to bottom,var(--ink) 0 3px,transparent 3px 800px) right 0 top var(--off,0px)/30px 100% no-repeat}
.marks span{position:absolute;right:34px;font:20px Gaegu;white-space:nowrap}
.read{position:absolute;right:76px;top:34vh;white-space:nowrap;background:#fff;border:3px solid var(--ink);padding:4px 10px;display:flex;flex-direction:column;font:700 26px/1 Gaegu}
.read span{font:400 17px Gaegu}
.stamp{position:fixed;left:50%;top:44%;z-index:30;font:700 clamp(46px,8vw,92px)/1 Gaegu;color:var(--ink);background:var(--pink);border:6px solid var(--ink);padding:6px 22px;transform:translate(-50%,-50%) rotate(-8deg) scale(1.7);opacity:0;pointer-events:none}
.stamp.on{opacity:1;animation:stampdown .25s steps(4) forwards}
.snd{position:fixed;left:12px;bottom:12px;z-index:20;font:20px Gaegu;background:#fff;border:3px solid var(--ink);padding:2px 10px;color:var(--ink);cursor:pointer}
.nojs{position:fixed;bottom:50px;left:12px;font-size:13px}
@keyframes drop{from{transform:translateY(-38%)}to{transform:none}}
@keyframes grow{from{clip-path:inset(0 -100vw 100% -100vw)}to{clip-path:inset(0 -100vw 0 -100vw)}}
@keyframes bob{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(3px)}}
@keyframes wander{0%,100%{transform:translate(0,0)}30%{transform:translate(calc(var(--W)*.012),calc(var(--W)*-.01))}70%{transform:translate(calc(var(--W)*-.01),calc(var(--W)*.012))}}
@keyframes fall{from{transform:translateY(0);opacity:1}85%{opacity:1}to{transform:translateY(80vh);opacity:0}}
@keyframes stampdown{to{transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}
@supports (animation-timeline:scroll()){
  .head-rot{transform:none;animation:tilt linear both;animation-timeline:scroll(root block)}
  .pl{transform:none;animation:pl linear both;animation-timeline:scroll(root block)}
  .pr{transform:none;animation:pr linear both;animation-timeline:scroll(root block)}
  @keyframes tilt{from{rotate:-2deg}to{rotate:-10deg}}
  @keyframes pl{to{translate:calc(var(--W)*-.05) calc(var(--W)*.035)}}
  @keyframes pr{to{translate:calc(var(--W)*.05) calc(var(--W)*-.03)}}
}
@media (max-width:760px){
  .intro{position:relative;top:0;left:0;width:auto;padding:16px 4vw 0;min-width:0}
  .stage{margin-top:12px}
  .chrome{top:auto;bottom:10px;right:auto;left:10px}
  .read{font-size:20px;top:auto;bottom:74px;right:62px;padding:2px 8px}.read span{font-size:15px}.ruler{width:56px}
  .snd{bottom:64px}
  .note{font-size:22px}
  .status{font-size:11px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .head-rot{transform:rotate(-8deg)!important}
  .snd{display:none}
}