*{box-sizing:border-box} :root{color-scheme:dark;--deep:#07150f;--panel:#10271d;--line:#4b7557;--gold:#e8ce7a;--mint:#c9f1c1;--lilac:#d5c7ed} body{margin:0;background:radial-gradient(ellipse at 50% -10%,#294632 0,#101f17 45%,#060d0a 100%);color:#f6f0dc;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.app{max-width:780px;margin:0 auto;padding:22px 14px 36px}.brand{text-align:center;padding:8px 10px 22px}.moon{color:#ffe6a1;font-size:23px;text-shadow:0 0 18px #f5d36d}.eyebrow{letter-spacing:.22em;font-size:10px;color:#d6c78e;margin:7px 0}.brand h1{font:clamp(29px,6vw,43px) Georgia,serif;color:#f5e8b8;margin:7px 0 6px;text-shadow:0 0 24px #6b8d58}.subtitle{margin:0;color:#c0d0ba;font-size:14px}.preview-card,.motion-notes{background:linear-gradient(150deg,rgba(19,43,31,.96),rgba(7,19,13,.98));border:1px solid #46664c;border-radius:24px;overflow:hidden;box-shadow:0 18px 55px #0006}.scene{position:relative;width:100%;aspect-ratio:1.08/1;overflow:hidden;background:#11271a;isolation:isolate}.background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;z-index:0}.scene:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(0deg,rgba(4,14,9,.64),transparent 42%,rgba(5,14,9,.12))}.character{position:absolute;z-index:3;left:50%;bottom:9%;width:min(58%,330px);height:75%;transform:translateX(-50%);display:flex;align-items:flex-end;justify-content:center;cursor:pointer;touch-action:manipulation;filter:drop-shadow(0 8px 22px #07180e88);outline:none}.character svg{width:100%;height:100%;overflow:visible}.character:focus-visible{outline:2px solid var(--gold);outline-offset:5px;border-radius:18px}.scene.is-egg .character{width:min(37%,235px);height:63%;bottom:11%}.scene.is-hatchling .character{width:min(57%,330px);height:70%;bottom:8%}.scene.is-young .character{width:min(65%,390px);height:81%;bottom:5%}.scene.is-adult .character{width:min(75%,450px);height:88%;bottom:2%}.tap-hint{position:absolute;z-index:4;bottom:15px;left:0;right:0;text-align:center;color:#f9e9b7;font-size:12px;text-shadow:0 2px 5px #000}.pet-info{text-align:center;padding:18px 20px 8px}.stage-kicker{font-size:10px;letter-spacing:.2em;color:#d7c47e}.pet-info h2{font:clamp(25px,5vw,34px) Georgia,serif;margin:7px 0;color:#f5e8bf}.pet-info p{color:#c7d6c2;margin:0 auto;max-width:430px;font-size:14px}.stage-controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:18px 14px}.stage-button{border:1px solid #45694d;border-radius:13px;background:#0a1c13;color:#c9d8c3;padding:11px 4px;font-size:12px;min-height:66px;cursor:pointer;touch-action:manipulation}.stage-button span{display:block;font-size:20px;margin-bottom:4px}.stage-button.active{border-color:#f0d98c;color:#fff1bd;background:linear-gradient(145deg,#35533a,#132c1e);box-shadow:0 0 18px #d7c77d2b}.interaction-row{padding:0 16px 20px;text-align:center}.primary{border:1px solid #ead486;border-radius:999px;background:linear-gradient(135deg,#e4d28d,#9abf81);color:#142819;padding:12px 22px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 0 20px #c6d78c20}.interaction-row p{font-size:12px;color:#b8cbb4;margin:10px 0 0}.motion-notes{margin-top:16px;padding:20px}.motion-notes h3{font:22px Georgia,serif;color:#f1e2aa;margin:0 0 14px}.motion-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.motion-grid div{border:1px solid #36543e;border-radius:12px;padding:12px;background:#0a1b12}.motion-grid b{display:block;color:#e5d69b;font-size:13px;margin-bottom:5px}.motion-grid span{display:block;font-size:12px;color:#c0d1bb;line-height:1.4}.note{font-size:11px;color:#9db39a;line-height:1.5;margin:16px 0 0}footer{text-align:center;color:#82977f;font-size:11px;padding:22px 6px 0}
/* Independent rig animation: scene and background never transform. */
#egg-shell{transform-box:fill-box;transform-origin:50% 85%;animation:eggPulse 3.2s ease-in-out infinite}
.scene.is-egg .character{animation:eggIdle 4s ease-in-out infinite}
#body{transform-box:fill-box;transform-origin:50% 45%;animation:breath 3.3s ease-in-out infinite}
#head{transform-box:view-box;transform-origin:211px 200px;animation:headTilt 7s ease-in-out infinite}
#wing-left{transform-box:view-box;transform-origin:160px 235px;animation:wingLeft 4.5s ease-in-out infinite}
#wing-right{transform-box:view-box;transform-origin:254px 235px;animation:wingRight 4.5s ease-in-out infinite}
#tail{transform-box:view-box;transform-origin:210px 345px;animation:tailSway 3.7s ease-in-out infinite}
#eyelids{animation:blink 5.4s infinite;transform-box:fill-box;transform-origin:center;pointer-events:none}
#eyelids path{opacity:1}
@keyframes eggPulse{0%,100%{filter:drop-shadow(0 0 2px #eaffc8)}50%{filter:drop-shadow(0 0 15px #d9ff9c)}}
@keyframes eggIdle{0%,100%{transform:translateX(-50%) rotate(0)}30%{transform:translateX(-50%) rotate(-1.2deg)}70%{transform:translateX(-50%) rotate(1deg)}}
@keyframes breath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,1.025)}}
@keyframes headTilt{0%,78%,100%{transform:rotate(0)}83%{transform:rotate(-3deg)}90%{transform:rotate(2deg)}}
@keyframes wingLeft{0%,100%{transform:rotate(0)}40%{transform:rotate(-5deg)}55%{transform:rotate(1deg)}}
@keyframes wingRight{0%,100%{transform:rotate(0)}40%{transform:rotate(5deg)}55%{transform:rotate(-1deg)}}
@keyframes tailSway{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(6deg)}}
@keyframes blink{0%,44%,48%,75%,79%,100%{transform:scaleY(0)}46%,77%{transform:scaleY(1)}}
.scene.pet-tap .character #egg-shell{animation:eggShake .7s ease-in-out,eggPulse 1s infinite}
.scene.pet-tap .character #body{animation:happyBounce .65s ease-in-out,breath 3.3s ease-in-out infinite}
.scene.pet-tap .character #wing-left{animation:tapWingL .8s ease-in-out,wingLeft 4.5s ease-in-out infinite}
.scene.pet-tap .character #wing-right{animation:tapWingR .8s ease-in-out,wingRight 4.5s ease-in-out infinite}
.scene.pet-tap .character #tail{animation:tapTail .8s ease-in-out,tailSway 3.7s ease-in-out infinite}
.scene.pet-tap .character #head{animation:tapHead .8s ease-in-out,headTilt 7s ease-in-out infinite}
@keyframes eggShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(7deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}}
@keyframes happyBounce{0%,100%{transform:scale(1)}30%{transform:scale(1.06)}60%{transform:scale(.99)}}
@keyframes tapWingL{0%,100%{transform:rotate(0)}35%{transform:rotate(-22deg)}70%{transform:rotate(6deg)}}
@keyframes tapWingR{0%,100%{transform:rotate(0)}35%{transform:rotate(22deg)}70%{transform:rotate(-6deg)}}
@keyframes tapTail{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(15deg)}}
@keyframes tapHead{0%,100%{transform:rotate(0)}35%{transform:rotate(-7deg)}70%{transform:rotate(4deg)}}
.sparkles{position:absolute;inset:0;z-index:5;pointer-events:none}.sparkle{position:absolute;color:#fff2ad;font-size:18px;animation:sparkleUp 1.2s ease-out forwards;text-shadow:0 0 12px #fff4a7}@keyframes sparkleUp{0%{opacity:0;transform:translateY(10px) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translateY(-65px) scale(1.4)}}
@media(max-width:430px){.app{padding:14px 9px 26px}.stage-controls{gap:5px;padding:15px 8px}.stage-button{font-size:11px}.scene{aspect-ratio:.98/1}.motion-notes{padding:15px}.character{bottom:8%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}

/* Approved cute Earthbloom artwork: characters are transparent PNG layers over still backgrounds. */
.character{display:flex;align-items:flex-end;justify-content:center}
.character-art{display:block;max-width:100%;max-height:100%;width:auto;height:100%;object-fit:contain;transform-origin:50% 85%;filter:drop-shadow(0 8px 18px #07180e66);animation:petBreath 3.1s ease-in-out infinite}
.scene.is-egg .character-art{height:100%;animation:eggRock 3.6s ease-in-out infinite,eggGlow 3s ease-in-out infinite}
.scene.is-hatchling .character-art{animation:petBreath 2.8s ease-in-out infinite,petTilt 7s ease-in-out infinite}
.scene.is-young .character-art{animation:petBreath 3.2s ease-in-out infinite,petTilt 8s ease-in-out infinite}
.scene.is-adult .character-art{animation:petBreath 3.8s ease-in-out infinite,petTilt 9s ease-in-out infinite}
.scene.pet-tap .character-art{animation:petTap .85s ease-in-out,petBreath 3s ease-in-out infinite}
@keyframes petBreath{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012,1.018)}}
@keyframes petTilt{0%,82%,100%{rotate:0deg}86%{rotate:-1.5deg}92%{rotate:1.5deg}}
@keyframes eggRock{0%,100%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}}
@keyframes eggGlow{0%,100%{filter:drop-shadow(0 0 5px #baf49a88)}50%{filter:drop-shadow(0 0 18px #e4ffb8)}}
@keyframes petTap{0%,100%{transform:translateY(0) rotate(0) scale(1)}25%{transform:translateY(-6px) rotate(-3deg) scale(1.025)}55%{transform:translateY(1px) rotate(3deg) scale(.99)}80%{transform:translateY(-2px) rotate(-1deg)}}