.cat-ledge{position:sticky;top:0;z-index:20;background:#f7f7f7;max-width:1312px;height:118px;margin:0 auto 12px;pointer-events:none;overflow:visible}
.cat-ledge::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:#c5c6bf;z-index:3}
.studio-look{position:absolute;right:7%;bottom:-23px;width:270px;height:166.5px;pointer-events:none;z-index:2;overflow:visible;clip-path:inset(-200px -100px 23px)}
.studio-look>svg{width:100%;height:100%;overflow:visible}
.cat-peek{transform:translateY(var(--look-drop,0px)) rotate(var(--look-angle,0deg));transform-origin:150px 170px;transition:transform 240ms ease-out}
.cat-features{transition:transform 180ms ease-out}.cat-face{transform-origin:150px 160px}.bongo-left{transform-origin:65px 145px}.bongo-right{transform-origin:233px 168px}.cat-eyes{transform-origin:158px 120px;animation:cat-blink 5.6s infinite}.cat-breathe{transform-origin:150px 175px;animation:cat-breathe 4s ease-in-out infinite}
@keyframes cat-blink{0%,43%,47%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@keyframes cat-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.018)}}
@media(hover:hover) and (pointer:fine){html.paw-enabled,html.paw-enabled body,html.paw-enabled a,html.paw-enabled button,html.paw-enabled video,html.paw-enabled .project *{cursor:var(--paw-cursor)}html.paw-enabled input,html.paw-enabled textarea,html.paw-enabled [contenteditable]{cursor:text}html.paw-striking,html.paw-striking body,html.paw-striking a,html.paw-striking button,html.paw-striking video,html.paw-striking .project *{cursor:none}}
.paw-swat{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden;visibility:hidden}
.paw-swat>svg{display:block;width:100%;height:100%;overflow:visible;transform:translate(0,0);opacity:1}
.paw-swat[data-state=held],.paw-swat[data-state=releasing]{visibility:visible}
.paw-swat[data-state=releasing]>svg{transform:translate(var(--retreat-x),-18px);opacity:0;transition:transform 180ms ease-in,opacity 180ms ease-in}
.bongo-left,.bongo-right,.cat-face{transition:transform 130ms ease-out}
.bongo-left.paw-held{transform:translate(8px,24px) rotate(12deg) scaleY(.88)}
.bongo-right.paw-held{transform:translate(-8px,24px) rotate(-12deg) scaleY(.88)}
.cat-pressing .cat-face{transform:translateY(4px) scaleY(.97)}
@media(max-width:1440px){.cat-ledge{margin-inline:64px}}
@media(max-width:800px){.cat-ledge{margin-inline:24px;height:95px}.studio-look{right:4%;width:215px;height:132.6px;bottom:-18px}}
@media(prefers-reduced-motion:reduce){.cat-peek,.cat-features{transition:none;transform:none}.cat-eyes,.cat-breathe{animation:none}.bongo-left,.bongo-right,.cat-face,.paw-swat>svg{transition:none!important}}

/* Only the body is behind the ledge. Pressed paws cover its front edge. */
.table-paws{z-index:4;clip-path:none}
.table-paw{opacity:0;transform-box:fill-box;transform-origin:center;transition:opacity 70ms ease-out}
.table-paws[data-side=left] .table-paw-left,.table-paws[data-side=right] .table-paw-right{opacity:1}
.bongo-left.paw-held,.bongo-right.paw-held{opacity:0}
@media(max-width:800px){.studio-look:not(.table-paws){clip-path:inset(-200px -100px 18px)}}

/* Idle expression takes precedence over the last hovered project. */
.cat-sleepy-face{opacity:0}
.cat-sleepy .cat-eyes,.cat-sleepy .cat-mouth{opacity:0}
.cat-sleepy .cat-sleepy-face{opacity:1}
.cat-sleepy .cat-eyes{animation-play-state:paused}

.cat-eyes ellipse{transform-box:fill-box;transform-origin:center;transition:transform 150ms ease-out}
.cat-curious:not(.cat-sleepy) .cat-eyes ellipse{transform:scale(1.22,1.32)}
@media(prefers-reduced-motion:reduce){.cat-eyes ellipse{transition:none}}

.paw-impact{position:fixed;width:96px;height:96px;z-index:9998;pointer-events:none;color:#77736b;opacity:0;transform:translate(-50%,-50%)}
.paw-impact>svg{display:block;width:100%;height:100%}

.cat-eyes{fill:var(--eye-ink,#353330);transition:fill 120ms ease-out}
.cat-puff{position:absolute;right:7%;bottom:6px;width:210px;height:150px;z-index:5;opacity:0;pointer-events:none;transform-origin:center}
.cat-puff svg{width:100%;height:100%}
.cat-poof .cat-face{opacity:.2;transition:opacity 180ms ease-out}
@media(max-width:800px){.cat-puff{right:4%;width:175px;height:120px}}
@media(prefers-reduced-motion:reduce){.cat-eyes,.cat-poof .cat-face{transition:none}}

.page-blast{position:fixed;inset:0;z-index:10001;pointer-events:none;opacity:0;overflow:hidden;transform-origin:center}
.page-blast svg{display:block;width:100%;height:100%}

.page-blast{background:radial-gradient(ellipse at 50% 75%,#f2b98299,transparent 75%)}
.page-blast .nuclear-cloud{position:absolute;width:min(680px,85vw);height:min(600px,80vh);bottom:2vh;left:0;right:0;margin:auto;transform-origin:50% 95%}
.nuclear-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 75%,#ffe4b288,transparent 65%)}
.nuclear-ring{position:absolute;left:50%;top:70%;width:65vmax;height:35vmax;border:12px solid #e6a977;border-radius:50%;opacity:0;transform:translate(-50%,-50%)}

/* Let the mushroom cloud fill the viewport; the warm wash completes the wipeout. */
.page-blast .nuclear-cloud{width:120vw;height:115vh;max-width:none;bottom:-10vh;left:-10vw;right:auto}
.page-blast .nuclear-glow{z-index:1;background:#f5d7b5;opacity:0}
.page-blast .nuclear-ring{z-index:2}
html{overflow-x:clip}

.cat-touch-target{display:none}
@media(hover:none),(pointer:coarse){.cat-touch-target{display:block;position:absolute;right:7%;bottom:0;width:270px;height:140px;z-index:6;border:0;padding:0;background:transparent;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.cat-touch-target:focus-visible{outline:2px solid #777;outline-offset:3px;border-radius:12px}}
@media(max-width:800px){.cat-touch-target{right:4%;width:215px;height:110px}}

@media(hover:none),(pointer:coarse){
  .bongo-left,.bongo-right,.cat-face,.table-paw{transition:none}
}
.page-blast.mobile-blast{inset:0 auto auto 0}
.page-blast.mobile-blast .nuclear-cloud{inset:0;width:100%;height:100%;margin:0;transform-origin:50% 50%}