
:root{color-scheme:light;--plum:#4d1839;--plum-deep:#301527;--cream:#fffaf0;--muted:#806f78;--gold:#ad681c;--line:#e5d9ce;--body:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 5%,#743a50 0,transparent 50%),radial-gradient(ellipse at 90% 80%,#573329 0,transparent 55%),#291421;color:var(--plum);font-family:var(--body);min-height:100vh}button,input,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.65}button svg{height:22px;width:22px;flex-shrink:0}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--serif);font-weight:400}h1{font-size:clamp(27px,3vw,38px);letter-spacing:-1.2px;line-height:1.12;margin-bottom:12px}h2{font-size:24px}h3{font-size:21px;margin:26px 0 10px}button,input,select,summary,a{outline-offset:4px}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #ad681c}button{border:0}input,select{border:1px solid #c5b4b8;border-radius:12px;background:#fffdf7;color:var(--plum);padding:13px 14px;min-height:48px;max-width:100%}input[type=checkbox]{accent-color:var(--plum);width:22px;height:22px;min-height:22px}label{display:block;font-size:14px;font-weight:550;line-height:1.6}label input:not([type=checkbox]),label select{display:block;width:100%;margin:6px 0 14px}form>.primary{margin-top:18px}strong{font-weight:600}.skip{position:fixed;top:-100px;background:var(--cream);z-index:99;color:var(--plum);padding:12px}.skip:focus{top:10px}.desktop-heading{max-width:1150px;display:flex;justify-content:space-between;color:#dcc4c6;margin:27px auto 17px;font-size:12px;letter-spacing:.6px;padding:0 4px}.preview-tag{font:10px var(--body);letter-spacing:2px;opacity:.8}.shell{max-width:1160px;min-height:640px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr;overflow:hidden;border-radius:28px;background:var(--cream);box-shadow:0 30px 90px #13050e55;border:1px solid #e1c3b942}.scene{position:relative;overflow:hidden;min-height:640px;background:#483622;isolation:isolate}.backdrop{width:100%;height:100%;position:absolute;object-fit:cover;object-position:47% center;z-index:-3;transition:filter 2s}.scene-shade{position:absolute;inset:0;z-index:-2;background:linear-gradient(#291a2070,transparent 30%,transparent 80%,#2914216b)}.scene-header{position:absolute;top:24px;left:26px;right:22px;display:flex;align-items:center;justify-content:space-between;z-index:4;color:#fff7e5}.brand{display:inline-flex;gap:9px;align-items:center;font:32px var(--serif);letter-spacing:-1px}.brand img{width:38px;height:38px;border-radius:50%;background:transparent}.icon-button{display:grid;place-items:center;background:transparent;color:inherit;border-radius:50%;width:46px;height:46px}.scene-header .icon-button{background:#32182250;backdrop-filter:blur(8px);border:1px solid #fff2c42e}.scene-label{position:absolute;top:95px;left:29px;color:#fff3dc;font:italic 16px var(--serif);text-shadow:0 2px 12px #2c1328}.scene-caption{position:absolute;bottom:27px;left:20px;right:20px;text-align:center;color:#fff2dc;font:italic 17px var(--serif);text-shadow:0 1px 12px #251322}.actor{position:absolute;bottom:20%;left:50%;width:32%;height:30%;transform:translateX(-50%);transition:left 7s ease-in-out,bottom 7s ease-in-out}.dragon-wrap{position:relative;width:100%;height:100%;z-index:2;transform-origin:50% 100%;animation:breathe 7s ease-in-out infinite}.dragon{width:100%;height:100%;object-fit:contain;object-position:center bottom;display:block;filter:drop-shadow(0 4px 2px #34171425)}.actor-shadow{position:absolute;bottom:0;left:17%;right:10%;height:6%;border-radius:50%;background:#3c190854;filter:blur(4px)}.dragon-pin{position:absolute;left:52%;top:63%;color:#ffd265;font-size:23px;text-shadow:0 1px 3px #703521}.scene[data-mood=resting] .dragon-wrap{animation-duration:11s;filter:saturate(.88) brightness(.94)}.scene[data-mood=curious] .dragon-wrap{animation:curious 12s ease-in-out infinite}.scene[data-mood=happy] .dragon{filter:drop-shadow(0 0 18px #ffd78599)}.celebrate{animation:celebrate 1.3s ease-in-out 2!important}.dust{opacity:0;pointer-events:none;position:absolute;left:7%;right:7%;bottom:16%;color:#ddc8a3;font-size:30px;display:flex;justify-content:space-around;transition:opacity 2s;z-index:1}.dust span{padding-top:20px}.return-scene .dust{opacity:.65}.return-scene .backdrop{filter:saturate(.83)}.panel{display:flex;flex-direction:column}.panel-inner{padding:44px 32px 24px;flex:1}.eyebrow{font:600 10px var(--body);letter-spacing:1.8px;color:#92735d;margin:0 0 13px}.intro{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:23px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.tasks{display:grid;gap:10px;margin:25px 0 24px}.task{display:flex;align-items:center;gap:13px;background:#fcf8f3;border:1px solid var(--line);border-radius:15px;padding:13px 14px;min-height:94px}.task.vital{background:#fcf3df;border-color:#e8c783}.task-icon{width:42px;height:42px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;background:#81596e;color:#fffaf0}.task-icon svg{width:25px;height:25px}.vital .task-icon{background:#b37227}.task-copy{flex:1;min-width:0}.task-copy strong{display:block;font-size:14px;line-height:1.45}.tier{display:block;font:19px var(--serif);margin-bottom:3px}.vital .tier{color:#995c18}.partial-button{background:transparent;color:#816273;padding:8px 0 2px;text-decoration:underline;text-underline-offset:3px;font-size:11px;min-height:30px}.partial-label{display:block;font-size:11px;color:#7a7662;margin-top:6px}.check-button{width:36px;height:36px;border:1.5px solid #a27a8c;border-radius:50%;background:transparent;color:var(--plum);flex-shrink:0;display:grid;place-items:center}.vital .check-button{border-color:#b47a33}.done .check-button{background:#6d5d46;color:white;border-color:#6d5d46;opacity:1}.done{background:#f0eee3!important}.primary{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:16px 20px;min-height:52px;border-radius:30px;color:var(--cream);background:var(--plum);font:19px var(--serif);transition:background .2s,transform .2s}.primary:hover{background:#6b294f;transform:translateY(-1px)}.secondary{background:#f5ebdf;color:var(--plum);border:1px solid #d7c1c6;border-radius:12px;padding:12px 17px;min-height:46px}.text-button{color:var(--plum);background:transparent;padding:13px;min-height:44px;font-size:14px}.text-button.small{font-size:12px;padding:10px;min-width:44px}.quiet{font-size:11px;line-height:1.6;color:var(--muted);text-align:center;margin:14px 0 0}.bottom-nav{display:flex;border-top:1px solid var(--line);padding:10px 24px 13px;margin-top:auto;background:#fffaf6}.nav-item{flex:1;display:flex;align-items:center;flex-direction:column;gap:5px;background:transparent;color:#927386;font-size:11px;min-height:51px;padding:7px;border-radius:8px}.nav-item svg{height:22px;width:22px}.nav-item[aria-current=page]{color:var(--plum);font-weight:700}.nav-item[aria-current=page] svg{stroke-width:2.5}#save-note{font-size:11px;color:#d0b9c0;text-align:center;margin:18px auto 22px;line-height:1.6;padding:0 20px;max-width:700px}.return-panel{text-align:center;padding-top:70px}.return-panel h1{font-size:37px}.return-task{display:flex;align-items:center;gap:15px;background:#fcf3df;border:1px solid #e8c783;padding:22px 18px;border-radius:16px;text-align:left;margin:36px 0 24px}.return-task>svg{width:42px;height:42px;color:#ad681c}.return-task small{display:block;color:#9c631f;font:20px var(--serif);margin-bottom:6px}.return-task strong{font-size:15px}.return-panel>.text-button{margin-top:14px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:17px 0;margin:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats strong{display:block;font:28px var(--serif);color:#995c18}.stats span{font-size:10px;color:var(--muted);line-height:1.4}.milestone{background:#f5eddf;padding:20px;border-radius:15px}.milestone>span{display:flex;align-items:center;gap:7px;font:20px var(--serif)}.milestone svg{width:19px;height:19px;color:var(--gold)}.milestone p,.accessory p{font-size:12px;line-height:1.6;color:var(--muted);margin:12px 0}progress{width:100%;height:7px;accent-color:#b78039;border-radius:9px;overflow:hidden}progress::-webkit-progress-bar{background:#e5d6c5}progress::-webkit-progress-value{background:#b78039}.palette{display:flex;flex-wrap:wrap;gap:6px;margin-top:17px}.swatch{border:1px solid #af8e9d;border-radius:20px;padding:10px 12px;background:#fffaf4;text-transform:capitalize;font-size:12px}.swatch[aria-pressed=true]{outline:2px solid var(--plum);outline-offset:1px}.accessory{display:flex;align-items:center;gap:12px;justify-content:space-between;margin-top:24px}.accessory strong{font:19px var(--serif)}.accessory p{margin:5px 0}.accessory button{font-size:12px;flex-shrink:0}.focus-shell{display:block;position:relative;margin:24px auto 0;max-width:1100px;height:calc(100svh - 85px);min-height:600px}.focus-scene{height:100%;min-height:600px}.focus-scene .backdrop{object-position:center center}.scene-switch{position:absolute;top:26px;left:50%;transform:translateX(-50%);display:flex;border:1px solid #f2d4ad8c;border-radius:30px;padding:4px;background:#4b233f9c;backdrop-filter:blur(10px);z-index:5}.scene-switch button{background:transparent;border-radius:24px;color:#fff5e4;padding:10px 27px;min-height:42px;font:17px var(--serif)}.scene-switch button[aria-pressed=true]{background:var(--cream);color:var(--plum)}.focus-scene .actor{height:25%;width:25%;bottom:30%;left:47%}.focus-scene[data-activity=potter] .actor{left:66%;bottom:35%}.focus-scene[data-activity=rest] .actor{left:38%;bottom:32%}.focus-scene .scene-caption{bottom:225px}.care-glow{position:absolute;inset:35% 10% 20%;background:radial-gradient(ellipse,#ffeac1,transparent 65%);opacity:var(--care,0);pointer-events:none;mix-blend-mode:soft-light;transition:opacity 5s}.focus-panel{position:absolute;bottom:0;width:100%;padding:28px 24px 20px;background:#fffaf0f2;backdrop-filter:blur(15px);border-radius:28px 28px 0 0;text-align:center;z-index:5}.focus-panel .eyebrow{margin-bottom:9px}.focus-panel h1{font-size:32px}.focus-panel .primary{max-width:340px;margin:18px auto 9px}.focus-bottom{display:flex;align-items:center;justify-content:center;gap:20px;color:var(--muted);font-size:11px}.subtle-button{background:transparent;border:1px solid #ccb7be;color:#78566b;border-radius:20px;padding:8px 13px;min-height:36px;font-size:11px}.onboarding{max-width:1120px;margin:auto;min-height:100svh;color:var(--cream);display:flex;flex-direction:column}.onboarding>header{display:flex;justify-content:space-between;align-items:center;padding:30px 25px}.onboard-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;flex:1;padding:20px 38px 25px}.egg-stage{height:520px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}.egg-stage .egg{width:75%;height:75%;object-fit:contain;z-index:2;filter:drop-shadow(0 0 30px #e9bb6f45);animation:egg-breathe 6s ease-in-out infinite}.egg-stage p{font:italic 20px/1.5 var(--serif);text-align:center;color:#e1bd8e;position:relative;margin:18px 0}.halo{position:absolute;inset:10% 0;background:radial-gradient(ellipse,#a8794145 0,transparent 65%);border-radius:50%}.spark{position:absolute;color:#f6cb80;font-size:22px;animation:twinkle 5s ease-in-out infinite}.s1{top:15%;left:10%}.s2{right:7%;top:45%;animation-delay:2s}.s3{bottom:23%;left:15%;font-size:13px;animation-delay:3s}.onboard-copy h1{font-size:clamp(36px,4vw,51px);letter-spacing:-1.5px;line-height:1.12;margin-bottom:22px}.onboard-copy .eyebrow{color:#d2a66d;font-size:10px;letter-spacing:2px}.onboard-copy .intro{color:#deccd0;font-size:16px}.onboard-copy h2{font-size:22px;margin:30px 0 17px}.choices{display:grid;gap:10px}.choice{display:flex;align-items:center;justify-content:space-between;text-align:left;gap:12px;border:1px solid #cba08b66;color:#fff2df;background:#fff4e608;min-height:57px;border-radius:13px;padding:15px 19px;font-size:14px}.choice:hover{background:#fff4e618;border-color:#e4b378}.onboarding .text-button{color:#e8c6a7}.onboarding label{color:#e8c6a7;margin-top:20px}.onboarding input{width:100%;background:#fffaf1;color:var(--plum)}.onboarding .primary{background:#ebc48d;color:#381b2e;margin-top:22px}.input-row{display:flex;gap:8px;margin-top:8px}.input-row input{min-width:0}.input-row button{background:#eac18b;flex-shrink:0}.hatched{max-height:400px;max-width:400px}.optional{display:flex!important;align-items:center;gap:16px;border:1px solid #cba08b55;padding:16px 18px;border-radius:13px;margin:10px 0!important;color:#fff2df!important}.optional input{width:21px}.optional span{font-size:13px;font-weight:400;line-height:1.6}.optional strong{display:block;font:20px var(--serif);margin-bottom:4px}dialog{border:1px solid #dfcbd1;border-radius:24px;background:var(--cream);color:var(--plum);padding:27px;width:min(480px,calc(100% - 28px));max-height:85svh;box-shadow:0 30px 100px #190e1a66}dialog::backdrop{background:#2b142bbb;backdrop-filter:blur(5px)}.modal-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px}.modal-heading h2{margin:0;line-height:1.2}.modal-heading button{flex-shrink:0}.setting{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:18px 0}.setting select{width:auto;margin:0}.hint{font-size:12px;line-height:1.7;color:var(--muted)}.wide{width:100%}.backup-actions{display:flex;gap:10px;flex-wrap:wrap}.file-label{display:flex;align-items:center;padding:12px;border:1px solid #d7c1c6;border-radius:12px;font-weight:400;cursor:pointer}.file-label input{width:1px!important;height:1px;opacity:0;position:absolute}.file-label:focus-within{outline:3px solid var(--gold)}details{border-top:1px solid var(--line);margin:24px 0 20px;padding-top:20px}summary{cursor:pointer;min-height:35px;font-size:13px}.edit-task{display:grid;grid-template-columns:1fr 130px;gap:12px;border-bottom:1px solid var(--line);margin-bottom:16px}.result-star{text-align:center;color:var(--gold);font-size:60px;padding:10px}.result-time{text-align:center;font:30px var(--serif)}dialog .result-time+.intro{text-align:center}#notice{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:100;background:#fff8e9;color:var(--plum);border:1px solid #d9b891;border-radius:16px;box-shadow:0 8px 35px #210d2966;padding:15px 22px;max-width:calc(100% - 32px);width:max-content;font-size:13px;transition:.3s;line-height:1.6}#notice.show{opacity:1;transform:translate(-50%,0)}.error{font-size:12px;color:#924224}
@keyframes breathe{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.015,1.025)}}@keyframes egg-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}@keyframes curious{0%,65%,100%{transform:rotate(0)}75%,90%{transform:rotate(-4deg)}}@keyframes celebrate{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-12px) rotate(-4deg)}70%{transform:translateY(-3px) rotate(3deg)}}@keyframes twinkle{0%,100%{opacity:.3}50%{opacity:1}}
@media(min-width:1400px){.desktop-heading{margin-top:5vh}.shell{min-height:690px}.scene{min-height:690px}.panel-inner{padding-top:52px}}
@media(max-width:850px){.desktop-heading{max-width:540px;margin:15px auto}.shell{max-width:540px;display:flex;flex-direction:column;margin:0 auto;min-height:0;border-radius:25px}.scene{height:410px;min-height:0}.backdrop{object-position:center 58%}.scene-header{top:19px;left:23px;right:19px}.brand{font-size:29px}.scene-label{top:83px;left:25px;font-size:14px}.scene-caption{font-size:14px;bottom:33px}.actor{height:32%;width:35%;bottom:18%;left:52%}.panel{position:relative;margin-top:-20px;border-radius:25px 25px 0 0;background:var(--cream);z-index:5}.panel-inner{padding:26px 24px 22px}.panel h1{font-size:30px}.tasks{margin:20px 0}.task{min-height:86px;padding:11px 13px}.bottom-nav{padding-bottom:max(10px,env(safe-area-inset-bottom))}.intro{margin-bottom:14px}.return-panel{padding-top:36px}.return-task{margin-top:24px}.focus-shell{height:calc(100svh - 40px);min-height:650px;margin:0 auto;border-radius:0;max-width:650px}.focus-scene{height:100%;min-height:650px}.focus-scene .backdrop{object-position:52% center}.scene-switch{top:81px}.scene-switch button{padding:8px 25px;font-size:15px}.focus-scene .actor{width:34%;height:26%;bottom:34%}.focus-scene[data-activity=potter] .actor{left:62%;bottom:37%}.focus-scene[data-activity=rest] .actor{left:38%;bottom:34%}.focus-panel h1{font-size:29px}.focus-panel{padding:24px 22px 20px}.focus-scene .scene-caption{bottom:230px;font-size:13px}.focusing #save-note{margin:10px auto}.onboard-layout{gap:24px;padding:10px 28px}.onboard-copy h1{font-size:38px}.egg-stage{height:420px}.onboarding>header{padding:24px}.onboarding .preview-tag{font-size:9px}}
@media(max-width:580px){.desktop-heading{display:none}.shell{border:0;border-radius:0;max-width:100%}.scene{height:43svh;min-height:290px;max-height:430px}.panel-inner{padding:25px 22px 20px}.eyebrow{font-size:9px;letter-spacing:1.5px}.panel h1{font-size:29px;letter-spacing:-1px}.brand{font-size:28px}.brand img{height:32px;width:32px}.task-copy strong{font-size:13px}.tier{font-size:18px}.task{gap:11px}.task-icon{width:38px;height:38px}.check-button{width:36px;height:36px}.bottom-nav{padding-top:8px}.quiet{font-size:10px}.onboarding>header{padding:20px 23px 0}.onboard-layout{display:flex;flex-direction:column;gap:0;align-items:stretch;padding:0 27px 15px}.egg-stage{height:32svh;min-height:230px;max-height:320px;margin:5px 0 12px}.egg-stage .egg{width:65%;height:88%}.egg-stage p{font-size:14px;margin:0;position:absolute;bottom:0;right:0;text-align:right;max-width:110px}.hatched{max-height:260px;max-width:270px;margin:auto}.onboard-copy h1{font-size:36px;margin-bottom:15px}.onboard-copy .intro{font-size:14px;margin-bottom:19px}.onboard-copy h2{font-size:21px;margin:20px 0 13px}.onboard-copy .eyebrow{font-size:9px}.choice{min-height:52px;padding:13px 16px;font-size:13px}.choices{gap:9px}.onboarding #save-note{font-size:10px;margin-top:14px}.spark.s1{left:17%}.spark.s2{right:15%}.focus-shell{height:100svh;min-height:620px}.focus-scene{height:100%;max-height:none;min-height:620px}.focus-panel{padding-bottom:max(18px,env(safe-area-inset-bottom))}.focus-scene .actor{height:25%;width:35%}.focus-panel .eyebrow{font-size:9px}.focus-panel h1{font-size:29px}.focusing #save-note{display:none}.edit-task{grid-template-columns:1fr;gap:0}.edit-task label select{margin-top:2px}.result-time{font-size:27px}dialog{padding:22px}.stats span{font-size:9px}.return-panel h1{font-size:31px}}
.reduce-motion *{animation:none!important;transition:none!important}.reduce-motion .focus-scene .actor{left:50%!important;bottom:34%!important}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.focus-scene .actor{left:50%!important;bottom:34%!important}}

.check-button{width:44px;height:44px}.partial-button{min-height:44px;padding-top:9px;padding-bottom:8px}

/* Shared art is split into two complementary jagged shell pieces. */
.hatch-dialog{width:min(540px,calc(100% - 24px));padding:32px 24px 20px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 55%,#744537,#351829 72%);color:#fff4df;border-color:#b98f6855}
.hatch-dialog::backdrop{background:#261221dd;backdrop-filter:blur(12px)}
.hatch-dialog h2{font-size:28px;line-height:1.2;margin-bottom:10px}.hatch-dialog .eyebrow{color:#e1ba81}.hatch-stage{position:relative;width:min(320px,65vw);aspect-ratio:1;margin:18px auto;isolation:isolate}
.hatch-warmth{position:absolute;inset:4%;border-radius:50%;background:radial-gradient(ellipse,#f8d89c50,transparent 68%);opacity:.45}
.hatch-shells{position:absolute;inset:0;transform-origin:50% 88%;z-index:2}.shell-piece{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 10px #f2cf7e33)}
.shell-top{clip-path:polygon(0 0,100% 0,100% 52%,85% 52%,76% 47%,68% 54%,59% 48%,51% 55%,43% 47%,35% 53%,27% 46%,16% 52%,0 52%)}
.shell-bottom{clip-path:polygon(0 52%,16% 52%,27% 46%,35% 53%,43% 47%,51% 55%,59% 48%,68% 54%,76% 47%,85% 52%,100% 52%,100% 100%,0 100%)}
.shell-cracks{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.shell-cracks path{stroke-dasharray:1;stroke-dashoffset:1;stroke-linecap:round;stroke-linejoin:round}.crack-edge{stroke:#784f39;stroke-width:1.15}.crack-light{stroke:#ffe6a2;stroke-width:.45}
.hatch-friend{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateY(15px) scale(.85);z-index:1}.hatch-caption{min-height:24px;color:#e7ccb0;font:italic 17px var(--serif);margin:14px 0 4px}.hatch-mote{position:absolute;color:#f6d495;opacity:0;z-index:3}.mote-one{left:12%;top:30%;font-size:22px}.mote-two{right:9%;top:48%;font-size:29px}.mote-three{right:25%;top:11%;font-size:15px}
.playing .hatch-shells{animation:shell-wiggle 1.65s ease-in-out both}.playing .shell-cracks path{animation:crack-grow .9s .6s ease-out forwards}.playing .shell-cracks{animation:crack-fade .35s 1.55s forwards}.playing .shell-top{animation:shell-open-top 1.7s 1.5s cubic-bezier(.25,.6,.3,1) forwards}.playing .shell-bottom{animation:shell-open-bottom 1.7s 1.5s cubic-bezier(.25,.6,.3,1) forwards}.playing .hatch-friend{animation:friend-hello 1.7s 1.5s cubic-bezier(.22,.61,.36,1) forwards}.playing .hatch-warmth{animation:hatch-glow 3.4s ease-in-out both}.playing .hatch-mote{animation:hatch-mote 1.8s 1.8s ease-out both}
@keyframes shell-wiggle{0%,15%,100%{transform:rotate(0)}35%{transform:rotate(-2deg)}58%{transform:rotate(2.5deg)}80%{transform:rotate(-1.5deg)}}
@keyframes crack-grow{to{stroke-dashoffset:0}}@keyframes crack-fade{to{opacity:0}}
@keyframes shell-open-top{0%{transform:translate(0,0) rotate(0);opacity:1}55%{opacity:1}100%{transform:translate(-30px,-58px) rotate(-16deg);opacity:0}}
@keyframes shell-open-bottom{0%{transform:translate(0,0) rotate(0);opacity:1}55%{opacity:1}100%{transform:translate(20px,40px) rotate(9deg);opacity:0}}
@keyframes friend-hello{0%{opacity:0;transform:translateY(24px) scale(.92)}18%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hatch-glow{0%{opacity:.45;transform:scale(.95)}100%{opacity:1;transform:scale(1.1)}}@keyframes hatch-mote{0%{opacity:0;transform:translateY(8px)}35%{opacity:.8}100%{opacity:0;transform:translateY(-18px)}}
.hatch-reduced .hatch-shells{display:none}.hatch-reduced .hatch-friend{opacity:1;transform:none}.hatch-reduced *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.hatch-dialog .hatch-shells{display:none}.hatch-dialog .hatch-friend{opacity:1;transform:none}}
@media(max-width:580px){.hatch-dialog{padding:26px 18px 14px}.hatch-dialog h2{font-size:25px}.hatch-stage{margin:20px auto}.hatch-caption{font-size:15px}}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}
.hatch-gesture{position:absolute;inset:0;transform-origin:50% 85%;will-change:transform}.hatch-dragon{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.hiccup-fire{position:absolute;left:59%;top:29%;width:23%;height:auto;opacity:0;transform-origin:0 60%;filter:drop-shadow(0 0 5px #f3b85066)}
.playing .hatch-gesture{animation:hello-sway 1.8s 3.1s ease-in-out, tiny-hiccup .7s 5s ease-in-out}.playing .hiccup-fire{animation:little-fire 1.15s 5.25s cubic-bezier(.2,.65,.35,1) both}
@keyframes hello-sway{0%,100%{transform:rotate(0)}30%{transform:rotate(-.8deg)}65%{transform:rotate(.5deg)}}
@keyframes tiny-hiccup{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(2px) scale(1.008,.992)}60%{transform:translateY(-2px) scale(.998,1.005)}}
@keyframes little-fire{0%{opacity:0;transform:scale(.12)}20%{opacity:.9;transform:scale(.6)}55%{opacity:.8;transform:translateX(8px) scale(.9)}100%{opacity:0;transform:translateX(26px) scale(.6)}}
.hatch-reduced .hiccup-fire{display:none}@media(prefers-reduced-motion:reduce){.hatch-dialog .hiccup-fire{display:none}}
.hatch-dialog{opacity:1;transition:opacity .22s ease-out}.hatch-dialog::backdrop{transition:opacity .22s ease-out}.hatch-dialog.leaving,.hatch-dialog.leaving::backdrop{opacity:0}.hatch-dialog h2{position:relative;z-index:4;opacity:0}.playing h2{animation:hello-title .6s 2.6s ease-out forwards}@keyframes hello-title{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.hatch-reduced h2{opacity:1}@media(prefers-reduced-motion:reduce){.hatch-dialog h2{opacity:1}}
