:root{
  --sky:#64B8F3; --sand:#F7D893; --stone:#EDC47E; --paper:#FFF8E7;
  --pink:#F7A9AE; --gold:#F7C548; --brown:#5A3A1E; --ink:#1a120b;
  --navy:#000080; --grey:#c0c0c0;
  --title:'Anton', Impact, 'Arial Black', sans-serif;
  --hand:'Comic Neue', 'Comic Sans MS', cursive;
  --sys:Tahoma, Verdana, 'Segoe UI', Arial, sans-serif;
  --wordart:linear-gradient(180deg,#FFF59A 0%,#F7C548 45%,#E8862A 100%);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:1180px;color:var(--ink);font:18px/1.45 'Times New Roman', Times, serif;overflow-x:hidden;
  background:#E8C27A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23B97B3E' fill-opacity='.28'%3E%3Cg transform='translate(30 30) rotate(-20) scale(.55)'%3E%3Cellipse cx='0' cy='9' rx='14' ry='11'/%3E%3Ccircle cx='-16' cy='-6' r='6'/%3E%3Ccircle cx='-6' cy='-16' r='6'/%3E%3Ccircle cx='7' cy='-16' r='6'/%3E%3Ccircle cx='17' cy='-6' r='6'/%3E%3C/g%3E%3Cpath d='M70 100 L90 70 L110 100Z'/%3E%3C/g%3E%3Cg transform='translate(80 32) scale(.42)' fill='none' stroke='%23B97B3E' stroke-opacity='.3' stroke-width='7'%3E%3Cpath d='M-46 0 C-28 -26 14 -28 30 0 C14 28 -28 26 -46 0Z M30 0 L52 -20 L46 0 L52 20Z'/%3E%3C/g%3E%3C/svg%3E")}
img{max-width:100%;height:auto}
a{color:#0000EE}
a:visited{color:#551A8B}

/* ---------- page shell ---------- */
.page{width:1120px;margin:24px auto 40px;background:#FFF3D6;border:5px ridge #C9934E;padding:12px;box-shadow:10px 10px 0 rgba(60,30,10,.35)}

.masthead{position:relative;display:flex;align-items:center;justify-content:center;gap:40px;height:180px;border:3px inset #8a6a3a;overflow:hidden;
  background:#000060 radial-gradient(circle,#fff 1px,transparent 1.6px) 0 0/46px 46px;}
.masthead::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#FFE98A 1px,transparent 1.6px) 23px 17px/58px 58px;opacity:.8;animation:twinkle 2.4s steps(2) infinite}
@keyframes twinkle{50%{opacity:.25}}
.mast-words{position:relative;display:flex;align-items:center;gap:26px}
.title{font-family:var(--title);font-weight:400;font-size:116px;line-height:1;margin:0;letter-spacing:6px;transform:perspective(500px) rotateX(14deg) skewX(-6deg)}
.title span{display:inline-block;background:var(--wordart);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:2px #3a1d05;filter:drop-shadow(5px 5px 0 #b3001b) drop-shadow(3px 3px 0 #000);animation:drop .9s cubic-bezier(.3,1.7,.5,1) both}
.title span:nth-child(2){animation-delay:.08s}.title span:nth-child(3){animation-delay:.16s}
.title span:nth-child(4){animation-delay:.24s}.title span:nth-child(5){animation-delay:.32s}
@keyframes drop{from{opacity:0;transform:translateY(-160px) scale(.6)}60%{opacity:1}}
.spin{position:relative;width:90px;height:60px;color:#FFD95A;animation:coin 2.6s linear infinite;filter:drop-shadow(0 0 6px #FFD95A)}
.s-r{animation-delay:-1.3s;transform:scaleX(-1)}
@keyframes coin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}}

.ticker{display:inline-block;font-family:var(--title);font-size:38px;letter-spacing:2px;background:var(--pink);color:#fff;-webkit-text-stroke:1.5px var(--ink);
  border:4px outset #ffd3d6;padding:2px 18px 4px;transform:rotate(-4deg);animation:wob 2s ease-in-out infinite}
@keyframes wob{50%{transform:rotate(3deg) scale(1.05)}}

.marquee{margin-top:8px;background:#000;border:3px inset #808080;overflow:hidden;white-space:nowrap;font:bold 18px/30px 'Courier New', Courier, monospace;color:#FFE600}
.marquee-track{display:inline-flex;animation:marquee 32s linear infinite}
.marquee-track span{padding-right:60px}
@keyframes marquee{to{transform:translateX(-50%)}}

.navbar{display:flex;gap:6px;margin-top:8px;padding:6px;background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff}
.navbar .btn95{flex:1;justify-content:center}

/* Win95 bevel button */
.btn95{position:relative;display:inline-flex;align-items:center;gap:8px;font:bold 15px var(--sys);color:#000!important;text-decoration:none;cursor:pointer;
  background:var(--grey);padding:7px 14px;border:3px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080,inset 1px 1px #dfdfdf;
  transition:transform .15s cubic-bezier(.3,1.8,.5,1)}
.btn95 svg{width:22px;height:22px;fill:var(--brown);color:var(--brown)}
.btn95:hover{background:#d8d4cc;transform:translateY(-3px)}
.btn95:active{border-color:#404040 #fff #fff #404040;box-shadow:inset 1px 1px #808080;transform:translate(1px,1px) scale(1.02,.94);transition-duration:.05s}
.btn95:focus-visible{outline:1px dotted #000;outline-offset:-6px}
.btn-buy{background:#FFE24A}
.btn-buy:hover{background:#FFEB7A}

.pawpop{position:absolute;width:26px;height:26px;fill:var(--brown);pointer-events:none;z-index:20;animation:pawpop .9s ease-out forwards}
@keyframes pawpop{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(var(--r))}25%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--r))}}

.layout{display:flex;gap:14px;margin-top:14px;align-items:flex-start}

/* ---------- sidebar ---------- */
.sidebar{flex:0 0 250px;position:sticky;top:10px}
.side-box{position:relative;background:var(--paper);border:4px ridge #C9934E;padding:0 0 12px;margin-bottom:14px}
.side-title{background:linear-gradient(90deg,var(--navy),#1084d0);color:#fff;font:bold 13px var(--sys);text-align:center;padding:5px 4px;margin-bottom:10px;letter-spacing:.5px}
.side-box .ca{margin:0 10px}
.ca{display:block;font:bold 15px/1.35 'Courier New', Courier, monospace;word-break:break-all;color:#000;background:#fff;border:2px inset #a0a0a0;padding:7px 8px}
.side-btns{position:relative;display:flex;flex-direction:column;gap:8px;margin:12px 10px 0}
.side-btns .btn95{justify-content:center}
.paw-list{margin:0;padding:0 14px;list-style:none;font-size:17px}
.paw-list li{padding:3px 0}
.paw-list li::before{content:"► ";color:var(--navy);font-size:12px}
.news p{margin:4px 12px;font-size:16px}
.new{color:#e00000;font:bold 13px var(--sys);animation:blinktxt 1s steps(1) infinite}
@keyframes blinktxt{50%{visibility:hidden}}

/* ---------- windows ---------- */
.main{flex:1;min-width:0}
.win{background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff;box-shadow:inset -1px -1px #808080,inset 1px 1px #dfdfdf;padding:3px}
.win-title{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(90deg,var(--navy),#1084d0);color:#fff;font:bold 14px var(--sys);padding:3px 4px 3px 8px}
.win-ctl{display:flex;gap:3px}
.win-ctl i{display:grid;place-items:center;width:20px;height:18px;font:bold 12px/1 var(--sys);font-style:normal;color:#000;background:var(--grey);border:2px solid;border-color:#fff #404040 #404040 #fff}
.win-body{position:relative;margin-top:3px;background:var(--paper);border:2px solid;border-color:#808080 #fff #fff #808080;padding:22px 20px}
.win-body.flush{padding:0}
.rule{border:0;height:6px;margin:16px 0;background:linear-gradient(90deg,#e00000,#ff8c00,#ffe600,#00b300,#0060ff,#6a00c8,#e00000);box-shadow:0 2px 0 rgba(0,0,0,.25)}

.h2{font-family:var(--title);font-weight:400;font-size:52px;line-height:1.05;margin:0;text-align:center;letter-spacing:2px;position:relative;
  background:var(--wordart);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:1.5px #3a1d05;
  filter:drop-shadow(4px 4px 0 #b3001b) drop-shadow(2px 2px 0 #000)}
.lede{max-width:720px;margin:16px auto 0;text-align:center;font-size:21px;line-height:1.4;position:relative}

/* ---------- bubbles / shared ---------- */
.bubble{position:absolute;z-index:12;background:#fff;border:3px solid #000;border-radius:16px;padding:6px 14px 8px;font:bold 21px/1.15 var(--hand);
  white-space:nowrap;color:#000;box-shadow:4px 4px 0 rgba(0,0,0,.35);opacity:0;transform:scale(.5) translateY(14px);transform-origin:30% 100%;
  transition:opacity .18s,transform .3s cubic-bezier(.3,1.8,.5,1);pointer-events:none}
.bubble::after{content:"";position:absolute;left:26px;bottom:-12px;width:18px;height:18px;background:#fff;border:3px solid #000;border-top:0;border-left:0;transform:rotate(45deg)}
.bubble.on{opacity:1;transform:none}
.copy-bubble{left:50%;bottom:calc(100% + 16px);margin-left:-150px}

.shadow{position:absolute;border-radius:50%;background:rgba(214,140,60,.45)}
.qmark,.badge{position:absolute;font-family:var(--title);font-size:80px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill;line-height:1;pointer-events:none;z-index:6}
.badge small{font-size:.6em}
.qmark{opacity:0;transform:scale(.4) rotate(-20deg);transition:.3s cubic-bezier(.3,1.8,.5,1)}
.qmark.on{opacity:1;transform:rotate(10deg)}

/* ---------- Catus (eyeless body + masked moving pupils) ---------- */
.layer{position:absolute;left:0;right:0;pointer-events:none}
[data-desert]>svg{display:block;width:100%;height:100%}
.sky{inset:0}
.back{bottom:0;height:68%}
.mid{bottom:0;height:80%}
.front{bottom:0;height:20%;z-index:4}

.cat-slot{position:absolute}
.cat{--lx:2.73;--ly:.97;--rx:1.78;--ry:.85;--ps:1;position:relative;width:100%;aspect-ratio:1080/740;container-type:inline-size}
.clickable .cat{cursor:pointer}
.cat-body{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-user-drag:none;pointer-events:none}
.cat-eyes{position:absolute;inset:0;pointer-events:none;
  -webkit-mask:url(assets/eye-mask.png) 0 0/100% 100% no-repeat;mask:url(assets/eye-mask.png) 0 0/100% 100% no-repeat}
.pupil{position:absolute;aspect-ratio:1;border-radius:50%;background:#050505;box-shadow:inset -.7cqw -.55cqw 0 -.1cqw #fff;
  transform:translate(-50%,-50%) scale(var(--ps));transition:left .12s linear,top .12s linear,transform .25s;
  animation:blink 5.6s infinite;animation-delay:var(--bd,-4.9s)}
.pupil.l{width:8.33%;left:calc(49.31% + var(--lx) * 1cqw);top:calc(51.55% + var(--ly) * 1cqw)}
.pupil.r{width:7.41%;left:calc(91.74% + var(--rx) * 1cqw);top:calc(42.68% + var(--ry) * 1cqw)}
@keyframes blink{0%,92%,100%{scale:1 1}95%{scale:1.1 .08}}

.cat[data-mood=happy]{--ps:1.2;--lx:.6;--ly:-.6;--rx:.4;--ry:-.5}
.cat[data-mood=confused]{--ps:.8;--lx:-2.2;--ly:-1.2;--rx:1.6;--ry:1.5}
.cat[data-mood=sleepy] .pupil{animation:none;scale:1.15 .1}
.cat[data-mood=sleepy]{--lx:0;--ly:.6;--rx:0;--ry:.6}
.cat[data-mood=surprised]{--ps:.5}
.cat[data-mood=explorer]{--lx:2.6;--ly:-.6;--rx:2.1;--ry:-.6;--ps:1.05}
.cat[data-mood=up]{--lx:1.2;--ly:-2.4;--rx:.8;--ry:-2.1}
.cat[data-mood=down]{--lx:1.6;--ly:2.2;--rx:1;--ry:1.9}

.cat .meow{left:52%;bottom:96%}
.cat.boing{animation:boing .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes boing{0%{transform:none}20%{transform:scale(1.08,.88) rotate(-4deg)}45%{transform:scale(.95,1.08) rotate(4deg) translateY(-4%)}70%{transform:rotate(-2deg)}100%{transform:none}}
.cat.idle{animation:idle 3.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes idle{0%,100%{transform:none}50%{transform:scale(1.012,.985)}}

/* ---------- desert svg animation ---------- */
.sway{animation:sway 4.5s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
.drift{animation:drift 30s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(-50px)}to{transform:translateX(60px)}}
.sun-rays{animation:spin 40s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sun-eye{transform-box:fill-box;transform-origin:center;animation:blink2 6s infinite}
@keyframes blink2{0%,90%,100%{transform:none}93%{transform:scaleY(.1)}}
.hero .sun-bob{animation:sunrise 1.8s cubic-bezier(.2,1.2,.4,1) both}
@keyframes sunrise{from{transform:translateY(110px)}to{transform:none}}

/* ---------- HERO ---------- */
.hero{position:relative;height:470px;overflow:hidden;background:var(--sky)}
.hero-cat{position:absolute;left:0;right:0;bottom:56px;height:340px;z-index:3}
.hero-cat .cat-slot{left:0;right:0;bottom:0;margin:auto;width:460px}
.hero-cat .shadow{left:50%;bottom:-3%;width:410px;height:40px;transform:translateX(-50%)}
.hero-copy{left:54%;bottom:auto;top:-30px;margin-left:0}
.sand{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
.hero-text{padding:16px 22px 18px;text-align:center;border-top:2px solid #808080}
.tagline{font:bold 26px/1.2 var(--hand);color:var(--navy);margin:0 0 6px}
.intro{font-size:19px;margin:0 auto 10px;max-width:640px}
.cue{font:bold 16px var(--sys);display:inline-block;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(5px)}}

.banner{display:block;width:100%}

/* ---------- WHO ---------- */
.who{padding-bottom:0}
.who-wrap{position:relative;margin:20px -20px 0;height:560px;overflow:hidden;border-top:2px solid #808080}
.who-wrap .mid{height:70%}
.who-stage{position:relative;width:1200px;height:800px;zoom:.66}
.who-stage .cat-slot{left:220px;top:180px;width:760px}
.who-stage .shadow{left:300px;top:670px;width:620px;height:60px}
.who-stage .qmark{left:880px;top:120px}
.note{position:absolute;z-index:4;width:260px;padding:12px 16px 14px;font:22px/1.2 var(--hand);background:#FFFFA8;border:2px solid #000;box-shadow:5px 5px 0 rgba(0,0,0,.3);transform:rotate(-2deg);transition:transform .25s cubic-bezier(.3,1.8,.5,1)}
.note:hover{transform:rotate(1deg) scale(1.06)}
.note b{display:block;font:bold 21px var(--hand);color:#b3001b;text-decoration:underline}
.n-curious{left:20px;top:150px}
.n-eyes{left:930px;top:130px;transform:rotate(2deg)}
.n-nose{left:930px;top:440px;transform:rotate(-1deg)}
.n-paws{left:20px;top:620px;transform:rotate(2deg)}
.n-fish{left:560px;top:690px;width:300px;transform:rotate(-1deg)}
.arrows{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;fill:none;stroke:#b3001b;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:2 12}
.arrows path:nth-child(even){stroke-dasharray:none}
.carving{position:absolute;z-index:5;width:120px;height:92px;padding:10px;background:var(--stone);border:4px outset #E9C48A;color:#B97B3E;cursor:help;transition:.25s}
.carving svg{width:100%;height:100%}
.carving::after{content:attr(data-joke);position:absolute;left:50%;bottom:calc(100% + 14px);transform:translateX(-50%) scale(.6);opacity:0;white-space:nowrap;background:#FFFFE1;border:2px solid #000;padding:6px 12px;font:bold 22px var(--hand);color:#000;transition:.25s cubic-bezier(.3,1.8,.5,1);pointer-events:none;box-shadow:4px 4px 0 rgba(0,0,0,.3)}
.carving:hover{color:#E8A21A;box-shadow:0 0 0 6px rgba(255,217,90,.6),0 0 40px 10px rgba(255,217,90,.8);transform:translateY(-4px)}
.carving:hover svg{filter:drop-shadow(0 0 6px #FFD95A)}
.carving:hover::after{opacity:1;transform:translateX(-50%)}

/* ---------- MYSTERY (sticky side-scroll) ---------- */
.mystery{position:relative;height:2600px;background:#F7D893}
.m-stage{position:sticky;top:10px;height:calc(100vh - 20px);max-height:780px;overflow:hidden;background:var(--sky)}
.m-world{position:absolute;left:0;top:0;bottom:0;width:200%;will-change:transform}
.m-mid-art{position:absolute;inset:0}
.m-ground{top:auto;height:16%}
.m-head{position:absolute;left:0;right:0;top:22px;z-index:6;text-align:center;pointer-events:none}
.m-head .h2{font-size:44px}
.m-head .lede{margin-top:8px;display:inline-block;background:#FFFFE1;border:2px solid #000;padding:4px 16px;font-size:19px;box-shadow:4px 4px 0 rgba(0,0,0,.3)}
.statue{position:absolute;left:86%;bottom:12%;width:15%;aspect-ratio:1000/900}
.statue img,.statue-fb{position:absolute;inset:0;width:100%;height:100%}
.statue img{display:none;object-fit:contain}
.statue.has-img img{display:block}.statue.has-img .statue-fb{display:none}
.walker{position:absolute;bottom:12%;width:30%;z-index:5}
.walker .cat-slot{position:relative}
.walker.walking .cat{animation:step .32s ease-in-out}
@keyframes step{50%{transform:translateY(-4%) rotate(1.5deg)}}
.walk-bubble{left:46%;bottom:calc(100% + 18px)}
.prints{position:absolute;inset:0;pointer-events:none;z-index:4}
.print{position:absolute;width:22px;height:22px;fill:rgba(150,95,40,.55);animation:printfade 1.8s ease-out forwards}
@keyframes printfade{from{opacity:1}to{opacity:0}}

/* ---------- EXPLORE ---------- */
#explore .h2{margin-bottom:24px}
.scene{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 26px;border:8px ridge #C9934E;overflow:hidden;background:var(--sky);box-shadow:6px 6px 0 rgba(0,0,0,.3)}
.scene:last-child{margin-bottom:0}
.scene-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.has-img>.scene-img{display:block}
.has-img>.scene-fb,.has-img>.finale-fb{display:none}
.scene-fb,.finale-fb{position:absolute;inset:0}
.scene-fb>svg,.finale-fb>svg{display:block;width:100%;height:100%}
.scene-fb .cat-slot,.finale-fb .cat-slot{z-index:2}
.prop{position:absolute;z-index:1}
.prop>svg{display:block;width:100%;height:100%}
.scene .badge{font-size:56px}
.cap{position:absolute;z-index:4;margin:0;font:bold 26px/1.15 var(--hand);max-width:48%;background:#fff;border:3px solid #000;border-radius:18px;padding:10px 18px 12px;box-shadow:5px 5px 0 rgba(0,0,0,.35)}
.cap::after{content:"";position:absolute;width:18px;height:18px;background:#fff;border:3px solid #000;border-top:0;border-left:0;bottom:-12px;left:34px;transform:rotate(45deg)}
.cap.tl{left:4%;top:6%}.cap.tr{right:4%;top:6%}.cap.bl{left:4%;bottom:7%}
.cap.tr::after{left:auto;right:34px}
.cap.bl::after{bottom:auto;top:-12px;transform:rotate(225deg)}
.reveal{opacity:0;transform:translateY(50px);transition:opacity .7s,transform .8s cubic-bezier(.2,1.3,.4,1)}
.scene.reveal:nth-of-type(odd){transform:translateX(-80px)}
.scene.reveal:nth-of-type(even){transform:translateX(80px)}
.h2.reveal{transform:scale(.4) rotate(-6deg)}
.reveal.in{opacity:1;transform:none}

/* ---------- MOODS ---------- */
.moods{padding-bottom:80px}
.faces{position:relative;display:flex;justify-content:center;gap:16px;margin-top:70px}
.face{position:relative;width:136px;text-align:center}
.disc{position:relative;width:136px;height:136px;overflow:hidden;background:#BDE5FC;border:5px ridge #C9934E;transition:transform .3s cubic-bezier(.3,1.8,.5,1)}
.disc>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.face.has-img .disc>img{display:block}.face.has-img .face-fb{display:none}
.face-fb{position:absolute;inset:0}
.face-fb .cat-slot{width:140%;left:-50%;top:2%}
.face-fb .badge{font-size:36px!important;-webkit-text-stroke-width:3px}
.face:hover .disc{animation:faceBounce .5s cubic-bezier(.3,1.8,.5,1) forwards}
@keyframes faceBounce{30%{transform:translateY(-16px) scale(1.06,.94)}100%{transform:translateY(-10px) rotate(-3deg)}}
.face-name{display:block;margin-top:10px;font:bold 15px var(--sys);color:var(--navy)}
.face .say{left:50%;bottom:calc(100% + 14px);margin-left:-34px;font-size:18px}
.face:hover .say,.face.pointed .say{opacity:1;transform:none}
.pointer{position:absolute;top:calc(100% + 14px);left:0;width:48px;height:44px;margin-left:-24px;transition:left .45s cubic-bezier(.3,1.5,.5,1);
  background:var(--stone);border:4px solid var(--brown);clip-path:polygon(50% 0,100% 60%,72% 60%,72% 100%,28% 100%,28% 60%,0 60%)}

/* ---------- FINALE ---------- */
.finale{position:relative;height:580px;overflow:hidden;background:#FFB067}
.finale-words{position:relative;z-index:3;text-align:center;padding-top:34px}
.h2.big{font-size:62px}
.finale .ticker{margin-top:14px}
.finale .tagline{font-size:24px;color:#fff;-webkit-text-stroke:4px #000;paint-order:stroke fill;margin-top:14px}
.finale .ca-box{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px inset #a0a0a0;padding:4px 10px;font:bold 15px var(--sys)}
.finale .ca-box .ca{border:0;padding:0}
.btns{position:relative;display:flex;justify-content:center;gap:10px;margin-top:14px}
.finale .copy-bubble{margin-left:-160px}

/* ---------- FOOTER ---------- */
.foot{position:relative;text-align:center;padding:0 0 6px;overflow:hidden}
.walkaway{position:relative;height:160px;margin:0 auto}
.walk-cat{position:absolute;bottom:16px;left:0;width:180px;animation:walkaway 12s linear infinite;transform-origin:50% 100%}
.walk-cat>img{display:none;width:100%}
.foot.has-img .walk-cat>img{display:block}.foot.has-img .walk-fb{display:none}
.walk-fb img{display:block;width:100%;animation:step .4s ease-in-out infinite}
@keyframes walkaway{0%{left:0;transform:scale(1);opacity:0}6%{opacity:1}85%{opacity:1}100%{left:80%;transform:scale(.35);opacity:0}}
.trail{position:absolute;inset:0}
.trail svg{position:absolute;width:22px;height:22px;fill:rgba(120,72,30,.5);opacity:0;animation:trailpaw 12s linear infinite}
@keyframes trailpaw{0%{opacity:0}2%{opacity:1}60%{opacity:1}70%,100%{opacity:0}}
.bye{font:bold 34px var(--hand);margin:4px 0 12px;color:var(--navy)}
.badges{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.b88{display:flex;width:88px;height:31px;border:1px solid #000;font:bold 10px/1 var(--sys);overflow:hidden;box-shadow:2px 2px 0 rgba(0,0,0,.3)}
.b88 b,.b88 small{display:grid;place-items:center;flex:1;font-size:10px}
.b-a b{background:#F7A9AE}.b-a small{background:#000;color:#FFE600}
.b-b b{background:var(--navy);color:#fff}.b-b small{background:#FFE24A}
.b-c b{background:#0a0;color:#fff}.b-c small{background:#fff}
.b-d b{background:#c0c0c0;font-size:9px}.b-d small{background:#fff;font-family:'Courier New',monospace}
.fine{font:13px var(--sys);margin:2px 0;color:#5a4a3a}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}