/* © 2026 Munir Kotadia. All rights reserved. Not to be copied or reused without written permission. */
.kat{position:absolute;width:84px;height:60px;pointer-events:none;-webkit-tap-highlight-color:transparent;transition:opacity .4s}
.kat svg{display:block;width:100%;height:100%;overflow:visible}
.kat .catsvg>*{pointer-events:visiblePainted}
.kat svg *{transform-box:view-box}
.kat.flip svg{transform:scaleX(-1)}
.kat.turn{animation:kTurnRound .26s ease-in-out}
@keyframes kTurnRound{0%,100%{scale:1 1}50%{scale:.08 1}}
.kat.flip .zz{transform-box:fill-box;transform-origin:center;scale:-1 1}
.kat .shut,.kat .tongue{display:none}
.kat[data-pose="sleep"] .shut,.kat[data-pose="groom"] .shut{display:inline}
.kat[data-pose="sleep"] .eyes,.kat[data-pose="groom"] .eyes{display:none}
.kat[data-pose="groom"] .tongue{display:inline}
.kat .eyes{transform:translate(var(--lx,0px),var(--ly,0px));transition:transform .15s}
.kat .eye{transform-box:fill-box;transform-origin:50% 50%;animation:kBlink 5s infinite}
.kat.sblink .eye{animation:kSlow 1.8s ease-in-out}
.kat.wide .eye circle:first-child{r:2.9}
.kat .hd{transition:rotate .5s ease}
.kat .tl{animation:kTail 2.6s ease-in-out infinite}
.kat.annoyed .tl{animation-duration:.7s}
.kat[data-pose="sleep"] .tl{animation:none}
.kat .ear{transition:rotate .25s}
.kat.scared .ear.l{rotate:-48deg}.kat.scared .ear.r{rotate:48deg}
.kat.scared .tl path:first-child{stroke-width:13}.kat.scared .tl path:nth-child(2),.kat.scared .tl path:nth-child(3){stroke-width:8.6}
.kat[data-pose="walk"] .lg.fb,.kat[data-pose="walk"] .lg.nf{animation:kLegA .56s ease-in-out infinite}
.kat[data-pose="walk"] .lg.ff,.kat[data-pose="walk"] .lg.nb{animation:kLegB .56s ease-in-out infinite}
.kat[data-pose="walk"] svg{animation:kBob .28s ease-in-out infinite}
.kat[data-pose="watch"] .hd{animation:kLook 5s ease-in-out infinite}
.kat[data-pose="watch"] .feat{animation:kTurn 5s ease-in-out infinite}
@keyframes kTurn{0%,100%{translate:0 0}30%{translate:-2.2px -.6px}60%{translate:1.8px 0}}
.kat.gazeup .hd{rotate:-4deg}.kat.gazeup .feat{translate:.6px -1.4px}
.kat.knead .lg.nf{animation:kKnead .7s ease-in-out infinite}.kat.knead .lg.ff{animation:kKnead .7s ease-in-out -.35s infinite}
.kat[data-pose="crouch"] .haunch{transform-origin:60px 60px;animation:kWiggle .32s ease-in-out infinite}
.kat .breathe{transform-origin:66px 66px;animation:kBreath 3.4s ease-in-out infinite}
.kat .zz{font:800 11px system-ui,sans-serif;fill:var(--ink-2);opacity:0;animation:kZz 3.4s ease-in infinite}
.kat .zz:nth-of-type(2){animation-delay:1.1s}.kat .zz:nth-of-type(3){animation-delay:2.2s}
.kat.tap .reachleg{animation:kTap .32s ease-in-out 2}
.kat.swipe .reachleg{animation:kSwipe .5s ease-in-out 3}
.kat.bat .reachleg{animation:kBat .3s ease-in}
.kat .hearts{position:absolute;left:58%;top:-8px;width:30px;height:24px;pointer-events:none;display:none}
.kat.love .hearts{display:block}
.kat .hearts i{position:absolute;bottom:0;font-style:normal;font-size:13px;color:var(--accent);opacity:0;animation:kHeart 1.6s ease-out infinite}
.kat .hearts i:nth-child(2){left:12px;animation-delay:.5s}.kat .hearts i:nth-child(3){left:22px;animation-delay:1s}
@keyframes kBlink{0%,95%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
@keyframes kSlow{0%,100%{transform:scaleY(1)}35%,65%{transform:scaleY(.08)}}
@keyframes kTail{0%,100%{rotate:-5deg}50%{rotate:7deg}}
@keyframes kLegA{0%,100%{rotate:16deg}50%{rotate:-16deg}}
@keyframes kLegB{0%,100%{rotate:-16deg}50%{rotate:16deg}}
@keyframes kBob{0%,100%{translate:0 0}50%{translate:0 -1.4px}}
@keyframes kLook{0%,100%{rotate:0deg}30%{rotate:-5deg}60%{rotate:4deg}}
@keyframes kKnead{0%,100%{translate:0 0}50%{translate:0 -3.5px}}
@keyframes kWiggle{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
@keyframes kBreath{0%,100%{scale:1 1}50%{scale:1.03 1.07}}
@keyframes kZz{0%{opacity:0;translate:0 0}20%{opacity:.9}100%{opacity:0;translate:7px -16px}}
@keyframes kTap{0%,100%{rotate:0deg}50%{rotate:9deg}}
@keyframes kSwipe{0%,100%{rotate:0deg}50%{rotate:-28deg}}
@keyframes kBat{0%{rotate:-25deg}60%{rotate:10deg}100%{rotate:0deg}}
@keyframes kHeart{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-22px) scale(1)}}
.katlane{position:relative;height:0;overflow:hidden;transition:height .7s ease,margin .7s ease;pointer-events:none;margin:-14px 0 0}
.katlane.open{height:60px;margin-bottom:-14px}
.katlane .kat{bottom:0;left:-90px}
.katspot{position:relative;height:0;pointer-events:none;z-index:4}
.katspot .kat{opacity:0;translate:0 18px;transition:opacity .35s,translate .5s cubic-bezier(.3,1.5,.5,1)}
.katspot.in .kat{opacity:1;translate:0 0}
.katspot.drop .kat{animation:kPopOut .24s ease-in forwards}
@keyframes kPopOut{0%{scale:1;opacity:1}45%{scale:1.14;opacity:1}100%{scale:0;opacity:0}}
.kpoof{position:absolute;width:0;height:0;pointer-events:none}
.kpoof i{position:absolute;left:-8px;top:-8px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #120F24;opacity:0;animation:kPuff .5s ease-out .12s forwards}
@keyframes kPuff{0%{opacity:1;transform:translate(0,0) scale(.4)}60%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.1)}}
.tools{position:relative}
#modeBtn{position:relative;z-index:2}
.kperch{position:absolute;width:84px;height:60px;z-index:3}
.kperch .kat{left:0;top:0}
#wheel .hand{transform-origin:180px 180px}
#wheelBody.k-bat-l #wheel .hand{animation:kHandL 1.6s cubic-bezier(.3,.6,.3,1)}
#wheelBody.k-bat-r #wheel .hand{animation:kHandR 1.6s cubic-bezier(.3,.6,.3,1)}
@keyframes kHandL{0%{rotate:0deg}15%{rotate:-16deg}35%{rotate:10deg}55%{rotate:-6deg}75%{rotate:3deg}100%{rotate:0deg}}
@keyframes kHandR{0%{rotate:0deg}15%{rotate:16deg}35%{rotate:-10deg}55%{rotate:6deg}75%{rotate:-3deg}100%{rotate:0deg}}
#legend>svg{transition:rotate .5s cubic-bezier(.3,1.6,.5,1),translate .5s cubic-bezier(.3,1.6,.5,1)}
#wheelBody.k-badge-first #legend>svg:nth-of-type(2){rotate:24deg;translate:3px 4px}
#wheelBody.k-badge-last #legend>svg:nth-last-of-type(2){rotate:-24deg;translate:-3px 4px}
.neon .kl{display:inline-block;transform-origin:15% 10%;transition:rotate .9s cubic-bezier(.3,1.8,.4,1),translate .9s cubic-bezier(.3,1.8,.4,1)}
.neon .kl.hang{rotate:32deg;translate:0 .08em}
#refreshBtn.k-spin svg{animation:kSpin 1.1s cubic-bezier(.2,.8,.3,1)}
@keyframes kSpin{to{transform:rotate(720deg)}}
#modeBtn.k-nudge{translate:2px 1px;transition:translate .08s}
.ev{transition:rotate .6s cubic-bezier(.3,1.6,.5,1),translate .6s cubic-bezier(.3,1.6,.5,1)}
#eventBody.k-askew>.ev:first-child{rotate:-2.6deg;translate:-4px 2px}
#eventBody.k-askew2>.ev:first-child{rotate:-5deg;translate:-8px 5px}
@media (prefers-reduced-motion: reduce){.kat *,.katspot.drop .kat{animation:none!important}.katspot.drop .kat{opacity:0}.kpoof{display:none}.kat .zz{opacity:.8}.katlane,.katspot .kat{transition:none}}
#sommeBtn{margin-left:8px}
#sommeBtn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}