:root{--bg:#faf9f6;--fg:#181916;--line:#d7d8cf;--muted:#74786c;--panel:#efefe7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--fg);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}a{color:inherit;text-decoration:none}header{display:flex;justify-content:space-between;align-items:center;padding:28px 5%;border-bottom:1px solid var(--line)}header>a{font-size:32px;letter-spacing:-2px;font-weight:700}header span{font-size:9px;font-weight:400;letter-spacing:1.5px;margin-left:20px}main{padding:50px 5%;max-width:1500px;margin:auto}h1{font-size:clamp(45px,6vw,85px);letter-spacing:-4px;margin:0 0 20px;font-weight:500}.intro{max-width:650px;line-height:1.8;font-size:15px}.mouse-note{display:flex;gap:25px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);margin:30px 0}.mouse-note p{font-size:12px;line-height:1.8;color:var(--muted);max-width:450px}.mouse-note strong{color:var(--fg);font-weight:500}#rat-colors{display:flex;gap:12px}.rat-swatch{text-align:center;font-size:9px;color:var(--muted)}.rat-swatch svg{display:block;width:90px;height:54px;margin-bottom:6px}nav{display:flex;gap:30px;font-size:10px;letter-spacing:1px;margin:28px 0}.saved{font-size:12px;color:var(--muted);min-height:20px}section{padding:35px 0;border-bottom:1px solid var(--line)}h2{font-size:30px;font-weight:500;letter-spacing:-1px}.section-note{font-size:12px;color:var(--muted)}fieldset{border:0;padding:0;margin:20px 0}legend{font-size:0}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.choice{display:flex;flex-direction:column;position:relative;border:1px solid var(--line);padding:16px;cursor:pointer;gap:8px;min-width:0}.choice:has(input:checked){border:2px solid var(--fg);padding:15px;background:var(--panel)}.choice input{position:absolute;right:12px;top:14px;accent-color:var(--fg)}.number{font-size:10px;letter-spacing:1px;color:var(--muted)}.creature-preview{display:block;width:144px;height:108px;max-width:100%;margin:8px auto;overflow:visible}.creature-preview svg{width:100%;height:100%;image-rendering:pixelated;shape-rendering:crispEdges}.choice strong{font-size:15px;font-weight:500}.choice small{font-size:10px;color:var(--muted);line-height:1.6;min-height:32px}.choice .try{font-size:9px;letter-spacing:1px;border-top:1px solid var(--line);padding-top:10px;margin-top:auto}.demo .creature-preview{animation:leap .5s steps(5,end)}.demo .cat-jaw,.demo .snake-jaw{animation:chomp .5s steps(3,end)}.snake-tongue{opacity:0}.demo .snake-tongue{opacity:1}.mouse-tail{animation:wiggle .65s steps(2,end) infinite}@keyframes wiggle{0%,100%{transform:translateY(-1px)}50%{transform:translateY(1px)}}@keyframes leap{40%{transform:translate(-18px,-12px)}70%{transform:translate(-28px,0)}}@keyframes chomp{35%{transform:translateY(3px)}70%{transform:translateY(0)}}footer{display:flex;justify-content:space-between;gap:30px;padding:35px 0;font-size:10px;line-height:1.8;color:var(--muted)}footer p{max-width:650px;margin:0}footer a{color:var(--fg);white-space:nowrap}a:focus-visible,input:focus-visible{outline:2px solid var(--fg);outline-offset:5px}@media(max-width:1000px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:650px){header>span{display:none}header>a span{font-size:8px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}main{padding-top:32px}.mouse-note{flex-direction:column;align-items:start;gap:10px}nav{gap:18px;font-size:8px}.creature-preview{width:120px;height:90px}.choice{padding:12px}.choice:has(input:checked){padding:11px}footer{flex-direction:column}h1{letter-spacing:-2px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}
body,button,input,select,textarea,h1,h2,h3,p,span,a,small,strong,legend{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif}body{text-transform:lowercase}button,input,select,textarea{text-transform:inherit}
.own-snake-choice{max-width:310px;margin:25px 0}.own-snake-choice .creature-preview{height:144px}.own-snake-choice:not(.demo) .band-1,.own-snake-choice:not(.demo) .band-3{animation:wiggle 1.2s steps(2,end) infinite}

/* Whole-pose sprite animation: no independently displaced body sections. */
.user-snake-art .slither-frame{opacity:0;animation:whole-slither 1.2s steps(1,end) infinite}
.user-snake-art .frame-0{animation-delay:0.0s}
.user-snake-art .frame-1{animation-delay:0.2s}
.user-snake-art .frame-2{animation-delay:0.4s}
.user-snake-art .frame-3{animation-delay:0.6s}
.user-snake-art .frame-4{animation-delay:0.8s}
.user-snake-art .frame-5{animation-delay:1.0s}
@keyframes whole-slither{0%{opacity:1}16.6667%,100%{opacity:0}}
.user-snake-art .eyes-open{animation:snake-blink 4.8s steps(1,end) infinite}.user-snake-art .eyes-blink{opacity:0;animation:snake-blink-lid 4.8s steps(1,end) infinite}.user-snake-art .snake-brows,.user-snake-art .snake-annoyed,.user-snake-art .snake-bite-mouth,.user-snake-art .snake-mouth{opacity:0}.user-snake-art .user-tongue{animation:tongue-flick 1.8s steps(1,end) infinite;transform-origin:26px 16px}
@keyframes tongue-flick{0%,36%,64%,100%{clip-path:inset(0 0 75% 0)}40%,57%,68%{clip-path:inset(0 0 100% 0)}46%,74%{clip-path:inset(0 0 0 0)}52%,80%{clip-path:inset(0 0 50% 0)}}
@keyframes snake-blink{0%,94%,100%{opacity:1}95%,98%{opacity:0}}@keyframes snake-blink-lid{0%,94%,100%{opacity:0}95%,98%{opacity:1}}
#snake[data-expression=focused] .snake-brows,#snake[data-expression=focused] .snake-mouth,#snake[data-expression=annoyed] .snake-annoyed,#snake[data-expression=annoyed] .snake-mouth{opacity:1}#snake[data-expression=annoyed] .eyes-open{animation:none}#snake.attack .snake-bite-mouth{opacity:1}#snake.attack .snake-mouth{opacity:0}#snake.attack .eyes-open{animation:none}#snake.attack .slither-frame{animation:none;opacity:0}#snake.attack .frame-0{opacity:1}#snake.attack .user-tongue{animation:none;clip-path:inset(0 0 0 0)}
@media(prefers-reduced-motion:reduce){.user-snake-art .slither-frame{animation:none;opacity:0}.user-snake-art .frame-0{opacity:1}.user-snake-art .eyes-open{animation:none;opacity:1}.user-snake-art .eyes-blink{animation:none;opacity:0}.user-snake-art .user-tongue{animation:none;clip-path:inset(0 0 75% 0)}}

.user-cat-art .cat-source-frame{display:none}.user-cat-art .cat-frame-0{display:inline}

.own-cat-choice{max-width:310px;margin:25px 0}.own-cat-choice .creature-preview{height:144px}
.rat-swatch .user-mouse-art{width:64px;height:64px;--mouse-coat:#9c8066}.rat-swatch:nth-child(2) .user-mouse-art{--mouse-coat:#b5b5b5}.rat-swatch:nth-child(3) .user-mouse-art{--mouse-coat:#f0eee5}.user-mouse-art .mouse-tail-pose{display:none}.user-mouse-art .tail-0{display:inline}