@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Nunito:wght@500;600;700;800;900&display=swap');
:root{--ink:#313a36;--muted:#88918b;--cream:#fbf8f2;--green:#5e8c71;--line:#eeeae2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:'DM Sans',sans-serif}button{font:inherit;cursor:pointer}.app-shell{display:flex;min-height:100vh}.sidebar{width:232px;flex:none;background:#fffdf9;border-right:1px solid var(--line);padding:32px 18px;display:flex;flex-direction:column}.brand{display:flex;gap:10px;align-items:center;padding:0 15px;color:#445c4d;text-decoration:none;font-family:Nunito,sans-serif;font-weight:900;font-size:21px;line-height:1}.brand small{display:block;color:#a7aaa0;font:600 9px 'DM Sans',sans-serif;letter-spacing:2.2px;text-transform:uppercase;margin-top:6px}.brand-mark{width:32px;height:32px;border-radius:11px;background:#dbeacb;display:grid;place-items:center;color:#648962;font-size:25px}.nav-label{font-size:10px;font-weight:800;letter-spacing:1.8px;color:#b5b9b1;margin:68px 15px 15px}.sidebar nav{display:grid;gap:6px}.nav-link{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:10px;text-decoration:none;color:#8b958c;font-size:19px}.nav-link span{font-size:13px;font-weight:700}.nav-link.active,.nav-link:hover{background:#e9f1e6;color:#64856b}.sidebar-bottom{margin-top:auto;border-radius:17px;background:#edf3e9;padding:18px;color:#526e59}.tip-icon{font-size:25px}.sidebar-bottom p{font-family:Nunito,sans-serif;font-weight:800;font-size:13px;line-height:1.45}.sidebar-bottom small{font-size:9px;font-weight:800;letter-spacing:1.6px;color:#8ba18d}main{width:100%;max-width:1480px;padding:25px 42px 35px;margin:auto}.topbar{display:flex;align-items:center;justify-content:flex-end;gap:20px;color:#959d96;font-size:12px;font-weight:700}.avatar{border:0;background:#ead9c5;color:#7a614d;border-radius:50%;width:34px;height:34px;font-weight:900}.mobile-brand{display:none}.welcome{display:flex;justify-content:space-between;align-items:flex-end;margin:22px 0 27px}.eyebrow{color:#86a68a;font-size:10px;font-weight:900;letter-spacing:2px}.eyebrow span{color:#e1b768}h1,h2,p{margin-top:0}h1,h2{font-family:Nunito,sans-serif}h1{font-size:35px;letter-spacing:-1.5px;margin:10px 0 3px}.wave{color:#e5b86d;font-size:27px}.welcome p{color:#9ba29b;font-size:14px;margin:0}.streak{background:#fff6e8;border:1px solid #f6ead6;border-radius:14px;color:#ae8457;padding:12px 17px;font-size:15px}.streak strong{font-size:12px}.streak span{display:block;font-size:10px;color:#b2a185;margin:4px 0 0 25px}.dashboard{display:grid;grid-template-columns:minmax(330px,0.9fr) minmax(490px,1.35fr);gap:20px}.pet-card,.metrics,.care-card,.journey-card,.next-card{border-radius:20px;border:1px solid var(--line);background:#fff}.pet-card{overflow:hidden;background:#fffdf9}.card-top{height:63px;display:flex;align-items:center;justify-content:space-between;padding:0 23px}.pill{color:#729274;background:#edf5e9;border-radius:20px;padding:7px 12px;font-size:9px;font-weight:900;letter-spacing:1.3px}.online-dot{display:inline-block;width:7px;height:7px;background:#8fbf8a;border-radius:50%;margin-right:5px}.icon-button{border:0;background:none;color:#a1ada0;font-size:20px}.pet-scene{height:272px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fff9dd 0,#f8f3db 40%,#f3efd9 100%);display:flex;align-items:center;justify-content:center}.orbit{position:absolute;border:1px solid rgba(255,255,255,.8);border-radius:50%;width:255px;height:255px}.orbit-two{width:360px;height:360px;opacity:.6}.decor{position:absolute;color:#eac978}.one{top:57px;left:18%;font-size:22px}.two{top:68px;right:17%;font-size:25px}.three{bottom:55px;right:23%;font-size:15px}.flower{position:absolute;color:#ecbca5;font-size:24px;bottom:41px}.flower-one{left:14%}.flower-two{right:14%;font-size:18px}.pet{width:145px;height:174px;background:#ffd77d;border:5px solid #e7ac57;border-radius:49% 51% 46% 46% / 57% 57% 42% 42%;position:relative;z-index:2;box-shadow:inset -13px -14px 0 #f7c567,0 12px 0 rgba(137,110,53,.06);animation:bob 3.6s ease-in-out infinite}.pet-shine{position:absolute;left:29px;top:20px;width:29px;height:48px;border-radius:50%;background:#fff0b2;transform:rotate(29deg)}.eyes{position:absolute;top:94px;left:35px;right:35px;display:flex;justify-content:space-between}.eyes i{width:9px;height:13px;background:#67543e;border-radius:50%}.cheeks{position:absolute;top:113px;left:23px;right:23px;display:flex;justify-content:space-between}.cheeks i{width:19px;height:10px;background:#f4a991;border-radius:50%;opacity:.78}.mouth{position:absolute;top:114px;left:65px;width:11px;height:6px;border-bottom:2px solid #6e5440;border-radius:0 0 50% 50%}@keyframes bob{50%{transform:translateY(-10px) rotate(2deg)}}.pet.sleepy{animation:bob 6s ease-in-out infinite;filter:saturate(.7)}.pet.sleepy .eyes i{height:3px;border-radius:50%;margin-top:7px}.pet-info{text-align:center;padding:23px 35px 27px}.level{color:#a6ad9b;font-size:10px;font-weight:900;letter-spacing:1.6px}.level span{padding:0 5px}.pet-info h2{font-size:25px;margin:8px 0 4px}.pet-info h2 span{color:#e8bd66}.pet-info p{color:#929b91;font-size:12px;line-height:1.55;max-width:310px;margin:0 auto 23px}.xp-row{display:flex;justify-content:space-between;color:#8c988d;font-size:11px;font-weight:700}.xp-row strong{color:#679072}.progress,.mini-track{height:7px;border-radius:10px;background:#edf0e8;overflow:hidden;margin-top:8px}.progress>div{height:100%;border-radius:10px;background:#97bd90;transition:width .5s}.pet-actions{display:flex;gap:9px;margin-top:21px}.pet-actions button{flex:1;border-radius:10px;padding:11px 9px;font-size:11px;font-weight:900}.primary{background:#719879;color:white;border:1px solid #719879}.secondary{background:#f5f7f1;color:#64836d;border:1px solid #e3e9df}.right-column{display:grid;grid-template-rows:auto 1fr;gap:19px}.metrics,.care-card,.journey-card{padding:24px}.section-head,.care-head{display:flex;justify-content:space-between;align-items:center}.section-head h2,.care-head h2{margin:5px 0 0;font-size:20px;letter-spacing:-.5px}.subtle{font-size:9px;color:#b6beb3;letter-spacing:1.5px;font-weight:900}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}.metric{border-radius:14px;padding:16px 15px 14px;min-width:0}.peach{background:#fff2e9}.lavender{background:#f1effa}.mint{background:#ebf5ed}.metric-icon{font-size:19px;color:#e2a878;background:#fff9f5;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;margin-bottom:15px}.lavender .metric-icon{color:#a89cce;background:#f8f7fc}.mint .metric-icon{color:#7fb191;background:#f6fbf7}.metric-name{font-size:11px;font-weight:900;color:#857c74;display:flex;justify-content:space-between}.metric-name span{color:#c4b6a8}.metric-value{display:flex;align-items:baseline;gap:5px;white-space:nowrap;margin:8px 0 14px}.metric-value strong{font:900 22px Nunito,sans-serif;letter-spacing:-1px}.metric-value span{font-size:10px;color:#a99d91}.metric .mini-track{height:6px;background:#f6e0d1}.metric .mini-track i{display:block;height:100%;background:#eeb68f;border-radius:10px;transition:width .4s}.lavender .mini-track{background:#e1dcf1}.lavender .mini-track i{background:#b7a9d6}.mint .mini-track{background:#d7e9db}.mint .mini-track i{background:#91bea0}.metric small{display:block;color:#a9a29b;font-size:9px;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.care-card{padding-bottom:15px}.heart{font-size:21px;color:#eebaa7;background:#fff0eb;border-radius:50%;padding:8px 11px}.care-head{margin-bottom:12px}.care-row{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid #f1f0ea}.care-symbol{width:35px;height:35px;border-radius:10px;display:grid;place-items:center;font-size:20px}.hunger{background:#fff2e5;color:#daa56e}.energy{background:#f2effb;color:#aa9ac6}.happy{background:#edf6e9;color:#8db68c}.care-row div{flex:1}.care-row strong,.care-row small{display:block}.care-row strong{font-size:11px}.care-row small{color:#a6aea4;font-size:10px;margin-top:3px}.care-status{font-size:10px;font-weight:800;color:#80a082;background:#eff7ed;padding:6px 9px;border-radius:7px}.bottom-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:20px;margin-top:20px}.timeline{display:flex;margin-top:28px;justify-content:space-between;position:relative}.timeline:before{content:'';position:absolute;top:15px;left:9%;right:9%;height:2px;background:#e8efe5}.timeline>div{display:flex;align-items:center;flex-direction:column;gap:5px;z-index:1;text-align:center;min-width:78px}.timeline-dot{height:31px;width:31px;border-radius:50%;display:grid;place-items:center;background:#e9f2e4;color:#70a070;font-size:13px;font-weight:900}.timeline-dot.current{background:#78a17c;color:#fff}.timeline-dot.future{background:#f3f4ee;color:#b7c4b3}.timeline strong{font-size:10px;margin-top:5px}.timeline small{font-size:9px;color:#aeb6aa}.next-card{padding:25px;position:relative;background:#f0f4e9;overflow:hidden}.next-icon{position:absolute;right:28px;top:26px;font-size:40px;color:#aac49c}.next-card h2{font-size:20px;margin:15px 0 4px}.next-card p{max-width:250px;color:#8d9b87;font-size:11px;line-height:1.5}.next-card button{border:0;background:none;color:#6b956f;font-weight:900;font-size:11px;padding:0}.next-card button span{margin-left:6px}.demo-note{font-size:10px;color:#a7aea5;margin:18px 0 0}dialog{border:1px solid #e8e7df;border-radius:20px;box-shadow:0 25px 70px #3f584044;max-width:650px;width:calc(100% - 30px);padding:30px;background:#fffdf9;color:var(--ink)}dialog::backdrop{background:#3443398c}dialog h2{font-size:26px;margin:7px 0}dialog p{font-size:12px;color:#929c91;line-height:1.5}.close{position:absolute;right:20px;top:17px;border:0;background:none;font-size:25px;color:#8b998a}.egg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:22px}.egg-tile{text-align:center;border:1px solid #efeee8;border-radius:12px;padding:14px 5px;background:#fff}.egg-shape{width:42px;height:53px;margin:auto auto 9px;border-radius:50% 50% 46% 46% / 57% 57% 43% 43%;background:var(--egg);box-shadow:inset -5px -6px 0 #00000013}.egg-tile strong{display:block;font-size:10px}.egg-tile small{display:block;color:#aab1a8;font-size:8px;margin-top:3px}@media(max-width:1050px){.sidebar{width:190px}.dashboard{grid-template-columns:1fr}.pet-card{display:grid;grid-template-columns:1fr 1fr}.pet-card .card-top{grid-column:1/-1}.pet-scene{height:auto;min-height:300px}.pet-info{align-self:center}.right-column{grid-template-columns:1fr 1fr;grid-template-rows:auto}.metric-grid{grid-template-columns:1fr}.metric{display:grid;grid-template-columns:36px 1fr;column-gap:10px;padding:10px}.metric-icon{grid-row:1/4;margin:0}.metric-value{margin:3px 0}.metric .mini-track,.metric small{grid-column:2}.metric small{margin-top:4px}.care-card{min-width:0}}@media(max-width:760px){.sidebar{display:none}main{padding:16px}.mobile-brand{display:block;margin-right:auto;font-family:Nunito,sans-serif;font-weight:900;font-size:17px;color:#62866d}.welcome{align-items:flex-start;gap:10px}h1{font-size:27px}.streak{padding:9px;font-size:12px}.streak span{display:none}.pet-card{display:block}.pet-scene{height:240px;min-height:0}.right-column{display:block}.care-card{margin-top:18px}.bottom-grid{grid-template-columns:1fr}.metric-grid{grid-template-columns:repeat(3,1fr)}.metric{display:block;padding:11px}.metric-icon{margin-bottom:10px}.metric-value strong{font-size:18px}.metric .mini-track,.metric small{grid-column:auto}.egg-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:430px){.metric-grid{gap:6px}.metric{padding:9px}.metric-value strong{font-size:16px}.metric-name{font-size:9px}.metric small{font-size:8px}.welcome{display:block}.streak{display:inline-block;margin-top:14px}.timeline strong{font-size:8px}.timeline>div{min-width:65px}}
.meal-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.calorie-total{font:900 17px Nunito,sans-serif;color:#6d9875}.calorie-total span{font-size:23px}.meal-intro{color:#9ba69b;font-size:12px;margin:10px 0 20px}.meal-form{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:10px;align-items:end}.meal-form label{font-size:10px;font-weight:800;color:#829187}.meal-form input,.meal-form select,.scan-row input{display:block;width:100%;margin-top:6px;border:1px solid #e5e9df;border-radius:9px;background:#fcfdfb;padding:11px;color:var(--ink);font:inherit;font-size:12px}.meal-form button,.scan-row button,.scan-photo{border-radius:9px;padding:11px 15px;font-size:11px;font-weight:900;white-space:nowrap}.scan-row{display:flex;align-items:center;gap:10px;margin:13px 0}.scan-photo{background:#eef5eb;color:#65866c;cursor:pointer}.scan-row span{color:#aeb6aa;font-size:11px}.scan-row input{max-width:200px;margin:0}.scan-row button{border:1px solid #dfe9dd;background:#fff;color:#65866c}.scan-status{color:#738d78;font-size:11px;margin:0 0 10px}.meal-list{border-top:1px solid #f0f1ed}.meal-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #f0f1ed}.meal-item .care-symbol{flex:none}.meal-item div:nth-child(2){flex:1}.meal-item strong,.meal-item small{display:block}.meal-item strong{font-size:12px}.meal-item small{font-size:10px;color:#a4aea3;margin-top:3px}.meal-item .meal-kcal{font-size:12px;font-weight:900;color:#6d9875}.meal-item button{border:0;background:none;color:#a4aea3;font-size:19px}.empty-meals{color:#a4aea3;font-size:12px;padding:15px 0}.food-source{display:block;color:#a6afa4;font-size:10px;margin-top:15px}.food-source a{color:#719879}@media(max-width:760px){.meal-form{grid-template-columns:1fr 1fr}.meal-form label:first-child{grid-column:1/-1}.scan-row{flex-wrap:wrap}.scan-row input{flex:1;min-width:125px}.meal-card{padding:18px}}@media(max-width:430px){.meal-form button{width:100%}.scan-row button{width:100%}}
.sleep-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.sleep-quality{border-radius:20px;background:#eeeafb;color:#8271b6;padding:8px 13px;font-size:11px;font-weight:900}.sleep-intro{color:#98a39b;font-size:12px;margin:10px 0 21px}.sleep-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.sleep-summary>div{background:#f7f5fb;border-radius:13px;padding:17px}.sleep-summary span,.sleep-summary strong,.sleep-summary small{display:block}.sleep-summary span{font-size:11px;color:#827c91;font-weight:800}.sleep-summary strong{font:900 25px Nunito,sans-serif;color:#5e5871;margin:5px 0}.sleep-summary small{font-size:10px;color:#a7a0b1}.sleep-stages{display:flex;gap:3px;height:19px;margin-top:22px;border-radius:20px;overflow:hidden}.sleep-stages span{min-width:0}.deep{background:#7865af}.core{background:#b9addd}.rem{background:#dfc9e6}.stage-legend{display:flex;gap:25px;flex-wrap:wrap;margin-top:12px}.stage-legend span{font-size:11px;color:#8d8798}.stage-legend strong{color:#555363;margin-left:4px}.stage-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}.sleep-explainer{border-top:1px solid #f0eef4;margin:19px 0 0;padding-top:13px;font-size:11px;line-height:1.5;color:#9da39f}@media(max-width:600px){.sleep-card{padding:18px}.sleep-summary{gap:6px}.sleep-summary>div{padding:12px}.sleep-summary strong{font-size:18px}.sleep-summary span,.sleep-summary small{font-size:9px}.stage-legend{gap:10px}.sleep-quality{font-size:9px;padding:7px}}
.stress-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.stress-badge{border-radius:20px;background:#ecf4e9;color:#688b6c;padding:8px 13px;font-size:11px;font-weight:900}.stress-intro{color:#98a39b;font-size:12px;margin:10px 0 20px;max-width:640px;line-height:1.5}.stress-layout{display:grid;grid-template-columns:1fr 1fr;gap:15px}.stress-result{background:#f4f7ef;border-radius:14px;padding:20px;position:relative}.stress-heart{position:absolute;right:19px;top:10px;color:#9ab89a;font-size:29px}.stress-result>span,.stress-result>strong{display:block}.stress-result>span{font-size:11px;color:#829487;font-weight:800}.stress-result>strong{font:900 31px Nunito,sans-serif;color:#527e61;margin:5px 0}.stress-result>strong small{font-size:13px}.stress-result p{color:#809385;font-size:11px;line-height:1.5;margin:0}.stress-inputs{border:1px solid #eef0e9;border-radius:14px;padding:16px}.stress-inputs h3{font:900 14px Nunito,sans-serif;margin:0 0 11px}.stress-inputs label{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:11px;color:#738575;font-weight:700}.stress-inputs input{width:68px;margin-left:auto;border:1px solid #dfe8dc;border-radius:8px;padding:8px;font:inherit;color:#3a5942}.stress-inputs label span{width:27px;color:#a4ada4}.stress-inputs small{display:block;font-size:10px;line-height:1.4;color:#a4ada4;margin-top:11px}.stress-explainer{border-top:1px solid #edf0e9;margin:18px 0 0;padding-top:14px;color:#9da69d;font-size:11px;line-height:1.5}@media(max-width:600px){.stress-card{padding:18px}.stress-layout{grid-template-columns:1fr}.stress-badge{font-size:9px;padding:7px}.stress-inputs label{font-size:10px}}
/* Stack each wellbeing signal and progress bar on its own row. */
.metric-grid{grid-template-columns:1fr}.blush{background:#fff0ef}.blush .metric-icon{color:#d69191;background:#fff9f8}.blush .mini-track{background:#f2d9d7}.blush .mini-track i{display:block;height:100%;background:#dfa4a4;border-radius:10px}.blush .metric-name{color:#936f73}@media(max-width:1050px){.metric-grid{grid-template-columns:1fr}}@media(max-width:760px){.metric-grid{grid-template-columns:1fr}}
.body-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.body-intro{color:#98a39b;font-size:12px;line-height:1.5;margin:10px 0 20px}.body-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.body-tile{min-width:0;background:#f6f8f3;border:1px solid #ecf0e9;border-radius:14px;padding:15px}.body-tile:nth-child(2){background:#fff5f1;border-color:#f7ece7}.body-tile:nth-child(3){background:#f3f7fa;border-color:#eaf0f4}.body-tile:nth-child(4){background:#f2f7f6;border-color:#e7f0ed}.body-tile:nth-child(5){background:#f8f5fa;border-color:#f0eaf2}.body-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#fff;color:#82a287;font-size:17px;margin-bottom:13px}.body-name{display:block;color:#819087;font-size:10px;font-weight:800;min-height:27px}.body-tile strong{display:block;font:900 22px Nunito,sans-serif;white-space:nowrap;margin:4px 0}.body-tile strong small{font-size:11px;color:#89978c}.body-tile p{font-size:9px;line-height:1.35;color:#a3aea5;margin:0}.body-footnote{border-top:1px solid #eef0ec;color:#9ea8a0;font-size:10px;line-height:1.5;margin:18px 0 0;padding-top:13px}@media(max-width:1180px){.body-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:700px){.body-card{padding:18px}.body-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sky{background:#eef5fa}.sky .metric-icon{color:#7ba6bc;background:#f8fcfe}.sky .mini-track{background:#dcebf2}.sky .mini-track i{display:block;height:100%;background:#91b9c9;border-radius:10px}.sky .metric-name{color:#688797}.recovery-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.recovery-label{border-radius:20px;padding:8px 13px;background:#edf5ec;color:#6e9472;font-size:11px;font-weight:900}.recovery-intro{font-size:12px;line-height:1.5;color:#98a39b;margin:10px 0 20px;max-width:690px}.recovery-layout{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.recovery-overview{padding:20px;border-radius:14px;background:#eef5f0}.recovery-count{display:block;font-size:12px;color:#6f8a78}.recovery-count strong{display:block;font:900 27px Nunito,sans-serif;color:#537a62;margin-bottom:2px}.recovery-track{height:9px;border-radius:10px;background:#dceadd;overflow:hidden;margin:14px 0}.recovery-track i{display:block;height:100%;background:#8ebd96;border-radius:10px;transition:width .3s}.recovery-overview p{font-size:11px;line-height:1.55;color:#819786;margin:0}.recovery-signals{display:grid;gap:8px}.recovery-signals>div{border:1px solid #edf0ea;border-radius:11px;padding:10px 13px;display:grid;grid-template-columns:1fr auto;gap:2px 8px}.recovery-signals span{font-size:11px;font-weight:800;color:#728b79}.recovery-signals strong{font:900 14px Nunito,sans-serif}.recovery-signals small{grid-column:1/-1;font-size:9px;color:#a3aea4}.recovery-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;margin-top:15px;padding:13px 0;border-top:1px solid #eff1ec}.recovery-controls label{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#748678}.recovery-controls input{width:65px;border:1px solid #dfe9de;border-radius:7px;padding:7px;font:inherit;color:#4c7155}.recovery-controls small{font-size:10px;color:#a4ada4}.recovery-footnote{font-size:10px;line-height:1.5;color:#a0a9a1;margin:0}@media(max-width:700px){.recovery-card{padding:18px}.recovery-layout{grid-template-columns:1fr}.recovery-label{font-size:9px;padding:7px}}
.point-chip{display:inline-flex;align-items:center;gap:5px;background:#fff3d9;color:#ad8250;border:1px solid #f4e6c8;border-radius:20px;padding:8px 12px;text-decoration:none;font-size:11px;font-weight:800}.point-chip strong{font-size:13px}.room-item{position:absolute;z-index:1;left:11%;bottom:32px;font-size:52px;line-height:1;filter:drop-shadow(0 4px 2px #9f9d7640)}.room-item[data-item="lamp"]{left:auto;right:11%}.outfit-item{position:absolute;z-index:4;left:42px;top:-31px;font-size:52px;line-height:1;pointer-events:none;filter:drop-shadow(0 2px 1px #8a683b33)}.outfit-item[data-item="cap"]{left:27px;top:-40px;font-size:60px}.outfit-item[data-item="scarf"]{left:34px;top:119px;font-size:50px}.shop-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.shop-balance{background:#fff4df;color:#ac8554;border-radius:18px;padding:9px 12px;font-size:12px;white-space:nowrap}.shop-intro{color:#96a198;font-size:12px;line-height:1.5;margin:10px 0 17px}.shop-progress{display:flex;justify-content:space-between;align-items:center;background:#f0f6ec;border-radius:10px;padding:10px 13px;color:#739178;font-size:11px;font-weight:700}.shop-progress strong{font-size:11px}.shop-tabs{display:flex;gap:7px;margin:18px 0 13px}.shop-tabs button{border:1px solid #e5ece3;background:#fff;color:#829586;border-radius:18px;padding:7px 13px;font-size:11px;font-weight:800}.shop-tabs button.selected{background:#729879;border-color:#729879;color:#fff}.shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.shop-item{border:1px solid #edf0e9;border-radius:14px;background:#fdfefa;padding:15px;min-width:0}.shop-item-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:13px;background:#f0f5e9;font-size:31px;margin-bottom:9px}.shop-item h3{font:900 14px Nunito,sans-serif;margin:0 0 3px}.shop-item p{font-size:10px;color:#a0a9a0;margin:0 0 15px;min-height:27px}.shop-item-footer{display:flex;align-items:center;justify-content:space-between;gap:7px}.shop-item-footer span{font-size:11px;color:#a78351;font-weight:900}.shop-item-footer button{background:#eaf3e8;color:#5e8868;border:0;border-radius:8px;padding:8px 12px;font-size:10px;font-weight:900}.shop-item-footer button:hover{background:#dcebd9}.shop-status{font-size:11px;color:#6e9075;min-height:17px;margin:12px 0 0}.shop-footnote{font-size:10px;color:#a5aea4}@media(max-width:760px){.shop-card{padding:18px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:430px){.shop-grid{gap:7px}.shop-item{padding:11px}.shop-item-footer button{padding:7px}.point-chip{padding:6px 9px;font-size:10px}}
.health-button{border:1px solid #dcebdd;background:#edf6ed;color:#5d8a69;border-radius:19px;padding:8px 12px;font-size:11px;font-weight:900;white-space:nowrap}.health-button:hover{background:#e1f0e2}.health-status{min-height:0;margin:-12px 0 18px;color:#6f9078;font-size:11px}.health-status:empty{display:none}.pet-actions button:disabled{opacity:.6;cursor:default}@media(max-width:760px){.topbar{gap:8px}.health-button{font-size:9px;padding:7px}.today{display:none}}
.other{background:#d9dce7}.stage-legend [hidden]{display:none}
@media(max-width:430px){.topbar{flex-wrap:wrap}.health-button{order:3;width:100%;margin-top:4px}}
/* Daily water and optional cycle logs */
[hidden]{display:none!important}.wellness-log{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}.wellness-log>p,.profile-dialog p{color:#87968b;font-size:12px;line-height:1.6}.water-total{color:#6b9cad;font:900 18px Nunito,sans-serif}.water-total span{font-size:23px}.water-progress{height:12px;margin:16px 0;background:#e7f3f5;border-radius:20px;overflow:hidden}.water-progress i{display:block;width:0;height:100%;background:#8ccbd3;border-radius:20px;transition:width .25s}.wellness-form{display:flex;align-items:end;flex-wrap:wrap;gap:10px;margin:14px 0}.wellness-form label,.profile-dialog form>label:not(.check-row){color:#829187;font-size:11px;font-weight:800}.wellness-form input,.wellness-form select,.profile-dialog input[type=text]{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #e5e9df;border-radius:9px;background:#fcfdfb;color:var(--ink);font:inherit}.wellness-form label{min-width:145px;flex:1}.wellness-form button,.water-quick button,.profile-dialog form button{border:0;border-radius:10px;padding:11px 15px;background:#8cbf9a;color:#fff;font-weight:900;cursor:pointer}.water-quick{display:flex;gap:8px}.water-quick button{background:#e6f3f5;color:#568894}.wellness-list{border-top:1px solid #edf0e9;margin-top:16px}.wellness-entry{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #edf0e9;color:#65766b;font-size:12px}.wellness-entry span{flex:1}.wellness-entry button,.text-button{background:none;border:0;color:#ae7373;cursor:pointer;text-decoration:underline;font-size:11px}.profile-dialog{width:min(440px,calc(100% - 32px));border:1px solid var(--line);border-radius:20px;padding:28px;background:#fff;box-shadow:0 15px 60px #334c3830}.profile-dialog::backdrop{background:#20342880}.profile-dialog h2{margin:10px 0 20px}.profile-dialog form>label:not(.check-row){display:block}.profile-dialog .check-row{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:13px;font-weight:800;color:#62786a}.profile-dialog .check-row input{width:17px;height:17px}.profile-dialog form button{margin-top:10px}.profile-dialog .text-button{display:block;margin-top:20px}.form-message{min-height:1em;color:#ae7373!important}@media(max-width:600px){.wellness-log{padding:18px}.wellness-form{display:block}.wellness-form label{display:block;margin:10px 0}.wellness-form button{margin-top:8px}}
.aqua{background:#eaf7f8}.aqua .mini-track{background:#d4edf0}.aqua .mini-track i{background:#8ccbd3}
/* Cycle tracker inspired by a calm day-by-day health journal. */
.cycle-log{padding:28px;background:#fff}.cycle-heading,.cycle-date-heading,.cycle-log-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.cycle-heading h2{margin:8px 0 0}.cycle-private{padding:7px 11px;border-radius:30px;background:#f0f7ef;color:#799780;font-size:10px;font-weight:900;white-space:nowrap}.cycle-intro{margin:13px 0 26px!important}.cycle-date-heading{padding:15px 0 12px;border-top:1px solid #f0eee9}.cycle-date-heading>div{text-align:center}.cycle-date-heading strong{display:block;font:900 20px Nunito,sans-serif;color:var(--ink)}.cycle-date-heading small{display:block;margin-top:2px;color:#a3ada5;font-size:10px}.cycle-date-heading button{width:36px;height:36px;border:0;border-radius:50%;background:#f8f7f8;color:#6d746f;font-size:29px;cursor:pointer}.cycle-date-heading button:disabled{opacity:.3;cursor:default}.cycle-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;padding:8px 0 22px;border-bottom:1px solid #f0eee9}.cycle-day{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;padding:10px 4px 9px;border:0;border-radius:18px;background:#f5f4f9;color:#a7a7ae;cursor:pointer}.cycle-day span{font-size:10px;font-weight:900;text-transform:uppercase}.cycle-day strong{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:14px}.cycle-day i{width:8px;height:8px;border-radius:50%;background:transparent}.cycle-day .period-marker{background:#ff7f75}.cycle-day .data-marker{background:#8375e7}.cycle-day.selected{background:#fff0ee;color:#d66961}.cycle-day.selected strong{background:#fb8379;color:#fff}.cycle-day:disabled{opacity:.42;cursor:default}.cycle-log-heading{margin:21px 0 18px}.cycle-log-heading h3{margin:0;font:900 20px Nunito,sans-serif}.cycle-log-heading span{color:#a4aba6;font-size:11px}.cycle-group-label{margin:15px 0 9px;font-size:12px;font-weight:900}.cycle-group-label.coral{color:#f5756a}.cycle-group-label.violet{color:#7766e7}.cycle-option{margin-bottom:8px;border-radius:17px;background:#fff1ef;overflow:hidden}.cycle-option.other-option{background:#f1effd}.cycle-option.factor-option{margin-top:20px;background:#f5f4f8}.cycle-option summary{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:62px;padding:12px 18px;cursor:pointer;list-style:none;font-size:15px;font-weight:800}.cycle-option summary::-webkit-details-marker{display:none}.cycle-option summary small{display:block;margin-top:3px;color:#a3a3ad;font-size:10px;font-weight:600}.cycle-option summary b{color:#f5756a;font-size:24px;font-weight:500}.cycle-option.other-option summary b{color:#7866e9}.cycle-option.factor-option summary b{color:#93909e}.cycle-option[open] summary b{transform:rotate(45deg)}.cycle-option form{padding:0 18px 17px}.cycle-option .wellness-form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.cycle-option .wellness-form button{grid-column:1/-1;justify-self:start}.cycle-inline-form{display:flex;gap:10px;align-items:end}.cycle-inline-form label{flex:1;font-size:11px;font-weight:800;color:#829187}.cycle-inline-form select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #e4e1ef;border-radius:9px;background:#fff;color:var(--ink);font:inherit}.cycle-inline-form button{border:0;border-radius:10px;padding:11px 15px;background:#8cbf9a;color:#fff;font-weight:900;cursor:pointer}.cycle-option.factor-option p{margin:0 18px 16px;font-size:10px}.cycle-log .wellness-list{margin-top:12px}.cycle-log .wellness-list:empty{display:none}@media(max-width:650px){.cycle-log{padding:18px}.cycle-private{display:none}.cycle-days{gap:4px}.cycle-day{border-radius:13px;padding:8px 1px}.cycle-day strong{width:25px;height:25px;font-size:12px}.cycle-date-heading strong{font-size:16px}.cycle-option .wellness-form{grid-template-columns:1fr}.cycle-inline-form{align-items:stretch;flex-direction:column}.cycle-inline-form button{align-self:flex-start}}
.pet.pet-art{width:220px;height:220px;margin-top:6px;background:none;border:0;border-radius:0;box-shadow:none}.pet.pet-art svg{display:block;width:100%;height:100%;overflow:visible}.pet.pet-art.sleepy{filter:saturate(.85)}.room-item{width:100px;font-size:0;left:6%;bottom:22px}.room-item[data-spot="right"]{left:auto;right:6%}.room-item[data-spot="floor"]{left:50%;right:auto;bottom:-44px;width:210px;transform:translateX(-50%)}.room-item svg{display:block;width:100%;height:auto}.shop-item-icon svg{width:44px;height:44px}.egg-art{position:relative;width:66px;height:66px;margin:0 auto 8px}.egg-art svg{position:absolute;inset:0;width:100%;height:100%;transition:opacity .25s,transform .25s}.egg-art svg+svg{opacity:0;transform:scale(.8)}.egg-tile:hover .egg-art svg:first-child,.egg-tile:focus .egg-art svg:first-child{opacity:0}.egg-tile:hover .egg-art svg+svg,.egg-tile:focus .egg-art svg+svg{opacity:1;transform:none}.egg-tile:focus-visible{outline:3px solid #97bd90;outline-offset:2px}@media(max-width:760px){.room-item{width:78px}}@media(prefers-reduced-motion:reduce){.egg-art svg{transition:none}}
.shop-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.shop-item.locked .shop-item-icon svg{filter:grayscale(.6);opacity:.55}.shop-item.locked h3,.shop-item.locked p{opacity:.7}.shop-item-footer button:disabled{background:#f3f1ec;color:#a39c92;cursor:default}.shop-item-icon svg{width:46px;height:46px}@media(max-width:430px){.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.egg-grid{max-height:min(60vh,520px);overflow-y:auto;padding:2px}.egg-tile.locked .egg-art{filter:grayscale(.85);opacity:.5}.egg-tile.locked strong{color:#a7aea5}
button.egg-tile{font:inherit;color:inherit;cursor:pointer;width:100%}button.egg-tile:hover{border-color:#97bd90}.egg-tile.current{border-color:#719879;box-shadow:0 0 0 2px #719879}
/* Rooms: a scene behind the pet, standard furniture that can be upgraded, and tabs to visit each room. */
.pet-scene{height:300px;min-height:0;align-items:flex-end;padding-bottom:28px}.pet-scene .decor,.pet-scene .orbit,.pet-scene .flower{display:none}
.room-backdrop{position:absolute;inset:0;z-index:0}.room-backdrop svg{display:block;width:100%;height:100%}
.room-item[data-spot="back"]{left:50%;right:auto;bottom:34px;width:250px;z-index:0;transform:translateX(-50%)}
.room-item[data-spot="left"],.room-item[data-spot="right"]{bottom:26px;width:84px}
.room-item[data-spot="floor"]{bottom:-36px}
.room-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px;padding:0 20px}.room-tabs button{border:1px solid var(--line);background:#fff;color:#7b857e;border-radius:16px;padding:6px 11px;font-size:11px;font-weight:800}.room-tabs button[aria-pressed="true"]{background:#5e8c71;border-color:#5e8c71;color:#fff}
/* Baby buddies wobble side to side like a little blob. */
@keyframes blobwobble{0%,100%{transform:translateX(-7px) rotate(-5deg) scale(1.03,.97)}50%{transform:translateX(7px) rotate(5deg) scale(.97,1.03)}}
.pet.pet-art.stage-baby{animation:blobwobble 1.4s ease-in-out infinite;transform-origin:50% 92%}.pet.pet-art.stage-baby.sleepy{animation-duration:4.5s}
@keyframes eggrock{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes pace{0%,100%{transform:translateX(-30px) rotate(-3deg)}12.5%{transform:translateX(-15px) translateY(-5px) rotate(3deg)}25%{transform:translateX(0) rotate(-3deg)}37.5%{transform:translateX(15px) translateY(-5px) rotate(3deg)}50%{transform:translateX(30px) rotate(-3deg)}62.5%{transform:translateX(15px) translateY(-5px) rotate(3deg)}75%{transform:translateX(0) rotate(-3deg)}87.5%{transform:translateX(-15px) translateY(-5px) rotate(3deg)}}
/* Eggs rock in place, babies wobble, and every older stage paces side to side. Napping pets keep still. */
.pet.pet-art.stage-egg{animation:eggrock 1.8s ease-in-out infinite;transform-origin:50% 95%}
.pet.pet-art.stage-adult{animation:pace 7s ease-in-out infinite;transform-origin:50% 95%}
/* Friends with their own animations (Sunny) walk, stop and play their mood inside the picture instead. */
.pet.pet-art.own-moves{animation:none}
.pet.pet-art:is(.stage-egg,.stage-adult).sleepy{animation:none}
@media(prefers-reduced-motion:reduce){.pet.pet-art:is(.stage-baby,.stage-egg,.stage-adult){animation:none}}
.shop-collection-label{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;color:#7b857e;font-size:12px;font-weight:800}.shop-collection-label select{border:1px solid var(--line);border-radius:12px;padding:6px 10px;font:inherit;background:#fff}
.shop-count{color:#9ba69b;font-size:11px;margin:8px 0 0}.shop-more{display:block;margin:14px auto 0;border:1px solid #dcebdd;background:#edf6ed;color:#5d8a69;border-radius:18px;padding:9px 18px;font-size:13px;font-weight:900}
.collection-status{min-height:0;margin:0 0 8px;color:#6f9078;font-size:12px;font-weight:800}.collection-status:empty{display:none}
/* Walking between rooms: the pet trots in with little hops. */
@keyframes walkin-right{0%{transform:translateX(160px)}15%{transform:translateX(128px) translateY(-8px)}30%{transform:translateX(96px)}45%{transform:translateX(64px) translateY(-8px)}60%{transform:translateX(32px)}75%{transform:translateX(12px) translateY(-6px)}100%{transform:none}}
@keyframes walkin-left{0%{transform:translateX(-160px)}15%{transform:translateX(-128px) translateY(-8px)}30%{transform:translateX(-96px)}45%{transform:translateX(-64px) translateY(-8px)}60%{transform:translateX(-32px)}75%{transform:translateX(-12px) translateY(-6px)}100%{transform:none}}
.pet.pet-art.walk-in-right[class]{animation:walkin-right 1.2s ease-out}.pet.pet-art.walk-in-left[class]{animation:walkin-left 1.2s ease-out}
@media(prefers-reduced-motion:reduce){.pet.pet-art.walk-in-right,.pet.pet-art.walk-in-left{animation:none}}
.profile-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
.profile-dialog [hidden]{display:none!important}
.profile-dialog fieldset{margin:0 0 18px;padding:0;border:0;min-width:0}
.profile-dialog legend{padding:0;margin-bottom:10px;color:var(--ink);font-size:14px;font-weight:900}
.profile-dialog legend small,.profile-dialog label small,.profile-dialog .field-label small{color:#a3ada6;font-weight:700}
.profile-dialog fieldset>label:not(.check-row){display:block;margin-bottom:12px;color:#829187;font-size:11px;font-weight:800}
.profile-dialog input[type=number],.profile-dialog select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #e5e9df;border-radius:9px;background:#fcfdfb;color:var(--ink);font:inherit}
.profile-dialog input:focus-visible,.profile-dialog select:focus-visible{outline:2px solid #8cbf9a;outline-offset:1px}
.profile-dialog .field-label{margin:4px 0 8px;color:#829187;font-size:11px;font-weight:800}
.focus-grid{display:flex;flex-wrap:wrap;gap:8px}
.focus-chip{position:relative;cursor:pointer}
.focus-chip input{position:absolute;opacity:0;pointer-events:none}
.focus-chip span{display:inline-block;padding:8px 12px;border:1px solid #e5e9df;border-radius:999px;background:#fcfdfb;color:#62786a;font-size:12px;font-weight:800}
.focus-chip input:checked+span{border-color:#8cbf9a;background:#eef6ef;color:#3f6b4d}
.focus-chip input:focus-visible+span{outline:2px solid #8cbf9a;outline-offset:2px}
.goal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.goal-grid label{color:#829187;font-size:11px;font-weight:800}
.profile-dialog .field-hint{margin-top:10px;font-size:11px}
.profile-lede{margin:-8px 0 14px}
.profile-steps{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.profile-steps li{flex:1;padding-top:8px;border-top:4px solid #e5e9df;color:#a3ada6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.profile-steps li.current{border-color:#8cbf9a;color:#3f6b4d}
.profile-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.profile-dialog .profile-actions .text-button{margin:0 auto 0 0}
.profile-dialog form .profile-actions button{margin-top:0}
.profile-dialog form .secondary-button{background:#eef2ec;color:#4f6a57}
.profile-data{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.profile-data .text-button{margin-top:10px!important}
.profile-dialog .text-button.danger{color:#c0504d}
.calorie-total small{display:block;color:#9aa69e;font-size:11px;font-weight:700}
@media(max-width:480px){.profile-dialog{padding:22px}.goal-grid{grid-template-columns:1fr}}
.profile-dialog form .profile-actions .text-button{padding:0;background:none;color:#7f9184;font-size:12px;font-weight:800}
.avatar{overflow:hidden;display:grid;place-items:center;padding:0}
.avatar svg{width:43px;height:49px;max-width:none;transform:translateY(7px)}
.avatar-entry{display:flex;align-items:center;gap:12px;border:1px solid #e9e5dc;border-radius:16px;background:#faf8f3;padding:9px 11px;margin:8px 0 20px}
.avatar-entry>span{display:grid;place-items:center;overflow:hidden;width:54px;height:54px;flex:none;border-radius:16px;background:#eef3e8}
.avatar-entry svg{width:54px;height:70px;transform:translateY(9px)}
.avatar-entry div{min-width:0;flex:1}.avatar-entry strong,.avatar-entry small{display:block}.avatar-entry strong{font:900 13px Nunito,sans-serif}.avatar-entry small{font-size:10px;color:#849187;margin-top:2px}
.avatar-entry button{margin:0!important;padding:8px 10px!important;font-size:11px!important}
.avatar-dialog{width:min(860px,calc(100vw - 28px));max-height:min(90vh,900px);border:0;border-radius:24px;padding:24px;background:#fffdf9;color:#313a36;box-shadow:0 22px 70px #302d2940}
.avatar-dialog::backdrop{background:#202522a3}.avatar-dialog .close{position:absolute;right:15px;top:12px}.avatar-dialog h2{margin:7px 0 3px;font-size:26px}.avatar-dialog>p{color:#87918a;font-size:12px;margin:0 0 15px}
.avatar-starters{display:flex;gap:9px;margin:0 0 14px}.avatar-starters button{display:flex;align-items:center;gap:9px;min-width:0;flex:1;border:2px solid #e9e7df;border-radius:14px;background:#faf8f2;padding:5px 9px;color:#52675a;font-size:12px;font-weight:900}.avatar-starters button[aria-pressed=true]{border-color:#76aa85;background:#edf6ed}.avatar-starter-art{display:grid;place-items:center;width:48px;height:48px;overflow:hidden;flex:none}.avatar-starter-art svg{width:48px;height:64px;transform:translateY(7px)}.avatar-starters span{white-space:nowrap}
.avatar-layout{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(280px,1.15fr);gap:18px}.avatar-stage{display:grid;place-items:center;min-height:420px;border-radius:19px;background:radial-gradient(circle at 50% 30%,#fff9ed,#f4eae3 70%,#ebeadf);overflow:hidden}.avatar-stage #avatar-live{width:min(100%,320px);height:390px;display:grid;place-items:center}.avatar-stage svg{width:100%;height:100%;filter:drop-shadow(0 8px 5px #7a5d4726)}
.avatar-controls{max-height:430px;overflow:auto;padding-right:6px}.avatar-option{padding:0 0 13px;margin:0 0 12px;border-bottom:1px solid #eeeae2}.avatar-option h3{font:900 12px Nunito,sans-serif;margin:0 0 7px}.avatar-choices,.avatar-colors{display:flex;flex-wrap:wrap;gap:7px}.avatar-choices button{border:1px solid #e4e6de;border-radius:999px;background:#f7f8f3;color:#586b5d;padding:7px 10px;font-size:11px;font-weight:800}.avatar-choices button[aria-pressed=true]{background:#dbede1;border-color:#77a583;color:#315e3b}.avatar-swatch{width:29px;height:29px;min-width:29px;border:2px solid #fff;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px #c7c9c2}.avatar-swatch[aria-pressed=true]{box-shadow:0 0 0 3px #5c9472}.avatar-custom{display:flex;align-items:center;gap:5px;color:#647367;font-size:11px;font-weight:800}.avatar-custom input{width:30px;height:30px;padding:0;border:0;background:none;cursor:pointer}.avatar-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}.avatar-footer button{border-radius:10px;padding:10px 16px;font-weight:900}.avatar-footer .secondary-button{border:1px solid #e1e9df;background:#f4f7f2;color:#54705b}
.avatar-choices.has-previews button{display:grid;justify-items:center;align-content:center;gap:3px;min-width:73px;min-height:88px;border-radius:12px;padding:4px 5px;background:#faf9f5}.avatar-choices.has-previews button[aria-pressed=true]{background:#e5f2e7}.avatar-choice-art{width:57px;height:58px;overflow:hidden;display:grid;place-items:center}.avatar-choice-art svg{width:57px;height:58px}.avatar-choices.has-previews button>span:last-child{font-size:10px;line-height:1.15;text-align:center;white-space:normal}
@media(max-width:620px){.avatar-dialog{padding:20px}.avatar-layout{grid-template-columns:1fr}.avatar-stage{min-height:245px}.avatar-stage #avatar-live{height:240px}.avatar-controls{max-height:39vh}.avatar-entry{flex-wrap:wrap}.avatar-entry button{margin-left:auto!important}}
.account-box{margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfaf6}
.profile-dialog .account-box p{margin:0 0 10px}
.apple-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;border:0;border-radius:10px;background:#000;color:#fff;font:600 15px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;cursor:pointer}
.apple-button span{font-size:17px;line-height:1}
.profile-dialog .account-box .text-button{margin-top:4px}

/* Meal tracker: Sunny's table, quick-pick foods drawn as pixel sprites, and today's plate. */
.meal-card h3{margin:0;font:900 15px Nunito,sans-serif;color:var(--ink)}
.diner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px;align-items:center;margin:18px 0 22px}
.diner-stage{position:relative;height:150px;border-radius:20px;overflow:hidden;border:3px solid #e6e3c8;background:repeating-linear-gradient(0deg,#0000 0 5px,#ffffff2e 5px 6px),repeating-linear-gradient(90deg,#0000 0 5px,#ffffff2e 5px 6px),radial-gradient(circle at 50% 35%,#f7f6dc,#e8eccd)}
.diner-table{position:absolute;left:0;right:0;bottom:0;height:30px;background:#d9c7a6;border-top:4px solid #c3ad86}
.mini-pet-wrap{position:absolute;z-index:2;left:50%;bottom:28px;width:155px;height:184px;margin-left:-104px;transform:scale(.46);transform-origin:50% 100%}
.mini-pet .outfit-item{font-size:52px}
.diner-sparkle{position:absolute;color:#e0c977;font-size:14px}.diner-sparkle.one{left:14%;top:18%}.diner-sparkle.two{right:12%;top:12%;font-size:11px}
.diner-food{position:absolute;bottom:16px;left:calc(50% + 4px);width:44px;height:44px;z-index:3;animation:food-drop .45s cubic-bezier(.3,1.5,.6,1) both,food-bites 1.6s steps(4,end) .7s forwards}
.diner-food svg{width:100%;height:100%;filter:drop-shadow(0 3px 0 #0000001a)}
.diner-pop{position:absolute;left:50%;top:14px;z-index:4;transform:translateX(-50%);padding:4px 9px;border-radius:12px;background:#fff;color:#e2667a;font:900 11px Nunito,sans-serif;white-space:nowrap;box-shadow:0 3px 8px #0000001a;animation:diner-pop 2.4s ease-out forwards}
.diner-stage.eating .pet{animation:munch .2s ease-in-out .7s 8 alternate}
.diner-stage.eating .mouth{width:16px;height:12px;left:63px;top:110px;border:0;border-radius:50% 50% 45% 45%;background:#6e5440;animation:chomp .2s steps(1,end) .7s 8 alternate}
.diner-stage.eating .eyes i{height:4px;margin-top:6px;border-radius:50% 50% 0 0}
@keyframes food-drop{from{transform:translateY(-120px)}}
@keyframes food-bites{to{clip-path:inset(0 0 0 100%)}}
@keyframes chomp{50%{height:3px;top:115px}}
@keyframes munch{to{transform:translateY(4px) rotate(4deg)}}
@keyframes diner-pop{0%{opacity:0;transform:translate(-50%,10px)}15%,75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-14px)}}
.diner-info{display:flex;flex-direction:column;gap:8px}
.diner-label{font-size:10px;font-weight:900;letter-spacing:1.4px;color:#9aa69b;text-transform:uppercase}
.energy-hearts{display:flex;gap:5px}
.energy-hearts i{width:22px;height:20px;background:#eceae3;clip-path:polygon(0 15%,15% 0,35% 0,50% 15%,65% 0,85% 0,100% 15%,100% 45%,50% 100%,0 45%);transition:background .3s}
.energy-hearts i.full,[data-theme] .energy-hearts i.full,[data-mode="dark"] .energy-hearts i.full{background:#ef6b7b}
.diner-mood{margin:0;color:var(--ink);font-size:13px;font-weight:800;line-height:1.35}
.energy-goal-note{color:#a4aea3;font-size:10px}
.goal-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.goal-edit{border:0;border-radius:12px;padding:4px 10px;background:#eef5eb;color:#65866c;font-size:10px;font-weight:900;cursor:pointer}
.calorie-goal-form{display:flex;flex-wrap:wrap;align-items:end;gap:8px;padding:10px;border:1px solid var(--line);border-radius:14px}
.calorie-goal-form label{flex:1;min-width:130px;font-size:10px;font-weight:800;color:#829187}
.calorie-goal-form input{display:block;width:100%;margin-top:5px;border:1px solid #e5e9df;border-radius:9px;background:#fcfdfb;padding:9px;color:var(--ink);font:inherit;font-size:12px}
.calorie-goal-form button{border-radius:9px;padding:9px 13px;font-size:11px;font-weight:900;cursor:pointer}
.calorie-goal-form button[type=button]{border:1px solid #dfe9dd;background:none;color:#65866c}
.calorie-goal-form small{flex-basis:100%;color:#a4aea3;font-size:10px}
.quick-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.meal-types{display:flex;gap:4px;padding:3px;border-radius:20px;background:#f3f3ee}
.meal-types button{border:0;border-radius:16px;padding:6px 11px;background:none;color:#829187;font-size:11px;font-weight:900;cursor:pointer}
.meal-types button[aria-pressed="true"]{background:var(--green);color:#fff}
.meal-card .meal-intro{margin:8px 0 14px}
.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px}
.food-tile{display:flex;flex-direction:column;align-items:center;gap:3px;padding:12px 8px 10px;border:1px solid var(--line);border-radius:16px;background:#fcfbf7;color:var(--ink);font:inherit;text-align:center;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s}
.food-tile:hover{transform:translateY(-2px);border-color:#d9e6d6;box-shadow:0 6px 14px #5e8c711a}
.food-tile:active{transform:scale(.96)}
.food-tile:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.food-tile strong{font-size:12px;line-height:1.2}
.food-tile small{color:#a4aea3;font-size:10px}
.food-kcal{margin-top:4px;padding:3px 8px;border-radius:10px;background:#eef5eb;color:#65866c;font-size:10px;font-weight:900}
.food-art{display:grid;place-items:center;width:52px;height:52px;margin-bottom:4px;border-radius:50%;background:#f4f2e6}
.food-art svg{width:36px;height:36px}
.food-art.small{flex:none;width:38px;height:38px;margin:0}
.food-art.small svg{width:26px;height:26px}
.meal-more{margin:16px 0 4px;border:1px dashed #dfe5da;border-radius:14px;padding:0 14px}
.meal-more summary{display:flex;align-items:center;gap:8px;padding:12px 0;color:#65866c;font-size:12px;font-weight:900;cursor:pointer;list-style:none}
.meal-more summary::-webkit-details-marker{display:none}
.meal-more summary span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#eef5eb}
.meal-more[open]{padding-bottom:12px}
.meal-card .meal-form{grid-template-columns:2fr 1fr auto}
.meal-card .scan-status{margin:10px 0 0}.meal-card .scan-status:empty{display:none}
.plate-title{margin:20px 0 6px!important}
.meal-card .meal-list{border-top:0}
.empty-meals{color:#a4aea3;font-size:12px}
@media(max-width:760px){.diner{grid-template-columns:1fr}.meal-card .meal-form{grid-template-columns:1fr 1fr}.meal-card .meal-form button{grid-column:1/-1}.food-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}}
@media(max-width:430px){.food-tile{padding:10px 4px 8px}.food-tile small{display:none}.food-art{width:44px;height:44px}.food-art svg{width:30px;height:30px}.meal-types{width:100%;justify-content:space-between}.meal-types button{flex:1;padding:6px 4px}}
@media(prefers-reduced-motion:reduce){.diner-food,.diner-pop,.diner-stage.eating .pet,.diner-stage.eating .mouth,.food-tile{animation:none;transition:none}}
[data-theme] .diner-stage{border-color:hsl(var(--th) calc(40% * var(--ts)) 88%);background:repeating-linear-gradient(0deg,#0000 0 5px,#ffffff2e 5px 6px),repeating-linear-gradient(90deg,#0000 0 5px,#ffffff2e 5px 6px),radial-gradient(circle at 50% 35%,hsl(var(--th) calc(70% * var(--ts)) 96%),hsl(var(--th) calc(45% * var(--ts)) 90%))}
[data-theme] .diner-label,[data-theme] .energy-goal-note,[data-theme] .food-tile small{color:hsl(var(--th) calc(20% * var(--ts)) 62%)}
[data-theme] .meal-types{background:hsl(var(--th) calc(40% * var(--ts)) 95%)}
[data-theme] .meal-types button{color:hsl(var(--th) calc(30% * var(--ts)) 50%)}
[data-theme] .meal-types button[aria-pressed="true"]{color:#fff}
[data-theme] .food-tile{background:hsl(var(--th) calc(60% * var(--ts)) 98.5%)}
[data-theme] .food-tile:hover{border-color:hsl(var(--th) calc(40% * var(--ts)) 85%)}
[data-theme] .food-art{background:hsl(var(--th) calc(50% * var(--ts)) 94%)}
[data-theme] .food-kcal,[data-theme] .meal-more summary span{background:hsl(var(--th) calc(41.7% * var(--ts)) 94.1%);color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .meal-more{border-color:hsl(var(--th) calc(35% * var(--ts)) 88%)}
[data-theme] .meal-more summary{color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .energy-hearts i{background:hsl(var(--th) calc(25% * var(--ts)) 91%)}
[data-mode="dark"] .diner-stage{border-color:hsl(var(--th,150) 10% 22%);background:repeating-linear-gradient(0deg,#0000 0 5px,#ffffff08 5px 6px),repeating-linear-gradient(90deg,#0000 0 5px,#ffffff08 5px 6px),radial-gradient(circle at 50% 35%,hsl(var(--th,60) calc(25% * var(--ts,1)) 22%),hsl(var(--th,60) calc(20% * var(--ts,1)) 15%))}
[data-mode="dark"] .diner-table{background:#5d5040;border-top-color:#4a3f33}
[data-mode="dark"] .diner-pop{background:hsl(var(--th,150) 10% 18%)}
[data-mode="dark"] .diner-label,[data-mode="dark"] .energy-goal-note,[data-mode="dark"] .food-tile small,[data-mode="dark"] .empty-meals{color:hsl(var(--th,115) calc(20% * var(--ts,1)) 50%)}
[data-mode="dark"] .meal-types{background:hsl(var(--th,150) 10% 16%)}
[data-mode="dark"] .meal-types button{color:hsl(var(--th,130) calc(25% * var(--ts,1)) 62%)}
[data-mode="dark"] .meal-types button[aria-pressed="true"]{color:#101512}
[data-mode="dark"] .food-tile{background:hsl(var(--th,150) 10% 14%)}
[data-mode="dark"] .food-tile:hover{border-color:hsl(var(--th,130) calc(30% * var(--ts,1)) 30%);box-shadow:none}
[data-mode="dark"] .food-art{background:hsl(var(--th,60) calc(15% * var(--ts,1)) 20%)}
[data-mode="dark"] .food-kcal,[data-mode="dark"] .meal-more summary span{background:hsl(var(--th,102) calc(41.7% * var(--ts,1)) 16.3%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .meal-more{border-color:hsl(var(--th,150) 10% 24%)}
[data-mode="dark"] .meal-more summary{color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .energy-hearts i{background:hsl(var(--th,150) 8% 24%)}
[data-theme] .goal-edit{background:hsl(var(--th) calc(41.7% * var(--ts)) 94.1%);color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .calorie-goal-form label,[data-theme] .calorie-goal-form button[type=button]{color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .calorie-goal-form input{border-color:hsl(var(--th) calc(35% * var(--ts)) 89.4%);background:hsl(var(--th) calc(41.7% * var(--ts)) 98.8%)}
[data-mode="dark"] .goal-edit{background:hsl(var(--th,102) calc(41.7% * var(--ts,1)) 16.3%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .calorie-goal-form label,[data-mode="dark"] .calorie-goal-form button[type=button]{color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%);border-color:hsl(var(--th,150) 10% 24%)}
[data-mode="dark"] .calorie-goal-form input{border-color:hsl(var(--th,84) calc(35% * var(--ts,1)) 20.5%);background:hsl(var(--th,90) calc(41.7% * var(--ts,1)) 12.1%)}
.profile-dialog{width:min(520px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow-y:auto}
.profile-dialog [hidden]{display:none!important}
.profile-dialog fieldset{margin:0 0 18px;padding:0;border:0;min-width:0}
.profile-dialog legend{padding:0;margin-bottom:10px;color:var(--ink);font-size:14px;font-weight:900}
.profile-dialog legend small,.profile-dialog label small,.profile-dialog .field-label small{color:#a3ada6;font-weight:700}
.profile-dialog fieldset>label:not(.check-row){display:block;margin-bottom:12px;color:#829187;font-size:11px;font-weight:800}
.profile-dialog input[type=number],.profile-dialog select{display:block;width:100%;margin-top:6px;padding:10px;border:1px solid #e5e9df;border-radius:9px;background:#fcfdfb;color:var(--ink);font:inherit}
.profile-dialog input:focus-visible,.profile-dialog select:focus-visible{outline:2px solid #8cbf9a;outline-offset:1px}
.profile-dialog .field-label{margin:4px 0 8px;color:#829187;font-size:11px;font-weight:800}
.focus-grid{display:flex;flex-wrap:wrap;gap:8px}
.focus-chip{position:relative;cursor:pointer}
.focus-chip input{position:absolute;opacity:0;pointer-events:none}
.focus-chip span{display:inline-block;padding:8px 12px;border:1px solid #e5e9df;border-radius:999px;background:#fcfdfb;color:#62786a;font-size:12px;font-weight:800}
.focus-chip input:checked+span{border-color:#8cbf9a;background:#eef6ef;color:#3f6b4d}
.focus-chip input:focus-visible+span{outline:2px solid #8cbf9a;outline-offset:2px}
.goal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.goal-grid label{color:#829187;font-size:11px;font-weight:800}
.profile-dialog .field-hint{margin-top:10px;font-size:11px}
.profile-lede{margin:-8px 0 14px}
.profile-steps{display:flex;gap:6px;margin:0 0 18px;padding:0;list-style:none}
.profile-steps li{flex:1;padding-top:8px;border-top:4px solid #e5e9df;color:#a3ada6;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}
.profile-steps li.current{border-color:#8cbf9a;color:#3f6b4d}
.profile-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.profile-dialog .profile-actions .text-button{margin:0 auto 0 0}
.profile-dialog form .profile-actions button{margin-top:0}
.profile-dialog form .secondary-button{background:#eef2ec;color:#4f6a57}
.profile-data{margin-top:22px;padding-top:16px;border-top:1px solid var(--line)}
.profile-data .text-button{margin-top:10px!important}
.profile-dialog .text-button.danger{color:#c0504d}
.calorie-total small{display:block;color:#9aa69e;font-size:11px;font-weight:700}
@media(max-width:480px){.profile-dialog{padding:22px}.goal-grid{grid-template-columns:1fr}}
.profile-dialog form .profile-actions .text-button{padding:0;background:none;color:#7f9184;font-size:12px;font-weight:800}
.account-box{margin:0 0 18px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fbfaf6}
.profile-dialog .account-box p{margin:0 0 10px}
.apple-button{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;border:0;border-radius:10px;background:#000;color:#fff;font:600 15px -apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;cursor:pointer}
.apple-button span{font-size:17px;line-height:1}
.profile-dialog .account-box .text-button{margin-top:4px}

.theme-menu{position:relative}.theme-control{display:flex;align-items:center;gap:4px;border:1px solid var(--line);background:#fff;border-radius:22px;padding:3px 4px 3px 10px}.theme-switch{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:11px;font-weight:900;white-space:nowrap;cursor:pointer}.theme-switch input{order:2}.theme-toggle{display:flex;align-items:center;gap:3px;border:0;background:none;color:var(--muted);border-radius:14px;padding:6px;font-size:9px}.theme-toggle:hover{background:var(--line)}.theme-dot{width:14px;height:14px;border-radius:50%;background:var(--dot,#e58fb1);box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.theme-panel{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:250px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:0 12px 30px rgba(60,40,50,.12);color:var(--ink)}.theme-panel[hidden]{display:none}.theme-panel strong{display:block;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.theme-swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.theme-swatches button{display:flex;flex-direction:column;align-items:center;gap:5px;border:2px solid transparent;background:none;border-radius:12px;padding:6px 2px;font-size:10px;font-weight:800;color:var(--ink);cursor:pointer}.theme-swatches button::before{content:"";width:28px;height:28px;border-radius:50%;background:var(--swatch);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
.theme-swatches [aria-checked="true"]{border-color:var(--green)}
.colour-wheel-wrap{margin-top:12px;text-align:center}.colour-wheel-wrap small{display:block;font-size:10px;font-weight:800;color:var(--muted);margin-bottom:8px}.colour-wheel{position:relative;width:150px;height:150px;margin:auto;border-radius:50%;background:radial-gradient(circle closest-side,#fff 0,rgba(255,255,255,.85) 15%,rgba(255,255,255,0) 100%),conic-gradient(hsl(0 80% 62%),hsl(60 80% 62%),hsl(120 80% 62%),hsl(180 80% 62%),hsl(240 80% 62%),hsl(300 80% 62%),hsl(360 80% 62%));cursor:crosshair;touch-action:none;box-shadow:0 0 0 1px var(--line)}.colour-wheel:focus-visible{outline:2px solid var(--green);outline-offset:3px}.colour-knob{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);pointer-events:none}.colour-knob[hidden]{display:none}
.dark-switch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:12px;font-weight:800;cursor:pointer}.dark-switch input,.theme-switch input{appearance:none;-webkit-appearance:none;margin:0;flex:none;position:relative;width:46px;height:28px;border-radius:14px;background:#e9e9ea;cursor:pointer;transition:background .2s}.dark-switch input::before,.theme-switch input::before{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:transform .2s}.dark-switch input:checked,.theme-switch input:checked{background:var(--green)}.dark-switch input:checked::before,.theme-switch input:checked::before{transform:translateX(18px)}.dark-switch input:focus-visible,.theme-switch input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
[data-mode="dark"] .theme-control,[data-mode="dark"] .theme-panel{background:hsl(var(--th,150) 10% 14%)}
@media(max-width:430px){.theme-panel{position:fixed;left:16px;right:16px;top:64px;width:auto}#theme-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.theme-control{padding-left:5px}}@media(max-width:760px){.theme-switch{font-size:9px}.theme-switch input{width:38px;height:22px}.theme-switch input::before{width:18px;height:18px}.theme-switch input:checked::before{transform:translateX(16px)}}

/* Colour themes. Classic is the plain stylesheet above. A theme sets --th (hue) and --ts (saturation scale)
   on <html data-theme>; data-mode="dark" darkens any theme. Generated from the classic palette; Sunny keeps their colours. */
[data-theme]{--th:335;--ts:1}
[data-theme="pink"]{--th:335}[data-theme="lavender"]{--th:268}[data-theme="ocean"]{--th:200}[data-theme="peach"]{--th:18}
[data-theme]{--ink:hsl(var(--th) 13% 21%);--muted:hsl(var(--th) 10% 58%);--cream:hsl(var(--th) calc(70% * var(--ts)) 97%);--green:hsl(var(--th) calc(55% * var(--ts)) 60%);--line:hsl(var(--th) calc(50% * var(--ts)) 92%)}
[data-theme] body{background:var(--cream)}

[data-mode="dark"]{--ink:#ece6ea;--muted:#a59ba1;--cream:hsl(var(--th,150) 12% 9%);--green:hsl(var(--th,145) 40% 62%);--line:hsl(var(--th,150) 10% 22%);color-scheme:dark}
[data-mode="dark"] body{background:var(--cream)}
[data-mode="dark"] .pet{filter:brightness(.92)}
[data-theme] .sidebar{background:hsl(var(--th) calc(100% * var(--ts)) 98.8%)}
[data-theme] .brand{color:hsl(var(--th) calc(35% * var(--ts)) 31.4%)}
[data-theme] .brand small{color:hsl(var(--th) calc(8% * var(--ts)) 64.7%)}
[data-theme] .brand-mark{background:hsl(var(--th) calc(53.1% * var(--ts)) 85.7%);color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .nav-label{color:hsl(var(--th) calc(8% * var(--ts)) 71%)}
[data-theme] .nav-link{color:hsl(var(--th) calc(8% * var(--ts)) 56.5%)}
[data-theme] .nav-link.active,[data-theme] .nav-link:hover{background:hsl(var(--th) calc(35.3% * var(--ts)) 92.4%);color:hsl(var(--th) calc(35% * var(--ts)) 45.7%)}
[data-theme] .sidebar-bottom{background:hsl(var(--th) calc(36.8% * var(--ts)) 93.3%);color:hsl(var(--th) calc(35% * var(--ts)) 37.6%)}
[data-theme] .sidebar-bottom small{color:hsl(var(--th) calc(35% * var(--ts)) 58.8%)}
[data-theme] .topbar{color:hsl(var(--th) calc(8% * var(--ts)) 60%)}
[data-theme] .eyebrow{color:hsl(var(--th) calc(35% * var(--ts)) 58.8%)}
[data-theme] .welcome p{color:hsl(var(--th) calc(8% * var(--ts)) 62.2%)}
[data-theme] .streak{background:hsl(var(--th) calc(100% * var(--ts)) 95.5%);border:1px solid hsl(var(--th) calc(90.4% * var(--ts)) 90.2%)}
[data-theme] .pet-card{background:hsl(var(--th) calc(100% * var(--ts)) 98.8%)}
[data-theme] .pill{color:hsl(var(--th) calc(35% * var(--ts)) 51%);background:hsl(var(--th) calc(46.9% * var(--ts)) 93.7%)}
[data-theme] .online-dot{background:hsl(var(--th) calc(36.6% * var(--ts)) 64.5%)}
[data-theme] .icon-button{color:hsl(var(--th) calc(35% * var(--ts)) 65.3%)}
[data-theme] .pet-scene{background:radial-gradient(circle at 50% 40%,hsl(var(--th) calc(100% * var(--ts)) 93.3%) 0,hsl(var(--th) calc(94.2% * var(--ts)) 91.6%) 40%,hsl(var(--th) calc(77.2% * var(--ts)) 90.2%) 100%)}
[data-theme] .level{color:hsl(var(--th) calc(35% * var(--ts)) 64.3%)}
[data-theme] .pet-info p{color:hsl(var(--th) calc(8% * var(--ts)) 58.8%)}
[data-theme] .xp-row{color:hsl(var(--th) calc(8% * var(--ts)) 57.3%)}
[data-theme] .xp-row strong{color:hsl(var(--th) calc(35% * var(--ts)) 48.4%)}
[data-theme] .progress,[data-theme] .mini-track{background:hsl(var(--th) calc(35% * var(--ts)) 92.5%)}
[data-theme] .progress>div{background:hsl(var(--th) calc(35% * var(--ts)) 65.3%)}
[data-theme] .primary{background:hsl(var(--th) calc(35% * var(--ts)) 52%);border:1px solid hsl(var(--th) calc(35% * var(--ts)) 52%)}
[data-theme] .secondary{background:hsl(var(--th) calc(35% * var(--ts)) 95.7%);color:hsl(var(--th) calc(35% * var(--ts)) 45.3%);border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89.4%)}
[data-theme] .subtle{color:hsl(var(--th) calc(35% * var(--ts)) 72.4%)}
[data-theme] .peach{background:hsl(var(--th) calc(100% * var(--ts)) 95.7%)}
[data-theme] .lavender{background:hsl(var(--th) calc(52.4% * var(--ts)) 95.9%)}
[data-theme] .mint{background:hsl(var(--th) calc(41.7% * var(--ts)) 94.1%)}
[data-theme] .metric-icon{background:hsl(var(--th) calc(100% * var(--ts)) 98%)}
[data-theme] .lavender .metric-icon{background:hsl(var(--th) calc(45.5% * var(--ts)) 97.8%)}
[data-theme] .mint .metric-icon{color:hsl(var(--th) calc(35% * var(--ts)) 59.6%);background:hsl(var(--th) calc(48.1% * var(--ts)) 97.5%)}
[data-theme] .metric-name{color:hsl(var(--th) calc(8% * var(--ts)) 48.8%)}
[data-theme] .metric .mini-track{background:hsl(var(--th) calc(94% * var(--ts)) 89.2%)}
[data-theme] .mint .mini-track{background:hsl(var(--th) calc(36.3% * var(--ts)) 87.8%)}
[data-theme] .mint .mini-track i{background:hsl(var(--th) calc(35% * var(--ts)) 65.7%)}
[data-theme] .metric small{color:hsl(var(--th) calc(8% * var(--ts)) 63.5%)}
[data-theme] .heart{background:hsl(var(--th) calc(100% * var(--ts)) 96.1%)}
[data-theme] .care-row{border-top:1px solid hsl(var(--th) calc(42% * var(--ts)) 93.1%)}
[data-theme] .hunger{background:hsl(var(--th) calc(100% * var(--ts)) 94.9%)}
[data-theme] .energy{background:hsl(var(--th) calc(60% * var(--ts)) 96.1%)}
[data-theme] .happy{background:hsl(var(--th) calc(52.4% * var(--ts)) 93.9%);color:hsl(var(--th) calc(35% * var(--ts)) 63.1%)}
[data-theme] .care-row small{color:hsl(var(--th) calc(8% * var(--ts)) 66.3%)}
[data-theme] .care-status{color:hsl(var(--th) calc(35% * var(--ts)) 56.5%);background:hsl(var(--th) calc(48.1% * var(--ts)) 94.9%)}
[data-theme] .timeline:before{background:hsl(var(--th) calc(35% * var(--ts)) 91.8%)}
[data-theme] .timeline-dot{background:hsl(var(--th) calc(43.7% * var(--ts)) 92.2%);color:hsl(var(--th) calc(35% * var(--ts)) 53.3%)}
[data-theme] .timeline-dot.current{background:hsl(var(--th) calc(35% * var(--ts)) 55.1%)}
[data-theme] .timeline-dot.future{background:hsl(var(--th) calc(35% * var(--ts)) 94.5%);color:hsl(var(--th) calc(35% * var(--ts)) 73.5%)}
[data-theme] .timeline small{color:hsl(var(--th) calc(35% * var(--ts)) 69%)}
[data-theme] .next-card{background:hsl(var(--th) calc(41.7% * var(--ts)) 93.5%)}
[data-theme] .next-icon{color:hsl(var(--th) calc(35% * var(--ts)) 69%)}
[data-theme] .next-card p{color:hsl(var(--th) calc(35% * var(--ts)) 56.9%)}
[data-theme] .next-card button{color:hsl(var(--th) calc(35% * var(--ts)) 50.2%)}
[data-theme] .demo-note{color:hsl(var(--th) calc(8% * var(--ts)) 66.5%)}
[data-theme] dialog{border:1px solid hsl(var(--th) calc(38% * var(--ts)) 89.2%);box-shadow:0 25px 70px hsl(var(--th) calc(35% * var(--ts)) 29.6% / 0.26666666666666666);background:hsl(var(--th) calc(100% * var(--ts)) 98.8%)}
[data-theme] dialog::backdrop{background:hsl(var(--th) calc(35% * var(--ts)) 23.3% / 0.5490196078431373)}
[data-theme] dialog p{color:hsl(var(--th) calc(8% * var(--ts)) 59%)}
[data-theme] .close{color:hsl(var(--th) calc(35% * var(--ts)) 57.1%)}
[data-theme] .egg-tile{border:1px solid hsl(var(--th) calc(39.7% * var(--ts)) 92.4%)}
[data-theme] .egg-tile small{color:hsl(var(--th) calc(8% * var(--ts)) 67.6%)}
@media(max-width:760px){[data-theme] .mobile-brand{color:hsl(var(--th) calc(35% * var(--ts)) 45.5%)}}
[data-theme] .calorie-total{color:hsl(var(--th) calc(35% * var(--ts)) 51.2%)}
[data-theme] .meal-intro{color:hsl(var(--th) calc(8% * var(--ts)) 62.9%)}
[data-theme] .meal-form label{color:hsl(var(--th) calc(35% * var(--ts)) 53.9%)}
[data-theme] .meal-form input,[data-theme] .meal-form select,[data-theme] .scan-row input{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89.4%);background:hsl(var(--th) calc(41.7% * var(--ts)) 98.8%)}
[data-theme] .scan-photo{background:hsl(var(--th) calc(41.7% * var(--ts)) 94.1%);color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .scan-row span{color:hsl(var(--th) calc(35% * var(--ts)) 69%)}
[data-theme] .scan-row button{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89%);color:hsl(var(--th) calc(35% * var(--ts)) 46.1%)}
[data-theme] .scan-status{color:hsl(var(--th) calc(35% * var(--ts)) 50.2%)}
[data-theme] .meal-list{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 93.7%)}
[data-theme] .meal-item{border-bottom:1px solid hsl(var(--th) calc(35% * var(--ts)) 93.7%)}
[data-theme] .meal-item small{color:hsl(var(--th) calc(35% * var(--ts)) 66.1%)}
[data-theme] .meal-item .meal-kcal{color:hsl(var(--th) calc(35% * var(--ts)) 51.2%)}
[data-theme] .meal-item button{color:hsl(var(--th) calc(35% * var(--ts)) 66.1%)}
[data-theme] .empty-meals{color:hsl(var(--th) calc(35% * var(--ts)) 66.1%)}
[data-theme] .food-source{color:hsl(var(--th) calc(35% * var(--ts)) 66.5%)}
[data-theme] .food-source a{color:hsl(var(--th) calc(35% * var(--ts)) 52%)}
[data-theme] .sleep-quality{background:hsl(var(--th) calc(68% * var(--ts)) 95.1%)}
[data-theme] .sleep-intro{color:hsl(var(--th) calc(8% * var(--ts)) 61.8%)}
[data-theme] .sleep-summary>div{background:hsl(var(--th) calc(42.9% * var(--ts)) 97.3%)}
[data-theme] .sleep-summary span{color:hsl(var(--th) calc(8.7% * var(--ts)) 52.7%)}
[data-theme] .sleep-summary small{color:hsl(var(--th) calc(9.8% * var(--ts)) 66.1%)}
[data-theme] .stage-legend span{color:hsl(var(--th) calc(8% * var(--ts)) 56.3%)}
[data-theme] .stage-legend strong{color:hsl(var(--th) calc(8.8% * var(--ts)) 35.7%)}
[data-theme] .sleep-explainer{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 94.5%);color:hsl(var(--th) calc(8% * var(--ts)) 62.7%)}
[data-theme] .stress-badge{background:hsl(var(--th) calc(41.7% * var(--ts)) 93.5%);color:hsl(var(--th) calc(35% * var(--ts)) 47.6%)}
[data-theme] .stress-intro{color:hsl(var(--th) calc(8% * var(--ts)) 61.8%)}
[data-theme] .stress-result{background:hsl(var(--th) calc(41.7% * var(--ts)) 95.3%)}
[data-theme] .stress-heart{color:hsl(var(--th) calc(35% * var(--ts)) 66.3%)}
[data-theme] .stress-result>span{color:hsl(var(--th) calc(35% * var(--ts)) 54.5%)}
[data-theme] .stress-result>strong{color:hsl(var(--th) calc(35% * var(--ts)) 40.8%)}
[data-theme] .stress-result p{color:hsl(var(--th) calc(35% * var(--ts)) 53.9%)}
[data-theme] .stress-inputs{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%)}
[data-theme] .stress-inputs label{color:hsl(var(--th) calc(35% * var(--ts)) 48.6%)}
[data-theme] .stress-inputs input{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 88.6%);color:hsl(var(--th) calc(35% * var(--ts)) 28.8%)}
[data-theme] .stress-inputs label span{color:hsl(var(--th) calc(8% * var(--ts)) 66.1%)}
[data-theme] .stress-inputs small{color:hsl(var(--th) calc(8% * var(--ts)) 66.1%)}
[data-theme] .stress-explainer{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%);color:hsl(var(--th) calc(8% * var(--ts)) 63.3%)}
[data-theme] .blush{background:hsl(var(--th) calc(100% * var(--ts)) 96.9%)}
[data-theme] .blush .metric-icon{background:hsl(var(--th) calc(100% * var(--ts)) 98.6%)}
[data-theme] .body-intro{color:hsl(var(--th) calc(8% * var(--ts)) 61.8%)}
[data-theme] .body-tile{background:hsl(var(--th) calc(35% * var(--ts)) 96.3%);border:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%)}
[data-theme] .body-tile:nth-child(2){background:hsl(var(--th) calc(100% * var(--ts)) 97.3%);border-color:hsl(var(--th) calc(50% * var(--ts)) 94%)}
[data-theme] .body-tile:nth-child(3){background:hsl(var(--th) calc(41.2% * var(--ts)) 96.7%);border-color:hsl(var(--th) calc(35% * var(--ts)) 94%)}
[data-theme] .body-tile:nth-child(4){background:hsl(var(--th) calc(35% * var(--ts)) 95.9%);border-color:hsl(var(--th) calc(35% * var(--ts)) 92.4%)}
[data-theme] .body-tile:nth-child(5){background:hsl(var(--th) calc(35% * var(--ts)) 97.1%);border-color:hsl(var(--th) calc(35% * var(--ts)) 94%)}
[data-theme] .body-icon{color:hsl(var(--th) calc(35% * var(--ts)) 57.3%)}
[data-theme] .body-name{color:hsl(var(--th) calc(35% * var(--ts)) 53.5%)}
[data-theme] .body-tile strong small{color:hsl(var(--th) calc(35% * var(--ts)) 56.5%)}
[data-theme] .body-tile p{color:hsl(var(--th) calc(35% * var(--ts)) 66.1%)}
[data-theme] .body-footnote{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 93.3%);color:hsl(var(--th) calc(8% * var(--ts)) 63.9%)}
[data-theme] .sky{background:hsl(var(--th) calc(54.5% * var(--ts)) 95.7%)}
[data-theme] .sky .metric-icon{background:hsl(var(--th) calc(93.8% * var(--ts)) 98.4%)}
[data-theme] .sky .mini-track{background:hsl(var(--th) calc(57.3% * var(--ts)) 90.6%)}
[data-theme] .sky .mini-track i{background:hsl(var(--th) calc(42.7% * var(--ts)) 67.8%)}
[data-theme] .recovery-label{background:hsl(var(--th) calc(38.8% * var(--ts)) 94.3%);color:hsl(var(--th) calc(35% * var(--ts)) 50.6%)}
[data-theme] .recovery-intro{color:hsl(var(--th) calc(8% * var(--ts)) 61.8%)}
[data-theme] .recovery-overview{background:hsl(var(--th) calc(35% * var(--ts)) 94.7%)}
[data-theme] .recovery-count{color:hsl(var(--th) calc(35% * var(--ts)) 48.8%)}
[data-theme] .recovery-count strong{color:hsl(var(--th) calc(35% * var(--ts)) 40.2%)}
[data-theme] .recovery-track{background:hsl(var(--th) calc(35% * var(--ts)) 89%)}
[data-theme] .recovery-track i{background:hsl(var(--th) calc(35% * var(--ts)) 64.9%)}
[data-theme] .recovery-overview p{color:hsl(var(--th) calc(35% * var(--ts)) 54.9%)}
[data-theme] .recovery-signals>div{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.9%)}
[data-theme] .recovery-signals span{color:hsl(var(--th) calc(35% * var(--ts)) 49.6%)}
[data-theme] .recovery-signals small{color:hsl(var(--th) calc(35% * var(--ts)) 66.1%)}
[data-theme] .recovery-controls{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 93.5%)}
[data-theme] .recovery-controls label{color:hsl(var(--th) calc(35% * var(--ts)) 49%)}
[data-theme] .recovery-controls input{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89.2%);color:hsl(var(--th) calc(35% * var(--ts)) 37.1%)}
[data-theme] .recovery-controls small{color:hsl(var(--th) calc(8% * var(--ts)) 66.1%)}
[data-theme] .recovery-footnote{color:hsl(var(--th) calc(8% * var(--ts)) 64.5%)}
[data-theme] .point-chip{background:hsl(var(--th) calc(100% * var(--ts)) 92.5%)}
[data-theme] .shop-balance{background:hsl(var(--th) calc(100% * var(--ts)) 93.7%)}
[data-theme] .shop-intro{color:hsl(var(--th) calc(8% * var(--ts)) 61%)}
[data-theme] .shop-progress{background:hsl(var(--th) calc(44.6% * var(--ts)) 94.5%);color:hsl(var(--th) calc(35% * var(--ts)) 51%)}
[data-theme] .shop-tabs button{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 90.8%);color:hsl(var(--th) calc(35% * var(--ts)) 54.7%)}
[data-theme] .shop-tabs button.selected{background:hsl(var(--th) calc(35% * var(--ts)) 52.2%);border-color:hsl(var(--th) calc(35% * var(--ts)) 52.2%)}
[data-theme] .shop-item{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%);background:hsl(var(--th) calc(83.3% * var(--ts)) 98.8%)}
[data-theme] .shop-item-icon{background:hsl(var(--th) calc(46.9% * var(--ts)) 93.7%)}
[data-theme] .shop-item p{color:hsl(var(--th) calc(8% * var(--ts)) 64.5%)}
[data-theme] .shop-item-footer button{background:hsl(var(--th) calc(39.3% * var(--ts)) 93.1%);color:hsl(var(--th) calc(35% * var(--ts)) 45.1%)}
[data-theme] .shop-item-footer button:hover{background:hsl(var(--th) calc(38.8% * var(--ts)) 88.6%)}
[data-theme] .shop-status{color:hsl(var(--th) calc(35% * var(--ts)) 49.8%)}
[data-theme] .shop-footnote{color:hsl(var(--th) calc(8% * var(--ts)) 66.3%)}
[data-theme] .health-button{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89.2%);background:hsl(var(--th) calc(41.7% * var(--ts)) 94.7%);color:hsl(var(--th) calc(35% * var(--ts)) 45.3%)}
[data-theme] .health-button:hover{background:hsl(var(--th) calc(41.7% * var(--ts)) 91.2%)}
[data-theme] .health-status{color:hsl(var(--th) calc(35% * var(--ts)) 50%)}
[data-theme] .wellness-log>p,[data-theme] .profile-dialog p{color:hsl(var(--th) calc(35% * var(--ts)) 55.9%)}
[data-theme] .water-total{color:hsl(var(--th) calc(35.9% * var(--ts)) 54.9%)}
[data-theme] .water-progress{background:hsl(var(--th) calc(51.5% * var(--ts)) 93.3%)}
[data-theme] .water-progress i{background:hsl(var(--th) calc(55.8% * var(--ts)) 68.8%)}
[data-theme] .wellness-form label,[data-theme] .profile-dialog form>label:not(.check-row){color:hsl(var(--th) calc(35% * var(--ts)) 53.9%)}
[data-theme] .wellness-form input,[data-theme] .wellness-form select,[data-theme] .profile-dialog input[type=text]{border:1px solid hsl(var(--th) calc(35% * var(--ts)) 89.4%);background:hsl(var(--th) calc(41.7% * var(--ts)) 98.8%)}
[data-theme] .wellness-form button,[data-theme] .water-quick button,[data-theme] .profile-dialog form button{background:hsl(var(--th) calc(35.6% * var(--ts)) 64.9%)}
[data-theme] .water-quick button{background:hsl(var(--th) calc(53.6% * var(--ts)) 93.1%);color:hsl(var(--th) calc(35% * var(--ts)) 45.9%)}
[data-theme] .wellness-list{border-top:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%)}
[data-theme] .wellness-entry{border-bottom:1px solid hsl(var(--th) calc(35% * var(--ts)) 92.7%);color:hsl(var(--th) calc(35% * var(--ts)) 42.9%)}
[data-theme] .profile-dialog{box-shadow:0 15px 60px hsl(var(--th) calc(35% * var(--ts)) 24.9% / 0.18823529411764706)}
[data-theme] .profile-dialog::backdrop{background:hsl(var(--th) calc(35% * var(--ts)) 16.5% / 0.5019607843137255)}
[data-theme] .profile-dialog .check-row{color:hsl(var(--th) calc(35% * var(--ts)) 42.7%)}
[data-theme] .aqua{background:hsl(var(--th) calc(62.5% * var(--ts)) 94.5%)}
[data-theme] .aqua .mini-track{background:hsl(var(--th) calc(60.3% * var(--ts)) 88.6%)}
[data-theme] .aqua .mini-track i{background:hsl(var(--th) calc(55.8% * var(--ts)) 68.8%)}
[data-theme] .cycle-private{background:hsl(var(--th) calc(41.7% * var(--ts)) 95.3%);color:hsl(var(--th) calc(35% * var(--ts)) 53.3%)}
[data-theme] .cycle-date-heading{border-top:1px solid hsl(var(--th) calc(40.8% * var(--ts)) 92.7%)}
[data-theme] .cycle-date-heading small{color:hsl(var(--th) calc(8% * var(--ts)) 65.9%)}
[data-theme] .cycle-date-heading button{background:hsl(var(--th) calc(35% * var(--ts)) 97.1%);color:hsl(var(--th) calc(8% * var(--ts)) 44.1%)}
[data-theme] .cycle-days{border-bottom:1px solid hsl(var(--th) calc(40.8% * var(--ts)) 92.7%)}
[data-theme] .cycle-day{background:hsl(var(--th) calc(35% * var(--ts)) 96.7%);color:hsl(var(--th) calc(8% * var(--ts)) 66.9%)}
[data-theme] .cycle-day.selected{background:hsl(var(--th) calc(100% * var(--ts)) 96.7%)}
[data-theme] .cycle-log-heading span{color:hsl(var(--th) calc(8% * var(--ts)) 65.7%)}
[data-theme] .cycle-option{background:hsl(var(--th) calc(100% * var(--ts)) 96.9%)}
[data-theme] .cycle-option.other-option{background:hsl(var(--th) calc(77.8% * var(--ts)) 96.5%)}
[data-theme] .cycle-option.factor-option{background:hsl(var(--th) calc(35% * var(--ts)) 96.5%)}
[data-theme] .cycle-option summary small{color:hsl(var(--th) calc(8% * var(--ts)) 65.9%)}
[data-theme] .cycle-option.factor-option summary b{color:hsl(var(--th) calc(8% * var(--ts)) 59.2%)}
[data-theme] .cycle-inline-form label{color:hsl(var(--th) calc(35% * var(--ts)) 53.9%)}
[data-theme] .cycle-inline-form button{background:hsl(var(--th) calc(35.6% * var(--ts)) 64.9%)}
[data-mode="dark"] .sidebar{background:hsl(var(--th,40) calc(45% * var(--ts,1)) 12.1%)}
[data-mode="dark"] .brand{color:hsl(var(--th,143) calc(35% * var(--ts,1)) 74.5%)}
[data-mode="dark"] .brand small{color:hsl(var(--th,78) calc(18% * var(--ts,1)) 42.8%)}
[data-mode="dark"] .brand-mark{background:hsl(var(--th,89) calc(45% * var(--ts,1)) 23.9%);color:hsl(var(--th,117) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .nav-label{color:hsl(var(--th,90) calc(18% * var(--ts,1)) 37.1%)}
[data-mode="dark"] .nav-link{color:hsl(var(--th,126) calc(18% * var(--ts,1)) 50.2%)}
[data-mode="dark"] .nav-link.active,[data-mode="dark"] .nav-link:hover{background:hsl(var(--th,104) calc(35.3% * var(--ts,1)) 17.9%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.7%)}
[data-mode="dark"] .sidebar-bottom{background:hsl(var(--th,96) calc(36.8% * var(--ts,1)) 17%);color:hsl(var(--th,135) calc(35% * var(--ts,1)) 70.7%)}
[data-mode="dark"] .sidebar-bottom small{color:hsl(var(--th,125) calc(35% * var(--ts,1)) 48.1%)}
[data-mode="dark"] .topbar{color:hsl(var(--th,127) calc(18% * var(--ts,1)) 47%)}
[data-mode="dark"] .avatar{background:hsl(32 46.8% 24.9%);color:hsl(27 22.6% 69.8%)}
[data-mode="dark"] .eyebrow{color:hsl(var(--th,127) calc(35% * var(--ts,1)) 48.1%)}
[data-mode="dark"] .eyebrow span{color:hsl(39 55% 42.9%)}
[data-mode="dark"] .wave{color:hsl(38 55% 41.4%)}
[data-mode="dark"] .welcome p{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 45.1%)}
[data-mode="dark"] .streak{background:hsl(var(--th,37) calc(45% * var(--ts,1)) 15.1%);border:1px solid hsl(var(--th,37) calc(45% * var(--ts,1)) 19.8%);color:hsl(31 34.9% 54.9%)}
[data-mode="dark"] .streak span{color:hsl(37 22.6% 46.1%)}
[data-mode="dark"] .pet-card,[data-mode="dark"] .metrics,[data-mode="dark"] .care-card,[data-mode="dark"] .journey-card,[data-mode="dark"] .next-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .pet-card{background:hsl(var(--th,40) calc(45% * var(--ts,1)) 12.1%)}
[data-mode="dark"] .pill{color:hsl(var(--th,124) calc(35% * var(--ts,1)) 55.1%);background:hsl(var(--th,100) calc(45% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .online-dot{background:hsl(var(--th,114) calc(36.6% * var(--ts,1)) 42.9%)}
[data-mode="dark"] .icon-button{color:hsl(var(--th,115) calc(35% * var(--ts,1)) 42.2%)}
[data-mode="dark"] .pet-scene{background:radial-gradient(circle at 50% 40%,hsl(var(--th,49) calc(45% * var(--ts,1)) 17%) 0,hsl(var(--th,50) calc(45% * var(--ts,1)) 18.6%) 40%,hsl(var(--th,51) calc(45% * var(--ts,1)) 19.8%) 100%)}
[data-mode="dark"] .orbit{border:1px solid hsl(var(--th,150) 10% 11% / 0.8)}
[data-mode="dark"] .decor{color:hsl(43 55% 38.5%)}
[data-mode="dark"] .flower{color:hsl(19 55% 30.2%)}

[data-mode="dark"] .level{color:hsl(var(--th,83) calc(35% * var(--ts,1)) 43.1%)}
[data-mode="dark"] .pet-info h2 span{color:hsl(40 55% 42.1%)}
[data-mode="dark"] .pet-info p{color:hsl(var(--th,114) calc(18% * var(--ts,1)) 48.1%)}
[data-mode="dark"] .xp-row{color:hsl(var(--th,125) calc(18% * var(--ts,1)) 49.5%)}
[data-mode="dark"] .xp-row strong{color:hsl(var(--th,136) calc(35% * var(--ts,1)) 64%)}
[data-mode="dark"] .progress,[data-mode="dark"] .mini-track{background:hsl(var(--th,82) calc(35% * var(--ts,1)) 17.7%)}
[data-mode="dark"] .progress>div{background:hsl(var(--th,111) calc(35% * var(--ts,1)) 42.2%)}
[data-mode="dark"] .primary{background:hsl(var(--th,132) calc(35% * var(--ts,1)) 54.2%);border:1px solid hsl(var(--th,132) calc(35% * var(--ts,1)) 54.2%)}
[data-mode="dark"] .secondary{background:hsl(var(--th,80) calc(35% * var(--ts,1)) 14.9%);color:hsl(var(--th,137) calc(35% * var(--ts,1)) 65.9%);border:1px solid hsl(var(--th,96) calc(35% * var(--ts,1)) 20.5%)}
[data-mode="dark"] .subtle{color:hsl(var(--th,104) calc(35% * var(--ts,1)) 35.9%)}
[data-mode="dark"] .peach{background:hsl(var(--th,25) calc(45% * var(--ts,1)) 14.9%)}
[data-mode="dark"] .lavender{background:hsl(var(--th,251) calc(45% * var(--ts,1)) 14.7%)}
[data-mode="dark"] .mint{background:hsl(var(--th,132) calc(41.7% * var(--ts,1)) 16.3%)}
[data-mode="dark"] .metric-icon{color:hsl(27 55% 39.9%);background:hsl(var(--th,24) calc(45% * var(--ts,1)) 12.8%)}
[data-mode="dark"] .lavender .metric-icon{color:hsl(254 33.8% 37.1%);background:hsl(var(--th,252) calc(45% * var(--ts,1)) 12.9%)}
[data-mode="dark"] .mint .metric-icon{color:hsl(var(--th,142) calc(35% * var(--ts,1)) 47.4%);background:hsl(var(--th,132) calc(45% * var(--ts,1)) 13.3%)}
[data-mode="dark"] .metric-name{color:hsl(var(--th,28) calc(18% * var(--ts,1)) 63.7%)}
[data-mode="dark"] .metric-name span{color:hsl(30 19.2% 36.8%)}
[data-mode="dark"] .metric-value span{color:hsl(30 12.2% 45.6%)}
[data-mode="dark"] .metric .mini-track{background:hsl(var(--th,24) calc(45% * var(--ts,1)) 20.7%)}
[data-mode="dark"] .metric .mini-track i{background:hsl(25 55% 33.8%)}
[data-mode="dark"] .lavender .mini-track{background:hsl(254 42.9% 19.6%)}
[data-mode="dark"] .lavender .mini-track i{background:hsl(259 35.4% 33.4%)}
[data-mode="dark"] .mint .mini-track{background:hsl(var(--th,133) calc(36.3% * var(--ts,1)) 21.9%)}
[data-mode="dark"] .mint .mini-track i{background:hsl(var(--th,140) calc(35% * var(--ts,1)) 41.9%)}
[data-mode="dark"] .metric small{color:hsl(var(--th,30) calc(18% * var(--ts,1)) 43.8%)}
[data-mode="dark"] .heart{color:hsl(16 55% 29.5%);background:hsl(var(--th,15) calc(45% * var(--ts,1)) 14.5%)}
[data-mode="dark"] .care-row{border-top:1px solid hsl(var(--th,51) calc(42% * var(--ts,1)) 17.2%)}
[data-mode="dark"] .hunger{background:hsl(var(--th,30) calc(45% * var(--ts,1)) 15.6%);color:hsl(31 55% 43.1%)}
[data-mode="dark"] .energy{background:hsl(var(--th,255) calc(45% * var(--ts,1)) 14.5%);color:hsl(262 27.8% 38.9%)}
[data-mode="dark"] .happy{background:hsl(var(--th,102) calc(45% * var(--ts,1)) 16.5%);color:hsl(var(--th,119) calc(35% * var(--ts,1)) 44.2%)}
[data-mode="dark"] .care-row small{color:hsl(var(--th,108) calc(18% * var(--ts,1)) 41.4%)}
[data-mode="dark"] .care-status{color:hsl(var(--th,124) calc(35% * var(--ts,1)) 50.2%);background:hsl(var(--th,108) calc(45% * var(--ts,1)) 15.6%)}
[data-mode="dark"] .timeline:before{background:hsl(var(--th,102) calc(35% * var(--ts,1)) 18.4%)}
[data-mode="dark"] .timeline-dot{background:hsl(var(--th,99) calc(43.7% * var(--ts,1)) 18.1%);color:hsl(var(--th,120) calc(35% * var(--ts,1)) 53%)}
[data-mode="dark"] .timeline-dot.current{background:hsl(var(--th,126) calc(35% * var(--ts,1)) 51.4%);color:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .timeline-dot.future{background:hsl(var(--th,70) calc(35% * var(--ts,1)) 15.9%);color:hsl(var(--th,106) calc(35% * var(--ts,1)) 34.8%)}
[data-mode="dark"] .timeline small{color:hsl(var(--th,100) calc(35% * var(--ts,1)) 38.9%)}
[data-mode="dark"] .next-card{background:hsl(var(--th,82) calc(41.7% * var(--ts,1)) 16.8%)}
[data-mode="dark"] .next-icon{color:hsl(var(--th,99) calc(35% * var(--ts,1)) 38.9%)}
[data-mode="dark"] .next-card p{color:hsl(var(--th,102) calc(35% * var(--ts,1)) 49.8%)}
[data-mode="dark"] .next-card button{color:hsl(var(--th,126) calc(35% * var(--ts,1)) 55.8%)}
[data-mode="dark"] .demo-note{color:hsl(var(--th,107) calc(18% * var(--ts,1)) 41.2%)}
[data-mode="dark"] dialog{border:1px solid hsl(var(--th,53) calc(38% * var(--ts,1)) 20.7%);box-shadow:0 25px 70px hsl(var(--th,122) calc(35% * var(--ts,1)) 75.6% / 0.26666666666666666);background:hsl(var(--th,40) calc(45% * var(--ts,1)) 12.1%)}
[data-mode="dark"] dialog::backdrop{background:hsl(var(--th,140) calc(35% * var(--ts,1)) 79.5% / 0.5490196078431373)}
[data-mode="dark"] dialog p{color:hsl(var(--th,115) calc(18% * var(--ts,1)) 47.9%)}
[data-mode="dark"] .close{color:hsl(var(--th,116) calc(35% * var(--ts,1)) 49.6%)}
[data-mode="dark"] .egg-tile{border:1px solid hsl(var(--th,51) calc(39.7% * var(--ts,1)) 17.9%);background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .egg-tile small{color:hsl(var(--th,107) calc(18% * var(--ts,1)) 40.1%)}
@media(max-width:760px){[data-mode="dark"] .mobile-brand{color:hsl(var(--th,138) calc(35% * var(--ts,1)) 65.8%)}}
[data-mode="dark"] .meal-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .calorie-total{color:hsl(var(--th,131) calc(35% * var(--ts,1)) 54.9%)}
[data-mode="dark"] .meal-intro{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 44.4%)}
[data-mode="dark"] .meal-form label{color:hsl(var(--th,140) calc(35% * var(--ts,1)) 52.5%)}
[data-mode="dark"] .meal-form input,[data-mode="dark"] .meal-form select,[data-mode="dark"] .scan-row input{border:1px solid hsl(var(--th,84) calc(35% * var(--ts,1)) 20.5%);background:hsl(var(--th,90) calc(41.7% * var(--ts,1)) 12.1%)}
[data-mode="dark"] .scan-photo{background:hsl(var(--th,102) calc(41.7% * var(--ts,1)) 16.3%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .scan-row span{color:hsl(var(--th,100) calc(35% * var(--ts,1)) 38.9%)}
[data-mode="dark"] .scan-row button{border:1px solid hsl(var(--th,110) calc(35% * var(--ts,1)) 20.9%);background:hsl(var(--th,150) 10% 11%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 65.4%)}
[data-mode="dark"] .scan-status{color:hsl(var(--th,132) calc(35% * var(--ts,1)) 55.8%)}
[data-mode="dark"] .meal-list{border-top:1px solid hsl(var(--th,75) calc(35% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .meal-item{border-bottom:1px solid hsl(var(--th,75) calc(35% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .meal-item small{color:hsl(var(--th,115) calc(35% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .meal-item .meal-kcal{color:hsl(var(--th,131) calc(35% * var(--ts,1)) 54.9%)}
[data-mode="dark"] .meal-item button{color:hsl(var(--th,115) calc(35% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .empty-meals{color:hsl(var(--th,115) calc(35% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .food-source{color:hsl(var(--th,109) calc(35% * var(--ts,1)) 41.2%)}
[data-mode="dark"] .food-source a{color:hsl(var(--th,132) calc(35% * var(--ts,1)) 54.2%)}
[data-mode="dark"] .sleep-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .sleep-quality{background:hsl(var(--th,254) calc(45% * var(--ts,1)) 15.4%);color:hsl(255 32.1% 48.9%)}
[data-mode="dark"] .sleep-intro{color:hsl(var(--th,136) calc(18% * var(--ts,1)) 45.4%)}
[data-mode="dark"] .sleep-summary>div{background:hsl(var(--th,260) calc(42.9% * var(--ts,1)) 13.5%)}
[data-mode="dark"] .sleep-summary span{color:hsl(var(--th,257) calc(18% * var(--ts,1)) 53.5%)}
[data-mode="dark"] .sleep-summary strong{color:hsl(254 12.4% 69.6%)}
[data-mode="dark"] .sleep-summary small{color:hsl(var(--th,265) calc(18% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .deep{background:hsl(255 31.6% 52.3%)}
[data-mode="dark"] .core{background:hsl(255 41.4% 31.5%)}
[data-mode="dark"] .rem{background:hsl(286 36.7% 24.9%)}
[data-mode="dark"] .stage-legend span{color:hsl(var(--th,261) calc(18% * var(--ts,1)) 50.4%)}
[data-mode="dark"] .stage-legend strong{color:hsl(var(--th,248) calc(18% * var(--ts,1)) 71.9%)}
[data-mode="dark"] .sleep-explainer{border-top:1px solid hsl(var(--th,260) calc(35% * var(--ts,1)) 15.9%);color:hsl(var(--th,140) calc(18% * var(--ts,1)) 44.5%)}
[data-mode="dark"] .stress-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .stress-badge{background:hsl(var(--th,104) calc(41.7% * var(--ts,1)) 16.8%);color:hsl(var(--th,127) calc(35% * var(--ts,1)) 64.5%)}
[data-mode="dark"] .stress-intro{color:hsl(var(--th,136) calc(18% * var(--ts,1)) 45.4%)}
[data-mode="dark"] .stress-result{background:hsl(var(--th,82) calc(41.7% * var(--ts,1)) 15.2%)}
[data-mode="dark"] .stress-heart{color:hsl(var(--th,120) calc(35% * var(--ts,1)) 41.4%)}
[data-mode="dark"] .stress-result>span{color:hsl(var(--th,137) calc(35% * var(--ts,1)) 51.9%)}
[data-mode="dark"] .stress-result>strong{color:hsl(var(--th,140) calc(35% * var(--ts,1)) 68.7%)}
[data-mode="dark"] .stress-result p{color:hsl(var(--th,136) calc(35% * var(--ts,1)) 52.5%)}
[data-mode="dark"] .stress-inputs{border:1px solid hsl(var(--th,77) calc(35% * var(--ts,1)) 17.5%)}
[data-mode="dark"] .stress-inputs label{color:hsl(var(--th,127) calc(35% * var(--ts,1)) 63.9%)}
[data-mode="dark"] .stress-inputs input{border:1px solid hsl(var(--th,105) calc(35% * var(--ts,1)) 21.2%);color:hsl(var(--th,135) calc(35% * var(--ts,1)) 76.1%)}
[data-mode="dark"] .stress-inputs label span{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .stress-inputs small{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .stress-explainer{border-top:1px solid hsl(var(--th,86) calc(35% * var(--ts,1)) 17.5%);color:hsl(var(--th,120) calc(18% * var(--ts,1)) 44%)}
[data-mode="dark"] .blush{background:hsl(var(--th,4) calc(45% * var(--ts,1)) 13.8%)}
[data-mode="dark"] .blush .metric-icon{color:hsl(0 45.7% 37.6%);background:hsl(var(--th,9) calc(45% * var(--ts,1)) 12.2%)}
[data-mode="dark"] .blush .mini-track{background:hsl(4 50.9% 20.4%)}
[data-mode="dark"] .blush .mini-track i{background:hsl(0 48% 32.7%)}
[data-mode="dark"] .blush .metric-name{color:hsl(353 14.3% 55.5%)}
[data-mode="dark"] .body-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .body-intro{color:hsl(var(--th,136) calc(18% * var(--ts,1)) 45.4%)}
[data-mode="dark"] .body-tile{background:hsl(var(--th,84) calc(35% * var(--ts,1)) 14.4%);border:1px solid hsl(var(--th,94) calc(35% * var(--ts,1)) 17.5%)}
[data-mode="dark"] .body-tile:nth-child(2){background:hsl(var(--th,17) calc(45% * var(--ts,1)) 13.5%);border-color:hsl(var(--th,19) calc(45% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .body-tile:nth-child(3){background:hsl(var(--th,206) calc(41.2% * var(--ts,1)) 14%);border-color:hsl(var(--th,204) calc(35% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .body-tile:nth-child(4){background:hsl(var(--th,168) calc(35% * var(--ts,1)) 14.7%);border-color:hsl(var(--th,160) calc(35% * var(--ts,1)) 17.9%)}
[data-mode="dark"] .body-tile:nth-child(5){background:hsl(var(--th,276) calc(35% * var(--ts,1)) 13.6%);border-color:hsl(var(--th,285) calc(35% * var(--ts,1)) 17%)}
[data-mode="dark"] .body-icon{background:hsl(var(--th,150) 10% 11%);color:hsl(var(--th,129) calc(35% * var(--ts,1)) 49.5%)}
[data-mode="dark"] .body-name{color:hsl(var(--th,144) calc(35% * var(--ts,1)) 52.8%)}
[data-mode="dark"] .body-tile strong small{color:hsl(var(--th,133) calc(35% * var(--ts,1)) 50.2%)}
[data-mode="dark"] .body-tile p{color:hsl(var(--th,131) calc(35% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .body-footnote{border-top:1px solid hsl(var(--th,90) calc(35% * var(--ts,1)) 17%);color:hsl(var(--th,132) calc(18% * var(--ts,1)) 43.5%)}
[data-mode="dark"] .sky{background:hsl(var(--th,205) calc(45% * var(--ts,1)) 14.9%)}
[data-mode="dark"] .sky .metric-icon{color:hsl(200 32.7% 46.1%);background:hsl(var(--th,200) calc(45% * var(--ts,1)) 12.4%)}
[data-mode="dark"] .sky .mini-track{background:hsl(var(--th,199) calc(45% * var(--ts,1)) 19.5%)}
[data-mode="dark"] .sky .mini-track i{background:hsl(var(--th,197) calc(42.7% * var(--ts,1)) 39.9%)}
[data-mode="dark"] .sky .metric-name{color:hsl(200 18.4% 63%)}
[data-mode="dark"] .recovery-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .recovery-label{background:hsl(var(--th,113) calc(38.8% * var(--ts,1)) 16.1%);color:hsl(var(--th,126) calc(35% * var(--ts,1)) 55.5%)}
[data-mode="dark"] .recovery-intro{color:hsl(var(--th,136) calc(18% * var(--ts,1)) 45.4%)}
[data-mode="dark"] .recovery-overview{background:hsl(var(--th,137) calc(35% * var(--ts,1)) 15.8%)}
[data-mode="dark"] .recovery-count{color:hsl(var(--th,140) calc(35% * var(--ts,1)) 63.7%)}
[data-mode="dark"] .recovery-count strong{color:hsl(var(--th,143) calc(35% * var(--ts,1)) 69.1%)}
[data-mode="dark"] .recovery-track{background:hsl(var(--th,124) calc(35% * var(--ts,1)) 20.9%)}
[data-mode="dark"] .recovery-track i{background:hsl(var(--th,130) calc(35% * var(--ts,1)) 42.6%)}
[data-mode="dark"] .recovery-overview p{color:hsl(var(--th,134) calc(35% * var(--ts,1)) 51.6%)}
[data-mode="dark"] .recovery-signals>div{border:1px solid hsl(var(--th,90) calc(35% * var(--ts,1)) 17.4%)}
[data-mode="dark"] .recovery-signals span{color:hsl(var(--th,137) calc(35% * var(--ts,1)) 63.2%)}
[data-mode="dark"] .recovery-signals small{color:hsl(var(--th,125) calc(35% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .recovery-controls{border-top:1px solid hsl(var(--th,84) calc(35% * var(--ts,1)) 16.8%)}
[data-mode="dark"] .recovery-controls label{color:hsl(var(--th,133) calc(35% * var(--ts,1)) 63.6%)}
[data-mode="dark"] .recovery-controls input{border:1px solid hsl(var(--th,115) calc(35% * var(--ts,1)) 20.7%);color:hsl(var(--th,135) calc(35% * var(--ts,1)) 71%)}
[data-mode="dark"] .recovery-controls small{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 41.5%)}
[data-mode="dark"] .recovery-footnote{color:hsl(var(--th,127) calc(18% * var(--ts,1)) 42.9%)}
[data-mode="dark"] .point-chip{background:hsl(var(--th,41) calc(45% * var(--ts,1)) 17.7%);color:hsl(32 36.8% 63.2%);border:1px solid hsl(41 55% 22.6%)}
[data-mode="dark"] .room-item{filter:drop-shadow(0 4px 2px hsl(57 17.6% 52.1% / 0.25098039215686274))}
[data-mode="dark"] .shop-card{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .shop-balance{background:hsl(var(--th,39) calc(45% * var(--ts,1)) 16.6%);color:hsl(33 34.6% 55.8%)}
[data-mode="dark"] .shop-intro{color:hsl(var(--th,131) calc(18% * var(--ts,1)) 46.1%)}
[data-mode="dark"] .shop-progress{background:hsl(var(--th,96) calc(44.6% * var(--ts,1)) 15.9%);color:hsl(var(--th,130) calc(35% * var(--ts,1)) 55.1%)}
[data-mode="dark"] .shop-tabs button{border:1px solid hsl(var(--th,107) calc(35% * var(--ts,1)) 19.3%);background:hsl(var(--th,150) 10% 11%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 51.8%)}
[data-mode="dark"] .shop-tabs button.selected{background:hsl(var(--th,131) calc(35% * var(--ts,1)) 54.1%);border-color:hsl(var(--th,131) calc(35% * var(--ts,1)) 54.1%);color:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .shop-item{border:1px solid hsl(var(--th,86) calc(35% * var(--ts,1)) 17.5%);background:hsl(var(--th,75) calc(45% * var(--ts,1)) 12.1%)}
[data-mode="dark"] .shop-item-icon{background:hsl(var(--th,85) calc(45% * var(--ts,1)) 16.6%)}
[data-mode="dark"] .shop-item p{color:hsl(var(--th,120) calc(18% * var(--ts,1)) 42.9%)}
[data-mode="dark"] .shop-item-footer span{color:hsl(35 34.7% 63.9%)}
[data-mode="dark"] .shop-item-footer button{background:hsl(var(--th,109) calc(39.3% * var(--ts,1)) 17.2%);color:hsl(var(--th,134) calc(35% * var(--ts,1)) 66%)}
[data-mode="dark"] .shop-item-footer button:hover{background:hsl(var(--th,110) calc(38.8% * var(--ts,1)) 21.2%)}
[data-mode="dark"] .shop-status{color:hsl(var(--th,132) calc(35% * var(--ts,1)) 63.1%)}
[data-mode="dark"] .shop-footnote{color:hsl(var(--th,114) calc(18% * var(--ts,1)) 41.4%)}
[data-mode="dark"] .health-button{border:1px solid hsl(var(--th,124) calc(35% * var(--ts,1)) 20.7%);background:hsl(var(--th,120) calc(41.7% * var(--ts,1)) 15.8%);color:hsl(var(--th,136) calc(35% * var(--ts,1)) 65.9%)}
[data-mode="dark"] .health-button:hover{background:hsl(var(--th,124) calc(41.7% * var(--ts,1)) 18.9%)}
[data-mode="dark"] .health-status{color:hsl(var(--th,136) calc(35% * var(--ts,1)) 63%)}
[data-mode="dark"] .other{background:hsl(227 22.6% 21.9%)}
[data-mode="dark"] .wellness-log{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .wellness-log>p,[data-mode="dark"] .profile-dialog p{color:hsl(var(--th,136) calc(35% * var(--ts,1)) 50.7%)}
[data-mode="dark"] .water-total{color:hsl(var(--th,195) calc(35.9% * var(--ts,1)) 51.6%)}
[data-mode="dark"] .water-progress{background:hsl(var(--th,189) calc(45% * var(--ts,1)) 17%)}
[data-mode="dark"] .water-progress i{background:hsl(var(--th,187) calc(45% * var(--ts,1)) 39.1%)}
[data-mode="dark"] .wellness-form label,[data-mode="dark"] .profile-dialog form>label:not(.check-row){color:hsl(var(--th,140) calc(35% * var(--ts,1)) 52.5%)}
[data-mode="dark"] .wellness-form input,[data-mode="dark"] .wellness-form select,[data-mode="dark"] .profile-dialog input[type=text]{border:1px solid hsl(var(--th,84) calc(35% * var(--ts,1)) 20.5%);background:hsl(var(--th,90) calc(41.7% * var(--ts,1)) 12.1%)}
[data-mode="dark"] .wellness-form button,[data-mode="dark"] .water-quick button,[data-mode="dark"] .profile-dialog form button{background:hsl(var(--th,136) calc(35.6% * var(--ts,1)) 42.6%);color:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .water-quick button{background:hsl(var(--th,188) calc(45% * var(--ts,1)) 17.2%);color:hsl(var(--th,192) calc(35% * var(--ts,1)) 65.6%)}
[data-mode="dark"] .wellness-list{border-top:1px solid hsl(var(--th,86) calc(35% * var(--ts,1)) 17.5%)}
[data-mode="dark"] .wellness-entry{border-bottom:1px solid hsl(var(--th,86) calc(35% * var(--ts,1)) 17.5%);color:hsl(var(--th,141) calc(35% * var(--ts,1)) 67.4%)}
[data-mode="dark"] .wellness-entry button,[data-mode="dark"] .text-button{color:hsl(0 26.7% 50%)}
[data-mode="dark"] .profile-dialog{background:hsl(var(--th,150) 10% 11%);box-shadow:0 15px 60px hsl(var(--th,132) calc(35% * var(--ts,1)) 78.6% / 0.18823529411764706)}
[data-mode="dark"] .profile-dialog::backdrop{background:hsl(var(--th,144) calc(35% * var(--ts,1)) 83.8% / 0.5019607843137255)}
[data-mode="dark"] .profile-dialog .check-row{color:hsl(var(--th,142) calc(35% * var(--ts,1)) 67.5%)}
[data-mode="dark"] .form-message{color:hsl(0 26.7% 50%)!important}
[data-mode="dark"] .aqua{background:hsl(var(--th,184) calc(45% * var(--ts,1)) 15.9%)}
[data-mode="dark"] .aqua .mini-track{background:hsl(var(--th,186) calc(45% * var(--ts,1)) 21.2%)}
[data-mode="dark"] .aqua .mini-track i{background:hsl(var(--th,187) calc(45% * var(--ts,1)) 39.1%)}
[data-mode="dark"] .cycle-log{background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .cycle-private{background:hsl(var(--th,113) calc(41.7% * var(--ts,1)) 15.2%);color:hsl(var(--th,134) calc(35% * var(--ts,1)) 53%)}
[data-mode="dark"] .cycle-date-heading{border-top:1px solid hsl(var(--th,43) calc(40.8% * var(--ts,1)) 17.5%)}
[data-mode="dark"] .cycle-date-heading small{color:hsl(var(--th,132) calc(18% * var(--ts,1)) 41.7%)}
[data-mode="dark"] .cycle-date-heading button{background:hsl(var(--th,300) calc(35% * var(--ts,1)) 13.6%);color:hsl(var(--th,137) calc(18% * var(--ts,1)) 66.6%)}
[data-mode="dark"] .cycle-days{border-bottom:1px solid hsl(var(--th,43) calc(40.8% * var(--ts,1)) 17.5%)}
[data-mode="dark"] .cycle-day{background:hsl(var(--th,252) calc(35% * var(--ts,1)) 14%);color:hsl(var(--th,240) calc(18% * var(--ts,1)) 40.8%)}
[data-mode="dark"] .cycle-day .period-marker{background:hsl(4 55% 35.4%)}
[data-mode="dark"] .cycle-day .data-marker{background:hsl(247 55% 39.6%)}
[data-mode="dark"] .cycle-day.selected{background:hsl(var(--th,7) calc(45% * var(--ts,1)) 14%);color:hsl(4 55% 46.1%)}
[data-mode="dark"] .cycle-day.selected strong{background:hsl(5 55% 35.4%);color:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .cycle-log-heading span{color:hsl(var(--th,137) calc(18% * var(--ts,1)) 41.9%)}
[data-mode="dark"] .cycle-group-label.coral{color:hsl(5 55% 39.1%)}
[data-mode="dark"] .cycle-group-label.violet{color:hsl(248 55% 42.2%)}
[data-mode="dark"] .cycle-option{background:hsl(var(--th,7) calc(45% * var(--ts,1)) 13.8%)}
[data-mode="dark"] .cycle-option.other-option{background:hsl(var(--th,249) calc(45% * var(--ts,1)) 14.2%)}
[data-mode="dark"] .cycle-option.factor-option{background:hsl(var(--th,255) calc(35% * var(--ts,1)) 14.2%)}
[data-mode="dark"] .cycle-option summary small{color:hsl(var(--th,240) calc(18% * var(--ts,1)) 41.7%)}
[data-mode="dark"] .cycle-option summary b{color:hsl(5 55% 39.1%)}
[data-mode="dark"] .cycle-option.other-option summary b{color:hsl(248 55% 41.9%)}
[data-mode="dark"] .cycle-option.factor-option summary b{color:hsl(var(--th,253) calc(18% * var(--ts,1)) 47.7%)}
[data-mode="dark"] .cycle-inline-form label{color:hsl(var(--th,140) calc(35% * var(--ts,1)) 52.5%)}
[data-mode="dark"] .cycle-inline-form select{border:1px solid hsl(253 30.4% 19.1%);background:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .cycle-inline-form button{background:hsl(var(--th,136) calc(35.6% * var(--ts,1)) 42.6%);color:hsl(var(--th,150) 10% 11%)}
[data-mode="dark"] .dark-switch input:not(:checked),[data-mode="dark"] .theme-switch input:not(:checked){background:#3a3a3c}
.mini-pet.pet-art{width:200px;height:200px;margin-left:-22px}.mini-pet.pet-art svg{display:block;width:100%;height:100%;overflow:visible}
.diner-stage.eating .mini-pet{animation:munch .2s ease-in-out .7s 8 alternate}@media(prefers-reduced-motion:reduce){.diner-stage.eating .mini-pet{animation:none}}
/* Moods: your buddy's mood and a quick check-in on how you feel. */
.feeling{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}.mood-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.mood-pill{display:inline-block;padding:5px 11px;border-radius:14px;background:#fff3d9;color:#ad8250;font-size:11px;font-weight:900}
.mood-pill[data-mood="sad"],.mood-pill[data-mood="stressed"],.mood-pill[data-mood="sick"],.mood-pill[data-mood="tired"]{background:#eef1fb;color:#6c76a8}.mood-pill[data-mood="hungry"],.mood-pill[data-mood="thirsty"]{background:#e8f6f8;color:#5f8f9c}.mood-pill[data-mood="loved"],.mood-pill[data-mood="excited"]{background:#ffe9f0;color:#c0607e}
#mood-reason{color:#88918b;font-size:11px;line-height:1.4}.feeling-q{margin:12px 0 8px;font-size:12px;font-weight:800;color:#6f7a72}.feeling-chips{display:flex;flex-wrap:wrap;gap:6px}.feeling-chips button{border:1px solid var(--line);background:#fff;color:#6f7a72;border-radius:16px;padding:6px 11px;font-size:11px;font-weight:800}.feeling-chips button[aria-pressed="true"]{background:#5e8c71;border-color:#5e8c71;color:#fff}.feeling-chips .feeling-clear{border-style:dashed}
/* The shop is a little pink market stall: a striped, scalloped awning, candy-striped posts and a counter. */
.shop-card{padding:0;overflow:hidden;border:0;background:#fff7fa;box-shadow:0 0 0 1px #f6d6e1}
.stall-awning{position:relative;height:58px;background:repeating-linear-gradient(90deg,#f5a3c0 0 40px,#fff 40px 80px);border-bottom:0;box-shadow:inset 0 10px 0 #e98bae}
.stall-awning::after{content:"";position:absolute;left:0;right:0;bottom:-18px;height:18px;background:radial-gradient(circle at 20px 0,#f5a3c0 19px,transparent 20px) 0 0/80px 18px repeat-x,radial-gradient(circle at 60px 0,#fff 19px,transparent 20px) 0 0/80px 18px repeat-x;filter:drop-shadow(0 3px 2px #d98aa61f)}
.stall-body{position:relative;padding:34px 30px 0;border-left:10px solid transparent;border-right:10px solid transparent;border-image:repeating-linear-gradient(180deg,#f5a3c0 0 14px,#fff 14px 28px) 10}
.stall-body .shop-item{background:#fff;border-color:#f6d6e1}
.stall-counter{height:30px;margin:18px -30px 0;background:#f5a3c0;box-shadow:inset 0 8px 0 #fff,inset 0 10px 0 #f0c3d3}
html[data-mode="dark"] .shop-card{background:#2a2226;box-shadow:0 0 0 1px #4a3640}html[data-mode="dark"] .stall-body .shop-item{background:#332a2e;border-color:#4a3640}
@media(max-width:600px){.stall-body{padding:30px 14px 0}.stall-counter{margin:18px -14px 0}}
/* The pet store is a mint stall next door, with the same awning and posts. */
.pet-store .stall-awning{background:repeating-linear-gradient(90deg,#8fd3bd 0 40px,#fff 40px 80px);box-shadow:inset 0 10px 0 #6fc0a6}
.pet-store .stall-awning::after{background:radial-gradient(circle at 20px 0,#8fd3bd 19px,transparent 20px) 0 0/80px 18px repeat-x,radial-gradient(circle at 60px 0,#fff 19px,transparent 20px) 0 0/80px 18px repeat-x}
.pet-store .stall-body{border-image:repeating-linear-gradient(180deg,#8fd3bd 0 14px,#fff 14px 28px) 10}
.pet-store .stall-counter{background:#8fd3bd;box-shadow:inset 0 8px 0 #fff,inset 0 10px 0 #c3e8dc}
.pet-store .stall-body .shop-item{border-color:#cdeee2}
.pet-store-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pet-store-art{width:110px;height:110px;margin:0 auto 8px}.pet-store-art img{display:block;width:100%;height:100%;object-fit:contain}
.pet-store-item.locked .pet-store-art{filter:grayscale(.6);opacity:.6}
.room-animal{position:absolute;z-index:3;right:13%;bottom:4px;width:78px;pointer-events:none}.room-animal img{display:block;width:100%;height:auto;filter:drop-shadow(0 4px 2px #9f9d7640)}
.room-animal.napping{animation:none}.room-animal.napping img{filter:saturate(.75) brightness(.95)}.room-animal.napping::after{content:'z z';position:absolute;top:-6px;right:-4px;font:900 13px Nunito,sans-serif;color:#9a8fc4}
.room-animal:not(:empty){animation:palhop 2.6s ease-in-out infinite}
@keyframes palhop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-6px)}90%{transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.room-animal:not(:empty){animation:none}}
html[data-mode="dark"] .pet-store .stall-body .shop-item{border-color:#2f4a41}
@media(max-width:600px){.pet-store-grid{grid-template-columns:1fr}.room-animal{width:60px;right:6%}}
/* Moving furniture: items shift by fractions of the scene, so container units keep layouts the same on any screen. */
.pet-scene{container-type:size}
.room-item{translate:calc(var(--dx,0) * 100cqw) calc(var(--dy,0) * 100cqh);cursor:grab;touch-action:none;user-select:none;border-radius:14px}
.room-item:empty{pointer-events:none}.room-item:active{cursor:grabbing}
.room-item.in-front{z-index:4}
.room-item.selected,.room-item:focus-visible{outline:2px dashed #f2789b;outline-offset:4px}
.room-item.trying{animation:trypop .5s ease-out}
@keyframes trypop{0%{opacity:0;transform:translateY(-14px) scale(.9)}}
.room-item[data-spot="back"].trying,.room-item[data-spot="floor"].trying{animation:none}
.room-tools,.try-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:10px 16px 0;padding:9px 12px;border-radius:14px;background:#fff1f5;font-size:12px;color:#8a5a6a}
.room-tools[hidden],.try-bar[hidden]{display:none}
.room-tools p,.try-bar p{margin:0;flex:1 1 140px}
.room-tools-row{display:inline-flex;border-radius:16px;background:#fff;padding:2px}
.room-tools button,.try-bar button{border:0;border-radius:14px;background:#fff;color:#b25b7a;padding:6px 11px;font-size:11px;font-weight:800}
.room-tools-row button[aria-pressed="true"]{background:#f5a3c0;color:#fff}
.try-bar button[data-try-action="buy"],.try-bar button[data-try-action="use"]{background:#f5a3c0;color:#fff}
.try-lock{font-weight:800;color:#a39c92}
.try-workout{width:64px;height:64px;flex:none}.try-workout svg{width:100%;height:100%;display:block}
button.shop-item-icon{border:0;padding:0;cursor:zoom-in}button.shop-item-icon:hover{box-shadow:0 0 0 2px #f6c9d9}
html[data-mode="dark"] .room-tools,html[data-mode="dark"] .try-bar{background:#33262c;color:#e9c3d1}html[data-mode="dark"] .room-tools button,html[data-mode="dark"] .try-bar button,html[data-mode="dark"] .room-tools-row{background:#46323b;color:#f3c6d6}
@media(prefers-reduced-motion:reduce){.room-item.trying{animation:none}}

/* On a phone the shop's tabs wrap and the collection picker fits the stall instead of running off the right side. */
.shop-tabs{flex-wrap:wrap}.shop-collection-label{display:flex;max-width:100%}.shop-collection-label select{min-width:0;flex:1;max-width:100%}
/* One page per section (Sophia 2026-10-05): a menu along the top swaps pages instead of one long scroll. */
.sidebar{display:none}
.page-tabs{position:sticky;top:0;z-index:20;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:14px -4px 6px;padding:8px 4px;background:var(--cream)}
.page-tabs::-webkit-scrollbar{display:none}
.page-tabs a{flex:none;padding:8px 14px;border-radius:18px;border:1px solid var(--line);background:#fff;color:#7d8a80;text-decoration:none;font-size:12px;font-weight:800;white-space:nowrap}
.page-tabs a[aria-current="page"]{background:#719879;border-color:#719879;color:#fff}
.page-tabs a[hidden]{display:none}
main{margin:0 auto}
.off-page{display:none!important}
[data-theme] .page-tabs a[aria-current="page"]{background:hsl(var(--th) calc(35% * var(--ts)) 52.2%);border-color:hsl(var(--th) calc(35% * var(--ts)) 52.2%)}
html[data-mode="dark"] .page-tabs a{background:hsl(var(--th,150) 10% 11%);border-color:hsl(var(--th,150) 10% 18%);color:hsl(var(--th,133) calc(35% * var(--ts,1)) 61.8%)}
html[data-mode="dark"] .page-tabs a[aria-current="page"]{background:hsl(var(--th,131) calc(35% * var(--ts,1)) 54.1%);color:hsl(var(--th,150) 10% 11%)}
/* Sophia's workout kit: tap a piece and Sunny walks up, gets going, works out and finishes. */
.kit-card{margin-top:20px;padding:24px;border:1px solid var(--line);border-radius:20px;background:#fff}
.kit-stage{scroll-margin-top:70px;display:grid;justify-items:center;gap:4px;margin:4px 0 18px;padding:14px;border-radius:16px;background:#f3f7ef}
.kit-stage img{width:200px;height:200px;object-fit:contain}.kit-stage img:not([src]){visibility:hidden}
.kit-stage p{margin:0;color:#6f8a74;font-size:12px;font-weight:800}
.kit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.kit-grid button{display:grid;justify-items:center;gap:4px;border:1px solid #edf0e9;border-radius:14px;background:#fdfefa;padding:10px 6px;color:#4b5a4f;font-size:11px;font-weight:800}
.kit-grid button img{width:56px;height:56px;object-fit:contain}
.kit-grid button[aria-pressed="true"]{border-color:#97bd90;box-shadow:0 0 0 2px #97bd9055}
[data-theme] .kit-stage{background:hsl(var(--th) calc(40% * var(--ts)) 95%)}
html[data-mode="dark"] .kit-card{background:hsl(var(--th,150) 10% 11%);border-color:hsl(var(--th,150) 10% 18%)}
html[data-mode="dark"] .kit-stage{background:hsl(var(--th,150) 12% 15%)}
html[data-mode="dark"] .kit-grid button{background:hsl(var(--th,150) 10% 14%);border-color:hsl(var(--th,150) 10% 20%);color:hsl(var(--th,133) 20% 75%)}
/* Protein, carbs, fat, fibre and sugar for a logged or scanned meal (Sophia, 2026-10-08). */
.meal-form .meal-nutrients{grid-column:1/-1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}@media(max-width:430px){.meal-form .meal-nutrients{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Sign-up fills the screen instead of popping up (Sophia, 2026-10-09). */
.profile-dialog.onboarding{width:100%;max-width:none;height:100%;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none;padding:max(28px,env(safe-area-inset-top)) max(20px,calc((100% - 520px) / 2)) max(28px,env(safe-area-inset-bottom))}
/* Sign-up page one: your egg, picked at random, after Sophia's dark egg picker (2026-10-09). */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.profile-dialog.egg-dark{background:radial-gradient(circle at 50% 46%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed}
.profile-dialog.egg-dark h2{color:#f8f5ed;text-align:center;margin-bottom:12px}
.profile-dialog.egg-dark .eyebrow{display:block;text-align:center;color:#aaa9ad;background:none}
.profile-dialog.egg-dark .profile-steps li{border-color:#2e2e35;color:#77767c}
.profile-dialog.egg-dark .profile-steps li.current{border-color:#f5f2ea;color:#f5f2ea}
.profile-dialog.egg-dark .profile-actions{justify-content:center}
.profile-dialog.egg-dark{overflow-x:hidden}
/* The egg field after creature.company/eyes: eggs on a honeycomb that glides past, then blurs away behind your egg. */
.egg-picker{--orb:64px;--hero:170px;--orbit:122px;position:relative;height:400px;width:100vw;margin:0 calc(50% - 50vw);overflow:hidden;-webkit-mask-image:radial-gradient(ellipse 75% 62% at 50% 48%,#000 60%,transparent);mask-image:radial-gradient(ellipse 75% 62% at 50% 48%,#000 60%,transparent)}
.egg-field{position:absolute;inset:0;transition:filter .7s ease,opacity .6s ease}
.egg-picker.waking .egg-field{opacity:0}
.egg-picker.focused .egg-field{filter:blur(7px) saturate(1.7) brightness(.5)}
.egg-cell{position:absolute;left:50%;top:50%;width:var(--orb);margin:calc(var(--orb) / -2) 0 0 calc(var(--orb) / -2);display:grid;justify-items:center;gap:2px;will-change:transform}
.egg-cell i{display:grid;place-items:center;width:var(--orb);height:var(--orb);border-radius:50%;background:#090a0d;border:1px solid #ffffff10;transition:border-color .2s,box-shadow .3s}
.egg-cell svg{width:58%;height:58%}
.egg-cell small{white-space:nowrap;color:#6f6e75;font-size:9px;font-weight:800;letter-spacing:.04em}
.egg-cell.near i{border-color:var(--accent);box-shadow:0 0 18px color-mix(in srgb,var(--accent) 70%,transparent)}
.egg-cell.near small{color:var(--accent)}
.egg-cell.under{visibility:hidden!important}
.egg-hero{position:absolute;z-index:2;left:50%;top:50%;width:var(--hero);height:var(--hero);margin:calc(var(--hero) / -2) 0 0 calc(var(--hero) / -2);display:grid;place-items:center;opacity:0;transform:scale(.55);pointer-events:none;transition:transform .3s ease,opacity .2s ease}
.egg-hero::before{content:'';position:absolute;inset:0;border-radius:50%;background:#090a0d;box-shadow:inset 0 0 0 1px #ffffff0c,0 0 90px color-mix(in srgb,var(--accent) 45%,transparent)}
.egg-picker.focused .egg-hero{opacity:1;transform:scale(1);transition:transform .7s cubic-bezier(.34,1.56,.64,1),opacity 0s}
.egg-hero-egg svg{display:block;width:59%;height:59%;transition:transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.egg-hero-egg{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%;transform-origin:50% 82%;animation:eggwiggle 2.8s ease-in-out infinite}
.egg-picker.focused .egg-hero-egg{animation:egghop .7s cubic-bezier(.34,1.56,.64,1),eggwiggle 2.8s ease-in-out .7s infinite}
.egg-shell{fill:var(--accent,#f5b94e);stroke:var(--outline,#a76c1c);stroke-width:3;stroke-linejoin:round;transition:fill .25s ease,stroke .25s ease}
.wisp-star{display:none;fill:#ffe7a0;stroke:#fff6d4;stroke-width:1.5;stroke-linejoin:round}
.egg-cell.wisp .wisp-star,.egg-hero.wisp .wisp-star{display:block}
.egg-picker.focused .egg-hero.wisp .wisp-star{animation:wispTwinkle 3.6s ease-in-out infinite}
@keyframes wispTwinkle{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes wispShell{0%,100%{fill:#b89bd8;stroke:#65477e}25%{fill:#90bce8;stroke:#4f75a1}50%{fill:#8bd1c7;stroke:#417e78}75%{fill:#d0a5d8;stroke:#855a91}}
.egg-picker.focused .egg-hero.wisp .egg-shell{animation:wispShell 9s ease-in-out infinite}
.bramble-mark,.clover-mark{display:none}
.egg-cell.bramble .bramble-mark,.egg-hero.bramble .bramble-mark,.egg-cell.clover .clover-mark,.egg-hero.clover .clover-mark{display:block}
.tiko-mark{display:none}
.egg-cell.tiko .tiko-mark,.egg-hero.tiko .tiko-mark{display:block}
.bix-mark{display:none}
.egg-cell.bix .bix-mark,.egg-hero.bix .bix-mark{display:block}
@keyframes bixShell{0%,100%{fill:#b896df;stroke:#613972}25%{fill:#91b3e8;stroke:#485a92}50%{fill:#e8a9d6;stroke:#8e4777}75%{fill:#a8d7cd;stroke:#487f79}}
@keyframes bixGem{0%,100%{fill:#48d5cd}33%{fill:#ffd479}66%{fill:#f78fcb}}
@keyframes bixScale{0%,100%{fill:#f59ac9}33%{fill:#64ddd1}66%{fill:#f5d886}}
.egg-cell.bix .egg-shell,.egg-hero.bix .egg-shell{animation:bixShell 12s ease-in-out infinite}
.egg-cell.bix .bix-gem,.egg-hero.bix .bix-gem{animation:bixGem 8s ease-in-out infinite}
.egg-cell.bix .bix-scale,.egg-hero.bix .bix-scale{animation:bixScale 9s ease-in-out infinite}
.egg-cell.bix .bix-scale:nth-of-type(3n),.egg-hero.bix .bix-scale:nth-of-type(3n){animation-delay:-3s}
.egg-cell.bix .bix-scale:nth-of-type(3n + 1),.egg-hero.bix .bix-scale:nth-of-type(3n + 1){animation-delay:-6s}
@media(prefers-reduced-motion:reduce){.egg-cell.bix .egg-shell,.egg-cell.bix .bix-gem,.egg-cell.bix .bix-scale,.egg-hero.bix .egg-shell,.egg-hero.bix .bix-gem,.egg-hero.bix .bix-scale{animation:none!important}}
.nimbus-mark{display:none}
.egg-cell.nimbus .nimbus-mark,.egg-hero.nimbus .nimbus-mark{display:block}
.nimbus-mark .nimbus-moon{filter:drop-shadow(0 0 5px #fff9e8) drop-shadow(0 0 8px #ffe8ae)}
.nimbus-mark .nimbus-star{filter:drop-shadow(0 0 4px #fff9e8)}
.custard-mark{display:none}
.egg-cell.custard .custard-mark,.egg-hero.custard .custard-mark{display:block}
.egg-shine{fill:#fff;opacity:.82}
/* Three little copies of your egg pop out from behind it and drift slowly round. */
.egg-moons{position:absolute;inset:0;animation:eggorbit 48s linear infinite}
.egg-moons span{--a:0deg;position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;transform:rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(0);transition:transform .25s ease}
.egg-moons span:nth-child(2){--a:120deg}.egg-moons span:nth-child(3){--a:240deg}
.egg-picker.focused .egg-moons span{transform:rotate(var(--a)) translateY(calc(var(--orbit) * -1)) rotate(calc(var(--a) * -1)) scale(1);transition:transform .8s cubic-bezier(.34,1.56,.64,1) .15s}
.egg-picker.focused .egg-moons span:nth-child(2){transition-delay:.25s}.egg-picker.focused .egg-moons span:nth-child(3){transition-delay:.35s}
.egg-moons em{position:relative;display:block;width:100%;height:100%;animation:eggorbit 48s linear infinite reverse}.egg-moons i{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#090a0d}
.egg-moons svg{width:60%;height:60%}
/* Two thin lines draw out to the egg's colour and its rarity. */
.egg-lines{position:absolute;z-index:0;left:50%;top:50%;width:1px;height:1px;overflow:visible}
.egg-lines path{fill:none;stroke:#ffffff66;stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .2s ease}
.egg-picker.focused .egg-lines path{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease .4s}
.egg-picker.focused .egg-lines path+path{transition-delay:.55s}
:is(.profile-dialog,.egg-wait,.egg-dex,.menu-dex) .egg-tag{position:absolute;z-index:2;width:max-content;margin:0;display:flex;align-items:center;gap:6px;white-space:nowrap;color:#8e8d93;font-size:12px;opacity:0;transform:translate(0,-50%);transition:opacity .2s}
:is(.profile-dialog,.egg-wait,.egg-dex,.menu-dex) .egg-tag-rarity{transform:translate(-100%,-50%)}
.egg-tag b{color:#fff;font-weight:800}
.egg-picker.focused .egg-tag{opacity:1;transition:opacity .4s ease .8s}
.egg-picker.focused .egg-tag-rarity{transition-delay:.95s}
.egg-swatch{width:16px;height:16px;border-radius:50%;background:linear-gradient(90deg,var(--outline) 50%,var(--accent) 50%)}
.egg-pips{display:flex;gap:3px}.egg-pips i{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.profile-dialog .egg-caption{min-height:3.4em;margin:4px 0 0;text-align:center;color:#aaa9ad;font-size:13px}
.egg-caption strong{display:block;margin-bottom:2px;color:#fff;font-size:18px}
/* Once your egg has landed the other eggs are pulled into it, nearest first, and vanish behind it; the little copies follow.
   Then your egg grows and its dark circle spreads out and fades into the background (Sophia, 2026-10-09). */
.egg-picker.absorbing .egg-field{filter:brightness(.8)}
.egg-picker.absorbing .egg-cell{transition:transform .75s cubic-bezier(.55,0,.8,.15),opacity .3s ease}
.egg-picker.absorbed .egg-field{opacity:0;visibility:hidden}
.egg-picker.focused.absorbing .egg-moons span{transform:rotate(var(--a)) translateY(0) rotate(calc(var(--a) * -1)) scale(0);transition:transform .6s cubic-bezier(.55,0,.8,.15)}
.egg-picker.focused.absorbing .egg-lines path{stroke-dashoffset:1;transition:stroke-dashoffset .2s ease}
.egg-picker.focused.absorbing .egg-tag{opacity:0;transition:opacity .2s}
.egg-picker.focused.absorbing .egg-hero-egg{animation:egggulp .9s ease-in-out .35s}
/* Sophia (2026-10-09): the dark circle stays behind your egg, growing with it. */
.egg-picker.absorbed .egg-hero::before{transform:scale(1.3);transition:transform 1.1s cubic-bezier(.34,1.56,.64,1)}
.egg-picker.absorbed .egg-hero-egg svg{transform:scale(1.3)}
@keyframes egggulp{0%,100%{transform:scale(1)}30%{transform:scale(1.07)}55%{transform:scale(.97)}80%{transform:scale(1.04)}}
@keyframes eggorbit{to{transform:rotate(360deg)}}
@keyframes eggwiggle{0%,38%,68%,100%{transform:rotate(0)}45%,48%{transform:rotate(-5deg)}54%,57%{transform:rotate(5deg)}62%,64%{transform:rotate(-2deg)}}
@keyframes egghop{0%{transform:scale(.9)}35%{transform:translateY(-10px) scale(1.12)}100%{transform:scale(1)}}
@media(max-width:480px){.egg-picker{--orb:52px;--hero:136px;--orbit:100px;height:360px}.egg-moons span{width:34px;height:34px;margin:-17px 0 0 -17px}}
@media(prefers-reduced-motion:reduce){.egg-picker *,.egg-picker.focused *{animation:none!important;transition:none!important}}
/* Tapping your egg (Sophia, 2026-10-09): it wiggles while it waits, glows and bobs once it's ready to hatch, and your petto pops out. */
.pet.pet-art.stage-egg{cursor:pointer;-webkit-tap-highlight-color:transparent}
.pet.pet-art.stage-egg:focus-visible{outline:3px solid #97bd90;outline-offset:6px;border-radius:24px}
.pet.egg-tap svg{animation:eggtap .55s ease-out;transform-origin:50% 92%}
.pet.egg-ready svg{animation:eggready 1.6s ease-in-out infinite;transform-origin:50% 92%;filter:drop-shadow(0 0 14px rgba(255,214,120,.85))}
.pet.hatched-pop svg{animation:hatchpop .8s cubic-bezier(.3,1.6,.5,1);transform-origin:50% 92%}
@keyframes eggtap{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg) scale(1.03)}45%{transform:rotate(7deg)}70%{transform:rotate(-3deg)}}
@keyframes eggready{0%,58%,100%{transform:translateY(0) rotate(0)}66%{transform:translateY(-6px) rotate(-6deg)}74%{transform:translateY(0) rotate(6deg)}82%{transform:rotate(-3deg)}}
@keyframes hatchpop{0%{transform:scale(.7);opacity:.4}60%{transform:scale(1.08);opacity:1}100%{transform:scale(1)}}
.egg-banner{position:fixed;z-index:60;top:max(10px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 24px));display:flex;gap:12px;align-items:center;padding:12px 14px;border:0;border-radius:20px;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(60,40,20,.18);text-align:left;font:inherit;color:#3a2e28;cursor:pointer;animation:bannerdrop .5s cubic-bezier(.2,1.3,.4,1)}
.egg-banner[hidden]{display:none}
.egg-banner-icon{display:grid;place-items:center;width:38px;height:38px;flex:none;border-radius:10px;background:#ffe6a6;font-size:22px}
.egg-banner strong{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;opacity:.6}
.egg-banner span span{display:block;font-size:15px;line-height:1.3}
@keyframes bannerdrop{from{transform:translate(-50%,-130%)}to{transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.pet.egg-tap svg,.pet.egg-ready svg,.pet.hatched-pop svg,.egg-banner{animation:none}}
/* The egg reel plays on its own; the words and step bars fade in when your egg lands. */
.profile-dialog.egg-dark :is(#profile-eyebrow,#profile-title,.profile-steps){transition:opacity .6s ease .15s,visibility 0s}
.profile-dialog.egg-rolling :is(#profile-eyebrow,#profile-title,.profile-steps){opacity:0;visibility:hidden;transition:none}
/* The egg field fills the whole screen with your egg in the middle; the words and Next sit on top of it (Sophia, 2026-10-09). */
.profile-dialog.egg-dark .egg-picker{position:fixed;inset:0;width:auto;height:auto;margin:0;z-index:0;-webkit-mask-image:radial-gradient(ellipse 95% 85% at 50% 50%,#000 55%,transparent);mask-image:radial-gradient(ellipse 95% 85% at 50% 50%,#000 55%,transparent)}
.profile-dialog.egg-dark :is(#profile-eyebrow,#profile-title,.profile-steps,.close){position:relative;z-index:2}
.profile-dialog.egg-dark .egg-caption{position:fixed;z-index:2;left:16px;right:16px;bottom:calc(max(28px,env(safe-area-inset-bottom)) + 62px);margin:0}
.profile-dialog.egg-dark .profile-actions{position:fixed;z-index:2;left:0;right:0;bottom:max(28px,env(safe-area-inset-bottom))}
/* After the other eggs go into yours, the three little eggs come back out and circle it, each with one of its traits (Sophia, 2026-10-09). */
.egg-picker.focused.absorbed .egg-moons span{transform:rotate(var(--a)) translateY(calc(var(--orbit) * -1.5)) rotate(calc(var(--a) * -1)) scale(1);transition:transform .9s cubic-bezier(.34,1.56,.64,1) .1s}
.egg-moons span{display:block}
.egg-moons small{position:absolute;left:50%;top:calc(100% + 4px);transform:translateX(-50%);white-space:nowrap;color:#f5f2ea;font-size:11px;font-weight:700;opacity:0;transition:opacity .4s ease}
.egg-picker.absorbed .egg-moons small{opacity:1;transition-delay:.7s}
.egg-moons small{font-style:normal}
.egg-tag{z-index:3}
/* The name and rarity lines turn round the egg with the little eggs; their words stay upright (Sophia, 2026-10-09). */
.egg-turn{position:absolute;inset:0;pointer-events:none;animation:eggorbit 48s linear infinite}
.egg-turn-lines{z-index:0}.egg-turn-tags{z-index:3}
.egg-turn .egg-tag{animation:eggunspin 48s linear infinite;transform-origin:0 0}
@keyframes eggunspin{to{rotate:-360deg}}
@media(prefers-reduced-motion:reduce){.egg-turn,.egg-turn .egg-tag{animation:none}}
/* The little eggs sit in the gaps between the name and rarity labels so nothing overlaps as they turn. */
.egg-moons span:nth-child(1){--a:110deg}.egg-moons span:nth-child(2){--a:260deg}.egg-moons span:nth-child(3){--a:330deg}
/* Your egg follows your finger or cursor inside its circle and reacts to taps: a giggle, or cross after a double tap (Sophia, 2026-10-09). */
.egg-picker.egg-live .egg-turn,.egg-picker.egg-live .egg-turn .egg-tag{animation:none}
.egg-picker.absorbed .egg-hero-egg svg{pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:none}
.egg-hero-egg.egg-giggle svg{animation:egggiggle .6s cubic-bezier(.3,1.5,.5,1)}
.egg-hero-egg.egg-cross svg{animation:eggcross .7s ease-in-out}
.egg-hero-egg.egg-cross .egg-shell{fill:color-mix(in srgb,var(--accent) 62%,#ff4d3d)}
.egg-grr{position:absolute;left:62%;top:14%;font-size:26px;font-weight:normal;opacity:0;scale:.3;pointer-events:none}
.egg-hero-egg.egg-cross .egg-grr{animation:egggrr 1.5s ease-out}
@keyframes egggiggle{0%{scale:1}25%{scale:1.12 .9}50%{scale:.94 1.08}75%{scale:1.03 .98}100%{scale:1}}
@keyframes eggcross{0%,100%{translate:0;rotate:0deg}12%{translate:-7px 0;rotate:-9deg}28%{translate:7px 0;rotate:9deg}44%{translate:-6px 0;rotate:-7deg}60%{translate:5px 0;rotate:5deg}78%{translate:-2px 0;rotate:-2deg}}
@keyframes egggrr{0%{opacity:0;scale:.3}15%{opacity:1;scale:1.2}25%{scale:.9}35%{scale:1.05}75%{opacity:1;scale:1}100%{opacity:0;scale:1}}
.egg-love,.egg-stars{position:absolute;left:50%;top:6%;width:0;height:0;pointer-events:none}
.egg-stars i{position:absolute;opacity:0}
.egg-hero-egg.egg-loved .egg-shell{fill:color-mix(in srgb,var(--accent) 72%,#ff9ec4)}
/* The rest of sign-up shares the egg page's dark look and soft motion (Sophia, 2026-10-09). */
.profile-dialog.onboarding{background:radial-gradient(circle at 50% 46%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed}
.profile-dialog.onboarding h2{color:#f8f5ed;text-align:center;margin-bottom:12px}
.profile-dialog.onboarding .eyebrow{display:block;text-align:center;color:#aaa9ad;background:none}
.profile-dialog.onboarding .profile-lede{text-align:center;color:#aaa9ad}
.profile-dialog.onboarding p{color:#aaa9ad}
.profile-dialog.onboarding .profile-steps li{border-color:#2e2e35;color:#77767c}
.profile-dialog.onboarding .profile-steps li.current{border-color:#f5f2ea;color:#f5f2ea}
.profile-dialog.onboarding legend{color:#f8f5ed}
.profile-dialog.onboarding :is(fieldset>label:not(.check-row),.field-label){color:#aaa9ad}
.profile-dialog.onboarding :is(legend small,label small,.field-label small){color:#6f6e75}
.profile-dialog.onboarding :is(input:not([type=checkbox]):not([type=radio]),select){border:1px solid #ffffff14;border-radius:14px;background:#090a0d;color:#f5f2ea;color-scheme:dark;transition:border-color .2s,box-shadow .3s}
.profile-dialog.onboarding :is(input,select)::placeholder{color:#6f6e75}
.profile-dialog.onboarding :is(input,select):focus{border-color:#ffffff40;box-shadow:0 0 0 4px #ffffff0d}
.profile-dialog.onboarding .focus-chip span{border-color:#ffffff14;background:#090a0d;color:#aaa9ad;transition:border-color .2s,color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.profile-dialog.onboarding .focus-chip input:checked+span{border-color:#f5f2ea;background:#090a0d;color:#fff;transform:scale(1.06)}
.profile-dialog.onboarding .profile-actions{justify-content:center}
.profile-dialog.onboarding form .secondary-button{background:#ffffff12;color:#f5f2ea}
.profile-dialog.onboarding form .profile-actions .text-button{color:#77767c}
.profile-dialog.onboarding .close{color:#aaa9ad}
/* Each step glides up into place like the eggs settling. */
.profile-dialog.onboarding .profile-step:not([hidden]):not(.egg-step){animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
.profile-dialog.onboarding .profile-step:not([hidden]):not(.egg-step)>*{animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
.profile-dialog.onboarding .profile-step>*:nth-child(2){animation-delay:.04s}.profile-dialog.onboarding .profile-step>*:nth-child(3){animation-delay:.08s}.profile-dialog.onboarding .profile-step>*:nth-child(4){animation-delay:.12s}.profile-dialog.onboarding .profile-step>*:nth-child(5){animation-delay:.16s}.profile-dialog.onboarding .profile-step>*:nth-child(n+6){animation-delay:.2s}
@keyframes stepin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.profile-dialog.onboarding .profile-step,.profile-dialog.onboarding .profile-step>*{animation:none!important}}
/* Next and Let's go match the dark egg page too: soft cream buttons instead of green (Sophia, 2026-10-09). */
.profile-dialog.onboarding .profile-actions button:not(.secondary-button):not(.text-button){background:#f5f2ea;color:#101114;box-shadow:0 0 24px #f5f2ea22}
/* Dizzy, but cute: a slow woozy sway with a soft lilac blush, and three pastel stars circling like a little halo (Sophia, 2026-10-09). */
.egg-hero-egg.egg-dizzy>svg{animation:eggwoozy 1.3s ease-in-out 2;filter:drop-shadow(0 0 14px #c9b6ff88)}
.egg-hero-egg.egg-dizzy .egg-shell{fill:color-mix(in srgb,var(--accent) 82%,#c9b6ff)}
.egg-stars{top:17%}
.egg-stars i{width:18px;height:18px;left:-9px;top:-9px}
.egg-stars svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 4px #fff8)}
.egg-hero-egg.egg-dizzy .egg-stars i{animation:egghalo 1.5s linear infinite,eggtwinkle .5s ease-in-out infinite alternate}
.egg-stars i:nth-child(2){animation-delay:-.5s,-.2s!important;width:14px;height:14px;left:-7px;top:-7px}
.egg-stars i:nth-child(3){animation-delay:-1s,-.35s!important}
@keyframes eggwoozy{0%,100%{rotate:0deg;translate:0 0;scale:1}20%{rotate:-7deg;translate:-5px 1px;scale:1.03 .97}45%{rotate:2deg;translate:0 -4px;scale:.98 1.03}70%{rotate:7deg;translate:5px 1px;scale:1.03 .97}88%{rotate:-2deg;translate:0 -2px}}
@keyframes egghalo{0%{opacity:1;transform:translate(-36px,0) scale(1);z-index:2}25%{opacity:1;transform:translate(0,9px) scale(1.15)}50%{opacity:1;transform:translate(36px,0) scale(1)}75%{opacity:.45;transform:translate(0,-9px) scale(.7)}100%{opacity:1;transform:translate(-36px,0) scale(1)}}
@keyframes eggtwinkle{to{rotate:25deg}}
/* Until your egg hatches the app opens on it, in the dark, with a flip-clock countdown (Sophia, 2026-10-09). */
.egg-wait{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:max(34px,env(safe-area-inset-top)) 16px max(28px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 50%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed;overflow:hidden;animation:stepin .6s ease both}
body.egg-waiting{overflow:hidden}
.egg-wait .egg-picker{position:absolute;inset:0;width:auto;height:auto;margin:0;z-index:0;-webkit-mask-image:none;mask-image:none}
.egg-wait-top,.egg-wait-bottom{position:relative;z-index:2;display:grid;justify-items:center;gap:10px;text-align:center}
.egg-wait .eyebrow{color:#aaa9ad;background:none;letter-spacing:.18em}
.egg-wait-bottom p{margin:0 0 6px;max-width:300px;color:#aaa9ad;font-size:13px;line-height:1.5}
.egg-wait-bottom button{border:0;border-radius:18px;padding:13px 22px;background:#f5f2ea;color:#101114;font-weight:800;box-shadow:0 0 24px #f5f2ea22}
.egg-wait.ready .egg-wait-bottom button{background:#ffffff12;color:#f5f2ea;box-shadow:none}
.egg-wait.ready .egg-hero-egg>svg{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 80%,transparent))}
.flip-clock{display:flex;align-items:center;gap:5px}
.flip-clock>i{font:800 30px Nunito,sans-serif;font-style:normal;color:#6f6e75;margin:0 2px 4px}
.flip{position:relative;display:block;width:44px;height:62px;perspective:260px;font:800 42px/62px Nunito,sans-serif;color:#f5f2ea}
.flip b{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#1d1e24;font-weight:inherit}
.flip b i{display:block;height:62px;font-style:normal;text-align:center}
.flip .flip-top,.flip .flip-leaf-front{top:0;border-radius:9px 9px 0 0;box-shadow:inset 0 1px 0 #ffffff10}
.flip .flip-bottom,.flip .flip-leaf-back{bottom:0;border-radius:0 0 9px 9px;background:#191a1f}
.flip .flip-bottom i,.flip .flip-leaf-back i{margin-top:-31px}
.flip::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#0b0c0f;z-index:3}
.flip .flip-leaf{z-index:2;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flip .flip-leaf-front{transform-origin:50% 100%;transform:rotateX(0)}
.flip .flip-leaf-back{transform-origin:50% 0;transform:rotateX(90deg)}
.flip.flipping .flip-leaf-front{animation:flipdown .3s ease-in forwards}
.flip.flipping .flip-leaf-back{animation:flipup .3s ease-out .3s forwards}
.flip:not(.flipping) .flip-leaf{display:none}
@keyframes flipdown{to{transform:rotateX(-90deg)}}
@keyframes flipup{to{transform:rotateX(0)}}
.flip-units{display:flex;gap:30px;color:#6f6e75;font-size:9px;font-weight:800;letter-spacing:.14em}
@media(prefers-reduced-motion:reduce){.flip.flipping .flip-leaf{animation:none}.egg-wait{animation:none}}
/* The app's dark look matches the sign-up: soft charcoal, cream words and buttons, a faint glow (Sophia, 2026-10-09).
   Without a colour theme, every dark-mode colour is drawn from a cool grey instead of green. */
html[data-mode="dark"]:not([data-theme]){--th:232;--ts:.22}
html[data-mode="dark"] body{background:radial-gradient(circle at 50% 0%,#29252b,#18191e 40%,#101114 80%) fixed #101114;color:#f8f5ed}
html[data-mode="dark"] :is(.pet-card,.metrics,.shop-card,.body-card,.recovery-card,.stress-card,.sleep-card,.meal-card,.wellness-log,.kit-card,.journey-card){border-color:#ffffff12;box-shadow:0 0 60px #00000040}
html[data-mode="dark"]:not([data-theme]) :is(.page-tabs a[aria-current="page"],.primary,.room-tabs button[aria-pressed="true"],.feeling-chips button[aria-pressed="true"]){background:#f5f2ea;color:#101114;border-color:#f5f2ea;box-shadow:0 0 24px #f5f2ea22}
html[data-mode="dark"] :is(.room-tabs button,.feeling-chips button):not([aria-pressed="true"]){background:#090a0d;border-color:#ffffff14;color:#aaa9ad}
html[data-mode="dark"] #pet-mood{background:#090a0d;color:#f5f2ea;border:1px solid #ffffff14}
html[data-mode="dark"] :is(h1,h2,h3){color:#f8f5ed}
html[data-mode="dark"] .eyebrow{color:#aaa9ad}
/* Pages glide up into place like the sign-up steps. */
html[data-mode="dark"] main>section:not([hidden]),html[data-mode="dark"] main>.home-grid{animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
@media(prefers-reduced-motion:reduce){html[data-mode="dark"] main>*{animation:none!important}}
/* Loved, but cuter: rosy cheeks, a happy snuggle and pastel hearts bubbling up all round (Sophia, 2026-10-09). */
.egg-hero-egg.egg-loved>svg{animation:eggsnuggle 2.6s ease-in-out;filter:drop-shadow(0 0 18px #ff9ec488)}
.egg-blush{position:absolute;left:20.5%;top:20.5%;width:59%;height:59%;transform:scale(1.3);pointer-events:none}
.egg-blush i{position:absolute;top:60%;width:15%;height:8%;border-radius:50%;background:#ff7fae;filter:blur(2.5px);opacity:0;transition:opacity .4s}
.egg-blush i:first-child{left:30%}.egg-blush i:last-child{right:30%}
.egg-hero-egg.egg-loved .egg-blush{animation:eggsnuggle 2.6s ease-in-out}
.egg-hero-egg.egg-loved .egg-blush i{opacity:.75}
.egg-love{top:40%}
.egg-love i{position:absolute;width:20px;height:20px;left:-10px;top:-10px;opacity:0}
.egg-love svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 5px #ff9ec488)}
.egg-hero-egg.egg-loved .egg-love i{animation:eggbubble 2.1s cubic-bezier(.3,.7,.4,1) var(--d,0s) both}
.egg-love i:nth-child(1){--x:-46px;--d:0s}.egg-love i:nth-child(2){--x:40px;--d:.25s;width:16px;height:16px}.egg-love i:nth-child(3){--x:-12px;--d:.5s;width:24px;height:24px}.egg-love i:nth-child(4){--x:52px;--d:.8s;width:14px;height:14px}.egg-love i:nth-child(5){--x:-40px;--d:1s;width:16px;height:16px}
@keyframes eggsnuggle{0%,100%{rotate:0deg;scale:1}12%{scale:1.08 .93}24%{rotate:-6deg;scale:.98 1.03}40%{rotate:5deg;scale:1.04 .97}56%{rotate:-4deg;scale:1}72%{rotate:3deg;scale:1.03 .98}86%{rotate:-1deg}}
@keyframes eggbubble{0%{opacity:0;transform:translate(0,0) scale(.2)}18%{opacity:1;transform:translate(calc(var(--x) * .6),-24px) scale(1.15)}35%{transform:translate(calc(var(--x) * .8),-40px) scale(.95) rotate(-8deg)}60%{opacity:1;transform:translate(var(--x),-66px) scale(1) rotate(8deg)}100%{opacity:0;transform:translate(calc(var(--x) * .9),-100px) scale(.7) rotate(-4deg)}}
/* Curious: a little "?" pops up as it tilts its head towards your finger or cursor (Sophia, 2026-10-09). */
.egg-what{position:absolute;left:63%;top:12%;font:900 26px Nunito,sans-serif;color:#f5f2ea;text-shadow:0 0 12px color-mix(in srgb,var(--accent) 80%,transparent);opacity:0;scale:.3;pointer-events:none}
.egg-hero-egg.egg-curious .egg-what{animation:eggwhat 1.4s cubic-bezier(.3,1.5,.5,1)}
.egg-hero-egg.egg-curious>svg{animation:eggperk .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes eggwhat{0%{opacity:0;scale:.3;rotate:-20deg}20%{opacity:1;scale:1.15;rotate:8deg}35%{scale:.95;rotate:-6deg}50%{scale:1;rotate:4deg}80%{opacity:1;translate:0 -4px}100%{opacity:0;translate:0 -10px}}
@keyframes eggperk{0%,100%{scale:1}35%{scale:.96 1.06}65%{scale:1.03 .98}}
/* Light/dark switch in the top bar, above the page menu (Sophia, 2026-10-09). */
.mode-quick{display:flex;align-items:center;gap:6px;margin-left:auto;padding:4px 8px;border:1px solid var(--line);border-radius:22px;background:#fff;font-size:12px;cursor:pointer;color:#c9a14c}
.mode-quick input{appearance:none;-webkit-appearance:none;position:relative;width:38px;height:22px;margin:0;border-radius:12px;background:#e9e4da;cursor:pointer;transition:background .2s}
.mode-quick input::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.mode-quick input:checked{background:#f5f2ea}.mode-quick input:checked::after{transform:translateX(16px);background:#101114}
html[data-mode="dark"] .mode-quick{background:#090a0d;border-color:#ffffff14;color:#aaa9ad}
/* Trait mode: your buddy (or egg) in its dark circle with a little egg for every trait, and the traits still to earn (Sophia, 2026-10-09). */
.trait-mode{margin-top:20px;padding:24px 0 28px;border-radius:24px;background:radial-gradient(circle at 50% 42%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed;overflow:hidden}
.trait-head{padding:0 24px;text-align:center}.trait-head h2{margin:6px 0;color:#f8f5ed}.trait-head p{margin:0 auto;max-width:420px;color:#aaa9ad;font-size:13px;line-height:1.5}.trait-head b{color:#f5f2ea}
.trait-mode .eyebrow{color:#aaa9ad;background:none}
.trait-mode .egg-picker{width:100%;height:470px;margin:0;-webkit-mask-image:none;mask-image:none}
.trait-mode .egg-tag{position:absolute;z-index:2;width:max-content;margin:0;display:flex;align-items:center;gap:6px;white-space:nowrap;color:#8e8d93;font-size:12px;opacity:0;transform:translate(0,-50%);transition:opacity .2s}
.trait-mode .egg-tag-rarity{transform:translate(-100%,-50%)}
.trait-buddy{position:relative;display:grid;place-items:center;width:78%;height:78%}
.trait-buddy>*{width:100%;height:100%;object-fit:contain}
.egg-hero-egg .trait-buddy svg,.egg-picker.absorbed .egg-hero-egg .trait-buddy svg{width:100%;height:100%;transform:none}
.egg-hero-egg.egg-giggle .trait-buddy{animation:egggiggle .6s cubic-bezier(.3,1.5,.5,1)}
.egg-hero-egg.egg-cross .trait-buddy{animation:eggcross .7s ease-in-out}
.egg-hero-egg.egg-loved .trait-buddy{animation:eggsnuggle 2.6s ease-in-out;filter:drop-shadow(0 0 18px #ff9ec488)}
.egg-hero-egg.egg-dizzy .trait-buddy{animation:eggwoozy 1.3s ease-in-out 2}
.egg-hero-egg.egg-curious .trait-buddy{animation:eggperk .6s cubic-bezier(.3,1.5,.5,1)}
.trait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:0 20px}
.trait-tile{display:grid;gap:5px;padding:12px 14px;border:1px solid #ffffff12;border-radius:16px;background:#090a0d;color:#aaa9ad}
.trait-tile strong{color:#77767c;font-size:13px}.trait-tile small{font-size:11px;line-height:1.35}
.trait-tile.earned{border-color:#f5f2ea55;box-shadow:0 0 22px #f5f2ea14}.trait-tile.earned strong{color:#f5f2ea}
.trait-bar{height:4px;border-radius:3px;background:#ffffff12;overflow:hidden}.trait-bar i{display:block;height:100%;background:#f5f2ea;border-radius:3px}
@media(max-width:480px){.trait-mode .egg-picker{height:400px}.trait-mode{margin-left:-4px;margin-right:-4px}}
/* Leaderboard, in the same dark look (Sophia, 2026-10-09). */
.leader-card{margin-top:20px;padding:24px 18px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed}
.leader-card .eyebrow{color:#aaa9ad;background:none}
.leader-tabs{display:flex;justify-content:center;gap:6px;margin:16px 0 8px}
.leader-tabs button{border:1px solid #ffffff14;border-radius:999px;padding:7px 14px;background:#090a0d;color:#aaa9ad;font-size:12px;font-weight:800}
.leader-tabs button[aria-pressed="true"]{background:#f5f2ea;border-color:#f5f2ea;color:#101114;box-shadow:0 0 24px #f5f2ea22}
.leader-podium{display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;max-width:420px;margin:18px auto 14px}
.leader-step{display:grid;justify-items:center;gap:2px;text-align:center;animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
.leader-step strong{font-size:13px}.leader-step small{color:#aaa9ad;font-size:11px}
.leader-step b{display:grid;place-items:end center;width:100%;margin-top:6px;border-radius:14px 14px 4px 4px;background:#1d1e24;color:#f5f2ea;font:900 22px Nunito,sans-serif;padding-bottom:8px}
.leader-step.p1 b{height:96px;background:linear-gradient(#f5f2ea33,#1d1e24);box-shadow:0 0 30px #f5f2ea1a}.leader-step.p2 b{height:70px}.leader-step.p3 b{height:52px}
.leader-step.p1{animation-delay:.1s}.leader-step.p3{animation-delay:.2s}
.leader-face{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#090a0d;border:1px solid #ffffff12;overflow:hidden}
.leader-face>*{width:86%;height:86%;object-fit:contain}
.leader-step.p1 .leader-face{width:78px;height:78px;border-color:#f5f2ea66;box-shadow:0 0 26px #f5f2ea22}
.leader-step.me .leader-face,.leader-list li.me .leader-face{border-color:#f5f2ea}
.leader-list{list-style:none;margin:0 auto;padding:0;max-width:460px;display:grid;gap:8px}
.leader-list li{display:grid;grid-template-columns:24px 44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid #ffffff10;border-radius:16px;background:#090a0d;animation:stepin .5s ease both}
.leader-list li.me{border-color:#f5f2ea66;box-shadow:0 0 22px #f5f2ea14}
.leader-list b{color:#77767c;font-weight:900;text-align:center}.leader-list strong{font-size:13px}.leader-list small{color:#aaa9ad;font-size:12px}
.leader-list .leader-face{width:44px;height:44px}
.leader-note{margin:14px 0 0;text-align:center;color:#6f6e75;font-size:11px}
/* Icon menu: round icon buttons; the page you're on opens out to show its name (Sophia, 2026-10-09). */
.page-tabs a{display:flex;align-items:center;gap:6px;height:42px;min-width:42px;padding:0 11px;border-radius:21px;transition:background .25s,color .25s,padding .3s}
.page-tabs a svg{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.page-tabs a span{max-width:0;overflow:hidden;opacity:0;transition:max-width .35s ease,opacity .25s}
.page-tabs a[aria-current="page"]{padding:0 15px 0 12px}
.page-tabs a[aria-current="page"] span{max-width:120px;opacity:1}
.feeling-chips button{display:inline-flex;align-items:center;gap:5px}
.feel-face{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feel-face circle[r=".6"]{fill:currentColor}
/* Friend collection: just the six intro eggs, three to a row. */
.egg-grid:has(.starter-egg){grid-template-columns:repeat(3,1fr)}
.starter-egg .egg-art{width:78px;height:78px}
.egg-tile.starter-egg .egg-art svg{opacity:1;transform:none}
/* Your petto before it hatches (level 1): the plain egg on black, like the egg page, with no room (Sophia, 2026-10-09). */
.pet-card.egg-home .room-tabs,.pet-card.egg-home .room-tools,.pet-card.egg-home .pet-scene>:not(.pet){display:none!important}
.pet-card.egg-home .pet-scene{background:radial-gradient(circle at 50% 50%,#29252b,#18191e 48%,#101114 85%)!important}
.pet-card.egg-home .pet.pet-art{width:150px;height:170px;display:grid;place-items:center;cursor:pointer}
.home-egg{width:100%;height:100%;animation:eggwiggle 3.2s ease-in-out infinite;transform-origin:50% 90%}
.home-egg svg{display:block;width:100%;height:100%;overflow:visible}
.pet.egg-ready .home-egg svg{filter:drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 80%,transparent))}
@keyframes eggwiggle{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-5deg)}82%{transform:rotate(4deg)}88%{transform:rotate(-2deg)}}
@media(prefers-reduced-motion:reduce){.home-egg{animation:none}}
/* Pettodex view of the friend collection: the sign-up's field of eggs, full screen, with a switch back to the grid. */
.dex-toggle{display:inline-flex;align-items:center;gap:9px;border:0;background:none;color:inherit;font-size:12px;font-weight:800;padding:4px 0;margin:2px 0 6px}
.dex-switch{position:relative;width:40px;height:24px;border-radius:12px;background:#d9d6cf;transition:background .2s}
.dex-switch::after{content:'';position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.dex-toggle[aria-pressed="true"] .dex-switch,.dex-toggle.on .dex-switch{background:#34c759}
.dex-toggle[aria-pressed="true"] .dex-switch::after,.dex-toggle.on .dex-switch::after{transform:translateX(16px)}
.egg-dex{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:max(20px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 50%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed;overflow:hidden;animation:stepin .4s ease both}
.egg-dex[hidden]{display:none}
.egg-dex-top{position:relative;z-index:3;width:100%;display:flex;justify-content:space-between;align-items:center}
.egg-dex .eyebrow{color:#aaa9ad;letter-spacing:.18em}
.egg-dex .dex-toggle{color:#f5f2ea;background:#ffffff14;border-radius:20px;padding:6px 12px 6px 6px;margin:0}
.egg-dex .egg-picker{position:absolute;inset:0;width:auto;height:auto;margin:0;z-index:1;cursor:grab;touch-action:none;-webkit-mask-image:none;mask-image:none}
.egg-dex .egg-cell{cursor:pointer}
.egg-cell.locked .egg-shine,.egg-hero.locked .egg-shine,.egg-tile.locked .egg-shine{display:block;fill:#9af6ee}
@keyframes auroraShell{0%,100%{fill:#6954c5;stroke:#322672}25%{fill:#4284ca;stroke:#294d91}50%{fill:#35b8a4;stroke:#207c75}75%{fill:#a26acc;stroke:#613a96}}
@keyframes auroraShine{0%,100%{fill:#9af6ee}25%{fill:#d8f8ff}50%{fill:#d3ffe9}75%{fill:#f2d7ff}}
.egg-picker.focused .egg-hero.locked .egg-shine{animation:auroraShine 10s ease-in-out infinite}
.egg-dex .egg-caption{position:relative;z-index:3;min-height:52px;max-width:320px;margin:0;text-align:center;color:#aaa9ad;font-size:13px;line-height:1.5;pointer-events:none}
.egg-dex .egg-caption strong{display:block;color:#f8f5ed;font-size:16px;margin-bottom:2px}
.egg-dex .egg-hero{cursor:pointer}
/* Light mode, Apple style (Sophia, 2026-10-09): the same calm shapes as dark mode in Apple's light greys. Off-white page,
   white cards with soft shadows, near-black primary buttons, grey pill chips and the system font. A chosen colour theme still wins. */
html:not([data-mode="dark"]):not([data-theme]) body{background:#f5f5f7;color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html:not([data-mode="dark"]):not([data-theme]) :is(h1,h2,h3):not(:is(.trait-mode,.leader-card,.egg-dex,.profile-dialog) *){color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Nunito',system-ui,sans-serif;letter-spacing:-.02em}
html:not([data-mode="dark"]):not([data-theme]) .eyebrow{color:#86868b}
html:not([data-mode="dark"]):not([data-theme]) :is(.pet-card,.metrics,.care-card,.next-card,.shop-card,.body-card,.recovery-card,.stress-card,.sleep-card,.meal-card,.wellness-log,.kit-card,.journey-card){background:#fff;border-color:transparent;border-radius:22px;box-shadow:0 1px 2px #0000000a,0 8px 30px #0000000d}
html:not([data-mode="dark"]):not([data-theme]) :is(.page-tabs a[aria-current="page"],.primary,.room-tabs button[aria-pressed="true"],.feeling-chips button[aria-pressed="true"]){background:#1d1d1f;color:#fff;border-color:#1d1d1f;box-shadow:none}
html:not([data-mode="dark"]):not([data-theme]) :is(.page-tabs a:not([aria-current="page"]),.secondary,.room-tabs button:not([aria-pressed="true"]),.feeling-chips button:not([aria-pressed="true"])){background:#e8e8ed;border-color:transparent;color:#1d1d1f}
html:not([data-mode="dark"]):not([data-theme]) :is(.pill,#pet-mood){background:#e8e8ed;color:#1d1d1f}
html:not([data-mode="dark"]):not([data-theme]) :is(.pet-info p,.welcome p,.metric small,.care-row small,dialog p){color:#6e6e73}
html:not([data-mode="dark"]):not([data-theme]) :is(.progress,.mini-track){background:#e8e8ed}
html:not([data-mode="dark"]):not([data-theme]) .progress>div{background:#34c759}
html:not([data-mode="dark"]):not([data-theme]) dialog{background:#fff;border-color:transparent;box-shadow:0 30px 80px #0000002e}
html:not([data-mode="dark"]):not([data-theme]) dialog::backdrop{background:#0000004d;backdrop-filter:blur(6px)}
html:not([data-mode="dark"]):not([data-theme]) .egg-tile{background:#f5f5f7;border-color:transparent;border-radius:18px}
html:not([data-mode="dark"]):not([data-theme]) .egg-tile.current{box-shadow:0 0 0 2px #1d1d1f}
html:not([data-mode="dark"]):not([data-theme]) .mode-quick{background:#e8e8ed;border-color:transparent;color:#1d1d1f}
html:not([data-mode="dark"]):not([data-theme]) main>section:not([hidden]),html:not([data-mode="dark"]):not([data-theme]) main>.home-grid{animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
html:not([data-mode="dark"]):not([data-theme]) .page-tabs{background:#f5f5f7}
.egg-dex .egg-caption small{display:block;margin-top:6px;font-size:11px;color:#77767c}
/* On a phone the Pettodex labels drop their last word and shrink a touch, so they stay on screen as they turn. */
@media(max-width:480px){.egg-dex .egg-tag{font-size:11px;gap:4px}.egg-dex .egg-tag-more{display:none}}
/* A cleaner header (Sophia, 2026-10-09): one row with the name on the left and small round controls on the right:
   points, Apple Health, the colour dot (day mode only), one day/night switch and your profile. */
.topbar{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
.topbar .mobile-brand{margin-right:auto}
.topbar .mode-quick{margin-left:0;order:4}
.topbar .theme-menu{order:3}.topbar .health-button{order:2}.topbar .point-chip{order:1}.topbar .avatar{order:5}
.theme-switch,.theme-panel .dark-switch{display:none!important}
.theme-control{padding:0!important;border:0!important;background:none!important}
.theme-toggle{display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff}
.theme-toggle .theme-dot{width:18px;height:18px;margin:0;border-radius:50%;background:var(--dot,#d2d2d7);box-shadow:inset 0 0 0 1px #0000001a}
html[data-mode="dark"] .theme-menu{display:none}
.health-button{display:grid;place-items:center;width:34px;height:34px;padding:0!important;border-radius:50%;font-size:0!important;overflow:hidden}
.health-button::before{content:'♡';font-size:16px;line-height:1}
.point-chip{height:34px;padding:0 12px}
.topbar .mode-quick{height:34px}
@media(max-width:430px){.topbar{flex-wrap:nowrap}.health-button{order:2;width:34px;margin-top:0}.point-word{display:none}.topbar .mode-quick{padding:4px 6px;gap:4px}}
html:not([data-mode="dark"]):not([data-theme]) :is(.theme-toggle,.health-button,.point-chip){background:#e8e8ed;border-color:transparent;color:#1d1d1f}
[data-theme-choice="none"]{color:#1d1d1f}
.topbar .mobile-brand{white-space:nowrap}
/* Room icons on Your petto and face-only feeling buttons (Sophia, 2026-10-09). */
.room-tabs{gap:8px}
.room-tabs button{display:grid;place-items:center;width:40px;height:40px;padding:0!important;border-radius:50%!important}
.room-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.room-icon circle[r=".6"]{fill:currentColor}
.feeling-chips{gap:8px}
.feeling-chips button[data-feeling]:not(.feeling-clear){display:grid;place-items:center;width:42px;height:42px;padding:0!important;border-radius:50%!important}
.feeling-chips .feel-face{width:24px;height:24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Watch-style Your petto (Sophia, 2026-10-09): pastel round care buttons over the room and a feelings button top left. */
.pet-scene{touch-action:pan-y}
.scene-care{position:absolute;left:0;right:0;bottom:12px;z-index:6;display:flex;justify-content:center;gap:10px}
.scene-care button,.scene-mood{display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid #ffffffcc;background:var(--care,#ffb38a);box-shadow:0 4px 14px #0000002a;color:#fff;transition:transform .15s}
.scene-care button:active,.scene-mood:active{transform:scale(.9)}
.scene-care svg,.scene-mood svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scene-mood{position:absolute;left:14px;top:14px;z-index:6;--care:#ff9f5a}
.scene-mood circle[r=".8"]{fill:currentColor}
@media(max-width:430px){.scene-care{gap:8px}.scene-care button{width:40px;height:40px}}
/* Tablet-wide screens (iPad, iPhone Duo open) keep the pet card in one column like iPad mini: room tabs, then the room, then the info (Sophia, 2026-10-11). */
@media(min-width:761px) and (max-width:1050px){.pet-card{display:block}.pet-scene{height:300px;min-height:0}}
/* Every buddy sits small in the middle of the traits circle (Sophia, 2026-10-11). */
.trait-buddy{width:40%;height:40%}
/* Echo's dark Dusk egg names itself in lilac (Sophia's egg Pettodex, 2026-10-10). */
.egg-cell.near small{color:var(--label,var(--accent))}
.egg-cell.near i{border-color:var(--label,var(--accent))}
/* Egg tickets (Sophia, 2026-10-11): a bar in the friend collection, and the sign-up's egg reel full screen when one is used. */
.ticket-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px;padding:12px 14px;border-radius:16px;background:#fff6e8;border:1px solid #f3e3c6}
.ticket-bar .ticket-icon{font-size:24px}.ticket-bar div{flex:1;min-width:150px}.ticket-bar strong{display:block;font-size:14px}.ticket-bar small{display:block;color:#9a8f80;font-size:11px;margin-top:2px}
.ticket-bar button{border:0;border-radius:12px;padding:9px 14px;font-weight:800;font-size:12px;background:#719879;color:#fff}.ticket-bar #ticket-buy{background:#f1e6d2;color:#7a6243}
.ticket-bar button:disabled{opacity:.45;cursor:default}
.ticket-reel{z-index:70}.ticket-reel .egg-caption{color:#aaa9ad}.ticket-reel .egg-caption strong{display:block;color:#f8f5ed;font-size:19px;margin-bottom:4px}
.egg-tile.won{border-color:#e7c27a;box-shadow:0 0 0 2px #e7c27a55}
html[data-mode="dark"] .ticket-bar{background:#1d1b1f;border-color:#ffffff14}html[data-mode="dark"] .ticket-bar strong{color:#f8f5ed}html[data-mode="dark"] .ticket-bar #ticket-buy{background:#ffffff12;color:#f5f2ea}html[data-mode="dark"]:not([data-theme]) .ticket-bar #ticket-use{background:#f5f2ea;color:#101114}
/* More egg moods (Sophia, 2026-10-12): sleepy, stretch, shy, tickled, scared, happy, night glow, cold and cosy, hiccups, excited. */
.egg-picker.focused .egg-hero-egg.egg-sleepy,.egg-hero-egg.egg-sleepy{animation:none}
.egg-hero-egg.egg-sleepy>svg{animation:eggdoze 3.2s ease-in-out infinite;filter:brightness(.8)}
@keyframes eggdoze{0%,100%{rotate:0deg;scale:1}50%{rotate:-6deg;scale:1.02 .97}}
.egg-zzz,.egg-spark,.egg-chill{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none}
.egg-zzz{left:64%;top:22%}
.egg-zzz i,.egg-spark i,.egg-chill i{position:absolute;font-style:normal;opacity:0}
.egg-zzz i{font:900 14px Nunito,sans-serif;color:#f5f2ea;text-shadow:0 0 8px color-mix(in srgb,var(--accent) 70%,transparent)}
.egg-zzz i:nth-child(2){font-size:17px}.egg-zzz i:nth-child(3){font-size:21px}
.egg-hero-egg.egg-sleepy .egg-zzz i{animation:eggzzz 2.7s ease-out infinite}
.egg-hero-egg.egg-sleepy .egg-zzz i:nth-child(2){animation-delay:.9s}.egg-hero-egg.egg-sleepy .egg-zzz i:nth-child(3){animation-delay:1.8s}
@keyframes eggzzz{0%{opacity:0;translate:0 0;scale:.6}20%{opacity:.9}100%{opacity:0;translate:24px -42px;scale:1.1}}
.egg-hero-egg.egg-stretch>svg{animation:eggstretch 1.1s cubic-bezier(.3,1.4,.5,1)}
@keyframes eggstretch{0%{scale:1}30%{scale:.92 1.15}55%{scale:1.06 .95}80%{scale:.99 1.02}100%{scale:1}}
.egg-hero-egg.egg-shy>svg,.egg-hero-egg.egg-shy .egg-blush{animation:eggshy 2.2s ease-in-out}
.egg-hero-egg.egg-shy .egg-blush i{opacity:.8}
@keyframes eggshy{0%,100%{rotate:0deg;scale:1;translate:0 0}20%,80%{rotate:-14deg;scale:.94 .98;translate:-8px 2px}}
.egg-hero-egg.egg-tickled>svg{animation:eggtickle .15s linear 9}
@keyframes eggtickle{0%,100%{rotate:0deg;translate:0 0}25%{rotate:-6deg;translate:-2px -3px}75%{rotate:6deg;translate:2px -3px}}
.egg-spark i{left:-7px;top:-7px;color:#ffe08a;font-size:15px;text-shadow:0 0 6px #fff9}
.egg-spark i:nth-child(1){--x:-50px;--y:-34px}.egg-spark i:nth-child(2){--x:46px;--y:-40px;--d:.15s;color:#ffb3d1}.egg-spark i:nth-child(3){--x:-40px;--y:26px;--d:.3s;color:#c9b6ff}.egg-spark i:nth-child(4){--x:50px;--y:20px;--d:.45s;color:#9fe3cf}
.egg-hero-egg.egg-tickled .egg-spark i{animation:eggspark .9s ease-out var(--d,0s) both}
@keyframes eggspark{0%{opacity:0;transform:translate(0,0) scale(.3)}30%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1.1) rotate(90deg)}}
.eggs-scared .egg-cell svg{animation:eggtremble .09s linear 14}
@keyframes eggtremble{0%,100%{translate:0 0;rotate:0deg}25%{translate:-2px 0;rotate:-4deg}75%{translate:2px 0;rotate:4deg}}
.egg-hero-egg.egg-happy>svg{animation:egghappy 1.6s cubic-bezier(.3,1.5,.5,1)}
@keyframes egghappy{0%,100%{translate:0 0;scale:1}15%{scale:1.08 .92}30%{translate:0 -18px;scale:.95 1.06}45%{translate:0 0;scale:1.06 .94}60%{translate:0 -9px;scale:1}75%{translate:0 0}}
.egg-note{position:absolute;left:66%;top:20%;font:900 22px Nunito,sans-serif;color:#ffd76e;text-shadow:0 0 8px #ffd76e88;opacity:0;pointer-events:none}
.egg-hero-egg.egg-happy .egg-note{animation:eggwhat 1.6s cubic-bezier(.3,1.5,.5,1)}
.egg-hero.egg-night .egg-hero-egg>svg{filter:drop-shadow(0 0 16px color-mix(in srgb,var(--accent) 60%,#fff))}
.egg-hero.egg-night::before{box-shadow:inset 0 0 0 1px #ffffff14,0 0 110px color-mix(in srgb,var(--accent) 55%,#fff3)}
.egg-hero-egg.egg-cold>svg{animation:eggshiver .1s linear infinite;filter:saturate(.6) drop-shadow(0 0 10px #9fd8ff88)}
.egg-hero-egg.egg-cold .egg-shell{fill:color-mix(in srgb,var(--accent) 65%,#cdeeff)}
.egg-chill{top:6%}.egg-chill i{left:-20px;width:40px;height:40px}.egg-chill i:nth-child(2){width:32px;height:32px;left:-16px}.egg-chill svg{display:block;width:100%;height:100%;filter:drop-shadow(0 0 5px #cdeeffaa)}
.egg-chill i:nth-child(1){--x:-48px}.egg-chill i:nth-child(2){--x:4px;--d:.7s}.egg-chill i:nth-child(3){--x:48px;--d:1.4s}
.egg-hero-egg.egg-cold .egg-chill i{animation:eggsnow 2.4s linear var(--d,0s) infinite}
@keyframes eggsnow{0%{opacity:0;transform:translate(var(--x),-10px) rotate(0) scale(.7)}20%{opacity:1;transform:translate(calc(var(--x) - 6px),8px) rotate(30deg) scale(1)}50%{transform:translate(calc(var(--x) + 8px),34px) rotate(70deg)}80%{opacity:1}100%{opacity:0;transform:translate(calc(var(--x) - 4px),80px) rotate(120deg) scale(.9)}}
@keyframes eggshiver{0%,100%{translate:-1.5px 0}50%{translate:1.5px 0}}
.egg-hero-egg.egg-cosy>svg{animation:eggsnuggle 1.8s ease-in-out;filter:drop-shadow(0 0 18px #ffb46b99)}
.egg-hero-egg.egg-cosy .egg-shell{fill:color-mix(in srgb,var(--accent) 80%,#ffc48a)}
.egg-hero-egg.egg-hiccup>svg{animation:egghic .8s cubic-bezier(.3,1.6,.5,1)}
@keyframes egghic{0%,100%{translate:0 0;scale:1}20%{translate:0 -10px;scale:.95 1.06}40%{translate:0 0;scale:1.04 .96}}
.egg-hic{position:absolute;left:58%;top:24%;width:12px;height:12px;border-radius:50%;border:1.5px solid #ffffffaa;opacity:0;pointer-events:none}
.egg-hero-egg.egg-hiccup .egg-hic{animation:eggbub 1s ease-out}
@keyframes eggbub{0%{opacity:0;scale:.3}25%{opacity:1}100%{opacity:0;translate:10px -36px;scale:1.2}}
.egg-hero-egg.egg-excited:not(.egg-giggle,.egg-cross,.egg-loved,.egg-dizzy,.egg-curious,.egg-stretch,.egg-shy,.egg-tickled,.egg-cosy,.egg-hiccup,.egg-happy,.egg-cold,.egg-sleepy)>svg{animation:eggexcited 1.1s ease-in-out infinite}
@keyframes eggexcited{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -8px;rotate:-5deg}50%{translate:0 0}75%{translate:0 -8px;rotate:5deg}}
@media(prefers-reduced-motion:reduce){.egg-hero-egg *,.egg-hero-egg>svg,.eggs-scared .egg-cell svg{animation:none!important}}
/* Hatching on a black screen (Sophia, 2026-10-12): tap to crack it, light leaks out, a hush, a burst, a shadow in a
   spotlight, then colour. */
.hatch-reveal{--light:0;position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:#000;color:#f5f2ea;opacity:0;transition:opacity .6s ease;overflow:hidden;touch-action:manipulation}
.hatch-reveal.on{opacity:1}
body.hatch-open{overflow:hidden}
.hatch-line,.hatch-hint{position:absolute;left:16px;right:16px;margin:0;text-align:center;pointer-events:none;transition:opacity .4s}
.hatch-line{top:18%;font:800 22px Nunito,system-ui,sans-serif;letter-spacing:-.01em}
.hatch-hint{bottom:max(40px,env(safe-area-inset-bottom));color:#8e8d93;font-size:14px;font-weight:700;animation:hatchhint 2s ease-in-out infinite}
@keyframes hatchhint{50%{opacity:.45}}
.hatch-glow{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 70%,#fff) 0%,color-mix(in srgb,var(--accent) 35%,transparent) 22%,transparent 60%);opacity:calc(.12 + var(--light) * .7);transform:scale(calc(.6 + var(--light) * .6));transition:opacity .5s,transform .5s;pointer-events:none;animation:hatchbeat 1.4s ease-in-out infinite}
@keyframes hatchbeat{0%,100%{scale:1}12%{scale:1.06}24%{scale:.99}36%{scale:1.04}}
.hatch-egg{position:relative;width:170px;height:170px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transform-origin:50% 88%;animation:hatchidle 2.6s ease-in-out infinite}
.hatch-egg svg{display:block;width:100%;height:100%;overflow:visible}
.hatch-shell svg{filter:drop-shadow(0 0 calc(6px + var(--light) * 28px) color-mix(in srgb,var(--accent) 80%,#fff))}
.hatch-shell,.hatch-half{position:absolute;inset:0}
@keyframes hatchidle{0%,70%,100%{rotate:0deg}76%{rotate:-3deg}82%{rotate:3deg}88%{rotate:-1deg}}
.hatch-cracks{position:absolute;inset:0;pointer-events:none}
.hatch-cracks path{fill:none;stroke:color-mix(in srgb,var(--accent) 30%,#fff);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 8px color-mix(in srgb,var(--accent) 80%,#fff));transition:stroke-dashoffset .35s ease}
.hatch-reveal[data-cracks="1"] .hatch-cracks path:nth-child(-n+1),.hatch-reveal[data-cracks="2"] .hatch-cracks path:nth-child(-n+2),.hatch-reveal[data-cracks="3"] .hatch-cracks path:nth-child(-n+3),.hatch-reveal[data-cracks="4"] .hatch-cracks path:nth-child(-n+4),.hatch-reveal[data-cracks="5"] .hatch-cracks path:nth-child(-n+5),.hatch-reveal[data-cracks="6"] .hatch-cracks path{stroke-dashoffset:0}
.hatch-reveal.shake .hatch-egg{animation:hatchshake .45s cubic-bezier(.3,1.5,.5,1)}
.hatch-reveal[data-cracks="3"].shake .hatch-egg,.hatch-reveal[data-cracks="4"].shake .hatch-egg{animation:hatchshake .45s cubic-bezier(.3,1.5,.5,1),hatchjolt .45s ease}
.hatch-reveal[data-cracks="5"].shake .hatch-egg{animation:hatchshake .3s cubic-bezier(.3,1.5,.5,1) 2,hatchjolt .6s ease}
@keyframes hatchshake{0%,100%{rotate:0deg}20%{rotate:-11deg}45%{rotate:9deg}70%{rotate:-5deg}}
@keyframes hatchjolt{30%{translate:0 -14px;scale:.96 1.05}60%{translate:0 0;scale:1.05 .95}}
.hatch-reveal.nudge:not(.shake) .hatch-egg{animation:hatchshake .5s ease 2}
.hatch-reveal.hush .hatch-egg{animation:none;filter:brightness(.55);transition:filter .8s}
.hatch-reveal.hush .hatch-glow{opacity:.05;animation:none}
.hatch-reveal.hush .hatch-line{opacity:0}
.hatch-reveal.stir .hatch-egg{animation:hatchshake .22s linear 4}
.hatch-half{opacity:0;pointer-events:none}
.hatch-top{clip-path:polygon(0 0,100% 0,100% 52%,86% 56%,74% 50%,62% 58%,50% 50%,38% 57%,26% 50%,14% 56%,0 51%)}
.hatch-bottom{clip-path:polygon(0 51%,14% 56%,26% 50%,38% 57%,50% 50%,62% 58%,74% 50%,86% 56%,100% 52%,100% 100%,0 100%)}
.hatch-reveal.burst .hatch-egg{animation:none;cursor:default}
.hatch-reveal.burst .hatch-shell,.hatch-reveal.burst .hatch-cracks{opacity:0}
.hatch-reveal.burst .hatch-half{opacity:1}
.hatch-reveal.burst .hatch-top{animation:hatchtop 1s cubic-bezier(.2,.7,.3,1) forwards}
.hatch-reveal.burst .hatch-bottom{animation:hatchbottom 1s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes hatchtop{to{translate:-40px -190px;rotate:-38deg;opacity:0}}
@keyframes hatchbottom{to{translate:30px 160px;rotate:24deg;opacity:0}}
.hatch-flash{position:absolute;inset:0;background:radial-gradient(circle,#fff 0%,color-mix(in srgb,var(--accent) 50%,#fff) 40%,#fff0 75%);opacity:0;pointer-events:none}
.hatch-reveal.burst .hatch-flash{animation:hatchflash 1.1s ease-out}
@keyframes hatchflash{0%{opacity:0}12%{opacity:1}100%{opacity:0}}
.hatch-reveal.burst .hatch-glow{animation:none;opacity:0;transition:opacity 1s .3s}
.hatch-petto{position:absolute;left:50%;top:50%;width:230px;height:230px;margin:-130px 0 0 -115px;opacity:0;scale:.8;filter:brightness(0);transition:opacity .9s ease,scale 1.2s cubic-bezier(.3,1.4,.5,1),filter 1.4s ease;pointer-events:none}
.hatch-petto>*{width:100%;height:100%}
.hatch-reveal.shadow .hatch-petto{opacity:1;scale:1}
.hatch-reveal.shadow::before{content:'';position:absolute;left:50%;top:50%;width:420px;height:420px;margin:-210px 0 0 -210px;border-radius:50%;background:radial-gradient(circle,#ffffff2e 0%,#ffffff10 40%,transparent 70%);animation:stepin .9s ease both}
.hatch-reveal.colour .hatch-petto{filter:none}
.hatch-reveal.colour::before{background:radial-gradient(circle,color-mix(in srgb,var(--accent) 45%,transparent) 0%,color-mix(in srgb,var(--accent) 12%,transparent) 45%,transparent 70%)}
.hatch-reveal.done{cursor:pointer}
.pet.pet-art.hatch-walk[class]{animation:hatchwalk 2.6s ease-out}
@keyframes hatchwalk{0%{translate:-120vw 0}100%{translate:0 0}}
@media(prefers-reduced-motion:reduce){.hatch-reveal *,.hatch-reveal::before,.pet.pet-art.hatch-walk[class]{animation:none!important;transition:none!important}}
/* In light mode, each petto's colour on its card: name, sign, level line and growth bar (Sophia, 2026-10-12). It uses the
   egg's deeper outline colour so pale eggs (White Pearl) still read. */
html:not([data-mode="dark"]) #pet-title span{color:var(--petto-deep,#e8bd66)}
html:not([data-mode="dark"]) #pet-level{color:color-mix(in srgb,var(--petto-deep,#a6ad9b) 75%,#fff)}
html:not([data-mode="dark"]) #xp-label{color:var(--petto-deep,#679072)}
html:not([data-mode="dark"]) #xp-fill{background:color-mix(in srgb,var(--petto,#97bd90) 70%,var(--petto-deep,#97bd90))!important}
/* The colour picker opens above the page menu (Sophia, 2026-10-12). */
.topbar{position:relative;z-index:80}
.theme-panel{z-index:1000}
/* The Health button is a round button like the colour one next to it (Sophia, 2026-10-12). */
html:not([data-mode="dark"]) .topbar .health-button{flex:none;width:34px;height:34px;min-width:34px;margin:0;padding:0!important;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:#fff;color:var(--muted)}
html:not([data-mode="dark"]) .topbar .health-button::before{font-size:17px;line-height:1;transform:translateY(1px)}
html:not([data-mode="dark"]):not([data-theme]) .topbar .health-button{background:#e8e8ed;border-color:transparent;color:#1d1d1f}
/* Sleep, recovery and stress open inside their tiles in 'Little wins add up' (Sophia 2026-10-12): tap to open, no arrows. */
.metric.opens{cursor:pointer;-webkit-tap-highlight-color:transparent}
.metric.opens.open{grid-column:1/-1;cursor:default}
.metric.opens.open>:not(.metric-more){cursor:pointer}
.metric.opens:not(.open) .metric-more{display:none}
.metric .metric-more{margin:14px 0 0!important;padding:14px 0 0!important;border:0!important;border-top:1px solid #0000000f!important;border-radius:0!important;background:none!important;box-shadow:none!important;cursor:default}
html[data-mode="dark"] .metric .metric-more{border-top-color:#ffffff14!important}
.metric-more .more-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.metric-more :is(.sleep-intro,.recovery-intro,.stress-intro){margin-top:8px}
/* Keep open tiles inside their frame on phones (Sophia 2026-10-12: stress box spilled out). */
.metric.opens,.metric-more,.metric-more :is(.stress-layout,.recovery-layout,.recovery-signals,.sleep-summary)>*{min-width:0}
.metric-more .stress-layout{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.metric-more .stress-inputs input{width:60px;flex:none}
.metric-more .stress-inputs label{gap:6px}.metric-more .stress-inputs input{width:54px}.metric-more .stress-inputs small{white-space:normal;overflow:visible;text-overflow:clip}.metric-more .stress-inputs{padding:14px}
/* Readings come from the Watch via Health, no typing boxes (Sophia 2026-10-12); the hidden inputs still carry the values. */
.stress-inputs[hidden],.recovery-controls[hidden]{display:none!important}
.metric-more .stress-layout{grid-template-columns:1fr}
/* 7-day chart against your usual level + insights in the Stress and Recovery tiles (Sophia 2026-10-12). */
.week-trend{margin-top:18px;padding:16px;border-radius:14px;background:#0000000a}
html[data-mode="dark"] .week-trend{background:#ffffff0a}
.week-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.week-head strong{font:900 13px Nunito,sans-serif}
.week-head span{font-size:10px;font-weight:800;opacity:.7;display:flex;align-items:center;gap:6px}
.week-key{width:16px;border-top:2px dashed currentColor;display:inline-block}
.week-chart{position:relative;display:flex;gap:6px;height:120px;margin-top:14px;padding-bottom:18px}
.week-base{position:absolute;left:0;right:0;border-top:2px dashed currentColor;opacity:.35;margin-bottom:18px;pointer-events:none}
.week-col{flex:1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}
.week-col i{display:block;width:100%;max-width:26px;border-radius:7px 7px 3px 3px;background:var(--petto,#8fbf9f);opacity:.55}
.week-col.now i{opacity:1}
.week-col.off i{background:#e79a8f;opacity:.9}
.week-col small{position:absolute;bottom:-18px;font-size:9px;font-weight:800;opacity:.6;white-space:nowrap}
.week-num{font-size:9px;font-weight:900;opacity:.75;margin-bottom:3px}
.week-insights{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.week-insights li{font-size:11.5px;line-height:1.45;padding-left:16px;position:relative;opacity:.85}
.week-insights li::before{content:'✦';position:absolute;left:0;font-size:9px;top:2px;color:var(--petto-deep,#8271b6)}
.week-empty{font-size:11px;opacity:.7;margin:10px 0 0}
.week-chart .week-col{height:100%}
/* Meals at a glance (Sophia 2026-10-12): Mon–Sun strip, macro blocks, the day's meals with ticks. */
.meal-glance{margin:18px 0 6px}
.meal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.meal-day{border:0;background:none;padding:0;font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
.meal-day small{font-size:11px;font-weight:700;opacity:.75}
.meal-day.today small{font-weight:900;opacity:1}
.meal-day span{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;background:#0000000a}
.meal-day.logged span{background:#fbe3a2;color:#5a4a1c}
.meal-day.picked span{background:var(--petto,#f2c6e0);color:#3a3040;box-shadow:0 0 0 2px var(--petto-deep,#d98fbd)}
.meal-day:disabled{cursor:default;opacity:.45}
html[data-mode="dark"] .meal-day span{background:#ffffff12}
html[data-mode="dark"] .meal-day.logged span{background:#6b5a2b;color:#fff2c9}
.macro-title{font:900 20px Nunito,sans-serif;margin:20px 0 10px}
.macro-blocks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.macro-block{position:relative;height:150px;border-radius:20px;background:#0000000a;overflow:hidden;display:flex;align-items:flex-end}
html[data-mode="dark"] .macro-block{background:#ffffff0d}
.macro-block i{position:absolute;left:0;right:0;bottom:0;border-radius:20px;transition:height .5s ease}
.macro-block.protein i{background:#9fdcf5}
.macro-block.carbs i{background:#ee93cf}
.macro-block.fat i{background:#bdf093}
.macro-block span{position:relative;width:100%;text-align:center;padding:0 4px 16px;color:#3b3b45;display:flex;flex-direction:column;gap:2px}
html[data-mode="dark"] .macro-block span{color:#f2f0f5}
html[data-mode="dark"] .macro-block i ~ span{text-shadow:0 1px 3px #0006}
.macro-block small{font-size:12px;opacity:.8}
.macro-block strong{font:900 18px Nunito,sans-serif}
.macro-block em{font-style:normal;font-size:10px;opacity:.6}
.day-diet{margin-top:16px;padding:16px 18px;border-radius:20px;background:#0000000a}
html[data-mode="dark"] .day-diet{background:#ffffff0d}
.day-diet h3{font:900 17px Nunito,sans-serif;margin:0 0 6px}
.diet-row{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:9px 0;border:0;background:none;font:inherit;color:inherit;text-align:left}
button.diet-row{cursor:pointer}
.diet-row span{display:flex;flex-direction:column;gap:2px;min-width:0}
.diet-row small{font-size:11px;opacity:.7}
.diet-row strong{font-size:14px;font-weight:700;overflow-wrap:anywhere}
.diet-row:not(.done) strong{opacity:.55;font-weight:600}
.diet-tick{flex:none;width:24px;height:24px;border-radius:50%;border:1.5px solid #0000002e;display:grid;place-items:center}
html[data-mode="dark"] .diet-tick{border-color:#ffffff40}
.diet-row.done .diet-tick{background:#f7c948;border-color:#f7c948}
.diet-row.done .diet-tick::after{content:'';width:9px;height:5px;border:solid #3a2f12;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.macro-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-top:20px}
.macro-head .macro-title{margin:0}
.macro-head strong{font-size:13px;font-weight:800;opacity:.75}
.macro-kcal-track{height:8px;border-radius:8px;background:#0000000f;margin:8px 0 12px;overflow:hidden}
html[data-mode="dark"] .macro-kcal-track{background:#ffffff14}
.macro-kcal-track i{display:block;height:100%;width:0;border-radius:8px;background:#ff9e6b;transition:width .5s ease}
.macro-blocks{grid-template-columns:repeat(5,1fr);gap:7px}
.macro-block{height:140px;border-radius:16px}
.macro-block i{border-radius:16px}
.macro-block.fibre i{background:#c7b8f5}
.macro-block.sugar i{background:#ffc49a}
.macro-block span{padding:0 2px 12px}
.macro-block small{font-size:10.5px}
.macro-block strong{font-size:15px}
@media(max-width:420px){.macro-block strong{font-size:13px}.macro-block small{font-size:9.5px}.macro-block em{font-size:9px}}
.macro-block.has span,html[data-mode="dark"] .macro-block.has span{color:#2f2c35;text-shadow:none}
html[data-mode="dark"] .macro-block i ~ span{text-shadow:none}
button.meal-kcal{border:0;background:none;font:inherit;color:inherit;cursor:pointer;padding:4px 6px;border-radius:8px}
button.meal-kcal:hover{background:#0000000a}
.meal-kcal-input{width:76px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-weight:800;background:transparent;color:inherit}
.meal-types{flex-wrap:wrap}
/* Trait levels (Sophia 2026-10-12). */
.trait-lv{display:inline-block;white-space:nowrap;font-style:normal;font-size:10px;font-weight:900;padding:2px 7px;border-radius:99px;background:#ffd76a;color:#3a2c08;margin-left:4px;vertical-align:2px}
.trait-pips{display:flex;gap:4px;margin:6px 0 4px}
.trait-pips b{width:14px;height:5px;border-radius:3px;background:#ffffff26}
.trait-pips b.on{background:#ffd76a}
.trait-streak{color:#ffb27a!important;font-weight:800}
.streak-restore{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;max-width:560px;margin:4px auto 16px;padding:8px 8px 8px 14px;border:1px solid #ffffff14;border-radius:26px;background:#090a0dcc;color:#f8f5ed}.streak-restore[hidden]{display:none}.streak-restore .sick-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffd9b833;font-size:19px;line-height:1}.streak-restore p{margin:0;flex:1;min-width:110px;font-size:14px;line-height:1.25}.streak-restore p b{font-weight:800}.streak-restore p small{display:block;color:#aaa9ad;font-size:12px;margin-top:1px}.streak-restore .secondary-button{padding:8px 16px;border:0;border-radius:999px;background:linear-gradient(180deg,#ffe2c4,#ffc79c);color:#5b3216;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:inset 0 1px 0 #fff6,0 3px 10px #ffb37a40;transition:transform .15s ease,box-shadow .15s ease}.streak-restore .secondary-button:hover:not(:disabled){transform:translateY(-1px) scale(1.03);box-shadow:inset 0 1px 0 #fff6,0 5px 14px #ffb37a59}.streak-restore .secondary-button:active:not(:disabled){transform:scale(.97)}.streak-restore .secondary-button:disabled{opacity:.45;cursor:default}.sick-info-button{flex:none;display:grid;place-items:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid #ffffff1f;background:#ffffff0d;color:#d8d4cc;font:800 13px/1 Nunito,'DM Sans',sans-serif}.sick-info-button:hover,.sick-info-button[aria-expanded="true"]{background:#ffd9b833;color:#fff}.streak-restore .sick-info{flex-basis:100%;padding:2px 6px 4px;color:#cfcbc3;font-size:12px;line-height:1.4}.streak-restore .sick-info[hidden]{display:none}
/* Take a sick day is a round icon button like the care buttons (Sophia, 2026-10-21): a bed with a little Zzz. */
.sick-today-button{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;border:2px solid #ffffffcc;background:linear-gradient(180deg,#ffe2c4,#ffc79c);color:#5b3216;box-shadow:0 4px 14px #0000002a;cursor:pointer;transition:transform .15s}.sick-today-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.sick-today-button:hover:not(:disabled){transform:scale(1.06)}.sick-today-button:active:not(:disabled){transform:scale(.9)}.sick-today-button:disabled{opacity:.45;cursor:default}
/* Light mode: the sick day box takes the Pettö's colour, like the Trait mode card (Sophia, 2026-10-21). */
html:not([data-mode="dark"]) .streak-restore{border-color:transparent;background:color-mix(in srgb,var(--petto,#f0c46a) 40%,#fff);color:#26242a;box-shadow:0 6px 20px color-mix(in srgb,var(--petto-deep,#a8823a) 18%,transparent)}
html:not([data-mode="dark"]) .streak-restore .sick-icon{background:#ffffffb3}
html:not([data-mode="dark"]) .streak-restore p small,html:not([data-mode="dark"]) .streak-restore .sick-info{color:color-mix(in srgb,var(--petto-deep,#a8823a) 55%,#26242a)}
html:not([data-mode="dark"]) .streak-restore .sick-info-button{border-color:#0000001a;background:#ffffff99;color:#26242a}
html:not([data-mode="dark"]) .streak-restore .sick-info-button:hover,html:not([data-mode="dark"]) .streak-restore .sick-info-button[aria-expanded="true"]{background:#fff;color:#26242a}
html:not([data-mode="dark"]) .streak-restore .secondary-button,html:not([data-mode="dark"]) .sick-today-button{background:var(--petto-deep,#a8823a);color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--petto-deep,#a8823a) 35%,transparent)}
.info-button{display:inline-grid;place-items:center;width:24px;height:24px;margin-left:6px;padding:0;vertical-align:middle;border-radius:50%;border:1px solid currentColor;background:none;color:inherit;opacity:.55;font:800 12px/1 Nunito,'DM Sans',sans-serif;cursor:pointer}.info-button:hover,.info-button[aria-expanded="true"]{opacity:1}.info-note{max-width:420px;margin:8px auto 0;padding:10px 14px;border-radius:16px;background:#ffd9b81f;font-size:13px;line-height:1.45;text-align:left}.info-note[hidden]{display:none}.period-length{margin-left:auto;padding:4px 8px;border-radius:10px;font:inherit;font-size:13px}.field-hint{display:block;opacity:.65;font-size:12px;margin-top:4px}
.kcal-left{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin:-4px 0 12px}
.kcal-left strong{font:900 15px Nunito,sans-serif}
.kcal-left small{font-size:11px;opacity:.7}
/* What the meal numbers mean (Sophia 2026-10-12). */
.meal-guide{margin-top:12px;padding:14px 18px;border-radius:20px;background:#0000000a}
html[data-mode="dark"] .meal-guide{background:#ffffff0d}
.meal-guide summary{cursor:pointer;font:900 15px Nunito,sans-serif;list-style:none}
.meal-guide summary::-webkit-details-marker{display:none}
.meal-guide dl{margin:12px 0 0;display:grid;gap:10px}
.meal-guide dt{font-weight:900;font-size:13px}
.meal-guide dd{margin:2px 0 0;font-size:12px;line-height:1.5;opacity:.8}
.meal-guide p{font-size:11px;line-height:1.5;opacity:.65;margin:12px 0 0}
/* Walk with your petto (Sophia 2026-10-12): drawn map, radius ring, petto in the middle, shared friends, eggs to catch. */
.walk-page{margin-top:20px;position:relative}
.walk-map{position:relative;height:min(620px,78vh);min-height:460px;border-radius:28px;overflow:hidden;background:#fbf2ea;isolation:isolate}
html[data-mode="dark"] .walk-map{background:#24201f}
.walk-streets{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.walk-streets .road{stroke:#f3dccd;stroke-width:9}
.walk-streets .road.big{stroke:#f0d2bf;stroke-width:16}
.walk-streets .road.thin{stroke:#f6e6da;stroke-width:5}
.walk-streets .river{stroke:#cfe8f0;stroke-width:22}
.walk-streets .street-name{fill:#c9b3a3;font:700 11px Nunito,sans-serif}
html[data-mode="dark"] .walk-streets .road{stroke:#3a312d}
html[data-mode="dark"] .walk-streets .road.big{stroke:#44382f}
html[data-mode="dark"] .walk-streets .road.thin{stroke:#302926}
html[data-mode="dark"] .walk-streets .river{stroke:#25414b}
html[data-mode="dark"] .walk-streets .street-name{fill:#6b5a50}
.walk-top{position:absolute;top:14px;left:0;right:0;padding:0 14px;z-index:3}
.walk-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.walk-chip{flex:none;display:flex;align-items:center;gap:7px;border:1.5px solid #2c2622;border-radius:14px;padding:8px 12px;font:800 12.5px Nunito,sans-serif;color:#2c2622;box-shadow:0 3px 0 #2c2622;cursor:pointer;white-space:nowrap}
.walk-chip span{display:grid;place-items:center;width:22px;height:22px;border-radius:7px;background:#fff;font-size:12px}
.walk-chip.share{background:#c7c6f5}
.walk-chip.share[aria-pressed="true"]{background:#9fe0b4}
.walk-chip.history{background:#f2c3d3}
.walk-chip.eggs{background:#fde2a8;cursor:default}
.walk-ring{position:absolute;left:50%;top:50%;width:min(78%,360px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffe7c4aa,#ffd9a855 70%);border:2.5px solid #f0a64a;display:grid;place-items:center;z-index:1}
.walk-ring.on{animation:walkpulse 2.4s ease-in-out infinite}
@keyframes walkpulse{50%{box-shadow:0 0 0 14px #f0a64a1f}}
.walk-me{width:30%;aspect-ratio:1;display:grid;place-items:center;transition:transform .8s cubic-bezier(.3,.9,.4,1);filter:drop-shadow(0 6px 8px #0002)}
.walk-me>*,.walk-me svg,.walk-me img{width:100%;height:100%;object-fit:contain}
.walk-me-egg{width:70%;height:70%}
.walk-pins{position:absolute;left:50%;top:50%;width:min(78%,360px);aspect-ratio:1;transform:translate(-50%,-50%);z-index:2;pointer-events:none}
.walk-pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;transition:left 1s linear,top 1s linear}
.walk-pin span{width:50px;height:50px;border-radius:50% 50% 50% 6px;transform:rotate(-45deg);background:var(--pin);border:3px solid var(--pin);display:grid;place-items:center;box-shadow:0 4px 10px #0002;overflow:hidden}
.walk-pin span>*{transform:rotate(45deg);width:44px;height:44px;background:#fff;border-radius:50%}
.walk-pin span svg,.walk-pin span img{width:100%;height:100%;object-fit:contain}
.walk-pin small{margin-top:6px;font:800 10px Nunito,sans-serif;background:#fffc;color:#2c2622;padding:1px 7px;border-radius:99px}
.walk-egg{position:absolute;width:44px;height:52px;transform:translate(-50%,-50%);border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;animation:walkegg 1.8s ease-in-out infinite;filter:drop-shadow(0 4px 6px #0003)}
.walk-egg svg{width:100%;height:100%}
.walk-egg.golden{filter:drop-shadow(0 0 10px #ffd76a)}
.walk-egg.catching{animation:walkcatch .9s ease-in forwards}
@keyframes walkegg{50%{transform:translate(-50%,-58%) rotate(6deg)}}
@keyframes walkcatch{40%{transform:translate(-50%,-70%) scale(1.25) rotate(-10deg)}100%{transform:translate(-50%,-50%) scale(0);opacity:0}}
.walk-toast{position:absolute;left:50%;bottom:46px;transform:translate(-50%,10px);margin:0;max-width:86%;text-align:center;background:#2c2622;color:#fff;padding:9px 14px;border-radius:14px;font:700 12.5px Nunito,sans-serif;opacity:0;z-index:4;pointer-events:none}
.walk-toast.show{animation:walktoast 3.4s ease forwards}
@keyframes walktoast{8%,85%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
.walk-card{margin-top:-30px;position:relative;z-index:5;background:#f0a64a;border:1.5px solid #2c2622;box-shadow:0 5px 0 #2c2622;border-radius:24px;padding:18px;color:#fff}
.walk-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.walk-card h3{margin:0;font:900 19px Nunito,sans-serif;color:#fff}
.walk-state{background:#fff;color:#2c2622;border-radius:99px;padding:5px 12px;font:800 12px Nunito,sans-serif}
.walk-state.live{color:#c2410c}
.walk-where{margin:8px 0 12px;font-size:12.5px;opacity:.9}
.walk-stats{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;color:#2c2622;border-radius:16px;padding:12px 6px;text-align:center}
.walk-stats>div+div{border-left:1px solid #0000001a}
.walk-stats small{display:block;font-size:12px;opacity:.7}
.walk-stats strong{font:900 17px Nunito,sans-serif}
.walk-go{margin-top:12px;width:100%;border:1.5px solid #2c2622;border-radius:14px;background:#2c2622;color:#fff;padding:12px;font:900 14px Nunito,sans-serif;cursor:pointer}
.walk-go.stop{background:#fff;color:#2c2622}
.walk-history{margin-top:16px;padding:16px 18px;border-radius:20px;background:#0000000a}
html[data-mode="dark"] .walk-history{background:#ffffff0d}
.walk-history h3{margin:0 0 8px;font:900 16px Nunito,sans-serif}
.walk-history ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.walk-history li{display:flex;flex-direction:column}
.walk-history small{font-size:12px;opacity:.7}
.walk-note{font-size:11px;opacity:.6;line-height:1.5;margin:14px 4px 0}
.walk-page{scroll-margin-top:72px}
/* Walk page in your petto's colours on a real map (Sophia 2026-10-12). */
.walk-leaflet{position:absolute;inset:0;z-index:0;background:#f4efe9}
.walk-map.real .walk-streets,.walk-map.real .walk-ring,.walk-map.real .walk-pins{display:none}
.walk-map .leaflet-container{font:inherit;background:#f4efe9}
.walk-circle{fill:var(--petto,#f0a64a);fill-opacity:.18;stroke:var(--petto-deep,#f0a64a);stroke-width:2.5}
.walk-map-pin{background:none;border:0}
.walk-map-pin .walk-pin{position:static;transform:none}
.walk-map-pin .walk-egg{position:static;transform:none;width:44px;height:52px}
@keyframes walkeggmap{50%{transform:translateY(-6px) rotate(6deg)}}
.walk-map-pin .walk-egg{animation:walkeggmap 1.8s ease-in-out infinite}
.walk-map-pin .walk-egg.catching{animation:walkcatchmap .9s ease-in forwards}
@keyframes walkcatchmap{40%{transform:translateY(-18px) scale(1.25) rotate(-10deg)}100%{transform:scale(0);opacity:0}}
.walk-me-icon{background:none;border:0}
.walk-me-icon .walk-me{width:86px;height:86px}
.walk-ring{border-color:var(--petto-deep,#f0a64a);background:radial-gradient(circle,color-mix(in srgb,var(--petto,#ffe7c4) 45%,transparent),transparent 72%)}
.walk-card{background:var(--petto,#f0a64a);color:#2c2622}
.walk-card h3{color:#2c2622}
.walk-where{opacity:.75}
.walk-state.live{color:var(--petto-deep,#c2410c)}
.walk-chip.share[aria-pressed="true"]{background:var(--petto,#9fe0b4)}
.walk-go{background:#2c2622}
html[data-mode="dark"] .walk-map .leaflet-tile-pane{filter:brightness(.62) contrast(1.1) saturate(.8)}
/* Friends (Sophia 2026-10-12): swap friend codes, friends join the leaderboard. */
.friends-card{margin-top:14px}
.friend-code-box{display:grid;gap:8px;max-width:460px;margin:16px auto 0;padding:14px;border:1px solid #ffffff14;border-radius:18px;background:#090a0d;text-align:center}
.friend-code-box small{color:#aaa9ad;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.friend-code-box code{display:block;font-size:12px;line-height:1.4;word-break:break-all;color:#f5f2ea;user-select:all;-webkit-user-select:all}
.friend-share,.friend-add button{border:0;border-radius:999px;background:var(--petto,#f5f2ea);color:#1d1e24;font:800 14px Nunito,sans-serif;padding:10px 18px;cursor:pointer}
.friend-add{max-width:460px;margin:14px auto 0;display:grid;gap:6px}
.friend-add label{font-size:12px;color:#aaa9ad}
.friend-add div{display:grid;grid-template-columns:1fr auto;gap:8px}
.friend-add input{min-width:0;border:1px solid #ffffff22;border-radius:14px;background:#090a0d;color:#f5f2ea;padding:10px 12px;font-size:14px}
.friend-msg{margin:0;min-height:16px;font-size:12px;color:#bdf093}.friend-msg.bad{color:#ffb0a8}
.friend-list{list-style:none;margin:12px auto 0;padding:0;max-width:460px;display:grid;gap:8px}
.friend-list li{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;padding:8px 12px;border:1px solid #ffffff10;border-radius:16px;background:#090a0d}
.friend-list li span:nth-child(2){display:grid;gap:2px;min-width:0}.friend-list strong{font-size:13px}.friend-list small{color:#aaa9ad;font-size:12px}
.friend-list .leader-face{width:44px;height:44px}
.friend-list .friend-empty{display:block;text-align:center;color:#aaa9ad;font-size:13px}
.friend-remove{border:0;background:none;color:#77767c;font-size:16px;cursor:pointer;padding:6px}
/* Light mode: leaderboard and friends take the petto's colour (Sophia 2026-10-12). */
html:not([data-mode="dark"]) .leader-card{--lc:var(--petto,#f0c46a);--lcd:var(--petto-deep,#a8823a);background:linear-gradient(160deg,color-mix(in srgb,var(--lc) 55%,#fff),color-mix(in srgb,var(--lc) 85%,#fff) 60%,var(--lc));color:#26242a}
html:not([data-mode="dark"]) .leader-card :is(h2,strong){color:#26242a}
html:not([data-mode="dark"]) .leader-card :is(.eyebrow,small,p,.leader-note,label,.leader-list b){color:color-mix(in srgb,var(--lcd) 70%,#26242a)}
html:not([data-mode="dark"]) .leader-card :is(.leader-list li,.leader-face,.friend-code-box,.friend-list li,.friend-add input,.leader-tabs button){background:#ffffffb8;border-color:#ffffffe0;box-shadow:none}
html:not([data-mode="dark"]) .leader-card .friend-add input{color:#26242a}
html:not([data-mode="dark"]) .leader-card .friend-code-box code{color:#26242a}
html:not([data-mode="dark"]) .leader-card .leader-tabs button[aria-pressed="true"],html:not([data-mode="dark"]) .leader-card :is(.friend-share,.friend-add button){background:#26242a;border-color:#26242a;color:#fff}
html:not([data-mode="dark"]) .leader-card .leader-step b{background:color-mix(in srgb,var(--lcd) 45%,#fff);color:#fff;box-shadow:none}
html:not([data-mode="dark"]) .leader-card .leader-step.p1 b{background:linear-gradient(#fff,color-mix(in srgb,var(--lcd) 55%,#fff))}
html:not([data-mode="dark"]) .leader-card :is(.leader-step.me .leader-face,.leader-list li.me,.leader-list li.me .leader-face){border-color:var(--lcd);box-shadow:0 0 0 2px color-mix(in srgb,var(--lcd) 40%,transparent)}
html:not([data-mode="dark"]) .leader-card .friend-msg{color:#2f7a3a}html:not([data-mode="dark"]) .leader-card .friend-msg.bad{color:#b4372d}
html:not([data-mode="dark"]) .leader-card .leader-tabs button{color:#4a4750}
/* Level-up letter (Sophia 2026-10-12): an envelope opens and the letter slides up out of it. */
.letter-dialog{width:min(380px,calc(100vw - 32px));padding:0!important;border:0!important;border-radius:24px;background:transparent!important;box-shadow:none!important;overflow:visible}
.letter-dialog::backdrop{background:#1d1e24aa;backdrop-filter:blur(4px)}
.letter-env{position:relative;z-index:0;height:120px;margin:0 18px;border-radius:14px;background:var(--petto,#f5b94e);box-shadow:0 14px 40px #0004;overflow:visible}
.letter-env::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(155deg,transparent 49.5%,#0000000d 50%),linear-gradient(205deg,transparent 49.5%,#0000000d 50%)}
.letter-flap{position:absolute;left:0;right:0;top:0;height:70px;background:color-mix(in srgb,var(--petto,#f5b94e) 80%,#fff);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transition:transform .6s cubic-bezier(.5,0,.3,1);z-index:2}
.letter-seal{position:absolute;left:50%;top:52px;width:30px;height:30px;margin-left:-15px;border-radius:50%;background:#e85d75;color:#fff;font-style:normal;font-size:15px;display:grid;place-items:center;z-index:3;transition:opacity .3s}
.letter-dialog.opened .letter-flap{transform:rotateX(180deg)}
.letter-dialog.opened .letter-seal{opacity:0}
.letter-paper{position:relative;z-index:1;margin:-40px 30px 0;padding:22px 18px 18px;border-radius:16px;background:#fffdf8;color:#2d2a26;text-align:center;box-shadow:0 10px 30px #0003;transform:translateY(60px) scale(.94);opacity:0;transition:transform .7s cubic-bezier(.34,1.4,.64,1) .45s,opacity .3s .45s;max-height:70vh;overflow:auto}
.letter-dialog.opened .letter-paper{transform:none;opacity:1}
.letter-paper h2{margin:4px 0 6px;font-size:24px}
.letter-paper .eyebrow{color:#a08a6a;background:none}
.letter-pet{width:96px;height:96px;margin:0 auto 4px}.letter-pet>*{width:100%;height:100%}
.letter-paper p{margin:6px 0;font-size:14px;line-height:1.45}
.letter-unlocks{margin:6px 0;padding:0;list-style:none;display:grid;gap:6px;text-align:left}
.letter-unlocks li{padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--petto,#f5b94e) 22%,#fff);font-size:13px}
.letter-sign{font-family:'Comic Sans MS','Chalkboard SE',cursive;font-size:15px!important;text-align:right}
.letter-actions{display:flex;gap:8px;justify-content:center;margin-top:10px}
.letter-actions button{border:0;border-radius:999px;padding:10px 16px;font-weight:800;background:#2d2a26;color:#fff}
.letter-actions .secondary-button{background:#efe8dc;color:#6b5d4b}
@media(prefers-reduced-motion:reduce){.letter-flap,.letter-paper{transition:none}}
/* The Walk page in the app's own look (Sophia, 2026-10-12): one soft card like the other pages, frosted pill chips on the map,
   quiet panels for the walk and its history, the app's own buttons, and each part gliding up in turn like the sign-up steps. */
.walk-page{padding:20px;border:1px solid var(--line);border-radius:20px;background:#fff}
html[data-mode="dark"] .walk-page{background:hsl(var(--th,150) 10% 11%);border-color:#ffffff12;box-shadow:0 0 60px #00000040}
html:not([data-mode="dark"]):not([data-theme]) .walk-page{background:#fff;border-color:transparent;border-radius:22px;box-shadow:0 1px 2px #0000000a,0 8px 30px #0000000d}
.walk-page .section-head{margin-bottom:14px}
.walk-map{border-radius:18px;height:min(520px,64vh);min-height:400px}
.walk-chip,.walk-chip.share,.walk-chip.history,.walk-chip.eggs{border:0;border-radius:99px;padding:6px 13px 6px 6px;background:#ffffffe8;color:#1d1d1f;box-shadow:0 2px 12px #0000001f;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s,color .25s,transform .2s}
.walk-chip span{border-radius:50%;background:color-mix(in srgb,var(--petto,#f0a64a) 35%,#fff)}
.walk-chip:active{transform:scale(.96)}
.walk-chip.share[aria-pressed="true"]{background:#1d1d1f;color:#fff}
.walk-chip.share[aria-pressed="true"] span{background:var(--petto,#9fe0b4)}
html[data-mode="dark"] .walk-chip{background:#101114e0;color:#f5f2ea;box-shadow:0 2px 14px #00000059}
html[data-mode="dark"] .walk-chip span{background:#ffffff14}
html[data-mode="dark"] .walk-chip.share[aria-pressed="true"]{background:#f5f2ea;color:#101114}
.walk-card{margin-top:14px;border:0;box-shadow:none;border-radius:20px;background:#f5f5f7;color:inherit;padding:18px}
html[data-mode="dark"] .walk-card{background:#090a0d;border:1px solid #ffffff10}
.walk-card h3,html[data-mode="dark"] .walk-card h3{color:inherit;font-size:17px}
.walk-state{background:color-mix(in srgb,var(--petto,#f0a64a) 32%,transparent);color:inherit;transition:background .3s}
.walk-state.live{color:inherit;background:color-mix(in srgb,var(--petto,#f0a64a) 60%,transparent)}
.walk-where{opacity:.65}
.walk-stats{background:none;padding:0;gap:8px;color:inherit}
.walk-stats>div{background:#fff;border-radius:16px;padding:12px 6px}
.walk-stats>div+div{border-left:0}
html[data-mode="dark"] .walk-stats>div{background:#16171b}
.walk-go,.walk-go.primary{border:0;border-radius:99px;padding:13px;font:800 14px Nunito,sans-serif;transition:transform .2s,background .3s}
.walk-go:active{transform:scale(.97)}
.walk-go.stop,html .walk-go.primary.stop{background:#e8e8ed;color:#1d1d1f;box-shadow:none}
html[data-mode="dark"] .walk-go.primary.stop{background:#ffffff14;color:#f5f2ea}
.walk-history{background:#f5f5f7}
html[data-mode="dark"] .walk-history{background:#090a0d;border:1px solid #ffffff10}
.walk-history li{padding:8px 0;border-top:1px solid #0000000d;animation:stepin .5s ease both}
.walk-history li:first-child{border-top:0}
html[data-mode="dark"] .walk-history li{border-color:#ffffff0d}
.walk-toast{border-radius:99px;background:#1d1d1fe6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
html[data-mode="dark"] .walk-toast{background:#f5f2eae6;color:#101114}
.walk-page>*{animation:stepin .6s cubic-bezier(.34,1.3,.64,1) both}
.walk-page>:nth-child(2){animation-delay:.06s}.walk-page>:nth-child(3){animation-delay:.12s}.walk-page>:nth-child(4){animation-delay:.18s}.walk-page>:nth-child(n+5){animation-delay:.24s}
@media(prefers-reduced-motion:reduce){.walk-page>*,.walk-history li{animation:none}}
/* Traits in light mode wear your petto's colour, like the leaderboard (Sophia, 2026-10-12). */
html:not([data-mode="dark"]) .trait-mode{--lc:var(--petto,#f0c46a);--lcd:var(--petto-deep,#a8823a);background:linear-gradient(160deg,color-mix(in srgb,var(--lc) 55%,#fff),color-mix(in srgb,var(--lc) 85%,#fff) 60%,var(--lc));color:#26242a}
html:not([data-mode="dark"]) .trait-mode :is(h2,.trait-head b){color:#26242a}
html:not([data-mode="dark"]) .trait-mode :is(.eyebrow,.trait-head p,.egg-tag,.egg-cell small){color:color-mix(in srgb,var(--lcd) 70%,#26242a)}
html:not([data-mode="dark"]) .trait-mode .egg-tag :is(b,strong){color:#26242a}
html:not([data-mode="dark"]) .trait-mode .egg-field{filter:none}
html:not([data-mode="dark"]) .trait-mode .egg-picker.focused .egg-field{filter:blur(7px) saturate(1.2) brightness(1.08)}
html:not([data-mode="dark"]) .trait-mode :is(.egg-cell i,.egg-moons i){background:#ffffffb8;border-color:#ffffffe0}
html:not([data-mode="dark"]) .trait-mode .egg-hero::before{background:#ffffffd9;box-shadow:inset 0 0 0 1px #ffffff,0 0 90px color-mix(in srgb,var(--lcd) 35%,transparent)}
html:not([data-mode="dark"]) .trait-mode .egg-lines path{stroke:color-mix(in srgb,var(--lcd) 60%,#26242a)}
html:not([data-mode="dark"]) .trait-tile{background:#ffffffb8;border-color:#ffffffe0;color:color-mix(in srgb,var(--lcd) 70%,#26242a)}
html:not([data-mode="dark"]) .trait-tile strong{color:color-mix(in srgb,var(--lcd) 55%,#26242a)}
html:not([data-mode="dark"]) .trait-tile.earned{border-color:var(--lcd);box-shadow:0 0 0 2px color-mix(in srgb,var(--lcd) 40%,transparent)}
html:not([data-mode="dark"]) .trait-tile.earned strong{color:#26242a}
html:not([data-mode="dark"]) .trait-bar{background:color-mix(in srgb,var(--lcd) 18%,#fff)}
html:not([data-mode="dark"]) .trait-bar i,html:not([data-mode="dark"]) .trait-pips b.on{background:var(--lcd)}
html:not([data-mode="dark"]) .trait-pips b{background:color-mix(in srgb,var(--lcd) 22%,#fff)}
html:not([data-mode="dark"]) .trait-lv{background:#26242a;color:#fff}
html:not([data-mode="dark"]) .trait-streak{color:color-mix(in srgb,var(--lcd) 80%,#26242a)!important}
html:not([data-mode="dark"]) .trait-mode .egg-moons small{color:#26242a}
/* Water log: a bottle that fills up as you drink, with a gently moving surface and a splash each time you log some (Sophia, 2026-10-12). */
.water-visual{display:flex;align-items:center;gap:22px;margin:18px 0 20px}
.water-bottle{position:relative;flex:none;width:96px;height:176px;padding-top:26px;transform-origin:50% 100%}
.water-bottle::before{content:'';position:absolute;left:50%;top:0;width:38px;height:16px;margin-left:-19px;border-radius:6px 6px 3px 3px;background:#7fc4e8}
.water-bottle::after{content:'';position:absolute;left:50%;top:14px;width:50px;height:14px;margin-left:-25px;border-radius:4px 4px 0 0;background:#d9eef8}
.water-bottle .water-progress{position:relative;height:100%;margin:0;border-radius:30px 30px 26px 26px;background:#eef8fc;box-shadow:inset 0 0 0 3px #cfe9f5;overflow:hidden}
.water-bottle .water-progress i{position:absolute;left:0;right:0;bottom:0;width:100%!important;height:var(--fill,0%);border-radius:0;background:linear-gradient(#7fd3f7,#3a9fe0);transition:height 1s cubic-bezier(.34,1.3,.64,1)}
.water-wave{position:absolute;left:0;top:-9px;width:200%;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 Q10 0 20 5 T40 5 V10 H0z' fill='%237fd3f7'/%3E%3C/svg%3E") repeat-x 0 0/48px 10px;animation:waterwave 2.4s linear infinite}
.water-wave.back{opacity:.45;top:-11px;animation-duration:3.6s;animation-direction:reverse}
.water-progress i em{position:absolute;bottom:6px;width:6px;height:6px;border-radius:50%;background:#ffffff8c;animation:waterbubble 3.2s ease-in infinite}
.water-progress i em:nth-of-type(1){left:28%}.water-progress i em:nth-of-type(2){left:58%;width:4px;height:4px;animation-delay:1.1s}.water-progress i em:nth-of-type(3){left:44%;width:5px;height:5px;animation-delay:2.2s}
.water-marks{position:absolute;right:10px;top:18%;bottom:12%;width:12px;background:repeating-linear-gradient(#0000 0 calc(25% - 2px),#9ccfe6 calc(25% - 2px) 25%);opacity:.7;pointer-events:none}
.water-progress::after{content:'';position:absolute;left:14px;top:14px;width:9px;height:46%;border-radius:9px;background:#ffffff8c;pointer-events:none}
.water-bottle.splash{animation:watersplash .6s cubic-bezier(.34,1.5,.64,1)}
.water-side{display:grid;gap:4px}
.water-side strong{font:900 40px Nunito,sans-serif;color:#3a9fe0;line-height:1}
.water-side small{font-size:13px;font-weight:700;color:#87968b}
@keyframes waterwave{to{transform:translateX(-50%)}}
@keyframes waterbubble{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-150px);opacity:0}}
@keyframes watersplash{30%{transform:scale(1.06,.94)}60%{transform:scale(.97,1.04)}}
html[data-mode="dark"] .water-bottle .water-progress{background:#0b1a22;box-shadow:inset 0 0 0 3px #1f3c4b}
html[data-mode="dark"] .water-bottle::after{background:#1f3c4b}
html[data-mode="dark"] .water-progress::after{background:#ffffff1f}
html[data-mode="dark"] .water-side small{color:#aaa9ad}
html[data-mode="dark"] .water-side strong{color:#64d2ff}
@media(prefers-reduced-motion:reduce){.water-wave,.water-progress i em,.water-bottle.splash{animation:none}}
.water-progress i.empty{visibility:hidden}
/* Cuter letter (Sophia, 2026-10-12): the envelope pops up with a bounce and a wiggle, the flap opens with a puff of
   hearts and sparkles, then the letter slides up out of it while the envelope sinks away. */
.letter-env{height:132px;margin:0 34px;border-radius:18px;background:color-mix(in srgb,var(--petto,#f5b94e) 85%,#000);box-shadow:0 16px 40px #0004;animation:envpop .7s cubic-bezier(.34,1.6,.64,1) both,envwiggle .5s ease-in-out .7s;transition:transform .7s cubic-bezier(.5,0,.3,1),opacity .5s ease}
.letter-env::after{display:none}
.letter-pocket{position:absolute;inset:0;z-index:2;border-radius:18px;background:var(--petto,#f5b94e);clip-path:polygon(0 18%,50% 64%,100% 18%,100% 100%,0 100%)}
.letter-flap{z-index:3;height:84px;border-radius:18px 18px 0 0;background:color-mix(in srgb,var(--petto,#f5b94e) 70%,#fff);clip-path:polygon(0 0,100% 0,50% 100%)}
.letter-seal{z-index:4;top:62px;width:34px;height:34px;margin-left:-17px;background:#ff7aa2;box-shadow:0 3px 0 #d9557d,0 0 0 4px #ffffff66;font-size:16px;animation:sealbeat 1s ease-in-out .3s 2}
.letter-dialog.opened .letter-flap{z-index:0}
.letter-dialog.opened .letter-seal{opacity:0;transform:scale(1.6)}
.letter-hearts{position:absolute;left:50%;top:10px;z-index:1;pointer-events:none}
.letter-hearts i{position:absolute;left:0;top:0;font-style:normal;font-size:18px;color:#ff7aa2;opacity:0}
.letter-hearts i:nth-child(2n){color:#ffd36e;font-size:14px}
.letter-dialog.opened .letter-hearts i{animation:envheart 1.2s ease-out both}
.letter-hearts i:nth-child(1){--x:-70px;--y:-70px}.letter-hearts i:nth-child(2){--x:-34px;--y:-96px;animation-delay:.08s!important}.letter-hearts i:nth-child(3){--x:0px;--y:-110px;animation-delay:.04s!important}.letter-hearts i:nth-child(4){--x:38px;--y:-92px;animation-delay:.12s!important}.letter-hearts i:nth-child(5){--x:72px;--y:-66px;animation-delay:.02s!important}
.letter-paper{margin:-64px 26px 0;transform:translateY(90px) scale(.6);transition:transform .8s cubic-bezier(.34,1.35,.64,1),opacity .3s}
.letter-dialog.opened .letter-paper{transform:translateY(90px) scale(.6);opacity:0}
.letter-dialog.out .letter-paper{transform:none;opacity:1}
.letter-dialog.out .letter-env{transform:translateY(40px) scale(.9);opacity:.0}
@keyframes envpop{0%{transform:translateY(80px) scale(.2) rotate(-8deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes envwiggle{25%{transform:rotate(-5deg)}50%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
@keyframes sealbeat{50%{transform:scale(1.18)}}
@keyframes envheart{0%{transform:translate(-50%,10px) scale(.4);opacity:0}25%{opacity:1}100%{transform:translate(calc(-50% + var(--x)),var(--y)) scale(1.1);opacity:0}}
@media(prefers-reduced-motion:reduce){.letter-env,.letter-seal,.letter-dialog.opened .letter-hearts i{animation:none}.letter-paper{transition:none}}
/* The sleep report letter, like the Apple Watch Sleep app: a dark card with cyan Time Asleep and the stage chart. */
.letter-sleep{margin:10px 0 6px;padding:14px;border-radius:16px;background:#000;color:#fff;text-align:left;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Rounded',system-ui,sans-serif}
.letter-sleep small{display:block;color:#8e8e93;font-size:11px;font-weight:600;letter-spacing:.02em}
.letter-sleep .sleep-big{margin:0 0 6px!important;color:#64d2ff;font-size:16px!important;font-weight:600}.letter-sleep .sleep-big b{font-size:30px}
.sleep-chart{position:relative;height:96px;margin:4px 0 2px;animation:sleepdraw 1.4s ease-out 1.8s both}
.sleep-chart i{position:absolute}.sleep-chart .grid{left:0;right:0;height:1px;background:#ffffff14}.sleep-chart .bar{height:15%;border-radius:3px}.sleep-chart .join{width:1px;background:#ffffff4d}
@keyframes sleepdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.sleep-times{display:flex;justify-content:space-between;color:#8e8e93;font-size:10px;margin-bottom:6px}
.sleep-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px;border-top:1px solid #ffffff12}.sleep-row i{width:9px;height:9px;border-radius:2px}.sleep-row b{margin-left:auto;font-weight:600}
.letter-sleep .sleep-row:first-of-type{border-top:0}
.letter-sleep small+.sleep-score,.letter-sleep .sleep-row+small{margin-top:10px}
.letter-sleep .sleep-score{margin:0!important;font-size:14px!important;font-weight:600}.letter-sleep .sleep-score b{color:#64d2ff;font-size:30px;margin-right:4px}
@media(prefers-reduced-motion:reduce){.sleep-chart{animation:none}}
.letter-dialog.out .letter-env{animation:envsink .6s ease-in forwards}
@keyframes envsink{to{transform:translateY(60px) scale(.85);opacity:0}}
.letter-paper h2,html[data-mode="dark"] .letter-paper h2{color:#2d2a26}
/* A proper envelope (Sophia, 2026-10-12): square corners, a pocket folded in from both sides and the bottom, and a
   triangle flap exactly as wide as the envelope, sitting flush on its top edge and folding up and back when it opens.
   The letter itself is a sheet of paper with only slightly softened corners. */
.letter-dialog{perspective:900px}
.letter-env{height:150px;margin:0 30px;border-radius:3px;background:color-mix(in srgb,var(--petto,#f5b94e) 70%,#5a4a52);transform-style:preserve-3d}
.letter-pocket{border-radius:0 0 3px 3px;background:var(--petto,#f5b94e);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.letter-pocket::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--petto,#f5b94e) 88%,#000);clip-path:polygon(0 100%,50% 46%,100% 100%)}
.letter-flap{left:0;right:0;top:0;height:58%;border-radius:0;background:color-mix(in srgb,var(--petto,#f5b94e) 80%,#fff);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;backface-visibility:visible;filter:drop-shadow(0 2px 2px #0002)}
.letter-seal{top:calc(58% - 19px)}
.letter-paper{border-radius:4px;background:linear-gradient(#fffdf8,#fffdf8) padding-box,repeating-linear-gradient(transparent 0 27px,#ece4d6 27px 28px);box-shadow:0 12px 30px #0003,inset 0 0 0 1px #efe7d8}
.sleep-ring{position:relative;margin:4px auto 6px}.sleep-ring svg{width:100%;height:100%;display:block}
.sleep-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.sleep-ring b{font-size:34px;font-weight:700;color:#fff}.sleep-ring span{margin-top:3px;font-size:11px;font-weight:600;color:#64d2ff}
.sleep-ring .ring-fill{animation:ringdraw 1s cubic-bezier(.3,.9,.4,1) both}
@keyframes ringdraw{from{stroke-dasharray:0 1000}}
.sleep-parts{display:grid;gap:4px;margin:2px 0 8px}.sleep-parts span{display:flex;align-items:center;gap:6px;font-size:12px}.sleep-parts i{width:8px;height:8px;border-radius:50%}.sleep-parts b{margin-left:auto;font-weight:600}
@media(prefers-reduced-motion:reduce){.sleep-ring .ring-fill{animation:none}}
/* Mailbox (Sophia, 2026-10-12): a round button at the top with a count of new letters, and a mailbox that pops up in
   your petto's colour. Its flag springs up when there's new mail, the door drops open, letters hop out and the list
   slides in. */
.topbar .mail-button{order:2}
.mail-button{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:inherit;flex:none}
.mail-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mail-count{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:#ff5b7f;color:#fff;font:800 10px/18px Nunito,sans-serif;text-align:center;box-shadow:0 0 0 2px var(--cream);animation:mailbadge 2.4s ease-in-out infinite}
html:not([data-mode="dark"]):not([data-theme]) .mail-button{background:#e8e8ed;border-color:transparent;color:#1d1d1f}
html[data-mode="dark"] .mail-button{background:#090a0d;border-color:#ffffff14;color:#f5f2ea}
html[data-mode="dark"] .mail-count{box-shadow:0 0 0 2px #101114}
@keyframes mailbadge{0%,80%,100%{transform:none}86%{transform:scale(1.25) rotate(-8deg)}92%{transform:scale(1.1) rotate(6deg)}}
.mailbox-dialog{width:min(380px,calc(100vw - 32px));max-height:86vh;padding:20px 20px 18px;border:0;border-radius:26px;background:#fff;color:#2d2a26;text-align:center;box-shadow:0 30px 80px #0004;overflow:auto}
.mailbox-dialog[open]{animation:mailpop .55s cubic-bezier(.34,1.6,.64,1) both}
.mailbox-dialog::backdrop{background:#1d1e24aa;backdrop-filter:blur(4px)}
html[data-mode="dark"] .mailbox-dialog{background:#18191e;color:#f8f5ed;box-shadow:0 0 0 1px #ffffff14,0 30px 80px #000a}
.mailbox-dialog h2{margin:2px 0 4px;font-size:22px}
html[data-mode="dark"] .mailbox-dialog h2{color:#f8f5ed}
.mailbox-note{margin:0 0 12px;font-size:13px;opacity:.7}
.mailbox-art{width:150px;height:140px;margin:-6px auto 4px}
.mailbox-art svg{width:100%;height:100%;overflow:visible}
.mb-post{fill:#b08968}
.mb-inside{fill:#3a2f3a}
.mb-mail rect{fill:#fffdf8;stroke:#e2d6c4;stroke-width:1}.mb-mail path{fill:none;stroke:#e2a0b4;stroke-width:1.5}
.mb-mail{transform-box:view-box;transform-origin:80px 96px;transform:translateY(8px);opacity:0}
.mb-door{fill:var(--petto,#f5b94e);stroke:color-mix(in srgb,var(--petto,#f5b94e) 70%,#000);stroke-width:2;transform-box:fill-box;transform-origin:50% 100%;transition:transform .55s cubic-bezier(.5,0,.3,1.3)}
.mb-knob{fill:#fff;stroke:color-mix(in srgb,var(--petto,#f5b94e) 70%,#000);stroke-width:2;transition:opacity .2s}
.mb-flag rect{fill:#8a8f99}.mb-flag path{fill:#ff5b7f}
.mb-flag{transform-box:view-box;transform-origin:124.5px 94px;transform:rotate(90deg);transition:transform .6s cubic-bezier(.34,1.8,.64,1) .25s}
.mailbox-art.has-new .mb-flag{transform:none}
.mb-hearts text{font-size:14px;fill:#ff7aa2;opacity:0}.mb-hearts text:nth-child(2n){fill:#ffd36e;font-size:11px}
.mailbox-dialog.opened .mb-door{transform:scaleY(-.28)}
.mailbox-dialog.opened .mb-knob{opacity:0}
.mailbox-dialog.opened .mb-mail{animation:mailhop .6s cubic-bezier(.34,1.6,.64,1) .3s forwards}
.mailbox-dialog.opened .has-new .mb-hearts text{animation:envheart 1.2s ease-out .4s both}
.mb-hearts text:nth-child(1){--x:-14px;--y:-22px}.mb-hearts text:nth-child(2){--x:14px;--y:-26px;animation-delay:.5s!important}.mb-hearts text:nth-child(3){--x:-26px;--y:-12px;animation-delay:.55s!important}
.mailbox-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:left}
.mailbox-list li{animation:stepin .5s cubic-bezier(.34,1.3,.64,1) both}
.mailbox-list button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border:0;border-radius:16px;background:#f5f5f7;color:inherit;text-align:left}
html[data-mode="dark"] .mailbox-list button{background:#090a0d;box-shadow:inset 0 0 0 1px #ffffff10}
.mailbox-list button.new{background:color-mix(in srgb,var(--petto,#f5b94e) 28%,#fff)}
html[data-mode="dark"] .mailbox-list button.new{background:color-mix(in srgb,var(--petto,#f5b94e) 22%,#090a0d)}
.mailbox-list .mail-icon{font-size:22px}
.mailbox-list b{display:block;font-size:14px}.mailbox-list small{font-size:11px;opacity:.6}
.mailbox-list i{margin-left:auto;font-style:normal;font-size:10px;font-weight:800;padding:3px 8px;border-radius:99px;background:#ff5b7f;color:#fff}
.mailbox-close{margin-top:14px;border:0;border-radius:999px;padding:10px 22px;font-weight:800;background:#efe8dc;color:#6b5d4b}
html[data-mode="dark"] .mailbox-close{background:#ffffff14;color:#f5f2ea}
@keyframes mailpop{0%{transform:translateY(40px) scale(.6);opacity:0}100%{transform:none;opacity:1}}
@keyframes mailhop{0%{transform:translateY(8px);opacity:0}100%{transform:translateY(-34px);opacity:1}}
@media(prefers-reduced-motion:reduce){.mailbox-dialog[open],.mail-count,.mailbox-list li,.mailbox-dialog.opened .mb-mail{animation:none}.mb-door,.mb-flag{transition:none}}
@media(max-width:430px){.topbar{gap:6px}.topbar .point-chip{padding:0 9px}}
.letter-sleep .sleep-big{color:#64d2ff!important}
/* The morning sleep report on white in your petto's colours (Sophia, 2026-10-12): light tint for Awake, then deeper
   shades for REM, Core and Deep; the score ring uses the same shades. */
.letter-sleep{--sl-0:color-mix(in srgb,var(--petto,#f5b94e) 38%,#fff);--sl-1:color-mix(in srgb,var(--petto,#f5b94e) 75%,#fff);--sl-2:var(--petto-deep,var(--petto,#e0a030));--sl-3:color-mix(in srgb,var(--petto-deep,var(--petto,#e0a030)) 62%,#2d2a26);background:#fff;color:#2d2a26;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--petto,#f5b94e) 45%,#fff)}
.letter-sleep small{color:#8a8178}
.letter-sleep .sleep-big{color:var(--sl-3)!important}
.letter-sleep .sleep-chart .grid{background:#0000000f}.letter-sleep .sleep-chart .join{background:#00000026}
.letter-sleep .sleep-times{color:#8a8178}
.letter-sleep .sleep-row{border-top-color:#0000000d}
.letter-sleep .sleep-ring b{color:#2d2a26}.letter-sleep .sleep-ring span{color:var(--sl-3)}
/* Four quick buttons in one clean row at the top (Sophia, 2026-10-12): Apple Health, Mailbox, Inventory and Walk,
   matching round icons sitting together in one soft capsule. On phones the name shrinks to its flower so it all fits. */
.topbar .top-actions{order:2}
.top-actions{display:flex;align-items:center;gap:2px;padding:2px;border-radius:99px;background:#fff;border:1px solid var(--line);flex:none}
.top-actions>button{position:relative;display:grid;place-items:center;width:32px;height:32px;padding:0!important;border:0!important;border-radius:50%;background:transparent!important;color:inherit;margin:0!important;order:0!important;transition:background .2s,transform .15s}
.top-actions>button:active{transform:scale(.9)}
.top-actions>button:hover{background:#0000000d!important}
.top-actions svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.top-actions .health-button{font-size:0!important}
.top-actions .health-button::before{content:'';width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.top-actions .mail-count{top:-3px;right:-3px}
html:not([data-mode="dark"]):not([data-theme]) .top-actions{background:#e8e8ed;border-color:transparent;color:#1d1d1f}
html[data-mode="dark"] .top-actions{background:#090a0d;border-color:#ffffff14;color:#f5f2ea}
html[data-mode="dark"] .top-actions>button:hover{background:#ffffff14!important}
@media(max-width:430px){.topbar .mobile-brand{font-size:0;margin-right:auto}.topbar .mobile-brand::first-letter{font-size:22px}.top-actions>button{width:30px;height:30px}.topbar{gap:5px}}
/* Inventory: a bag of everything you own, in tabs, each tile wearing, placing or bringing along with one tap. */
.inventory-dialog{width:min(420px,calc(100vw - 32px));max-height:86vh;padding:22px 18px 18px;border:0;border-radius:26px;background:#fff;color:#2d2a26;box-shadow:0 30px 80px #0004;overflow:auto}
.inventory-dialog[open]{animation:mailpop .5s cubic-bezier(.34,1.6,.64,1) both}
.inventory-dialog::backdrop{background:#1d1e24aa;backdrop-filter:blur(4px)}
html[data-mode="dark"] .inventory-dialog{background:#18191e;color:#f8f5ed;box-shadow:0 0 0 1px #ffffff14,0 30px 80px #000a}
html[data-mode="dark"] .inventory-dialog h2{color:#f8f5ed}
.inventory-dialog h2{margin:2px 0 12px;font-size:22px}
.inventory-dialog .close{position:absolute;right:14px;top:12px}
.inv-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:12px}
.inv-tabs button{flex:none;border:0;border-radius:99px;padding:7px 13px;font-weight:800;font-size:12.5px;background:#f0f0f3;color:inherit}
.inv-tabs button[aria-pressed="true"]{background:#1d1d1f;color:#fff}
html[data-mode="dark"] .inv-tabs button{background:#090a0d;box-shadow:inset 0 0 0 1px #ffffff14}
html[data-mode="dark"] .inv-tabs button[aria-pressed="true"]{background:#f5f2ea;color:#101114}
.inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv-item{display:grid;justify-items:center;gap:3px;padding:10px 6px;border:0;border-radius:18px;background:#f5f5f7;color:inherit;animation:stepin .45s cubic-bezier(.34,1.3,.64,1) both;transition:transform .15s}
.inv-item:active{transform:scale(.95)}
.inv-item.on{background:color-mix(in srgb,var(--petto,#f5b94e) 30%,#fff);box-shadow:inset 0 0 0 2px var(--petto-deep,var(--petto,#f5b94e))}
html[data-mode="dark"] .inv-item{background:#090a0d;box-shadow:inset 0 0 0 1px #ffffff10}
html[data-mode="dark"] .inv-item.on{background:color-mix(in srgb,var(--petto,#f5b94e) 22%,#090a0d);box-shadow:inset 0 0 0 2px var(--petto,#f5b94e)}
.inv-art{display:grid;place-items:center;width:58px;height:58px}.inv-art>*{width:100%;height:100%;object-fit:contain}
.inv-item b{font-size:12px;line-height:1.2;text-align:center}.inv-item small{font-size:10.5px;font-weight:700;opacity:.65}
.inv-empty{grid-column:1/-1;text-align:center;font-size:13px;opacity:.8;padding:20px 0}
.inv-empty button,.inv-eggs button{display:block;margin:10px auto 0;border:0;border-radius:99px;padding:9px 16px;font-weight:800;background:#1d1d1f;color:#fff}
html[data-mode="dark"] :is(.inv-empty,.inv-eggs) button{background:#f5f2ea;color:#101114}
.inv-eggs{grid-column:1/-1;display:grid;justify-items:center;gap:4px;padding:18px;border-radius:20px;background:#f5f5f7;text-align:center}
html[data-mode="dark"] .inv-eggs{background:#090a0d}
.inv-ticket{font-size:40px;animation:eggwiggle 2.8s ease-in-out infinite}
.inv-eggs small{font-size:12px;opacity:.7}
.inv-status{min-height:1em;margin:10px 0 0;text-align:center;font-size:12.5px;font-weight:700}
@media(prefers-reduced-motion:reduce){.inventory-dialog[open],.inv-item,.inv-ticket{animation:none}}
/* Walking near an egg: the circle around you glows and pulses faster as you get close (Sophia, 2026-10-12). */
.walk-ring.sense{animation:walksense 1.6s ease-in-out infinite}
.walk-ring.sense-here{animation:walksense .7s ease-in-out infinite}
@keyframes walksense{50%{box-shadow:0 0 0 12px color-mix(in srgb,var(--petto,#f0a64a) 30%,transparent),0 0 40px color-mix(in srgb,var(--petto,#f0a64a) 50%,transparent)}}
.walk-egg.near{animation:walkeggnear .6s ease-in-out infinite;filter:drop-shadow(0 0 12px var(--accent))}
@keyframes walkeggnear{0%,100%{transform:translate(-50%,-50%) rotate(-8deg) scale(1.1)}50%{transform:translate(-50%,-56%) rotate(8deg) scale(1.2)}}
.walk-map-pin .walk-egg.near{animation:walkeggnearmap .6s ease-in-out infinite}
@keyframes walkeggnearmap{0%,100%{transform:rotate(-8deg) scale(1.1)}50%{transform:translateY(-6px) rotate(8deg) scale(1.2)}}
/* The catch screen: dark like the egg pages, the egg hopping about inside a ring that fills as you tap and a thin
   timer ring running down. Caught = sparkle burst; missed = it rolls away. */
.egg-catch{position:fixed;inset:0;z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(28px,env(safe-area-inset-top)) 16px max(26px,env(safe-area-inset-bottom));background:radial-gradient(circle at 50% 45%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed;overflow:hidden;touch-action:manipulation;user-select:none;-webkit-user-select:none;animation:stepin .4s ease both}
.egg-catch .close{position:absolute;right:16px;top:max(16px,env(safe-area-inset-top));background:#ffffff14;color:#f8f5ed;border:0;width:34px;height:34px;border-radius:50%;font-size:20px}
.catch-top{text-align:center}.catch-top .eyebrow{color:#aaa9ad;background:none;letter-spacing:.18em}
.catch-top h2{margin:6px 0 4px;color:#f8f5ed!important;font-size:26px}
.catch-top p{margin:0;color:#c9c7cc;font-size:14px;min-height:1.4em}
.catch-stage{position:relative;width:min(80vw,340px);aspect-ratio:1}
.catch-ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.catch-ring circle{fill:none;stroke-linecap:round}
.catch-track{stroke:#ffffff10;stroke-width:4}
.catch-time{stroke:#f5f2ea;stroke-width:4;stroke-dasharray:339.3;stroke-dashoffset:calc(339.3 * (1 - var(--t,1)));transition:stroke-dashoffset .1s linear}
.catch-fill{stroke:var(--accent);stroke-width:12;stroke-dasharray:289;stroke-dashoffset:calc(289 * (1 - var(--p,0)));transition:stroke-dashoffset .15s ease;filter:drop-shadow(0 0 10px var(--accent))}
.catch-egg{position:absolute;left:50%;top:50%;width:calc(var(--size,.38) * 100%);aspect-ratio:1;margin:calc(var(--size,.38) * -50%) 0 0 calc(var(--size,.38) * -50%);border:0;padding:0;background:none;cursor:pointer;transform:translate(var(--x,0),var(--y,0));transition:transform var(--speed,.45s) cubic-bezier(.34,1.5,.64,1);filter:drop-shadow(0 10px 18px #0007)}
.catch-egg svg{width:100%;height:100%;animation:eggwiggle 1s ease-in-out infinite}
.catch-egg.tapped svg{animation:catchsquish .22s ease}
@keyframes catchsquish{40%{transform:scale(1.18,.82)}70%{transform:scale(.92,1.08)}}
.catch-count{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font:900 64px/1 Nunito,sans-serif;color:#f8f5ed;text-shadow:0 0 24px var(--accent),0 4px 0 var(--outline);opacity:0;z-index:2}
.catch-count.show{opacity:1}.catch-count.pop{animation:catchcount .8s cubic-bezier(.34,1.5,.64,1) both}
@keyframes catchcount{0%{transform:scale(.3);opacity:0}25%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.5);opacity:0}}
.catch-seconds{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);font:900 15px Nunito,sans-serif;color:#aaa9ad}
.catch-spark{position:fixed;z-index:71;pointer-events:none;font-style:normal;font-size:18px;color:var(--accent);animation:catchspark .8s ease-out forwards}
@keyframes catchspark{from{transform:translate(-50%,-50%) scale(.6);opacity:1}to{transform:translate(calc(-50% + var(--dx)),-90px) scale(1.2);opacity:0}}
.catch-pet{width:110px;height:110px}.catch-pet>*{width:100%;height:100%}
.catch-actions{display:flex;gap:10px;min-height:44px}
.catch-actions button{border:0;border-radius:99px;padding:12px 22px;font-weight:900;font-size:15px}
.egg-catch .primary{background:#f5f2ea;color:#101114}
.egg-catch .secondary-button{background:#ffffff14;color:#f5f2ea}
.egg-catch.caught .catch-egg{transform:none;animation:catchgot .9s cubic-bezier(.34,1.5,.64,1) forwards}
.egg-catch.caught .catch-stage::after{content:'✦ ✧ ♥ ✦ ✧';position:absolute;inset:0;display:grid;place-items:center;font-size:30px;letter-spacing:10px;color:var(--accent);animation:catchburst 1s ease-out both}
@keyframes catchgot{30%{transform:scale(1.3)}100%{transform:scale(.6) translateY(140%);opacity:0}}
@keyframes catchburst{from{transform:scale(.3);opacity:0}40%{opacity:1}to{transform:scale(1.6);opacity:0}}
.egg-catch.missed .catch-egg{animation:catchaway 1.1s ease-in forwards}
@keyframes catchaway{to{transform:translate(160%,30%) rotate(540deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.catch-egg svg,.egg-catch.caught .catch-egg,.egg-catch.missed .catch-egg,.walk-ring.sense,.walk-ring.sense-here,.walk-egg.near{animation:none}}
.egg-catch{z-index:1000}
.catch-fill{filter:none}

/* Caught on a walk: the Pettodex egg page opens with a little banner (Sophia, 2026-10-12). */
.dex-caught{display:block;font-style:normal;font-weight:900;color:#ffd75e;margin-bottom:4px;animation:catchcount 2.4s ease-out both;animation-name:dexcaught}
@keyframes dexcaught{0%{transform:scale(.6);opacity:0}20%{transform:scale(1.1);opacity:1}35%,100%{transform:scale(1);opacity:1}}
/* It got away end page (Sophia, 2026-10-12). */
.egg-catch.lost .catch-stage,.egg-catch.lost .catch-pet{display:none}
.catch-lost{display:grid;justify-items:center;gap:10px;width:min(86vw,360px);animation:stepin .5s ease both}
.lost-road{position:relative;width:100%;height:120px;border-radius:24px;overflow:hidden;background:linear-gradient(#ffffff08,#ffffff14);box-shadow:inset 0 -26px 0 #ffffff0d}
.lost-egg{position:absolute;left:12%;bottom:22px;width:56px;height:56px;--accent:inherit;animation:lostroll 2.6s cubic-bezier(.3,.1,.5,1) .2s infinite}
.lost-egg svg{width:100%;height:100%}
@keyframes lostroll{0%{transform:translateX(0) rotate(0) scale(1);opacity:1}20%{transform:translateX(60px) translateY(-26px) rotate(160deg) scale(.9)}35%{transform:translateX(110px) translateY(0) rotate(300deg) scale(.8)}50%{transform:translateX(160px) translateY(-14px) rotate(420deg) scale(.65)}70%{transform:translateX(220px) rotate(560deg) scale(.45);opacity:1}100%{transform:translateX(290px) rotate(700deg) scale(.2);opacity:0}}
.lost-puff{position:absolute;left:14%;bottom:18px;font-style:normal;font-size:20px;opacity:0;animation:lostpuff 2.6s ease-out .3s infinite}
.lost-puff+.lost-puff{left:30%;animation-delay:.75s}
@keyframes lostpuff{0%{opacity:0;transform:scale(.5)}15%{opacity:.8}60%{opacity:0;transform:translateX(-24px) scale(1.3)}100%{opacity:0}}
.lost-pet{width:120px;height:120px}.lost-pet>*{width:100%;height:100%}
.lost-score{margin:0;color:#c9c7cc;font-weight:800;font-size:15px}
@media(prefers-reduced-motion:reduce){.lost-egg,.lost-puff{animation:none}}
/* The walk map takes your colour theme (Sophia, 2026-10-12): streets washed in its hue, the drawn map too. */
html[data-theme]:not([data-mode="dark"]) .walk-map .leaflet-tile-pane{filter:sepia(.5) hue-rotate(calc(var(--th) * 1deg - 38deg)) saturate(1.5) brightness(1.02)}
html[data-theme]:not([data-mode="dark"]) .walk-map,html[data-theme]:not([data-mode="dark"]) .walk-leaflet,html[data-theme]:not([data-mode="dark"]) .walk-map .leaflet-container{background:hsl(var(--th) 70% 96%)}
html[data-theme]:not([data-mode="dark"]) .walk-streets .road{stroke:hsl(var(--th) 60% 88%)}
html[data-theme]:not([data-mode="dark"]) .walk-streets .road.big{stroke:hsl(var(--th) 55% 84%)}
html[data-theme]:not([data-mode="dark"]) .walk-streets .road.thin{stroke:hsl(var(--th) 60% 92%)}
html[data-theme]:not([data-mode="dark"]) .walk-streets .street-name{fill:hsl(var(--th) 30% 62%)}
/* Bigger mailbox with letters as papers in a scroll scene (Sophia, 2026-10-12). */
.mailbox-dialog{width:min(520px,100vw);height:min(860px,100dvh);max-height:100dvh;max-width:100vw;padding:0;overflow:hidden}
@media(max-width:560px){.mailbox-dialog{border-radius:0;height:100dvh}}
.mailbox-x{position:absolute;right:14px;top:max(14px,env(safe-area-inset-top));z-index:3;width:34px;height:34px;border:0;border-radius:50%;background:#0000000f;color:inherit;font-size:20px}
html[data-mode="dark"] .mailbox-x{background:#ffffff14}
.mb-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;scroll-snap-type:y proximity;padding:max(24px,env(safe-area-inset-top)) 20px 40vh}
.mb-head{position:sticky;top:0;z-index:0;padding-bottom:10px;transform:translateY(calc(var(--shrink,0) * -30px)) scale(calc(1 - var(--shrink,0) * .35));opacity:calc(1 - var(--shrink,0) * .75);transform-origin:50% 0}
.mailbox-dialog .mailbox-art{width:240px;height:225px;margin:0 auto 6px}
.mailbox-dialog h2{font-size:28px}
.mb-hint{margin:6px 0 0;font-size:12px;font-weight:800;opacity:.45;animation:mbhint 1.6s ease-in-out infinite}
@keyframes mbhint{50%{transform:translateY(4px)}}
.mailbox-list{position:relative;z-index:1;gap:0;margin-top:30vh}
.mailbox-list li{animation:none;scroll-snap-align:center;margin:-34px 0 0;perspective:900px}
.mailbox-list li:first-child{margin-top:0}
.mailbox-list .mb-paper{position:relative;display:grid;gap:4px;align-content:end;justify-items:start;width:100%;aspect-ratio:1.55;padding:22px 22px 18px;border:0;border-radius:3px;color:#2d2a26;text-align:left;overflow:hidden;
  background:color-mix(in srgb,var(--petto,#f5b94e) 14%,#fffaf0);box-shadow:inset 0 0 0 1px #00000010,0 16px 34px #0000002e;transition:box-shadow .3s;will-change:transform}
html[data-mode="dark"] .mailbox-list .mb-paper{box-shadow:0 16px 40px #000a}
.mailbox-list .mb-paper.read{background:color-mix(in srgb,var(--petto,#f5b94e) 6%,#fbf6ec)}
.mailbox-list .mb-paper.mid{box-shadow:inset 0 0 0 1px #00000010,0 26px 50px #00000045}
.mb-flap{position:absolute;inset:0 0 auto;height:58%;background:color-mix(in srgb,var(--petto,#f5b94e) 30%,#fff6e6);clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 0 #0000000d)}
.mb-paper::before{content:'';position:absolute;inset:auto 0 0;height:62%;background:linear-gradient(to top right,transparent calc(50% - 1px),#0000000c 50%,transparent calc(50% + 1px)) left/50% 100% no-repeat,linear-gradient(to top left,transparent calc(50% - 1px),#0000000c 50%,transparent calc(50% + 1px)) right/50% 100% no-repeat}
.mb-seal{position:absolute;left:50%;top:58%;width:38px;height:38px;margin:-19px 0 0 -19px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8fae,#e0476f);color:#fff;font-size:17px;box-shadow:0 2px 0 #b8355a,0 4px 10px #0003}
.mailbox-list .mb-paper b{position:relative;font-size:17px;line-height:1.2;color:#2d2a26;max-width:70%}
.mailbox-list .mb-paper small{position:relative;font-size:11px;opacity:.55}
.mb-to{position:relative;font-size:11px;font-weight:800;letter-spacing:.04em;color:color-mix(in srgb,var(--petto,#f5b94e) 60%,#000)}
.mb-stamp{position:absolute;right:14px;top:12px;width:40px;height:48px;display:grid;place-items:center;font-size:22px;background:#fff;border:2px dashed color-mix(in srgb,var(--petto,#f5b94e) 70%,#fff);border-radius:4px;transform:rotate(6deg);z-index:1}
.mailbox-list .mb-paper i{position:absolute;left:14px;top:12px;margin:0;z-index:1}
.mb-open{position:absolute;right:16px;bottom:16px;font-size:11px;font-weight:900;padding:5px 10px;border-radius:99px;background:#fff;color:#2d2a26;opacity:0;transform:translateY(4px);transition:.25s}
.mb-paper.mid .mb-open{opacity:1;transform:none}
.mb-paper.mid .mb-seal{animation:mbseal 1.4s ease-in-out infinite}@keyframes mbseal{50%{transform:scale(1.12)}}
.mb-paper.opening .mb-flap{transition:transform .35s ease-in;transform-origin:50% 0;transform:scaleY(-1)}.mb-paper.opening .mb-seal{transition:.2s;opacity:0}
.mailbox-dialog .mailbox-close{display:block;margin:40px auto 0;position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){.mb-hint{animation:none}.mailbox-list .mb-paper{transform:none!important}}
html .mailbox-list .mb-paper.new,html[data-mode="dark"] .mailbox-list .mb-paper.new{background:color-mix(in srgb,var(--petto,#f5b94e) 20%,#fffaf0)}
html[data-mode="dark"] .mailbox-list .mb-paper.read{background:color-mix(in srgb,var(--petto,#f5b94e) 6%,#fbf6ec)}
/* Small and big bottles pour into the main bottle (Sophia, 2026-10-12). */
.water-bottles{display:grid!important;grid-template-columns:1fr 1fr;gap:10px}
.water-bottles button{display:grid!important;justify-items:center;gap:2px;padding:12px 8px!important;border-radius:20px!important;height:auto!important}
.water-bottles .mini-bottle{display:grid;place-items:end center;height:66px}.water-bottles .mini-bottle svg{display:block;transition:transform .25s cubic-bezier(.34,1.6,.64,1)}
.water-bottles button:hover .mini-bottle svg{transform:rotate(-8deg)}.water-bottles button:active .mini-bottle svg{transform:scale(.9)}
.water-bottles b{font-size:13px}.water-bottles small{font-size:11px;opacity:.7}
.pour-bottle{position:fixed;z-index:80;pointer-events:none;transform-origin:50% 30%;filter:drop-shadow(0 6px 10px #0003)}
.pour-stream{position:fixed;z-index:79;width:6px;border-radius:3px;pointer-events:none;background:linear-gradient(#7fd3f7,#3a9fe0);transform-origin:top;animation:pourstream .5s ease-in forwards}
@keyframes pourstream{0%{transform:scaleY(0)}40%{transform:scaleY(1)}100%{transform:scaleY(1) translateY(30%);opacity:0}}
/* The main bottle, bigger and centred with the percentage under it (Sophia, 2026-10-12). */
.water-visual{flex-direction:column;justify-content:center;gap:14px;margin:22px 0 24px;text-align:center}
.water-bottle{width:150px;height:270px;padding-top:36px}
.water-bottle::before{width:56px;height:22px;margin-left:-28px}
.water-bottle::after{top:20px;width:76px;height:18px;margin-left:-38px}
.water-bottle .water-progress{border-radius:46px 46px 40px 40px}
.water-side{justify-items:center}.water-side strong{font-size:48px}
/* Other amount: a cup tile in the same style as the bottles (Sophia, 2026-10-12). */
.water-custom{display:flex!important;align-items:center;gap:10px;margin-top:10px;padding:12px 14px;border-radius:20px;background:#eef8fc}
html[data-mode="dark"] .water-custom{background:hsl(var(--th,188) calc(45% * var(--ts,1)) 17.2%)}
[data-theme]:not([data-mode="dark"]) .water-custom{background:hsl(var(--th) calc(53.6% * var(--ts)) 93.1%)}
.water-custom .mini-bottle{height:auto}
.wc-text{display:grid;flex:1;min-width:0}.wc-text b{font-size:13px}.wc-text small{font-size:11px;opacity:.7}
.wc-step{display:flex;align-items:center;gap:4px}
.water-custom .wc-step button{width:30px;height:30px;padding:0!important;border-radius:50%!important;font-size:18px;font-weight:900;line-height:1}
.wc-step label{display:flex;align-items:baseline;gap:2px}
.wc-step input{width:52px;padding:4px 2px;border:0;border-radius:10px;background:#fff;color:inherit;font:800 15px Nunito,sans-serif;text-align:center;-moz-appearance:textfield}
.wc-step input::-webkit-inner-spin-button{-webkit-appearance:none}
html[data-mode="dark"] .wc-step input{background:#0006}
.wc-step small{font-size:11px;opacity:.7}
.water-custom .wc-pour{padding:8px 14px!important;border-radius:99px!important;font-weight:900}
@media(max-width:380px){.wc-text small{display:none}}
.water-bottles{grid-template-columns:repeat(3,1fr)!important}
.water-undo:disabled{opacity:.45}
.mini-bottle.empty.tip svg{animation:emptytip .8s cubic-bezier(.34,1.4,.64,1)}
@keyframes emptytip{30%{transform:rotate(-140deg) translateY(-6px)}60%{transform:rotate(-140deg) translateY(-6px)}100%{transform:none}}
/* Folded iPhone Duo (Sophia, 2026-10-12): the page menu runs down the right-hand side as a column. */
html[data-device^="duo"] .app-shell{padding-right:66px}
html[data-device^="duo"] .page-tabs{position:fixed;top:76px;right:8px;bottom:12px;width:54px;margin:0;padding:6px;flex-direction:column;align-items:center;overflow-y:auto;overflow-x:hidden;border-radius:28px;background:#fff;box-shadow:0 0 0 1px var(--line),0 10px 26px #0000001a}
html[data-mode="dark"][data-device^="duo"] .page-tabs{background:#121317;box-shadow:0 0 0 1px #ffffff12,0 10px 26px #0008}
html[data-device^="duo"] .page-tabs a{flex:none;width:42px;min-width:42px;padding:0!important;justify-content:center}
html[data-device^="duo"] .page-tabs a span{display:none}
/* The menu bulge (Sophia, 2026-10-12): a soft bump in the middle at the bottom that pulls up into a Pettodex-style
   menu. The bubbles float about; a bubble with more inside moves to the middle and its pages ring around it. */
.page-tabs{display:none}
html[data-device^="duo"] .page-tabs{display:flex}
/* pull-up menu on the Duo too (Sophia 2026-10-13) */
.app-shell{padding-bottom:46px}
.menu-bulge{position:fixed;left:50%;bottom:0;z-index:900;width:132px;height:40px;margin-left:-66px;padding:9px 0 0;border:0;border-radius:66px 66px 0 0 / 40px 40px 0 0;background:#fff;color:#4e5a52;box-shadow:0 -1px 0 #0000000d,0 -8px 24px #0000001f;display:grid;justify-items:center;align-content:start;gap:3px;touch-action:none;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.menu-bulge::before,.menu-bulge::after{content:'';position:absolute;bottom:0;width:22px;height:22px;background:radial-gradient(circle at 0 0,transparent 21.5px,#fff 22px)}
.menu-bulge::before{left:-21px;background:radial-gradient(circle at 0 0,transparent 21.5px,#fff 22px)}
.menu-bulge::after{right:-21px;background:radial-gradient(circle at 100% 0,transparent 21.5px,#fff 22px)}
.menu-bulge .grip,.md-close .grip{display:block;width:30px;height:4px;border-radius:2px;background:currentColor;opacity:.3}
.menu-bulge svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.menu-bulge:hover{transform:translateY(-3px)}.menu-bulge:active{transform:translateY(-8px) scaleX(1.06)}
html.menu-up .menu-bulge{transform:translateY(60px)}
html[data-mode="dark"] .menu-bulge{background:#1b1c21;color:#ece6da;box-shadow:0 -1px 0 #ffffff14,0 -8px 24px #0009}
html[data-mode="dark"] .menu-bulge::before{background:radial-gradient(circle at 0 0,transparent 21.5px,#1b1c21 22px)}
html[data-mode="dark"] .menu-bulge::after{background:radial-gradient(circle at 100% 0,transparent 21.5px,#1b1c21 22px)}
.menu-dex{--acc:hsl(var(--th,36) calc(80% * max(var(--ts,1),.65)) 66%);position:fixed;inset:0;z-index:2147483000;background:#07080b;color:#ece6da;overflow:hidden;transform:translateY(100%);transition:transform .45s cubic-bezier(.32,.72,0,1);touch-action:none;border-radius:28px 28px 0 0}
.menu-dex.open{transform:translateY(0)}.menu-dex.dragging{transition:none}
.menu-dex[hidden]{display:none}
.md-glow{position:absolute;left:50%;top:46%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 30%,transparent),transparent 65%);pointer-events:none;animation:mdglow 6s ease-in-out infinite}
@keyframes mdglow{50%{transform:scale(1.12);opacity:.75}}
.md-title{position:absolute;top:calc(22px + env(safe-area-inset-top));left:0;right:0;margin:0;text-align:center;font:900 13px Nunito,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#8d8a93}
.md-field{--px:0;--py:0;position:absolute;inset:60px 0 90px}
.md-orb{--size:58px;position:absolute;left:var(--x);top:var(--y);width:90px;margin:calc(var(--size) / -2) 0 0 -45px;padding:0;border:0;background:none;color:inherit;display:grid;justify-items:center;gap:6px;translate:calc(var(--px) * -22px) calc(var(--py) * -22px);transition:translate .6s cubic-bezier(.2,.8,.2,1);animation:mdpop .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 55ms) backwards}
.md-orb.big{--size:84px;translate:calc(var(--px) * -12px) calc(var(--py) * -12px)}
.md-ball{display:grid;place-items:center;width:var(--size);height:var(--size);border-radius:50%;background:radial-gradient(circle at 35% 28%,#22232a,#0d0e12 70%);border:1px solid #ffffff14;box-shadow:inset 0 -6px 14px #0008,0 10px 26px #0007;animation:mdfloat 4.6s ease-in-out calc(var(--i) * -.8s) infinite;transition:border-color .2s,box-shadow .3s,transform .25s cubic-bezier(.34,1.56,.64,1)}
.md-ball svg{width:44%;height:44%;fill:none;stroke:var(--acc);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.md-orb b{font:800 11px 'DM Sans',sans-serif;color:#9d9aa3;white-space:nowrap}
.md-orb.has-kids .md-ball::after{content:'';position:absolute;width:calc(var(--size) + 14px);height:calc(var(--size) + 14px);border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 45%,transparent);animation:mdspin 18s linear infinite}
.md-orb:hover .md-ball,.md-orb:focus-visible .md-ball,.md-orb.here .md-ball{border-color:var(--acc);box-shadow:0 0 24px color-mix(in srgb,var(--acc) 60%,transparent),inset 0 -6px 14px #0008}
.md-orb.here b,.md-orb:hover b{color:var(--acc)}
.md-orb:active .md-ball{transform:scale(.9)}
.menu-dex.in-group .md-orb.big{--size:104px}
.menu-dex.in-group .md-orb.big .md-ball{background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--acc) 35%,#22232a),#0d0e12 72%);box-shadow:0 0 60px color-mix(in srgb,var(--acc) 45%,transparent)}
@keyframes mdfloat{0%,100%{transform:translate(0,0)}33%{transform:translate(3px,-7px)}66%{transform:translate(-4px,-3px)}}
@keyframes mdpop{from{opacity:0;scale:.3}}
@keyframes mdspin{to{rotate:360deg}}
.md-back{position:absolute;left:50%;bottom:calc(64px + env(safe-area-inset-bottom));transform:translateX(-50%);border:1px solid #ffffff1f;background:#14151a;color:#ece6da;border-radius:20px;padding:8px 22px;font-size:12px;font-weight:800}
.md-close{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));width:120px;height:34px;margin-left:-60px;border:0;background:none;color:#ece6da;display:grid;place-items:center}
@media (prefers-reduced-motion:reduce){.md-ball,.md-glow,.md-orb.has-kids .md-ball::after{animation:none}}
/* Lava (Sophia, 2026-10-12): the bulge is liquid in your petto's colour. It stretches as you slide up and a drop
   pinches off into a little round button. */
.menu-lava{--lava:#ff7a45;--lava-hot:color-mix(in srgb,var(--lava) 45%,#fff6d8);--lava-deep:color-mix(in srgb,var(--lava) 70%,#3a0d00);position:fixed;left:50%;bottom:0;z-index:899;width:220px;height:280px;margin-left:-110px;pointer-events:none}
.menu-lava svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--lava) 55%,transparent))}
.menu-lava #lava-b1,.menu-lava #lava-b2{animation:lavabub 3.2s ease-in-out infinite}.menu-lava #lava-b2{animation-delay:-1.6s}
@keyframes lavabub{50%{transform:translate(4px,-6px)}}
.menu-lava #lava-base{animation:lavabreathe 4s ease-in-out infinite;transform-origin:110px 300px}
@keyframes lavabreathe{50%{transform:scale(1.04,1.08)}}
.menu-lava.pulling #lava-base{animation:none}
.menu-bulge,html[data-mode="dark"] .menu-bulge{background:none!important;box-shadow:none!important;color:#fff;width:150px;margin-left:-75px;height:46px}
.menu-bulge::before,.menu-bulge::after,html[data-mode="dark"] .menu-bulge::before,html[data-mode="dark"] .menu-bulge::after{display:none}
.menu-bulge svg{filter:drop-shadow(0 1px 2px #0005)}.menu-bulge .grip{opacity:.7;background:#fff}
.menu-bulge:hover,.menu-bulge:active{transform:none}
.menu-lava.popped~.menu-bulge svg{opacity:0}
.menu-drop{position:fixed;left:50%;bottom:0;z-index:901;width:54px;height:54px;margin-left:-27px;border:0;border-radius:50%;background:none;color:#fff;display:grid;place-items:center;padding:0}
.menu-drop[hidden]{display:none}
.menu-drop svg{width:22px;height:22px;fill:currentColor;filter:drop-shadow(0 1px 2px #0006)}
.menu-drop.in svg{animation:droppop .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes droppop{from{transform:scale(0) rotate(-90deg)}}
.menu-dex.from-drop{transform:none;clip-path:circle(0 at var(--ox,50%) var(--oy,90%));transition:clip-path .6s cubic-bezier(.32,.72,0,1)}
.menu-dex.from-drop.open{clip-path:circle(150% at var(--ox,50%) var(--oy,90%))}
/* pull-up menu on the Duo too (Sophia 2026-10-13) */
/* Friend QR (Sophia 2026-10-12). */
.friend-qr{width:168px;height:168px;margin:4px auto 0;border-radius:16px;overflow:hidden;box-shadow:0 0 0 6px #ffffff10}
.friend-qr svg{display:block;width:100%;height:100%}
.friend-qr:empty{display:none}
.friend-qr-tip{margin:0;color:#aaa9ad;font-size:11px}
.friend-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.friend-btns .friend-share{flex:1;min-width:130px;display:inline-grid;place-items:center;cursor:pointer}
/* Home in the middle, big like your egg at the start (Sophia 2026-10-12), with a slow dashed orbit and lines to
   My petto and Health. */
.md-orb.hero{--size:150px;width:170px;margin-left:-85px;z-index:1}
.md-orb.hero .md-ball{background:#090a0d;border-color:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff0c,0 0 80px color-mix(in srgb,var(--acc) 50%,transparent);animation:mdfloat 6s ease-in-out infinite}
.md-orb.hero .md-ball svg{width:38%;height:38%}
.md-orb.hero .md-ball::after{content:'';position:absolute;width:calc(var(--size) + 34px);height:calc(var(--size) + 34px);border-radius:50%;border:1px dashed color-mix(in srgb,var(--acc) 35%,transparent);animation:mdspin 40s linear infinite}
.md-orb.hero b{font-size:13px;color:var(--acc)}
.md-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.md-links path{fill:none;stroke:color-mix(in srgb,var(--acc) 70%,#fff);stroke-width:1.2;vector-effect:non-scaling-stroke;opacity:.6;stroke-dasharray:1;stroke-dashoffset:1;animation:mdline .9s cubic-bezier(.4,0,.2,1) .35s forwards}
@keyframes mdline{to{stroke-dashoffset:0}}
/* A small liquid bump (Sophia 2026-10-12): not a semicircle; it wobbles and little blobs slide about inside it, and the
   grip line sits on top of it. */
.menu-lava #lava-base{animation:lavawobble 3.4s ease-in-out infinite;transform-origin:110px 300px}
@keyframes lavawobble{0%,100%{transform:scale(1,1)}30%{transform:scale(1.08,.9)}60%{transform:scale(.94,1.12)}}
.menu-lava #lava-b1{animation:lavaslide1 4.2s ease-in-out infinite}.menu-lava #lava-b2{animation:lavaslide2 3.6s ease-in-out infinite}
@keyframes lavaslide1{50%{transform:translate(14px,-5px)}}
@keyframes lavaslide2{50%{transform:translate(-16px,-4px)}}
.menu-lava.pulling #lava-b1,.menu-lava.pulling #lava-b2{animation:none}
.menu-bulge{height:30px;width:120px;margin-left:-60px;padding:0;align-content:start;padding-top:5px}
.menu-bulge svg{display:none}
.menu-bulge .grip{width:22px;height:3px;opacity:.85}
.md-links path{stroke-width:1.6;opacity:.85}
/* Lava by day is soft and bright; at night it's deeper and glows more (Sophia 2026-10-12). */
html:not([data-mode="dark"]) .menu-lava{--lava-hot:color-mix(in srgb,var(--lava) 35%,#fff);--lava-deep:color-mix(in srgb,var(--lava) 85%,#5a3a2a)}
html[data-mode="dark"] .menu-lava{--lava-hot:color-mix(in srgb,var(--lava) 75%,#fff3c4);--lava-deep:color-mix(in srgb,var(--lava) 45%,#120608)}
html[data-mode="dark"] .menu-lava svg{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--lava) 80%,transparent)) drop-shadow(0 0 4px color-mix(in srgb,var(--lava) 60%,transparent))}
.menu-bulge{padding-top:17px}
html .menu-bulge,html[data-mode="dark"] .menu-bulge{height:26px;padding-top:12px}
.md-orb.hero{--size:128px;width:150px;margin-left:-75px}.md-links path{stroke-width:2}
.md-links path{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;animation:mdlinefade .7s ease .3s forwards}@keyframes mdlinefade{to{opacity:.85}}
.menu-dex.in-group .md-orb.hero{--size:128px}
/* Quick buttons bar (Sophia 2026-10-12): the old round-icon bar at the top again, with your own picks and a + at the end. */
.page-tabs{display:flex;align-items:center}
.page-tabs .tab-edit{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:21px;border:1px dashed var(--line);background:none;color:#9aa39c;padding:0}
.page-tabs .tab-edit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html[data-mode="dark"] .page-tabs .tab-edit{border-color:#ffffff26;color:#bdb8ae}
html[data-device^="duo"] .page-tabs .tab-edit{width:42px;min-height:42px}
.quick-dialog{max-width:440px;text-align:center}
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 6px;margin:18px 0}
.quick-grid button{position:relative;border:0;background:none;color:inherit;display:grid;justify-items:center;gap:6px;padding:0}
.quick-grid .md-ball{--size:54px;width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:#f2efe8;border:1px solid var(--line);transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s}
.quick-grid .md-ball svg{width:46%;height:46%;fill:none;stroke:#7d8a80;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.quick-grid b{font-size:11px;font-weight:800;color:#8b938c}
.quick-grid button[aria-pressed="true"] .md-ball{background:var(--petto,#719879);border-color:transparent;transform:scale(1.06)}
.quick-grid button[aria-pressed="true"] .md-ball svg{stroke:#fff}
.quick-grid i{position:absolute;top:-4px;right:calc(50% - 32px);min-width:18px;height:18px;border-radius:9px;background:#26242a;color:#fff;font:800 10px/18px 'DM Sans',sans-serif;font-style:normal}
html[data-mode="dark"] .quick-grid .md-ball{background:#17181c;border-color:#ffffff14}
html[data-mode="dark"] .quick-grid .md-ball svg{stroke:#bdb8ae}
html[data-mode="dark"] .quick-grid i{background:#f5f2ea;color:#17181c}
.quick-done{width:100%;border-radius:999px;padding:12px}
/* Day/night switch in the top centre, on its own (Sophia 2026-10-12); points move to the left beside the brand. */
.topbar .mode-quick{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:2}
.topbar .mobile-brand{order:0;margin-right:0}
.topbar .point-chip{order:1;margin-right:auto}
.topbar .theme-menu{order:4}.topbar .top-actions{order:5}.topbar .avatar{order:6}
/* Home's egg in your petto's colours, wherever Home shows (bar, menu, picker). */
svg .home-egg{fill:var(--petto,#f5b94e)!important;stroke:var(--petto-deep,#a76c1c)!important;stroke-width:1.4}
svg .home-egg-shine{fill:#fff!important;stroke:none!important;opacity:.75}
/* The ring round Home turns slowly, like the eggs orbiting yours at the start; each bubble stays upright. */
.md-orbit{position:absolute;left:50%;top:46%;width:0;height:0;animation:mdorbit 70s linear infinite}
.md-orbit .md-links{position:absolute;inset:auto}
.md-orbit .md-orb{margin:calc(var(--size) / -2) 0 0 -45px;transform-origin:45px calc(var(--size) / 2);animation:mdpop .55s cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 55ms) backwards,mdorbit 70s linear infinite reverse}
@keyframes mdorbit{to{rotate:360deg}}
.md-orbit:has(.md-orb:hover){animation-play-state:paused}.md-orbit:has(.md-orb:hover) .md-orb{animation-play-state:running,paused}
@media (prefers-reduced-motion:reduce){.md-orbit,.md-orbit .md-orb{animation:none}}
/* Choosing Home: the bubbles slide in behind it and fade, then Home pops with a burst of glow. */
.menu-dex.absorbing .md-orbit .md-orb{transition:left .55s cubic-bezier(.55,0,.8,.15),top .55s cubic-bezier(.55,0,.8,.15),opacity .45s ease .15s,scale .55s ease;opacity:0;scale:.35;pointer-events:none}
.menu-dex.absorbing .md-orbit,.menu-dex.absorbing .md-orbit .md-orb{animation-play-state:paused}
.menu-dex.absorbing .md-links{opacity:0;transition:opacity .3s}
.menu-dex.absorbing .md-orb.hero{z-index:3}
.menu-dex.chosen .md-orb.hero .md-ball{animation:mdchosen .7s cubic-bezier(.34,1.56,.64,1) forwards;border-color:var(--acc);box-shadow:0 0 0 0 color-mix(in srgb,var(--acc) 60%,transparent),0 0 120px color-mix(in srgb,var(--acc) 80%,transparent)}
@keyframes mdchosen{0%{transform:scale(1)}35%{transform:scale(.86)}70%{transform:scale(1.16)}100%{transform:scale(1.08)}}
.menu-dex.chosen .md-orb.hero .md-ball::after{animation:mdring .7s ease-out forwards}
@keyframes mdring{from{transform:scale(1);opacity:1}to{transform:scale(1.7);opacity:0}}
.menu-dex.chosen .md-orb.hero b{color:#fff}
/* The menu's Home egg: the egg-start stage, live, with its lines out to My petto and Health. */
.menu-dex .menu-egg{position:absolute;left:0;right:0;top:60px;bottom:90px;width:auto;height:auto;margin:0;z-index:1;-webkit-mask-image:none;mask-image:none;overflow:visible}
.menu-dex .menu-egg[hidden]{display:none}
.menu-dex .md-field{pointer-events:none;z-index:2}.menu-dex .md-field .md-orb,.menu-dex .md-back{pointer-events:auto}
.menu-dex:not(.in-group) .md-orbit{top:50%;animation-duration:48s}
.menu-dex:not(.in-group) .md-orbit .md-orb{animation-duration:.55s,48s}
.menu-egg .egg-tag[data-menu]{pointer-events:auto;cursor:pointer;padding:6px 10px;border-radius:14px;transition:background .2s}
.menu-egg .egg-tag[data-menu]:hover{background:#ffffff12}
.menu-egg .egg-tag[data-menu] b{font-size:14px}
.menu-egg .egg-hero-egg{cursor:pointer}
.menu-dex.absorbing .menu-egg .egg-turn,.menu-dex.absorbing .menu-egg .egg-moons{opacity:0;transition:opacity .35s}
.menu-dex.chosen .menu-egg .egg-hero-egg>svg{animation:mdchosen .7s cubic-bezier(.34,1.56,.64,1) forwards}
.menu-dex.chosen .menu-egg .egg-hero::before{box-shadow:0 0 140px color-mix(in srgb,var(--accent) 90%,transparent)}
/* The logo is our egg, in your Pettö's colours (Sophia 2026-10-12). */
.logo-egg{width:24px;height:24px;vertical-align:-5px;overflow:visible}
.logo-shell{fill:var(--petto,#f5b94e);stroke:var(--petto-deep,#a76c1c);stroke-width:7;stroke-linejoin:round}
.logo-shine{fill:#fff;opacity:.8}
.brand-mark .logo-egg{width:26px;height:26px;vertical-align:0}
@media(max-width:430px){.topbar .mobile-brand .logo-egg{width:26px;height:26px}}

/* Cute header icons (Sophia, 2026-10-12): a little heart with a face for Apple Health that glows pink once Health is
   connected, and a round mailbox with a heart on its door, a letter peeking out and a flag. */
.top-actions .health-button::before{content:none!important;display:none}
.top-actions svg.cute-heart,.top-actions svg.cute-mail{width:22px;height:22px;stroke-linecap:round;stroke-linejoin:round}
.cute-heart .ch-body{fill:none;stroke:currentColor;stroke-width:1.7}
.cute-heart .ch-shine{fill:none;stroke:currentColor;stroke-width:1.2;opacity:.45}
.cute-heart .ch-eye{fill:currentColor;stroke:none}
.cute-heart .ch-smile{fill:none;stroke:currentColor;stroke-width:1.1}
.cute-heart .ch-blush{fill:#ff9cbc;stroke:none;opacity:.75}
.health-button:hover .cute-heart{animation:heartbeat .9s ease-in-out}
.health-button.connected .cute-heart{animation:heartglow 2.6s ease-in-out infinite;overflow:visible}
.health-button.connected .ch-body{fill:#ff8fb6;stroke:#f0628f}
.health-button.connected .ch-shine{stroke:#fff;opacity:.9}
.health-button.connected :is(.ch-eye){fill:#5b2a3b}
.health-button.connected .ch-smile{stroke:#5b2a3b}
.health-button.connected .ch-blush{fill:#ff5c93;opacity:.9}
.top-actions>.health-button.connected{background:#ffe3ee!important}
html[data-mode="dark"] .top-actions>.health-button.connected{background:#ff8fb626!important}
@keyframes heartglow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px #ff8fb6aa)}50%{transform:scale(1.08);filter:drop-shadow(0 0 6px #ff6fa3)}}
@keyframes heartbeat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(.96)}}
.cute-mail .cm-post{fill:#c9a27e;stroke:none}
.cute-mail .cm-body{fill:var(--petto,#ffb3cc);stroke:currentColor;stroke-width:1.4}
.cute-mail .cm-door{fill:#fff;stroke:currentColor;stroke-width:1.4}
.cute-mail .cm-letter{fill:#fffaf0;stroke:currentColor;stroke-width:1;transform-origin:18px 10px}
.cute-mail .cm-heart{fill:#ff6f9c;stroke:none}
.cute-mail .cm-flag{fill:#ff6f6f;stroke:#e04a5a;stroke-width:1.2}
html[data-mode="dark"] .cute-mail .cm-door{fill:#2a2b32}
.mail-button:hover .cm-flag{animation:mailflag .6s ease-in-out}
.mail-button:has(.mail-count:not([hidden])) .cm-letter{animation:mailpeek 2.4s ease-in-out infinite}
@keyframes mailflag{0%,100%{transform:none}40%{transform:rotate(-14deg)}70%{transform:rotate(6deg)}}
.cute-mail .cm-flag{transform-origin:17.4px 10.4px}
@keyframes mailpeek{0%,70%,100%{transform:none}80%{transform:translateY(-1.6px) rotate(-6deg)}90%{transform:translateY(-.6px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){.health-button.connected .cute-heart,.mail-button .cm-letter{animation:none}}
/* Light-mode quick buttons (Sophia, 2026-10-12): the dark-mode look (soft filled pills, the current page a bright
   glowing pill) but in the petto's own colours. */
html:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]){background:color-mix(in srgb,var(--petto,#f3c95c) 22%,#fff)!important;border-color:transparent!important;color:color-mix(in srgb,var(--petto-deep,#c99a2e) 85%,#000)!important}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{background:var(--petto-deep,#c99a2e)!important;border-color:var(--petto-deep,#c99a2e)!important;color:#fff!important;box-shadow:none!important}
html:not([data-mode="dark"]) .page-tabs .tab-edit{border-color:color-mix(in srgb,var(--petto-deep,#c99a2e) 45%,#fff);color:var(--petto-deep,#c99a2e)}
html:not([data-mode="dark"])[data-device^="duo"] .page-tabs{background:color-mix(in srgb,var(--petto,#f3c95c) 10%,#fff);box-shadow:0 0 0 1px color-mix(in srgb,var(--petto,#f3c95c) 35%,#fff),0 10px 26px #0000001a}
.top-actions .mail-button .mail-count{top:-7px;right:-9px;min-width:15px;height:15px;padding:0 4px;font-size:9px;line-height:15px}
.top-actions svg.cute-mail{width:24px;height:24px}
/* Sophia 2026-10-13: light-mode quick buttons flat (no 3D edge or shadow); the logo egg off-white in dark mode. */
html:not([data-mode="dark"]) .page-tabs a{border-color:transparent!important;box-shadow:none!important;background-image:none!important}
html:not([data-mode="dark"]) .page-tabs{box-shadow:none}
html[data-mode="dark"] .logo-shell{fill:#f5f2ea;stroke:#c9c3b6}
/* Stronger Health glow (Sophia 2026-10-13: couldn't see it): the button itself gets a pulsing pink halo. */
.top-actions>.health-button.connected{overflow:visible!important;background:#ffd3e4!important;animation:healthhalo 2.6s ease-in-out infinite}
html[data-mode="dark"] .top-actions>.health-button.connected{background:#ff8fb640!important}
@keyframes healthhalo{0%,100%{box-shadow:0 0 0 2px #ff8fb6,0 0 10px 2px #ff8fb688}50%{box-shadow:0 0 0 2px #ff6fa3,0 0 20px 7px #ff6fa3aa}}
@media(prefers-reduced-motion:reduce){.top-actions>.health-button.connected{animation:none;box-shadow:0 0 0 2px #ff8fb6,0 0 14px 4px #ff8fb699}}
/* Sophia 2026-10-13: no circle round the heart; only the heart itself glows pink. */
.top-actions>.health-button.connected,html[data-mode="dark"] .top-actions>.health-button.connected{background:transparent!important;box-shadow:none!important;animation:none}
.health-button.connected .cute-heart{animation:heartglow2 2.4s ease-in-out infinite}
@keyframes heartglow2{0%,100%{transform:scale(1);filter:drop-shadow(0 0 3px #ff6fa3) drop-shadow(0 0 6px #ff8fb6aa)}50%{transform:scale(1.1);filter:drop-shadow(0 0 5px #ff4f8f) drop-shadow(0 0 11px #ff8fb6)}}
/* Cuter mailbox (Sophia 2026-10-13): cosy pink inside with sparkles, ONE envelope with a heart, a smiley door with a
   heart knob and a round flag. */
.mailbox-art .mb-inside{fill:url(#mb-cosy)}
.mailbox-art .mb-dots circle{fill:#fff;opacity:.9}
.mailbox-art .mb-mail rect{fill:#fffdf8;stroke:#f0b9cb;stroke-width:1.6}
.mailbox-art .mb-mail .mb-env-flap{fill:none;stroke:#f0b9cb;stroke-width:1.6;stroke-linejoin:round}
.mailbox-art .mb-mail .mb-env-heart{fill:#ff6f9c;stroke:none}
.mailbox-art .mb-face circle{fill:#4a3540}.mailbox-art .mb-face path{fill:none;stroke:#4a3540;stroke-width:2;stroke-linecap:round}.mailbox-art .mb-face ellipse{fill:#ff9cbc;opacity:.7}
.mailbox-art .mb-face{transition:opacity .2s}
.mailbox-dialog.opened .mb-face{opacity:0}
.mailbox-art .mb-knob{fill:#ff6f9c;stroke:none}
.mailbox-art .mb-flag rect{fill:#c9a27e}.mailbox-art .mb-flag path{fill:#ff6f9c}
.mailbox-art .mb-post{fill:#c9a27e}
/* Pettödex grid (Sophia 2026-10-13): numbered like a Pokédex; yours in colour, the rest grey shadows with ???. */
.egg-grid:has(.dex-tile){grid-template-columns:repeat(3,1fr)}
.dex-tile{position:relative;display:flex;flex-direction:column;align-items:center;padding:22px 6px 10px!important;border-radius:16px!important;background:color-mix(in srgb,var(--accent) 16%,#fff)!important;border-color:transparent!important}
.dex-no{position:absolute;left:9px;top:7px;font:800 9px/1 Nunito,sans-serif;letter-spacing:.5px;opacity:.55}
.dex-art{width:76px;height:76px;margin:0 auto 6px;display:grid;place-items:center}
.dex-art svg{width:100%;height:100%;overflow:visible}
.dex-tile.unknown{background:#efeff1!important}
.dex-tile.unknown .dex-art{filter:brightness(0) opacity(.18)}
.dex-tile.unknown.no-art .dex-art{filter:grayscale(1) opacity(.35)}
.dex-tile.unknown strong{letter-spacing:2px;color:#9a9ca3}
.dex-tile.current{box-shadow:0 0 0 2px var(--outline)!important}
.dex-tile.asleep .dex-art{filter:saturate(.55) brightness(.92)}
.dex-zzz{position:absolute;right:10px;top:6px;font:900 12px Nunito,sans-serif;color:#7d7fc9}.dex-zzz i{font-style:normal;font-size:10px;vertical-align:4px}.dex-zzz b{font-size:8px;vertical-align:8px}
.dex-zzz{animation:dexzzz 2.4s ease-in-out infinite}@keyframes dexzzz{50%{transform:translateY(-3px);opacity:.6}}
.dex-acts{display:flex;gap:4px;margin-top:7px;flex-wrap:wrap;justify-content:center}
.dex-act{border:0;border-radius:99px;padding:5px 9px;font:800 10px Nunito,sans-serif;background:#ffffffb3;color:var(--outline)}
.dex-act.main{background:var(--outline);color:#fff}
html[data-mode="dark"] .dex-tile{background:color-mix(in srgb,var(--accent) 22%,#16171b)!important}
html[data-mode="dark"] .dex-tile.unknown{background:#1d1e23!important}
html[data-mode="dark"] .dex-tile.unknown .dex-art{filter:brightness(0) invert(1) opacity(.12)}
html[data-mode="dark"] .dex-act{background:#ffffff1f;color:#f5f2ea}
html[data-mode="dark"] .dex-act.main{background:#f5f2ea;color:#16171b}
@media(prefers-reduced-motion:reduce){.dex-zzz{animation:none}}
/* Coin stall (Sophia 2026-10-13): a pop-up in the shop's market-stall look that only sells Tama and egg tickets. */
.tama-coin{width:1em;height:1em;vertical-align:-.15em}.tama-coin>circle:first-child{fill:#f6c64f;stroke:#c98f1c;stroke-width:1.4}.tama-coin .tc-rim{fill:none;stroke:#fff3c4;stroke-width:1}.tama-coin .tc-egg{fill:#fff6d8;stroke:#c98f1c;stroke-width:1}
.wallet-dialog{width:min(440px,calc(100vw - 24px));max-width:none;padding:0;border:0;border-radius:24px;overflow:hidden;background:#fffaf7;text-align:center}
.wallet-dialog[open]{animation:mailpop .5s cubic-bezier(.34,1.6,.64,1) both}
.wallet-dialog .close{z-index:2;top:8px;right:10px;width:32px;height:32px;border-radius:50%;background:#ffffffd9;font-size:20px;line-height:1;color:#c0577f}
.wallet-dialog .stall-body{padding:30px 18px 0}
.wallet-dialog h2{margin:4px 0 6px}
.wallet-have{display:flex;justify-content:center;gap:14px;margin:0 0 14px;font-size:13px!important;color:inherit!important}.wallet-have strong{font:900 15px Nunito,sans-serif}
.wallet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.wallet-grid .shop-item{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0;padding:12px 8px;border:1px solid #f6d6e1;border-radius:16px;background:#fff;color:inherit;font:inherit}
.wp-art{font-size:28px;line-height:1.2;letter-spacing:-8px;padding-right:8px}
.wallet-grid b{font:900 13px Nunito,sans-serif}.wallet-grid small{font-size:10px;font-weight:800;opacity:.6}
.wallet-pack:disabled{cursor:default}
.wallet-ticket{grid-column:span 1}
.wallet-buy{width:100%;margin-top:5px;border:0;border-radius:99px;padding:6px;font:900 11px Nunito,sans-serif;background:#f5a3c0;color:#fff}
.wallet-buy:disabled{opacity:.4;cursor:default}
.wallet-note{margin:12px 0 0;font-size:11px}
.wallet-dialog .stall-counter{margin:14px -18px 0}
/* Sophia 2026-10-19: the stall sits in the middle of the screen, clear of the notch, and closes with the same thin
   rotated + as the Pettodex, right next to the title. */
.wallet-dialog{margin:auto!important;max-height:calc(100dvh - max(env(safe-area-inset-top),20px) - max(env(safe-area-inset-bottom),20px) - 24px);overflow-y:auto}
.wallet-title-row{display:flex;align-items:center;justify-content:center;gap:6px;margin:4px 0 6px}
.wallet-title-row h2{margin:0}
.wallet-dialog .wallet-title-row .close.inc-close{position:static;flex:none;width:40px;height:40px;padding:0;margin-right:-8px;border:0;border-radius:0;background:none!important;box-shadow:none;
  color:#7a6243;font:300 40px/1 Nunito,'DM Sans',sans-serif;display:grid;place-items:center}
html[data-mode="dark"] .wallet-dialog .wallet-title-row .close.inc-close{color:#f1d9ae}
.wallet-dialog .wallet-title-row .close.inc-close:focus{outline:none;box-shadow:none;-webkit-tap-highlight-color:transparent}
html[data-mode="dark"] .wallet-dialog{background:#2a2226;color:#f8f5ed}
html[data-mode="dark"] .wallet-grid .shop-item{background:#332a2e;border-color:#4a3640}
html[data-mode="dark"] .wallet-dialog .close{background:#00000055;color:#f5a3c0}
.point-chip{cursor:pointer}
/* Sophia 2026-10-13: no white line on the lava bulge. */
.menu-bulge .grip{display:none!important}
/* Sophia 2026-10-13: the colour picker lives in the day/night toggle: one capsule [☀ switch ☾ ●], and the colours drop
   down right under it instead of popping up at the side. */
.topbar .mode-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:flex;align-items:center;height:34px;padding:0 3px 0 0;border-radius:22px;background:#fff;border:1px solid var(--line)}
.topbar .mode-pill .mode-quick{position:static;transform:none;border:0!important;background:none!important;height:32px}
.topbar .mode-pill .theme-menu{position:relative;order:0}
.topbar .mode-pill .theme-control{border:0;background:none;padding:0}
.topbar .mode-pill .theme-toggle{width:26px;height:26px;border:0!important;background:none!important}
.topbar .mode-pill .theme-toggle .theme-dot{width:20px;height:20px}
.topbar .mode-pill .theme-panel{left:50%;right:auto;transform:translateX(-50%);top:calc(100% + 10px)}
html:not([data-mode="dark"]):not([data-theme]) .topbar .mode-pill{background:#e8e8ed;border-color:transparent}
html[data-mode="dark"] .topbar .mode-pill{background:#090a0d;border-color:#ffffff14;padding:0}
@media(max-width:430px){.topbar .mode-pill .theme-panel{position:fixed;left:16px;right:16px;top:64px;width:auto;transform:none}}
.topbar .mode-pill .mode-quick{order:0}.topbar .mode-pill .theme-menu{order:1}
.topbar .mode-pill .theme-panel{position:absolute!important;left:50%!important;right:auto!important;top:calc(100% + 10px)!important;width:min(300px,calc(100vw - 32px))!important;transform:translateX(-50%)!important}
/* Coin stall in the Pettö's own colour (Sophia 2026-10-13). */
.wallet-dialog .stall-awning{background:repeating-linear-gradient(90deg,var(--petto,#f5a3c0) 0 40px,#fff 40px 80px);box-shadow:inset 0 10px 0 var(--petto-deep,#e98bae)}
.wallet-dialog .stall-awning::after{background:radial-gradient(circle at 20px 0,var(--petto,#f5a3c0) 19px,transparent 20px) 0 0/80px 18px repeat-x,radial-gradient(circle at 60px 0,#fff 19px,transparent 20px) 0 0/80px 18px repeat-x}
.wallet-dialog .stall-body{border-image:repeating-linear-gradient(180deg,var(--petto,#f5a3c0) 0 14px,#fff 14px 28px) 10}
.wallet-dialog .stall-counter{background:var(--petto,#f5a3c0);box-shadow:inset 0 8px 0 #fff,inset 0 10px 0 color-mix(in srgb,var(--petto,#f5a3c0) 50%,#fff)}
.wallet-dialog{background:color-mix(in srgb,var(--petto,#f5a3c0) 8%,#fff)}
.wallet-grid .shop-item{border-color:color-mix(in srgb,var(--petto,#f5a3c0) 40%,#fff)}
.wallet-buy{background:var(--petto-deep,#e98bae)}
.wallet-dialog .close{color:var(--petto-deep,#c0577f)}
html[data-mode="dark"] .wallet-dialog{background:color-mix(in srgb,var(--petto,#f5a3c0) 10%,#1b1a1f)}
html[data-mode="dark"] .wallet-grid .shop-item{background:color-mix(in srgb,var(--petto,#f5a3c0) 12%,#242329);border-color:color-mix(in srgb,var(--petto,#f5a3c0) 30%,#242329)}
.dex-level{display:inline-block;margin:2px 0 1px;padding:1px 7px;border-radius:99px;background:var(--outline);color:#fff;font:900 9px/1.6 Nunito,sans-serif;letter-spacing:.5px}
html[data-mode="dark"] .dex-level{background:#f5f2ea;color:#16171b}
/* An owned Pettö still at its egg stage shows the plain egg in its own colour. */
.dex-tile.owned .dex-art>svg:only-child .egg-shell{fill:var(--accent)}
/* Egg ticket (Sophia 2026-10-13): a pearly ticket with notched sides and a perforated stub, floating gently and tilting
   towards your finger. */
.ticket-bar,html[data-mode="dark"] .ticket-bar{position:relative;padding:14px 18px 14px 22px;border:0;border-radius:14px;color:#4a4350;
  background:linear-gradient(115deg,#fbf8f3 0%,#f3eef9 22%,#eef7f6 40%,#fdf3f1 58%,#f2eefb 78%,#fbf8f3 100%);background-size:220% 220%;
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  filter:drop-shadow(0 6px 10px #6a5a7a26);transform:perspective(700px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(var(--float,0px));
  animation:ticketfloat 3.6s ease-in-out infinite,pearlshift 9s ease-in-out infinite;transition:transform .25s ease;will-change:transform}
.ticket-bar::before{content:'';position:absolute;top:10px;bottom:10px;left:58px;border-left:2px dashed #c9bfd6}
.ticket-bar::after{content:'';position:absolute;inset:0;border-radius:14px;pointer-events:none;background:linear-gradient(105deg,transparent 35%,#ffffffb0 48%,transparent 60%);background-size:250% 100%;background-position:var(--shine,120%) 0;transition:background-position .4s}
.ticket-bar:hover::after{--shine:-20%}
.ticket-bar .ticket-icon{width:28px;text-align:center;margin-right:8px}
.ticket-bar strong,html[data-mode="dark"] .ticket-bar strong{color:#4a4350;letter-spacing:.3px}
.ticket-bar small{color:#8a8096!important}
.ticket-bar button{background:#b7a6d6}.ticket-bar #ticket-buy,html[data-mode="dark"] .ticket-bar #ticket-buy{background:#ffffffcc;color:#6a5a7a}
@keyframes ticketfloat{0%,100%{--float:0px;translate:0 0}50%{translate:0 -4px}}
@keyframes pearlshift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.ticket-bar{animation:none}}
.ticket-bar,html[data-mode="dark"] .ticket-bar{padding-left:80px}
.ticket-bar .ticket-icon{position:absolute;left:22px;top:50%;translate:0 -50%;margin:0;font-size:26px}
.ticket-bar::before{left:66px}
.ticket-bar button{background:#9d8cc4;color:#fff}.ticket-bar button:disabled{opacity:.55}
.ticket-bar>button{background:#9d8cc4!important;color:#fff!important;padding:8px 12px!important;font-size:11px!important;border-radius:99px!important}
.ticket-bar>#ticket-buy{background:#fff!important;color:#6a5a7a!important;box-shadow:inset 0 0 0 1.5px #c9bfd6}
/* Group pages turn round their bubble like the first page (Sophia 2026-10-13). */
.menu-dex.in-group .md-orbit{top:46%;animation-duration:56s}
.menu-dex.in-group .md-orbit .md-orb{animation-duration:.55s,56s}
.md-orbit .md-orbit-links{position:absolute;inset:auto;z-index:-1}
.menu-dex.in-group .md-orb.hero{z-index:2}
.logo-egg{cursor:pointer}.logo-egg:active{scale:.9}
/* Clearer ticket edges (Sophia 2026-10-13): bigger notches, a thin outline that follows the cut shape, and small
   punched holes down both short ends like a real admit-one ticket. */
.ticket-bar,html[data-mode="dark"] .ticket-bar{border-radius:10px;
  -webkit-mask:radial-gradient(circle 15px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 15px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 15px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.ticket-wrap{filter:drop-shadow(1px 0 0 #b9a9d0) drop-shadow(-1px 0 0 #b9a9d0) drop-shadow(0 1px 0 #b9a9d0) drop-shadow(0 -1px 0 #b9a9d0) drop-shadow(0 6px 10px #6a5a7a2e)}
.ticket-wrap .ticket-bar{filter:none;margin:6px 0 12px}
.ticket-bar{box-shadow:inset 0 0 0 5px #fbf8f3,inset 0 0 0 6px #d9cfe6}
.ticket-bar::before{border-left:2px dashed #b3a3cc;top:6px;bottom:6px}
/* Egg incubator (Sophia 2026-10-13): the Pettödex box looks like a cosy incubator: a glass dome with a warm heat lamp
   at the top, a creamy plastic shell, a little panel with temperature, humidity and blinking lights, and a base. */
dialog#collection{border:10px solid #f3e7d4;border-radius:min(46%,190px) min(46%,190px) 30px 30px/150px 150px 30px 30px;
  padding-top:44px;text-align:left;overflow-x:hidden;
  background:radial-gradient(120% 60% at 50% -6%,#ffe7b0 0,#fff4dc 34%,#fffaf1 62%) #fffaf1;
  box-shadow:inset 0 0 0 2px #ffffffaa,inset 0 18px 40px #ffd48a55,0 16px 0 -4px #e2d2b8,0 26px 50px #5a463044}
dialog#collection>.eyebrow,dialog#collection>h2{display:block;text-align:center}
dialog#collection>.close{top:30px;right:26px}
.inc-lamp{display:block;width:74px;height:18px;margin:-28px auto 12px;border-radius:0 0 40px 40px;background:linear-gradient(#e9dcc6,#d8c6a8);position:relative}
.inc-lamp::after{content:'';position:absolute;left:50%;top:12px;width:30px;height:16px;translate:-50% 0;border-radius:0 0 30px 30px;background:#ffcf6e;
  box-shadow:0 0 18px 8px #ffc55e88,0 0 60px 26px #ffd98a44;animation:inclamp 3.2s ease-in-out infinite}
@keyframes inclamp{50%{box-shadow:0 0 22px 10px #ffc55eaa,0 0 74px 32px #ffd98a55}}
.inc-panel{display:flex;justify-content:center;align-items:center;gap:8px;margin:10px auto 14px;padding:7px 12px;width:max-content;max-width:100%;
  border-radius:14px;background:#e9ddc9;box-shadow:inset 0 2px 4px #0000001a}
.inc-read{font:800 11px/1 Nunito,sans-serif;color:#6b5a43;background:#fdf8ef;border-radius:8px;padding:6px 8px;box-shadow:inset 0 1px 2px #0000001f;font-variant-numeric:tabular-nums}
.inc-leds{display:flex;gap:4px}.inc-leds i{width:7px;height:7px;border-radius:50%;background:#8fd18a;box-shadow:0 0 6px #8fd18a;animation:incled 2.4s infinite}
.inc-leds i:nth-child(2){background:#ffc85e;box-shadow:0 0 6px #ffc85e;animation-delay:.8s}.inc-leds i:nth-child(3){background:#ff9ec4;box-shadow:0 0 6px #ff9ec4;animation-delay:1.6s}
@keyframes incled{50%{opacity:.35}}
html[data-mode="dark"] dialog#collection{border-color:#3a3640;background:radial-gradient(120% 60% at 50% -6%,#5a4220 0,#2b2620 36%,#1d1e23 64%) #1d1e23;
  box-shadow:inset 0 0 0 2px #ffffff14,inset 0 18px 40px #ffb84a22,0 16px 0 -4px #2c2930,0 26px 50px #0008}
html[data-mode="dark"] .inc-lamp{background:linear-gradient(#55505c,#403b47)}
html[data-mode="dark"] .inc-panel{background:#2c2930}html[data-mode="dark"] .inc-read{background:#16171b;color:#f1d9ae}
@media(prefers-reduced-motion:reduce){.inc-lamp::after,.inc-leds i{animation:none}}
.dex-act.snooze{width:38px;height:38px;padding:0;border-radius:50%;display:inline-grid;place-items:center;background:#5b5fb8!important;color:#ffe9a8!important}
.dex-act.snooze svg{width:22px;height:22px}
.dex-tile.pickable{cursor:pointer;outline:2px solid var(--accent);outline-offset:-2px;animation:dexpick 1.8s ease-in-out infinite}
.dex-tile.pickable:hover{transform:translateY(-3px)}
@keyframes dexpick{50%{box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 35%,transparent),0 0 22px color-mix(in srgb,var(--accent) 55%,transparent)}}
@media(prefers-reduced-motion:reduce){.dex-tile.pickable{animation:none}}
/* Egg ticket wording like a golden ticket (Sophia 2026-10-13, her Wonka ticket picture): a little brand line, big
   condensed EGG TICKET between ruled lines, an 'admits one egg' line and a printed 'You hold' field. */
.ticket-bar .tk-face{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 100%;min-width:0}
.tk-brand{font:italic 800 12px/1 Georgia,'Times New Roman',serif;color:#8d78b4;letter-spacing:1px;align-self:center}
.tk-title{align-self:stretch;text-align:center;margin:5px 0 3px;padding:4px 0 2px;border-top:1.5px solid #3d3048;border-bottom:1.5px solid #3d3048;
  box-shadow:0 -3px 0 -1.5px #fff0,0 3px 0 -1.5px #fff0;font-family:'Avenir Next Condensed','AvenirNextCondensed-Heavy','Arial Narrow',Impact,'Roboto Condensed',sans-serif;
  font-weight:900;font-stretch:condensed;font-size:clamp(28px,9vw,40px);line-height:.95;letter-spacing:1.5px;color:#3d3048;text-shadow:0 1px 0 #ffffffcc,0 -1px 0 #0000001a}
.tk-admit{align-self:center;font:700 8px/1.3 Georgia,serif;letter-spacing:1.4px;text-transform:uppercase;color:#7c6f8a;margin-bottom:6px;text-align:center}
.tk-field{display:flex;align-items:baseline;gap:6px;margin:0 0 2px}
.tk-field em{font:700 8px/1 Georgia,serif;font-style:normal;letter-spacing:1.4px;text-transform:uppercase;color:#9a8cad}
.ticket-bar .tk-field strong,html[data-mode="dark"] .ticket-bar .tk-field strong{display:inline;font:800 15px/1 Georgia,'Times New Roman',serif;color:#3d3048;letter-spacing:.5px}
.ticket-bar .tk-face small{margin-bottom:8px}
dialog#collection{padding:44px 16px 22px}
dialog#collection>.close{top:64px;right:30px}
/* Choosing an egg: the incubator glows, shrinks into the dark and the start-up egg screen blooms in. */
dialog#collection.to-egg{animation:incout .65s cubic-bezier(.6,0,.8,.4) forwards}
@keyframes incout{30%{filter:brightness(1.25);transform:scale(1.02)}100%{transform:scale(.6);opacity:0;filter:brightness(2) blur(6px)}}
.egg-wait.from-incubator{animation:eggin 1s ease-out}
@keyframes eggin{0%{opacity:0;transform:scale(1.15);filter:blur(8px)}100%{opacity:1;transform:none;filter:none}}
.tk-title{white-space:nowrap;font-size:clamp(24px,7.6vw,38px)}
dialog#collection>.close{top:128px;right:22px;width:34px;height:34px;padding:0;line-height:1}
/* No focus box around the egg logo (or the incubator's close button) after a tap (Sophia 2026-10-13). */
.logo-egg,.logo-egg:focus,.logo-egg:focus-visible,.logo-egg *:focus,dialog#collection>.close:focus{outline:none!important;box-shadow:none;-webkit-tap-highlight-color:transparent}
.brand:has(.logo-egg){-webkit-tap-highlight-color:transparent}
.brand:focus:not(:focus-visible),.mobile-brand:focus,.brand-mark:focus{outline:none}
html.incubating .logo-egg{overflow:visible;animation:logoglow 2.4s ease-in-out infinite}
html.incubating .logo-egg .logo-shell{fill:var(--incubating)}
@keyframes logoglow{0%,100%{filter:drop-shadow(0 0 3px var(--incubating)) drop-shadow(0 0 6px color-mix(in srgb,var(--incubating) 60%,transparent))}50%{filter:drop-shadow(0 0 7px var(--incubating)) drop-shadow(0 0 16px var(--incubating))}}
@media(prefers-reduced-motion:reduce){html.incubating .logo-egg{animation:none;filter:drop-shadow(0 0 6px var(--incubating))}}
/* Weekly prizes on the leaderboard: a ribboned box with gold, silver and bronze prize cards. */
.prize-box{margin:14px 0 16px;padding:14px;border-radius:20px;background:linear-gradient(160deg,#fff7df,#fdeccf);border:1.5px solid #f1d79a;box-shadow:0 6px 16px #c9a24a22}
.prize-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.prize-ribbon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:#ffe39a;box-shadow:inset 0 -3px 0 #e8c062}
.prize-head h3{margin:0;font:900 16px/1.1 Nunito,sans-serif;color:#7a5a17}.prize-head small{display:block;color:#a8873f;font-size:11px;margin-top:3px}
.prize-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.prize{position:relative;text-align:center;padding:22px 6px 10px;border-radius:16px;background:#fff;border:1.5px solid var(--m);min-width:0}
.prize.p1{--m:#e8b93a;--mt:#fff4c9;transform:translateY(-4px);box-shadow:0 0 0 3px #ffe9a4,0 8px 16px #e8b93a33}.prize.p2{--m:#b9c1cc;--mt:#f1f4f8}.prize.p3{--m:#d39a6a;--mt:#fbeadc}
.prize-medal{position:absolute;top:-10px;left:50%;translate:-50% 0;padding:2px 9px;border-radius:99px;background:var(--m);color:#fff;font:900 11px/1.5 Nunito,sans-serif;box-shadow:0 2px 0 #0000001a}
.prize-gift{display:grid;place-items:center;width:44px;height:44px;margin:0 auto 6px;border-radius:50%;background:var(--mt);font-size:24px}
.prize strong{display:block;font:900 12px/1.2 Nunito,sans-serif;color:#4a3d2a}.prize small{display:block;color:#9a8a70;font-size:10px;margin-top:3px;line-height:1.3}
html[data-mode="dark"] .prize-box{background:linear-gradient(160deg,#2c2718,#221f18);border-color:#5a4a22}
html[data-mode="dark"] .prize-head h3{color:#ffd978}html[data-mode="dark"] .prize-head small{color:#c7ad6d}
html[data-mode="dark"] .prize{background:#1d1e23}html[data-mode="dark"] .prize strong{color:#f5f2ea}html[data-mode="dark"] .prize-gift{background:#2b2a30}
/* Pettodex view switch sits centred at the bottom of the incubator (Sophia 2026-10-13), staying in reach as you scroll. */
.dex-toggle-dock{position:sticky;bottom:-22px;display:flex;justify-content:center;margin:16px -16px -22px;padding:12px 0 16px;
  background:linear-gradient(transparent,#fffaf1 40%);z-index:3}
html[data-mode="dark"] .dex-toggle-dock{background:linear-gradient(transparent,#1d1e23 40%)}
.dex-toggle-dock .dex-toggle{margin:0;padding:8px 16px 8px 8px;border-radius:99px;background:#efe3cf;box-shadow:0 4px 12px #5a463022}
html[data-mode="dark"] .dex-toggle-dock .dex-toggle{background:#2c2930}
/* Ticket buttons printed like the ticket (Sophia 2026-10-13): serif capitals in plum ink, a stamped filled button and a
   dashed tear-off one. */
.ticket-bar button,.ticket-bar #ticket-use,html[data-mode="dark"] .ticket-bar #ticket-use{border-radius:6px!important;padding:9px 14px!important;
  font:700 11px/1 Georgia,'Times New Roman',serif!important;letter-spacing:1.6px;text-transform:uppercase;
  background:#3d3048!important;color:#fbf3e4!important;border:0!important;box-shadow:0 0 0 2px #fbf8f3,0 0 0 3.5px #3d3048,0 3px 6px #3d304833!important}
.ticket-bar #ticket-buy,html[data-mode="dark"] .ticket-bar #ticket-buy{background:transparent!important;color:#3d3048!important;
  box-shadow:none!important;border:1.5px dashed #3d3048!important}
.ticket-bar button:not(:disabled):hover{transform:translateY(-1px) rotate(-1deg)}
.ticket-bar button:disabled{opacity:.4}
/* Embossed egg seal on the ticket stub (Sophia 2026-10-13): pressed into the pearl, same colour with a light edge
   above and a soft shade below, like the foil seal on a golden ticket. */
.ticket-bar .ticket-icon{left:12px!important;width:50px;height:50px}
.egg-seal{width:50px;height:50px;display:block;overflow:visible;transform:rotate(-12deg);
  filter:drop-shadow(-.8px -.8px 0 #ffffffe6) drop-shadow(.9px 1px 0 #9b8bb466) drop-shadow(0 1px 1.5px #6a5a7a33)}
.egg-seal .seal-edge{fill:#ece4f3;stroke:#d5c9e3;stroke-width:.6}
.egg-seal .seal-line{fill:none;stroke:#cbbcdd;stroke-width:.9}
.egg-seal .seal-text{font:700 5.1px Georgia,serif;letter-spacing:.55px;fill:#a593c0}
.egg-seal .seal-egg{fill:#e4daee;stroke:#a593c0;stroke-width:1.2}
.egg-seal .seal-shine{fill:none;stroke:#fff;stroke-width:1.3;stroke-linecap:round}
/* Smaller ticket with Use and Buy side by side (Sophia 2026-10-13). */
.ticket-bar,html[data-mode="dark"] .ticket-bar{padding:10px 14px 10px 66px!important;gap:6px}
.ticket-bar::before{left:56px!important}
.ticket-bar .ticket-icon{left:7px!important;width:42px;height:42px}.egg-seal{width:42px;height:42px}
.tk-brand{font-size:10px}.tk-title{font-size:clamp(20px,6vw,28px);margin:3px 0 2px;padding:3px 0 1px}
.tk-admit{font-size:7px;margin-bottom:4px}.ticket-bar .tk-field strong,html[data-mode="dark"] .ticket-bar .tk-field strong{font-size:13px}
.ticket-bar .tk-face small{font-size:10px;margin-bottom:0}
.ticket-bar .tk-buttons{display:flex;flex:1 1 100%;min-width:0;gap:8px;flex-wrap:nowrap}
.ticket-bar .tk-buttons button{flex:1 1 0;min-width:0;white-space:nowrap;padding:8px 6px!important;font-size:10px!important;letter-spacing:1px}
.ticket-bar .tk-buttons #ticket-use,.ticket-bar .tk-buttons #ticket-buy,html[data-mode="dark"] .ticket-bar .tk-buttons #ticket-use,html[data-mode="dark"] .ticket-bar .tk-buttons #ticket-buy{padding:8px 6px!important;font-size:10px!important;letter-spacing:1px}
dialog#collection[open]{animation:incup .7s cubic-bezier(.2,1.3,.4,1) both}
dialog#collection[open]::backdrop{animation:incfade .4s ease both}
dialog#collection.closing{animation:incdown .42s cubic-bezier(.5,0,.9,.5) forwards!important}
dialog#collection.closing::backdrop{animation:incfade .42s ease reverse forwards}
@keyframes incup{0%{transform:translateY(105vh) scale(.92)}70%{transform:translateY(-10px) scale(1.01)}100%{transform:none}}
@keyframes incdown{0%{transform:translateY(-8px)}100%{transform:translateY(105vh) scale(.94)}}
@keyframes incfade{from{opacity:0}to{opacity:1}}
dialog#collection.to-egg{animation:incout .65s cubic-bezier(.6,0,.8,.4) forwards!important}
@media(prefers-reduced-motion:reduce){dialog#collection[open],dialog#collection[open]::backdrop{animation:none}}
dialog#collection>.close{top:112px!important;right:20px!important;width:36px!important;height:36px!important;padding:0!important;display:grid;place-items:center;
  border-radius:50%;background:#efe3cf;color:#7a6243!important;font-size:22px!important;line-height:1;box-shadow:0 2px 0 #d8c6a8}
html[data-mode="dark"] dialog#collection>.close{background:#2c2930;color:#f1d9ae!important;box-shadow:0 2px 0 #18171b}
/* Light-mode quick buttons, take 3 (Sophia 2026-10-13: still didn't like them): the dark-mode look turned light. Thin
   outlined round buttons with the Pettö's colour on the icons, and the page you're on as a white pill. No fills, no 3D. */
html:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]){background:transparent!important;border:1.5px solid color-mix(in srgb,var(--petto-deep,#c99a2e) 28%,#fff)!important;color:color-mix(in srgb,var(--petto-deep,#c99a2e) 80%,#000)!important}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{background:#fff!important;border:1.5px solid #fff!important;color:#2b2a30!important;box-shadow:0 2px 10px color-mix(in srgb,var(--petto-deep,#c99a2e) 22%,transparent)!important}
.dex-tile .dex-art{position:relative}
.dex-snooze{position:absolute;right:-4px;top:-2px;width:38px;height:38px;border:0;border-radius:50%;padding:0;display:grid;place-items:center;
  background:#5b5fb8;color:#ffe9a8;font:900 13px/1 Nunito,sans-serif;letter-spacing:-.5px;box-shadow:0 3px 0 #3f428a,0 6px 12px #5b5fb844;cursor:pointer;animation:snoozebob 2.6s ease-in-out infinite}
.dex-snooze i{font-style:normal;font-size:10px;translate:0 -3px}.dex-snooze b{font-size:8px;translate:0 -6px}
.dex-snooze{display:flex;align-items:center;justify-content:center;gap:0}
.dex-snooze:active{translate:0 2px;box-shadow:0 1px 0 #3f428a}
@keyframes snoozebob{50%{transform:translateY(-3px) rotate(-6deg)}}
@media(prefers-reduced-motion:reduce){.dex-snooze{animation:none}}
/* Snooze is just floating zZz letters in the middle of the Pettö or egg, no button shape (Sophia 2026-10-13). */
.dex-snooze{inset:0;right:auto;top:auto;width:100%;height:100%;border-radius:0;background:none!important;box-shadow:none!important;
  display:flex;align-items:center;justify-content:center;gap:1px;color:#5b5fb8;font:900 22px/1 Nunito,sans-serif;
  text-shadow:0 0 6px #fff,0 0 12px #fff,0 1px 0 #fff;animation:none}
.dex-snooze,.dex-snooze i,.dex-snooze b{font-style:normal}
.dex-snooze>*,.dex-snooze{display:flex}
.dex-snooze i{font-size:28px;translate:0 -6px;animation:zfloat 2.4s ease-in-out infinite .3s}
.dex-snooze b{font-size:18px;translate:0 -14px;animation:zfloat 2.4s ease-in-out infinite .6s}
.dex-snooze{animation:zfloat 2.4s ease-in-out infinite}
.dex-snooze:active{translate:none}
html[data-mode="dark"] .dex-snooze{color:#ffe9a8;text-shadow:0 0 8px #5b5fb8,0 0 14px #5b5fb8}
@keyframes zfloat{50%{opacity:.6;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.dex-snooze,.dex-snooze i,.dex-snooze b{animation:none}}
.prize-trophies{margin:10px 0 0;text-align:center;font:800 12px Nunito,sans-serif;color:#7a5a17}
html[data-mode="dark"] .prize-trophies{color:#ffd978}
.prize-gc{display:block;margin:10px auto 0;border:0;border-radius:99px;padding:9px 16px;font:800 12px Nunito,sans-serif;background:#e8b93a;color:#fff;box-shadow:0 2px 0 #c8971f}
.prize-gc[hidden]{display:none}
dialog.prize-won{max-width:330px;text-align:center;border:0;border-radius:28px;background:linear-gradient(170deg,#fff7df,#fdeccf);padding:26px 22px 22px}
.prize-won-gift{width:84px;height:84px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;font-size:46px;background:#ffe39a;box-shadow:0 0 0 6px #fff4c9,0 0 34px #ffd76e;animation:prizepop .8s cubic-bezier(.2,1.6,.4,1) both}
dialog.prize-won h2{color:#7a5a17}dialog.prize-won p{color:#9a7a3a;font-size:13px}
#prize-won-ok{border:0;border-radius:99px;padding:11px 28px;font:900 14px Nunito,sans-serif;background:#e8b93a;color:#fff;box-shadow:0 3px 0 #c8971f}
html[data-mode="dark"] dialog.prize-won{background:linear-gradient(170deg,#2c2718,#1d1e23)}html[data-mode="dark"] dialog.prize-won h2{color:#ffd978}
@keyframes prizepop{0%{transform:scale(.2) rotate(-30deg)}100%{transform:none}}
/* Close is just a big + turned into an ×, no circle; it spins back to + as the incubator slides away (Sophia 2026-10-13). */
dialog#collection>.close.inc-close{background:none!important;box-shadow:none!important;border-radius:0;width:40px!important;height:40px!important;
  color:#7a6243!important;font:300 40px/1 Nunito,'DM Sans',sans-serif!important}
html[data-mode="dark"] dialog#collection>.close.inc-close{color:#f1d9ae!important}
.inc-close span{display:block;transform:rotate(45deg);transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.inc-close:hover span{transform:rotate(135deg)}
dialog#collection.closing .inc-close span{transform:rotate(-180deg) scale(.6);opacity:0;transition:transform .4s ease-in,opacity .4s}
/* Bigger egg seal, set further in from the notch. */
.ticket-bar,html[data-mode="dark"] .ticket-bar{padding-left:84px!important}
.ticket-bar::before{left:76px!important}
.ticket-bar .ticket-icon{left:18px!important;width:52px;height:52px}.egg-seal{width:52px;height:52px}
/* Terms and Privacy agreement (sign-up tick box, gate for older players, short-version pop-up). */
.agree-terms{display:flex;align-items:flex-start;gap:10px;margin:16px 0 4px;font-size:13px;line-height:1.4;cursor:pointer}
.agree-terms input{width:20px;height:20px;flex:none;margin:0;accent-color:var(--petto-deep,#719879)}
.agree-terms a{color:inherit;font-weight:800;text-decoration:underline;text-underline-offset:2px}
dialog.legal-dialog{max-width:400px;border-radius:24px}
dialog.legal-dialog ul{padding-left:18px;margin:10px 0;font-size:13px;line-height:1.5}
dialog.legal-dialog li{margin:4px 0}
#legal-ok,#agree-go{display:block;margin:14px auto 0;border:0;border-radius:99px;padding:11px 28px;font:900 14px Nunito,sans-serif;background:var(--petto-deep,#719879);color:#fff}
#agree-go:disabled{opacity:.4;cursor:default}
.agree-terms input[type=checkbox]{appearance:auto;-webkit-appearance:checkbox;padding:0!important;border:0;min-height:0;margin-top:1px!important}.agree-terms span{flex:1}
/* The egg screen is truly full screen: nothing of the app shows over it (Sophia 2026-10-13). */
.egg-wait{z-index:9000}
body.egg-waiting .topbar,body.egg-waiting .page-tabs,body.egg-waiting #menu-bulge,body.egg-waiting #menu-drop,body.egg-waiting #menu-lava,body.egg-waiting .mobile-brand,body.egg-waiting .sidebar{visibility:hidden!important;pointer-events:none!important}
/* Cuter zzZ (Sophia 2026-10-13): round bubbly pastel letters with a white outline, rising one after another like a
   sleepy cartoon, each with a little wobble. Tap them to snooze. */
.dex-snooze,.dex-snooze i,.dex-snooze b{animation:none}
.dex-snooze{gap:0;align-items:flex-end;padding-bottom:18%;font-family:'Nunito','Arial Rounded MT Bold','SF Pro Rounded',sans-serif;font-weight:900;text-shadow:none!important}
.dex-snooze>span,.dex-snooze>i,.dex-snooze>b{display:inline-block;color:#c8b6ff;-webkit-text-stroke:3px #fff;paint-order:stroke fill;
  filter:drop-shadow(0 2px 3px #6b5bb84d);animation:zrise 2.4s ease-in-out infinite;opacity:0}
.dex-snooze>span{font-size:18px;--zx:-6px;--zr:-14deg}
.dex-snooze>i{font-size:24px;color:#ffc4dd;animation-delay:.45s;--zx:2px;--zr:8deg}
.dex-snooze>b{font-size:32px;color:#bfe3ff;animation-delay:.9s;--zx:8px;--zr:-6deg}
@keyframes zrise{0%{opacity:0;transform:translate(0,10px) scale(.5) rotate(0)}25%{opacity:1;transform:translate(var(--zx),0) scale(1) rotate(var(--zr))}70%{opacity:1;transform:translate(calc(var(--zx) * -1),-14px) scale(1.05) rotate(calc(var(--zr) * -1))}100%{opacity:0;transform:translate(var(--zx),-26px) scale(.8) rotate(var(--zr))}}
html[data-mode="dark"] .dex-snooze>span,html[data-mode="dark"] .dex-snooze>i,html[data-mode="dark"] .dex-snooze>b{-webkit-text-stroke:3px #2b2a3a}
@media(prefers-reduced-motion:reduce){.dex-snooze>span,.dex-snooze>i,.dex-snooze>b{animation:none;opacity:1}}
html[data-mode="dark"] .dex-snooze>span,html[data-mode="dark"] .dex-snooze>i,html[data-mode="dark"] .dex-snooze>b{-webkit-text-stroke:3px #fff}
.dex-moon{position:absolute;top:-6px;right:-6px;width:34px;height:34px;padding:0;border:0;background:none;cursor:pointer;animation:moonbob 3s ease-in-out infinite}
.dex-moon svg{width:100%;height:100%;overflow:visible}
.dex-moon path{fill:#ffe08a;stroke:#fff;stroke-width:1.6;paint-order:stroke;filter:drop-shadow(0 2px 3px #c99a2e55)}
.dex-moon circle{fill:#ffe08a}
@keyframes moonbob{50%{transform:translateY(-3px) rotate(-8deg)}}
@media(prefers-reduced-motion:reduce){.dex-moon{animation:none}}
.dex-moon path{fill:#ffd45e;stroke:#e9a92c;stroke-width:1}.dex-moon circle{fill:#ffd45e}
.dex-tile.waking .dex-art{animation:dexwake .9s cubic-bezier(.3,1.6,.5,1) both}
@keyframes dexwake{0%{transform:scale(.92) translateY(4px);filter:saturate(.5) brightness(.9)}45%{transform:scale(1.08,1.04) translateY(-6px)}100%{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.dex-tile.waking .dex-art{animation:none}}
/* The Pettodex view fills the whole screen, not the incubator's dome (Sophia 2026-10-13). */
dialog#collection:has(#egg-dex:not([hidden])){border:0;border-radius:0;padding:0;margin:0;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;overflow:hidden;animation:none;transform:none}
.dex-caught-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px;position:relative;z-index:3}
.dex-caught-actions[hidden]{display:none}
.dex-caught-actions button{border:0;border-radius:99px;padding:12px 20px;font:900 14px Nunito,sans-serif;background:#f5f2ea;color:#16171b;box-shadow:0 6px 18px #0006}
.dex-caught-actions button.ghost{background:transparent;color:#f5f2ea;box-shadow:inset 0 0 0 1.5px #f5f2ea66}
.dex-tile.just-caught{animation:caughtglow 1.2s ease-in-out 3}
@keyframes caughtglow{50%{box-shadow:0 0 0 4px var(--accent),0 0 24px var(--accent)}}
/* Ticket stub: YOU HOLD / number / EGG TICKETS stacked above the embossed seal. */
.ticket-bar,html[data-mode="dark"] .ticket-bar{padding-left:104px!important;min-height:150px}
.ticket-bar::before{left:94px!important}
.tk-stub{position:absolute;left:10px;top:14px;width:78px;display:flex;flex-direction:column;align-items:center;text-align:center;color:#3d3048;pointer-events:none}
.tk-stub em{font:700 7.5px/1.2 Georgia,serif;font-style:normal;letter-spacing:1.3px;text-transform:uppercase;color:#8d7fa0}
.tk-stub b{font:900 30px/1 'Avenir Next Condensed','Arial Narrow',Georgia,serif;color:#3d3048;margin:2px 0;text-shadow:0 1px 0 #fff}
.ticket-bar .ticket-icon{left:23px!important;top:auto!important;bottom:12px;translate:none!important;width:50px;height:50px}.ticket-bar .egg-seal{width:50px;height:50px}
/* Bigger seal, nudged right; stub widened to fit. */
.ticket-bar,html[data-mode="dark"] .ticket-bar{padding-left:118px!important}
.ticket-bar::before{left:108px!important}
.tk-stub{width:90px}
.ticket-bar .ticket-icon{left:30px!important;bottom:8px;width:68px;height:68px}.ticket-bar .egg-seal{width:68px;height:68px}
.ticket-bar .tk-buttons #ticket-use,.ticket-bar .tk-buttons #ticket-buy,html[data-mode="dark"] .ticket-bar .tk-buttons #ticket-use,html[data-mode="dark"] .ticket-bar .tk-buttons #ticket-buy{padding:8px 4px!important;letter-spacing:.4px!important;white-space:nowrap;min-width:0}
/* 3D walk map (Sophia 2026-10-13): the streets lie back like a game board, you, eggs and friends stand up on them,
   and the far side fades into sky. The map is bigger than the window so the tilted edges never show. */
.walk-map{--tilt:52deg;perspective:none}
.walk-map .walk-leaflet{inset:-34% -70% -46% -70%;overflow:visible!important;transform:perspective(760px) rotateX(var(--tilt));transform-origin:50% 50%;transform-style:preserve-3d}
.walk-map .walk-leaflet .leaflet-map-pane,.walk-map .walk-leaflet .leaflet-marker-pane,.walk-map .walk-leaflet .leaflet-marker-icon{transform-style:preserve-3d}
.walk-map .walk-leaflet .up{transform:rotateX(calc(var(--tilt) * -1));transform-origin:50% 100%;transform-style:preserve-3d}
.walk-map .walk-leaflet .walk-map-pin .up{height:100%;display:flex;align-items:flex-end;justify-content:center}
.walk-map .walk-leaflet .walk-me-icon .up{height:66px;display:flex;align-items:flex-end;justify-content:center}
.walk-map .walk-leaflet .walk-me-icon .walk-me{flex:none}
/* Drawn map (no streets loaded): the same lean. */
.walk-map .walk-streets{transform:perspective(700px) rotateX(46deg) scale(1.9,1.5);transform-origin:50% 70%}
/* Sky towards the horizon, under the chips. */
.walk-map::after{content:"";position:absolute;inset:0 0 auto;height:30%;z-index:1;pointer-events:none;background:linear-gradient(#cfe8ff,#e6f3ffcc 55%,#e6f3ff00)}
html[data-mode="dark"] .walk-map::after{background:linear-gradient(#121527,#161a2fcc 55%,#161a2f00)}
html[data-theme]:not([data-mode="dark"]) .walk-map::after{background:linear-gradient(hsl(var(--th) 70% 90%),hsl(var(--th) 70% 95% / .8) 55%,hsl(var(--th) 70% 95% / 0))}
.walk-map .walk-top,.walk-map .walk-toast{z-index:3}
/* Egg words sit under the egg, just above the buttons, never over it (Sophia 2026-10-13). */
.egg-dex .egg-caption{margin-top:auto!important;margin-bottom:6px!important}
dialog#collection.dex-on{border:0;border-radius:0;padding:0;margin:0;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;overflow:hidden;animation:none!important;transform:none!important}
dialog#collection.dex-on #egg-dex{position:fixed;inset:0}
/* The slide-up leaves nothing behind, so the full-screen Pettodex is never boxed inside the incubator. */
dialog#collection[open]{animation-fill-mode:backwards}
/* Coin stall egg ticket = a little copy of the incubator's golden ticket (Sophia 2026-10-13). */
.wallet-ticket{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr;gap:8px;align-items:center;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
.wallet-ticket>small{display:none}
.wallet-ticket .mini-ticket{grid-column:1/-1;filter:drop-shadow(1px 0 0 #b9a9d0) drop-shadow(-1px 0 0 #b9a9d0) drop-shadow(0 1px 0 #b9a9d0) drop-shadow(0 -1px 0 #b9a9d0) drop-shadow(0 5px 8px #6a5a7a2e)}
.mini-ticket{position:relative;display:flex;align-items:center;min-height:86px}
.mini-ticket::before{content:"";position:absolute;inset:0;border-radius:10px;background:linear-gradient(115deg,#fbf8f3 0%,#f3eef9 22%,#eef7f6 40%,#fdf3f1 58%,#f2eefb 78%,#fbf8f3 100%);box-shadow:inset 0 0 0 4px #fbf8f3,inset 0 0 0 5px #d9cfe6;
  -webkit-mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle 11px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 11px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.mini-ticket::after{content:"";position:absolute;left:84px;top:9px;bottom:9px;border-left:2px dashed #b9a9d0}
.mini-ticket .mt-seal{position:relative;width:84px;display:grid;place-items:center}
.mini-ticket .egg-seal{width:58px;height:58px}
.mini-ticket .mt-face{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 16px 8px 12px;text-align:center;color:#3d3048}
.mini-ticket em{font:italic 700 10px Georgia,serif;color:#8d7fa0;letter-spacing:.5px}
.mini-ticket strong{font:900 22px/1.05 'Avenir Next Condensed','Arial Narrow',Georgia,serif;letter-spacing:1.5px;color:#3d3048;border-top:1.5px solid #3d3048;border-bottom:1.5px solid #3d3048;padding:2px 6px;margin:3px 0;text-shadow:0 1px 0 #fff}
.mini-ticket small{font:700 7.5px/1.3 Georgia,serif;letter-spacing:1.1px;text-transform:uppercase;color:#6d6080}
.wallet-ticket .wallet-buy,html[data-mode="dark"] .wallet-ticket .wallet-buy{margin:0;border-radius:6px;padding:9px 6px;font:700 11px/1 Georgia,'Times New Roman',serif;letter-spacing:1px;text-transform:uppercase;display:inline-flex;align-items:center;justify-content:center;gap:4px;
  background:#3d3048;color:#fbf3e4;box-shadow:0 0 0 2px #fbf8f3,0 0 0 3.5px #3d3048,0 3px 6px #3d304833}
.wallet-ticket #wallet-ticket-tama,html[data-mode="dark"] .wallet-ticket #wallet-ticket-tama{background:#fbf8f3;color:#3d3048;box-shadow:inset 0 0 0 1.5px #3d3048,0 0 0 2px #fbf8f3,0 0 0 3.5px #3d304866}
.wallet-ticket .wallet-buy .tama-coin{width:14px;height:14px}
/* Your money in the incubator's sunken read-out panel: in the shop, the pet store and the coin stall. */
.inset-panel,.shop-balance.inset-panel,html[data-mode="dark"] .shop-balance.inset-panel{display:inline-flex!important;justify-content:center;align-items:center;gap:6px;padding:6px 10px!important;width:max-content;max-width:100%;margin:0;
  border-radius:14px;background:#e9ddc9!important;box-shadow:inset 0 2px 4px #0000001a;color:inherit;font-size:inherit}
.wallet-have.inset-panel{display:flex!important;margin:0 auto 14px}
.inset-panel .inc-read{display:inline-flex;align-items:center;gap:4px}
.inset-panel .inc-read strong{font:900 12px/1 Nunito,sans-serif}
.inset-panel .tama-coin{width:13px;height:13px}
html[data-mode="dark"] .inset-panel,html[data-mode="dark"] .shop-balance.inset-panel{background:#2c2930!important}
html[data-mode="dark"] .inset-panel .inc-read{background:#16171b;color:#f1d9ae}
.shop-card .section-head:has(.inset-panel){flex-wrap:wrap;row-gap:10px}
.shop-card .section-head:has(.inset-panel)>div{flex:1 1 100%}
/* Light-mode quick buttons stay flat (Sophia 2026-10-13): no shadow, no raised white pill; current page filled. */
html:not([data-mode="dark"]) .page-tabs a,html:not([data-mode="dark"]) .page-tabs a:is(:hover,:active,:focus){box-shadow:none!important;background-image:none!important;transform:none!important;filter:none!important}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{background:var(--petto-deep,#c99a2e)!important;border:1.5px solid var(--petto-deep,#c99a2e)!important;color:#fff!important}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"] svg{filter:none}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{box-shadow:none!important}
/* Drawn map in 3D too (shown when map pictures can't load, e.g. in the preview): streets, circle and pins lie on one
   tilted plane; you, eggs and friends stand up on it. */
.walk-plane{position:absolute;inset:-30% -45% -16%;transform:perspective(760px) rotateX(var(--tilt,52deg));transform-origin:50% 50%;transform-style:preserve-3d;pointer-events:none}
.walk-plane>*{pointer-events:auto}
.walk-map .walk-plane .walk-streets{transform:none}
.walk-plane .walk-ring,.walk-plane .walk-pins{transform-style:preserve-3d;width:min(46%,360px)}
.walk-plane .walk-pins{pointer-events:none}
.walk-plane .walk-me{rotate:x calc(var(--tilt,52deg) * -1);transform-origin:50% 85%;width:42%}
.walk-plane .walk-pin{rotate:x calc(var(--tilt,52deg) * -1);transform-origin:50% 100%}
.walk-plane .walk-egg{rotate:x calc(var(--tilt,52deg) * -1);transform-origin:50% 100%}
.walk-map.real .walk-plane{display:none}
.walk-plane{inset:-6% -45% -44%}
/* Pokémon Go look (Sophia 2026-10-13): low camera, ground running to a hazy horizon under a big sky, you large in
   the front. Both map boxes are centred on you and made big enough that their far edge sits in the haze. */
.walk-map{--tilt:62deg;--persp:600px}
.walk-map .walk-leaflet{inset:-114% -85% -154%!important;transform:perspective(var(--persp)) rotateX(var(--tilt))!important;transform-origin:50% 50%}
.walk-plane{inset:-114% -85% -154%!important;transform:perspective(var(--persp)) rotateX(var(--tilt));
  background:radial-gradient(60px 44px at 30% 46%,#8fd3a0 98%,#0000),radial-gradient(90px 60px at 64% 41%,#8fd3a0 98%,#0000),radial-gradient(70px 50px at 40% 58%,#9bd9ab 98%,#0000),
    repeating-linear-gradient(90deg,#0000 0 170px,#f7f3df 170px 196px,#0000 196px 360px,#eef6f0 360px 372px),
    repeating-linear-gradient(0deg,#0000 0 210px,#f7f3df 210px 236px,#0000 236px 420px,#eef6f0 420px 430px),#b7e6bd}
.walk-plane .walk-streets{display:none}
.walk-plane .walk-ring,.walk-plane .walk-pins{width:320px}
.walk-plane .walk-ring{background:radial-gradient(circle,#ffffff66,#ffffff00 70%);border:3px solid #ffffffcc;box-shadow:0 0 0 6px color-mix(in srgb,var(--petto,#f0a64a) 35%,transparent)}
.walk-plane .walk-me{width:46%}
html[data-mode="dark"] .walk-plane{background:radial-gradient(60px 44px at 30% 46%,#24485a 98%,#0000),radial-gradient(90px 60px at 64% 41%,#24485a 98%,#0000),radial-gradient(70px 50px at 40% 58%,#28506a 98%,#0000),
    repeating-linear-gradient(90deg,#0000 0 170px,#5d7f9c 170px 196px,#0000 196px 360px,#3d5f78 360px 372px),
    repeating-linear-gradient(0deg,#0000 0 210px,#5d7f9c 210px 236px,#0000 236px 420px,#3d5f78 420px 430px),#1d3a4c}
html[data-mode="dark"] .walk-plane .walk-ring{border-color:#bfe4ffaa;background:radial-gradient(circle,#bfe4ff33,#bfe4ff00 70%)}
.walk-map{background:#cfeaff}
html[data-mode="dark"] .walk-map{background:#101a33}
.walk-map::after{height:46%;background:linear-gradient(#8fd0ff 0%,#bfe6ff 38%,#e9f7ffd9 62%,#e9f7ff00 100%)}
html[data-mode="dark"] .walk-map::after{background:linear-gradient(#0b1230 0%,#16234a 38%,#1f3355cc 62%,#1f335500 100%)}
html[data-theme]:not([data-mode="dark"]) .walk-map::after{background:linear-gradient(hsl(var(--th) 70% 82%) 0%,hsl(var(--th) 70% 90%) 38%,hsl(var(--th) 70% 96% / .85) 62%,hsl(var(--th) 70% 96% / 0) 100%)}
.walk-plane .walk-ring,.walk-plane .walk-pins{width:230px}
.walk-plane .walk-me{width:52%}
.walk-map .walk-leaflet .walk-me-icon .walk-me{width:120px;height:120px}
.walk-plane{transition:background-position 1.5s linear}
/* Light quick buttons: completely flat, no outline ring (it read as 3D). Soft solid fill, current page deep fill. */
html:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]),html:not([data-mode="dark"]) .page-tabs .tab-edit{border:0!important;background:color-mix(in srgb,var(--petto,#f3c95c) 18%,#fff)!important;box-shadow:none!important}
html[data-theme]:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]),html[data-theme]:not([data-mode="dark"]) .page-tabs .tab-edit{background:hsl(var(--th) 60% 93%)!important;color:hsl(var(--th) 35% 38%)!important}
html:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{border:0!important}
html[data-theme]:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{background:hsl(var(--th) 35% 48%)!important}
/* Real 3D map (MapLibre): fills the map box; you, eggs and friends stand upright on it. */
.walk-3d{position:absolute;inset:0;z-index:0}
.walk-map.map3d .walk-plane,.walk-map.map3d .walk-leaflet{display:none!important}
.walk-map.map3d::after{height:16%;opacity:.5}
.walk-3d-pin{pointer-events:auto}
.walk-3d-pin.me{pointer-events:none}
.walk-3d-pin.me .walk-me{width:110px;height:110px}
.walk-3d-pin .walk-pin{position:static;transform:none}
.walk-3d-pin .walk-egg{position:static;transform:none;width:44px;height:52px;animation:walkeggmap 1.8s ease-in-out infinite}
.walk-3d-pin .walk-egg.near{animation:walkeggnearmap .6s ease-in-out infinite}
.walk-map .walk-3d{position:absolute!important;inset:0;width:100%;height:100%}
/* Collection points: a pole with a spinning disc; blue when ready, lilac while refilling. */
.walk-spot{position:absolute;display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;cursor:pointer;pointer-events:auto;transform:translate(-50%,-100%)}
.walk-map-pin .walk-spot,.walk-3d-pin .walk-spot{position:static;transform:none}
.walk-plane .walk-spot{rotate:x calc(var(--tilt,52deg) * -1);transform-origin:50% 100%}
.walk-spot .ws-disc{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#bff0ff,#38b6ff 60%,#1a7fd0);box-shadow:0 0 0 3px #fff,0 0 18px #38b6ffaa;animation:wsspin 3.2s linear infinite}
.walk-spot .ws-disc i{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 3px #1a7fd0}
.walk-spot .ws-pole{width:5px;height:30px;border-radius:3px;background:linear-gradient(#ffffff,#9fb7c9)}
.walk-spot small{margin-top:3px;padding:2px 7px;border-radius:99px;background:#ffffffe0;color:#1d3a4c;font:800 9.5px/1.2 Nunito,sans-serif;white-space:nowrap;max-width:110px;overflow:hidden;text-overflow:ellipsis}
.walk-spot.used .ws-disc{background:radial-gradient(circle at 35% 30%,#f3e6ff,#b98be6 60%,#8b5cc0);box-shadow:0 0 0 3px #fff;animation-duration:9s}
.walk-spot.near .ws-disc{box-shadow:0 0 0 3px #fff,0 0 0 8px #38b6ff55,0 0 26px #38b6ff}
@keyframes wsspin{to{transform:rotateY(360deg)}}
.spot-dialog{border:0;border-radius:28px;padding:26px 22px 22px;width:min(360px,92vw);text-align:center;background:#f5f2ea;color:#1d1d1f}
.spot-dialog::backdrop{background:#0b1230aa;backdrop-filter:blur(4px)}
html[data-mode="dark"] .spot-dialog{background:#16171b;color:#f5f2ea}
.spot-dialog h2{margin:4px 0 14px}
.spot-disc{width:150px;height:150px;margin:6px auto 16px;border-radius:50%;border:0;display:grid;place-items:center;cursor:pointer;background:radial-gradient(circle at 35% 30%,#bff0ff,#38b6ff 60%,#1a7fd0);box-shadow:0 0 0 8px #fff,0 0 40px #38b6ffaa;animation:wsspin 4s linear infinite}
.spot-disc i{width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 9px #1a7fd0}
.spot-dialog.spun .spot-disc{animation:spotspin .9s cubic-bezier(.2,.9,.3,1) both,wsspin 9s linear .9s infinite;background:radial-gradient(circle at 35% 30%,#f3e6ff,#b98be6 60%,#8b5cc0);box-shadow:0 0 0 8px #fff}
@keyframes spotspin{from{transform:rotate(0) scale(1)}60%{transform:rotate(900deg) scale(1.08)}to{transform:rotate(1080deg) scale(1)}}
.spot-loot{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.spot-loot li{display:flex;align-items:center;gap:6px;padding:7px 12px 7px 8px;border-radius:99px;background:#fff;color:#1d1d1f;font:800 13px Nunito,sans-serif;box-shadow:0 2px 8px #0000001a;animation:lootpop .45s cubic-bezier(.2,1.4,.4,1) both}
.spot-loot li span{font-size:18px}
.spot-loot li.rare{background:#ffe9a8}
@keyframes lootpop{from{opacity:0;transform:translateY(-40px) scale(.4)}}
.inv-special .inv-art{font-size:34px;display:grid;place-items:center}
/* Walk page full screen (Sophia 2026-10-13): the map fills the screen and the walk details float in a card on it. */
.walk-page:not(.off-page) .section-head{display:none}
.walk-page:not(.off-page) .walk-map{position:fixed;inset:0;height:auto;min-height:0;border-radius:0;z-index:15}
.walk-page:not(.off-page) .walk-top{top:calc(max(env(safe-area-inset-top),12px) + 118px)}
.walk-page:not(.off-page) .walk-card{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 50px);z-index:16;margin:0;max-width:520px;margin-inline:auto;
  background:#ffffffd9!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px #0003;border-radius:24px;padding:14px 16px}
html[data-mode="dark"] .walk-page:not(.off-page) .walk-card{background:#0b0c10d9!important}
.walk-page:not(.off-page) .walk-card .walk-stats{margin-top:8px}
.walk-page:not(.off-page) .walk-card .walk-note{font-size:9.5px;margin:8px 2px 0;opacity:.55}
.walk-page:not(.off-page) .walk-history{position:fixed;left:12px;right:12px;top:calc(max(env(safe-area-inset-top),12px) + 168px);bottom:auto;max-height:40vh;overflow:auto;z-index:16;margin:0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.walk-page:not(.off-page) .walk-toast{bottom:auto;top:calc(max(env(safe-area-inset-top),12px) + 168px)}
.walk-page:not(.off-page){transform:none!important;filter:none!important}
.walk-page:not(.off-page){animation:none!important}
/* Full screen: you stand just above the walk card. */
.walk-page:not(.off-page) .walk-plane,.walk-page:not(.off-page) .walk-map .walk-leaflet{inset:-140% -85% -152%!important}
.walk-page:not(.off-page) .walk-card{padding:12px 14px}
.walk-page:not(.off-page) .walk-card .walk-where{display:none}
.walk-page:not(.off-page) .walk-card h3{font-size:16px}
.walk-page:not(.off-page) .walk-card .walk-stats>div{padding:6px 4px}
.walk-page:not(.off-page) .walk-card .walk-stats strong{font-size:16px}
.walk-page:not(.off-page) .walk-card .walk-go{margin-top:8px;padding:11px}
.walk-page:not(.off-page) .walk-card .walk-note{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.walk-page:not(.off-page) .walk-card .walk-note{font-size:0}.walk-page:not(.off-page) .walk-card .walk-note a{font-size:9px}
.walk-page:not(.off-page) .walk-card .walk-note a{margin-right:7px}
/* Pettodex switch sits bottom centre (above the caught-egg buttons when they show). */
.egg-dex #dex-exit{position:fixed;left:50%;bottom:calc(max(env(safe-area-inset-bottom),12px) + 18px);translate:-50% 0;z-index:6;box-shadow:0 6px 18px #0008}
.egg-dex:has(#dex-caught-actions:not([hidden])) #dex-exit{bottom:calc(max(env(safe-area-inset-bottom),12px) + 92px)}
.egg-dex .egg-caption{margin-bottom:64px!important}
.egg-dex:has(#dex-caught-actions:not([hidden])) .egg-caption{margin-bottom:56px!important}
.egg-dex .dex-caught-actions{margin-top:8px}
/* Black hole: everything spirals down into the switch, which becomes a swirling dark hole. */
.egg-dex.vortex>*:not(.egg-dex-top){animation:dexsuck .95s cubic-bezier(.55,0,.85,.35) forwards;transform-origin:50% calc(100% + 0px)}
.egg-dex.vortex #dex-stage{transform-origin:50% 100vh}
@keyframes dexsuck{0%{transform:none;filter:none;opacity:1}60%{opacity:1}100%{transform:translateY(40vh) rotate(720deg) scale(0);filter:blur(6px);opacity:0}}
.egg-dex.vortex{animation:dexdark .95s ease-in forwards}
@keyframes dexdark{to{background-color:#000}}
.egg-dex.vortex .egg-dex-top>.eyebrow{animation:dexsuck .7s cubic-bezier(.55,0,.85,.35) forwards;transform-origin:50% 100vh}
.egg-dex.vortex #dex-exit{color:transparent!important;width:56px;height:56px;padding:0!important;border-radius:50%;background:#000!important;
  box-shadow:0 0 0 3px #ffffff10,0 0 22px 8px #b98be6aa,0 0 60px 20px #38b6ff55!important;animation:holegrow .95s cubic-bezier(.3,1.4,.5,1) forwards;overflow:hidden;transition:width .25s,height .25s}
.egg-dex.vortex #dex-exit>*{opacity:0}
.egg-dex.vortex #dex-exit::before{content:"";position:absolute;inset:-10px;border-radius:50%;background:conic-gradient(from 0deg,#0000,#b98be6cc,#0000 30%,#38b6ffcc,#0000 60%,#ffd27acc,#0000 85%);
  -webkit-mask:radial-gradient(circle,#0000 38%,#000 42%,#000 60%,#0000 72%);mask:radial-gradient(circle,#0000 38%,#000 42%,#000 60%,#0000 72%);animation:holespin .5s linear infinite}
@keyframes holespin{to{transform:rotate(-360deg)}}
@keyframes holegrow{0%{scale:1}35%{scale:1.6}85%{scale:1.4}100%{scale:0;opacity:0}}
.egg-dex.vortex>*:not(.egg-dex-top){animation-duration:1.15s}
.egg-dex.vortex #dex-exit{animation-duration:1.3s}
/* Landscape and wide screens: the egg logo top left (not the date), like on a phone (Sophia 2026-10-13). */
.topbar .today{display:none!important}
.topbar .mobile-brand{display:flex!important;align-items:center;font-size:0!important}
.topbar .mobile-brand .logo-egg{width:26px;height:26px}
/* Quick buttons pop-up in light mode: flat circles, no shine or shadow (Sophia 2026-10-13). */
html:not([data-mode="dark"]) .quick-grid .md-ball{background:color-mix(in srgb,var(--petto,#f3c95c) 16%,#fff)!important;background-image:none!important;border:0!important;box-shadow:none!important;filter:none!important}
html:not([data-mode="dark"]) .quick-grid .md-ball::before,html:not([data-mode="dark"]) .quick-grid .md-ball::after{display:none!important}
html:not([data-mode="dark"]) .quick-grid .md-ball svg{stroke:color-mix(in srgb,var(--petto-deep,#c99a2e) 80%,#000)!important}
html:not([data-mode="dark"]) .quick-grid button[aria-pressed="true"] .md-ball{background:var(--petto-deep,#c99a2e)!important}
html:not([data-mode="dark"]) .quick-grid button[aria-pressed="true"] .md-ball svg{stroke:#fff!important}
html[data-theme]:not([data-mode="dark"]) .quick-grid .md-ball{background:hsl(var(--th) 60% 93%)!important}
html[data-theme]:not([data-mode="dark"]) .quick-grid button[aria-pressed="true"] .md-ball{background:hsl(var(--th) 35% 48%)!important}
html:not([data-mode="dark"]) .quick-grid b{color:#3a3a3f}
/* Google 3D map fills the screen; your Pettö stands in the middle where the camera looks. */
.walk-map .walk-g3d{position:absolute;inset:0;z-index:0}
.walk-g3d gmp-map-3d{display:block;width:100%;height:100%}
.walk-g3d-me{position:absolute;left:50%;top:50%;width:120px;height:120px;transform:translate(-50%,-88%);pointer-events:none;z-index:2}
.walk-g3d-me .walk-me{width:100%;height:100%}
.walk-map.g3d .walk-plane,.walk-map.g3d .walk-leaflet,.walk-map.g3d .walk-3d{display:none!important}
.walk-map.g3d::after{display:none}
/* Over the full-screen map the header and quick buttons float on their own, without a band behind them. */
.walk-page:not(.off-page)~* .page-tabs,body:has(.walk-page:not(.off-page)) .page-tabs{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
body:has(.walk-page:not(.off-page)) .topbar{background:transparent!important;box-shadow:none!important}
/* Walk map (Sophia 2026-10-13): a tidy, see-through top bar and a small walk box. */
body:has(.walk-page:not(.off-page)) .topbar{position:fixed;top:0;left:0;right:0;z-index:20;padding:calc(max(env(safe-area-inset-top),10px)) 12px 8px;margin:0;
  background:linear-gradient(#ffffffcc,#ffffff00)!important}
html[data-mode="dark"] body:has(.walk-page:not(.off-page)) .topbar{background:linear-gradient(#0b0c10cc,#0b0c1000)!important}
/* The fixed walk bar has the notch space as top padding, so centre the day/night pill on the button row, not the whole bar (Sophia 2026-10-19). */
body:has(.walk-page:not(.off-page)) .topbar .mode-pill{top:calc(50% + (max(env(safe-area-inset-top),10px) - 8px) / 2)}
.walk-page:not(.off-page) .walk-top{top:calc(max(env(safe-area-inset-top),10px) + 118px)}
.walk-page:not(.off-page) .walk-toast{top:calc(max(env(safe-area-inset-top),10px) + 166px)}
.walk-page:not(.off-page) .walk-history{top:calc(max(env(safe-area-inset-top),10px) + 166px)}
/* Small walk box: title + state on one line, three numbers, one button. */
.walk-page:not(.off-page) .walk-card{left:12px;right:12px;padding:10px 12px;border-radius:20px;bottom:calc(env(safe-area-inset-bottom) + 48px)}
.walk-page:not(.off-page) .walk-card h3{font-size:14px;margin:0}
.walk-page:not(.off-page) .walk-card .walk-state{font-size:11px;padding:3px 9px}
.walk-page:not(.off-page) .walk-card .walk-stats{gap:6px;margin-top:6px}
.walk-page:not(.off-page) .walk-card .walk-stats>div{padding:4px 2px;border-radius:12px}
.walk-page:not(.off-page) .walk-card .walk-stats small{font-size:10px}
.walk-page:not(.off-page) .walk-card .walk-stats strong{font-size:14px}
.walk-page:not(.off-page) .walk-card .walk-go{margin-top:6px;padding:8px;font-size:13px}
.walk-page:not(.off-page) .walk-card .walk-note{margin-top:4px}
/* Quick buttons (Sophia 2026-10-13): one rounded bar like the Duo's rail, but across the top and centred on every
   other device; it is only as wide as the buttons inside it. */
html:not([data-device^="duo"]) .page-tabs{width:max-content;max-width:calc(100% - 8px);margin:12px auto 8px!important;padding:6px!important;gap:6px;border-radius:28px;
  background:#fff!important;box-shadow:0 0 0 1px var(--line),0 8px 22px #0000001a!important;justify-content:flex-start}
html[data-mode="dark"]:not([data-device^="duo"]) .page-tabs{background:#121317!important;box-shadow:0 0 0 1px #ffffff12,0 8px 22px #0008!important}
html:not([data-device^="duo"]) .page-tabs a{height:42px}
body:has(.walk-page:not(.off-page)) .page-tabs{position:fixed!important;top:calc(max(env(safe-area-inset-top),10px) + 52px);left:50%;translate:-50% 0;margin:0!important;z-index:20;
  background:#ffffffe6!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
html[data-mode="dark"] body:has(.walk-page:not(.off-page)) .page-tabs{background:#121317e6!important}
/* Google 3D map in Fitagotchi's look (Sophia 2026-10-13): softer, pastel photo city washed in your Pettö's colour
   (or colour theme), a dreamy haze to the horizon, and a glowing ring at your feet like Pokémon Go. */
.walk-g3d gmp-map-3d{filter:saturate(.72) brightness(1.08) contrast(.9)}
.walk-g3d::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:soft-light;
  background:linear-gradient(color-mix(in srgb,var(--petto,#f3c95c) 55%,#fff),color-mix(in srgb,var(--petto,#f3c95c) 30%,#fff));opacity:.55}
.walk-g3d::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(#ffeef6e6 0%,#fff4f0b3 14%,#fff4f000 34%),radial-gradient(120% 60% at 50% 100%,#0000 60%,color-mix(in srgb,var(--petto,#f3c95c) 25%,#0000) 100%)}
html[data-theme]:not([data-mode="dark"]) .walk-g3d::before{background:linear-gradient(hsl(var(--th) 80% 85%),hsl(var(--th) 70% 92%))}
html[data-mode="dark"] .walk-g3d gmp-map-3d{filter:saturate(.6) brightness(.62) contrast(1.05) hue-rotate(-8deg)}
html[data-mode="dark"] .walk-g3d::before{background:linear-gradient(#3b4a9a,#1d2a5c);opacity:.7}
html[data-mode="dark"] .walk-g3d::after{background:linear-gradient(#0b1230f0 0%,#16234ab3 16%,#16234a00 38%),radial-gradient(120% 60% at 50% 100%,#0000 55%,#0b1230aa 100%)}
.walk-g3d-me{z-index:3}
.walk-g3d-me::before{content:"";position:absolute;left:50%;bottom:-4px;width:150px;height:46px;translate:-50% 0;border-radius:50%;z-index:-1;
  border:3px solid #ffffffd9;background:radial-gradient(closest-side,color-mix(in srgb,var(--petto,#f3c95c) 55%,#fff0),#fff0);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--petto,#f3c95c) 45%,#0000),0 0 24px color-mix(in srgb,var(--petto,#f3c95c) 70%,#0000);animation:g3dring 2.4s ease-in-out infinite}
@keyframes g3dring{50%{scale:1.08;opacity:.8}}
.walk-g3d-me .walk-me{filter:drop-shadow(0 10px 8px #0004)}
/* Move the map freely with finger or mouse; the page itself doesn't scroll while you do. */
.walk-page:not(.off-page) .walk-map{touch-action:none;overscroll-behavior:contain}
.walk-g3d gmp-map-3d,.walk-3d canvas{cursor:grab}
.walk-g3d gmp-map-3d:active,.walk-3d canvas:active{cursor:grabbing}
.walk-recentre{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom) + 200px);z-index:17;width:48px;height:48px;border-radius:50%;border:0;display:grid;place-items:center;
  background:#ffffffe6;color:var(--petto-deep,#c99a2e);box-shadow:0 6px 18px #0003;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:lootpop .35s both}
.walk-recentre[hidden]{display:none}
.walk-recentre svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
html[data-mode="dark"] .walk-recentre{background:#121317e6;color:#f5f2ea}
.walk-page:not(.off-page) .walk-recentre{position:fixed}
.walk-g3d-me{transition:opacity .3s}.walk-g3d-me.away{opacity:0}
/* 3D eggs on the walk map carry their own ground shadow (Sophia, 2026-10-13) */
.walk-egg{filter:none;width:48px;height:54px}
.walk-map-pin .walk-egg,.walk-3d-pin .walk-egg{width:48px;height:54px}
.walk-egg.golden{filter:drop-shadow(0 0 8px #ffd76a)}
.walk-egg.near{filter:drop-shadow(0 0 10px var(--accent))}
/* Liquid drain (Sophia, 2026-10-13): the screen pours into the switch like black liquid; the switch is a black plughole. */
.egg-dex.vortex{animation:none;background:transparent}
.egg-dex .dex-drain{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.egg-dex.vortex>*:not(.egg-dex-top):not(.dex-drain){animation:dexsuck 1.05s cubic-bezier(.55,0,.85,.35) forwards}
.egg-dex.vortex #dex-exit{background:#000!important;box-shadow:inset 0 3px 8px #ffffff14,0 0 0 2px #000,0 0 18px 6px #0009!important;animation:holegrow 1.4s cubic-bezier(.3,1.4,.5,1) forwards}
.egg-dex.vortex #dex-exit::before{inset:4px;background:conic-gradient(from 0deg,#000,#2a2a2e,#000 25%,#1c1c20,#000 50%,#2a2a2e,#000 75%,#1c1c20,#000);
  -webkit-mask:radial-gradient(circle,#000 0 30%,#0000 32%,#000 34% 70%,#0000 72%);mask:radial-gradient(circle,#000 0 30%,#0000 32%,#000 34% 70%,#0000 72%);animation:holespin .4s linear infinite}
@keyframes holegrow{0%{scale:1}25%{scale:1.5}80%{scale:1.35}92%{scale:1.6}100%{scale:0;opacity:0}}
/* Walk eggs sit ON the ground at their spot (Sophia, 2026-10-13: "on the ground and not floating"): the bottom of the
   egg (its shadow) is the exact spot, and they rock in place instead of bobbing up and down. */
.walk-egg{transform:translate(-50%,-87%);transform-origin:50% 87%;animation:wkeggrock 2.4s ease-in-out infinite}
@keyframes wkeggrock{0%,100%{transform:translate(-50%,-87%) rotate(-5deg)}50%{transform:translate(-50%,-87%) rotate(5deg)}}
.walk-egg.near{animation:wkeggrocknear .7s ease-in-out infinite}
@keyframes wkeggrocknear{0%,100%{transform:translate(-50%,-87%) rotate(-10deg) scale(1.08)}50%{transform:translate(-50%,-87%) rotate(10deg) scale(1.08)}}
.walk-plane .walk-egg{transform-origin:50% 87%}
.walk-map-pin .walk-egg,.walk-3d-pin .walk-egg{transform:none;animation:wkeggrockmap 2.4s ease-in-out infinite}
.walk-map-pin .walk-egg.near,.walk-3d-pin .walk-egg.near{animation:wkeggrockmapnear .7s ease-in-out infinite}
@keyframes wkeggrockmap{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
@keyframes wkeggrockmapnear{0%,100%{transform:rotate(-10deg) scale(1.08)}50%{transform:rotate(10deg) scale(1.08)}}
.walk-egg.catching{animation:walkcatch .9s ease-in forwards}
.walk-map-pin .walk-egg.catching,.walk-3d-pin .walk-egg.catching{animation:walkcatchmap .9s ease-in forwards}
@media(prefers-reduced-motion:reduce){.walk-egg,.walk-egg.near{animation:none!important}}
.egg-dex.vortex>.dex-drain{animation:none!important;transform:none!important}
/* PNG avatar studio: swipeable parts and colour pickers. */
.avatar canvas{width:47px;height:57px;max-width:none;transform:translateY(9px)}
.avatar-entry canvas{width:54px;height:65px;transform:translateY(7px)}
.avatar-dialog{width:min(920px,calc(100vw - 24px));max-height:92vh}
.avatar-layout{grid-template-columns:minmax(230px,.8fr) minmax(300px,1.2fr)}
.avatar-stage{min-height:480px;position:sticky;top:0}
.avatar-stage #avatar-live{display:block;width:min(100%,350px);height:auto;max-height:465px;filter:drop-shadow(0 12px 8px #7a5d4726)}
.avatar-controls{max-height:min(68vh,600px);overflow-y:auto}
.avatar-swipe-group{padding:4px 0 13px;border-bottom:1px solid #eeeae2}
.avatar-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.avatar-group-head h3{font:900 13px Nunito,sans-serif;margin:0}
.avatar-colour-label,.avatar-extra-colours label{display:flex;align-items:center;gap:7px;color:#62786a;font-size:11px;font-weight:800}
.avatar-colour-label input,.avatar-extra-colours input{width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer}
.avatar-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:3px calc(50% - 45px) 8px;overscroll-behavior-inline:contain;touch-action:pan-x;outline-offset:2px}
.avatar-rail::-webkit-scrollbar{display:none}
.avatar-rail-item{flex:0 0 90px;width:90px;min-height:112px;scroll-snap-align:center;display:grid;place-items:center;align-content:center;gap:4px;border:2px solid #e5e7df;border-radius:15px;background:#faf8f3;color:#667569;text-align:center;font-size:10px;font-weight:800;line-height:1.15}
.avatar-rail-item[aria-selected=true]{border-color:#73a887;background:#e9f4ea;color:#355e42;box-shadow:0 2px 8px #52765b25}
.avatar-rail-item img{display:block;width:75px;height:82px;object-fit:contain}
.avatar-empty{display:grid;place-items:center;width:75px;height:82px;font-size:27px;color:#b8c7b8}
.avatar-extra-colours{display:flex;flex-wrap:wrap;gap:9px 16px;padding:15px 0 2px}
@media(max-width:620px){.avatar-dialog{padding:18px}.avatar-layout{grid-template-columns:1fr;gap:8px}.avatar-stage{min-height:250px;position:relative}.avatar-stage #avatar-live{height:245px;width:auto}.avatar-controls{max-height:48vh}}
/* Google 3D in a cartoon look: flat pastel colour bands, soft drawn outlines, tinted in your Pettö's colour (Sophia 2026-10-13). */
.walk-toon-defs{position:absolute;width:0;height:0}
.walk-g3d gmp-map-3d{filter:url(#walk-toon) brightness(1.04)}
html[data-mode="dark"] .walk-g3d gmp-map-3d{filter:url(#walk-toon) brightness(.6) saturate(.9)}
.walk-g3d::before{opacity:.35}

/* Sign-up in the egg pages' style (Sophia, 2026-10-13: "make the sign up fit the websites vibe"): the same night sky
   with faint drifting orbs, glowing round pastel picks, egg-shaped step markers and soft glass fields. */
.profile-dialog.onboarding:not(.egg-dark){background:radial-gradient(circle at 50% 30%,#2b2630,#18191e 50%,#101114 88%)}
.profile-dialog.onboarding:not(.egg-dark)::before{content:"";position:fixed;inset:-40px;pointer-events:none;z-index:-1;opacity:.55;background:
  radial-gradient(circle,#f5c9dc33 0 3px,transparent 4px) 0 0/140px 140px,
  radial-gradient(circle,#cfe8f52e 0 2px,transparent 3px) 70px 50px/110px 110px,
  radial-gradient(circle,#d9c8fb30 0 4px,transparent 5px) 30px 90px/190px 190px;animation:signsky 40s linear infinite}
@keyframes signsky{to{background-position:140px -280px,180px -170px,220px -290px}}
.profile-dialog.onboarding .profile-steps li{border:0;position:relative;padding-top:20px;text-align:center;letter-spacing:.12em}
.profile-dialog.onboarding .profile-steps li::before{content:"";position:absolute;top:0;left:50%;width:12px;height:15px;margin-left:-6px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;background:#2e2e35;transition:background .4s,box-shadow .4s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.profile-dialog.onboarding .profile-steps li.current::before{background:#f5f2ea;box-shadow:0 0 14px #f5f2ea88;transform:scale(1.25)}
.profile-dialog.onboarding legend{font-size:20px;letter-spacing:-.02em;text-align:center;width:100%;margin-bottom:14px}
.profile-dialog.onboarding :is(input:not([type=checkbox]):not([type=radio]),select){border-radius:999px;padding:13px 18px;background:#ffffff0a;border-color:#ffffff12;box-shadow:inset 0 1px 0 #ffffff0d}
.profile-dialog.onboarding :is(input,select):focus{border-color:#f5c9dc66;box-shadow:0 0 0 4px #f5c9dc1a,0 0 22px #f5c9dc22}
.profile-dialog.onboarding .focus-chip span{border-radius:999px;padding:9px 15px;background:#ffffff0a}
.profile-dialog.onboarding .focus-chip:nth-child(1) input:checked+span{--g:#ffc9a8}
.profile-dialog.onboarding .focus-chip:nth-child(2) input:checked+span{--g:#d9c8fb}
.profile-dialog.onboarding .focus-chip:nth-child(3) input:checked+span{--g:#bfe3fa}
.profile-dialog.onboarding .focus-chip:nth-child(4) input:checked+span{--g:#c6efd5}
.profile-dialog.onboarding .focus-chip:nth-child(5) input:checked+span{--g:#f8c3d8}
.profile-dialog.onboarding .focus-chip input:checked+span{border-color:var(--g);color:var(--g);background:color-mix(in srgb,var(--g) 12%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--g) 30%,transparent)}
.profile-dialog.onboarding .agree-terms input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #ffffff40;background:#ffffff0a;display:grid;place-items:center;cursor:pointer;flex:none}
.profile-dialog.onboarding .agree-terms input:checked{background:#f5f2ea;border-color:#f5f2ea;box-shadow:0 0 14px #f5f2ea66}
.profile-dialog.onboarding .agree-terms input:checked::after{content:"✓";color:#101114;font-weight:900;font-size:13px}
.profile-dialog.onboarding .goal-grid label{background:#ffffff06;border:1px solid #ffffff0d;border-radius:22px;padding:12px}
/* Female / Male: two glowing orbs like the egg reel; the chosen one lights up and bobs. */
.look-pick{margin:6px 0 20px;text-align:center}
.look-pick .field-label{text-align:center}
.look-cards{display:flex;justify-content:center;gap:clamp(18px,7vw,44px);margin:10px 0 12px}
.look-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;background:none;padding:0;color:#77767c;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.look-card b{font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:color .3s}
.look-orb{display:grid;place-items:end center;overflow:hidden;width:clamp(112px,32vw,148px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#25232a,#0b0c0f 70%);box-shadow:0 0 0 1px #ffffff10;transition:box-shadow .4s,transform .45s cubic-bezier(.34,1.56,.64,1),filter .4s;filter:saturate(.55) brightness(.75)}
.look-orb canvas{width:92%;height:auto;transform:translateY(16%)}
.look-card:hover .look-orb{transform:translateY(-3px)}
.look-card[aria-checked="true"] b{color:#f5f2ea}
.look-card[aria-checked="true"] .look-orb{filter:none;background:radial-gradient(circle at 50% 40%,#fbeaf2,#e9dcfb 60%,#cfe8f5);box-shadow:0 0 0 2px #f5f2ea,0 0 34px #f5c9dc66,0 0 70px #d9c8fb44;animation:lookbob 3s ease-in-out infinite}
@keyframes lookbob{50%{transform:translateY(-5px)}}
.look-card.picked .look-orb{animation:lookhop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes lookhop{20%{transform:scale(1.08,.9)}50%{transform:translateY(-14px) scale(.96,1.05)}100%{transform:none}}
.look-spark{position:absolute;left:50%;top:42%;font-style:normal;font-size:16px;color:#f5c9dc;pointer-events:none;text-shadow:0 0 8px #f5c9dc;animation:lookspark .8s ease-out forwards}
.look-spark:nth-of-type(3n){color:#d9c8fb}.look-spark:nth-of-type(3n+1){color:#cfe8f5}
@keyframes lookspark{from{transform:translate(-50%,-50%) scale(.4);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1);opacity:0}}
.look-dress{border:1px solid #ffffff22;border-radius:999px;background:#ffffff0a;color:#f5f2ea;font:inherit;font-size:13px;font-weight:800;padding:9px 18px;cursor:pointer;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.look-dress:hover{transform:translateY(-2px);box-shadow:0 0 18px #f5c9dc33}
.look-dress span{color:#f5c9dc}
.profile-dialog:not(.onboarding) .look-card b{color:inherit}
@media(prefers-reduced-motion:reduce){.profile-dialog.onboarding::before,.look-card .look-orb{animation:none!important}}
.profile-dialog .look-card{background:none!important;box-shadow:none!important;padding:0!important;min-height:0;width:auto;margin:0}
.profile-dialog .look-dress{background:#ffffff0a!important;color:#f5f2ea!important;margin:0 auto!important}
.profile-dialog:not(.onboarding) .look-dress{background:#f3eef7!important;color:#4a3c50!important;border-color:#e6dcec}
.profile-dialog.onboarding:not(.egg-dark)::before{opacity:.3}
.profile-dialog.onboarding .look-card b{color:#8d8c93!important}
.profile-dialog.onboarding .look-card[aria-checked="true"] b{color:#f5f2ea!important}
.profile-dialog.onboarding fieldset>label.agree-terms{display:flex!important;flex-direction:row!important;align-items:center;gap:10px}
/* The avatar maker right inside sign-up step 2 (Sophia, 2026-10-13): the Female/Male orbs are its live preview. */
.look-maker{margin-top:14px;text-align:left}
.look-maker .field-label{text-align:center}
.look-maker .avatar-controls{max-height:none;overflow:visible;padding:0}
.look-maker .avatar-swipe-group:has([data-category="look"]){display:none}
.look-maker .avatar-swipe-group{border-bottom:0;padding:6px 0 10px}
.look-maker .avatar-rail{padding-inline:calc(50% - 45px)}
.profile-dialog.onboarding .look-maker .avatar-group-head h3{color:#f5f2ea}
.profile-dialog.onboarding .look-maker .avatar-rail-item{border-color:#ffffff12;background:#ffffff0a;color:#aaa9ad;border-radius:22px;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .3s,box-shadow .3s}
.profile-dialog.onboarding .look-maker .avatar-rail-item[aria-selected=true]{border-color:#f5c9dc;background:#f5c9dc14;color:#f5f2ea;box-shadow:0 0 18px #f5c9dc33;transform:scale(1.05)}
.profile-dialog.onboarding .look-maker .avatar-rail-item img{filter:drop-shadow(0 0 1px #ffffff55)}
.profile-dialog.onboarding .look-maker :is(.avatar-colour-label,.avatar-extra-colours label){color:#aaa9ad}
.profile-dialog.onboarding .look-maker input[type=color]{border-radius:50%;overflow:hidden;width:30px;height:30px}
.look-maker .avatar-extra-colours{justify-content:center}
.profile-dialog.onboarding .look-maker input[type=color]{padding:0!important;border:2px solid #ffffff30!important;border-radius:50%!important;background:none!important;box-shadow:none!important;min-height:0;width:30px;height:30px}
.look-maker input[type=color]::-webkit-color-swatch-wrapper{padding:0}.look-maker input[type=color]::-webkit-color-swatch{border:0;border-radius:50%}
/* Your little you stays in view while you scroll through the styles. */
.look-pick .look-cards{position:sticky;top:-28px;z-index:3;padding:10px 0 12px;margin-inline:-20px;background:linear-gradient(#18191ef2 78%,#18191e00)}
.profile-dialog:not(.onboarding) .look-pick .look-cards{position:static;background:none;margin-inline:0}
.profile-dialog.onboarding .look-pick .look-cards{background:linear-gradient(#17181d 88%,#17181d00);padding-bottom:22px}
.profile-dialog:not(.onboarding) .look-card,.profile-dialog:not(.onboarding) .look-card b{color:inherit!important}
/* The avatar creator, first in sign-up step 2 and in the profile (Sophia, 2026-10-13). */
.studio-frame{margin:4px 0 22px;border-radius:28px;overflow:hidden;border:1px solid #ffffff14;background:#101114;box-shadow:0 20px 50px #00000055}
.studio-frame iframe{display:block;width:100%;height:min(78vh,700px);border:0;background:#101114}
.profile-dialog.onboarding .studio-frame{margin-inline:-8px}
#profile-button img.studio-picture{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:inherit;transform:scale(1.6);transform-origin:50% 18%}
/* Profile: a card with your little you and "Edit"; the creator pops out over the profile (Sophia, 2026-10-13). */
.studio-card{display:flex;align-items:center;gap:12px;margin:4px 0 18px;padding:10px 12px;border-radius:22px;border:1px solid #ffffff14;background:#ffffff08}
.studio-card-pic{display:grid;place-items:center;overflow:hidden;width:64px;height:64px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fbeaf2,#e9dcfb 60%,#cfe8f5)}
.studio-card-pic img{width:100%;height:100%;object-fit:cover;object-position:50% 8%;transform:scale(1.5);transform-origin:50% 10%}
.studio-card div{flex:1;min-width:0}.studio-card strong,.studio-card small{display:block}.studio-card small{opacity:.65;font-size:12px;margin-top:2px}
.studio-card button{margin:0!important;border-radius:999px!important;padding:9px 18px!important;background:#f5f2ea!important;color:#101114!important;font-weight:800;box-shadow:0 0 18px #f5f2ea33}
.profile-dialog.onboarding .studio-card,.studio-done{display:none}
.profile-dialog:not(.onboarding) .studio-frame{display:none}
.profile-dialog:not(.onboarding) .studio-frame.popped{display:block;position:fixed;z-index:60;inset:max(14px,3vh) max(10px,calc(50% - 320px));margin:0;box-shadow:0 0 0 100vmax #000000b3,0 30px 80px #000;animation:studiopop .45s cubic-bezier(.34,1.4,.64,1)}
.studio-frame.popped iframe{height:100%}
.studio-frame.popped .studio-done{display:block;position:absolute;top:12px;right:12px;z-index:2;margin:0!important;border-radius:999px!important;padding:9px 18px!important;background:#f5f2ea!important;color:#101114!important;font-weight:800;box-shadow:0 0 18px #f5f2ea44}
@keyframes studiopop{from{transform:scale(.85) translateY(30px);opacity:0}}
/* Profile picture only: a round picture of your little you; tap it to change it (Sophia, 2026-10-13). */
.studio-card{justify-content:center;border:0;background:none;padding:0;margin:6px 0 20px}
.studio-card #edit-avatar{position:relative;width:118px;height:118px;padding:0!important;border-radius:50%!important;background:none!important;box-shadow:none!important;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.studio-card #edit-avatar:hover{transform:scale(1.05)}
.studio-card .studio-card-pic{width:118px;height:118px;box-shadow:0 0 0 3px #f5f2ea,0 0 30px #f5c9dc55}
.studio-card .studio-card-pic:empty::after{content:"✦";font-size:34px;color:#8d8c93}
.studio-card #edit-avatar i{position:absolute;right:2px;bottom:4px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:16px;background:#f5f2ea;color:#101114;box-shadow:0 0 0 3px #18191e}
.profile-dialog:not(.onboarding) .studio-frame.popped{display:flex;flex-direction:column;background:#101114}
.studio-frame.popped iframe{flex:1;min-height:0;height:auto}
.studio-frame.popped .studio-done{position:static;flex:none;align-self:stretch;margin:6px 14px 14px!important;padding:13px!important;font-size:15px}
/* Save shows under the creator in sign-up too (Sophia, 2026-10-13: "no way to save it?"). */
.profile-dialog.onboarding .studio-done{display:block;width:calc(100% - 28px);margin:10px 14px 14px!important;padding:13px!important;border-radius:999px!important;background:#f5f2ea!important;color:#101114!important;font-size:15px;font-weight:800;box-shadow:0 0 18px #f5f2ea33}
.studio-done.saved{background:#c6efd5!important;transform:scale(1.03);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.profile-dialog .studio-frame .studio-done.saved{background:#c6efd5!important}
/* The saved picture now has room round the character: zoom in on the face. */
.studio-card-pic img,#profile-button img.studio-picture{object-fit:cover;object-position:50% 38%;transform:scale(2);transform-origin:50% 36%}
/* Face and shoulders in the round pictures, not just the face (Sophia, 2026-10-13). */
.studio-card-pic img,#profile-button img.studio-picture{object-position:50% 40%;transform:scale(1.45);transform-origin:50% 40%}
/* A taller window for the creator so big hair has room (Sophia, 2026-10-13). */
.studio-frame iframe{height:min(88vh,860px)}
.profile-dialog:not(.onboarding) .studio-frame.popped{inset:max(10px,2vh) max(8px,calc(50% - 360px))}

/* Sign-up step 2 shows the creator itself; the profile shows only the round picture, which opens it as a pop-out.
   Either way "Save avatar" then lets you place the picture in its circle (Sophia, 2026-10-13). */
.profile-dialog:not(.onboarding) .studio-frame{display:none}
.profile-dialog.onboarding .studio-frame{position:relative}
.profile-dialog .studio-frame.popped{display:flex;flex-direction:column;position:fixed;z-index:60;inset:max(10px,2vh) max(8px,calc(50% - 360px));margin:0;border-radius:28px;overflow:hidden;background:#101114;box-shadow:0 0 0 100vmax #000000b3,0 30px 80px #000;animation:studiopop .45s cubic-bezier(.34,1.4,.64,1)}
.profile-dialog .studio-frame.popped .studio-done{display:block;position:static;flex:none;align-self:stretch;width:auto;margin:6px 14px 14px!important;padding:13px!important;border-radius:999px!important;background:#f5f2ea!important;color:#101114!important;font-size:15px;font-weight:800;box-shadow:0 0 18px #f5f2ea33}
.studio-card-pic img.studio-picture,#profile-button img.studio-picture,.place-circle img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;transform:translate(var(--cx,0%),var(--cy,4.5%)) scale(var(--cz,1.45));transform-origin:50% 50%}
.place-step{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:#101114;color:#f5f2ea;text-align:center;animation:studiopop .35s cubic-bezier(.34,1.4,.64,1)}
.place-step[hidden]{display:none}
.place-step h3{margin:0;font-size:22px;color:#f5f2ea}.place-step p{margin:0 0 8px;color:#aaa9ad;font-size:13px}
.place-circle{width:min(240px,62vw);aspect-ratio:1;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#fbeaf2,#e9dcfb 60%,#cfe8f5);box-shadow:0 0 0 3px #f5f2ea,0 0 40px #f5c9dc55;cursor:grab;touch-action:none}
.place-circle.dragging{cursor:grabbing}.place-circle img{pointer-events:none;user-select:none}
.place-zoom{display:flex;align-items:center;gap:12px;width:min(260px,70vw);color:#aaa9ad;font-weight:800}
.place-zoom input{flex:1;accent-color:#f5c9dc}
.place-actions{display:flex;gap:10px;width:min(320px,100%);margin-top:6px}
.place-actions button{flex:1;margin:0!important;padding:13px!important;border-radius:999px!important;font-size:15px;font-weight:800;cursor:pointer;border:1px solid #ffffff22!important;background:#ffffff0a!important;color:#f5f2ea!important}
.place-actions #place-save{background:#f5f2ea!important;color:#101114!important;border:0!important;box-shadow:0 0 18px #f5f2ea33}
.place-actions #place-save.saved{background:#c6efd5!important}
/* A moving step would hold the pop-out window inside it; keep it still while the window is open. */
.profile-dialog .profile-step:has(.studio-frame.popped){transform:none!important;animation:none!important;filter:none!important}
.place-circle{flex:none}
/* A bigger round picture (Sophia, 2026-10-13). */
.studio-card #edit-avatar,.studio-card .studio-card-pic{width:168px;height:168px}
.studio-card #edit-avatar i{width:40px;height:40px;font-size:18px;right:6px;bottom:8px}
.place-circle{width:min(280px,70vw)}

/* The profile looks like sign-up and holds the same details, ready to edit (Sophia, 2026-10-13). */
.profile-dialog:not(.onboarding){background:radial-gradient(circle at 50% 30%,#2b2630,#18191e 50%,#101114 88%);color:#f8f5ed;border:1px solid #ffffff14}
.profile-dialog:not(.onboarding){background:radial-gradient(circle at 50% 46%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed}
.profile-dialog:not(.onboarding) h2{color:#f8f5ed;text-align:center;margin-bottom:12px}
.profile-dialog:not(.onboarding) .eyebrow{display:block;text-align:center;color:#aaa9ad;background:none}
.profile-dialog:not(.onboarding) .profile-lede{text-align:center;color:#aaa9ad}
.profile-dialog:not(.onboarding) p{color:#aaa9ad}
.profile-dialog:not(.onboarding) .profile-steps li{border-color:#2e2e35;color:#77767c}
.profile-dialog:not(.onboarding) .profile-steps li.current{border-color:#f5f2ea;color:#f5f2ea}
.profile-dialog:not(.onboarding) legend{color:#f8f5ed}
.profile-dialog:not(.onboarding) :is(fieldset>label:not(.check-row),.field-label){color:#aaa9ad}
.profile-dialog:not(.onboarding) :is(legend small,label small,.field-label small){color:#6f6e75}
.profile-dialog:not(.onboarding) :is(input:not([type=checkbox]):not([type=radio]),select){border:1px solid #ffffff14;border-radius:14px;background:#090a0d;color:#f5f2ea;color-scheme:dark;transition:border-color .2s,box-shadow .3s}
.profile-dialog:not(.onboarding) :is(input,select)::placeholder{color:#6f6e75}
.profile-dialog:not(.onboarding) :is(input,select):focus{border-color:#ffffff40;box-shadow:0 0 0 4px #ffffff0d}
.profile-dialog:not(.onboarding) .focus-chip span{border-color:#ffffff14;background:#090a0d;color:#aaa9ad;transition:border-color .2s,color .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.profile-dialog:not(.onboarding) .focus-chip input:checked+span{border-color:#f5f2ea;background:#090a0d;color:#fff;transform:scale(1.06)}
.profile-dialog:not(.onboarding) .profile-actions{justify-content:center}
.profile-dialog:not(.onboarding) form .secondary-button{background:#ffffff12;color:#f5f2ea}
.profile-dialog:not(.onboarding) form .profile-actions .text-button{color:#77767c}
.profile-dialog:not(.onboarding) .close{color:#aaa9ad}
.profile-dialog:not(.onboarding) .profile-actions button:not(.secondary-button):not(.text-button){background:#f5f2ea;color:#101114;box-shadow:0 0 24px #f5f2ea22}
.profile-dialog:not(.onboarding) .profile-steps li{border:0;position:relative;padding-top:20px;text-align:center;letter-spacing:.12em}
.profile-dialog:not(.onboarding) legend{font-size:20px;letter-spacing:-.02em;text-align:center;width:100%;margin-bottom:14px}
.profile-dialog:not(.onboarding) :is(input:not([type=checkbox]):not([type=radio]),select){border-radius:999px;padding:13px 18px;background:#ffffff0a;border-color:#ffffff12;box-shadow:inset 0 1px 0 #ffffff0d}
.profile-dialog:not(.onboarding) :is(input,select):focus{border-color:#f5c9dc66;box-shadow:0 0 0 4px #f5c9dc1a,0 0 22px #f5c9dc22}
.profile-dialog:not(.onboarding) .focus-chip span{border-radius:999px;padding:9px 15px;background:#ffffff0a}
.profile-dialog:not(.onboarding) .focus-chip:nth-child(1) input:checked+span{--g:#ffc9a8}
.profile-dialog:not(.onboarding) .focus-chip:nth-child(2) input:checked+span{--g:#d9c8fb}
.profile-dialog:not(.onboarding) .focus-chip:nth-child(3) input:checked+span{--g:#bfe3fa}
.profile-dialog:not(.onboarding) .focus-chip:nth-child(4) input:checked+span{--g:#c6efd5}
.profile-dialog:not(.onboarding) .focus-chip:nth-child(5) input:checked+span{--g:#f8c3d8}
.profile-dialog:not(.onboarding) .focus-chip input:checked+span{border-color:var(--g);color:var(--g);background:color-mix(in srgb,var(--g) 12%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--g) 30%,transparent)}
.profile-dialog:not(.onboarding) .agree-terms input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #ffffff40;background:#ffffff0a;display:grid;place-items:center;cursor:pointer;flex:none}
.profile-dialog:not(.onboarding) .agree-terms input:checked{background:#f5f2ea;border-color:#f5f2ea;box-shadow:0 0 14px #f5f2ea66}
.profile-dialog:not(.onboarding) .agree-terms input:checked::after{content:"✓";color:#101114;font-weight:900;font-size:13px}
.profile-dialog:not(.onboarding) .goal-grid label{background:#ffffff06;border:1px solid #ffffff0d;border-radius:22px;padding:12px}
.profile-dialog:not(.onboarding) fieldset>label.agree-terms{display:flex!important;flex-direction:row!important;align-items:center;gap:10px}
.profile-dialog:not(.onboarding){border:1px solid #ffffff1a!important;box-shadow:0 30px 80px #000000aa!important}
/* Light mode: the profile is light and wears your Pettö's colours (Sophia, 2026-10-13). */
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding){--pp:var(--petto,#f5b94e);--pd:var(--petto-deep,#a76c1c);--ink:color-mix(in srgb,var(--pd) 55%,#2a2530);background:linear-gradient(165deg,color-mix(in srgb,var(--pp) 26%,#fff),#fffdf9 48%,color-mix(in srgb,var(--pp) 14%,#fff))!important;color:var(--ink);border:1px solid color-mix(in srgb,var(--pp) 45%,#fff)!important;box-shadow:0 30px 80px color-mix(in srgb,var(--pd) 30%,transparent)!important}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(h2,h3,legend){color:var(--ink)!important}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(.eyebrow,p,.profile-lede,fieldset>label:not(.check-row),.field-label,.close){color:color-mix(in srgb,var(--pd) 35%,#6d6670)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(legend small,label small,.field-label small){color:color-mix(in srgb,var(--pd) 30%,#9a939d)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){background:#fff;border:1px solid color-mix(in srgb,var(--pp) 50%,#fff);color:#2a2530}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(input,select)::placeholder{color:#aaa3ad}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) :is(input,select):focus{border-color:var(--pd);box-shadow:0 0 0 4px color-mix(in srgb,var(--pp) 30%,transparent)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .focus-chip span{background:#fff;border-color:color-mix(in srgb,var(--pp) 45%,#fff);color:color-mix(in srgb,var(--pd) 40%,#6d6670)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .focus-chip input:checked+span{--g:var(--pd);background:color-mix(in srgb,var(--pp) 30%,#fff);border-color:var(--pd);color:var(--pd);box-shadow:0 0 14px color-mix(in srgb,var(--pp) 45%,transparent)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .agree-terms input{border-color:color-mix(in srgb,var(--pd) 45%,#fff);background:#fff}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .agree-terms input:checked{background:var(--pd);border-color:var(--pd);box-shadow:0 0 12px color-mix(in srgb,var(--pp) 60%,transparent)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .agree-terms input:checked::after{color:#fff}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .goal-grid label{background:#ffffffb8;border-color:color-mix(in srgb,var(--pp) 35%,#fff)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .profile-actions button:not(.secondary-button):not(.text-button){background:var(--pd)!important;color:#fff!important;box-shadow:0 8px 24px color-mix(in srgb,var(--pd) 35%,transparent)!important}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) form .secondary-button{background:color-mix(in srgb,var(--pp) 22%,#fff);color:var(--ink)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .studio-card .studio-card-pic{box-shadow:0 0 0 4px #fff,0 0 0 6px var(--pp),0 10px 30px color-mix(in srgb,var(--pp) 55%,transparent)}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .studio-card #edit-avatar i{background:var(--pd);color:#fff;box-shadow:0 0 0 3px #fff}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .profile-data{border-color:color-mix(in srgb,var(--pp) 35%,#fff)}
/* A tidy top: small label, title, then straight onto your picture (Sophia, 2026-10-13: "the first header looks messy"). */
.profile-dialog:not(.onboarding){outline:none}
.profile-dialog:not(.onboarding) #profile-eyebrow{display:block;text-align:center;margin:6px 0 2px;font-size:11px;letter-spacing:.2em}
.profile-dialog:not(.onboarding) #profile-title{text-align:center;margin:0 0 6px;font-size:28px;letter-spacing:-.02em}
.profile-dialog:not(.onboarding) .profile-step[data-step="1"]>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.profile-dialog:not(.onboarding) .close{position:absolute;top:16px;right:16px;width:36px;height:36px;display:grid;place-items:center;padding:0;border-radius:50%;font-size:20px;line-height:1;background:#ffffff12;border:0}
html:not([data-mode="dark"]) .profile-dialog:not(.onboarding) .close{background:color-mix(in srgb,var(--pp) 25%,#fff);color:var(--ink)}
.profile-dialog:not(.onboarding) .studio-card{margin-top:14px}
/* Phones: a cleaner, smaller header, quick-button bar and pages; the folded Duo keeps its side rail (Sophia, 2026-10-13: "looks to big", "needs to look clean"). */
@media (max-width:480px){
  html:not([data-device^="duo"]) .topbar{gap:8px!important}
  html:not([data-device^="duo"]) .mode-pill{padding:0 4px 0 0!important;gap:2px!important}
  html:not([data-device^="duo"]) .theme-toggle{width:22px!important;height:22px!important}
  html:not([data-device^="duo"]) .theme-dot{width:16px!important;height:16px!important}
  html:not([data-device^="duo"]) .page-tabs{padding:4px!important;gap:6px!important}
  html:not([data-device^="duo"]) .page-tabs a{height:36px!important;min-width:40px!important;padding:0 10px!important}
  html:not([data-device^="duo"]) .page-tabs a svg{width:18px!important;height:18px!important}
  html:not([data-device^="duo"]) .page-tabs a[aria-current]{padding:0 14px 0 10px!important}
  html:not([data-device^="duo"]) .welcome .eyebrow{font-size:10px!important}
  html:not([data-device^="duo"]) .welcome h1{font-size:23px!important}
  html:not([data-device^="duo"]) .welcome p{font-size:14px!important}
  html:not([data-device^="duo"]) main{padding:12px!important}
  html:not([data-device^="duo"]) .card-top{padding:0 16px!important}
  html:not([data-device^="duo"]) .room-tabs{padding:0 14px!important;gap:6px!important}
  html:not([data-device^="duo"]) .room-tabs button{width:34px!important;height:34px!important}
  html:not([data-device^="duo"]) .room-tabs button svg{width:17px!important;height:17px!important}
  html:not([data-device^="duo"]) #pet-title{font-size:24px!important}
}
/* The header's round picture shows the whole face, centred. */
#profile-button>canvas{position:static!important;inset:auto!important;width:100%!important;height:100%!important;object-fit:cover;object-position:50% 14%;transform:scale(1.25);transform-origin:50% 20%}
/* Five focuses at most: the others dim until one is unticked. */
.focus-chip.full span{opacity:.35;cursor:not-allowed}
/* The new focuses glow in the same pastel set, in turn. */
.profile-dialog.onboarding .focus-chip:nth-child(6) input:checked+span{--g:#ffc9a8}
.profile-dialog.onboarding .focus-chip:nth-child(7) input:checked+span{--g:#d9c8fb}
.profile-dialog.onboarding .focus-chip:nth-child(8) input:checked+span{--g:#bfe3fa}
.profile-dialog.onboarding .focus-chip:nth-child(9) input:checked+span{--g:#c6efd5}
.profile-dialog.onboarding .focus-chip:nth-child(10) input:checked+span{--g:#f8c3d8}
.profile-dialog.onboarding .focus-chip:nth-child(11) input:checked+span{--g:#ffc9a8}
.profile-dialog.onboarding .focus-chip:nth-child(12) input:checked+span{--g:#d9c8fb}
.profile-dialog.onboarding .focus-chip:nth-child(13) input:checked+span{--g:#bfe3fa}
/* The Pettodex fades in and out smoothly (Sophia, 2026-10-13). */
.egg-dex:not([hidden]){animation:dexfadein .42s ease both}
.egg-dex.fading{animation:dexfadeout .42s ease forwards}
@keyframes dexfadein{from{opacity:0;transform:scale(1.02)}}
@keyframes dexfadeout{to{opacity:0;transform:scale(.98)}}
@media(prefers-reduced-motion:reduce){.egg-dex:not([hidden]),.egg-dex.fading{animation:none}}
/* The open iPhone Duo uses the same right-hand menu as the folded one (Sophia 2026-10-13), which also keeps the avatar clear of its camera. */
/* Sign-up "You" step (Sophia 2026-10-14): avatar maker first; after "Save avatar" it folds into the round picture
   (tap to open it again) and the name fields appear. */
.profile-dialog.onboarding:not(.avatar-set) .profile-step[data-step="1"]>label{display:none}
.profile-dialog.onboarding.avatar-set .studio-frame:not(.popped){display:none}
.profile-dialog.onboarding.avatar-set .studio-card{display:flex;animation:studiopop .45s cubic-bezier(.34,1.4,.64,1)}
.profile-dialog.onboarding.avatar-set .profile-step[data-step="1"]>label{animation:dexfadein .42s ease both}
/* "Explore while you wait" in the menu bar's look (Sophia 2026-10-14): charcoal pill, hairline ring, line icon. */
.egg-wait-bottom button,.egg-wait.ready .egg-wait-bottom button{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px 0 18px;border-radius:999px;background:#121317;color:#f5f2ea;box-shadow:0 0 0 1px #ffffff12,0 8px 22px #0008;font-weight:800;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.egg-wait-bottom button svg{flex:none;color:#ffd76a}
.egg-wait-bottom button:hover{background:#1b1c21;transform:scale(1.04)}
/* Sign-up buttons in the menu bar's look (Sophia 2026-10-14): round pills; the main step is cream like the open
   menu tab, everything else charcoal with a hairline ring. */
.profile-dialog.onboarding .profile-actions button:not(.text-button),.profile-dialog .studio-done,.profile-dialog .place-actions button{height:48px;min-width:110px;padding:0 26px!important;border:0;border-radius:999px!important;font-size:15px;font-weight:800;transition:transform .25s cubic-bezier(.34,1.56,.64,1),background .2s}
.profile-dialog.onboarding .profile-actions button:not(.secondary-button):not(.text-button),.profile-dialog .studio-done,.profile-dialog #place-save{background:#f5f2ea!important;color:#101114!important;box-shadow:0 8px 22px #0008!important}
.profile-dialog.onboarding .profile-actions .secondary-button,.profile-dialog #place-back{background:#121317!important;color:#f5f2ea!important;box-shadow:0 0 0 1px #ffffff12,0 8px 22px #0008!important}
.profile-dialog.onboarding .profile-actions button:not(.text-button):hover,.profile-dialog .studio-done:hover,.profile-dialog .place-actions button:hover{transform:scale(1.04)}
.profile-dialog.onboarding .profile-actions .secondary-button:hover,.profile-dialog #place-back:hover{background:#1b1c21!important}
/* iPhone Duo on the walk: the menu stays down the right side, like every other page (Sophia 2026-10-14) */
html[data-device^="duo"] body:has(.walk-page:not(.off-page)) .page-tabs{top:76px!important;left:auto!important;right:8px!important;bottom:12px!important;translate:none!important}
html[data-device^="duo"] .walk-page:not(.off-page) .walk-top{top:calc(max(env(safe-area-inset-top),10px) + 64px);padding-right:74px}
html[data-device^="duo"] .walk-page:not(.off-page) :is(.walk-card,.walk-history){right:74px}
html[data-device^="duo"] .walk-page:not(.off-page) .walk-recentre{right:74px}
/* Sign-up step 2: the avatar maker fills the page until you save it, then your name and Next show,
   so the avatar can't be skipped (Sophia 2026-10-14) */
.profile-dialog.onboarding:not(.avatar-set) .profile-step[data-step="1"]:not([hidden]) .studio-frame{position:fixed;z-index:60;inset:0;margin:0;border:0;border-radius:0;display:flex;flex-direction:column;background:#101114;box-shadow:none}
.profile-dialog.onboarding:not(.avatar-set) .profile-step[data-step="1"]:not([hidden]) .studio-frame iframe{flex:1;min-height:0;height:auto}
.profile-dialog.onboarding:not(.avatar-set) .profile-step[data-step="1"]:not([hidden]) .studio-frame .studio-done{flex:none;width:auto;max-width:420px;align-self:center;min-width:min(320px,calc(100% - 28px));margin:6px 14px calc(14px + env(safe-area-inset-bottom))!important}
.profile-dialog.onboarding:not(.avatar-set):has(.profile-step[data-step="1"]:not([hidden])) :is(.profile-step[data-step="1"],form,.profile-steps-wrap){transform:none!important;animation:none!important;filter:none!important;contain:none!important}
.profile-dialog.onboarding:not(.avatar-set):has(.profile-step[data-step="1"]:not([hidden])) .profile-actions{display:none!important}

/* Profile avatar editor fills the screen like the sign-up one, so the avatar is big (Sophia 2026-10-15). */
.profile-dialog .studio-frame.popped{inset:0!important;border-radius:0!important;box-shadow:none!important}
.profile-dialog .studio-frame.popped iframe{flex:1;min-height:0;height:auto!important}
.profile-dialog .studio-frame.popped .studio-done{max-width:420px;align-self:center!important;min-width:min(320px,calc(100% - 28px));margin:6px 14px calc(14px + env(safe-area-inset-bottom))!important}
/* Safari keeps the pop-out editor inside the profile window's box (the window scrolls), so on a wide screen only a slice
   of your little you showed, zoomed in. While the editor is open the window itself fills the screen (Sophia 2026-10-21). */
.profile-dialog:has(.studio-frame.popped){width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0!important;border-radius:0;overflow:hidden;transform:none!important;animation:none!important}

/* Lumi's Aurora egg is shown in the Pettodex (Sophia 2026-10-15): always in its aurora colours, shimmering. The bulge never gets selected or dragged while you slide it up. */
.egg-cell.locked .egg-shell,.egg-tile.locked .egg-shell,.egg-hero.locked .egg-shell{fill:#6954c5;stroke:#322672;animation:auroraShell 10s ease-in-out infinite}
.egg-cell.locked .egg-shine,.egg-tile.locked .egg-shine{display:block;fill:#9af6ee;animation:auroraShine 10s ease-in-out infinite}
.egg-tile.locked .egg-art{filter:none;opacity:1}.egg-tile.locked strong{color:#cfc3ff}
.menu-bulge{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}

/* The lava stays hidden (Sophia, 2026-10-15: "only pop up when we slide up from the bottom"). An invisible strip along the
   bottom edge catches the slide; the lava only shows while you pull it up and once the drop has popped. */
.menu-lava{transition:opacity .25s}
.menu-lava:not(.pulling):not(.popped){opacity:0}
html .menu-bulge#menu-bulge{left:0;right:0;width:100%;margin-left:0;height:26px;padding:0;border-radius:0;opacity:0;background:transparent!important;box-shadow:none!important;transform:none!important}
html .menu-bulge#menu-bulge:focus-visible{opacity:1;outline:2px solid currentColor;outline-offset:-4px}
/* iPhone app fills the whole screen (Sophia 2026-10-18): keep the top bar clear of the Dynamic Island. env() is 0 in a browser. */
body{padding-top:env(safe-area-inset-top,0px)}
/* Game Center button (Sophia 2026-10-18): grey bubbles until connected, then colours that glow. No ring or circle round the button. */
.gc-button.connected{overflow:visible!important}
.top-actions svg.cute-gc{width:22px;height:22px;overflow:visible}
.cute-gc circle{fill:none;stroke:currentColor;stroke-width:1.5;transition:fill .3s,stroke .3s}
.gc-button.connected .cute-gc{animation:gcglow 2.6s ease-in-out infinite}
.gc-button.connected circle{stroke:#ffffffcc;stroke-width:1}
.gc-button.connected .gc-a{fill:#ff8fb6}.gc-button.connected .gc-b{fill:#b48cff}.gc-button.connected .gc-c{fill:#ffd46b}.gc-button.connected .gc-d{fill:#6fc8ff}
.gc-button:active .cute-gc{transform:scale(.9)}
@keyframes gcglow{0%,100%{transform:scale(1);filter:drop-shadow(0 0 2px #b48cffaa)}50%{transform:scale(1.08);filter:drop-shadow(0 0 6px #9d6bff)}}
@media(prefers-reduced-motion:reduce){.gc-button.connected .cute-gc{animation:none}}
/* Lumi's and Wisp's eggs on the home page (Sophia 2026-10-18): aurora shimmer / Wisp's star, like in the Pettodex. */
.home-egg.locked .egg-shell{fill:#6954c5;stroke:#322672;animation:auroraShell 10s ease-in-out infinite}
.home-egg.locked .egg-shine{display:block;fill:#9af6ee}
.home-egg.wisp .wisp-star{display:block}
/* Wisp's egg always shifts colour, like Sophia's egg/pettodex.svg (2026-10-18), not only when focused. */
.egg-cell.wisp .egg-shell,.egg-hero.wisp .egg-shell,.home-egg.wisp .egg-shell,.walk-me-egg.wisp .egg-shell{animation:wispShell 9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.egg-cell.wisp .egg-shell,.egg-hero.wisp .egg-shell,.home-egg.wisp .egg-shell{animation:none}}
.home-egg.clover .clover-mark,.home-egg.bramble .bramble-mark,.home-egg.tiko .tiko-mark{display:block}
/* Nimbus's Moon Cloud egg keeps its glowing moon and stars on Home and in the card deck too (2026-10-21). */
.home-egg.nimbus .nimbus-mark,.trading-egg.nimbus .nimbus-mark{display:block}
/* Bix's Prism Lilac egg keeps its jewel, scales and colour shift on Home and in the card deck too (2026-10-21). */
.home-egg.bix .bix-mark,.trading-egg.bix .bix-mark{display:block}
.home-egg.bix .egg-shell,.trading-egg.bix .egg-shell{animation:bixShell 12s ease-in-out infinite}
.home-egg.bix .bix-gem,.trading-egg.bix .bix-gem{animation:bixGem 8s ease-in-out infinite}
.home-egg.bix .bix-scale,.trading-egg.bix .bix-scale{animation:bixScale 9s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.home-egg.bix .egg-shell,.home-egg.bix .bix-gem,.home-egg.bix .bix-scale,.trading-egg.bix .egg-shell,.trading-egg.bix .bix-gem,.trading-egg.bix .bix-scale{animation:none!important}}
/* Countdown page ⓘ and its list of egg actions (Sophia 2026-10-19). */
.egg-info-button{position:absolute;z-index:3;top:max(16px,env(safe-area-inset-top));right:16px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#ffffff12;color:#f5f2ea;box-shadow:0 0 0 1px #ffffff14;cursor:pointer}
.egg-info-button:hover{background:#ffffff20}
.egg-info{width:min(380px,calc(100% - 32px));max-height:min(640px,calc(100% - 48px));padding:26px 20px 18px;border:0;border-radius:26px;background:#17181c;color:#f5f2ea;box-shadow:0 0 0 1px #ffffff14,0 24px 60px #000a;overflow:auto}
.egg-info::backdrop{background:#000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.egg-info h2{margin:0 0 4px;font-size:21px;color:#f5f2ea}
.egg-info>p{margin:0 0 14px;color:#aaa9ad;font-size:13px}
.egg-info ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.egg-info li{display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:center;padding:9px 10px;border-radius:16px;background:#ffffff0a}
.egg-info li span{grid-row:1/3;font-size:22px;text-align:center}
.egg-info li b{font-size:14px}
.egg-info li small{color:#aaa9ad;font-size:12.5px;line-height:1.35}
.egg-info-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:#ffffff12;color:#f5f2ea;font-size:20px;line-height:1;cursor:pointer}
/* Light mode in the Pettö's own colour (Sophia 2026-10-19): no plain white. The page, cards, pills and tiles are soft
   shades of the Pettö's egg colour that blend into each other, the way the dark mode greys do. */
html.petto-theme:not([data-mode="dark"]){
  --pw-page:color-mix(in srgb,var(--petto,#f5b94e) 22%,#fffdfa);--pw-card:color-mix(in srgb,var(--petto,#f5b94e) 11%,#fffdfa);
  --pw-card2:color-mix(in srgb,var(--petto,#f5b94e) 17%,#fffdfa);--pw-item:color-mix(in srgb,var(--petto,#f5b94e) 24%,#fffdfa);
  --pw-line:color-mix(in srgb,var(--petto,#f5b94e) 34%,#fffdfa);--pw-shadow:color-mix(in srgb,var(--petto-deep,#a76c1c) 18%,transparent)}
html.petto-theme:not([data-mode="dark"]) body{background:linear-gradient(180deg,color-mix(in srgb,var(--petto,#f5b94e) 30%,#fffdfa) 0,var(--pw-page) 340px) var(--pw-page)!important}
html.petto-theme:not([data-mode="dark"]) :is(.pet-card,.metrics,.care-card,.next-card,.shop-card,.body-card,.recovery-card,.stress-card,.sleep-card,.meal-card,.wellness-log,.kit-card,.journey-card,.walk-page,dialog:not(.wallet-dialog):not(#collection):not(.egg-dex):not(.onboarding)){
  background:linear-gradient(180deg,var(--pw-card2),var(--pw-card) 160px)!important;border-color:var(--pw-line)!important;box-shadow:0 1px 0 #ffffff80 inset,0 10px 30px var(--pw-shadow)!important}
html.petto-theme:not([data-mode="dark"]) :is(.walk-chip,.walk-card,.pill){background:var(--pw-item)!important;border-color:transparent!important}
html.petto-theme:not([data-mode="dark"]) #pet-mood{background:var(--pw-item)!important;border-color:transparent!important}
html.petto-theme:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]){background:var(--pw-card)!important;border-color:transparent!important}
html.petto-theme:not([data-mode="dark"]) :is(.shop-item,.prize,.trait-tile,.friend-code-box,.friend-empty,#leader-list li,.leader-face,.metric-icon,.food-tile,.secondary,#feeling-chips button,#kit-grid>button,#room-tabs button:not([aria-pressed="true"]),.leader-tabs button,.shop-tabs button,.sleep-summary>div,.walk-stats>div,.walk-spot small,.prize-gift){background:var(--pw-item)!important;border-color:var(--pw-line)!important}
html.petto-theme:not([data-mode="dark"]) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select,textarea){background:var(--pw-card)!important;border-color:var(--pw-line)!important}
/* Lumi's aurora and Wisp's moonlight (Sophia 2026-10-19): the page drifts softly through their egg's shimmer colours,
   day and night, instead of one flat tint. */
html[data-petto="aurora"]:not([data-mode="dark"]) body{background:linear-gradient(165deg,color-mix(in srgb,#6954c5 24%,#fffdfa) 0,color-mix(in srgb,#4284ca 16%,#fffdfa) 35%,color-mix(in srgb,#35b8a4 15%,#fffdfa) 65%,color-mix(in srgb,#a26acc 18%,#fffdfa) 100%) fixed!important}
html[data-petto="wisp"]:not([data-mode="dark"]) body{background:linear-gradient(165deg,color-mix(in srgb,#b89bd8 28%,#fffdfa) 0,color-mix(in srgb,#90bce8 16%,#fffdfa) 40%,color-mix(in srgb,#8bd1c7 15%,#fffdfa) 70%,color-mix(in srgb,#d0a5d8 20%,#fffdfa) 100%) fixed!important}
html[data-petto="aurora"][data-mode="dark"] body{background:radial-gradient(120% 60% at 15% 0,#6954c533,transparent 60%),radial-gradient(90% 50% at 90% 35%,#35b8a426,transparent 60%),radial-gradient(100% 60% at 30% 100%,#a26acc29,transparent 60%),#101114 fixed!important}
html[data-petto="wisp"][data-mode="dark"] body{background:radial-gradient(120% 60% at 15% 0,#b89bd833,transparent 60%),radial-gradient(90% 50% at 90% 40%,#90bce826,transparent 60%),radial-gradient(100% 60% at 30% 100%,#8bd1c724,transparent 60%),#101114 fixed!important}
html[data-petto="aurora"]:not([data-mode="dark"]) :is(.pet-card,.metrics,.care-card,.next-card,.shop-card,.wellness-log,.kit-card,.journey-card,.meal-card){background:linear-gradient(160deg,color-mix(in srgb,#6954c5 13%,#fffdfa),color-mix(in srgb,#35b8a4 8%,#fffdfa) 55%,color-mix(in srgb,#a26acc 10%,#fffdfa))!important}
html[data-petto="wisp"]:not([data-mode="dark"]) :is(.pet-card,.metrics,.care-card,.next-card,.shop-card,.wellness-log,.kit-card,.journey-card,.meal-card){background:linear-gradient(160deg,color-mix(in srgb,#b89bd8 15%,#fffdfa),color-mix(in srgb,#90bce8 8%,#fffdfa) 55%,color-mix(in srgb,#8bd1c7 9%,#fffdfa))!important}
/* Sophia 2026-10-19: in light mode the header controls and the menu were lost against the page, so the containers
   are deeper shades of the Pettö's colour, and the header and menu bars deeper still, with the day/night switch
   clearly drawn on them. */
html.petto-theme:not([data-mode="dark"]){
  --pw-card:color-mix(in srgb,var(--petto,#f5b94e) 20%,#fffdfa);--pw-card2:color-mix(in srgb,var(--petto,#f5b94e) 28%,#fffdfa);
  --pw-item:color-mix(in srgb,var(--petto,#f5b94e) 50%,#fffdfa);--pw-line:color-mix(in srgb,var(--petto-deep,#a76c1c) 30%,#fffdfa);
  --pw-bar:color-mix(in srgb,color-mix(in srgb,var(--petto,#f5b94e) 75%,var(--petto-deep,#a76c1c)) 62%,#fffdfa)}
html.petto-theme:not([data-mode="dark"]) :is(.mode-pill,.top-actions,.point-chip,.health-button,.theme-toggle,.page-tabs){background:var(--pw-bar)!important;box-shadow:inset 0 0 0 1px var(--pw-line),0 4px 14px var(--pw-shadow)!important}
html.petto-theme:not([data-mode="dark"]) .page-tabs a:not([aria-current="page"]){background:var(--pw-item)!important}
html.petto-theme:not([data-mode="dark"]) .page-tabs a[aria-current="page"]{background:var(--petto-deep,#a76c1c)!important;color:#fff!important}
html.petto-theme:not([data-mode="dark"]) .mode-quick input{background:color-mix(in srgb,var(--petto-deep,#a76c1c) 45%,#fffdfa)!important}
html.petto-theme:not([data-mode="dark"]) .mode-quick input::after{box-shadow:0 1px 3px #0005}
html.petto-theme:not([data-mode="dark"]) .mode-quick{color:color-mix(in srgb,var(--petto-deep,#a76c1c) 80%,#000)!important}
html.petto-theme:not([data-mode="dark"]) .streak{background:var(--pw-item)!important;border-color:transparent!important}
/* Redeem a code in the coin stall (Sophia 2026-10-19). */
.wallet-dialog .wallet-redeem{display:grid!important;grid-template-columns:minmax(0,1fr);gap:8px;margin:12px 0 0;padding:12px!important;border-radius:16px;text-align:left;box-sizing:border-box;width:100%!important}
.wallet-redeem label{display:flex;flex-direction:column;gap:1px}
.wallet-redeem b{font:900 13px Nunito,sans-serif}.wallet-redeem small{font-size:10px;font-weight:800;opacity:.6}
.redeem-row{display:flex;gap:8px}
.redeem-row input{flex:1;min-width:0;border:1px solid color-mix(in srgb,var(--petto,#f5a3c0) 40%,#fff);border-radius:99px;padding:8px 12px;font:900 13px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase;background:#fff;color:inherit}
.redeem-row input::placeholder{letter-spacing:.08em;opacity:.45}
.redeem-row .wallet-buy{width:auto;margin:0;padding:8px 16px;font-size:12px}
html[data-mode="dark"] .redeem-row input{background:color-mix(in srgb,var(--petto,#f5a3c0) 10%,#1c1b20);border-color:color-mix(in srgb,var(--petto,#f5a3c0) 30%,#242329)}

/* Collectible Pettö card concept */
.trading-showcase{position:relative;display:grid;grid-template-columns:minmax(240px,.8fr) minmax(330px,1.2fr);gap:28px;align-items:center;overflow:hidden;margin:24px 0 34px;padding:32px 38px;border:1px solid #d9ded2;border-radius:28px;background:radial-gradient(circle at 75% 45%,#d5f2e9 0,#e9f1df 33%,#fffaf0 75%);box-shadow:0 18px 48px #2d604616}.trading-copy{position:relative;z-index:2;max-width:350px}.trading-copy .eyebrow{color:#42785e}.trading-copy h2{font-size:clamp(28px,3vw,42px);line-height:1.07;letter-spacing:-.045em;margin:12px 0;color:#243b39}.trading-copy p{line-height:1.65;color:#597068;font-size:14px}.trading-legend{display:flex;flex-direction:column;gap:9px;margin:20px 0 22px;color:#37624f;font-size:12px;font-weight:800;letter-spacing:.02em}.trading-flip-button{border:0;border-radius:14px;background:#285d49;color:white;padding:12px 18px;font:inherit;font-weight:800;box-shadow:0 6px 0 #173d31;cursor:pointer}.trading-flip-button span{font-size:19px;margin-left:12px;vertical-align:-2px}.trading-flip-button:hover{transform:translateY(-2px);box-shadow:0 8px 0 #173d31}.trading-flip-button:focus-visible{outline:3px solid #ccad50;outline-offset:4px}.trading-stage{position:relative;min-height:510px;display:grid;place-items:center;perspective:1000px}.trading-glow{position:absolute;width:390px;height:390px;border-radius:50%;background:#a7ddbb91;filter:blur(25px)}.trading-stack{position:relative;width:294px;height:430px;transform-style:preserve-3d;animation:trading-float 5s ease-in-out infinite}.trading-card{position:absolute;inset:0;border-radius:19px}.trading-card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:8px solid #f4e6a6;background:repeating-radial-gradient(circle at 50% 45%,#3e8a74 0 15px,#337660 16px 24px);color:#fff7d8;box-shadow:0 18px 28px #19483538}.trading-card-back > span{font-size:80px;text-shadow:0 4px 18px #dbeab3}.trading-card-back > b{font-size:19px;letter-spacing:.15em}.trading-card-back > small{font-size:9px;letter-spacing:.3em}.trading-card-back.one{transform:translate(-30px,12px) rotate(-12deg)}.trading-card-back.two{transform:translate(28px,5px) rotate(9deg)}.trading-card-main{transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.2,1);filter:drop-shadow(0 18px 22px #214d4344)}.trading-stack.is-flipped .trading-card-main{transform:rotateY(180deg)}.trading-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;border:7px solid #e7c96f;border-radius:19px;box-shadow:inset 0 0 0 2px #fff6ce;background:linear-gradient(135deg,#fdf8db,#e7edd3 36%,#d0eee4 65%,#fff5d0);color:#274739}.trading-front{padding:13px 15px 12px;display:flex;flex-direction:column}.trading-front:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(116deg,transparent 23%,#ffffff75 30%,transparent 37%,transparent 65%,#fff9a93d 74%,transparent 82%);mix-blend-mode:screen}.trading-card-header,.trading-card-footer{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:900;letter-spacing:.1em}.trading-spark{font-size:17px;color:#d7a03f}.trading-name-row{display:flex;align-items:end;justify-content:space-between;margin:8px 0 7px}.trading-name-row small,.trading-power small{display:block;font-size:8px;font-weight:900;letter-spacing:.15em;color:#59816a}.trading-name-row h3{margin:1px 0 0;font-size:30px;line-height:1;letter-spacing:-.06em}.trading-power{text-align:center;color:#a26e25}.trading-power b{display:block;font-size:26px;line-height:1}.trading-art{height:171px;position:relative;overflow:hidden;border:3px solid #f7e7ae;border-radius:11px;background:radial-gradient(circle at 52% 37%,#fff9d2 0 17%,#a3dec8 53%,#5fb49d 100%);box-shadow:inset 0 0 0 1px #408e7899}.trading-orbit{position:absolute;border:1px solid #fff8d899;border-radius:50%;width:200px;height:80px;left:50%;top:48%;transform:translate(-50%,-50%) rotate(-22deg)}.trading-orbit.o2{transform:translate(-50%,-50%) rotate(35deg)}.trading-art-star{position:absolute;color:#fff9c8;font-size:25px}.trading-art-star.s1{left:20px;top:13px}.trading-art-star.s2{right:20px;top:27px}.trading-pet{position:absolute;inset:6px 28px 13px;display:grid;place-items:center;filter:drop-shadow(0 9px 7px #286d5880)}.trading-pet svg{display:block;width:100%;height:100%;max-height:160px}.trading-type{position:absolute;right:7px;bottom:6px;background:#fff8d9e6;color:#367862;padding:4px 8px;border-radius:20px;font-size:8px;font-weight:900;letter-spacing:.08em}.trading-rarity{display:flex;justify-content:space-between;align-items:center;margin:9px 0 7px;color:#a16e25;font-size:9px;letter-spacing:.08em}.trading-rarity span{font-size:15px;letter-spacing:0}.trading-move{display:flex;align-items:center;gap:8px;padding:8px 2px;border-top:1px solid #9fbca7;border-bottom:1px solid #9fbca7}.trading-move-icon{display:grid;place-items:center;width:25px;height:25px;flex:none;border-radius:50%;background:#80c39c;color:#fff;font-weight:900}.trading-move div{flex:1}.trading-move strong{display:block;font-size:12px}.trading-move small{display:block;font-size:8px;color:#5e796b;line-height:1.2}.trading-move>b{font-size:16px;color:#36644d}.trading-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:8px 0 6px;text-align:center}.trading-stats>div+div{border-left:1px solid #9fbea8}.trading-stats small{display:block;font-size:7px;letter-spacing:.1em;color:#64806b;font-weight:900}.trading-stats strong{display:block;font-size:12px}.trading-card-footer{margin-top:auto;border-top:1px solid #c6cda6;padding-top:7px;color:#77907a;font-size:7px}.trading-reverse{transform:rotateY(180deg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;background:radial-gradient(circle at center,#d6f3e1,#63a88d 70%,#367965);border-color:#e8cf78;color:#204b3b}.trading-reverse-emblem{font-size:104px;line-height:1;color:#fff1ac;text-shadow:0 4px 18px #fff8cb}.trading-reverse small{font-size:9px;letter-spacing:.24em;font-weight:900;margin-top:20px}.trading-reverse h3{font-size:34px;margin:7px 0}.trading-reverse p{font-size:12px;line-height:1.6;margin:0 0 24px}.trading-back-facts{display:flex;gap:20px;font-size:9px;font-weight:900;letter-spacing:.1em}.trading-back-facts b{display:block;font-size:21px}.trading-back-seal{position:absolute;bottom:24px;font-size:9px;font-weight:900;letter-spacing:.22em}.trading-stage-caption{position:absolute;bottom:0;color:#477764;font-size:11px;font-weight:800;letter-spacing:.08em;text-align:center}@keyframes trading-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}@media(max-width:800px){.trading-showcase{grid-template-columns:1fr;padding:28px 18px;gap:0}.trading-copy{max-width:none;text-align:center}.trading-legend{align-items:center}.trading-stage{min-height:510px}.trading-copy h2{font-size:32px}}@media(max-width:420px){.trading-stack{transform:scale(.86);animation:none}.trading-stage{min-height:455px}.trading-glow{width:300px;height:300px}}@media(prefers-reduced-motion:reduce){.trading-stack{animation:none}.trading-card-main{transition:none}}

/* Character-coloured trading deck */
.trading-showcase{--tc:#ffd77d;--tl:#d99a3e}.trading-glow{background:color-mix(in srgb,var(--tc) 62%,transparent)}.trading-card-back{border-color:color-mix(in srgb,var(--tc) 65%,#fff);background:repeating-radial-gradient(circle at 50% 45%,var(--tl) 0 15px,color-mix(in srgb,var(--tl) 74%,#202d37) 16px 24px)}.trading-face{border-color:var(--tl)}.trading-front{background:linear-gradient(135deg,#fffdf5,color-mix(in srgb,var(--tc) 26%,#fff) 36%,color-mix(in srgb,var(--tc) 52%,#fff) 70%,#fffdf5)}.trading-art{background:radial-gradient(circle at 52% 37%,#fffdf8 0 12%,color-mix(in srgb,var(--tc) 55%,#fff) 55%,var(--tc) 100%);border-color:color-mix(in srgb,var(--tc) 60%,#fff);box-shadow:inset 0 0 0 1px var(--tl)}.trading-rarity,.trading-power{color:var(--tl)}.trading-move-icon{background:var(--tl)}.trading-reverse{background:radial-gradient(circle at center,color-mix(in srgb,var(--tc) 30%,#fff),var(--tc) 68%,var(--tl));border-color:var(--tl)}.trading-type{color:var(--tl)}.trading-collection{grid-column:1/-1;position:relative;z-index:2;margin-top:4px;padding-top:24px;border-top:1px solid #8aa89566}.trading-collection-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:16px}.trading-collection-head h3{font-size:22px;margin:3px 0 0;color:#2b4b40}.trading-collection-head h3 span{font-size:14px;color:#69907b}.trading-search-label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:800;color:#507763}.trading-search-label input{width:220px;border:1px solid #abcab4;border-radius:11px;padding:9px 12px;font:inherit;background:#fff;color:#2b4b40}.trading-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:10px;max-height:330px;overflow:auto;padding:3px 4px 13px 3px;scrollbar-color:#8db99f transparent}.trading-gallery-card{position:relative;min-height:137px;display:flex;flex-direction:column;align-items:start;justify-content:end;overflow:hidden;text-align:left;border:3px solid var(--swatch-line);border-radius:13px;background:linear-gradient(145deg,#fffdf6 0%,color-mix(in srgb,var(--swatch) 40%,#fff) 54%,var(--swatch) 100%);color:#2c443c;padding:10px;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--swatch-line) 45%,#aaa)}.trading-gallery-card:hover,.trading-gallery-card.selected{transform:translateY(-3px);box-shadow:0 7px 0 color-mix(in srgb,var(--swatch-line) 45%,#aaa)}.trading-gallery-card.selected{outline:3px solid #214e3e;outline-offset:2px}.trading-gallery-card:focus-visible{outline:3px solid #214e3e;outline-offset:3px}.trading-gallery-card[hidden]{display:none}.trading-gallery-number{position:absolute;top:9px;left:10px;font-size:8px;font-weight:900;letter-spacing:.1em}.trading-gallery-spark{position:absolute;top:12px;right:13px;font-size:37px;line-height:1;color:var(--swatch-line);opacity:.6}.trading-gallery-card strong{font-size:15px;line-height:1.05;position:relative}.trading-gallery-card small{font-size:9px;font-weight:700;color:#435e52;position:relative;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}@media(max-width:800px){.trading-collection{margin-top:8px}.trading-card-grid{max-height:290px}}@media(max-width:480px){.trading-collection-head{align-items:stretch;flex-direction:column}.trading-search-label input{width:100%}.trading-card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.trading-gallery-card{min-height:118px;padding:7px}.trading-gallery-card strong{font-size:12px}.trading-gallery-card small{font-size:8px}}

/* Keep both faces on the same plane: filtered, animated card stacks flatten CSS 3D in Safari. */
.trading-card-main,.trading-stack.is-flipped .trading-card-main{transform:none}.trading-face{backface-visibility:visible;transition:opacity .28s ease,transform .38s ease}.trading-front{visibility:visible;opacity:1;transform:scale(1)}.trading-reverse{visibility:hidden;opacity:0;transform:scale(.94)}.trading-stack.is-flipped .trading-front{visibility:hidden;opacity:0;transform:scale(.94)}.trading-stack.is-flipped .trading-reverse{visibility:visible;opacity:1;transform:scale(1)}@media(prefers-reduced-motion:reduce){.trading-face{transition:none}}

/* Three-stage swipeable card stack */
.trading-stage{min-height:590px}.trading-stack{z-index:1}.trading-card-main{z-index:3;touch-action:pan-y;cursor:grab}.trading-card-main:active{cursor:grabbing}.trading-card-main:focus-visible{outline:3px solid #254f40;outline-offset:6px}.trading-card-back{z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 12px 22px;overflow:hidden;font:inherit;cursor:pointer;color:#294639;border:7px solid var(--tl);background:linear-gradient(140deg,#fffdf6,color-mix(in srgb,var(--tc) 48%,#fff) 65%,var(--tc));box-shadow:0 18px 28px #19483538}.trading-card-back.one{transform:translate(-88px,9px) rotate(-11deg)}.trading-card-back.two{transform:translate(88px,9px) rotate(11deg)}.trading-card-back:hover{filter:brightness(1.04);box-shadow:0 22px 30px #1948354d}.trading-card-back:focus-visible{outline:3px solid #244d3d;outline-offset:4px}.trading-preview-stage{display:block;width:100%;padding:7px 8px;border-radius:7px;background:#fffdf4;color:var(--tl);font-size:14px;font-weight:1000;letter-spacing:.16em;text-align:center}.trading-preview-pet{display:grid;place-items:center;width:100%;height:220px}.trading-preview-pet svg{display:block;width:100%;height:100%;max-width:190px;max-height:190px;filter:drop-shadow(0 8px 8px #17493755)}.trading-card-back > small{display:block;width:100%;font-size:9px;font-weight:900;letter-spacing:.13em;text-align:center;color:#345b47}.trading-stage-controls{position:absolute;z-index:4;bottom:25px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:14px;padding:5px 8px;border:1px solid #a7c9b0;border-radius:99px;background:#fffdf4e8;box-shadow:0 6px 18px #31594425;white-space:nowrap}.trading-stage-controls button{display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:50%;background:#2e604c;color:#fff;font:inherit;font-size:19px;font-weight:900;cursor:pointer}.trading-stage-controls button:hover{background:#174735}.trading-stage-controls button:focus-visible{outline:3px solid #e2bc62;outline-offset:2px}.trading-stage-controls span{min-width:93px;text-align:center;color:#315c47;font-size:12px;font-weight:900}.trading-stage-caption{font-size:10px}.trading-swipe-next{animation:trading-swipe-next .34s ease-out}.trading-swipe-prev{animation:trading-swipe-prev .34s ease-out}@keyframes trading-swipe-next{0%{transform:translateX(30px) rotate(5deg);opacity:.5}100%{transform:translateX(0) rotate(0);opacity:1}}@keyframes trading-swipe-prev{0%{transform:translateX(-30px) rotate(-5deg);opacity:.5}100%{transform:translateX(0) rotate(0);opacity:1}}@media(max-width:800px){.trading-stage{min-height:570px}}@media(max-width:480px){.trading-stage{min-height:535px}.trading-stack{transform:scale(.82);animation:none}.trading-card-back.one{transform:translate(-75px,9px) rotate(-10deg)}.trading-card-back.two{transform:translate(75px,9px) rotate(10deg)}.trading-stage-controls{bottom:20px}.trading-stage-caption{bottom:0}}@media(prefers-reduced-motion:reduce){.trading-swipe-next,.trading-swipe-prev{animation:none}}

/* Show complete Egg/Baby/Toddler previews rather than card backs peeking out. */
.trading-stack{width:min(100%,620px);height:430px}.trading-card-main{inset:auto;top:0;left:calc(50% - 147px);width:294px;height:430px}.trading-card-back{inset:auto;top:80px;width:142px;height:224px;padding:9px 8px 12px;border-width:5px;border-radius:15px;justify-content:flex-start;gap:4px}.trading-card-back.one{left:0;transform:rotate(-7deg)}.trading-card-back.two{right:0;transform:rotate(7deg)}.trading-preview-stage{padding:5px;font-size:13px;letter-spacing:.1em}.trading-preview-pet{height:166px;flex:1}.trading-preview-pet svg{max-width:130px;max-height:150px}.trading-card-back > small{display:none}.trading-egg{width:100%;height:100%;display:grid;place-items:center}.trading-egg svg{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 5px #53412745)}.trading-egg .wisp-star,.trading-egg .bramble-mark,.trading-egg .clover-mark,.trading-egg .tiko-mark{display:none}.trading-egg.wisp .wisp-star,.trading-egg.bramble .bramble-mark,.trading-egg.clover .clover-mark,.trading-egg.tiko .tiko-mark{display:block}.trading-egg.locked .egg-shell{fill:#6954c5;stroke:#322672}.trading-egg.locked .egg-shine{fill:#9af6ee}.trading-egg.wisp .egg-shell{animation:wispShell 9s ease-in-out infinite}@media(max-width:800px){.trading-stage{min-height:590px}.trading-stack{width:min(100%,560px)}}@media(max-width:560px){.trading-stage{min-height:800px}.trading-stack{width:100%;height:650px;transform:none;animation:none}.trading-card-main{top:0}.trading-card-back{top:445px;width:calc(50% - 8px);max-width:146px;height:176px;transform:none!important}.trading-card-back.one{left:0}.trading-card-back.two{right:0}.trading-preview-pet{height:120px}.trading-preview-pet svg{max-width:118px;max-height:112px}.trading-stage-controls{bottom:29px}.trading-stage-caption{bottom:0}}@media(max-width:355px){.trading-card-main{width:270px;height:430px;left:calc(50% - 135px)}.trading-card-back{width:calc(50% - 6px)}}@media(prefers-reduced-motion:reduce){.trading-egg.wisp .egg-shell{animation:none}}
.trading-card-back{width:clamp(88px,calc((100% - 310px)/2),142px)}.trading-card-back .trading-preview-stage{font-size:13px;text-shadow:none}.trading-card-back .trading-preview-pet{font-size:initial;text-shadow:none}@media(max-width:560px){.trading-card-back{width:calc(50% - 8px)}}

/* A real three-card pack: complete card faces overlap behind the selected face. */
.trading-stack{width:min(100%,620px);height:430px}.trading-stack .trading-card-back{inset:auto;top:0;left:calc(50% - 147px);right:auto;width:294px;height:430px;padding:13px 15px 12px;border:7px solid var(--tl);border-radius:19px;display:flex;align-items:stretch;justify-content:flex-start;gap:0;background:linear-gradient(135deg,#fffdf5,color-mix(in srgb,var(--tc) 26%,#fff) 36%,color-mix(in srgb,var(--tc) 52%,#fff) 70%,#fffdf5);color:#274739;text-align:left;box-shadow:inset 0 0 0 2px #fff6ce,0 18px 28px #19483538}.trading-stack .trading-card-back.one{z-index:1;transform:translate(-102px,18px) rotate(-8deg)}.trading-stack .trading-card-back.two{z-index:2;transform:translate(102px,18px) rotate(8deg)}.trading-card-main{z-index:3}.trading-preview-head{display:flex;justify-content:space-between;align-items:center;font-size:8px;font-weight:900;letter-spacing:.1em}.trading-preview-head i{font-size:17px;font-style:normal;color:var(--tl)}.trading-stack .trading-card-back .trading-preview-title{display:block;margin:10px 0 2px;font-size:27px;line-height:1;font-weight:1000;letter-spacing:-.055em;text-shadow:none}.trading-stack .trading-card-back .trading-preview-stage{display:block;align-self:flex-start;width:auto;padding:3px 7px;border-radius:7px;background:color-mix(in srgb,var(--tc) 55%,#fff);font-size:10px;line-height:1.2;font-weight:900;letter-spacing:.1em;color:var(--tl);text-shadow:none}.trading-card-back.two .trading-preview-title,.trading-card-back.two .trading-preview-stage{align-self:flex-end;text-align:right}.trading-preview-art{display:flex;flex:1;align-items:center;overflow:hidden;margin-top:9px;border:3px solid color-mix(in srgb,var(--tc) 55%,#fff);border-radius:10px;background:radial-gradient(circle at 50% 38%,#fffef4,color-mix(in srgb,var(--tc) 62%,#fff) 63%,var(--tc));box-shadow:inset 0 0 0 1px var(--tl)}.trading-card-back.one .trading-preview-art{justify-content:flex-start}.trading-card-back.two .trading-preview-art{justify-content:flex-end}.trading-stack .trading-card-back .trading-preview-pet{display:grid;place-items:center;flex:none;width:150px;height:170px;font-size:initial;text-shadow:none;filter:drop-shadow(0 8px 7px #315b5055)}.trading-stack .trading-card-back .trading-preview-pet svg{width:100%;height:100%;max-width:none;max-height:none}.trading-preview-rarity{display:block;padding:8px 0 5px;font-size:11px;font-weight:1000;letter-spacing:.08em;color:var(--tl)}.trading-card-back.two .trading-preview-rarity{text-align:right}.trading-preview-bottom{display:block;margin-top:auto;border-top:1px solid #b5c6a7;padding-top:8px;font-size:8px;font-weight:900;letter-spacing:.12em;color:#6d8873}.trading-showcase[data-rarity="rare"] .trading-rarity,.trading-showcase[data-rarity="rare"] .trading-preview-rarity{color:#8950a2}.trading-showcase[data-rarity="super-rare"] .trading-rarity,.trading-showcase[data-rarity="super-rare"] .trading-preview-rarity{color:#c26c3a}.trading-showcase[data-rarity="legendary"] .trading-rarity,.trading-showcase[data-rarity="legendary"] .trading-preview-rarity{color:#b18017}.trading-showcase[data-rarity="mystery"] .trading-rarity,.trading-showcase[data-rarity="mystery"] .trading-preview-rarity{color:#6e54a9}@media(max-width:560px){.trading-stage{min-height:560px}.trading-stack{width:100%;height:430px;transform:scale(.75);animation:none}.trading-stack .trading-card-back{top:0;width:294px;height:430px}.trading-stack .trading-card-back.one{left:calc(50% - 147px);transform:translate(-102px,18px) rotate(-8deg)!important}.trading-stack .trading-card-back.two{left:calc(50% - 147px);right:auto;transform:translate(102px,18px) rotate(8deg)!important}.trading-card-main{top:0;left:calc(50% - 147px);width:294px;height:430px}.trading-stage-controls{bottom:25px}}
.trading-stack .trading-card-back .trading-preview-head{font-size:8px;text-shadow:none}.trading-stack .trading-card-back .trading-preview-rarity{font-size:11px;text-shadow:none}.trading-stack .trading-card-back .trading-preview-bottom{font-size:8px;text-shadow:none}
.trading-gallery-card em{position:relative;margin-top:6px;padding:2px 5px;border:1px solid color-mix(in srgb,var(--swatch-line) 45%,#fff);border-radius:5px;background:#fffdf6bd;color:var(--swatch-line);font-size:8px;font-style:normal;font-weight:900;text-transform:uppercase;letter-spacing:.04em}
/* Names remain readable even on pale egg and card colours. */
html:not([data-mode="dark"]) #pet-title .pet-name,html:not([data-mode="dark"]) .dex-tile.owned strong{color:#263a33!important}.trading-name-row h3,.trading-stack .trading-card-back .trading-preview-title{color:#20362d!important}html[data-mode="dark"] #pet-title .pet-name,html[data-mode="dark"] .dex-tile.owned strong{color:#f6f4e8!important}

/* Full-size collectible deck: all three cards share one footprint at every breakpoint. */
.trading-stack{width:100%;max-width:620px;height:430px;transform:none}.trading-stack .trading-card-back,.trading-stack .trading-card-main{box-sizing:border-box;top:0;left:calc(50% - 147px);right:auto;width:294px;height:430px}.trading-stack .trading-card-back.one{transform:translate(-54px,-12px) rotate(-5deg)!important}.trading-stack .trading-card-back.two{transform:translate(54px,-6px) rotate(5deg)!important}.trading-stack .trading-card-main{transform:none;filter:drop-shadow(0 13px 12px #214d4330)}.trading-card-back.one .trading-preview-stage,.trading-card-back.two .trading-preview-stage{position:absolute;top:13px;z-index:1;max-width:70px;padding:4px 5px;font-size:9px!important;line-height:1;white-space:nowrap;letter-spacing:.02em}.trading-card-back.one .trading-preview-stage{left:7px;right:auto}.trading-card-back.two .trading-preview-stage{right:7px;left:auto}.trading-stack .trading-card-back .trading-preview-head{margin-top:15px}@media(max-width:560px){.trading-stage{min-height:560px}.trading-stack{width:100%;height:430px;transform:none!important;animation:none}.trading-stack .trading-card-back,.trading-stack .trading-card-main{top:0;left:calc(50% - 147px);right:auto;width:294px;height:430px}.trading-stack .trading-card-back.one{transform:translate(-22px,-10px) rotate(-3deg)!important}.trading-stack .trading-card-back.two{transform:translate(22px,-5px) rotate(3deg)!important}}@media(max-width:355px){.trading-stack .trading-card-back,.trading-stack .trading-card-main{left:calc(50% - 147px);width:294px;height:430px}}
@media(max-width:560px){.trading-stack .trading-card-back.one{transform:translate(-10px,-58px) rotate(-2deg)!important}.trading-stack .trading-card-back.two{transform:translate(10px,-30px) rotate(2deg)!important}.trading-stage{min-height:590px}.trading-stage-controls{bottom:25px}}
.trading-rarity-note{display:block;margin-top:8px;color:#4c6a5a;font-size:11px;font-weight:700;line-height:1.4}.trading-rarity strong{font-size:9px;white-space:nowrap}.trading-preview-rarity{white-space:nowrap;font-size:10px}.trading-gallery-card em{white-space:nowrap}
.trading-gallery-card em{white-space:normal;line-height:1.15}

/* Uniform 294 × 430 cards with straight, offset edges so the deck reads as one size. */
.trading-stage{min-height:680px}.trading-stack .trading-card-back,.trading-stack .trading-card-main{width:294px!important;min-width:294px;height:430px!important;min-height:430px;max-width:none;box-sizing:border-box}.trading-stack .trading-card-back.one{transform:translate(-45px,-40px)!important}.trading-stack .trading-card-back.two{transform:translate(45px,40px)!important}.trading-stack .trading-card-back.two .trading-preview-rarity{position:absolute;right:15px;bottom:15px;margin:0;padding:5px 7px;border-radius:7px;background:#fffdf2f0}.trading-stack .trading-card-back.one .trading-preview-stage{top:9px}.trading-stack .trading-card-back.two .trading-preview-stage{top:auto;bottom:12px;right:10px}@media(max-width:560px){.trading-stage{min-height:680px}.trading-stack{transform:none!important}.trading-stack .trading-card-back.one{transform:translateY(-45px)!important}.trading-stack .trading-card-back.two{transform:translateY(45px)!important}.trading-stack .trading-card-back.two .trading-preview-rarity{right:70px}}
/* Baby portraits are younger and visibly smaller; card dimensions stay identical. */
.trading-card-main[data-stage="baby"] .trading-pet svg{transform:scale(.72);transform-origin:50% 82%}.trading-card-back[data-stage="baby"] .trading-preview-pet svg{transform:scale(.72);transform-origin:50% 82%}
/* Keep every stage comfortably inside its portrait window. */
.trading-card-main .trading-pet svg{width:76%;height:76%;max-width:155px;max-height:118px;object-fit:contain}.trading-card-main[data-stage="egg"] .trading-egg{width:72%;height:72%;place-self:center}.trading-card-main[data-stage="egg"] .trading-egg svg{width:100%;height:100%;max-width:none;max-height:none}.trading-card-back .trading-preview-pet svg{width:78%;height:78%;max-width:118px;max-height:125px;object-fit:contain}.trading-card-back[data-stage="egg"] .trading-egg{width:72%;height:72%;place-self:center}.trading-card-back[data-stage="egg"] .trading-egg svg{width:100%;height:100%;max-width:none;max-height:none}
.trading-stack .trading-card-back .trading-preview-pet svg{width:78%;height:78%;max-width:118px;max-height:125px;object-fit:contain}.trading-stack .trading-card-back[data-stage="egg"] .trading-egg svg{width:100%;height:100%;max-width:none;max-height:none}

/* Floating foil: a travelling rainbow highlight over every card face. */
.trading-stage::after{content:"";position:absolute;z-index:0;left:50%;top:calc(50% + 238px);width:290px;height:28px;transform:translateX(-50%);border-radius:50%;background:#173c3652;filter:blur(17px);animation:deck-shadow 4.8s ease-in-out infinite;pointer-events:none}.trading-stack{animation:deck-float 4.8s ease-in-out infinite;will-change:translate}.trading-card-main{box-shadow:0 24px 42px #173d3940,0 6px 12px #173d3929}.trading-front::before,.trading-stack .trading-card-back::after{content:"";position:absolute;inset:0;z-index:4;border-radius:12px;pointer-events:none;background:linear-gradient(112deg,transparent 15%,#89dfff66 29%,#be9cff72 37%,#ffadc769 45%,#ffe9a47d 53%,#a9ffdc70 62%,transparent 78%);background-size:230% 100%;background-position:125% 0;mix-blend-mode:screen;opacity:.62;animation:holo-sweep 5.2s ease-in-out infinite}.trading-front::after{z-index:5;inset:0;background:linear-gradient(115deg,transparent 28%,#ffffffab 43%,transparent 54%);background-size:260% 100%;background-position:115% 0;mix-blend-mode:screen;opacity:.5;animation:holo-sweep 5.2s ease-in-out infinite}.trading-art::before{content:"✦ HOLO";position:absolute;z-index:6;top:7px;left:7px;padding:3px 6px;border:1px solid #fff9e9b8;border-radius:5px;background:linear-gradient(115deg,#a8eceddf,#e5b9f4df,#ffe2a8df,#a8eceddf);background-size:180% 100%;color:#345b59;font-size:8px;font-weight:1000;letter-spacing:.1em;box-shadow:0 2px 6px #426e6040;animation:holo-sweep 5.2s ease-in-out infinite}.trading-art::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(110deg,transparent 10%,#fff9d666 31%,#b7fff86b 45%,#e9c9ff77 54%,transparent 75%);background-size:225% 100%;background-position:125% 0;mix-blend-mode:screen;animation:holo-sweep 5.2s ease-in-out infinite}.trading-type{z-index:7}.trading-spark{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:conic-gradient(#a8eddf,#a6c9ff,#e6b8f3,#ffd5a5,#a8eddf);color:#fff;text-shadow:0 1px 3px #40665e;box-shadow:0 2px 8px #7eacc38a;font-size:19px}@keyframes holo-sweep{0%,13%{background-position:125% 0}52%{background-position:-65% 0}100%{background-position:-65% 0}}@keyframes deck-float{0%,100%{translate:0 0}50%{translate:0 -10px}}@keyframes deck-shadow{0%,100%{transform:translateX(-50%) scale(1);opacity:.5}50%{transform:translateX(-50%) scale(.84);opacity:.29}}
/* Swipe follows the pointer, exits in that direction, and reveals the next stage. */
.trading-stack .trading-card-main{transition:transform .25s ease,opacity .18s ease}.trading-stack .trading-card-main.is-dragging{transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(var(--drag-rot,0deg))!important;transition:none!important;animation:none!important}.trading-stack .trading-card-main.trading-release-next{transform:translate(-250px,-18px) rotate(-13deg)!important;opacity:0;transition:transform .19s ease-in,opacity .19s ease-in!important}.trading-stack .trading-card-main.trading-release-prev{transform:translate(250px,-18px) rotate(13deg)!important;opacity:0;transition:transform .19s ease-in,opacity .19s ease-in!important}.trading-stack .trading-card-main.trading-swipe-next{animation:deck-enter-next .32s ease-out both}.trading-stack .trading-card-main.trading-swipe-prev{animation:deck-enter-prev .32s ease-out both}@keyframes deck-enter-next{from{transform:translate(150px,18px) rotate(9deg);opacity:0}to{transform:none;opacity:1}}@keyframes deck-enter-prev{from{transform:translate(-150px,18px) rotate(-9deg);opacity:0}to{transform:none;opacity:1}}@media(hover:hover){.trading-stack:hover .trading-card-main:not(.is-dragging):not(.trading-release-next):not(.trading-release-prev){filter:drop-shadow(0 22px 20px #214d434a)}}@media(prefers-reduced-motion:reduce){.trading-stage::after,.trading-stack,.trading-front::before,.trading-front::after,.trading-art::before,.trading-art::after,.trading-stack .trading-card-back::after{animation:none!important}.trading-stack .trading-card-main.trading-swipe-next,.trading-stack .trading-card-main.trading-swipe-prev{animation:none!important}.trading-stack .trading-card-main.trading-release-next,.trading-stack .trading-card-main.trading-release-prev{transition:none!important}}
/* A soft rainbow stays visible between glints. */
.trading-front{background-image:linear-gradient(125deg,#ffffff78 0%,#9fe4ed37 25%,#d6b8f04c 48%,#ffe2a94f 72%,#ffffff55 100%),linear-gradient(135deg,#fffdf5,color-mix(in srgb,var(--tc) 26%,#fff) 36%,color-mix(in srgb,var(--tc) 52%,#fff) 70%,#fffdf5)}.trading-stack .trading-card-back{background-image:linear-gradient(125deg,#ffffff5c,#b5dbf135 25%,#e5b9ee4a 50%,#ffe6ae42 73%,#ffffff50),linear-gradient(135deg,#fffdf5,color-mix(in srgb,var(--tc) 26%,#fff) 36%,color-mix(in srgb,var(--tc) 52%,#fff) 70%,#fffdf5)}

/* The cards under the active card use the exact same full face and dimensions. */
.trading-stack .trading-card-back{padding:0!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible;display:block}
.trading-stack .trading-card-back::after{display:none}
.trading-stack .trading-card-back .trading-front{box-sizing:border-box;width:100%;height:100%;text-align:left}
.trading-stack .trading-card-back .trading-pet svg{width:76%;height:76%;max-width:155px;max-height:118px;object-fit:contain}
.trading-stack .trading-card-back[data-stage="baby"] .trading-pet svg{transform:scale(.72);transform-origin:50% 82%}
.trading-stack .trading-card-back[data-stage="egg"] .trading-egg{width:72%;height:72%;place-self:center}
.trading-stack .trading-card-back[data-stage="egg"] .trading-egg svg{width:100%;height:100%;max-width:none;max-height:none}
.trading-stack[data-swipe-direction="prev"] #trading-prev-card{z-index:2}
.trading-stack[data-swipe-direction="prev"] #trading-next-card{z-index:1}
.trading-stack[data-swipe-direction="next"] #trading-next-card{z-index:2}
.trading-stack[data-swipe-direction="next"] #trading-prev-card{z-index:1}

/* Cards beneath lift into the front position as a swipe progresses. */
.trading-stack .trading-card-back .trading-front{box-shadow:inset 0 0 0 2px #fff6ce,0 20px 35px #173d3940,0 5px 10px #173d3929}
.trading-stack[data-swipe-direction="prev"] #trading-prev-card{transform:translate(var(--rear-x,-45px),var(--rear-y,-40px))!important;transition:transform .08s ease-out}
.trading-stack[data-swipe-direction="next"] #trading-next-card{transform:translate(var(--rear-x,45px),var(--rear-y,40px))!important;transition:transform .08s ease-out}
.trading-stack.is-settling .trading-card-back{transition:transform .29s cubic-bezier(.16,.8,.24,1)!important}
.trading-stack .trading-card-main.trading-release-next{transform:translate(-420px,-36px) rotate(-17deg)!important;transition:transform .29s cubic-bezier(.32,.02,.76,.58),opacity .29s ease-in!important}
.trading-stack .trading-card-main.trading-release-prev{transform:translate(420px,-36px) rotate(17deg)!important;transition:transform .29s cubic-bezier(.32,.02,.76,.58),opacity .29s ease-in!important}
.trading-stack.is-swapping .trading-card-main{transform:none!important;opacity:1!important;transition:none!important;animation:none!important}
.trading-stack.is-swapping .trading-card-back{transition:none!important}
@media(prefers-reduced-motion:reduce){.trading-stack.is-settling .trading-card-back{transition:none!important}}


/* Depth from light and shadow without changing card geometry. */
.trading-stack .trading-front{
  box-shadow:inset 0 0 0 2px #fff9df,inset 0 2px 5px #ffffffbd,inset 0 -5px 9px #685d3920,0 3px 0 color-mix(in srgb,var(--tl) 55%,#6c624b),0 12px 22px #173d392e,0 27px 42px #173d3926;
}
.trading-stack .trading-card-back .trading-front{
  box-shadow:inset 0 0 0 2px #fff9df,inset 0 2px 5px #ffffffbd,inset 0 -5px 9px #685d3920,0 3px 0 color-mix(in srgb,var(--tl) 55%,#6c624b),0 12px 22px #173d392e,0 27px 42px #173d3926;
}
.trading-stack .trading-card-main.is-dragging .trading-front{box-shadow:inset 0 0 0 2px #fff9df,inset 0 2px 5px #ffffffbd,0 3px 0 color-mix(in srgb,var(--tl) 55%,#6c624b),0 24px 32px #173d3942,0 40px 55px #173d392e}

/* Both printed faces occupy one card, so a corner drag rotates the card itself. */
.trading-stack .trading-card-main{transform:perspective(1100px) rotateY(0deg)!important;transform-style:preserve-3d!important;-webkit-transform-style:preserve-3d!important;filter:none!important;transition:none!important}
.trading-stack.is-flipped .trading-card-main{transform:perspective(1100px) rotateY(180deg)!important}
.trading-stack .trading-face{visibility:visible!important;opacity:1!important;backface-visibility:hidden!important;-webkit-backface-visibility:hidden!important;transition:none!important}
.trading-stack.is-flipped .trading-front,.trading-stack.is-flipped .trading-reverse{visibility:visible!important;opacity:1!important}
.trading-stack .trading-front{transform:translateZ(.5px)!important}
.trading-stack .trading-reverse{transform:rotateY(180deg) translateZ(.5px)!important}
.trading-stack .trading-card-main.is-turning{transform:perspective(1100px) rotateY(var(--flip-angle,0deg))!important;transition:none!important}
.trading-stack .trading-card-main.is-turn-completing{transform:perspective(1100px) rotateY(var(--flip-angle,0deg))!important;transition:transform .42s cubic-bezier(.2,.7,.2,1)!important}

/* Keep the collection heading readable across pet colours and themes. */
#trading-title{color:#172b28!important;text-shadow:0 1px 0 #ffffffa8}

/* Collection introduction: clear instructions and compact card details. */
.trading-copy{max-width:390px}
.trading-copy .trading-kicker{display:inline-flex;align-items:center;width:max-content;max-width:100%;padding:8px 11px;border:1px solid #7fab91;border-radius:999px;background:#f4fff3;color:#24513e;font-size:10px;font-weight:900;letter-spacing:.1em;line-height:1.25}
.trading-copy #trading-title{max-width:370px;margin:16px 0 13px;color:#172b28!important;line-height:1.04}
.trading-copy .trading-intro{margin:0;color:#344d44;font-size:14px;line-height:1.65}
.trading-copy .trading-gesture-hint{margin:16px 0 0;padding:11px 13px;border-left:3px solid #4a9470;border-radius:0 10px 10px 0;background:#f2f8ed;color:#244a3a;font-size:12px;font-weight:750;line-height:1.45}
.trading-copy .trading-rarity-note{display:block;margin-top:13px;color:#3f5d4c;font-size:11px;line-height:1.4;font-weight:750}
.trading-copy .trading-legend{display:flex;flex-direction:row;flex-wrap:wrap;gap:7px;margin:17px 0 0}
.trading-copy .trading-legend span{display:inline-flex;align-items:center;min-height:29px;padding:5px 9px;border:1px solid #a5c7aa;border-radius:9px;background:#fffef7;color:#28503d;font-size:11px;font-weight:800;line-height:1.2;white-space:nowrap}
.trading-stack .trading-card-back{pointer-events:none;cursor:default}
.trading-stage-controls{justify-content:center}
@media(max-width:800px){.trading-copy{max-width:600px;margin-inline:auto}.trading-copy #trading-title{max-width:none}.trading-copy .trading-legend{justify-content:center}}

/* Keep the gallery title and live count legible on every theme. */
.trading-collection-head h3{color:#172b28!important;text-shadow:0 1px 0 #ffffffa8}
.trading-collection-head h3 #trading-count{color:#294c3a!important;font-weight:900}

/* The collector area follows the page mode while retaining the selected Pettö colour. */
html:not([data-mode="dark"]) .trading-showcase{
  background:radial-gradient(circle at 72% 39%,color-mix(in srgb,var(--tc) 38%,#fffdf7) 0%,color-mix(in srgb,var(--tc) 15%,#fffdf7) 45%,#fffaf2 100%);
  border-color:color-mix(in srgb,var(--tl) 32%,#eee9dd);
}
html[data-mode="dark"] .trading-showcase{
  background:radial-gradient(circle at 72% 35%,color-mix(in srgb,var(--tc) 20%,#20262a) 0%,color-mix(in srgb,var(--tc) 8%,#171c20) 48%,#12171b 100%);
  border-color:color-mix(in srgb,var(--tc) 35%,#394348);
  box-shadow:0 20px 52px #050a0d70,inset 0 1px 0 #ffffff13;
  color:#f2f5f0;
}
html[data-mode="dark"] .trading-copy .trading-kicker{background:color-mix(in srgb,var(--tc) 14%,#20292a);border-color:color-mix(in srgb,var(--tc) 42%,#56645d);color:#f0f8ec}
html[data-mode="dark"] .trading-copy #trading-title{color:#f7faf5!important;text-shadow:0 2px 12px #0008}
html[data-mode="dark"] .trading-copy .trading-intro{color:#dbe7dc}
html[data-mode="dark"] .trading-copy .trading-gesture-hint{background:color-mix(in srgb,var(--tc) 12%,#26332f);border-left-color:color-mix(in srgb,var(--tc) 65%,#a4d6ad);color:#f0f7ee}
html[data-mode="dark"] .trading-copy .trading-rarity-note{color:#c8daca}
html[data-mode="dark"] .trading-copy .trading-legend span{background:color-mix(in srgb,var(--tc) 10%,#252e2b);border-color:color-mix(in srgb,var(--tc) 33%,#53615a);color:#e8f3e9}
html[data-mode="dark"] .trading-collection{border-top-color:color-mix(in srgb,var(--tc) 25%,#56625e)}
html[data-mode="dark"] .trading-collection-head h3{color:#f7faf5!important;text-shadow:0 2px 10px #0008}
html[data-mode="dark"] .trading-collection-head h3 #trading-count{color:color-mix(in srgb,var(--tc) 50%,#f6f8ee)!important}
html[data-mode="dark"] .trading-collection-head .eyebrow,html[data-mode="dark"] .trading-search-label{color:#d3e2d4}
html[data-mode="dark"] .trading-search-label input{background:#222b2b;border-color:color-mix(in srgb,var(--tc) 35%,#596964);color:#f4f7f1}
html[data-mode="dark"] .trading-search-label input::placeholder{color:#aebfb3}
html[data-mode="dark"] .trading-stage-caption,html[data-mode="dark"] .trading-stage-controls{color:#d6e4d9}
html[data-mode="dark"] .trading-glow{background:color-mix(in srgb,var(--tc) 28%,transparent)}
html[data-mode="dark"] .trading-gallery-card{background:linear-gradient(145deg,color-mix(in srgb,var(--swatch) 13%,#222a2b),color-mix(in srgb,var(--swatch) 25%,#1a2224));color:#f2f7f1;box-shadow:0 3px 0 color-mix(in srgb,var(--swatch-line) 35%,#0a1215)}
html[data-mode="dark"] .trading-gallery-card small{color:#d3e1d6}

/* Neutral framing; the artwork and card faces retain each Pettö's colours. */
html:not([data-mode="dark"]) .trading-showcase{border-color:#d8d8d2}
html[data-mode="dark"] .trading-showcase{border-color:#45494b}
.trading-copy .trading-gesture-hint{border-left-color:#9b8666}
.trading-gallery-card.selected{outline:2px solid #b79155!important;outline-offset:2px}
.trading-card-main:focus-visible,.trading-search-label input:focus-visible{outline:3px solid #b79155!important;outline-offset:4px}

/* Backface visibility keeps the reverse hidden until it physically turns toward us. */
/* A steady holographic tint avoids the bright diagonal sweep across the artwork. */
.trading-stack .trading-front::before{animation:none!important;background-position:50% 0;opacity:.3}
.trading-stack .trading-front::after{display:none!important}
.trading-stack .trading-art::after{animation:none!important;background-position:50% 0;opacity:.22}

/* Collection accents follow the Pettö selected in the gallery. */
html:not([data-mode="dark"]) .trading-showcase{--pet-ink:color-mix(in srgb,var(--tl) 58%,#242228);--pet-soft:color-mix(in srgb,var(--tc) 25%,#fffdf8);--pet-edge:color-mix(in srgb,var(--tl) 38%,#d8d2c9)}
html[data-mode="dark"] .trading-showcase{--pet-ink:color-mix(in srgb,var(--tc) 48%,#f6f3ef);--pet-soft:color-mix(in srgb,var(--tc) 14%,#26282b);--pet-edge:color-mix(in srgb,var(--tc) 34%,#55565a)}
.trading-showcase .trading-copy .trading-kicker,
.trading-showcase .trading-copy .trading-gesture-hint,
.trading-showcase .trading-copy .trading-legend span{color:var(--pet-ink)!important;background:var(--pet-soft)!important;border-color:var(--pet-edge)!important}
.trading-showcase .trading-copy .trading-gesture-hint{border-left-color:var(--tl)!important}
.trading-showcase .trading-collection-head .eyebrow,
.trading-showcase .trading-collection-head h3 #trading-count,
.trading-showcase .trading-stage-caption,
.trading-showcase .trading-stage-controls{color:var(--pet-ink)!important}
html:not([data-mode="dark"]) .trading-showcase .trading-copy :is(#trading-title,.trading-intro,.trading-rarity-note),
html:not([data-mode="dark"]) .trading-showcase .trading-collection-head h3{color:#29272a!important}
html[data-mode="dark"] .trading-showcase .trading-copy :is(#trading-title,.trading-intro,.trading-rarity-note),
html[data-mode="dark"] .trading-showcase .trading-collection-head h3{color:#f5f2ee!important}
.trading-showcase .trading-gallery-card.selected{outline-color:var(--swatch-line)!important}
.trading-showcase .trading-card-main:focus-visible,
.trading-showcase .trading-search-label input:focus-visible{outline-color:var(--tl)!important}

/* Horizontal carousel inspired by the A24 disc gallery: full-size cards stay in view. */
.trading-stack .trading-card-back.one{transform:translate(-178px,18px) rotate(-6deg)!important}
.trading-stack .trading-card-back.two{transform:translate(178px,18px) rotate(6deg)!important}
.trading-stack[data-swipe-direction="prev"] #trading-prev-card{transform:translate(var(--rear-x,-178px),var(--rear-y,18px)) rotate(var(--rear-rot,-6deg))!important;transition:transform .08s ease-out}
.trading-stack[data-swipe-direction="next"] #trading-next-card{transform:translate(var(--rear-x,178px),var(--rear-y,18px)) rotate(var(--rear-rot,6deg))!important;transition:transform .08s ease-out}
.trading-stack.is-settling .trading-card-back{transition:transform .4s cubic-bezier(.18,.72,.18,1)!important}
.trading-stack .trading-card-main.trading-release-next{transform:translate(-390px,-10px) rotate(-5deg)!important;opacity:0;transition:transform .4s cubic-bezier(.2,.65,.32,1),opacity .4s ease!important}
.trading-stack .trading-card-main.trading-release-prev{transform:translate(390px,-10px) rotate(5deg)!important;opacity:0;transition:transform .4s cubic-bezier(.2,.65,.32,1),opacity .4s ease!important}
@media(prefers-reduced-motion:reduce){.trading-stack.is-settling .trading-card-back,.trading-stack .trading-card-main.trading-release-next,.trading-stack .trading-card-main.trading-release-prev{transition:none!important}}

/* Three-card rotation: all cards share one carousel position and light source. */
.trading-stack[data-swipe-direction="next"] #trading-prev-card,
.trading-stack[data-swipe-direction="prev"] #trading-next-card{transform:translate(var(--far-x),var(--far-y)) rotate(var(--far-rot))!important;transition:none!important}
.trading-stack[data-swipe-direction="next"] #trading-next-card,
.trading-stack[data-swipe-direction="prev"] #trading-prev-card{transition:none!important}
.trading-stack.is-settling .trading-card-main{transform:translate(var(--carousel-main-x,0px),var(--carousel-main-y,0px)) rotate(var(--carousel-main-rot,0deg))!important;opacity:1!important;transition:none!important;z-index:2}
.trading-stack.is-settling[data-swipe-direction="next"] #trading-next-card,
.trading-stack.is-settling[data-swipe-direction="prev"] #trading-prev-card{z-index:3}
.trading-stack.is-settling[data-swipe-direction="next"] #trading-prev-card,
.trading-stack.is-settling[data-swipe-direction="prev"] #trading-next-card{z-index:1}
.trading-stack .trading-front::before{content:"";display:block!important;position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:12px;background:radial-gradient(ellipse 95% 70% at var(--shine-x,50%) 30%,#ffffffb5 0%,#ffffff54 30%,#ffffff00 72%),linear-gradient(120deg,#a8dfff24,#f1b8f52d 48%,#ffe4a628 75%,#a8dfff24);mix-blend-mode:screen;opacity:.58;animation:none!important}
.trading-stack .trading-art::after{display:none!important}
@media(prefers-reduced-motion:reduce){.trading-stack .trading-front::before{opacity:.3}}

/* Mouse position gently angles the entire pack; the cards keep their full faces and spacing. */
.trading-stage > .trading-stack{transform:perspective(1400px) translate(var(--pointer-shift-x,0px),var(--pointer-shift-y,0px)) rotateX(var(--pointer-tilt-x,0deg)) rotateY(var(--pointer-tilt-y,0deg)) rotateZ(var(--pointer-tilt-z,0deg))!important;transform-style:flat!important;will-change:transform}
#trading-prev-card{--shine-x:75%}
#trading-next-card{--shine-x:25%}
.trading-stack .trading-front::before{background:radial-gradient(ellipse 95% 70% at calc(var(--shine-x,50%) + var(--hover-light-x,0%)) calc(30% + var(--hover-light-y,0%)),#ffffffb5 0%,#ffffff54 30%,#ffffff00 72%),linear-gradient(120deg,#a8dfff24,#f1b8f52d 48%,#ffe4a628 75%,#a8dfff24)}
@media(prefers-reduced-motion:reduce){.trading-stage > .trading-stack{transform:none!important}}

/* Drag rotation: each full card turns toward or away from the viewer as it trades places. */
.trading-stack .trading-card-back.one{transform:perspective(1100px) translate(-178px,18px) rotateY(26deg) rotate(-6deg)!important}
.trading-stack .trading-card-back.two{transform:perspective(1100px) translate(178px,18px) rotateY(-26deg) rotate(6deg)!important}
.trading-stack[data-swipe-direction="prev"] #trading-prev-card,
.trading-stack[data-swipe-direction="next"] #trading-next-card{transform:perspective(1100px) translate(var(--rear-x),var(--rear-y)) rotateY(var(--rear-tilt-y)) rotate(var(--rear-rot))!important}
.trading-stack[data-swipe-direction="next"] #trading-prev-card,
.trading-stack[data-swipe-direction="prev"] #trading-next-card{transform:perspective(1100px) translate(var(--far-x),var(--far-y)) rotateY(var(--far-tilt-y)) rotate(var(--far-rot))!important}
.trading-stack .trading-card-main.is-dragging{transform:perspective(1100px) translate(var(--drag-x,0px),var(--drag-y,0px)) rotateX(var(--drag-tilt-x,0deg)) rotateY(var(--drag-tilt-y,0deg)) rotate(var(--drag-rot,0deg))!important}
.trading-stack.is-settling .trading-card-main{transform:perspective(1100px) translate(var(--carousel-main-x,0px),var(--carousel-main-y,0px)) rotateX(var(--carousel-main-tilt-x,0deg)) rotateY(var(--carousel-main-tilt-y,0deg)) rotate(var(--carousel-main-rot,0deg))!important}
@media(prefers-reduced-motion:reduce){.trading-stack .trading-card-back.one{transform:translate(-178px,18px) rotate(-6deg)!important}.trading-stack .trading-card-back.two{transform:translate(178px,18px) rotate(6deg)!important}}

/* The carousel represents the full collection; only the nearby cards are mounted. */
#trading-stack #trading-prev-card,#trading-stack #trading-next-card,
#trading-stack .trading-deck-extra{transform:perspective(1100px) translate(calc(var(--slot-x,0px) + var(--grab-x,0px)),calc(var(--slot-y,0px) + var(--grab-y,0px))) rotateX(var(--grab-tilt-x,0deg)) rotateY(calc(var(--slot-tilt-y,0deg) + var(--grab-tilt-y,0deg))) rotate(calc(var(--slot-rot,0deg) + var(--grab-rot,0deg)))!important;transition:none!important}
#trading-stack .trading-deck-extra{z-index:0;pointer-events:none}
#trading-stack .trading-card-back .trading-rarity{color:var(--tl)!important}
#trading-stack #trading-prev-card,#trading-stack #trading-next-card{z-index:1}
#trading-stack #trading-card{z-index:2}
#trading-stack[data-incoming-front="true"][data-swipe-direction="next"] #trading-next-card,
#trading-stack[data-incoming-front="true"][data-swipe-direction="prev"] #trading-prev-card{z-index:3}

/* Compact collection menu and an expandable character picker. */
.trading-showcase{grid-template-columns:minmax(0,1fr);gap:0}
.trading-showcase .trading-copy{grid-column:1;max-width:none;width:100%}
.trading-menu{display:flex;align-items:center;gap:18px;width:100%;padding-bottom:15px;border-bottom:1px solid var(--pet-edge,#ded9d0)}
.trading-menu-title{margin-right:auto;min-width:0}
.trading-menu-title .eyebrow{color:var(--pet-ink,#393b36)!important}
.trading-showcase .trading-menu-title #trading-title{margin:5px 0 0;font-size:clamp(25px,3vw,35px);line-height:1.05}
.trading-menu-current{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:baseline;min-width:160px;padding:9px 14px;border:1px solid var(--pet-edge,#ded9d0);border-radius:14px;background:var(--pet-soft,#fff9e9);color:var(--pet-ink,#29272a)}
.trading-menu-current span{grid-column:1/-1;font-size:9px;font-weight:900;letter-spacing:.13em;opacity:.68}
.trading-menu-current strong{font-size:17px;line-height:1.2}
.trading-menu-current small{font-size:11px;font-weight:800;white-space:nowrap}
.trading-collection-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;padding:6px 7px 6px 15px;border:1px solid var(--pet-edge,#ded9d0);border-radius:14px;background:var(--pet-soft,#fff9e9);color:var(--pet-ink,#29272a);font:inherit;font-size:12px;font-weight:900;cursor:pointer;white-space:nowrap}
.trading-collection-toggle:hover{box-shadow:0 5px 14px #25251b1a}
.trading-collection-toggle:focus-visible{outline:3px solid var(--tl);outline-offset:3px}
.trading-toggle-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:9px;background:var(--tc);color:var(--pet-ink,#29272a);font-size:23px;line-height:1;transition:transform .3s ease}
.trading-collection.is-open .trading-toggle-icon{transform:rotate(45deg)}
.trading-showcase .trading-stage{grid-column:1;min-height:565px}
.trading-showcase .trading-collection{grid-column:1;margin-top:0;padding-top:0;border-top:0}
.trading-collection-content{max-height:0;overflow:hidden;opacity:0;transform:translateY(-12px);visibility:hidden;transition:max-height .48s cubic-bezier(.2,.75,.2,1),opacity .28s ease,transform .38s ease,visibility 0s .48s}
.trading-collection.is-open .trading-collection-content{max-height:500px;opacity:1;transform:none;visibility:visible;transition:max-height .48s cubic-bezier(.2,.75,.2,1),opacity .28s ease,transform .38s ease}
.trading-collection-head{justify-content:flex-end;margin:0 0 12px;padding-top:14px;border-top:1px solid var(--pet-edge,#ded9d0)}
.trading-card-grid{max-height:330px}
html[data-mode="dark"] .trading-menu-current,html[data-mode="dark"] .trading-collection-toggle{background:color-mix(in srgb,var(--tc) 12%,#202528);color:#f5f2ee;border-color:color-mix(in srgb,var(--tl) 30%,#45484b)}
html[data-mode="dark"] .trading-toggle-icon{color:#222528}
@media(max-width:650px){.trading-menu{flex-wrap:wrap;gap:11px}.trading-menu-title{width:100%}.trading-menu-current{flex:1}.trading-collection-toggle{flex:1}.trading-showcase .trading-stage{min-height:550px}}
@media(prefers-reduced-motion:reduce){.trading-collection-content,.trading-toggle-icon{transition:none!important}}

/* A visible card behind the front card can pull the same carousel in either direction. */
#trading-stack .trading-card-back{pointer-events:auto;touch-action:pan-y;cursor:grab}
#trading-stack .trading-card-back:active{cursor:grabbing}
#trading-stack.is-carousel-dragging #trading-card{transform:perspective(1100px) translate(var(--carousel-main-x,0px),var(--carousel-main-y,0px)) rotateY(var(--carousel-main-tilt-y,0deg)) rotate(var(--carousel-main-rot,0deg))!important;transition:none!important}
#trading-stack.is-flipped.is-carousel-dragging #trading-card,
#trading-stack.is-flipped.is-settling #trading-card{transform:perspective(1100px) translate(var(--carousel-main-x,0px),var(--carousel-main-y,0px)) rotateY(calc(180deg + var(--carousel-main-tilt-y,0deg))) rotate(var(--carousel-main-rot,0deg))!important}
#trading-stack.is-flipped #trading-card.is-dragging{transform:perspective(1100px) translate(var(--drag-x,0px),var(--drag-y,0px)) rotateX(var(--drag-tilt-x,0deg)) rotateY(calc(180deg + var(--drag-tilt-y,0deg))) rotate(var(--drag-rot,0deg))!important}
#trading-stack.is-flipped.is-settling #trading-card{transform:perspective(1100px) translate(var(--carousel-main-x,0px),var(--carousel-main-y,0px)) rotateX(var(--carousel-main-tilt-x,0deg)) rotateY(calc(180deg + var(--carousel-main-tilt-y,0deg))) rotate(var(--carousel-main-rot,0deg))!important}
#trading-stack .trading-card-main,#trading-stack .trading-card-back{touch-action:none}

/* Dark mode uses the app's neutral surfaces around the cards. */
html[data-mode="dark"] .trading-showcase{--pet-ink:#f5f2ea;--pet-soft:#27262c;--pet-edge:#ffffff26;background:radial-gradient(circle at 55% 35%,#292830 0%,#1d1d23 48%,#151519 100%);border-color:#ffffff20;box-shadow:0 20px 52px #05050880,inset 0 1px 0 #ffffff12;color:#f5f2ea}
html[data-mode="dark"] .trading-glow{background:#ffffff0c}
html[data-mode="dark"] .trading-menu-current,
html[data-mode="dark"] .trading-collection-toggle{background:var(--pet-soft);border-color:var(--pet-edge);color:var(--pet-ink)}
html[data-mode="dark"] .trading-toggle-icon{background:#f5f2ea;color:#1d1d23}
html[data-mode="dark"] .trading-stage-controls{background:#27262ce8;border-color:var(--pet-edge);color:var(--pet-ink)!important;box-shadow:0 8px 24px #0006}
html[data-mode="dark"] .trading-stage-controls span{color:var(--pet-ink)}
html[data-mode="dark"] .trading-search-label input{background:#232329;border-color:var(--pet-edge);color:#f5f2ea}

/* Keep the next virtual card hidden until it enters the three-card view. */
#trading-stack .trading-card-back{opacity:var(--slot-opacity,1)}

/* Bottom accordion: two drawn strokes rotate smoothly from plus to ×. */
.trading-showcase .trading-collection{margin-top:8px}
.trading-showcase .trading-collection-toggle{display:flex;align-items:center;width:100%;min-height:56px;gap:8px;padding:11px 15px;border:1px solid #d8d7d1;border-radius:15px;background:#fffdf8d9;color:#29272a;text-align:left;font-size:14px;font-weight:850;box-shadow:0 4px 16px #29251e0d;transition:background .28s ease,border-color .28s ease,box-shadow .28s ease}
.trading-showcase .trading-collection-toggle:hover{background:#fff;box-shadow:0 7px 20px #29251e16}
.trading-collection-toggle #trading-count{margin-right:auto;color:#77736c;font-size:12px;font-weight:750}
.trading-showcase .trading-toggle-icon{position:relative;display:block;flex:none;width:30px;height:30px;border-radius:9px;background:#eeece6;color:#3b3a38;transform:rotate(0deg);transition:transform .38s cubic-bezier(.2,.8,.2,1),background .28s ease}
.trading-toggle-icon::before,.trading-toggle-icon::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;margin-left:-7px;margin-top:-1px;border-radius:2px;background:currentColor}
.trading-toggle-icon::after{transform:rotate(90deg)}
.trading-collection.is-open .trading-toggle-icon{transform:rotate(45deg)}
html[data-mode="dark"] .trading-showcase .trading-collection-toggle{background:#24242a;color:#f5f2ea;border-color:#ffffff26;box-shadow:0 5px 18px #0004}
html[data-mode="dark"] .trading-showcase .trading-collection-toggle:hover{background:#2b2b32}
html[data-mode="dark"] .trading-collection-toggle #trading-count{color:#aaa8b0}
html[data-mode="dark"] .trading-showcase .trading-toggle-icon{background:#3a3a42;color:#f5f2ea}
/* Real card (Sophia's A24 disc reference): crisp print, satin card stock, foil only on the holo parts, one soft wide light that moves with the tilt, a real card-stock edge. */
.trading-stack .trading-front::before{background:linear-gradient(calc(118deg + var(--card-lx,0) * 18deg),#fff0 calc(8% + var(--card-lx,0) * 34%),#ffffff26 calc(36% + var(--card-lx,0) * 34%),#ffffff3d calc(46% + var(--card-lx,0) * 34%),#ffffff1a calc(58% + var(--card-lx,0) * 34%),#fff0 calc(86% + var(--card-lx,0) * 34%));mix-blend-mode:screen;opacity:1}
.trading-stack .trading-card-main .trading-front::after{content:"";display:block!important;position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:12px;background:linear-gradient(calc(118deg + var(--card-lx,0) * 18deg),#0000 40%,#28201414 100%);background-size:100% 100%;mix-blend-mode:multiply;opacity:calc(.6 + var(--card-lx,0) * -.4);animation:none!important}
.trading-stack .trading-card-main .trading-front{box-shadow:inset 0 0 0 2px #fff9df,inset 0 1px 0 #ffffff,inset 0 -1px 1px #3a2f1f1f,var(--edge-x,0px) 1px 0 color-mix(in srgb,var(--tl) 72%,#3b3428),calc(var(--edge-x,0px) * 2) 2px 0 #f4eddd,calc(var(--edge-x,0px) * 2.6) 3px 0 #d3c9b2,calc(var(--edge-x,0px) * 6) 12px 22px #173d392e,calc(var(--edge-x,0px) * 10) 27px 42px #173d3926}
.trading-stack .trading-card-main .trading-art::before{background:linear-gradient(110deg,#c9d3d6 0%,#f4f6f2 calc(30% + var(--card-lx,0) * 40%),#ffffff calc(40% + var(--card-lx,0) * 40%),#d8c9a6 calc(55% + var(--card-lx,0) * 40%),#b9c6c9 100%);color:#2f4746;border-color:#ffffffd9;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 #0000001f,0 1px 2px #2a3c3a33}
.trading-stack .trading-card-main .trading-power b{background:linear-gradient(110deg,color-mix(in srgb,var(--tl) 80%,#2b2418) 0%,var(--tl) calc(28% + var(--card-lx,0) * 40%),color-mix(in srgb,var(--tl) 30%,#fff) calc(42% + var(--card-lx,0) * 40%),var(--tl) calc(56% + var(--card-lx,0) * 40%),color-mix(in srgb,var(--tl) 80%,#2b2418) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 #ffffffb3)}
@media(prefers-reduced-motion:reduce){.trading-stack{--card-lx:0;--card-ly:0;--edge-x:0px}}
.trading-stack .trading-card-main #trading-name{background:linear-gradient(110deg,color-mix(in srgb,var(--tl) 30%,#1f2724) 0%,color-mix(in srgb,var(--tl) 45%,#2c3531) calc(28% + var(--card-lx,0) * 40%),color-mix(in srgb,var(--tl) 45%,#c9cfc9) calc(42% + var(--card-lx,0) * 40%),color-mix(in srgb,var(--tl) 45%,#2c3531) calc(56% + var(--card-lx,0) * 40%),color-mix(in srgb,var(--tl) 30%,#1f2724) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 1px 0 #ffffffc0)}
/* Player handbook (Sophia 2026-10-20): ⓘ beside YOUR PETTÖ opens a pop-up book with a contents page and Apple Books-style page turns. */
.card-top-left{display:flex;align-items:center;gap:8px}
.handbook-button{width:30px;height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;color:inherit;opacity:.75;cursor:pointer}
.handbook-button:hover,.handbook-button:focus-visible{opacity:1;background:#8881}
.handbook{width:min(360px,calc(100% - 24px));padding:52px 0 14px;border:0;background:none;overflow:visible;color:#3a3340}
.handbook::backdrop{background:#000b;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.handbook-x{position:absolute;top:4px;right:4px;width:36px;height:36px;border:0;border-radius:50%;background:#ffffff1f;color:#f5f2ea;font-size:22px;line-height:1;cursor:pointer}
.book{position:relative;width:100%;aspect-ratio:3/4.3;max-height:calc(100dvh - 150px);margin:0 auto;perspective:1600px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.book-back{position:absolute;inset:-6px -8px -6px -4px;border-radius:6px 16px 16px 6px;background:var(--book-line,#a76c1c);box-shadow:0 22px 50px #0009}
.book-page,.leaf-front,.leaf-back{position:absolute;inset:0;border-radius:3px 12px 12px 3px;background:linear-gradient(90deg,#e9dfcc 0,#fbf5e9 7%,#fffaf1 60%,#f6eedf 100%);overflow:hidden}
.book-page{box-shadow:inset 0 0 0 1px #0000000d}
.bp-inner{position:absolute;inset:0;padding:26px 24px 34px 30px;overflow:auto;display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.5}
.bp-inner p{margin:0}
.bp-chapter{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--book-line,#a76c1c)}
.bp-title{margin:0;font-size:22px;line-height:1.15;color:#2d2833;text-wrap:balance}
.bp-folio{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:11px;color:#9a8f86}
.bp-pop{align-self:center;width:84px;height:84px;margin:4px 0 2px;--pop:var(--book,#f5b94e);perspective:300px}
.bp-pop svg{width:100%;height:100%;transform-origin:50% 95%;filter:drop-shadow(0 6px 4px #5a3d1a33)}
.book-page.popping .bp-pop svg{animation:bp-pop .7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes bp-pop{0%{transform:rotateX(-88deg) scale(.9)}100%{transform:rotateX(0) scale(1)}}
.book-page.popping .bp-inner>:not(.bp-pop){animation:bp-fade .45s .15s ease-out both}
@keyframes bp-fade{from{opacity:0;transform:translateY(6px)}}
.bp-contents{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;counter-reset:ch}
.bp-contents button{width:100%;display:flex;align-items:baseline;gap:6px;padding:7px 2px;border:0;background:none;color:#3a3340;font:inherit;font-size:14px;text-align:left;cursor:pointer;border-radius:6px}
.bp-contents button:hover,.bp-contents button:focus-visible{background:#a76c1c14}
.bp-contents span{flex:none;max-width:78%}
.bp-contents i{flex:1;border-bottom:1.5px dotted #b9ad9f;transform:translateY(-3px)}
.bp-contents em{font-style:normal;font-variant-numeric:tabular-nums;color:#8c8178}
.book-page.popping .bp-contents li{animation:bp-fade .4s ease-out both}
.book-leaf{position:absolute;inset:0;transform-origin:0 50%;transform-style:preserve-3d;z-index:2;--shade:0}
.leaf-front,.leaf-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf-back{transform:rotateY(180deg);background:linear-gradient(270deg,#e9dfcc 0,#f7f0e3 10%,#fbf5e9 100%)}
.leaf-shade{position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,#0000 40%,#3a2a1a 100%);opacity:calc(var(--shade) * .35)}
.book-cover{position:absolute;inset:-4px -6px -4px -2px;transform-origin:0 50%;transform-style:preserve-3d;z-index:3;transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity .25s .7s}
.book-cover.open{transform:rotateY(-178deg);opacity:0;pointer-events:none}
.book-cover-front,.book-cover-inside{position:absolute;inset:0;border-radius:5px 14px 14px 5px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.book-cover-front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--book-line,#a76c1c) 60%,var(--book,#f5b94e)) 0 7%,var(--book,#f5b94e) 9%);color:#2d2833;text-align:center;box-shadow:inset 0 0 0 3px #ffffff40}
.book-cover-front b{font-size:30px;line-height:1.05}
.book-cover-front small{font-size:13px;opacity:.75}
.book-egg{width:58px;height:74px;border-radius:50% 50% 48% 48%/60% 60% 40% 40%;background:#fffaf1;border:3px solid var(--book-line,#a76c1c);box-shadow:inset -6px -8px 0 #0000000f}
.book-cover-inside{transform:rotateY(180deg);background:#f3e9d6}
.book-nav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px;color:#f5f2ea;font-size:13px;font-variant-numeric:tabular-nums}
.book-nav button{min-width:40px;height:36px;padding:0 12px;border:0;border-radius:18px;background:#ffffff1f;color:#f5f2ea;font:inherit;font-size:14px;cursor:pointer}
.book-nav button#book-prev,.book-nav button#book-next{font-size:22px;line-height:1}
.book-nav button:disabled{opacity:.3;cursor:default}
@media(prefers-reduced-motion:reduce){.book-cover{transition:none}.book-page.popping *{animation:none!important}}
dialog.handbook{background:none!important;box-shadow:none!important;border:0!important;color:#3a3340}
.handbook .bp-title{color:#2d2833!important;font-size:22px}
.handbook .book-cover-front b{color:#2d2833!important}
/* The handbook at night: a dark linen book with cream ink, lit by the Pettö's colour. */
[data-mode="dark"] .handbook{color:#ece6dc}
[data-mode="dark"] .book-page,[data-mode="dark"] .leaf-front{background:linear-gradient(90deg,#141317 0,#232128 7%,#26242b 60%,#1f1d23 100%)}
[data-mode="dark"] .leaf-back{background:linear-gradient(270deg,#141317 0,#1f1d23 10%,#26242b 100%)}
[data-mode="dark"] .book-page{box-shadow:inset 0 0 0 1px #ffffff0d}
[data-mode="dark"] .handbook .bp-title{color:#f5efe4!important}
[data-mode="dark"] .bp-chapter{color:var(--book,#f5b94e)}
[data-mode="dark"] .bp-folio,[data-mode="dark"] .bp-contents em{color:#8d8794}
[data-mode="dark"] .bp-contents button{color:#ece6dc}
[data-mode="dark"] .bp-contents button:hover,[data-mode="dark"] .bp-contents button:focus-visible{background:#ffffff0f}
[data-mode="dark"] .bp-contents i{border-color:#55505c}
[data-mode="dark"] .bp-pop svg{filter:drop-shadow(0 6px 6px #0008)}
[data-mode="dark"] .leaf-shade{background:linear-gradient(90deg,#0000 40%,#000 100%)}
[data-mode="dark"] .book-cover-inside{background:#2a2730}
[data-mode="dark"] .book-back{box-shadow:0 0 0 1px #ffffff14,0 22px 50px #000c}
/* Each Pettö's book: paper and ink tinted with its egg colour, by day and by night. */
.book-page,.leaf-front{background:linear-gradient(90deg,color-mix(in srgb,var(--book,#f5b94e) 14%,#e9dfcc) 0,color-mix(in srgb,var(--book,#f5b94e) 8%,#fffaf1) 7%,color-mix(in srgb,var(--book,#f5b94e) 5%,#fffaf1) 60%,color-mix(in srgb,var(--book,#f5b94e) 10%,#f6eedf) 100%)}
.handbook .bp-inner p{color:color-mix(in srgb,var(--book-line,#a76c1c) 25%,#3a3340)}
[data-mode="dark"] .book-page,[data-mode="dark"] .leaf-front{background:linear-gradient(90deg,#141317 0,color-mix(in srgb,var(--book,#f5b94e) 9%,#232128) 7%,color-mix(in srgb,var(--book,#f5b94e) 6%,#26242b) 60%,color-mix(in srgb,var(--book,#f5b94e) 7%,#1f1d23) 100%)}
[data-mode="dark"] .handbook .bp-inner p{color:color-mix(in srgb,var(--book,#f5b94e) 15%,#e6e0d6)}
.book-pet{width:120px;height:120px;display:grid;place-items:center}
.book-pet>:not(.book-egg){width:100%;height:100%}
.book-pet img,.book-pet svg{max-width:100%;max-height:100%}
/* Curling leaf: a chain of hinged strips. Each face clips its slice of the full page. */
.leaf-strip{position:absolute;top:0;bottom:0;transform-origin:0 50%;transform-style:preserve-3d;--shade:0}
.leaf-face{position:absolute;inset:0;overflow:hidden;border-radius:0!important;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.leaf-face.leaf-front{background:none}
.leaf-content{position:absolute;top:0;bottom:0;background:linear-gradient(90deg,color-mix(in srgb,var(--book,#f5b94e) 14%,#e9dfcc) 0,color-mix(in srgb,var(--book,#f5b94e) 8%,#fffaf1) 7%,color-mix(in srgb,var(--book,#f5b94e) 5%,#fffaf1) 60%,color-mix(in srgb,var(--book,#f5b94e) 10%,#f6eedf) 100%)}
.leaf-face.leaf-back{transform:rotateY(180deg);background:color-mix(in srgb,var(--book,#f5b94e) 9%,#f7f0e3)}
.leaf-strip .leaf-shade{position:absolute;inset:0;pointer-events:none;background:#3a2a1a;border-radius:0;opacity:calc(var(--shade) * .32)}
.leaf-strip .leaf-back .leaf-shade{background:#fff;opacity:calc((1 - var(--shade)) * .25)}
[data-mode="dark"] .leaf-content{background:linear-gradient(90deg,#141317 0,color-mix(in srgb,var(--book,#f5b94e) 9%,#232128) 7%,color-mix(in srgb,var(--book,#f5b94e) 6%,#26242b) 60%,color-mix(in srgb,var(--book,#f5b94e) 7%,#1f1d23) 100%)}
[data-mode="dark"] .leaf-face.leaf-back{background:color-mix(in srgb,var(--book,#f5b94e) 7%,#2a2830)}
[data-mode="dark"] .leaf-strip .leaf-shade{background:#000}
[data-mode="dark"] .leaf-strip .leaf-back .leaf-shade{background:#fff;opacity:calc((1 - var(--shade)) * .06)}
/* Swipe up to close: the book follows your finger up and fades, then flies off. */
dialog.handbook{touch-action:none;transform:translateY(var(--lift,0px));opacity:var(--lift-fade,1);transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .3s}
dialog.handbook.lifting{transition:none}
dialog.handbook.leaving{transform:translateY(-110vh);opacity:0;transition:transform .32s cubic-bezier(.5,0,.8,.4),opacity .32s}
.handbook{padding-top:18px}
.book-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;color:#f5f2ea;opacity:.6;font-size:12px;letter-spacing:.04em}
@media(prefers-reduced-motion:no-preference){.book-hint svg{animation:book-hint 1.6s ease-in-out infinite}}
@keyframes book-hint{50%{transform:translateY(-3px)}}
/* Two-page spread in landscape and on an open iPhone Duo: the book fills the screen. */
dialog.handbook.spread{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;inset:0;padding:max(12px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column;align-items:center;justify-content:center}
dialog.handbook.spread[open]{display:flex}
.book.spread{aspect-ratio:6/4.3;width:min(100%,calc((100dvh - 96px) * 6 / 4.3));max-height:none;flex:none}
.book.spread .book-page{background:none;box-shadow:none}
.bp-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden}
.bp-left{left:0;border-radius:12px 3px 3px 12px;background:linear-gradient(270deg,color-mix(in srgb,var(--book,#f5b94e) 14%,#e9dfcc) 0,color-mix(in srgb,var(--book,#f5b94e) 8%,#fffaf1) 7%,color-mix(in srgb,var(--book,#f5b94e) 5%,#fffaf1) 60%,color-mix(in srgb,var(--book,#f5b94e) 10%,#f6eedf) 100%)}
.bp-right{right:0;border-radius:3px 12px 12px 3px;background:linear-gradient(90deg,color-mix(in srgb,var(--book,#f5b94e) 14%,#e9dfcc) 0,color-mix(in srgb,var(--book,#f5b94e) 8%,#fffaf1) 7%,color-mix(in srgb,var(--book,#f5b94e) 5%,#fffaf1) 60%,color-mix(in srgb,var(--book,#f5b94e) 10%,#f6eedf) 100%)}
[data-mode="dark"] .bp-left{background:linear-gradient(270deg,#141317 0,color-mix(in srgb,var(--book,#f5b94e) 9%,#232128) 7%,color-mix(in srgb,var(--book,#f5b94e) 6%,#26242b) 60%,color-mix(in srgb,var(--book,#f5b94e) 7%,#1f1d23) 100%)}
[data-mode="dark"] .bp-right{background:linear-gradient(90deg,#141317 0,color-mix(in srgb,var(--book,#f5b94e) 9%,#232128) 7%,color-mix(in srgb,var(--book,#f5b94e) 6%,#26242b) 60%,color-mix(in srgb,var(--book,#f5b94e) 7%,#1f1d23) 100%)}
.book.spread .bp-inner{font-size:clamp(11.5px,2.1dvh,15px);padding:5% 7% 9% 8%}
.book.spread .bp-left .bp-inner{padding:5% 8% 9% 7%}
.book.spread .bp-title{font-size:clamp(17px,3.4dvh,24px)}
.book.spread .bp-pop{width:clamp(48px,12dvh,84px);height:clamp(48px,12dvh,84px)}
.book.spread .bp-contents button{padding:clamp(3px,.9dvh,7px) 2px;font-size:inherit}
.book.spread .book-leaf{left:50%}
.book.spread .book-cover{left:calc(50% - 2px)}
.book.spread .leaf-content-back{background:linear-gradient(270deg,color-mix(in srgb,var(--book,#f5b94e) 14%,#e9dfcc) 0,color-mix(in srgb,var(--book,#f5b94e) 8%,#fffaf1) 7%,color-mix(in srgb,var(--book,#f5b94e) 5%,#fffaf1) 60%,color-mix(in srgb,var(--book,#f5b94e) 10%,#f6eedf) 100%)}
[data-mode="dark"] .book.spread .leaf-content-back{background:linear-gradient(270deg,#141317 0,color-mix(in srgb,var(--book,#f5b94e) 9%,#232128) 7%,color-mix(in srgb,var(--book,#f5b94e) 6%,#26242b) 60%,color-mix(in srgb,var(--book,#f5b94e) 7%,#1f1d23) 100%)}
.book.spread::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 10px);width:20px;pointer-events:none;background:linear-gradient(90deg,#0000,#0000001f 45%,#0000002e 50%,#0000001f 55%,#0000);z-index:1}
.handbook.spread .book-nav{margin-top:10px}
.handbook.spread .book-hint{margin-top:6px}
/* Spreads use the screen's height: short landscape phones get wide, low pages so nothing is cut off. */
.book.spread{aspect-ratio:auto;height:calc(100dvh - 78px);width:min(100%,calc((100dvh - 78px) * 2.2))}
@media (max-height:500px){
  .book.spread .bp-inner{font-size:11.5px;gap:5px;line-height:1.4;padding:4% 6% 8% 7%}
  .book.spread .bp-left .bp-inner{padding:4% 7% 8% 6%}
  .book.spread .bp-title{font-size:17px}
  .book.spread .bp-pop{width:40px;height:40px;margin:0}
  .book.spread .bp-contents{gap:0;margin:0}
  .book.spread .bp-contents button{padding:1.5px 2px;font-size:11.5px}
  .book.spread .bp-folio{bottom:5px}
  .handbook.spread .book-nav{margin-top:6px}
  .handbook.spread .book-nav button{height:30px;min-width:34px}
  .handbook.spread .book-hint{margin-top:2px;font-size:11px}
}
/* Corner peel: the leaf is anchored at the spine and tilted; its strips are sized and placed from script. */
.book-leaf{right:auto!important;bottom:auto!important;left:0;top:0;width:0;height:0;transform-origin:0 0}
.leaf-strip{top:0;bottom:auto}
.leaf-face{background:none!important;border-radius:0!important}
.leaf-content{top:0!important;left:0!important;bottom:auto!important;transform-origin:0 0;overflow:hidden;border-radius:3px 12px 12px 3px}
.leaf-content-back{background:color-mix(in srgb,var(--book,#f5b94e) 9%,#f7f0e3)}
[data-mode="dark"] .leaf-content-back{background:color-mix(in srgb,var(--book,#f5b94e) 7%,#2a2830)}
.leaf-strip .leaf-shade{display:none}
.leaf-content::after{content:"";position:absolute;inset:0;pointer-events:none;background:#3a2a1a;opacity:calc(var(--shade) * .3)}
.leaf-content-back::after{background:#fff;opacity:calc((1 - var(--shade)) * .2)}
[data-mode="dark"] .leaf-content::after{background:#000}
[data-mode="dark"] .leaf-content-back::after{background:#fff;opacity:calc((1 - var(--shade)) * .05)}
/* Shutting the cover: it shows again straight away and swings back over the pages. */
.book-cover:not(.open){transition:transform .9s cubic-bezier(.45,.05,.3,1),opacity 0s}
/* More detail in the handbook: 'Where' trails and little copies of the real buttons. */
.bp-where{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:0;padding:5px 10px;border-radius:10px;font-size:.88em;font-weight:600;background:color-mix(in srgb,var(--book,#f5b94e) 16%,transparent);color:color-mix(in srgb,var(--book-line,#a76c1c) 70%,#2d2833)}
.bp-where span{font-size:.78em;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.handbook .bp-inner p.bp-where{color:color-mix(in srgb,var(--book-line,#a76c1c) 70%,#2d2833)}
[data-mode="dark"] .handbook .bp-inner p.bp-where{color:color-mix(in srgb,var(--book,#f5b94e) 60%,#f5efe4)}
.bp-icon{display:inline-grid;place-items:center;width:1.55em;height:1.55em;margin:0 .2em -.4em 0;border-radius:50%;background:var(--ic);box-shadow:0 1px 2px #0002;vertical-align:baseline}
.bp-icon svg{width:62%;height:62%;fill:none;stroke:#3a3340;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bp-inner{gap:8px;font-size:13.5px}
.bp-more{padding-top:22px}
.bp-turn{margin-top:auto;padding-bottom:6px;text-align:right;font-size:11px;font-weight:700;color:color-mix(in srgb,var(--book-line,#a76c1c) 70%,#2d2833);opacity:.75}
[data-mode="dark"] .bp-turn{color:var(--book,#f5b94e)}
/* A bigger book (Sophia 2026-10-20): nearly the whole screen on a phone, up to a comfortable size on bigger screens. */
.handbook:not(.spread){width:min(540px,calc(100% - 16px));max-width:none}
.handbook:not(.spread) .book{aspect-ratio:auto;height:min(calc(100dvh - 104px),calc(min(540px,100vw - 16px) * 1.5));max-height:none}
.handbook:not(.spread) .bp-inner{font-size:clamp(13.5px,1.9dvh,16px);padding:24px 22px 34px 28px}
/* Short landscape phones: smaller type, and a long page scrolls up and down inside itself (sideways still turns). */
@media (max-height:500px){
  .book.spread .bp-inner{font-size:11px;gap:4px;line-height:1.35;touch-action:pan-y;overscroll-behavior:contain}
  .book.spread .bp-where{padding:3px 8px}
  .book.spread .bp-pop{width:34px;height:34px}
  .book.spread .bp-more{padding-top:4%}
  .book.spread .bp-turn{padding-bottom:0}
}
@media (max-height:500px){.book.spread{width:min(100%,calc((100dvh - 70px) * 2.9));height:calc(100dvh - 70px)}}
/* While the handbook is open the page behind it stays still. */
html.book-open,html.book-open body{overflow:hidden;overscroll-behavior:none}
dialog.handbook{overscroll-behavior:contain}

/* The preview's Cards tab (?cards): only the card deck, nothing around it. */
html.cards-only body > :not(.app-shell):not(script), html.cards-only .sidebar, html.cards-only main#home > :not(.trading-showcase){display:none!important}
html.cards-only .app-shell{display:block;padding:0}
html.cards-only main#home{max-width:none;padding:12px}
html.cards-only .trading-showcase.off-page{display:grid!important}

/* Your first card (Sophia 2026-10-21): a sealed card floats in Traits once the egg hatches; tapping it opens the reveal,
   swiping it down sends it into the card deck. */
.card-back-art{position:relative;display:grid;place-items:center;align-content:center;gap:.35em;box-sizing:border-box;width:100%;height:100%;overflow:hidden;border:.36em solid #fff4d6;border-radius:1em;color:#fff6dc;text-align:center;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--tc,#ffd77d) 75%,#fff) 0,color-mix(in srgb,var(--tc,#ffd77d) 55%,transparent) 18%,transparent 46%),repeating-conic-gradient(from 0deg at 50% 42%,#ffffff14 0 6deg,transparent 6deg 15deg),linear-gradient(160deg,color-mix(in srgb,var(--tl,#d99a3e) 60%,#2b1f4a),color-mix(in srgb,var(--tl,#d99a3e) 30%,#151230));box-shadow:inset 0 0 0 .14em #e9c27a,inset 0 0 1.6em #0007}
.card-back-art .cb-ring{position:absolute;left:50%;top:42%;width:6.2em;height:6.2em;margin:-3.1em 0 0 -3.1em;border:.1em solid #f3d38f;border-radius:50%;box-shadow:0 0 1.2em color-mix(in srgb,var(--tc,#ffd77d) 70%,transparent),inset 0 0 1em #fff3;outline:.08em dashed #f3d38f88;outline-offset:.45em;animation:cb-ring 14s linear infinite}
.card-back-art .cb-emblem{position:relative;margin-top:-1.4em;font-size:3.6em;line-height:1;color:#fff8e2;text-shadow:0 0 .25em #fff,0 0 .6em var(--tc,#ffd77d)}
.card-back-art .cb-word{position:relative;margin-top:2.2em;font-size:.95em;font-weight:900;letter-spacing:.32em;text-indent:.32em}
.card-back-art .cb-sub{position:relative;font-size:.55em;font-weight:800;letter-spacing:.28em;text-indent:.28em;color:#f3d38f}
.card-back-art .cb-sheen{position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 38%,#ffffff55 46%,#c9f3ff40 50%,#ffd9f540 54%,transparent 62%);mix-blend-mode:screen;animation:cb-sheen 3.6s ease-in-out infinite}
@keyframes cb-ring{to{transform:rotate(360deg)}}
@keyframes cb-sheen{0%,35%{transform:translateX(-45%)}75%,100%{transform:translateX(45%)}}

.first-card{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,48px);flex-wrap:wrap;margin:6px auto 26px;padding:18px 12px 8px;text-align:left}
.first-card .fc-text{display:grid;gap:4px;max-width:240px}
.first-card .fc-text strong{font-size:22px;line-height:1.15}
.first-card .fc-text small{opacity:.75;font-size:14px}
.first-card .fc-card{position:relative;width:150px;height:220px;padding:0;border:0;background:none;cursor:pointer;font-size:10.2px;perspective:700px;-webkit-tap-highlight-color:transparent}
.first-card .fc-float{position:absolute;inset:0;display:block;border-radius:1em;box-shadow:0 18px 30px #0004,0 0 0 1px #fff3;animation:fc-float 3.4s ease-in-out infinite;transform-style:preserve-3d}
.first-card .fc-halo{position:absolute;inset:-30px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 70%,transparent),transparent 65%);filter:blur(6px);animation:fc-halo 3.4s ease-in-out infinite}
.first-card .fc-card i{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px color-mix(in srgb,var(--tc) 80%,#fff);opacity:0;animation:fc-spark 3s ease-in-out infinite}
.first-card .fc-card i:nth-of-type(1){--x:-92px;--y:-70px}.first-card .fc-card i:nth-of-type(2){--x:88px;--y:-96px;animation-delay:.5s}.first-card .fc-card i:nth-of-type(3){--x:96px;--y:40px;animation-delay:1s}.first-card .fc-card i:nth-of-type(4){--x:-86px;--y:72px;animation-delay:1.5s}.first-card .fc-card i:nth-of-type(5){--x:10px;--y:-132px;animation-delay:2s}.first-card .fc-card i:nth-of-type(6){--x:-14px;--y:128px;animation-delay:2.5s}
.first-card .fc-card:hover .fc-float,.first-card .fc-card:focus-visible .fc-float{animation-duration:1.6s}
.first-card .fc-card:focus-visible{outline:3px solid var(--tl);outline-offset:8px;border-radius:14px}
.first-card.fc-opened .fc-card{visibility:hidden}
@keyframes fc-float{0%,100%{transform:translateY(0) rotate(-4deg) rotateY(-12deg)}50%{transform:translateY(-14px) rotate(3deg) rotateY(12deg)}}
@keyframes fc-halo{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.06)}}
@keyframes fc-spark{0%,100%{opacity:0;transform:translate(0,0) scale(.3)}40%{opacity:1}70%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}

body.card-reveal-open{overflow:hidden}
.card-reveal{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;color:#fff8e6;--pull:0}
.card-reveal .cr-backdrop{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,color-mix(in srgb,var(--tc) 40%,#1b1630) 0,#0d0b16 62%);opacity:0;transition:opacity .45s ease}
.card-reveal.cr-on .cr-backdrop{opacity:calc(.96 - var(--pull) * .55)}
.card-reveal.cr-leaving .cr-backdrop{opacity:0;transition:opacity .8s ease}
.card-reveal .cr-mover{position:absolute;left:50%;top:50%;width:294px;height:430px;margin:-215px 0 0 -147px;transform:scale(var(--fit,1));will-change:transform}
.card-reveal .cr-float{position:absolute;inset:0;perspective:1300px}
.card-reveal.cr-ready:not(.cr-dragging):not(.cr-leaving) .cr-float{animation:cr-bob 3.2s ease-in-out infinite}
.card-reveal .cr-spin{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(180deg)}
.card-reveal .cr-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-reveal .cr-back{transform:rotateY(180deg);font-size:19.6px;box-shadow:0 30px 60px #0008}
.card-reveal .cr-front.trading-stack{width:294px!important;max-width:none;height:430px!important;margin:0;animation:none!important}
.card-reveal .cr-front .trading-card-main{position:absolute;inset:0;left:0!important;top:0!important;cursor:default;touch-action:none}
.card-reveal .cr-front .trading-front{box-shadow:0 30px 60px #0009,inset 0 0 0 2px #fff6ce!important}
.card-reveal .cr-holo{position:absolute;inset:0;border-radius:19px;pointer-events:none;overflow:hidden;opacity:0;background:linear-gradient(115deg,transparent 30%,#ffffffb0 45%,#b9f2ff80 50%,#ffc8f080 55%,transparent 70%) -200% 0/250% 100% no-repeat;mix-blend-mode:screen}
.card-reveal.cr-charge .cr-mover>.cr-float{animation:cr-charge .7s ease-in both}
.card-reveal.cr-charge .cr-back{box-shadow:0 0 50px 8px color-mix(in srgb,var(--tc) 85%,#fff),0 30px 60px #0008;transition:box-shadow .6s ease}
.card-reveal.cr-flip .cr-spin{animation:cr-spin 1.5s cubic-bezier(.15,.7,.2,1) forwards}
.card-reveal .cr-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,#fff 0,color-mix(in srgb,var(--tc) 70%,#fff) 22%,transparent 60%)}
.card-reveal.cr-revealed .cr-flash{animation:cr-flash 1.1s ease-out forwards}
.card-reveal .cr-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;pointer-events:none;opacity:0;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tc) 55%,transparent) 0 5deg,transparent 5deg 18deg);-webkit-mask:radial-gradient(circle,#000 0,#0008 22%,transparent 52%);mask:radial-gradient(circle,#000 0,#0008 22%,transparent 52%);transition:opacity 1s ease}
.card-reveal.cr-revealed .cr-rays{opacity:calc(.8 - var(--pull) * .8);animation:cr-rays 24s linear infinite}
.card-reveal.cr-leaving .cr-rays,.card-reveal.cr-leaving .cr-title,.card-reveal.cr-leaving .cr-name,.card-reveal.cr-leaving .cr-add{opacity:0!important;transition:opacity .3s ease}
.card-reveal.cr-revealed .cr-holo{animation:cr-holo 1.4s .1s ease-in-out forwards}
.card-reveal .cr-sparks{position:absolute;left:50%;top:50%;width:0;height:0}
.card-reveal .cr-sparks i{position:absolute;width:12px;height:12px;margin:-6px;opacity:0;background:#fff;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);filter:drop-shadow(0 0 6px var(--tc))}
.card-reveal.cr-revealed .cr-sparks i{animation:cr-spark 1.3s cubic-bezier(.1,.7,.3,1) forwards}
.card-reveal .cr-title,.card-reveal .cr-name{position:absolute;left:0;right:0;margin:0;padding:0 16px;text-align:center;opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.card-reveal .cr-title{top:max(28px,calc(50% - 215px * var(--fit,1) - 66px));font-size:13px;font-weight:900;letter-spacing:.3em;color:color-mix(in srgb,var(--tc) 60%,#fff)}
.card-reveal .cr-name{top:calc(50% + 215px * var(--fit,1) + 18px);font-size:17px}
.card-reveal.cr-on .cr-title{opacity:1;transform:none}
.card-reveal.cr-revealed .cr-title{opacity:calc(1 - var(--pull))}
.card-reveal.cr-revealed .cr-name{opacity:calc(1 - var(--pull));transform:none;transition-delay:.25s}
.card-reveal .cr-add{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,10px);display:flex;align-items:center;gap:8px;padding:8px 12px;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;font-size:14px;font-weight:700;white-space:nowrap;text-shadow:0 1px 6px #0009;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.card-reveal .cr-add span{font-size:20px;line-height:.6;animation:cr-chev 1.4s ease-in-out infinite}
.card-reveal.cr-ready .cr-add{opacity:calc(1 - var(--pull) * 1.5);pointer-events:auto;transform:translate(-50%,0)}
@keyframes cr-bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-8px) rotate(.6deg)}}
@keyframes cr-charge{0%{transform:none}20%{transform:translateX(-3px) rotate(-1.5deg) scale(.98)}40%{transform:translateX(4px) rotate(1.5deg) scale(.97)}60%{transform:translateX(-5px) rotate(-2deg) scale(.96)}80%{transform:translateX(5px) rotate(2deg) scale(.95)}100%{transform:scale(.94)}}
@keyframes cr-spin{0%{transform:rotateY(180deg) scale(.94)}45%{transform:rotateY(760deg) scale(1.16)}100%{transform:rotateY(1080deg) scale(1)}}
@keyframes cr-flash{0%{opacity:0}12%{opacity:.95}100%{opacity:0}}
@keyframes cr-rays{to{transform:rotate(360deg)}}
@keyframes cr-holo{0%{opacity:1;background-position:-200% 0}100%{opacity:0;background-position:250% 0}}
@keyframes cr-spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scale(.2)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--d) * -1.6)) scale(var(--s)) rotate(180deg)}}
@keyframes cr-chev{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}

/* Landing in the deck: the deck card waits hidden, then the deck glows, rings out and says who joined. */
.trading-stack .trading-card-main.card-incoming{opacity:0!important}
.trading-stage.card-landed .trading-stack{animation:deck-take 1s cubic-bezier(.2,1.5,.4,1)}
.trading-stage.card-landed .trading-card-main .trading-front{animation:deck-glow 1.6s ease-out}
.trading-stage.card-landed .trading-stack::after{content:"";position:absolute;z-index:4;left:calc(50% - 147px);top:0;width:294px;height:430px;box-sizing:border-box;border-radius:24px;border:3px solid color-mix(in srgb,var(--tc) 70%,#fff);pointer-events:none;animation:deck-ring 1.1s ease-out forwards}
.trading-stage .deck-new-chip{position:absolute;z-index:5;left:50%;top:-6px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:#20362d;color:#fff8e6;font-size:13px;font-weight:800;white-space:nowrap;box-shadow:0 8px 20px #0003;animation:deck-chip 3.2s ease forwards;pointer-events:none}
@keyframes deck-take{0%{transform:translateY(0) scale(1)}25%{transform:translateY(10px) scale(.97)}100%{transform:none}}
@keyframes deck-glow{0%{filter:brightness(1.6) saturate(1.3)}100%{filter:none}}
@keyframes deck-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes deck-chip{0%{opacity:0;transform:translate(-50%,8px)}12%,80%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-6px)}}
@media(prefers-reduced-motion:reduce){.first-card .fc-float,.first-card .fc-halo,.first-card .fc-card i,.card-back-art .cb-ring,.card-back-art .cb-sheen{animation:none!important}.card-reveal .cr-spin{transform:none}.card-reveal .cr-title,.card-reveal .cr-name,.card-reveal .cr-add{opacity:1;transform:none}}