.ap-panel{--ap-wood-top:#e6c9a0;--ap-wood-front:#c9a273;--ap-wood-side:#a77e52;--ap-edge:#6e5236;--ap-hole:#3a2a1c;--ap-carpet-top:#8fa89a;--ap-carpet-front:#728c7e;--ap-carpet-side:#5a7266;--ap-join-top:#e8a15c;--ap-join-front:#cf8440;--ap-join-side:#ae6a2c;--ap-sisal-top:#eadbb2;--ap-sisal-front:#d4bf8a;--ap-sisal-side:#a99260;--ap-grout:#fff;--ap-ribbon:#e8b93a;--ap-wrap:var(--ap-sisal-side);--ap-wrap-w:.35;--ap-ground:color-mix(in srgb, var(--ink) 8%, transparent);z-index:50;background:var(--bg);width:min(22rem,100vw - 2rem);color:var(--ink);border:1px solid var(--line);pointer-events:none;border-radius:.75rem;gap:.5rem;padding:.875rem 1rem 1rem;animation:.18s ease-out ap-in;display:grid;position:fixed;box-shadow:0 18px 48px #0000002e}.ap-panel[hidden]{display:none}.ap-panel.pinned{pointer-events:auto}.ap-panel.centered{width:min(26rem,100vw - 2rem);height:fit-content;max-height:calc(100vh - 2rem);margin:auto;inset:0!important}.ap-head,.ap-foot{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.ap-head span{font-size:1rem;font-weight:600}.ap-close,.ap-replay{cursor:pointer;color:var(--muted);border:1px solid var(--line);background:0 0;font-family:inherit}.ap-close{border-radius:50%;width:2rem;height:2rem;font-size:1.125rem;line-height:1}.ap-replay{border-radius:999px;padding:.3rem .875rem;font-size:.875rem}.ap-close:hover,.ap-replay:hover{color:var(--ink);border-color:var(--ink)}.ap-close:focus-visible,.ap-replay:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.ap-panel:not(.pinned) .ap-close,.ap-panel:not(.pinned) .ap-replay{visibility:hidden}.ap-stage{width:100%;height:auto;max-height:48vh;display:block}.ap-step{min-height:1.4em;font-size:1rem;font-weight:600}.ap-step small{letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-right:.5rem;font-size:.75rem;font-weight:400}.ap-dots{gap:.3rem;display:flex}.ap-dots i{background:var(--line);border-radius:2px;flex:1;height:4px;transition:background-color .3s}.ap-dots i.on{background:var(--ap-join-front)}.ap-backdrop{z-index:49;background:#00000059;position:fixed;inset:0}.ap-backdrop[hidden]{display:none}@keyframes ap-in{0%{opacity:0}}@media (prefers-reduced-motion:reduce){.ap-panel{animation:none}}:root{--bg:#f5f6f8;--ink:#16181d;--muted:#6b7180;--line:#d9dce3;--accent:#2b3be0;--accent-ink:#fff;--fur1:#f0a35e;--fur2:#b9bfcc;--fur3:#3b4050;--yarn:#e8607f;--box:#d9b68c;--shadow:#16181d14}@media (prefers-color-scheme:dark){:root{--bg:#14161b;--ink:#eceef3;--muted:#9298a8;--line:#2c303a;--accent:#7d89ff;--accent-ink:#10121a;--fur1:#d98c48;--fur2:#8d93a3;--fur3:#5a6178;--yarn:#d9556f;--box:#a98a66;--shadow:#ffffff0f}}*,:before,:after{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--ink);place-items:center;padding:2rem 1.5rem min(30vh,260px);font-family:Bricolage Grotesque,system-ui,-apple-system,Segoe UI,sans-serif;font-size:1.125rem;line-height:1.5;display:grid}main{z-index:1;width:100%;max-width:32rem;position:relative}.screen[hidden]{display:none}h1,h2{letter-spacing:-.02em;outline:none;margin:0 0 .75rem;font-weight:600;line-height:1.1}h1{font-size:clamp(2.5rem,8vw,3.75rem)}h2{margin-bottom:1.75rem;font-size:clamp(1.75rem,5vw,2.25rem)}p{color:var(--muted);margin:0 0 2rem}.btn,.option{font:inherit;cursor:pointer;border-radius:.5rem;transition:background-color .15s,border-color .15s,color .15s}.btn{background:var(--accent);color:var(--accent-ink);border:0;padding:.75rem 2rem;font-weight:600}.btn:hover{filter:brightness(1.1)}.btn:disabled{opacity:.6;cursor:progress}.btn-quiet{color:var(--muted);background:0 0;padding-inline:1rem}.btn-quiet:hover{color:var(--ink);filter:none}.input{font:inherit;width:100%;color:var(--ink);border:1px solid var(--line);background:0 0;border-radius:.5rem;padding:.875rem 1.125rem}.input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-color:var(--accent)}.nav{justify-content:space-between;align-items:center;margin-top:1.5rem;display:flex}.option.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent)}.actions{align-items:center;gap:.5rem;margin-top:1.25rem;display:flex}.error{color:#d6404f;margin:.625rem 0 0;font-size:1rem}.error[hidden]{display:none}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.options{gap:.625rem;display:grid}.option{text-align:left;background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:.875rem 1.125rem}.option:hover{border-color:var(--accent)}.option-row{display:grid;position:relative}.option-row .option{padding-right:3.5rem}.option-info{border:1px solid var(--line);background:var(--bg);width:2rem;height:2rem;color:var(--muted);cursor:pointer;border-radius:50%;place-items:center;font-family:inherit;font-size:.9375rem;font-weight:600;line-height:1;display:grid;position:absolute;top:50%;right:.625rem;transform:translateY(-50%)}.option-info:hover,.option-info[aria-expanded=true]{color:var(--accent);border-color:var(--accent)}.option-info:focus-visible,.btn:focus-visible,.option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.progress{background:0 0;height:3px;position:fixed;inset:0 0 auto}.progress span{background:var(--accent);width:0;height:100%;transition:width .3s;display:block}.scene{pointer-events:none;z-index:0;height:min(38vh,340px);position:fixed;inset:auto 0 0;overflow:hidden}.scene svg{width:max(100%,760px);height:100%;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.scene .ln{stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;stroke-linecap:round}.scene .fur{fill:var(--fur)}.scene .yarn{fill:var(--yarn)}.scene .box{fill:var(--box)}.scene .tape{fill:#ffffff47}.scene .shadow{fill:var(--shadow)}.scene .ear-in,.scene .nose{fill:#f4a6b5}.scene .eye{fill:var(--eye,var(--ink))}.scene .mouth{fill:none;stroke:var(--ink);stroke-width:2px;stroke-linecap:round}.scene .tail-ink{fill:none;stroke:var(--ink);stroke-width:17px;stroke-linecap:round}.scene .tail-fur{fill:none;stroke:var(--fur);stroke-width:11px;stroke-linecap:round}.scene .wing-a{fill:#7aa2ff;stroke:var(--ink);stroke-width:2px}.scene .wing-b{fill:#ffd166;stroke:var(--ink);stroke-width:2px}.scene .bug-body{fill:var(--ink)}.scene .tail1{transform-origin:38px -14px;animation:2.6s ease-in-out infinite swish}.scene .tail2{transform-origin:-44px -42px;animation:1.8s ease-in-out infinite swish}.scene .paw1{transform-origin:14px -68px;animation:2.6s ease-in-out infinite swat}.scene .tilt1{transform-origin:0 26px;animation:5s ease-in-out infinite tilt}.scene .tilt2{transform-origin:0 26px;animation:4s ease-in-out infinite reverse tilt}.scene .fly{animation:5s ease-in-out infinite flutter}.scene .wings{animation:.35s ease-in-out infinite alternate flap}.scene .wiggle{transform-origin:80px -8px;animation:.6s ease-in-out infinite alternate wiggle}.scene .ball{animation:4s ease-in-out infinite roll}.scene .peek{animation:6s ease-in-out infinite peek}.scene .paw3{transform-origin:30px -60px;animation:6s ease-in-out infinite wave}@keyframes swish{0%,to{transform:rotate(-9deg)}50%{transform:rotate(11deg)}}@keyframes swat{0%,55%,to{transform:rotate(6deg)}70%{transform:rotate(-22deg)}82%{transform:rotate(4deg)}90%{transform:rotate(-14deg)}}@keyframes tilt{0%,to{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}@keyframes flutter{0%,to{transform:translate(0)}25%{transform:translate(34px,-36px)}50%{transform:translate(-6px,-64px)}75%{transform:translate(-30px,-26px)}}@keyframes flap{0%{transform:scaleX(1)}to{transform:scaleX(.3)}}@keyframes wiggle{0%{transform:rotate(-2.5deg)}to{transform:rotate(2.5deg)}}@keyframes roll{0%,to{transform:translate(0)rotate(0)}50%{transform:translate(110px)rotate(360deg)}}@keyframes peek{0%,30%{transform:translateY(8px)}42%,72%{transform:translateY(-14px)}86%,to{transform:translateY(8px)}}@keyframes wave{0%,35%,86%,to{transform:translateY(46px)rotate(0)}50%{transform:translateY(0)rotate(-8deg)}60%{transform:translateY(0)rotate(10deg)}70%{transform:translateY(0)rotate(-8deg)}}@media (width<=640px){.scene{height:min(24vh,190px)}.scene svg{width:100%}.scene svg>g:nth-child(2){transform:translate(320px,380px)}.scene svg>g:nth-child(3){transform:translate(600px,380px)}.scene svg>g:nth-child(4){transform:translate(880px,380px)}}@media (prefers-reduced-motion:reduce){.scene *{animation:none!important}*{transition:none!important}}
