:root{--paper:#f8f5e9;--ink:#263e31;--muted:#657060;--gold:#bc8c2d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:"Avenir Next",Avenir,system-ui,sans-serif;-webkit-font-smoothing:antialiased}main{max-width:760px;margin:auto;padding:45px 24px 24px}header{text-align:center}h1{font-family:Georgia,serif;font-size:clamp(32px,6vw,49px);font-weight:400;letter-spacing:-1.6px;margin:0 0 16px}h1 span{color:var(--gold)}header p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.playground{position:relative;height:360px;max-width:520px;margin:24px auto 22px;touch-action:pan-y;isolation:isolate}#cat{position:absolute;left:8%;bottom:11%;width:74%;height:auto;user-select:none;pointer-events:none;transform-origin:50% 90%;transition:transform .65s cubic-bezier(.2,.8,.2,1);z-index:2}.cat-shadow{position:absolute;width:52%;height:16%;bottom:9%;left:9%;background:#44544724;border-radius:50%;filter:blur(12px);transform:rotate(-14deg);z-index:0}#ball{position:absolute;left:80%;top:81%;width:48px;height:48px;padding:13px;background:transparent;border:0;cursor:pointer;z-index:3;transition:transform .8s cubic-bezier(.22,1,.36,1);border-radius:50%;touch-action:manipulation}#ball span{display:block;width:22px;height:22px;border-radius:50%;background:conic-gradient(from 25deg,#e9ba4e,#b67d22,#d4a233,#f5d576,#c58f24,#e9ba4e);box-shadow:-5px 8px 7px #35402d35,inset 2px 2px 3px #fff5c080}#ball:hover span{filter:brightness(1.1)}#ball:focus-visible,.project:focus-visible{outline:2px solid var(--gold);outline-offset:5px}.hint{position:absolute;right:2%;bottom:0;font-family:Georgia,serif;font-style:italic;font-size:12px;color:#7b806d;transition:opacity .4s}.playground.touched .hint{opacity:0}.project{display:flex;align-items:center;gap:19px;color:inherit;text-decoration:none;padding:23px 8px;border-top:1px solid #d7dbcb;border-bottom:1px solid #d7dbcb;max-width:500px;margin:auto;transition:padding .2s,background .2s}.project:hover{padding-left:17px;background:#efefdf}.sun{color:#c79531;font-size:38px;line-height:1}.project strong{font-family:Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.5px}.project small{display:block;font-size:12px;color:var(--muted);margin-top:5px}.arrow{margin-left:auto;font-size:25px;font-weight:300}footer{text-align:center;font-family:Georgia,serif;font-style:italic;color:#7b806d;font-size:12px;margin:29px 0 0}@media(min-width:600px){main{padding-top:52px}.playground{height:415px;margin-top:29px;margin-bottom:23px}header p{font-size:15px}}@media(max-width:360px){main{padding-left:18px;padding-right:18px}.playground{height:310px}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){#cat,#ball,.hint,.project{transition:none}}

.project small{line-height:1.65;margin-top:8px;font-size:13px;max-width:360px}.project .sun,.project .arrow{flex-shrink:0}

#cat-motion{position:absolute;left:5.64%;bottom:8.64%;width:78.72%;aspect-ratio:1;pointer-events:none;z-index:2}.motion-toggle{position:absolute;bottom:-6px;left:8%;border:0;background:transparent;color:#697461;font-family:inherit;font-size:16px;min-width:44px;min-height:44px;padding:8px;cursor:pointer}.motion-toggle:hover{text-decoration:underline}.motion-toggle:focus-visible{outline:2px solid var(--gold)}[hidden]{display:none!important}

.original-ball{position:absolute;left:82.5%;top:84%;width:25px;height:25px;border-radius:50%;background-image:url('/assets/curious-cat.png');background-size:2322.22%;background-position:75.2% 87.3%;mix-blend-mode:multiply;box-shadow:-7px 7px 6px #35402d30;z-index:3;pointer-events:none}
.cat-shadow{left:8%;bottom:9%;width:74%;height:auto;aspect-ratio:1;border-radius:0;background:#34453c;opacity:.22;mask:url('/assets/cat-cutout.png') center/contain no-repeat;-webkit-mask:url('/assets/cat-cutout.png') center/contain no-repeat;filter:blur(4px);transform-origin:50% 100%;transform:skewX(55deg) scaleY(.24)}

h1 em{font-weight:400}.cat-shadow{background:none;mask:none;-webkit-mask:none;filter:blur(7px);opacity:.24}.cat-shadow::before{content:"";position:absolute;inset:0;background:#34453c;mask:url('/assets/cat-cutout.png') center/contain no-repeat;-webkit-mask:url('/assets/cat-cutout.png') center/contain no-repeat}
.cat-shadow{left:11%;bottom:10%;width:62%;height:12%;aspect-ratio:auto;border-radius:50%;background:#34453c;opacity:.23;mask:none;-webkit-mask:none;filter:blur(13px);transform:rotate(-8deg);transform-origin:center}.cat-shadow::before{display:none}.original-ball{left:73%;top:84%}

.cat-shadow{transform:rotate(8deg)}