:root{color-scheme:dark;--space:#04070d;--ink:#f4f1eb;--muted:#a8afbd;--gold:#edc78f;--line:#ffffff24;--panel:#121824;--font:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html,body{margin:0;min-width:320px;background:var(--space);font-family:var(--font);color:var(--ink)}body{overflow-x:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:6px}button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button:disabled{cursor:default}a{color:inherit}button{touch-action:manipulation}
.universe{min-height:720px;height:100svh;position:relative;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 60% 50%,#101a292e,transparent 62%),var(--space)}#stars{position:absolute;inset:0;width:100%;height:100%;z-index:-2}.nebula{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 57% 43%,#29394a15,transparent 47%),radial-gradient(ellipse at 85% 10%,#47516b0a,transparent 55%)}
.header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:30px 4.2%;z-index:10}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;font-size:18px;font-weight:600;letter-spacing:1.5px}.brand-icon{width:40px;height:40px;color:var(--gold)}.brand-note{display:block;font-size:10px;font-weight:400;letter-spacing:2px;color:var(--muted);margin-top:6px}.header-actions{display:flex;align-items:center;gap:24px}.text-button{display:flex;gap:9px;align-items:center;background:transparent;font-size:12px;letter-spacing:1px;min-height:44px;padding:0 4px;color:#d2d5dc}.icon-button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:#ffffff04;display:grid;place-items:center;color:#c6cbd5}.text-button:hover,.reset-button:hover{color:var(--gold)}.icon-button:hover{border-color:#edc78f80;color:var(--gold)}
.top-note{position:absolute;top:132px;left:50%;transform:translateX(-50%);color:#b3bbca;font-size:11px;letter-spacing:2px;white-space:nowrap;display:flex;gap:9px;align-items:center}.top-note>span{display:block;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 12px #edc78f70}
.scene{position:absolute;left:56%;top:46.5%;width:min(77vw,890px);aspect-ratio:1.21;transform:translate(-50%,-50%);user-select:none}.scene-motion{position:absolute;inset:0;transform-origin:50% 50%}.earth-shell{position:absolute;left:0;top:11%;width:77%;aspect-ratio:1;transform:rotate(-16deg);pointer-events:none}#earth{position:absolute;inset:0;width:100%;height:100%;display:block}.earth-fallback{position:absolute;inset:5%;border-radius:50%;background:#12304a url('./assets/earth-day.jpg') center/cover;box-shadow:inset -45px -15px 60px #000c,inset 4px 0 15px #9fc6ed66,0 0 35px #7baee423;opacity:0}.earth-fallback.visible{opacity:1}.cat-float{position:absolute;left:54%;top:17%;width:47%;transform-origin:30% 55%;z-index:3}.cat-button{display:block;width:100%;padding:0;background:none;position:relative;outline-offset:-24px}.cat{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none;filter:drop-shadow(-6px 8px 12px #0005)}.cat-button:focus-visible{border-radius:45%}.cat-button:active{cursor:grabbing}.orbit-line{position:absolute;left:-3%;top:47%;width:96%;height:18%;border:1px solid #b1cbed1c;border-left-color:#b1cbed07;border-radius:50%;transform:rotate(-25deg);pointer-events:none;z-index:-1}.sparkle{position:absolute;color:#dbedff;pointer-events:none;line-height:1;text-shadow:0 0 18px #abcfff66}.sparkle-one{left:2%;top:38%;font-size:25px}.sparkle-two{right:2%;top:65%;font-size:38px;color:#d5c6aa;opacity:.75}
.caption{position:absolute;left:5.4%;bottom:157px;pointer-events:none;z-index:4;text-shadow:0 2px 28px #04070d}.caption-note{font-size:11px;letter-spacing:2px;color:var(--gold);margin:0 0 18px}.caption h1{font-size:clamp(35px,3.6vw,53px);font-weight:500;letter-spacing:5px;line-height:1.55;margin:0 0 13px}.subtitle{font-size:12px;line-height:1.8;color:var(--muted);letter-spacing:1px;margin:0}.cat-note{position:absolute;right:5.8%;bottom:184px;display:flex;align-items:center;flex-direction:column;gap:5px;transform:rotate(-7deg);color:#aeb7c6;font-size:11px;letter-spacing:1.5px;pointer-events:none}.cat-note svg{width:70px;height:42px;transform:rotate(4deg);margin-right:50px}
.bottom-bar{position:absolute;left:4.2%;right:4.2%;bottom:35px;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:8}.bottom-note{display:flex;align-items:center;gap:8px;color:#9ba6b7;font-size:10px;letter-spacing:1.5px;width:210px}.status-dot{width:4px;height:4px;background:#95bcaf;border-radius:50%}.controls{display:flex;align-items:center;gap:17px;padding:9px 15px;border:1px solid #ffffff26;background:#111722ec;border-radius:100px;box-shadow:0 10px 35px #0003}.play-button{background:var(--gold);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:#24211e}.play-button svg{width:16px;height:16px;stroke-width:2.2}.play-button .play-icon{display:none;fill:currentColor;stroke-width:1}.paused .play-button .pause-icon{display:none}.paused .play-button .play-icon{display:block;margin-left:2px}.control-divider{height:19px;width:1px;background:var(--line)}.speed-control{display:flex;align-items:center;gap:5px}.control-label{font-size:11px;color:var(--muted);margin-right:8px;white-space:nowrap}.speed{min-width:43px;height:38px;padding:0 9px;border-radius:22px;background:transparent;color:#9da7b8;font-size:11px}.speed:hover{color:var(--ink);background:#ffffff08}.speed.selected{background:#2b3240;color:var(--ink)}.star-toggle{background:transparent;display:flex;align-items:center;gap:7px;font-size:11px;white-space:nowrap;min-height:42px;padding:0 6px;color:var(--gold)}.star-toggle svg{width:17px;height:17px}.star-toggle[aria-pressed=false]{color:#9da7b8}.reset-button{width:210px;min-height:44px;display:flex;align-items:center;justify-content:flex-end;gap:8px;background:transparent;font-size:10px;letter-spacing:1px;color:#9ba6b7}.reset-button svg{width:14px;height:14px}
.exit-immersive{position:absolute;right:25px;top:25px;padding:9px 16px;min-height:44px;background:#121824d9;border:1px solid var(--line);border-radius:25px;align-items:center;gap:8px;font-size:12px;z-index:12}.exit-immersive:not([hidden]){display:flex}.immersive .chrome{opacity:0;visibility:hidden;pointer-events:none}.immersive .scene{left:50%;width:min(91vw,1030px);top:50%}.chrome{transition:opacity .25s,visibility .25s}.toast{position:absolute;left:50%;bottom:120px;transform:translate(-50%,8px);background:#1b2230e8;border:1px solid var(--line);color:var(--ink);padding:12px 22px;border-radius:30px;font-size:12px;letter-spacing:1px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:14;white-space:nowrap}.toast.show{opacity:1;transform:translate(-50%,0)}.pet-effects{position:absolute;inset:0;pointer-events:none;z-index:5}.heart{position:absolute;width:17px;height:17px;fill:#edc78f;transform:translate(-50%,-50%);animation:heart-float 1.4s ease-out both}.heart:nth-child(2){animation-delay:.12s}.heart:nth-child(3){animation-delay:.24s}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:15;font-size:12px;letter-spacing:2px;padding:16px 23px;border-radius:25px;background:#121824ee;border:1px solid var(--line);white-space:nowrap;display:flex;align-items:center;gap:10px}.loading span{display:block;border:1px solid #c9c1af40;border-top-color:var(--gold);width:13px;height:13px;border-radius:50%;animation:spin 1s linear infinite}.loading[hidden]{display:none}.noscript{position:absolute;inset:45% 10% auto;text-align:center;color:var(--gold)}
dialog{background:#141c29;color:var(--ink);width:min(90vw,430px);padding:40px 34px 28px;border:1px solid #ffffff26;border-radius:22px;box-shadow:0 25px 90px #0009}dialog::backdrop{background:#02050cca}dialog h2{font-size:21px;font-weight:500;letter-spacing:1px;margin:19px 0}dialog p{font-size:13px;line-height:2;color:#b9c2d1}.dialog-paw{width:35px;height:35px;fill:var(--gold)}.close-dialog{position:absolute;right:15px;top:15px;width:34px;height:34px}.credits{font-size:10px!important;color:#9ca8bc!important;border-top:1px solid var(--line);padding-top:15px;margin-top:23px}.credits a{text-underline-offset:3px}.close-dialog svg{width:16px;height:16px}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes heart-float{0%{opacity:0;transform:translate(-50%,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-90px) scale(1.3)}}
@media(min-width:1600px){.scene{width:min(74vw,1040px)}.caption{bottom:190px}.bottom-bar{bottom:45px}.cat-note{bottom:225px}}
@media(max-width:1050px){.scene{left:53%;width:91vw;max-width:820px}.caption{bottom:160px}.caption h1{font-size:36px;letter-spacing:3px}.cat-note{bottom:172px;right:5%}.bottom-note,.reset-button{width:140px;font-size:9px}.controls{gap:12px}}
@media(max-width:700px){.universe{min-height:720px;height:100svh}.header{padding:22px 6%}.brand{font-size:15px;gap:10px}.brand-icon{width:32px;height:32px}.brand-note{font-size:9px;letter-spacing:1px;margin-top:5px}.header-actions{gap:11px}.info-button{width:38px;height:38px}.text-button{min-width:40px;justify-content:center}.text-button span{display:none}.top-note{top:113px;font-size:10px;letter-spacing:1px}.scene{width:113vw;max-width:650px;left:46.5%;top:41%;}.cat-float{left:55%;width:46%;top:16%}.caption{left:7%;bottom:156px}.caption-note{font-size:9px;letter-spacing:1.3px;margin-bottom:11px}.caption h1{font-size:30px;letter-spacing:3px;line-height:1.45;margin-bottom:10px}.subtitle{font-size:10px;letter-spacing:.4px}.cat-note{right:7%;bottom:220px;font-size:9px;letter-spacing:.2px}.cat-note svg{width:48px;height:30px;margin-right:20px}.bottom-bar{left:6%;right:6%;bottom:max(24px,env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center;gap:12px}.controls{order:0;gap:12px;padding:7px 12px;max-width:100%}.bottom-note{order:1;width:auto;margin:0;font-size:8px;flex:1;letter-spacing:.8px}.reset-button{order:2;width:auto;min-height:30px;font-size:8px}.play-button{width:38px;height:38px}.speed{min-width:38px;height:37px;padding:0 6px}.control-label{font-size:10px;margin-right:4px}.star-toggle{font-size:10px;padding:0 2px}.control-divider{height:16px}.toast{bottom:135px;font-size:11px}.immersive .scene{width:119vw;left:46.5%}.immersive .exit-immersive{top:20px;right:20px}.orbit-line{width:90%}.sparkle-two{right:3%}}
@media(max-width:380px){.controls{gap:9px}.control-label{display:none}.caption h1{font-size:28px}.cat-note{font-size:8px;right:4%}.scene{top:41%}}
@media(max-height:650px) and (min-width:701px){.universe{min-height:580px}.header{padding-top:20px}.top-note{top:95px}.scene{width:660px;top:47%}.caption{bottom:125px}.caption h1{font-size:32px}.cat-note{bottom:130px}.bottom-bar{bottom:23px}}
@media(prefers-reduced-motion:reduce){.chrome,.toast{transition:none}.heart{animation:none;display:none}.loading span{animation:none}}


/* A single connected cat image preserves natural anatomy during short kicks. */
.cat-button{aspect-ratio:1402/1122}
.cat-natural-image{position:relative;display:block;width:100%;height:auto;filter:none;mask:none}
.cat-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.natural-cat-ready .cat-natural-image{opacity:0}
.natural-cat-ready .cat-canvas{opacity:1}
.cat-rear-hit{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;cursor:grab;touch-action:manipulation}
.cat-tail-hit{clip-path:polygon(57% 92%,68% 84%,80% 82%,86% 75%,88% 63%,92% 65%,96% 76%,96% 84%,92% 92%,82% 98%,68% 100%,57% 98%)}
.cat-rump-hit{clip-path:polygon(71% 63%,75% 56%,82% 57%,88% 62%,92% 70%,92% 79%,87% 85%,79% 87%,73% 81%,70% 72%)}
.cat-rear-hit>svg{display:block;width:100%;height:100%;fill:none;stroke:transparent;stroke-width:4;pointer-events:none}
.cat-rear-hit polygon{vector-effect:non-scaling-stroke}
#catTailHit:focus-visible,#catRumpHit:focus-visible{outline:none;background:#d7b7ff26}
#catTailHit:focus-visible>svg,#catRumpHit:focus-visible>svg{stroke:#e2caff}
.cat-rear-hit:active{cursor:grabbing}
.toast.toast--tail{border-color:#d7b7ffcc;background:#221c31f0;color:#f3eaff;box-shadow:0 5px 22px #10091a33}
.toast.toast--tail.show{animation:tail-bubble-in 260ms cubic-bezier(.2,.65,.3,1) both}
@keyframes tail-bubble-in{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.toast.toast--tail{transform:translate(-50%,0);transition:opacity .15s}.toast.toast--tail.show{animation:none}}
@media(forced-colors:active){#catTailHit:focus-visible>svg,#catRumpHit:focus-visible>svg{stroke:Highlight}.toast.toast--tail{border-color:Highlight;color:CanvasText;background:Canvas}}
.bunny-mode .scene{width:min(94vw,calc((100svh - 180px)*1.65),1000px);left:44%;top:50%;aspect-ratio:1.45}
.bunny-mode .earth-shell{left:41.75%;top:46.5%;width:26%;z-index:3}
.bunny-mode .cat-float,.bunny-mode .cat-foreground{left:31%;top:5%;width:78%;transform-origin:55% 55%}
.bunny-mode .cat-float{z-index:2}
.bunny-mode .caption{width:1px;height:1px;clip-path:inset(50%);overflow:hidden;white-space:nowrap}
.bunny-mode .cat-note{display:none}
.bunny-mode .orbit-line{display:none}
.bunny-mode .top-note{left:5.4%;top:120px;transform:none;font-size:16px;color:var(--ink);letter-spacing:2px}
.bunny-mode .top-note>span{display:none}
.bunny-mode .sparkle-one{left:14%;top:55%;font-size:20px}
.bunny-mode .sparkle-two{right:0%;top:82%;font-size:22px}
.bunny-mode .immersive .scene{width:min(98vw,calc((100svh - 80px)*1.6),1120px);left:44%;top:48%}
@media(max-width:1050px){
 .bunny-mode .scene{width:min(104vw,calc((100svh - 160px)*1.6));left:42%;top:48%}
 .bunny-mode .cat-float,.bunny-mode .cat-foreground{left:31%;width:78%;top:5%}
}
@media(max-width:700px){
 .bunny-mode .scene{width:124vw;left:40%;top:43%;aspect-ratio:1.2}
 .bunny-mode .earth-shell{left:39.75%;top:46.6%;width:26%}
 .bunny-mode .cat-float,.bunny-mode .cat-foreground{left:29%;top:12%;width:78%}
 .bunny-mode .top-note{left:50%;top:121px;transform:translateX(-50%);font-size:14px;letter-spacing:1px}
 .bunny-mode .bottom-bar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .bunny-mode .controls{grid-column:1/-1;justify-self:center;width:max-content}
 .bunny-mode .bottom-note{grid-column:1;grid-row:2}
 .bunny-mode .reset-button{grid-column:2;grid-row:2;justify-self:end}
 .bunny-mode .immersive .scene{width:130vw;left:39%;top:44%}
}
@media(max-height:650px) and (min-width:701px){
 .bunny-mode .scene{width:min(95vw,calc((100svh - 145px)*1.65));top:52%}
 .bunny-mode .top-note{top:90px}
}

.cat-foreground{position:absolute;aspect-ratio:1402/1122;z-index:4;pointer-events:none}
.cat-foreground-fallback{display:block;width:100%;height:auto;mask-image:url(./assets/cat-paws-mask.png);mask-mode:luminance;mask-size:100% 100%;mask-repeat:no-repeat}
.cat-front-canvas{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.cat-lap-ready .cat-foreground-fallback{visibility:hidden}
.cat-lap-ready .cat-front-canvas{opacity:1}