@import url('fonts/fonts.css');
: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}
.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(5,minmax(0,1fr));gap:8px}
.pet-store-art{width:100%;aspect-ratio:1;margin:0 auto 4px}.pet-store-art img{display:block;width:100%;height:100%;object-fit:contain}
/* Small cards, five across (Sophia, 2026-11-04): the picture, the name, the price and one short button. The longer text is in the card's tooltip,
   and tapping a locked blob says what to do. */
.pet-store-item{padding:7px 4px 6px;text-align:center;display:flex;flex-direction:column}
.pet-store-item h3{font-size:10.5px;margin:0 0 3px;line-height:1.15;overflow-wrap:anywhere}
.pet-store-item p{display:none}
.pet-store-item .shop-item-footer{flex-direction:column;gap:3px;margin-top:auto}
.pet-store-item .shop-item-footer span{font-size:9.5px}
.pet-store-item .shop-item-footer button{width:100%;padding:5px 2px;border-radius:7px;font-size:8.5px;line-height:1.15}
.pet-store-item.locked .pet-store-art{filter:grayscale(.6);opacity:.6}
.pet-store-sub{grid-column:1/-1;margin:10px 2px 0;font:900 15px Nunito,sans-serif;color:var(--ink-b,#5b4636);display:flex;align-items:baseline;justify-content:space-between;gap:8px}.pet-store-sub small{font-size:11px;font-weight:800;opacity:.65}
.room-animal{position:absolute;z-index:3;right:13%;bottom:4px;width:78px;pointer-events:none}.room-animal:not(:empty){pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.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}
/* Tapping the shop pet (Sophia 2026-11-12): a jump with a heart, three quick taps a happy spin, asleep a sleepy wiggle. */
.room-animal.pal-jump img{animation:paljump .5s cubic-bezier(.3,1.6,.5,1)}.room-animal.pal-spin img{animation:palspin .8s ease-in-out}.room-animal.pal-wiggle img{animation:palwiggle .5s ease-in-out}
@keyframes paljump{0%{transform:scale(1.12,.86)}40%{transform:translateY(-16px) scale(.94,1.08)}100%{transform:none}}
@keyframes palspin{0%{transform:scale(1.1,.88)}30%{transform:translateY(-18px) rotate(0)}70%{transform:translateY(-18px) rotate(360deg)}100%{transform:rotate(360deg)}}
@keyframes palwiggle{0%,100%{transform:none}25%{transform:rotate(-7deg)}75%{transform:rotate(7deg)}}
.pal-heart{position:absolute;left:50%;top:0;font:900 18px Nunito,sans-serif;color:#ff7fa8;pointer-events:none;animation:palheart 1s ease-out forwards}
.rub-heart{position:fixed;z-index:60;top:auto}
@keyframes palheart{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translate(calc(-50% + var(--dx,0px)),-46px) scale(1.15);opacity:0}}
@media(prefers-reduced-motion:reduce){.room-animal img{animation:none!important}.pal-heart{animation-duration:.01s}}
@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){.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. */
/* The little eggs go round by turning an angle (--spin) inside each one's own transform, so their trait words stay
   upright by construction instead of relying on a second, counter-turning animation staying in step (Sophia, 2026-10-21).
   Each one animates its own angle: an inherited one would restart their transform transitions every frame. */
@property --spin{syntax:'<angle>';inherits:true;initial-value:0deg}
@keyframes eggspin{to{--spin:360deg}}
.egg-moons{position:absolute;inset:0}
.egg-moons span{animation:eggspin 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(calc(var(--a) + var(--spin))) translateY(0) rotate(calc((var(--a) + var(--spin)) * -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(calc(var(--a) + var(--spin))) translateY(calc(var(--orbit) * -1)) rotate(calc((var(--a) + var(--spin)) * -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%}.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(calc(var(--a) + var(--spin))) translateY(0) rotate(calc((var(--a) + var(--spin)) * -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(calc(var(--a) + var(--spin))) translateY(calc(var(--orbit) * -1.5)) rotate(calc((var(--a) + var(--spin)) * -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:none}
/* touch-action:none, not manipulation: with manipulation the iPhone took a downward swipe as a page scroll and cancelled it,
   so "Swipe down to take them home" never went home (Sophia, 2026-11-09). */
.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%;cursor:pointer;-webkit-tap-highlight-color:transparent}
.water-bottle:active{transform:scale(.97)}
.water-bottle:focus-visible{outline:3px solid #59b6ec;outline-offset:6px;border-radius:30px}
.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) */
/* The end of the page clears the home bar too, so it springs back into view instead of being cut off by the screen edge (Sophia 2026-10-25). */
.app-shell{padding-bottom:calc(46px + env(safe-area-inset-bottom))}
.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}
/* Custard's Vanilla Caramel egg keeps its caramel mark on Home and in the card deck too (2026-10-21). */
.home-egg.custard .custard-mark,.trading-egg.custard .custard-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}
/* In the flow at the foot of the page, so on a page that scrolls (the contents) it sits under the last line, not over it (2026-11-07). */
.bp-folio{margin-top:auto;margin-bottom:-22px;flex:none;text-align:center;font-size:11px;color:#9a8f86;pointer-events:none}
.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;flex:none}
.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}
/* ?dex: only the Pettodex egg field, filling the frame (the preview's Egg Pettodex switch). */
html.dex-only body > :not(dialog#collection):not(script){visibility:hidden!important}
html.dex-only #dex-exit,html.dex-only #closeCollection{display:none!important}
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}}
/* While a pop-up such as the Egg Incubator is open, scrolling moves the pop-up, not the page behind it
   (Sophia 2026-10-21: on the iPhone the back page scrolled instead). */
html:has(dialog:modal),html:has(dialog:modal) body{overflow:hidden;overscroll-behavior:none}
dialog:modal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
dialog#collection{overflow-y:auto}
/* Tapping your hatched Pettö gives a little squish (Sophia 2026-10-22). */
.pet.pet-poke>*{animation:petpoke .45s cubic-bezier(.34,1.56,.64,1);transform-origin:50% 100%}
@keyframes petpoke{30%{transform:scale(1.08,.9)}60%{transform:scale(.96,1.05)}}
@media(prefers-reduced-motion:reduce){.pet.pet-poke>*{animation:none}}
.profile-data #log-out{display:block;width:100%;margin:12px 0 6px!important;padding:12px 16px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:999px;color:var(--ink);text-decoration:none;font-size:14px;font-weight:800}.profile-data #log-out:disabled{opacity:.5}
/* Today's wellbeing dashboard (Sophia, 2026-10-22): 'Little wins add up' in the Mega UI look. A console with a balance
   dial, a selector knob and faders sits on top, and each tile becomes a channel strip with a ring gauge and a fader groove.
   Brushed silver hardware in day mode, smoked charcoal at night. dashboard.js adds .wb-on, so without it nothing changes. */
@property --p{syntax:'<number>';inherits:true;initial-value:0}
@property --score{syntax:'<number>';inherits:true;initial-value:0}
:is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor,.sg-hub){--mu-panel:linear-gradient(160deg,#fbfbfa,#ecebe8);--mu-deep:#e4e3df;--mu-ink:#26282b;--mu-dim:#7b7f84;--mu-edge:#ffffff;--mu-rim:#00000012;--mu-groove:#d4d3cf;--mu-groove-in:inset 0 1px 3px #0000002b,inset 0 -1px 0 #fff;--mu-knob:#f4f3f0;--mu-knob-shadow:0 6px 12px #00000024,0 1px 2px #0000001f;--mu-screen:linear-gradient(180deg,#1d2023,#131517);--mu-screen-ink:#eef3f1;--mu-tick:#c8c6c1;--mu-lift:0 1px 0 var(--mu-edge) inset,0 8px 22px #00000012}
/* In day mode the hardware takes your Pettö's own colour (Sophia, 2026-10-22); the signal colours stay so each one reads apart. */
html:not([data-mode="dark"]) :is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor,.sg-hub){--pc:var(--petto,#f5b94e);--pcd:var(--petto-deep,#a76c1c);--mu-panel:linear-gradient(160deg,color-mix(in srgb,var(--pc) 16%,#fff),color-mix(in srgb,var(--pc) 30%,#f1efea));--mu-deep:color-mix(in srgb,var(--pc) 34%,#ebe8e2);--mu-ink:color-mix(in srgb,var(--pcd) 60%,#1f1d22);--mu-dim:color-mix(in srgb,var(--pcd) 70%,#8a8a8a);--mu-rim:color-mix(in srgb,var(--pcd) 18%,transparent);--mu-groove:color-mix(in srgb,var(--pc) 45%,#cfcac2);--mu-tick:color-mix(in srgb,var(--pc) 55%,#c8c3bb);--mu-knob:color-mix(in srgb,var(--pc) 16%,#fff);--mu-knob-shadow:0 6px 12px color-mix(in srgb,var(--pcd) 24%,transparent),0 1px 2px #0000001f;--mu-screen:linear-gradient(180deg,color-mix(in srgb,var(--pcd) 40%,#15161a),color-mix(in srgb,var(--pcd) 25%,#0c0d0f))}
html[data-mode="dark"] :is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor,.sg-hub){--mu-panel:linear-gradient(160deg,#25282b,#1a1c1e);--mu-deep:#141517;--mu-ink:#eceeef;--mu-dim:#878c91;--mu-edge:#ffffff12;--mu-rim:#00000080;--mu-groove:#0c0d0e;--mu-groove-in:inset 0 2px 4px #000000b0,inset 0 -1px 0 #ffffff10;--mu-knob:#3c4044;--mu-knob-shadow:0 8px 16px #00000080,0 1px 2px #00000070;--mu-screen:linear-gradient(180deg,#0e1011,#08090a);--mu-tick:#3a3e42;--mu-lift:0 1px 0 var(--mu-edge) inset,0 10px 26px #00000066}
.wb-console{display:grid;grid-template-columns:minmax(170px,210px) 1fr;gap:16px;margin:4px 0 16px;padding:16px;border-radius:22px;background:var(--mu-panel);box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim);color:var(--mu-ink)}
.wb-dial{position:relative;aspect-ratio:1;align-self:center;border-radius:50%;background:radial-gradient(circle,var(--mu-deep) 0 54%,transparent 55%)}
.wb-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wb-ticks line{stroke:var(--mu-tick);stroke-width:2;stroke-linecap:round;transition:stroke .4s}.wb-ticks line.long{stroke-width:3}
.wb-ticks line.lit{stroke:var(--acc,#6fd49a);filter:drop-shadow(0 0 3px var(--acc,#6fd49a))}
.wb-arc-track,.wb-arc{fill:none;stroke-width:5;stroke-linecap:round}.wb-arc-track{stroke:var(--mu-groove)}
.wb-arc{stroke:var(--acc,#6fd49a);stroke-dasharray:calc(var(--score) * 1) 100;filter:drop-shadow(0 0 5px var(--acc,#6fd49a));transition:--score .8s ease,stroke .4s}
.wb-dial-face{position:absolute;inset:24%;display:grid;place-content:center;text-align:center;border-radius:50%;background:var(--mu-knob);box-shadow:var(--mu-knob-shadow)}
.wb-dial-face strong{font:900 clamp(30px,4.2vw,42px)/1 Nunito,'DM Sans',sans-serif;letter-spacing:-.02em;color:var(--mu-ink)}
.wb-dial-face span{margin-top:3px;font-size:8.5px;font-weight:900;letter-spacing:.22em;color:var(--mu-dim)}
.wb-dial-face small{margin-top:4px;font-size:9px;color:var(--mu-dim)}
.wb-side{display:grid;gap:12px;align-content:center;min-width:0}
.wb-screen{position:relative;min-width:0;padding:12px 14px 13px;border-radius:14px;background:var(--mu-screen);color:var(--mu-screen-ink,#eceeef);box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge);overflow:hidden}
.wb-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,#ffffff06 0 1px,transparent 1px 3px)}
.wb-screen-top{display:flex;align-items:center;gap:8px;font:800 9px/1 'DM Sans',ui-monospace,monospace;letter-spacing:.18em;color:#9aa1a6}
.wb-screen-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wb-screen-pct{color:var(--acc);text-shadow:0 0 8px var(--acc)}
.wb-led{width:7px;height:7px;flex:none;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc),0 0 2px #fff inset;animation:wbpulse 2.4s ease-in-out infinite}
@keyframes wbpulse{50%{opacity:.45}}
.wb-screen-value{display:block;margin:7px 0 2px;font:900 25px/1.1 Nunito,'DM Sans',sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-screen-note{display:block;min-height:1.3em;font-size:10.5px;color:#8f969b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-screen-bar{height:3px;margin-top:9px;border-radius:3px;background:#ffffff14}
.wb-screen-bar i{display:block;height:100%;width:calc(var(--p) * 1%);border-radius:inherit;background:var(--acc);box-shadow:0 0 8px var(--acc);transition:--p .6s ease}
.wb-controls{display:flex;align-items:center;gap:12px;min-width:0}
.wb-knob{--turn:-135deg;position:relative;flex:none;width:58px;height:58px;border-radius:50%;cursor:grab;touch-action:none;outline:none}
.wb-knob.turning{cursor:grabbing}
.wb-knob-cap{position:absolute;inset:7px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffffff08 0 4deg,#00000008 4deg 8deg),var(--mu-knob);box-shadow:var(--mu-knob-shadow);transform:rotate(var(--turn));transition:transform .28s cubic-bezier(.3,1.5,.5,1)}
.wb-knob-cap i{position:absolute;left:50%;top:5px;width:3px;height:11px;margin-left:-1.5px;border-radius:2px;background:var(--acc);box-shadow:0 0 6px var(--acc)}
.wb-knob b{position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--mu-tick);transform:rotate(var(--a)) translateY(-28px)}
.wb-knob:focus-visible .wb-knob-cap{box-shadow:var(--mu-knob-shadow),0 0 0 3px var(--acc)}
.wb-control-text{flex:1;min-width:0;display:grid;gap:3px}
.wb-control-text span{font-size:9px;font-weight:900;letter-spacing:.2em;color:var(--mu-dim)}
.wb-control-text small{font-size:10px;color:var(--mu-dim);opacity:.8}
.wb-show{flex:none;border:0;border-radius:999px;padding:9px 15px;font-size:11px;font-weight:900;color:var(--mu-ink);background:var(--mu-knob);box-shadow:var(--mu-knob-shadow);transition:transform .15s}
.wb-show:active{transform:translateY(1px) scale(.98)}
.wb-show:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.wb-faders{grid-column:1/-1;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:12px 8px 8px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.wb-fader{display:grid;justify-items:center;gap:7px;min-width:0;padding:4px 0;border:0;border-radius:10px;background:none;color:var(--mu-dim);-webkit-tap-highlight-color:transparent}
.wb-fader:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.wb-groove{position:relative;width:6px;height:74px;border-radius:6px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
.wb-groove i{position:absolute;left:0;right:0;bottom:0;height:calc(var(--p) * 1%);border-radius:inherit;background:var(--acc);box-shadow:0 0 8px var(--acc);opacity:.85;transition:--p .6s ease}
.wb-groove b{position:absolute;left:50%;bottom:calc(var(--p) * 1%);width:24px;height:12px;margin:0 0 -6px -12px;border-radius:4px;background:#eceae6;box-shadow:0 2px 5px #00000044;transition:bottom .6s ease}
html[data-mode="dark"] .wb-groove b{background:#4a4e52}
.wb-groove b::after{content:"";position:absolute;left:4px;right:4px;top:50%;height:1px;background:var(--acc)}
.wb-fader-led{width:5px;height:5px;border-radius:50%;background:var(--mu-tick)}
.wb-fader.good .wb-fader-led{background:var(--acc);box-shadow:0 0 6px var(--acc)}
.wb-fader small{font:900 8.5px/1 'DM Sans',sans-serif;letter-spacing:.14em}
.wb-fader[aria-pressed="true"]{color:var(--mu-ink);background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--acc) 16%,transparent))}
.wb-fader[aria-pressed="true"] .wb-groove b{box-shadow:0 3px 6px #00000055,0 0 0 2px var(--acc),0 0 10px var(--acc)}
/* Each tile becomes a channel strip: ring gauge on the left, the reading beside it, a lit fader groove underneath. */
html .metrics.wb-on .metric-grid{gap:10px}
html .metrics.wb-on .metric-grid>.metric{display:grid;grid-template-columns:58px minmax(0,1fr);column-gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:var(--mu-panel);box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim);color:var(--mu-ink);transition:box-shadow .3s,transform .3s}
html .metrics.wb-on .metric-grid>.metric>*{grid-column:2}
html .metrics.wb-on .metric-grid>.metric>.metric-more{grid-column:1/-1}
html .metrics.wb-on .metric-grid>.metric.wb-picked{box-shadow:var(--mu-lift),0 0 0 1px color-mix(in srgb,var(--acc) 55%,transparent),0 0 22px color-mix(in srgb,var(--acc) 22%,transparent)}
html .metrics.wb-on .metric-grid>.metric.wb-flash{animation:wbflash 1.1s ease}
@keyframes wbflash{30%{transform:scale(1.015);box-shadow:var(--mu-lift),0 0 0 2px var(--acc),0 0 30px var(--acc)}}
/* :not(#wb) lifts it over the petto colour rule, whose :is() list holds an id. */
html .metrics.wb-on .metric-grid>.metric>.metric-icon:not(#wb){grid-column:1;grid-row:1/span 4;align-self:center;width:58px;height:58px;margin:0;display:grid;place-items:center;border-radius:50%;font-size:18px;color:var(--acc);background:radial-gradient(closest-side,var(--mu-deep) 72%,transparent 74% 99%,transparent),conic-gradient(from -135deg,var(--acc) calc(var(--p) * 2.7deg),var(--mu-groove) 0 270deg,transparent 0)!important;box-shadow:none!important;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--acc) 40%,transparent));transition:--p .6s ease}
html .metrics.wb-on .metric-grid>.metric.open>.metric-icon{grid-row:1/span 4}
html .metrics.wb-on .metric-name{display:flex;justify-content:space-between;align-items:center;margin:0;font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
html .metrics.wb-on .metric-name span{color:var(--acc);opacity:.75;letter-spacing:0}
html .metrics.wb-on .metric-value{margin:4px 0 0}
html .metrics.wb-on .metric-value strong{color:var(--mu-ink)}
html .metrics.wb-on .metric-value span{color:var(--mu-dim)}
html .metrics.wb-on .metric-grid>.metric>.mini-track{position:relative;height:6px;margin:9px 0 7px;border-radius:6px;background:var(--mu-groove);box-shadow:var(--mu-groove-in);overflow:visible}
html .metrics.wb-on .metric-grid>.metric>.mini-track i{position:relative;display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--acc) 55%,transparent),var(--acc));box-shadow:0 0 8px color-mix(in srgb,var(--acc) 60%,transparent)}
html .metrics.wb-on .metric-grid>.metric>.mini-track i::after{content:"";position:absolute;right:-7px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--mu-knob);box-shadow:0 2px 4px #00000055,0 0 0 2px color-mix(in srgb,var(--acc) 70%,transparent)}
html .metrics.wb-on .metric-grid>.metric>small{color:var(--mu-dim)}
@media(max-width:560px){
  .wb-console{grid-template-columns:1fr;padding:14px;gap:14px}
  .wb-dial{width:min(210px,72%);justify-self:center}
  .wb-groove{height:62px}
  .wb-fader small{font-size:7.5px;letter-spacing:.08em}
  html .metrics.wb-on .metric-grid>.metric{grid-template-columns:50px minmax(0,1fr);column-gap:12px;padding:13px 14px}
  html .metrics.wb-on .metric-grid>.metric>.metric-icon{width:50px;height:50px;font-size:16px}
}
@media(prefers-reduced-motion:reduce){.wb-led{animation:none}.wb-console *,.metrics.wb-on .metric{transition:none!important;animation:none!important}}
/* Training readiness (Sophia, 2026-10-22): a speedometer with four zones (rest, go easy, steady, primed), a metal needle,
   and a row per part of the score; tap a row to see why it scored as it did. */
.wb-ready{grid-column:1/-1;display:grid;grid-template-columns:minmax(160px,210px) minmax(0,1fr);gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.wb-ready-gauge{position:relative}
.wb-ready-gauge svg{display:block;width:100%;overflow:visible}
.wb-zone{fill:none;stroke-width:12;stroke-linecap:butt;opacity:.28;transition:opacity .4s,filter .4s}
.wb-zone.z1{stroke:#ff6f6f}.wb-zone.z2{stroke:#ffb44d}.wb-zone.z3{stroke:#c6dc5a}.wb-zone.z4{stroke:#5fd88f}
.wb-zone.on{opacity:1;filter:drop-shadow(0 0 6px currentColor)}
.wb-zone.z1.on{color:#ff6f6f}.wb-zone.z2.on{color:#ffb44d}.wb-zone.z3.on{color:#c6dc5a}.wb-zone.z4.on{color:#5fd88f}
.wb-needle{transform-box:view-box;transform-origin:100px 100px;transform:rotate(calc(var(--ready) * 1.8deg - 90deg));transition:transform .9s cubic-bezier(.3,1.4,.5,1)}
.wb-needle path{fill:var(--mu-ink);filter:drop-shadow(0 2px 2px #00000060)}
.wb-needle circle{fill:var(--mu-dim)}
.wb-needle .wb-needle-dot{fill:var(--zone)}
.wb-ready.empty .wb-needle{opacity:.35}
.wb-ready-read{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-top:6px}
.wb-ready-score{font:900 30px/1 Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.wb-ready-zone{font-size:9px;font-weight:900;letter-spacing:.18em;color:var(--zone);text-shadow:0 0 8px color-mix(in srgb,var(--zone) 50%,transparent)}
.wb-ready-info{min-width:0;display:grid;gap:8px}
.wb-ready-eyebrow{font-size:9px;font-weight:900;letter-spacing:.22em;color:var(--mu-dim)}
.wb-ready-tip{margin:0;font-size:13px;font-weight:800;line-height:1.35;color:var(--mu-ink)}
.wb-ready-parts{display:grid;gap:4px}
.wb-part{display:grid;grid-template-columns:92px minmax(40px,1fr) 84px;align-items:center;gap:10px;padding:6px 8px;border:0;border-radius:9px;background:none;color:var(--mu-ink);text-align:left}
.wb-part:hover,.wb-part[aria-expanded="true"]{background:color-mix(in srgb,var(--zone) 12%,transparent)}
.wb-part:focus-visible{outline:2px solid var(--zone);outline-offset:1px}
.wb-part-name{font-size:11px;font-weight:800}.wb-part-name em{margin-left:5px;font-style:normal;font-size:9px;color:var(--mu-dim)}
.wb-part-meter{height:5px;border-radius:5px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
.wb-part-meter i{display:block;height:100%;border-radius:inherit;background:var(--zone);box-shadow:0 0 6px color-mix(in srgb,var(--zone) 60%,transparent);transition:width .6s ease}
.wb-part-value{font-size:11px;font-weight:900;text-align:right;white-space:nowrap}.wb-part-value small{display:block;font-size:9px;font-weight:600;color:var(--mu-dim)}
.wb-ready-why{margin:0;min-height:1.4em;font-size:11px;line-height:1.45;color:var(--mu-dim)}
@media(max-width:560px){.wb-ready{grid-template-columns:1fr;padding:14px 12px}.wb-ready-gauge{width:min(240px,80%);justify-self:center}}
html:not([data-mode="dark"]) .wb-ready-zone{color:color-mix(in srgb,var(--zone) 55%,#1f2a22);text-shadow:none}
/* The pop-ups (Sophia, 2026-10-22): sleep, stress and recovery open in the same hardware as the console. Boxes sit
   recessed like the fader bay, badges are lit, numbers read like the screen, and each has its week as LED columns
   in the tile's own colour. :not(#wb) and !important win over the older day, night and petto colour rules. */
html .metrics.wb-on .metric-more:not(#wb){color:var(--mu-ink)}
html .metrics.wb-on .metric-more:not(#wb) .more-head .eyebrow{font-size:9px;font-weight:900;letter-spacing:.2em;color:var(--mu-dim)!important}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-quality,.stress-badge,.recovery-label){display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border:0!important;border-radius:999px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in);color:var(--mu-ink)!important;font-size:10px;font-weight:900;letter-spacing:.04em}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-quality,.stress-badge,.recovery-label)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-intro,.stress-intro,.recovery-intro,.sleep-explainer,.stress-explainer,.recovery-footnote){color:var(--mu-dim)!important}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-summary>div,.stress-result,.stress-inputs,.recovery-overview,.recovery-signals>div,.week-trend){border:0!important;border-radius:14px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in)}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-summary>div>span,.stress-result>span,.recovery-signals>div>span,.recovery-count){font-size:9px!important;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)!important}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-summary strong,.stress-result>strong,.recovery-signals strong,.recovery-count strong){color:var(--mu-ink)!important;letter-spacing:-.01em;text-transform:none}
html .metrics.wb-on .metric-more:not(#wb) :is(.sleep-summary small,.recovery-signals small,.stress-result p,#recovery-message){color:var(--mu-dim)!important}
html .metrics.wb-on .metric-more:not(#wb) .stress-heart{color:var(--acc)!important;text-shadow:0 0 12px var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) .sleep-stages{gap:2px;padding:3px;border-radius:999px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
html .metrics.wb-on .metric-more:not(#wb) .sleep-stages span{border-radius:999px;box-shadow:0 0 8px color-mix(in srgb,var(--acc) 45%,transparent)}
html .metrics.wb-on .metric-more:not(#wb) .stage-legend{color:var(--mu-dim)}
html .metrics.wb-on .metric-more:not(#wb) .stage-legend strong{color:var(--mu-ink)}
html .metrics.wb-on .metric-more:not(#wb) .recovery-track{background:var(--mu-groove)!important;box-shadow:var(--mu-groove-in)}
html .metrics.wb-on .metric-more:not(#wb) #recovery-track{background:var(--acc)!important;box-shadow:0 0 8px var(--acc)}
/* The week: a faint grid, LED columns, today lit brightest, a night or day off your usual (or short of your goal) in warm red. */
html .metrics.wb-on .metric-more:not(#wb) .week-trend{padding:14px 14px 12px;margin-top:16px}
html .metrics.wb-on .metric-more:not(#wb) .week-head strong{font-size:9.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--mu-dim)}
html .metrics.wb-on .metric-more:not(#wb) .week-head span{color:var(--mu-dim);opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-key{border-top-color:var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) .week-chart{background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--mu-dim) 14%,transparent) 0 1px,transparent 1px 25%) 0 0/100% calc(100% - 18px) no-repeat}
html .metrics.wb-on .metric-more:not(#wb) .week-base{border-top-color:var(--acc);opacity:.7}
html .metrics.wb-on .metric-more:not(#wb) .week-col i{max-width:22px;border-radius:5px 5px 2px 2px;background:linear-gradient(0deg,color-mix(in srgb,var(--acc) 35%,transparent),var(--acc));opacity:.5;transition:opacity .3s}
html .metrics.wb-on .metric-more:not(#wb) .week-col.now i{opacity:1;box-shadow:0 0 12px var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) .week-col.off i{background:linear-gradient(0deg,#ff6f6f40,#ff6f6f);opacity:.85}
html .metrics.wb-on .metric-more:not(#wb) .week-col:hover i{opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-num{color:var(--mu-ink);opacity:.8}
html .metrics.wb-on .metric-more:not(#wb) .week-col.now .week-num{color:var(--acc);opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-col small{color:var(--mu-dim);opacity:1;letter-spacing:.06em}
html .metrics.wb-on .metric-more:not(#wb) .week-insights li{color:var(--mu-dim);opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-insights li::before{color:var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) .stress-result>strong small{display:inline;font-size:13px;color:var(--mu-dim)}
html .metrics.wb-on .metric-more:not(#wb) .recovery-footnote{margin-top:12px}
html .metrics.wb-on .metric-more:not(#wb) .recovery-signals strong span{font:inherit!important;color:inherit!important;letter-spacing:inherit;text-transform:none;opacity:1}
/* Steps, active energy and water open with their week too (Sophia, 2026-10-22): a total / average / best day row,
   the week chart and a note. Plain styles first, for when the dashboard script has not run. */
.week-card .week-intro,.week-card .week-explainer{font-size:12px;line-height:1.5;margin:10px 0 16px;opacity:.75}
.week-card .week-explainer{margin:14px 0 0;font-size:11px}
.week-badge{border-radius:20px;padding:8px 13px;font-size:11px;font-weight:900;background:#0000000a}
.week-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.week-summary>div{min-width:0;padding:14px;border-radius:13px;background:#0000000a}
.week-summary span,.week-summary strong,.week-summary small{display:block}
.week-summary span{font-size:11px;font-weight:800;opacity:.7}
.week-summary strong{font:900 20px Nunito,sans-serif;margin:5px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.week-summary small{font-size:10px;opacity:.6}
@media(max-width:560px){.week-summary{grid-template-columns:1fr}.week-summary>div{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.week-summary strong{margin:0}}
html .metrics.wb-on .metric-more:not(#wb) .week-badge{display:inline-flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in);color:var(--mu-ink)!important;font-size:10px;letter-spacing:.04em}
html .metrics.wb-on .metric-more:not(#wb) .week-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc)}
html .metrics.wb-on .metric-more:not(#wb) :is(.week-intro,.week-explainer){color:var(--mu-dim);opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-summary>div{border-radius:14px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in)}
html .metrics.wb-on .metric-more:not(#wb) .week-summary>div>span{font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim);opacity:1}
html .metrics.wb-on .metric-more:not(#wb) .week-summary strong{color:var(--mu-ink)}
html .metrics.wb-on .metric-more:not(#wb) .week-summary small{color:var(--mu-dim);opacity:1}
/* One surface (Sophia, 2026-10-22): the card behind the dashboard is the same material as the console and tiles, which
   sit on it as raised plates, shaded rather than recoloured, like the Mega UI sheet. */
html body .metrics.wb-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important}
html .metrics.wb-on .wb-console,html .metrics.wb-on .metric-grid>.metric{background:none!important;box-shadow:inset 0 1px 0 var(--mu-edge),0 1px 0 #ffffff08,0 10px 24px var(--mu-drop),0 0 0 1px var(--mu-rim)}
:is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor){--mu-drop:#0000001a}
html[data-mode="dark"] :is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor){--mu-drop:#00000070}
html .metrics.wb-on .metrics-title,html .metrics.wb-on .section-head .eyebrow{color:var(--mu-dim)}
html .metrics.wb-on .section-head h2{color:var(--mu-ink)}
/* The opened part of a tile is the tile itself, not a card on top (Sophia, 2026-10-22): the petto colour theme gives
   .sleep-card and friends their own panel, which showed as a lighter box inside the tile in day mode. */
html .metrics.wb-on .metric-grid>.metric>.metric-more:not(#wb){background:none!important;box-shadow:none!important;border-top-color:var(--mu-rim)!important}
/* The day colour picker colours the dashboard too (Sophia, 2026-10-22). A picked colour (or your Pettö's, which the app
   also passes as --th/--ts) sets the hue of every panel, groove and knob; signal colours stay as they are. */
html[data-theme]:not([data-mode="dark"]) :is(.metrics.wb-on,.pet-card.pd-on,.care-card.cc-on,.body-card.bd-on,.meal-card.ml-on,.kit-card.wk-on,.cycle-log.cy-on,.food-editor){--pc:hsl(var(--th) calc(62% * var(--ts)) 64%);--pcd:hsl(var(--th) calc(45% * var(--ts)) 30%)}
/* Choose your colour in the dashboard's hardware look (Sophia, 2026-10-22): the same tinted panel, each colour a domed
   button in a recessed well that lights up when chosen, and the wheel set in a ticked bezel with a metal knob. It takes
   the hue of the colour in use, like the dashboard. */
html body .theme-panel:not(#wb){--pc:var(--petto,#f5b94e);--pcd:var(--petto-deep,#a76c1c);
  --mu-panel:linear-gradient(160deg,color-mix(in srgb,var(--pc) 16%,#fff),color-mix(in srgb,var(--pc) 30%,#f1efea));--mu-deep:color-mix(in srgb,var(--pc) 34%,#ebe8e2);
  --mu-ink:color-mix(in srgb,var(--pcd) 60%,#1f1d22);--mu-dim:color-mix(in srgb,var(--pcd) 70%,#8a8a8a);--mu-rim:color-mix(in srgb,var(--pcd) 18%,transparent);
  --mu-groove:color-mix(in srgb,var(--pc) 45%,#cfcac2);--mu-groove-in:inset 0 1px 3px #0000002b,inset 0 -1px 0 #fff;--mu-tick:color-mix(in srgb,var(--pc) 55%,#c8c3bb);
  --mu-knob:color-mix(in srgb,var(--pc) 16%,#fff);
  --mu-knob-shadow:0 6px 12px color-mix(in srgb,var(--pcd) 24%,transparent),0 1px 2px #0000001f;
  padding:16px!important;border:0!important;border-radius:22px!important;background:var(--mu-panel)!important;color:var(--mu-ink)!important;
  box-shadow:inset 0 1px 0 #fff,0 18px 40px color-mix(in srgb,var(--pcd) 22%,transparent),0 0 0 1px var(--mu-rim)!important}
html[data-theme] body .theme-panel:not(#wb){--pc:hsl(var(--th) calc(62% * var(--ts)) 64%);--pcd:hsl(var(--th) calc(45% * var(--ts)) 30%)}
html body .theme-panel:not(#wb)>strong{display:flex;align-items:center;gap:8px;font-size:9.5px;font-weight:900;letter-spacing:.22em;color:var(--mu-dim)!important;margin-bottom:12px}
html body .theme-panel:not(#wb)>strong::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pc);box-shadow:0 0 8px var(--pc)}
html body .theme-panel:not(#wb) .theme-swatches{gap:8px;padding:8px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
html body .theme-panel:not(#wb) .theme-swatches button{gap:6px;padding:9px 2px 8px;border:0!important;border-radius:12px;background:none!important;color:var(--mu-dim)!important;font-size:9.5px;font-weight:900;letter-spacing:.04em;transition:background .2s,color .2s}
html body .theme-panel:not(#wb) .theme-swatches button::before{width:30px;height:30px;background:radial-gradient(circle at 35% 28%,#ffffffd0 0,#ffffff00 42%),var(--swatch);box-shadow:0 4px 8px #00000030,inset 0 -2px 3px #00000022,inset 0 1px 1px #ffffffb0,0 0 0 2px #ffffff90;transition:box-shadow .25s,transform .2s}
html body .theme-panel:not(#wb) .theme-swatches button:hover::before{transform:translateY(-1px)}
html body .theme-panel:not(#wb) .theme-swatches [aria-checked="true"]{color:var(--mu-ink)!important;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--swatch) 22%,transparent))!important}
html body .theme-panel:not(#wb) .theme-swatches [aria-checked="true"]::before{box-shadow:0 4px 8px #00000030,inset 0 -2px 3px #00000022,inset 0 1px 1px #ffffffb0,0 0 0 2px #fff,0 0 0 4px var(--swatch),0 0 16px var(--swatch)}
html body .theme-panel:not(#wb) .theme-swatches button:focus-visible{outline:2px solid var(--pc);outline-offset:1px}
html body .theme-panel:not(#wb) .colour-wheel-wrap{margin-top:14px}
html body .theme-panel:not(#wb) .colour-wheel-wrap small{font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)!important;margin-bottom:12px}
/* The bezel: a recessed ring with ticks round the wheel, like the dashboard's dials. */
html body .theme-panel:not(#wb) .colour-wheel{width:150px;height:150px;box-shadow:0 0 0 6px var(--mu-deep),0 0 0 7px var(--mu-rim),0 0 0 14px transparent,inset 0 2px 6px #00000030;outline-offset:10px}
html body .theme-panel:not(#wb) .colour-wheel-wrap>.colour-wheel{margin:14px auto}
html body .theme-panel:not(#wb) .colour-wheel::before{content:"";position:absolute;inset:-14px;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(var(--mu-tick) 0 1.2deg,transparent 1.2deg 10deg);-webkit-mask:radial-gradient(circle closest-side,transparent 0 83px,#000 83.5px 88px,transparent 88.5px);mask:radial-gradient(circle closest-side,transparent 0 83px,#000 83.5px 88px,transparent 88.5px)}
html body .theme-panel:not(#wb) .colour-knob{width:26px;height:26px;margin:-13px 0 0 -13px;border:0!important;box-shadow:0 4px 8px #00000055,inset 0 1px 0 #fff,0 0 0 3px #fff,0 0 0 5px color-mix(in srgb,var(--pcd) 35%,transparent)!important}
html body .theme-panel:not(#wb) .colour-knob::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#ffffffd0,#ffffff00 60%)}
/* Your Pettö's pod (Sophia, 2026-10-22): the card is the dashboard's material, and your Pettö lives in a little
   egg-shaped device in its egg's own colours, like a Tamagotchi: a glossy shell, lighter on top with a deeper band
   below, a framed window onto the room, and domed buttons. Swipe the window to change rooms. */
html body .pet-card.pd-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
@media(min-width:761px){html body .pet-card.pd-on:not(#wb){align-self:start;position:sticky;top:16px}}
.pet-card.pd-on .room-tabs,.pet-card.pd-on .pet-actions{display:none!important}
.pet-card.pd-on .card-top .pill{background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in);color:var(--mu-dim)!important;letter-spacing:.18em}
.pet-card.pd-on .card-top .online-dot{background:var(--egg-led,#6fd49a);box-shadow:0 0 8px var(--egg-led,#6fd49a)}
.pd-pod{--egg-hi:color-mix(in srgb,var(--egg) 45%,#fff);--egg-lo:color-mix(in srgb,var(--egg) 80%,var(--egg-o));
  position:relative;width:min(100%,400px);margin:6px auto 18px;padding:9% 12% 12%;display:flex;flex-direction:column;align-items:center;gap:10px;
  border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:linear-gradient(180deg,var(--egg-hi) 0,color-mix(in srgb,var(--egg) 72%,#fff) 58%,var(--egg) 58.4%,var(--egg-lo) 100%);
  box-shadow:inset 0 -14px 26px color-mix(in srgb,var(--egg-o) 38%,transparent),inset 0 8px 16px #ffffff90,inset 0 0 0 2px color-mix(in srgb,var(--egg-o) 22%,transparent),
    0 0 0 3px color-mix(in srgb,var(--egg-o) 40%,transparent),0 22px 44px color-mix(in srgb,var(--egg-o) 32%,transparent);
  animation:pdfloat 6s ease-in-out infinite}
@keyframes pdfloat{50%{transform:translateY(-4px)}}
/* The gloss along the shell's upper left, like the reference toy. */
.pd-shine{position:absolute;left:12%;top:7%;width:30%;height:22%;border-radius:50%;background:radial-gradient(ellipse at 40% 40%,#ffffffd0,#ffffff00 70%);transform:rotate(-28deg);pointer-events:none}
.pd-top{position:relative;z-index:2;display:flex;gap:9px}
.pd-btn,.pd-care{position:relative;display:grid;place-items:center;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(circle at 35% 28%,#ffffffb0 0,#ffffff00 45%),var(--care);
  box-shadow:0 3px 0 color-mix(in srgb,var(--care) 55%,#000),0 6px 12px #00000030,inset 0 -2px 4px #00000025,0 0 0 2.5px #ffffffd0;transition:transform .12s,box-shadow .12s}
.pd-btn{width:32px;height:32px}
.pd-btn svg,.pd-care svg{width:55%;height:55%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0000004d)}
.pd-btn:active,.pd-care:active{transform:translateY(2px);box-shadow:0 1px 0 color-mix(in srgb,var(--care) 55%,#000),0 3px 6px #00000030,inset 0 -2px 4px #00000025,0 0 0 2.5px #ffffffd0}
.pd-btn:focus-visible,.pd-care:focus-visible{outline:3px solid #fff;outline-offset:3px}
.pd-count{position:absolute;top:-5px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#ff3b5c;color:#fff;font:900 9px/16px 'DM Sans',sans-serif;box-shadow:0 0 0 2px #fff}
/* The window: the room behind a frame in the egg's darker colour. */
html body .pet-card.pd-on .pet-scene:not(#wb){position:relative;width:100%;height:auto!important;min-height:0!important;aspect-ratio:1.12;padding:0 0 10cqh;border-radius:20px;overflow:hidden;
  border:5px solid color-mix(in srgb,var(--egg-o) 70%,var(--egg));box-shadow:inset 0 3px 10px #00000040,0 2px 0 #ffffff80;outline:none}
html body .pet-card.pd-on .pet-scene:not(#wb):focus-visible{box-shadow:inset 0 3px 10px #00000040,0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--egg-o) 70%,transparent)}
.pet-card.pd-on .pet.pet-art{width:min(66cqw,210px);height:min(66cqw,210px)}
.pet-card.pd-on .room-item{width:30cqw}
.pd-room{position:absolute;left:10px;top:10px;z-index:7;padding:4px 10px;border-radius:99px;background:#00000059;color:#fff;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pd-room.show{animation:pdroom 2.2s ease forwards}
@keyframes pdroom{0%{opacity:0;transform:translateY(-4px)}12%,70%{opacity:1;transform:none}100%{opacity:0}}
.pd-dots{display:flex;gap:6px;margin-top:-2px}
.pd-dots i{width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--egg-o) 35%,transparent);transition:width .25s,background .25s}
.pd-dots i.on{width:16px;border-radius:3px;background:color-mix(in srgb,var(--egg-o) 85%,#000)}
html body .pet-card.pd-on .scene-care:not(#wb){position:static;display:flex;gap:12px;margin-top:4px}
.pd-care{width:46px;height:46px}
.pd-care.need::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #ffd75e;animation:pdneed 1.4s ease-in-out infinite}
.pd-care.need::before{content:"";position:absolute;top:-4px;right:-4px;z-index:1;width:11px;height:11px;border-radius:50%;background:#ffd75e;box-shadow:0 0 0 2px #fff}
@keyframes pdneed{50%{transform:scale(1.08);opacity:.6}}
@media(max-width:430px){.pd-care{width:42px;height:42px}html body .pet-card.pd-on .scene-care:not(#wb){gap:10px}.pd-btn{width:30px;height:30px}}
/* Mood sheet and Breathe, over the window. */
.pd-sheet{position:absolute;inset:8px;z-index:9;display:grid;align-content:start;gap:8px;padding:12px;border-radius:14px;background:#ffffffe8;color:#2d2a26;box-shadow:0 10px 30px #0000004d;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);overflow:auto;animation:pdsheet .3s cubic-bezier(.34,1.4,.64,1)}
.pd-sheet[hidden],.pd-breathe[hidden]{display:none}
@keyframes pdsheet{from{transform:translateY(14px) scale(.96);opacity:0}}
.pd-sheet-head{display:flex;align-items:center;justify-content:space-between}
.pd-sheet-head strong{font-size:12px;font-weight:900}
.pd-x{border:0;border-radius:99px;min-width:30px;height:30px;padding:0 12px;background:#0000000f;color:inherit;font:900 15px/1 'DM Sans',sans-serif;cursor:pointer}
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb){display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:0}
.pd-breathe{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:color-mix(in srgb,var(--egg-o) 40%,#000000b0);color:#fff}
.pd-breathe i{position:absolute;left:50%;top:46%;width:46cqw;height:46cqw;margin:-23cqw 0 0 -23cqw;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--egg) 70%,#fff) 0,color-mix(in srgb,var(--egg) 50%,transparent) 70%);opacity:.75;animation:pdbreath 8s ease-in-out infinite}
.pd-breathe i+i{width:62cqw;height:62cqw;margin:-31cqw 0 0 -31cqw;opacity:.3;animation-delay:.2s}
@keyframes pdbreath{0%,100%{transform:scale(.55)}50%{transform:scale(1)}}
.pd-breathe b{position:absolute;top:44%;font-size:13px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;text-shadow:0 1px 6px #0006}
.pd-breathe-in{animation:pdin 8s infinite}.pd-breathe-out{animation:pdin 8s -4s infinite}
@keyframes pdin{0%,49%{opacity:1}50%,100%{opacity:0}}
.pd-breathe .pd-x{position:absolute;bottom:12px;background:#ffffffe0;color:#2d2a26}
/* An egg that hasn't hatched yet sits alone in a dark window, like the egg page. */
.pet-card.pd-on.egg-home :is(.pd-top,.pd-dots,.scene-care){visibility:hidden}
/* Name, level, growth and what your Pettö needs, under the pod. */
html body .pet-card.pd-on .pet-info:not(#wb){padding:4px 4px 2px;text-align:left}
.pd-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
html body .pet-card.pd-on .pd-name-row h2:not(#wb){margin:0;font-size:22px;color:var(--mu-ink)}
html body .pet-card.pd-on .pd-name-row .level:not(#wb){margin:0;padding:5px 10px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);font-size:9px;font-weight:900;letter-spacing:.16em;color:var(--mu-dim)}
html body .pet-card.pd-on .xp-row:not(#wb){margin-top:14px;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
html body .pet-card.pd-on .xp-row strong{color:var(--mu-ink)}
html body .pet-card.pd-on .progress:not(#wb){height:8px;margin-top:7px;border-radius:8px;background:var(--mu-groove)!important;box-shadow:var(--mu-groove-in);overflow:visible}
html body .pet-card.pd-on .progress #xp-fill{position:relative;height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--pd-egg,#f5b94e) 60%,#fff),var(--pd-egg,#f5b94e))!important;box-shadow:0 0 10px color-mix(in srgb,var(--pd-egg,#f5b94e) 60%,transparent)}
html body .pet-card.pd-on .progress #xp-fill::after{content:"";position:absolute;right:-7px;top:50%;width:15px;height:15px;margin-top:-7.5px;border-radius:50%;background:var(--mu-knob);box-shadow:0 2px 4px #00000055,0 0 0 2px color-mix(in srgb,var(--pd-egg,#f5b94e) 70%,transparent)}
.pd-need{display:grid;gap:6px;margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
html body .pet-card.pd-on .pd-need .mood-pill:not(#wb){justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 9px;border-radius:99px;background:var(--mu-panel)!important;color:var(--mu-ink)!important;font-size:10px;font-weight:900;box-shadow:0 1px 0 var(--mu-edge) inset,0 0 0 1px var(--mu-rim)}
html body .pet-card.pd-on .pd-need .mood-pill:not(#wb)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--pd-egg,#f5b94e);box-shadow:0 0 8px var(--pd-egg,#f5b94e)}
html body .pet-card.pd-on .pd-need #pet-message:not(#wb){margin:0;font-size:13px;font-weight:700;line-height:1.4;color:var(--mu-ink)}
html body .pet-card.pd-on .pd-need #mood-reason:not(#wb){font-size:11px;color:var(--mu-dim)}
@media(prefers-reduced-motion:reduce){.pd-pod,.pd-care.need::after,.pd-breathe i,.pd-room.show{animation:none}.pd-room.show{opacity:1}}
.pet-card.pd-on{--egg:#f5b94e;--egg-o:#a76c1c}
.pd-shine{left:19%;top:9%;width:22%;height:15%}
html body .pet-card.pd-on .pet-info:not(#wb){padding:4px 18px 18px}
/* The shell is the app's own egg outline (Sophia, 2026-10-22: like our egg shape), narrower on top and round below,
   with a deeper band across the bottom; everything inside sits at fixed places on it, and the window is a bit smaller. */
html body .pet-card.pd-on .pd-pod:not(#wb){--egg-mid:color-mix(in srgb,var(--egg) 70%,#fff);display:block;width:min(100%,360px);aspect-ratio:14.8/17.8;padding:0;gap:0;border-radius:0;background:none;box-shadow:none}
.pd-shell{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 18px 26px color-mix(in srgb,var(--egg-o) 35%,transparent)) drop-shadow(0 0 1px color-mix(in srgb,var(--egg-o) 60%,transparent))}
.pd-shell-rim{stroke:color-mix(in srgb,var(--egg-o) 45%,transparent);stroke-width:3}
.pd-shine{display:none}
html body .pet-card.pd-on .pd-top:not(#wb){position:absolute;left:50%;top:12.5%;transform:translateX(-50%);gap:7px}
html body .pet-card.pd-on .pet-scene:not(#wb){position:absolute;left:18%;top:23.5%;width:64%;aspect-ratio:1.1;border-width:4px;border-radius:18px}
html body .pet-card.pd-on .pd-dots:not(#wb){position:absolute;left:0;right:0;top:73%;justify-content:center;margin:0}
html body .pet-card.pd-on .scene-care:not(#wb){position:absolute;left:0;right:0;top:77.5%;justify-content:center;margin:0;gap:10px}
html body .pet-card.pd-on .pd-care:not(#wb){width:42px;height:42px}
html body .pet-card.pd-on .pd-btn:not(#wb){width:29px;height:29px}
@media(max-width:430px){html body .pet-card.pd-on .pd-care:not(#wb){width:38px;height:38px}html body .pet-card.pd-on .scene-care:not(#wb){gap:8px}html body .pet-card.pd-on .pd-btn:not(#wb){width:27px;height:27px}}
/* The app's own care buttons on the pod, sized to fit it; the one your Pettö needs is ringed. */
html body .pet-card.pd-on .scene-care:not(#wb) button{position:relative;width:40px;height:40px}
html body .pet-card.pd-on .scene-care:not(#wb) button.need::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #ffd75e;animation:pdneed 1.4s ease-in-out infinite}
@media(max-width:430px){html body .pet-card.pd-on .scene-care:not(#wb) button{width:36px;height:36px}html body .pet-card.pd-on .scene-care:not(#wb){gap:7px}}
html body .pet-card.pd-on .pet-scene:not(#wb){padding:0 0 5%}
/* Still, so its buttons are easy to tap; and the top buttons look like the app's own round care buttons
   (Sophia, 2026-10-22), flat pastel with a white rim and a white outline icon, just a little smaller. */
html body .pet-card.pd-on .pd-pod:not(#wb){animation:none}
html body .pet-card.pd-on .pd-btn:not(#wb){width:32px;height:32px;border:2px solid #ffffffcc;background:var(--care);box-shadow:0 4px 14px #0000002a;transition:transform .15s}
html body .pet-card.pd-on .pd-btn:not(#wb):active{transform:scale(.92);box-shadow:0 4px 14px #0000002a}
html body .pet-card.pd-on .pd-btn:not(#wb) svg{width:52%;height:52%;stroke-width:2;filter:none}
@media(max-width:430px){html body .pet-card.pd-on .pd-btn:not(#wb){width:30px;height:30px}}
/* The handbook's close button (Sophia, 2026-10-22): a big round × just above the book's top right corner, always in
   reach, besides swiping up, tapping outside or pressing Escape. */
html body dialog.handbook:not(#wb){padding-top:60px}
.book-close{position:absolute;top:8px;right:0;z-index:5;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:#ffffff2e;color:#fff;font:300 26px/40px 'DM Sans',sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px #ffffff30,0 6px 18px #0000004d;transition:transform .15s,background .15s}
.book-close:hover{background:#ffffff45}.book-close:active{transform:scale(.9)}
.book-close:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* Feed, Water and Rest, a little bigger now there are three. */
html body .pet-card.pd-on .scene-care:not(#wb){gap:16px}
html body .pet-card.pd-on .scene-care:not(#wb) button{width:46px;height:46px}
@media(max-width:430px){html body .pet-card.pd-on .scene-care:not(#wb) button{width:42px;height:42px}html body .pet-card.pd-on .scene-care:not(#wb){gap:14px}}
/* The mood button: a little pill on top of the shell with a face that shows today's feeling, and its name. */
.pd-mood{display:flex;align-items:center;gap:7px;padding:3px 12px 3px 3px;border:2px solid #ffffffd9;border-radius:99px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:linear-gradient(180deg,#fffffff2,color-mix(in srgb,var(--egg) 18%,#fff));color:color-mix(in srgb,var(--egg-o) 85%,#000);
  box-shadow:0 4px 12px color-mix(in srgb,var(--egg-o) 30%,transparent),inset 0 -2px 0 color-mix(in srgb,var(--egg) 25%,transparent);transition:transform .15s}
.pd-mood:active{transform:scale(.95)}
.pd-mood:focus-visible{outline:3px solid #fff;outline-offset:2px}
.pd-mood-face{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mood,#f2a65a);color:#fff;box-shadow:inset 0 -2px 3px #00000022}
.pd-mood-face svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pd-mood-face svg circle[r=".6"],.pd-mood-face svg circle[r=".8"]{fill:currentColor}
.pd-mood-text{display:grid;line-height:1.05;text-align:left}
.pd-mood-text small{font-size:7.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;opacity:.65}
.pd-mood-text b{font-size:11.5px;font-weight:900;white-space:nowrap}
.pd-mood[data-mood="excited"]{--mood:#ffb547}.pd-mood[data-mood="happy"]{--mood:#f2a65a}.pd-mood[data-mood="loved"]{--mood:#ff7aa2}.pd-mood[data-mood="calm"]{--mood:#61c29e}
.pd-mood[data-mood="tired"]{--mood:#a991d8}.pd-mood[data-mood="sad"]{--mood:#6fa8dc}.pd-mood[data-mood="stressed"]{--mood:#e87f6f}.pd-mood[data-mood="sick"]{--mood:#8fbf6a}
html body .pet-card.pd-on .pd-top:not(#wb){top:11.5%}
/* The faces in the mood sheet, each in its own colour like the mood button. */
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb) button[data-feeling]:not(.feeling-clear){display:grid;place-items:center;width:100%;aspect-ratio:1;max-width:46px;justify-self:center;padding:0;border:2px solid #fff!important;border-radius:50%;background:color-mix(in srgb,var(--mood,#f2a65a) 22%,#fff)!important;color:color-mix(in srgb,var(--mood,#f2a65a) 80%,#000)!important;box-shadow:0 3px 8px #0000001f;transition:transform .12s}
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb) button[data-feeling]:active{transform:scale(.9)}
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb) button[data-feeling][aria-pressed="true"]:not(.feeling-clear){background:var(--mood)!important;color:#fff!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--mood) 40%,transparent)}
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb) .feel-face{width:62%;height:62%}
html body .pet-card.pd-on .pd-sheet .feeling-chips:not(#wb) .feeling-clear{grid-column:1/-1;width:auto;height:auto;border:0!important;border-radius:99px;padding:7px;background:#0000000d!important;font-size:11px;font-weight:800;color:inherit}
.feeling-chips [data-feeling="excited"]{--mood:#ffb547}.feeling-chips [data-feeling="happy"]{--mood:#f2a65a}.feeling-chips [data-feeling="loved"]{--mood:#ff7aa2}.feeling-chips [data-feeling="calm"]{--mood:#61c29e}
.feeling-chips [data-feeling="tired"]{--mood:#a991d8}.feeling-chips [data-feeling="sad"]{--mood:#6fa8dc}.feeling-chips [data-feeling="stressed"]{--mood:#e87f6f}.feeling-chips [data-feeling="sick"]{--mood:#8fbf6a}
/* Today's care (Sophia, 2026-10-22): the five daily cares in the dashboard's material. Each row: a lit icon, what to do,
   how far along with a fader groove, the trait it grows, and a button to do it now (or a tick). The ring counts ticks. */
html body .care-card.cc-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
html body .care-card.cc-on .care-head:not(#wb){display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
html body .care-card.cc-on .care-head .eyebrow{color:var(--mu-dim)!important;letter-spacing:.2em}
html body .care-card.cc-on .care-head h2{color:var(--mu-ink)}
.cc-ring{position:relative;flex:none;width:52px;height:52px}
.cc-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cc-ring circle{fill:none;stroke-width:4.5;stroke-linecap:round}
.cc-ring-track{stroke:var(--mu-groove)}
.cc-ring-fill{stroke:#6fd49a;stroke-dasharray:0 100;filter:drop-shadow(0 0 4px #6fd49a);transition:stroke-dasharray .6s ease}
.cc-ring b{position:absolute;inset:0;display:grid;place-items:center;font:900 12px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.cc-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cc-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.cc-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:color-mix(in srgb,var(--care) 22%,transparent);color:var(--care);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--care) 45%,transparent)}
.cc-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc-icon svg circle[r=".8"]{fill:currentColor}
.cc-row.done .cc-icon{background:var(--care);color:#fff;box-shadow:0 0 12px color-mix(in srgb,var(--care) 55%,transparent)}
.cc-body{display:grid;gap:2px;min-width:0}
.cc-body b{font-size:13px;font-weight:800;color:var(--mu-ink)}
.cc-body small{font-size:11px;color:var(--mu-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cc-bar{display:block;height:4px;margin-top:4px;border-radius:4px;background:linear-gradient(90deg,var(--care) calc(var(--part) * 1%),var(--mu-groove) 0);box-shadow:0 0 6px color-mix(in srgb,var(--care) calc(var(--part) * .5%),transparent)}
.cc-trait{justify-self:start;display:inline-flex;align-items:center;gap:6px;max-width:100%;margin-top:6px;padding:3px 9px 3px 3px;border:0;border-radius:99px;cursor:pointer;
  background:linear-gradient(90deg,color-mix(in srgb,var(--care) 22%,transparent) calc(var(--tp) * 1%),color-mix(in srgb,var(--mu-dim) 10%,transparent) 0);color:var(--mu-ink);font-size:10px;font-weight:700;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-trait em{flex:none;padding:2px 6px;border-radius:99px;background:var(--care);color:#000;font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.06em}
.cc-trait:focus-visible,.cc-go:focus-visible{outline:2px solid var(--care);outline-offset:2px}
.cc-go{flex:none;min-width:58px;padding:8px 12px;border:2px solid #ffffffcc;border-radius:99px;background:var(--care);color:#1d1a22;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px color-mix(in srgb,var(--care) 40%,transparent);transition:transform .12s}
.cc-go:active{transform:scale(.94)}
.cc-tick{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:14px;font-weight:900;color:#fff;background:var(--mu-groove)}
.cc-row.done .cc-tick{background:var(--care);box-shadow:0 0 10px color-mix(in srgb,var(--care) 55%,transparent)}
.cc-next{display:flex;align-items:center;gap:8px;margin:12px 2px 0;font-size:12px;font-weight:700;color:var(--mu-dim)}
.cc-next::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:#f2a65a;box-shadow:0 0 8px #f2a65a}
.cc-next.all::before{background:#6fd49a;box-shadow:0 0 8px #6fd49a}
/* Body (Sophia, 2026-10-23) in the dashboard's material: a console with a light per signal, channel-strip tiles with a
   range bar (typical band shaded, a marker where you are) that open to what it means and its week, and You cards. */
html body .body-card.bd-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
html body .body-card.bd-on .section-head .eyebrow,html body .body-card.bd-on .subtle{color:var(--mu-dim)!important;letter-spacing:.2em}
html body .body-card.bd-on :is(.body-intro,.body-footnote):not(#wb){color:var(--mu-dim)!important}
.bd-console{display:flex;align-items:center;gap:16px;margin:6px 0 18px;padding:14px 16px;border-radius:18px;background:var(--mu-screen);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
.bd-count{display:grid;place-items:center;flex:none;width:68px;height:68px;border-radius:50%;background:var(--mu-knob);box-shadow:var(--mu-knob-shadow);color:var(--mu-ink);line-height:1}
.bd-count strong{font:900 26px Nunito,'DM Sans',sans-serif}.bd-count span{font-size:9px;font-weight:900;letter-spacing:.12em;color:var(--mu-dim);margin-top:-14px}
.bd-console-text{display:grid;gap:4px;min-width:0}
.bd-console-text b{font-size:14px;font-weight:900;color:#fff}.bd-console-text small{font-size:11px;color:#9aa1a6}
.bd-leds{display:flex;gap:6px;margin-top:4px}.bd-leds i{width:18px;height:5px;border-radius:3px;background:#ffffff1f}
.bd-leds i.ok{background:var(--acc);box-shadow:0 0 8px var(--acc)}.bd-leds i.off{background:#ff6f6f;box-shadow:0 0 8px #ff6f6f}
.bd-h{margin:18px 2px 10px;font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--mu-dim)}
.bd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:10px}
.bd-tile{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px;align-items:center;padding:12px 14px;border-radius:16px;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 24px var(--mu-drop),0 0 0 1px var(--mu-rim);-webkit-tap-highlight-color:transparent;transition:box-shadow .25s}
.bd-tile>*{grid-column:2}
.bd-tile:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bd-tile.open{grid-column:1/-1;cursor:default}
.bd-icon{grid-column:1;grid-row:1/span 4;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--acc) 22%,transparent);color:var(--acc);font-size:17px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 45%,transparent)}
.bd-name{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.bd-tile strong{font:900 22px Nunito,'DM Sans',sans-serif;color:var(--mu-ink);margin-top:2px}.bd-tile strong small{font-size:11px;color:var(--mu-dim)}
.bd-state{justify-self:start;display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;font-weight:800;color:var(--mu-dim)}
.bd-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--mu-tick)}
.bd-tile.ok .bd-state::before{background:#6fd49a;box-shadow:0 0 6px #6fd49a}.bd-tile.off .bd-state::before{background:#ffb44d;box-shadow:0 0 6px #ffb44d}
.bd-tile.off .bd-state{color:var(--mu-ink)}
.bd-range{position:relative;display:block;height:6px;margin:9px 0 6px;border-radius:6px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
.bd-range[hidden]{display:none}
.bd-range b{position:absolute;top:0;bottom:0;border-radius:6px;background:color-mix(in srgb,var(--acc) 40%,transparent)}
.bd-range em{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--mu-knob);box-shadow:0 2px 4px #00000055,0 0 0 2px var(--acc),0 0 8px var(--acc);transition:left .6s ease}
.bd-tile p{margin:0;font-size:10.5px;color:var(--mu-dim)}
.bd-more{grid-column:1/-1;display:none;margin-top:12px;padding-top:12px;border-top:1px solid var(--mu-rim);cursor:default}
.bd-tile.open .bd-more{display:grid;gap:8px}
.bd-more p{font-size:12px;line-height:1.5;color:var(--mu-dim)}.bd-more p b{display:block;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-ink);margin-bottom:2px}
/* The week chart inside a signal uses the pop-ups' LED columns. */
.bd-more .week-trend{margin-top:4px;padding:14px 14px 12px;border-radius:14px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in)}
.bd-more .week-head strong{font-size:9.5px;font-weight:900;letter-spacing:.18em;text-transform:uppercase;color:var(--mu-dim)}
.bd-more .week-head span{color:var(--mu-dim);opacity:1}.bd-more .week-key{border-top-color:var(--acc)}.bd-more .week-base{border-top-color:var(--acc);opacity:.7}
.bd-more .week-col i{max-width:22px;border-radius:5px 5px 2px 2px;background:linear-gradient(0deg,color-mix(in srgb,var(--acc) 35%,transparent),var(--acc));opacity:.5}
.bd-more .week-col.now i{opacity:1;box-shadow:0 0 12px var(--acc)}.bd-more .week-col.off i{background:linear-gradient(0deg,#ff6f6f40,#ff6f6f);opacity:.85}
.bd-more .week-num{color:var(--mu-ink)}.bd-more .week-col small{color:var(--mu-dim);opacity:1}.bd-more .week-insights li{color:var(--mu-dim);opacity:1}.bd-more .week-insights li::before{color:var(--acc)}
/* You */
.bd-you{display:grid;gap:10px}
.bd-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bd-stats>div{min-width:0;padding:12px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.bd-stats span{display:block;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
.bd-stats strong{display:block;margin-top:4px;font:900 20px Nunito,'DM Sans',sans-serif;color:var(--mu-ink);white-space:nowrap}
.bd-bmi em{display:inline-block;margin-top:4px;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--acc) 25%,transparent);color:var(--mu-ink);font-style:normal;font-size:9.5px;font-weight:800}
.bd-card{padding:14px 16px;border-radius:16px;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 24px var(--mu-drop),0 0 0 1px var(--mu-rim)}
.bd-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.bd-card-head b{font-size:13px;font-weight:900;color:var(--mu-ink)}.bd-card-head small{font-size:10.5px;color:var(--mu-dim)}
.bd-bmi-bar{position:relative;display:block;height:10px;border-radius:10px;background:linear-gradient(90deg,#6fb2ff 0 14%,#6fd49a 14% 40%,#ffb44d 40% 60%,#ff7f6f 60%);box-shadow:var(--mu-groove-in);opacity:.9}
.bd-bmi-bar em{position:absolute;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:var(--mu-knob);box-shadow:0 2px 5px #00000066,0 0 0 2px #fff}
.bd-bmi-scale{position:relative;height:14px;margin-top:6px;font-size:9px;font-weight:800;color:var(--mu-dim)}
.bd-bmi-scale span{position:absolute;transform:translateX(-50%)}.bd-bmi-scale span:nth-child(1){left:0;transform:none}.bd-bmi-scale span:nth-child(2){left:14%}.bd-bmi-scale span:nth-child(3){left:40%}.bd-bmi-scale span:nth-child(4){left:60%}.bd-bmi-scale span:nth-child(5){right:0;left:auto;transform:none}
.bd-zones{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bd-zones li{display:grid;grid-template-columns:92px minmax(0,1fr) 78px;align-items:center;column-gap:10px}
.bd-zone-name{font-size:11px;color:var(--mu-dim)}.bd-zone-name b{display:block;font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.bd-zones i{display:block;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--acc) var(--w),var(--mu-groove) 0);box-shadow:0 0 8px color-mix(in srgb,var(--acc) 40%,transparent)}
.bd-zone-bpm{font-size:13px;font-weight:900;text-align:right;color:var(--mu-ink);white-space:nowrap}.bd-zone-bpm small{font-size:9px;color:var(--mu-dim);margin-left:3px}
.bd-zone-use{grid-column:1/-1;font-size:10.5px;color:var(--mu-dim);margin-top:-2px}
.bd-needs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px}
.bd-needs>div{display:grid;gap:3px;padding:12px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);border-left:3px solid var(--acc)}
.bd-needs span{font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
.bd-needs strong{font:900 20px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.bd-needs small{font-size:10.5px;line-height:1.4;color:var(--mu-dim)}
.bd-add{display:flex;align-items:center;justify-content:space-between;gap:12px}.bd-add>div{display:grid;gap:3px}.bd-add b{font-size:13px;color:var(--mu-ink)}.bd-add small{font-size:11px;color:var(--mu-dim)}
.bd-go{flex:none;padding:9px 14px;border:2px solid #ffffffcc;border-radius:99px;background:#6fb2ff;color:#fff;font-size:11px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px #6fb2ff66}
@media(max-width:560px){.bd-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.bd-zones li{grid-template-columns:80px minmax(0,1fr) 72px}}
/* Dragging the quick buttons into your own order (Sophia, 2026-10-23): the held one lifts and follows your finger, the
   rest glide aside, and it settles into place. These use the separate translate and scale properties, so the older
   transform:none rules for the bar don't stop them. */
.page-tabs a[data-quick]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.page-tabs a.shifting{transition:translate .26s cubic-bezier(.3,.7,.3,1)}
.page-tabs a.dragging{position:relative;z-index:6;scale:1.14;box-shadow:0 10px 24px #0000004d!important;cursor:grabbing;transition:scale .16s ease,box-shadow .16s ease}
.page-tabs a.settling{position:relative;z-index:6;transition:translate .24s cubic-bezier(.3,.9,.4,1),scale .24s ease}
.page-tabs.sorting{overflow:visible}
.page-tabs.sorting a:not(.dragging){cursor:grabbing}
@media(prefers-reduced-motion:reduce){.page-tabs a.shifting,.page-tabs a.dragging,.page-tabs a.settling{transition:none}}
/* Meals (Sophia, 2026-10-23) in the dashboard's material. The kitchen window and the calorie ring stay in view at the
   top while you scroll through the foods, so you can watch your Pettö eat each thing you tap. */
html body .meal-card.ml-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
html body .meal-card.ml-on .section-head .eyebrow{color:var(--mu-dim)!important;letter-spacing:.2em}
html body .meal-card.ml-on .section-head h2{color:var(--mu-ink)}
html body .meal-card.ml-on .calorie-total:not(#wb){color:var(--mu-ink)}
.ml-hero{position:sticky;top:64px;z-index:9;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto;gap:6px 14px;align-items:center;margin:14px -4px 14px;padding:12px;border-radius:20px;background:var(--mu-panel);box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim),0 14px 26px var(--mu-drop)}
.ml-hero .diner-stage{grid-row:1/span 2;height:190px;border:4px solid color-mix(in srgb,var(--mu-dim) 55%,var(--mu-deep));border-radius:18px;box-shadow:inset 0 3px 10px #00000040,0 2px 0 var(--mu-edge)}
.diner-room{position:absolute;inset:0}.diner-room svg{display:block;width:100%;height:100%}
.diner-stage.has-room{background:none}.diner-stage.has-room .diner-table{display:none}
/* A bigger Pettö at the table, eating (its eating animation runs all the time; the food drops and gets nibbled on a tap). */
.ml-hero .mini-pet-wrap{bottom:6px;left:50%;margin-left:-104px;transform:scale(.72)}
.ml-hero .diner-food{width:56px;height:56px;bottom:14px;left:calc(50% + 6px)}
.ml-hero .diner-pop{top:10px;font-size:12px}
.ml-ring{position:relative;justify-self:center;align-self:end;width:min(132px,100%);aspect-ratio:1}
.ml-ring svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.ml-ring circle{fill:none;stroke-width:9;stroke-linecap:round}
.ml-ring-track{stroke:var(--mu-groove)}
.ml-ring-fill{stroke:#6fd49a;stroke-dasharray:0 100;filter:drop-shadow(0 0 5px #6fd49a);transition:stroke-dasharray .8s cubic-bezier(.3,.9,.4,1),stroke .3s}
.ml-ring.over .ml-ring-fill{stroke:#ffb44d;filter:drop-shadow(0 0 5px #ffb44d)}
.ml-ring-in{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.1}
.ml-ring-in strong{font:900 24px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.ml-ring-in small{margin-top:3px;font-size:9.5px;font-weight:800;color:var(--mu-dim)}
.ml-ring.fed{animation:mlfed .7s ease}
@keyframes mlfed{40%{transform:scale(1.07)}}
html body .meal-card.ml-on .ml-hero .energy-hearts{justify-self:center;align-self:start;gap:5px}
.ml-body{display:grid;gap:12px;margin-bottom:6px}
html body .meal-card.ml-on .diner-mood:not(#wb){margin:0;padding:12px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font-size:13px}
html body .meal-card.ml-on .meal-week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:10px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
html body .meal-card.ml-on .meal-day{color:var(--mu-dim)}
html body .meal-card.ml-on .meal-day.picked span{box-shadow:0 0 0 2px var(--mu-ink)}
html body .meal-card.ml-on .kcal-left:not(#wb){display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0;padding:12px 14px;border-radius:14px;box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 1px var(--mu-rim)}
html body .meal-card.ml-on .kcal-left strong{font-size:14px;font-weight:900;color:var(--mu-ink)}
html body .meal-card.ml-on .kcal-left small{font-size:11px;color:var(--mu-dim)}
html body .meal-card.ml-on .goal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0}
html body .meal-card.ml-on .energy-goal-note{color:var(--mu-dim)!important}
html body .meal-card.ml-on .goal-edit{border:0;border-radius:99px;padding:7px 13px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in);color:var(--mu-ink)!important;font-size:11px;font-weight:800}
.ml-h{margin:16px 2px 8px;font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--mu-dim)}
/* Nutrients: one slim bar each, instead of five tall boxes that stay empty until you log grams. */
.macro-blocks{display:grid;grid-template-columns:1fr;gap:9px;padding:14px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
html body .meal-card.ml-on .macro-block:not(#wb){position:static;height:auto;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:10px;border-radius:0;background:none;overflow:visible}
.macro-block small{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--mu-dim)}
.mb-bar{display:block;height:7px;border-radius:7px;background:var(--mu-groove);box-shadow:var(--mu-groove-in);overflow:hidden}
html body .meal-card.ml-on .macro-block .mb-bar i{position:static;display:block;height:100%;border-radius:inherit;transition:width .6s ease;box-shadow:0 0 8px color-mix(in srgb,var(--mb) 55%,transparent)}
.macro-block strong{font-size:12px;font-weight:900;color:var(--mu-ink);white-space:nowrap}.macro-block strong em{font-style:normal;font-weight:600;color:var(--mu-dim)}
.macro-block.protein{--mb:#6fb2ff}.macro-block.carbs{--mb:#ff9fcf}.macro-block.fat{--mb:#c6dc5a}.macro-block.fibre{--mb:#6fd49a}.macro-block.sugar{--mb:#ffb44d}
html body .meal-card.ml-on .macro-block .mb-bar i{background:var(--mb)}
html body .meal-card.ml-on .meal-guide{margin-top:2px}
html body .meal-card.ml-on .meal-guide summary{border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-dim)!important}
html body .meal-card.ml-on .meal-guide :is(dt,dd,p){color:var(--mu-dim)}html body .meal-card.ml-on .meal-guide dt{color:var(--mu-ink)}
/* Foods: a meal tab row with ticks, then smaller tiles, name and calories only. */
html body .meal-card.ml-on .quick-head{margin:0 0 8px}
html body .meal-card.ml-on .quick-head h3{display:none}
html body .meal-card.ml-on .meal-types{display:flex;gap:6px;width:100%;padding:5px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);overflow-x:auto;scrollbar-width:none}
html body .meal-card.ml-on .meal-types button{position:relative;flex:1;border-radius:99px;color:var(--mu-dim)!important;white-space:nowrap;transition:background .2s,color .2s}
html body .meal-card.ml-on .meal-types button[aria-pressed="true"]{background:var(--mu-knob)!important;color:var(--mu-ink)!important;box-shadow:var(--mu-knob-shadow)}

html body .meal-card.ml-on .meal-intro{margin:6px 2px 10px;color:var(--mu-dim)!important}
html body .meal-card.ml-on .food-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
html body .meal-card.ml-on .food-tile:not(#wb){padding:10px 6px 8px;border:0;border-radius:16px;background:none!important;color:var(--mu-ink);box-shadow:inset 0 1px 0 var(--mu-edge),0 8px 18px var(--mu-drop),0 0 0 1px var(--mu-rim)}
html body .meal-card.ml-on .food-tile:hover{transform:translateY(-2px)}
html body .meal-card.ml-on .food-tile small{display:none}
html body .meal-card.ml-on .food-art{width:46px;height:46px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in)}
html body .meal-card.ml-on .food-kcal{font-size:10px;font-weight:900;color:var(--mu-dim)}
html body .meal-card.ml-on .meal-more>summary{border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-dim)!important}
html body .meal-card.ml-on .meal-more{margin-top:12px}
html body .meal-card.ml-on .meal-list{border-radius:16px;box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 1px var(--mu-rim);padding:4px 14px}
html body .meal-card.ml-on .meal-item{border-bottom-color:var(--mu-rim)!important;color:var(--mu-ink)}
html body .meal-card.ml-on .meal-item small,html body .meal-card.ml-on .empty-meals{color:var(--mu-dim)!important}
@media(max-width:560px){
  .ml-hero{top:58px;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:4px 10px;margin:12px -6px;padding:8px}
  .ml-hero .diner-stage{height:132px;border-width:3px}
  .ml-hero .mini-pet-wrap{transform:scale(.5);margin-left:-98px}
  .ml-hero .diner-food{width:40px;height:40px}
  .ml-ring{width:min(92px,100%)}.ml-ring circle{stroke-width:10}.ml-ring-in strong{font-size:17px}.ml-ring-in small{font-size:8px}
  html body .meal-card.ml-on .ml-hero .energy-hearts i{width:17px;height:15px}
  html body .meal-card.ml-on .food-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* A window closer to the kitchen's own shape on wide screens, and the folded rows without a box inside a box. */
@media(min-width:561px){
  .ml-hero{grid-template-columns:minmax(0,310px) minmax(0,1fr);justify-content:space-between}
  .ml-hero .diner-stage{height:230px}
  .ml-hero .mini-pet-wrap{transform:scale(.66);bottom:10px}
  .ml-ring{width:min(150px,100%)}
}
html body .meal-card.ml-on :is(.meal-guide,.meal-more):not(#wb){background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
html body .meal-card.ml-on :is(.meal-guide,.meal-more)>summary{padding:12px 14px;cursor:pointer;font-size:12px;font-weight:800}
html body .meal-card.ml-on .meal-guide[open]>summary,html body .meal-card.ml-on .meal-more[open]>summary{margin-bottom:10px}
html body .meal-card.ml-on .meal-guide dl{padding:0 4px}
/* A finished care changes its box to "Complete" (Sophia, 2026-10-23): the row takes its colour, the icon fills in, the
   button becomes a Complete badge, and a row that has just been completed pops. All five done lights up the ring. */
.cc-row{transition:background .4s,box-shadow .4s}
.cc-row.done{background:linear-gradient(90deg,color-mix(in srgb,var(--care) 24%,var(--mu-deep)),var(--mu-deep));box-shadow:var(--mu-groove-in),inset 3px 0 0 var(--care)}
.cc-row.done .cc-body b{color:var(--mu-ink)}
.cc-row.done .cc-body small{color:color-mix(in srgb,var(--care) 55%,var(--mu-dim))}
.cc-row.done .cc-bar{background:var(--care);box-shadow:0 0 8px color-mix(in srgb,var(--care) 60%,transparent)}
.cc-done{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 7px;border-radius:99px;background:var(--care);color:#fff;font-size:11px;font-weight:900;box-shadow:0 3px 10px color-mix(in srgb,var(--care) 45%,transparent)}
.cc-done b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#ffffff40;font-size:11px}
.cc-row.just{animation:ccpop .7s cubic-bezier(.3,1.5,.5,1)}
.cc-row.just .cc-done{animation:ccbadge .7s cubic-bezier(.3,1.8,.5,1)}
.cc-row.just .cc-icon{animation:ccspin .7s ease}
@keyframes ccpop{0%{transform:scale(.97)}45%{transform:scale(1.025);box-shadow:var(--mu-groove-in),0 0 0 2px var(--care),0 0 22px color-mix(in srgb,var(--care) 55%,transparent)}100%{transform:none}}
@keyframes ccbadge{0%{transform:scale(.3);opacity:0}100%{transform:none;opacity:1}}
@keyframes ccspin{50%{transform:scale(1.25) rotate(14deg)}}
.care-card.all .cc-ring-fill{stroke:#ffc94d;filter:drop-shadow(0 0 7px #ffc94d)}
.care-card.all .cc-ring b{color:#ffc94d}
.cc-next.all{color:var(--mu-ink)}
@media(prefers-reduced-motion:reduce){.cc-row.just,.cc-row.just .cc-done,.cc-row.just .cc-icon{animation:none}}
/* Editing a food or a logged meal (Sophia, 2026-10-23) in the dashboard's look, plus the ✎ on each food. */
.food-cell{position:relative;min-width:0}
.food-cell .food-tile{width:100%;height:100%}
.food-edit{position:absolute;top:5px;right:5px;z-index:2;display:grid;place-items:center;width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--mu-deep);color:var(--mu-dim);font-size:12px;box-shadow:var(--mu-groove-in);opacity:.75;transition:opacity .15s,transform .15s}
.food-edit:hover,.food-edit:focus-visible{opacity:1;transform:scale(1.1);outline:none;color:var(--mu-ink)}
.food-cell.edited::before{content:"";position:absolute;top:9px;left:9px;z-index:2;width:7px;height:7px;border-radius:50%;background:#6fb2ff;box-shadow:0 0 7px #6fb2ff}
html body .meal-card.ml-on .meal-edit{flex:none;margin-right:2px;padding:4px 10px;border:0;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink)!important;font-size:10.5px;font-weight:800}
.food-editor{width:min(420px,calc(100% - 24px));padding:22px 20px 18px;border:0;border-radius:24px;background:var(--mu-panel);color:var(--mu-ink);box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim),0 30px 70px #00000066}
.food-editor::backdrop{background:#000a;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.food-editor .close{position:absolute;top:10px;right:12px;width:34px;height:34px;border:0;border-radius:50%;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font-size:20px}
.food-editor .eyebrow{display:block;color:var(--mu-dim);letter-spacing:.2em}
.food-editor h2{margin:4px 0 4px;font-size:22px;color:var(--mu-ink)}
.fe-sub{margin:0 0 14px;font-size:12px;line-height:1.45;color:var(--mu-dim)}
.fe-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.fe-form label{display:grid;gap:5px;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.fe-wide{grid-column:1/-1}
.fe-form input{width:100%;padding:11px 12px;border:0;border-radius:12px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:800 15px 'DM Sans',sans-serif;letter-spacing:0;text-transform:none}
.fe-form input:read-only{opacity:.65}
.fe-form input:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
.fe-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.fe-link{margin-right:auto;padding:8px 2px;border:0;background:none;color:var(--mu-dim);font-size:12px;font-weight:800;text-decoration:underline;cursor:pointer}
.fe-cancel,.fe-save{padding:10px 18px;border:0;border-radius:99px;font-size:13px;font-weight:900;cursor:pointer}
.fe-cancel{background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink)}
.fe-save{background:#6fb2ff;color:#fff;border:2px solid #ffffffcc;box-shadow:0 4px 12px #6fb2ff66}
/* Portion size: four buttons in the meal tabs' style. */
.ml-portion{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:5px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.ml-portion-label{flex:none;padding:0 8px 0 10px;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
.ml-portion button{flex:1;padding:7px 4px;border:0;border-radius:99px;background:none;color:var(--mu-dim);font-size:11.5px;font-weight:900;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.ml-portion button[aria-pressed="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
.ml-portion button:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
.ml-portion-note{margin:0 2px 10px;font-size:11.5px;line-height:1.4;color:var(--mu-dim)}
@media(max-width:430px){.ml-portion-label{display:none}}
/* Meal tabs with icons (a cup for Drinks), and the Food / Drink switch when adding your own. */
html body .meal-card.ml-on .meal-types button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mt-icon{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:480px){
  html body .meal-card.ml-on .meal-types button{padding:7px 8px}
  html body .meal-card.ml-on .meal-types button:not([aria-pressed="true"]) span{display:none}
  html body .meal-card.ml-on .meal-types button[aria-pressed="true"]{flex:2.2}
}
.ml-kind{grid-column:1/-1;display:flex;gap:6px;padding:5px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.ml-kind button{flex:1;padding:8px 6px;border:0;border-radius:99px;background:none;color:var(--mu-dim);font-size:12px;font-weight:900;cursor:pointer;transition:background .2s,color .2s}
.ml-kind button[aria-pressed="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
.meal-form .drink-only[hidden]{display:none!important}
.meal-form .drink-water{display:flex;align-items:center;gap:8px;grid-column:1/-1;font-size:12px;font-weight:700;color:var(--mu-ink)}
.meal-form .drink-water input{width:auto}
/* The ✎ on a food is just the pencil, with no circle around it (Sophia, 2026-10-23). The touch area stays the same. */
.food-edit{background:none!important;box-shadow:none!important;color:var(--mu-dim);font-size:14px;opacity:.7}
.food-edit:hover,.food-edit:focus-visible{background:none!important;transform:scale(1.15)}
/* The four Meals tabs. */
.ml-tabs{display:flex;gap:6px;margin:0 0 12px;padding:5px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.ml-tab{position:relative;flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border:0;border-radius:99px;background:none;color:var(--mu-dim);font-size:12.5px;font-weight:900;cursor:pointer;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .25s,color .25s,box-shadow .25s}
.ml-tab svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ml-tab[aria-selected="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
.ml-tab:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
.ml-tab-count{min-width:17px;height:17px;padding:0 5px;border-radius:99px;background:#6fd49a;color:#fff;font:900 10px/17px 'DM Sans',sans-serif;text-align:center}
.ml-panel{display:grid;gap:12px;animation:mlpanel .3s ease}
.ml-panel[hidden]{display:none}
@keyframes mlpanel{from{opacity:0;transform:translateY(6px)}}
.ml-panel>*{margin-top:0;margin-bottom:0}
#scan-status:empty{display:none}
#scan-status{margin:0 2px 10px;font-size:12px;font-weight:700;color:var(--mu-dim)}
.ml-more-link{justify-self:start;padding:10px 4px;border:0;background:none;color:var(--mu-dim);font-size:12.5px;font-weight:800;text-decoration:underline;cursor:pointer}
html body .meal-card.ml-on .ml-panel .meal-more{display:grid;gap:12px}
@media(max-width:480px){.ml-tab{padding:9px 4px;font-size:11.5px;gap:5px}.ml-tab svg{display:none}}
@media(prefers-reduced-motion:reduce){.ml-panel{animation:none}}
/* Search online results in the Custom tab. */
.food-search{display:flex;gap:8px}
.food-search input{flex:1;min-width:0;padding:11px 14px;border:0;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:700 14px 'DM Sans',sans-serif}
.food-search button{flex:none;padding:10px 16px;border:2px solid #ffffffcc;border-radius:99px;background:#6fb2ff;color:#fff;font-size:12.5px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px #6fb2ff55}
.food-results{display:grid;gap:6px}
.food-results:empty{display:none}
.food-result{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:10px 14px;border:0;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);text-align:left;cursor:pointer}
.food-result strong{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.food-result small{grid-column:1;font-size:11px;color:var(--mu-dim)}
.food-result span{grid-column:2;grid-row:1/span 2;align-self:center;font-size:12px;font-weight:900}
.food-result:hover{outline:2px solid #6fb2ff}
/* The menu book (Sophia, 2026-10-23): foods on pages of six, like a little café menu. The cover and paper take your
   Pettö's egg colour; the binding is stitched down the left; turn pages by swiping, the arrows or the arrow keys. */
.menu-book{--bk:var(--pcd,#a76c1c);--paper:color-mix(in srgb,var(--pc,#f5b94e) 12%,#fffaf0);--ink-b:color-mix(in srgb,var(--pcd,#a76c1c) 70%,#2a2118);position:relative;margin:0;padding:10px 10px 8px 22px;border-radius:20px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#f5b94e) 55%,var(--bk)),color-mix(in srgb,var(--bk) 85%,#000));box-shadow:0 14px 28px color-mix(in srgb,var(--bk) 35%,transparent),inset 0 1px 0 #ffffff55,inset 0 0 0 2px color-mix(in srgb,var(--bk) 50%,transparent)}
html[data-mode="dark"] .menu-book{--paper:#2b2622;--ink-b:#efe3d1}
.menu-book::before{content:"";position:absolute;left:8px;top:16px;bottom:16px;width:6px;background:repeating-linear-gradient(180deg,#ffffffcc 0 8px,transparent 8px 20px);border-radius:3px;opacity:.85}
.mb-stage{position:relative;perspective:1500px;border-radius:12px 14px 14px 12px;outline:none;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mb-stage:focus-visible{box-shadow:0 0 0 3px #fff}
.menu-book .food-grid{display:block;margin:0;padding:0}
.mb-page{position:relative;padding:14px 16px 10px;border-radius:12px 14px 14px 12px;color:var(--ink-b);backface-visibility:hidden;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bk) 22%,transparent) 0,transparent 6%),repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--bk) 8%,transparent) 33px 34px),var(--paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bk) 18%,transparent),inset -6px 0 12px color-mix(in srgb,var(--bk) 10%,transparent)}
.mb-page[hidden]{display:none}
.mb-page header{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 8px;color:var(--bk)}
.mb-page header svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mb-page header h4{margin:0;font:900 17px Nunito,'DM Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase}
.mb-page header::before,.mb-page header::after{content:"";flex:1;height:2px;border-radius:2px;background:radial-gradient(circle,currentColor 0 1px,transparent 1.5px) 0 50%/8px 4px repeat-x;opacity:.55}
.mb-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 22px}
.mb-page footer{margin-top:6px;text-align:center;font:800 11px Nunito,sans-serif;letter-spacing:.2em;color:color-mix(in srgb,var(--bk) 70%,transparent)}
/* A page being turned: the old page flips away over the new one, with a shadow on its edge. */
.mb-leaf{position:absolute;inset:0;z-index:5;pointer-events:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bk) 18%,transparent),6px 0 18px #0000004d}
/* Foods as menu lines: a picture, the name and portion, a dotted leader, the calories. */
.menu-book .food-cell{border-bottom:0}
.menu-book .food-tile:not(#wb){display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:0 10px;width:100%;padding:7px 4px 7px 2px;border:0;border-radius:10px;background:none!important;box-shadow:none!important;color:inherit;text-align:left;transform:none}
.menu-book .food-tile:hover{background:color-mix(in srgb,var(--pc,#f5b94e) 22%,transparent)!important}
.menu-book .food-tile .food-art{grid-row:1/span 2;width:36px;height:36px;margin:0;background:color-mix(in srgb,var(--pc,#f5b94e) 28%,#fff)!important;box-shadow:none}
.menu-book .food-tile .food-art svg{width:26px;height:26px}
.menu-book .food-tile strong{grid-column:2;font:900 13.5px/1.2 Nunito,'DM Sans',sans-serif;color:var(--ink-b);white-space:normal}
.menu-book .food-tile small{display:block!important;grid-column:2;margin-top:1px;font-size:10.5px;color:color-mix(in srgb,var(--ink-b) 65%,transparent)}
.menu-book .food-tile .food-kcal{grid-column:3;grid-row:1/span 2;padding:0 0 0 14px;background:radial-gradient(circle,color-mix(in srgb,var(--ink-b) 45%,transparent) 0 1px,transparent 1.5px) 0 62%/7px 4px repeat-x;border-radius:0;font:900 12px Nunito,sans-serif;color:var(--ink-b);white-space:nowrap}
.menu-book .food-edit{top:50%;right:auto;left:-14px;transform:translateY(-50%);width:24px;height:24px;color:color-mix(in srgb,var(--ink-b) 60%,transparent);opacity:0;transition:opacity .15s}
.menu-book .food-cell:hover .food-edit,.menu-book .food-edit:focus-visible{opacity:1}
@media(hover:none){.menu-book .food-edit{opacity:.55}}
.menu-book .food-cell{position:relative}
.menu-book .food-cell.edited::before{top:50%;left:-9px;margin-top:-3.5px}
/* Page controls under the book. */
.mb-foot{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin:8px 0 0 -12px;padding:0 4px}
.mb-turn{display:grid;place-items:center;width:38px;height:38px;padding:0;border:2px solid #ffffffcc;border-radius:50%;background:var(--paper);color:var(--ink-b);font:700 24px/1 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 3px 8px #0000003d;transition:transform .12s,opacity .2s}
.mb-turn:active{transform:scale(.92)}.mb-turn:disabled{opacity:.35;cursor:default}
.mb-where{display:grid;justify-items:center;gap:2px;color:#fff;text-shadow:0 1px 2px #00000055}
.mb-where b{font:900 12px Nunito,sans-serif;letter-spacing:.12em;text-transform:uppercase}.mb-where span{font-size:10.5px;font-weight:700;opacity:.9}
.mb-dots{display:flex;gap:5px;margin-top:2px}.mb-dots u{width:6px;height:6px;border-radius:50%;background:#ffffff66;text-decoration:none;transition:width .25s,background .25s}.mb-dots u.on{width:16px;border-radius:3px;background:#fff}
@media(max-width:560px){.menu-book{padding:8px 8px 6px 18px}.menu-book::before{left:6px}.mb-items{grid-template-columns:1fr}.mb-page{padding:12px 12px 8px}.menu-book .food-edit{left:auto;right:-4px;top:12px;transform:none}}
/* Grabbing a corner (Sophia, 2026-10-23): four hot corners, with a curled corner showing where to pull. While a page is
   peeling, the next page waits underneath, the old page is clipped along the crease, and the folded flap is drawn on top. */
.mb-corner{position:absolute;z-index:6;width:58px;height:58px;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.mb-corner.tl{left:0;top:0}.mb-corner.tr{right:0;top:0}.mb-corner.bl{left:0;bottom:0}.mb-corner.br{right:0;bottom:0}
.mb-corner.off{display:none}
.mb-corner.br::after,.mb-corner.bl::after{content:"";position:absolute;bottom:0;width:26px;height:26px;pointer-events:none;opacity:.9;transition:width .2s,height .2s}
.mb-corner.br::after{right:0;border-radius:14px 0 12px 0;background:linear-gradient(315deg,var(--bk) 0 50%,color-mix(in srgb,var(--paper) 70%,#fff) 50% 100%);box-shadow:-3px -3px 6px #0000002e}
.mb-corner.bl::after{left:0;border-radius:0 14px 0 12px;background:linear-gradient(45deg,var(--bk) 0 50%,color-mix(in srgb,var(--paper) 70%,#fff) 50% 100%);box-shadow:3px -3px 6px #0000002e}
.mb-corner:hover::after,.mb-corner:active::after{width:34px;height:34px}
.mb-stage.peeling{overflow:hidden}
.mb-stage.peeling .food-grid{position:relative;z-index:2}
.mb-stage.peeling .mb-corner{display:none}
.mb-under{position:absolute!important;inset:0;z-index:1;margin:0}
.mb-peel{position:absolute;left:0;top:0;z-index:4;pointer-events:none;overflow:visible}
.mb-peel .pl-flap{stroke:color-mix(in srgb,var(--bk) 35%,transparent);stroke-width:1}
.mb-peel .pl-flap-shade{stroke:none}
@media(hover:none){.mb-corner.br::after,.mb-corner.bl::after{width:30px;height:30px}}
/* The dotted leader runs from the name to the calories, like a café menu. */
.menu-book .food-tile:not(#wb){grid-template-columns:38px minmax(0,auto) minmax(12px,1fr) auto}
.menu-book .food-tile::after{content:"";grid-column:3;grid-row:1;align-self:end;margin:0 6px 5px;border-bottom:2px dotted color-mix(in srgb,var(--ink-b) 40%,transparent)}
.menu-book .food-tile small{grid-column:2/4}
.menu-book .food-tile .food-kcal{grid-column:4;background:none!important;padding:0}
/* Cleaner (Sophia, 2026-10-23): no round arrow buttons. Pages turn by pulling a corner, swiping or the arrow keys; the
   two buttons stay only for screen readers and keyboards, and show up as a small pill when focused. The line of intro
   text goes too, since the portion note says the same. */
.mb-turn{position:absolute;width:1px;height:1px;margin:0;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;background:var(--paper);color:var(--ink-b);font:800 12px 'DM Sans',sans-serif}
.mb-turn:focus-visible{position:static;width:auto;height:auto;padding:7px 12px;clip-path:none;border-radius:99px;outline:2px solid #fff}
.mb-foot{display:flex;justify-content:center;margin:6px 0 0;padding:0}
.mb-where b{display:none}
.mb-where{gap:5px}
html body .meal-card.ml-on .meal-intro{display:none}
/* THE BOOK, properly (Sophia, 2026-10-23: "it doesn't feel like a book"). A hardback with a cover board round the pages,
   a stack of page edges, a spine between two pages on a wide screen, a ribbon, and a cover that swings open. */
.menu-book{padding:0;background:none;box-shadow:none;border-radius:0}
.menu-book::before{display:none}
.mb-stage{perspective:none;border-radius:0}
.mb-book{position:relative;perspective:1800px;transform-origin:center;margin:10px 12px 14px 10px}
/* The cover board sits behind the pages and peeks out all round; its left edge is the spine. */
.mb-book::before{content:"";position:absolute;inset:-9px -10px -11px -9px;z-index:0;border-radius:10px 16px 16px 10px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc,#f5b94e) 50%,var(--bk)),color-mix(in srgb,var(--bk) 88%,#000));
  box-shadow:0 18px 30px color-mix(in srgb,var(--bk) 38%,transparent),inset 0 1px 0 #ffffff55,inset 0 0 0 2px color-mix(in srgb,var(--bk) 55%,transparent);transition:left .9s cubic-bezier(.45,.05,.3,1)}
.mb-stage.closed.spread .mb-book::before{left:calc(50% - 4px)}
.food-grid{position:relative;z-index:1}
.menu-book .food-grid{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;align-items:stretch;
  /* the stack of page edges along the right and bottom */
  filter:drop-shadow(1px 1px 0 #fffdf6) drop-shadow(2px 2px 0 color-mix(in srgb,var(--bk) 28%,transparent)) drop-shadow(3px 3px 0 #fffdf6) drop-shadow(4px 4px 0 color-mix(in srgb,var(--bk) 22%,transparent))}
.mb-stage.closed .food-grid{visibility:hidden}
.mb-page{min-height:420px;display:flex;flex-direction:column;border-radius:4px;box-shadow:none}
.mb-page.is-single{border-radius:6px 12px 12px 6px}
.mb-page.is-left{border-radius:10px 2px 2px 10px;background-image:linear-gradient(270deg,color-mix(in srgb,var(--bk) 26%,transparent) 0,transparent 9%),repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--bk) 8%,transparent) 33px 34px)}
.mb-page.is-right{border-radius:2px 10px 10px 2px;background-image:linear-gradient(90deg,color-mix(in srgb,var(--bk) 26%,transparent) 0,transparent 9%),repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--bk) 8%,transparent) 33px 34px)}
.mb-page.is-single{background-image:linear-gradient(90deg,color-mix(in srgb,var(--bk) 22%,transparent) 0,transparent 7%),repeating-linear-gradient(180deg,transparent 0 33px,color-mix(in srgb,var(--bk) 8%,transparent) 33px 34px)}
.mb-page .mb-items{flex:1;grid-template-columns:1fr;gap:0 22px}
.mb-page footer{margin-top:auto;padding-top:8px}
.mb-page.is-right footer{text-align:right}.mb-page.is-left footer{text-align:left}
.mb-page.is-left,.mb-page.is-right{padding-inline:22px 18px}.mb-page.is-right{padding-inline:18px 22px}
/* The ribbon hangs from the top of the spine (or the top right of a single page). */
.mb-ribbon{position:absolute;z-index:3;top:-7px;right:30px;width:15px;height:62px;background:linear-gradient(90deg,#c93a5c,#e8587a 50%,#c93a5c);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);filter:drop-shadow(1px 2px 1px #0000004d);pointer-events:none}
.mb-stage.spread .mb-ribbon{right:auto;left:calc(50% + 22px)}
.mb-stage.closed .mb-ribbon{display:none}
/* Inside cover, contents, last page. */
.mb-art{flex:1;display:grid;align-content:center;justify-items:center;gap:8px;padding:6px 8px;text-align:center}
.mb-art-pet{display:grid;place-items:center;width:150px;height:150px;border-radius:50%;background:color-mix(in srgb,var(--pc,#f5b94e) 30%,#fff);box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--bk) 25%,transparent)}
.mb-art-pet svg{width:86%;height:86%;overflow:visible}
.mb-art h4{margin:6px 0 0;font:900 22px Nunito,sans-serif;color:var(--bk)}
.mb-art p{margin:0;font-size:13px;line-height:1.45}.mb-art small{font-size:11px;opacity:.7}
.mb-toc{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.mb-toc button{display:grid;grid-template-columns:auto minmax(12px,1fr) auto;align-items:center;gap:8px;width:100%;padding:11px 4px;border:0;border-radius:10px;background:none;color:var(--ink-b);font:900 15px Nunito,sans-serif;text-align:left;cursor:pointer}
.mb-toc button:hover{background:color-mix(in srgb,var(--pc,#f5b94e) 22%,transparent)}
.mb-toc i{align-self:end;margin-bottom:5px;border-bottom:2px dotted color-mix(in srgb,var(--ink-b) 40%,transparent)}
.mb-toc b{font-size:13px}
.mb-end{margin:6px 0 14px;font-size:13px;line-height:1.5}
.mb-custom{align-self:center;padding:11px 18px;border:2px solid #ffffffcc;border-radius:99px;background:var(--bk);color:#fff;font-size:13px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px color-mix(in srgb,var(--bk) 45%,transparent)}
.mb-end,.mb-end+.mb-custom{text-align:center}
/* The cover: front in the egg's colour, with a gilded title and your Pettö; the back is the inside cover. */
.mb-cover{position:absolute;z-index:8;top:0;bottom:0;left:0;width:100%;transform-origin:left center;transform-style:preserve-3d;cursor:pointer;-webkit-tap-highlight-color:transparent}
.mb-stage.spread .mb-cover{left:50%;width:50%}
.mb-cover[hidden]{display:none}
.mb-stage:not(.closed):not(.opening) .mb-cover{display:none}
.mb-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:6px 14px 14px 6px}
.mb-front{display:grid;align-content:center;justify-items:center;gap:6px;padding:20px;text-align:center;color:#fff3d6;
  background:linear-gradient(135deg,color-mix(in srgb,var(--pc,#f5b94e) 55%,var(--bk)),color-mix(in srgb,var(--bk) 90%,#000));
  box-shadow:inset 0 0 0 3px color-mix(in srgb,#ffe9a8 45%,transparent),inset 0 0 0 7px color-mix(in srgb,var(--bk) 60%,transparent),0 16px 30px #00000040}
.mb-front::before{content:"";position:absolute;left:0;top:0;bottom:0;width:16px;border-radius:6px 0 0 6px;background:linear-gradient(90deg,#00000055,#ffffff1f 60%,transparent)}
.mb-cover-pet{display:grid;place-items:center;width:132px;height:132px;border-radius:50%;background:#ffffff26;box-shadow:inset 0 0 0 3px #ffe9a888}
.mb-cover-pet svg{width:86%;height:86%;overflow:visible}
.mb-cover-title{font:900 34px Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#ffe9a8;text-shadow:0 2px 0 #00000055,0 0 14px #ffe9a855}
.mb-front small{font-size:13px;font-weight:800;letter-spacing:.06em;opacity:.9}
.mb-front em{margin-top:8px;padding:5px 14px;border-radius:99px;background:#ffffff26;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;animation:mbtap 2.4s ease-in-out infinite}
@keyframes mbtap{50%{transform:translateY(-3px);background:#ffffff3d}}
.mb-back{transform:rotateY(180deg);background:var(--paper);box-shadow:inset -8px 0 14px color-mix(in srgb,var(--bk) 22%,transparent)}
.mb-stage.closed.spread .mb-book{transform:translateX(-25%)}
@media(prefers-reduced-motion:reduce){.mb-front em{animation:none}}
/* A spread's two pages; a peeling page sits over the new one, in its own half. */
.mb-under{position:absolute!important;top:0;bottom:0;z-index:1;margin:0;min-height:0}
.mb-stage.peeling .food-grid{z-index:2}
@media(max-width:560px){.mb-book{margin:8px 10px 12px 8px}.mb-page{min-height:400px}.mb-art-pet{width:120px;height:120px}}
/* ===== Meals, round three (Sophia, 2026-10-23) ===== */
/* Matte buttons, no shine. */
.mb-turn,.mb-custom,.pd-btn,.cc-go,.wb-show{background-image:none}
.ml-hero{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto auto}
/* The character sits in the middle of its window. */
.ml-hero .mini-pet-wrap{left:50%;margin-left:-77.5px}
.ml-hero .diner-food{left:calc(50% + 34px)}
/* Calories and nutrients together, like the dashboard console: the ring, then five faders that rise as you eat. */
.macro-blocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;align-self:stretch;padding:8px 6px 6px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
html body .meal-card.ml-on .macro-block:not(#wb){position:relative;height:auto;display:grid;grid-template-columns:none;justify-items:center;gap:3px;align-content:start;border-radius:0;background:none;overflow:visible}
.mf-groove{position:relative;display:block;width:8px;height:56px;border-radius:8px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
html body .meal-card.ml-on .macro-block .mf-groove i{position:absolute;left:0;right:0;bottom:0;display:block;width:auto;height:0;border-radius:8px;background:var(--mb);box-shadow:0 0 8px color-mix(in srgb,var(--mb) 55%,transparent);transition:height .7s cubic-bezier(.3,.9,.4,1)}
html body .meal-card.ml-on .macro-block .mf-groove i::after{content:"";position:absolute;left:50%;top:-5px;width:18px;height:9px;margin-left:-9px;border-radius:3px;background:var(--mu-knob);box-shadow:0 2px 4px #0000004d,0 0 0 1.5px var(--mb)}
html body .meal-card.ml-on .macro-block strong{font-size:11px;font-weight:900;color:var(--mu-ink);white-space:nowrap}
html body .meal-card.ml-on .macro-block strong em{font-style:normal;font-weight:600;color:var(--mu-dim);font-size:9px}
html body .meal-card.ml-on .macro-block small{font-size:8.5px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--mu-dim)}
@media(max-width:560px){.mf-groove{width:6px;height:34px}html body .meal-card.ml-on .macro-block strong{font-size:9.5px}html body .meal-card.ml-on .macro-block small{font-size:7px;letter-spacing:0}.macro-blocks{padding:6px 2px 4px}.ml-hero .diner-stage{height:150px}}
/* The Today tab starts with the energy hearts. */
html body .meal-card.ml-on .ml-panel .energy-hearts{justify-self:start}
/* A highlight that slides between the tabs. */
.meal-types,.ml-tabs{position:relative}
.meal-types.has-ind::before,.ml-tabs.has-ind::before{content:"";position:absolute;top:5px;bottom:5px;left:0;width:var(--ind-w);transform:translateX(var(--ind-x));border-radius:99px;background:var(--mu-knob);box-shadow:var(--mu-knob-shadow);transition:transform .38s cubic-bezier(.3,.9,.4,1),width .38s cubic-bezier(.3,.9,.4,1);pointer-events:none}
.meal-types.has-ind button,.ml-tabs.has-ind .ml-tab{position:relative;z-index:1;background:none!important;box-shadow:none!important}
html body .meal-card.ml-on .meal-types.has-ind button[aria-pressed="true"],.ml-tabs.has-ind .ml-tab[aria-selected="true"]{background:none!important;box-shadow:none!important;color:var(--mu-ink)!important}
@media(prefers-reduced-motion:reduce){.meal-types.has-ind::before,.ml-tabs.has-ind::before{transition:none}}
/* Custom, cleaner: three cards, one job each. */
html body .meal-card.ml-on .ml-panel .meal-more{display:grid;gap:14px}
.cu-card{display:grid;gap:10px;padding:16px;border-radius:18px;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 22px var(--mu-drop),0 0 0 1px var(--mu-rim)}
.cu-card h4{margin:0;font:900 15px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.cu-help{margin:-6px 0 0;font-size:12px;color:var(--mu-dim)}
.cu-card .scan-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0}
.cu-card .scan-row .scan-photo{flex:none;padding:10px 14px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font-size:12.5px;font-weight:800;cursor:pointer}
.cu-card .scan-row input{flex:1;min-width:120px;padding:10px 14px;border:0;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:700 14px 'DM Sans',sans-serif}
.cu-card .scan-row #barcode-lookup{flex:none;padding:10px 16px;border:2px solid #ffffffcc;border-radius:99px;background:#6fb2ff;color:#fff;font-size:12.5px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px #6fb2ff55}
.cu-card .meal-form{display:grid;grid-template-columns:1fr;gap:10px;margin:0}
.cu-card .meal-form label{display:grid;gap:5px;margin:0;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.cu-card .meal-form label.drink-water{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:var(--mu-ink)}
.cu-card .meal-form input:not([type="checkbox"]){width:100%;margin:0;padding:12px 14px;border:0;border-radius:12px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:800 15px 'DM Sans',sans-serif;letter-spacing:0;text-transform:none}
.cu-card .meal-form input:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
.cu-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.cu-row label[hidden]{display:none}
.cu-nut{border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.cu-nut>summary{padding:12px 14px;cursor:pointer;font-size:12.5px;font-weight:800;color:var(--mu-ink)}.cu-nut>summary small{font-weight:600;color:var(--mu-dim)}
.cu-nut .meal-nutrients{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;padding:0 12px 12px;margin:0}
.cu-nut .meal-nutrients input{padding:9px 10px!important;font-size:14px!important}
.cu-card .meal-form button.primary{justify-self:stretch;padding:13px;border:2px solid #ffffffcc;border-radius:99px;background:#6fb2ff;color:#fff;font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 4px 12px #6fb2ff55}
.cu-card .food-source{font-size:10.5px;color:var(--mu-dim)}.cu-card .food-source a{color:inherit}
.cu-card .ml-kind{grid-column:auto}
/* Fixes: the pages fill the book (an older grid rule made them columns), and the page-edge stack is drawn on the pages
   themselves instead of as a filter that shadowed every letter. */
html body .meal-card.ml-on .menu-book .food-grid{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;filter:none;width:100%}
.mb-page.is-single,.mb-page.is-right{box-shadow:1px 1px 0 #fffdf6,2px 2px 0 color-mix(in srgb,var(--bk) 28%,transparent),3px 3px 0 #fffdf6,4px 4px 0 color-mix(in srgb,var(--bk) 22%,transparent)}
.mb-page.is-left{box-shadow:-1px 1px 0 #fffdf6,-2px 2px 0 color-mix(in srgb,var(--bk) 28%,transparent),-3px 3px 0 #fffdf6,-4px 4px 0 color-mix(in srgb,var(--bk) 22%,transparent)}
.mb-under.is-single,.mb-under.is-right{box-shadow:none}
/* The Meals window is an egg, like the home page: the character sits snugly inside it. */
html body .ml-hero{grid-template-columns:auto minmax(0,1fr)}
html body .ml-hero .diner-stage{width:148px;height:184px;justify-self:center;border-radius:50% 50% 50% 50%/60% 60% 40% 40%}
html body .ml-hero .mini-pet-wrap{transform:scale(.66);bottom:4px}
html body .ml-hero .diner-food{width:42px;height:42px;bottom:10px;left:calc(50% + 14px)}
@media(max-width:560px){
  html body .ml-hero .diner-stage{width:112px;height:140px}
  html body .ml-hero .mini-pet-wrap{transform:scale(.5);bottom:2px}
  html body .ml-hero .diner-food{width:32px;height:32px;left:calc(50% + 10px)}
}

/* Cleaner Meals (Sophia 2026-10-23) */
/* Portion: a small quiet choice, not a big bar. */
html body .meal-card.ml-on .ml-portion{display:inline-flex;align-items:center;gap:2px;width:auto;margin:2px 0 0;padding:3px;border-radius:999px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
html body .meal-card.ml-on .ml-portion-label{display:none}
html body .meal-card.ml-on .ml-portion button{flex:none;min-width:0;width:auto;padding:4px 10px;font-size:11px;font-weight:800;line-height:1.2;border-radius:999px;box-shadow:none}
html body .meal-card.ml-on .ml-portion-note{display:none}
.meal-types{touch-action:pan-y;user-select:none;-webkit-user-select:none}
/* Hearts and calories-left now live with the character on the dashboard. */
/* Past the goal the bar goes round again from 0: the first lap stays lit underneath. */
.ml-ring.over .ml-ring-track{stroke:#6fd49a88}
.macro-block.over .mf-groove{box-shadow:0 0 0 1.5px #ffb44d,0 0 8px #ffb44d88}
/* Today's plate is a little book like the menu: same cover board, ribbon, page edges and corner curls. */
.plate-wrap{margin:16px 0 4px;padding:10px 10px 12px 22px}
.plate-wrap .plate-book{position:relative;min-height:230px;display:flex;flex-direction:column;border-radius:6px 12px 12px 6px;color:var(--ink-b);touch-action:pan-y;user-select:none;-webkit-user-select:none;
  background:linear-gradient(90deg,color-mix(in srgb,var(--bk) 22%,transparent) 0,transparent 7%),repeating-linear-gradient(180deg,transparent 0 35px,color-mix(in srgb,var(--bk) 9%,transparent) 35px 36px),var(--paper);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bk) 18%,transparent),inset -6px 0 12px color-mix(in srgb,var(--bk) 10%,transparent),1px 1px 0 #fffdf6,2px 2px 0 color-mix(in srgb,var(--bk) 28%,transparent),3px 3px 0 #fffdf6,4px 4px 0 color-mix(in srgb,var(--bk) 22%,transparent)}
html[data-mode="dark"] .plate-wrap .plate-book{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bk) 25%,transparent),1px 1px 0 #3a342e,2px 2px 0 #1b1814,3px 3px 0 #3a342e,4px 4px 0 #1b1814}
.plate-head{display:flex;align-items:baseline;gap:8px;padding:16px 18px 6px 24px;border-bottom:1px dotted color-mix(in srgb,var(--bk) 45%,transparent)}
html body .meal-card.ml-on .plate-head .plate-title:not(#wb){margin:0!important;color:var(--ink-b);font:900 17px/1.2 Nunito,sans-serif;letter-spacing:0;text-transform:none}
.plate-head span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px;font-weight:700;opacity:.65}
.plate-head b{font:900 13px Nunito,sans-serif}
html body .meal-card.ml-on .plate-book .meal-list{flex:1;margin:0;padding:0 18px 26px 24px;border-radius:0;box-shadow:none;background:none}
html body .meal-card.ml-on .plate-book .meal-item{min-height:44px;gap:8px;padding:6px 0;border-bottom:1px dotted color-mix(in srgb,var(--bk) 35%,transparent)!important;color:var(--ink-b);align-items:center}
html body .meal-card.ml-on .plate-book .meal-item>div{min-width:0;flex:1}
html body .meal-card.ml-on .plate-book .meal-item strong{display:block;font-size:14px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body .meal-card.ml-on .plate-book .meal-item small,html body .meal-card.ml-on .plate-book .empty-meals{display:block;font-size:10.5px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-b)!important;opacity:.65}
html body .meal-card.ml-on .plate-book .empty-meals{margin:0;padding:12px 0;font-style:italic;font-size:13px;line-height:20px;white-space:normal}
html body .meal-card.ml-on .plate-book .meal-item button{color:var(--ink-b)}
html body .meal-card.ml-on .plate-book .food-art.small{width:28px;height:28px}
.plate-ribbon{position:absolute;z-index:3;top:-7px;right:30px;width:15px;height:62px;background:linear-gradient(90deg,#c93a5c,#e8587a 50%,#c93a5c);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);filter:drop-shadow(1px 2px 1px #0000004d);pointer-events:none}
.plate-corner{position:absolute;z-index:6;bottom:0;width:58px;height:58px;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.plate-corner.r{right:0}.plate-corner.l{left:0}
.plate-corner.off{display:none}
.plate-corner::after{content:"";position:absolute;bottom:0;width:28px;height:28px;pointer-events:none;opacity:.9;transition:width .2s,height .2s}
.plate-corner.r::after{right:0;border-radius:14px 0 12px 0;background:linear-gradient(315deg,var(--bk) 0 50%,color-mix(in srgb,var(--paper) 70%,#fff) 50% 100%);box-shadow:-3px -3px 6px #0000002e}
.plate-corner.l::after{left:0;border-radius:0 14px 0 12px;background:linear-gradient(45deg,var(--bk) 0 50%,color-mix(in srgb,var(--paper) 70%,#fff) 50% 100%);box-shadow:3px -3px 6px #0000002e}
.plate-corner:hover::after,.plate-corner:active::after{width:36px;height:36px}
.plate-wrap.turning .plate-corner{display:none}
.plate-turn{position:absolute;inset:0;z-index:5;border-radius:6px 12px 12px 6px;overflow:hidden;pointer-events:none}
.plate-sheet{position:absolute!important;inset:0;margin:0!important;min-height:0!important;box-shadow:none!important}
.plate-sheet .plate-corner,.plate-sheet .plate-ribbon{display:none}
.plate-fold{position:absolute;left:0;top:0;overflow:visible}
.pt-shade{fill:#000;opacity:.12}
.pt-flap{fill:color-mix(in srgb,var(--paper) 88%,#fff);stroke:#0000001a;stroke-width:1}
html body .meal-card.ml-on .plate-wrap:not(#wb){background:linear-gradient(160deg,color-mix(in srgb,var(--pc,#f5b94e) 55%,var(--bk)),color-mix(in srgb,var(--bk) 85%,#000));box-shadow:0 14px 28px color-mix(in srgb,var(--bk) 35%,transparent),inset 0 1px 0 #ffffff55,inset 0 0 0 2px color-mix(in srgb,var(--bk) 50%,transparent);border-radius:20px}
/* Apple Books look (Sophia 2026-10-23): clean, evenly rounded page corners with no folded-triangle curls; the corner only
   curls while you drag it. The grab zones stay in the same places, just invisible. */
.mb-corner::after,.plate-corner::after{display:none!important}
html body .menu-book .mb-page.is-single,html body .plate-wrap .plate-book{border-radius:3px 10px 10px 3px}
html body .menu-book .mb-page.is-left{border-radius:10px 0 0 10px}
html body .menu-book .mb-page.is-right{border-radius:0 10px 10px 0}
html body .menu-book,html body .meal-card.ml-on .plate-wrap:not(#wb){border-radius:14px}
.mb-book::before{border-radius:8px 14px 14px 8px}
.plate-turn{border-radius:3px 10px 10px 3px}
.mb-stage{border-radius:3px 10px 10px 3px}
.mb-ribbon,.plate-ribbon{display:none!important}
.fe-contains{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--pc,#f5b94e) 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pcd,#a76c1c) 20%,transparent)}
.fe-contains b{display:block;margin-bottom:6px;font:900 10px Nunito,sans-serif;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.fe-contains ul{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.fe-contains li{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:color-mix(in srgb,var(--pc,#f5b94e) 28%,#fff)}
html[data-mode="dark"] .fe-contains li{background:#ffffff14}
.fe-contains ul{display:grid;gap:6px}
.fe-contains li{display:grid;grid-template-columns:minmax(0,1fr) 28px 54px 28px;align-items:center;gap:4px;padding:4px 6px 4px 12px;border-radius:12px}
.fe-contains li span{font-size:13px;font-weight:700;min-width:0}
.fe-contains li.none span{opacity:.45;text-decoration:line-through}
.fe-contains li button{width:28px;height:28px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--pcd,#a76c1c) 22%,transparent);color:inherit;font:900 16px/1 Nunito,sans-serif}
.fe-contains li button:disabled{opacity:.3}
.fe-contains li output{text-align:center;font-size:11px;font-weight:800;opacity:.75}
.fe-contains small{display:block;margin-top:6px;font-size:10.5px;opacity:.6}
.fe-contains li{grid-template-columns:minmax(0,1fr) 28px 58px 22px 28px;gap:3px}
.fe-contains li input{width:100%;min-width:0;height:28px;padding:0 4px;border:0;border-radius:8px;text-align:center;font:800 13px Nunito,sans-serif;background:#0000001f;color:inherit;-moz-appearance:textfield}
.fe-contains li input::-webkit-inner-spin-button{display:none}
.fe-contains li em{font-style:normal;font-size:11px;font-weight:800;opacity:.65}

/* Meals, simpler (Sophia 2026-10-23): egg + ring + what's left, three slim bars, two tabs, one thing to do at a time. */
html body .ml-hero{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;gap:10px 14px;align-items:center;padding:14px}
html body .ml-hero .diner-stage{grid-row:1;grid-column:1;width:118px;height:150px}
html body .ml-hero .mini-pet-wrap{transform:scale(.52);bottom:2px}
html body .ml-hero .diner-food{width:32px;height:32px;left:calc(50% + 10px);bottom:8px}
html body .ml-hero .ml-ring{grid-row:1;grid-column:2;justify-self:center;align-self:center;width:min(124px,100%);margin-bottom:22px}
html body .ml-hero .ml-left{grid-row:1;grid-column:2;align-self:end;justify-self:center;margin:0;padding-bottom:6px;font:800 12px Nunito,sans-serif;color:var(--mu-ink);text-align:center}
html body .ml-hero .macro-blocks{grid-row:2;grid-column:1/-1;display:grid;grid-template-columns:1fr;gap:9px;padding:12px 14px;border-radius:14px;align-self:stretch}
html body .meal-card.ml-on .macro-block:not(#wb){position:static;display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:10px;height:auto;padding:0;background:none;box-shadow:none}
html body .meal-card.ml-on .macro-block small{order:0;font-size:11px;font-weight:800;color:var(--mu-ink);letter-spacing:0;text-transform:none}
html body .meal-card.ml-on .macro-block strong{order:2;font-size:12px;font-weight:900;color:var(--mu-ink);white-space:nowrap}
html body .meal-card.ml-on .macro-block strong em{font-style:normal;font-weight:700;color:var(--mu-dim)}
html body .meal-card.ml-on .macro-block .mf-groove{order:1;position:relative;width:auto;height:8px;border-radius:99px;overflow:hidden;background:var(--mu-groove);box-shadow:inset 0 1px 2px #0003}
html body .meal-card.ml-on .macro-block .mf-groove i{position:absolute;left:0;top:0;bottom:0;height:auto!important;border-radius:99px;transition:width .6s cubic-bezier(.3,.9,.4,1);background:var(--mf,#6fd49a)}
html body .meal-card.ml-on .macro-block .mf-handle,html body .meal-card.ml-on .macro-block .mf-groove::after{display:none}
.macro-block.protein{--mf:#5aa7ff}.macro-block.carbs{--mf:#ff8fc2}.macro-block.fat{--mf:#c6d84a}
.macro-block.over .mf-groove{box-shadow:0 0 0 1.5px #ffb44d}
.ml-extra{grid-column:1/-1;margin:2px 0 0;font-size:11px;font-weight:700;color:var(--mu-dim)}
/* Two tabs, no clutter. */
html body .ml-tabs{grid-template-columns:1fr 1fr}
.ml-back{display:inline-flex;align-items:center;margin:0 0 12px;padding:8px 14px;border:0;border-radius:999px;background:var(--mu-deep,#0001);color:var(--mu-ink,inherit);font:800 13px Nunito,sans-serif;cursor:pointer}
.ml-own{display:flex;align-items:center;gap:12px;width:100%;margin:16px 0 4px;padding:12px 14px;border:0;border-radius:16px;background:var(--mu-deep,#0001);box-shadow:0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);text-align:left;font:800 14px Nunito,sans-serif;cursor:pointer}
.ml-own b{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--pc,#f5b94e);color:#fff;font-size:20px}
.ml-own small{display:block;margin-top:2px;font-size:11px;font-weight:700;opacity:.65}
/* Again? */
.ml-recent{margin:2px 0 14px}
.ml-yday{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 10px;padding:11px 14px;border:0;border-radius:14px;background:var(--pc,#f5b94e);color:#fff;font:800 13px Nunito,sans-serif;text-align:left;cursor:pointer;text-shadow:0 1px 1px #0003}
.ml-yday b{font-size:18px}
.ml-recent-row{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ml-recent-row::-webkit-scrollbar{display:none}
.ml-chip{flex:none;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;align-items:center;column-gap:8px;padding:7px 12px 7px 8px;border:0;border-radius:14px;background:var(--mu-deep,#0001);box-shadow:0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);text-align:left;cursor:pointer}
.ml-chip .food-art{grid-row:1/3;width:30px;height:30px}
.ml-chip b{font:800 12.5px Nunito,sans-serif;white-space:nowrap}
.ml-chip small{font-size:10.5px;font-weight:700;opacity:.65}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:560px){html body .ml-hero .diner-stage{width:104px;height:132px}html body .ml-hero .mini-pet-wrap{transform:scale(.46)}}
html body .meal-card.ml-on .macro-block .mf-groove i::after{display:none!important}
html body .meal-card.ml-on .macro-block .mf-groove i{right:auto!important;min-width:0;box-shadow:none;background:var(--mf)!important}
html body .meal-card.ml-on .macro-block .mf-groove{background:color-mix(in srgb,var(--mu-ink) 14%,transparent);width:auto!important;height:9px!important}
html body .meal-card.ml-on .macro-block small{font-size:11px!important}
html body .meal-card.ml-on .macro-block strong{font-size:12px!important}
html body .meal-card.ml-on .macro-block:not(#wb){justify-items:stretch;place-items:center stretch;text-align:left}
html body .meal-card.ml-on .macro-block .mf-groove{justify-self:stretch;width:100%!important}
html body .meal-card.ml-on .macro-block small{justify-self:start}
html body .meal-card.ml-on .macro-block strong{justify-self:end}
.ml-panel[data-panel="custom"] .meal-more{display:grid;gap:12px;margin:0;padding:0;border:0}
html body .meal-card.ml-on .cu-card{background:var(--mu-panel,#fff8)}
html body .meal-card.ml-on .ml-back{background:var(--mu-panel,#fff8);box-shadow:0 0 0 1px var(--mu-rim,#0001)}
/* Portion and search sit together. */
.ml-tools{display:flex;align-items:center;gap:8px;margin:2px 0 12px}
html body .meal-card.ml-on .ml-tools .ml-portion{flex:none;margin:0}
.ml-find{position:relative;flex:1;min-width:0;display:flex;align-items:center}
.ml-find svg{position:absolute;left:11px;width:16px;height:16px;fill:none;stroke:var(--mu-dim,#888);stroke-width:2;stroke-linecap:round;pointer-events:none}
.ml-find input{width:100%;height:34px;padding:0 12px 0 32px;border:0;border-radius:999px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);font:700 13px 'DM Sans',sans-serif}
.ml-find input::placeholder{color:var(--mu-dim,#888)}
.ml-find input:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
html body .meal-card.ml-on .mb-find.menu-book:not(#wb){background:var(--paper);padding:10px 14px 14px;border-radius:14px;box-shadow:0 0 0 1px color-mix(in srgb,var(--bk) 25%,transparent),0 10px 22px color-mix(in srgb,var(--bk) 22%,transparent);color:var(--ink-b)}
.mb-find.menu-book::before{display:none}
.mb-find .mb-items{grid-template-columns:1fr;gap:0}
.mb-find-head{margin:2px 2px 6px;font-size:12px;font-weight:800;opacity:.7}
/* Never wider than the screen: the scrolling rows stay inside their box instead of stretching the page. */
.meal-card,.ml-panel,.ml-recent,.ml-again,.quick-head,.ml-tools{min-width:0;max-width:100%}
.ml-panel{display:block}
.ml-recent-row{max-width:100%;overscroll-behavior-x:contain}
.meal-card{overflow-x:clip}

/* Search matches the portion pill: same height, fill, rim and type. */
html body .meal-card.ml-on .ml-tools .ml-portion{height:34px;box-sizing:border-box;padding:3px;gap:2px;align-items:stretch}
html body .meal-card.ml-on .ml-tools .ml-portion button{display:grid;place-items:center;padding:0 10px;font-size:12px;font-weight:800;line-height:1}
.ml-find input{height:34px;box-sizing:border-box;border-radius:999px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);font:800 12px 'DM Sans',sans-serif;color:var(--mu-ink)}
.ml-find input::placeholder{font-weight:800;color:var(--mu-dim)}
/* Add your own: one way at a time, quiet and tidy. */
.cu-seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0 0 14px;padding:4px;border-radius:999px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
.cu-seg button{position:relative;z-index:1;padding:9px 6px;border:0;border-radius:999px;background:none;color:var(--mu-dim);font:800 13px 'DM Sans',sans-serif;cursor:pointer}
.cu-seg button[aria-selected="true"]{color:var(--mu-ink)}
.cu-seg:not(.has-ind) button[aria-selected="true"]{background:var(--mu-knob)}
.cu-seg.has-ind::before{content:"";position:absolute;top:4px;bottom:4px;left:0;width:var(--ind-w);transform:translateX(var(--ind-x));border-radius:999px;background:var(--mu-knob);box-shadow:var(--mu-knob-shadow);transition:transform .35s cubic-bezier(.3,.9,.4,1),width .35s cubic-bezier(.3,.9,.4,1)}
html body .meal-card.ml-on .cu-card{gap:12px;padding:18px 16px;border-radius:20px;box-shadow:0 0 0 1px var(--mu-rim),0 10px 24px var(--mu-drop)}
html body .meal-card.ml-on .cu-card h4{font-size:17px}
.cu-card[hidden]{display:none}
html body .meal-card.ml-on .cu-card input:not([type="checkbox"]):not([type="file"]){height:46px;box-sizing:border-box;padding:0 16px;border-radius:14px;border:0;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);font:700 15px 'DM Sans',sans-serif;color:var(--mu-ink)}
html body .meal-card.ml-on .cu-card label{font-size:11px}
/* One matte button colour, from the Pettö's colour. */
html body .meal-card.ml-on .cu-card .food-search button,html body .meal-card.ml-on .cu-card #barcode-lookup,html body .meal-card.ml-on .cu-card .meal-form button.primary{height:46px;padding:0 20px;border:0;border-radius:14px;background:var(--pcd,#a76c1c);color:#fff;font:800 14px 'DM Sans',sans-serif;box-shadow:none;text-shadow:none}
html body .meal-card.ml-on .cu-card .food-search{gap:8px}
.cu-card .scan-photo{display:grid;justify-items:center;gap:8px;padding:26px 16px;border:2px dashed color-mix(in srgb,var(--pcd,#a76c1c) 45%,transparent);border-radius:18px;background:none;color:var(--mu-ink);font:800 14px 'DM Sans',sans-serif;cursor:pointer;text-align:center}
.cu-card .scan-photo svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.cu-or{display:flex;align-items:center;gap:10px;margin:2px 0;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--mu-dim)}
.cu-or::before,.cu-or::after{content:"";flex:1;height:1px;background:var(--mu-rim)}
.cu-card .scan-row{flex-wrap:nowrap}
.ml-kind{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;border-radius:999px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
.ml-kind button{padding:9px;border:0;border-radius:999px;background:none;color:var(--mu-dim);font:800 13px 'DM Sans',sans-serif}
.ml-kind button[aria-pressed="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
html body .meal-card.ml-on .ml-tools .ml-portion button{padding:0 8px}
.ml-find input{padding:0 8px 0 30px}
.ml-find svg{left:10px}
html body .meal-card.ml-on .cu-card .ml-kind{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:4px;margin:0;border-radius:999px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
html body .meal-card.ml-on .cu-card .ml-kind button{width:auto;min-width:0;height:auto;padding:9px;border:0;border-radius:999px;background:none;color:var(--mu-dim);font:800 13px 'DM Sans',sans-serif;box-shadow:none}
html body .meal-card.ml-on .cu-card .ml-kind button[aria-pressed="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
html body .meal-card.ml-on .cu-card .ml-kind button{grid-column:auto!important}
/* Type it in: calories and size side by side, nutrients in a tidy three-across grid. */
.cu-card[data-cu="own"] .food-source{display:none}
.cu-card[data-cu="own"] .cu-row{grid-template-columns:1fr 1fr;gap:10px}
.cu-card[data-cu="own"] .cu-row:has(label[hidden]){grid-template-columns:1fr}
html body .meal-card.ml-on .cu-card[data-cu="own"] .cu-nut{background:none;box-shadow:none;border-radius:0}
html body .meal-card.ml-on .cu-card[data-cu="own"] .cu-nut>summary{display:flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);font:800 13px 'DM Sans',sans-serif;color:var(--mu-ink);list-style:none}
.cu-card[data-cu="own"] .cu-nut>summary::-webkit-details-marker{display:none}
.cu-card[data-cu="own"] .cu-nut>summary::after{content:"+";margin-left:auto;font-size:18px;font-weight:700}
.cu-card[data-cu="own"] .cu-nut[open]>summary::after{content:"−"}
.cu-card[data-cu="own"] .cu-nut .meal-nutrients{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px 0 0}
html body .meal-card.ml-on .cu-card[data-cu="own"] .cu-nut .meal-nutrients input{height:42px;padding:0 10px!important;font-size:15px!important;text-align:left;-moz-appearance:textfield}
.cu-nut .meal-nutrients input::-webkit-inner-spin-button,.cu-nut .meal-nutrients input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
html body .meal-card.ml-on .cu-card .meal-form label.drink-water{padding:12px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
.cu-card .meal-form label.drink-water input{width:20px;height:20px;accent-color:var(--pcd,#a76c1c)}
.cu-card .meal-form .cu-row label:first-child,.cu-card .meal-form .meal-nutrients label:first-child{grid-column:auto}
/* While a page turns, nothing pokes out of the book: the page underneath and the fold stay inside its rounded shape. */
html body .menu-book .mb-under{overflow:hidden;max-height:100%;bottom:0;top:0}
html body .menu-book .mb-under.is-single{border-radius:3px 10px 10px 3px}
html body .menu-book .mb-under.is-left{border-radius:10px 0 0 10px}
html body .menu-book .mb-under.is-right{border-radius:0 10px 10px 0}
.mb-peel{overflow:hidden;border-radius:3px 10px 10px 3px}
.mb-stage.spread .mb-peel{border-radius:10px}
.mb-book{overflow:visible}
.menu-book .mb-page{min-height:488px}

/* Fibre and sugar bars get their colours; the amount sits at the end of each bar. */
.macro-block.fibre{--mf:#6fd49a}.macro-block.sugar{--mf:#ffb44d}
/* Dark mode: the books are black, not tinted by your Pettö's colour. */
html[data-mode="dark"] body .meal-card.ml-on .menu-book,html[data-mode="dark"] body .meal-card.ml-on .plate-wrap{--pc:#34343a;--pcd:#0c0c0f;--bk:#0c0c0f;--paper:#1b1b1f;--ink-b:#e9e9ee}
html[data-mode="dark"] body .meal-card.ml-on .menu-book .mb-cover-title{color:#f0f0f5;text-shadow:0 2px 0 #000a}
html[data-mode="dark"] body .meal-card.ml-on .mb-front{box-shadow:inset 0 0 0 3px #ffffff2e,inset 0 0 0 7px #00000066,0 16px 30px #0006}
html[data-mode="dark"] body .meal-card.ml-on .plate-wrap:not(#wb),html[data-mode="dark"] body .meal-card.ml-on .menu-book:not(#wb){background:linear-gradient(160deg,#2a2a30,#0e0e11)}
/* Covers and close buttons */
.plate-wrap{perspective:1600px}
.plate-cover{top:10px;bottom:12px;left:22px;right:10px;width:auto;z-index:9}
.plate-wrap.closed .plate-book{visibility:hidden}
.plate-wrap:not(.closed):not(.opening) .plate-cover{display:none}
.plate-wrap.closed .plate-cover{display:block}
.plate-shut,.mb-shut{display:block;margin:10px auto 0;padding:7px 16px;border:0;border-radius:999px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);font:800 12px 'DM Sans',sans-serif;cursor:pointer}
.plate-shut[hidden]{display:none}
.mb-stage.closed .mb-shut{display:none}
.mb-foot{position:relative}
.mb-backlayer{position:absolute;inset:0;z-index:5;pointer-events:none;overflow:hidden}
.mb-backinner{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0;opacity:.2;mix-blend-mode:multiply}
.mb-backinner>*{position:absolute!important;inset:auto}
html[data-mode="dark"] .mb-backinner{mix-blend-mode:screen;opacity:.14}
.plate-turn .mb-backlayer{z-index:3}
.plate-book{min-height:300px}
html[data-mode="dark"] body .meal-card.ml-on .menu-book,html[data-mode="dark"] body .meal-card.ml-on .plate-wrap{--paper:#222226}
/* Smoother turns: the layers are promoted and the faint reverse no longer blends. */
.menu-book .mb-page,.mb-under,.mb-peel,.mb-backlayer,.plate-sheet,.plate-fold{will-change:clip-path}
.mb-backinner{mix-blend-mode:normal!important;opacity:.16}
.mb-stage.peeling .mb-page{transition:none!important}
/* A bigger notebook. */
.plate-wrap{padding:12px 12px 14px 24px}
.plate-cover{top:12px;bottom:14px;left:24px;right:12px}
.plate-wrap .plate-book{min-height:420px}
.plate-head{padding:20px 20px 10px 26px}
html body .meal-card.ml-on .plate-head .plate-title:not(#wb){font-size:20px}
.plate-head span{font-size:12px}.plate-head b{font-size:15px}
html body .meal-card.ml-on .plate-book .meal-list{padding:0 20px 36px 26px}
html body .meal-card.ml-on .plate-book .meal-item{min-height:58px;padding:9px 0;gap:12px}
html body .meal-card.ml-on .plate-book .meal-item strong{font-size:16px;line-height:20px}
html body .meal-card.ml-on .plate-book .meal-item small{font-size:12px;line-height:16px}
html body .meal-card.ml-on .plate-book .food-art.small{width:40px;height:40px}
html body .meal-card.ml-on .plate-book .empty-meals{font-size:15px;padding:18px 0}
html body .meal-card.ml-on .plate-book .meal-item strong{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
html body .meal-card.ml-on .plate-book .meal-item small{white-space:normal}
html body .meal-card.ml-on .plate-book .meal-item .meal-edit{padding:4px 9px;font-size:11px}
html body .meal-card.ml-on .plate-book .meal-item .meal-kcal{font-size:12px;white-space:nowrap}
html body .meal-card.ml-on .plate-book .meal-item>div{flex:1 1 90px}
/* Each entry: picture, name and what it was, with the calories and Edit on a line below. */
html body .meal-card.ml-on .plate-book .meal-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:2px 12px;padding:10px 0}
html body .meal-card.ml-on .plate-book .meal-item .food-art{grid-row:1/3;grid-column:1}
html body .meal-card.ml-on .plate-book .meal-item>div{grid-row:1;grid-column:2;min-width:0}
html body .meal-card.ml-on .plate-book .meal-item>button:last-child{grid-row:1;grid-column:3;align-self:start}
html body .meal-card.ml-on .plate-book .meal-item .meal-kcal,html body .meal-card.ml-on .plate-book .meal-item .meal-kcal-input{grid-row:2;grid-column:2;justify-self:start}
html body .meal-card.ml-on .plate-book .meal-item .meal-edit{grid-row:2;grid-column:3;justify-self:end}
html body .meal-card.ml-on .plate-book .meal-item strong{white-space:normal;overflow-wrap:break-word;word-break:normal}
.plate-head{flex-wrap:wrap;row-gap:2px}
.plate-head .plate-title{flex:1 1 auto}
.plate-head span{order:3;flex:1 0 100%;white-space:normal}
.ml-day{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;padding:10px 12px 10px 14px;border-radius:14px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1.5px var(--pc,#f5b94e);color:var(--mu-ink,inherit);font:700 13px 'DM Sans',sans-serif}
.ml-day[hidden]{display:none}
.ml-day button{flex:none;padding:7px 12px;border:0;border-radius:999px;background:var(--pcd,#a76c1c);color:#fff;font:800 12px 'DM Sans',sans-serif;cursor:pointer}
/* Barcode number and Look up: stacked inside the card, full width. */
html body .meal-card.ml-on .cu-card .scan-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:0;width:100%}
html body .meal-card.ml-on .cu-card .scan-row input,html body .meal-card.ml-on .cu-card .scan-row #barcode-lookup{width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:0}
html body .meal-card.ml-on .cu-card .scan-row #barcode-lookup{justify-self:stretch}

/* Maintenance calculator */
.mc{margin:12px 0;border-radius:18px;background:var(--mu-panel,#fff8);box-shadow:0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit)}
.mc>summary{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;list-style:none}
.mc>summary::-webkit-details-marker{display:none}
.mc>summary::after{content:"+";margin-left:auto;font-size:20px;font-weight:700;opacity:.6}
.mc[open]>summary::after{content:"−"}
.mc-ico{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--pc,#f5b94e);color:#fff;font-size:18px}
.mc summary b{display:block;font:900 15px Nunito,sans-serif}
.mc summary small{display:block;margin-top:2px;font-size:11.5px;font-weight:700;opacity:.65}
.mc-form{display:grid;gap:12px;padding:2px 16px 16px}
.mc-seg{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:0;padding:4px;border-radius:999px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001)}
.mc-seg button{padding:9px 6px;border:0;border-radius:999px;background:none;color:var(--mu-dim,inherit);font:800 12.5px 'DM Sans',sans-serif;cursor:pointer}
.mc-seg button[aria-pressed="true"]{background:var(--mu-knob,#fff);color:var(--mu-ink,inherit);box-shadow:var(--mu-knob-shadow,none)}
.mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mc label{display:grid;gap:5px;font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-dim,inherit)}
.mc input,.mc select{width:100%;height:44px;box-sizing:border-box;padding:0 14px;border:0;border-radius:13px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);font:700 15px 'DM Sans',sans-serif;text-transform:none;letter-spacing:0}
.mc select{padding-right:8px}
.mc-result{display:grid;gap:10px;padding-top:4px}
.mc-big{margin:0;font:900 34px Nunito,sans-serif;line-height:1}
.mc-big small{display:block;margin-top:4px;font:700 12.5px 'DM Sans',sans-serif;opacity:.7}
.mc-sub,.mc-note{margin:0;font-size:12px;line-height:1.45;opacity:.7}
.mc-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mc-pick button{display:grid;gap:2px;padding:10px 12px;border:0;border-radius:14px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);color:inherit;text-align:left;cursor:pointer}
.mc-pick button b{font:800 13px 'DM Sans',sans-serif}.mc-pick button span{font-size:12px;font-weight:700;opacity:.7}
.mc-pick button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--pcd,#a76c1c);background:color-mix(in srgb,var(--pc,#f5b94e) 22%,transparent)}
.mc-custom{display:grid;gap:5px}
.mc .primary{height:46px;border:0;border-radius:14px;background:var(--pcd,#a76c1c);color:#fff;font:800 14px 'DM Sans',sans-serif;cursor:pointer}
/* Holding or dragging a page button never selects text or shows the Copy / Look Up bubble. */
html.holding-tab,html.holding-tab *{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important}
.page-tabs,.page-tabs *{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
html,body{overflow-x:clip}
.mb-online{display:block;width:100%;margin:12px 0 0;padding:11px 14px;border:0;border-radius:14px;background:var(--bk,#a76c1c);color:#fff;font:800 13px 'DM Sans',sans-serif;cursor:pointer}

/* Workouts in the Body page's look (Sophia 2026-10-23): one dashboard surface, a screen for your Pettö at work, raised kit tiles. */
html body .kit-card.wk-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
html body .kit-card.wk-on .section-head .eyebrow{color:var(--mu-dim)!important;letter-spacing:.2em}
html body .kit-card.wk-on .section-head h2{color:var(--mu-ink)}
html body .kit-card.wk-on .shop-balance{padding:6px 12px;border-radius:999px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:800 11px 'DM Sans',sans-serif}
html body .kit-card.wk-on .shop-intro{color:var(--mu-dim)!important}
html body .kit-card.wk-on .kit-stage{gap:8px;padding:18px 14px 14px;border-radius:18px;background:var(--mu-screen);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
html body .kit-card.wk-on .kit-stage img{width:min(100%,230px);height:min(60vw,230px);filter:drop-shadow(0 6px 10px #0006)}
html body .kit-card.wk-on .kit-stage p{display:inline-flex;align-items:center;gap:7px;color:#9fe6bd;font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
html body .kit-card.wk-on .kit-stage p::before{content:"";width:7px;height:7px;border-radius:50%;background:#6fd49a;box-shadow:0 0 8px #6fd49a}
html body .kit-card.wk-on .kit-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,98px),1fr));gap:10px}
html body .kit-card.wk-on .kit-grid button{gap:6px;padding:12px 6px 10px;border:0;border-radius:16px;background:none;color:var(--mu-ink);font-size:10.5px;font-weight:800;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 22px var(--mu-drop),0 0 0 1px var(--mu-rim);transition:box-shadow .25s,transform .15s}
html body .kit-card.wk-on .kit-grid button:active{transform:scale(.97)}
html body .kit-card.wk-on .kit-grid button[aria-pressed="true"]{box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 2px var(--pc),0 0 14px color-mix(in srgb,var(--pc) 60%,transparent)}

/* Weight tracking in Body */
.bd-wt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 12px}
.bd-wt-stats>div{min-width:0;padding:10px 10px 9px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.bd-wt-stats span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.bd-wt-stats strong{display:block;margin-top:3px;font:900 18px Nunito,'DM Sans',sans-serif;color:var(--mu-ink);white-space:nowrap}
.bd-wt-stats small{display:block;margin-top:2px;font-size:9.5px;line-height:1.3;color:var(--mu-dim)}
.bd-wt-chart{display:block;width:100%;height:84px;margin:2px 0 0;padding:4px;box-sizing:border-box;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.bd-wt-range{display:flex;justify-content:space-between;margin:4px 4px 10px;font-size:10px;font-weight:800;color:var(--mu-dim)}
.bd-wt-nudge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--acc) 18%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--acc) 40%,transparent);font-size:12px;font-weight:700;color:var(--mu-ink)}
.bd-wt-nudge button,.bd-wt-form button{flex:none;height:42px;padding:0 18px;border:0;border-radius:12px;background:var(--pcd,#a76c1c);color:#fff;font:800 13px 'DM Sans',sans-serif;cursor:pointer}
.bd-wt-nudge button{height:34px;padding:0 14px}
.bd-wt-form{display:flex;align-items:flex-end;gap:10px;margin-top:10px}
.bd-wt-form label{flex:1;display:grid;gap:5px;font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-dim)}
.bd-wt-form input{width:100%;height:42px;box-sizing:border-box;padding:0 14px;border:0;border-radius:12px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);color:var(--mu-ink);font:700 15px 'DM Sans',sans-serif}
.bd-wt-how{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--mu-dim)}
/* Calculator: details already filled in */
.mc-edit{justify-self:start;padding:8px 14px;border:0;border-radius:999px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);font:800 12px 'DM Sans',sans-serif;cursor:pointer}
.mc-edit[hidden],.mc-fields[hidden]{display:none}
.mc-fields{display:grid;gap:12px}
/* Breastfeeding allowance (Sophia 2026-11-03) */
.bf-ico{background:#f4a6c4}
.bf[hidden],.bf .mc-grid[hidden],.bf .mc-result[hidden]{display:none}
.bf .bf-on{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:0;text-transform:none;color:var(--mu-ink,inherit);cursor:pointer}
.bf .bf-on input{width:22px;height:22px;margin:0;padding:0;box-shadow:none;accent-color:var(--pcd,#a76c1c)}
.bf-tips{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.bf-tips li{display:flex;gap:10px;padding:10px 12px;border-radius:14px;background:var(--mu-deep,#0001);box-shadow:inset 0 0 0 1px var(--mu-rim,#0001);font-size:12.5px;line-height:1.45}
.bf-tips li i{flex:none;font-style:normal;font-size:16px;line-height:1.2}
.bf-tips li b{display:block;margin-bottom:2px;font-weight:800}
/* The page buttons slide sideways without dragging the page or zooming it. */
.page-tabs{overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
html,body{touch-action:manipulation}
.bd-wt-steps{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);font-size:12px;line-height:1.5;color:var(--mu-ink)}
.bd-wt-steps summary{cursor:pointer;font-weight:800;list-style:none}
.bd-wt-steps summary::-webkit-details-marker{display:none}
.bd-wt-steps summary::after{content:"+";float:right;font-weight:700}
.bd-wt-steps[open] summary::after{content:"−"}
.bd-wt-steps ol{margin:8px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--mu-dim)}
.bd-wt-steps b{color:var(--mu-ink)}
.bd-wt-empty{display:grid;place-items:center;min-height:84px;margin:2px 0 10px;padding:10px 16px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);text-align:center;font-size:12px;font-weight:700;color:var(--mu-dim)}

/* Body composition, in the spirit of the scale's own app but ours: coloured readings against a typical range */
.bd-cm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bd-cm{display:grid;gap:6px;align-content:start;min-width:0;padding:12px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.bd-cm.wide{grid-column:1/-1}
.bd-cm-name{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;color:var(--mu-ink)}
.bd-cm-name i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--acc) 24%,transparent);color:var(--acc);font-style:normal;font-size:11px;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--acc) 45%,transparent)}
.bd-cm-pill{justify-self:start;padding:5px 14px;border-radius:999px;background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--c);font:900 20px Nunito,'DM Sans',sans-serif;white-space:nowrap;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 40%,transparent)}
.bd-cm .bd-range{margin:3px 0 0}
.bd-cm small{font-size:10.5px;line-height:1.35;color:var(--mu-dim)}
.bd-cm-says{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:14px;background:color-mix(in srgb,var(--pc,#f5b94e) 16%,transparent);font-size:12px;line-height:1.45;color:var(--mu-ink)}
.bd-cm-says span{flex:none;padding:2px 10px;border-radius:999px;background:var(--pc,#f5b94e);color:#fff;font-size:11px;font-weight:900}
.bd-cm-form{margin-top:12px;padding:10px 12px;border-radius:14px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim)}
.bd-cm-form summary{cursor:pointer;list-style:none;font:800 13px 'DM Sans',sans-serif;color:var(--mu-ink)}
.bd-cm-form summary::-webkit-details-marker{display:none}
.bd-cm-form summary::after{content:"+";float:right;font-weight:700}
.bd-cm-form[open] summary::after{content:"−"}
.bd-cm-form form{display:grid;gap:12px;margin-top:12px}
.bd-cm-form .mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bd-cm-form label{display:grid;gap:5px;font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-dim)}
.bd-cm-form input{width:100%;height:42px;box-sizing:border-box;padding:0 12px;border:0;border-radius:12px;background:var(--mu-panel);box-shadow:inset 0 0 0 1px var(--mu-rim);color:var(--mu-ink);font:700 15px 'DM Sans',sans-serif}
.bd-cm-form button{height:44px;border:0;border-radius:12px;background:var(--pcd,#a76c1c);color:#fff;font:800 14px 'DM Sans',sans-serif;cursor:pointer}
.bd-cm-pill{color:var(--mu-ink);background:color-mix(in srgb,var(--c) 34%,transparent)}
/* Weight and Body composition open from the signal tiles */
.bd-extra .bd-more .bd-card{padding:0;box-shadow:none;background:none}
.bd-extra .bd-more .bd-card-head{display:none}
.bd-extra.open .bd-more{gap:0}
.bd-extra strong{font-size:20px}
.bd-cm-name em{margin-left:auto;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--mu-ink) 10%,transparent);color:var(--mu-dim);font-style:normal;font-size:8.5px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.bd-cm.est .bd-cm-pill{border:1.5px dashed color-mix(in srgb,var(--c) 70%,transparent);box-shadow:none}
.bd-cm-form button.bd-cm-reset{background:var(--mu-panel);color:var(--mu-ink);box-shadow:inset 0 0 0 1px var(--mu-rim)}
/* When the scale last weighed you, when we last synced, and a Sync button */
.bd-wt-sync{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 12px;margin:0 0 12px;padding:10px 12px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.bd-wt-sync>div:not(.bd-wt-new){display:grid;gap:1px;min-width:0}
.bd-wt-sync span{font-size:9.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-dim)}
.bd-wt-sync strong{font:800 13px 'DM Sans',sans-serif;color:var(--mu-ink)}
.bd-wt-sync button{height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--pcd,#a76c1c);color:#fff;font:800 13px 'DM Sans',sans-serif;cursor:pointer}
.bd-wt-sync button:disabled{opacity:.6}
.bd-wt-new{flex:1 0 100%;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,#6fd49a 26%,transparent);box-shadow:inset 0 0 0 1.5px #6fd49a88;font-size:12px;color:var(--mu-ink)}
.bd-wt-new b{color:#2f9e63}
html[data-mode="dark"] .bd-wt-new b{color:#7ff0b0}
.bd-extra.fresh{box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 24px var(--mu-drop),0 0 0 2px #6fd49a,0 0 14px #6fd49a66}
.bd-extra.fresh .bd-state{color:var(--mu-ink);font-weight:900}
.bd-extra.fresh .bd-state::before{background:#6fd49a;box-shadow:0 0 6px #6fd49a}

/* Workouts dashboard */
.wk-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 14px;padding:10px 12px 10px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.wk-bar>div{display:grid;gap:2px;min-width:0}
.wk-bar span{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.wk-bar strong{font:800 13px 'DM Sans',sans-serif;color:var(--mu-ink)}
.wk-bar button{flex:none;height:36px;padding:0 16px;border:0;border-radius:999px;background:var(--pcd,#a76c1c);color:#fff;font:800 13px 'DM Sans',sans-serif;cursor:pointer}
.wk-bar button[hidden]{display:none}
.wk-bar button:disabled{opacity:.6}
.wk-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 16px;align-items:center;padding:16px;border-radius:18px;background:var(--mu-screen);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
.wk-ring{position:relative;width:118px;height:118px}
.wk-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.wk-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.wk-track{stroke:#ffffff1f}.wk-fill{stroke:#ff9a73;filter:drop-shadow(0 0 6px #ff9a73aa);transition:stroke-dasharray .8s cubic-bezier(.3,.9,.4,1)}
.wk-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.wk-ring strong{font:900 30px Nunito,'DM Sans',sans-serif;line-height:1;color:#fff}
.wk-ring small{font-size:10px;font-weight:800;color:#9aa1a6}
.wk-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wk-stats>div{min-width:0;padding:9px 10px;border-radius:12px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12}
.wk-stats span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9aa1a6}
.wk-stats strong{display:block;margin-top:2px;font:900 19px Nunito,'DM Sans',sans-serif;color:var(--acc);white-space:nowrap}
.wk-stats small{font-size:10px;font-weight:800;color:#9aa1a6}
.wk-week{grid-column:1/-1;display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:92px;padding-top:4px}
.wk-week>div{position:relative;display:grid;grid-template-rows:1fr auto;justify-items:center;gap:4px;height:100%;min-width:0}
.wk-week i{align-self:end;width:100%;max-width:26px;min-height:3px;border-radius:6px 6px 3px 3px;background:linear-gradient(0deg,#ff9a7355,#ff9a73);opacity:.6}
.wk-week .now i{opacity:1;box-shadow:0 0 12px #ff9a73aa}
.wk-week .future i{opacity:.2}
.wk-week small{font-size:10px;font-weight:800;color:#9aa1a6}
.wk-week .now small{color:#fff}
.wk-week b{position:absolute;top:-2px;left:0;right:0;text-align:center;font-size:9px;font-weight:800;color:#cfd6da}
.wk-cats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none;max-width:100%}
.wk-cats::-webkit-scrollbar{display:none}
.wk-cats button{flex:none;padding:8px 14px;border:0;border-radius:999px;background:none;color:var(--mu-ink);font:800 12.5px 'DM Sans',sans-serif;cursor:pointer;box-shadow:inset 0 0 0 1px var(--mu-rim)}
.wk-cats button[aria-selected="true"]{background:color-mix(in srgb,var(--c) 30%,transparent);box-shadow:inset 0 0 0 2px var(--c)}
.wk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:2px}
.wk-grid button{display:grid;justify-items:center;gap:6px;padding:12px 4px 10px;border:0;border-radius:16px;background:none;color:var(--mu-ink);font:800 11px 'DM Sans',sans-serif;cursor:pointer;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 22px var(--mu-drop),0 0 0 1px var(--mu-rim);transition:box-shadow .2s,transform .15s}
.wk-grid button:active{transform:scale(.97)}
.wk-grid button i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--c) 26%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent);font-style:normal;font-size:22px}
.wk-grid button[aria-pressed="true"]{box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 2px var(--c),0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}
.wk-start{margin-top:12px;display:grid;gap:10px;padding:14px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.wk-start[hidden]{display:none}
.wk-start-head{display:flex;align-items:center;gap:12px}
.wk-start-head i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--c) 28%,transparent);font-style:normal;font-size:22px}
.wk-start-head b{display:block;font:900 17px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.wk-start-head small{font-size:11px;font-weight:700;color:var(--mu-dim)}
.wk-start #wk-go{height:48px;border:0;border-radius:14px;background:var(--pcd,#a76c1c);color:#fff;font:800 15px 'DM Sans',sans-serif;cursor:pointer}
.wk-start #wk-go:disabled{opacity:.55;cursor:default}
.wk-start p{margin:0;font-size:12px;line-height:1.45;color:var(--mu-dim)}
.wk-recent{display:grid;gap:8px}
.wk-row{display:grid;grid-template-columns:44px minmax(0,1fr);gap:2px 12px;align-items:center;padding:11px 12px;border-radius:16px;box-shadow:inset 0 1px 0 var(--mu-edge),0 8px 18px var(--mu-drop),0 0 0 1px var(--mu-rim)}
.wk-row>i{grid-row:1/3;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--c) 26%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--c) 55%,transparent);font-style:normal;font-size:21px}
.wk-row b{font:900 14px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.wk-row small{display:block;font-size:10.5px;font-weight:700;color:var(--mu-dim)}
.wk-row>span{grid-column:2;font-size:12px;font-weight:700;color:var(--mu-ink)}
.wk-empty{padding:18px 16px;border-radius:16px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);text-align:center;color:var(--mu-ink)}
.wk-empty b{font:900 15px Nunito,'DM Sans',sans-serif}.wk-empty p{margin:6px 0 0;font-size:12px;line-height:1.45;color:var(--mu-dim)}
.wk-pet{margin-top:18px;border-radius:16px;box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 1px var(--mu-rim);padding:0 14px 14px}
.wk-pet>summary{display:grid;gap:2px;padding:14px 22px 12px 0;cursor:pointer;list-style:none;position:relative}
.wk-pet>summary::-webkit-details-marker{display:none}
.wk-pet>summary::after{content:"+";position:absolute;right:0;top:12px;font-size:20px;font-weight:700;opacity:.6}
.wk-pet[open]>summary::after{content:"−"}
.wk-pet summary span{font:900 15px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.wk-pet summary small{font-size:11px;font-weight:700;color:var(--mu-dim)}
@media(max-width:380px){.wk-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-hero{grid-template-columns:1fr}.wk-ring{justify-self:center}}

.bd-wt-saved{margin:10px 0 0;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,#6fd49a 20%,transparent);box-shadow:inset 0 0 0 1px #6fd49a66;font-size:12px;font-weight:800;color:var(--mu-ink)}

/* Live workout and workout detail: your Pettö working out, with the Watch's numbers */
.wk-live{--zone:#7fd0ff;margin:0 0 14px;padding:14px;border-radius:18px;background:var(--mu-screen);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 2px var(--zone),0 0 18px color-mix(in srgb,var(--zone) 45%,transparent)}
.wk-live[hidden]{display:none}
.wk-live-top{display:flex;align-items:center;gap:8px}
.wk-live-top b{flex:1;font:900 14px Nunito,'DM Sans',sans-serif}
.wk-live-dot.paused{animation:none;opacity:.5}
.wk-live-short{color:#ffd86f;font-weight:600}
.delete-account-dialog{text-align:left}.delete-account-dialog h2,.delete-account-dialog .eyebrow{text-align:center}.da-list{margin:6px 0 10px;padding-left:20px;line-height:1.4}.da-list li{margin:3px 0}.da-note{font-size:.9em;opacity:.8}.da-field{display:flex;flex-direction:column;gap:4px;margin-top:10px;font-weight:700}.da-field input{font:inherit;padding:10px 12px;border-radius:12px;border:1px solid currentColor;background:transparent;color:inherit}.delete-account-dialog button.danger{background:#c0392b;color:#fff}.delete-account-dialog button.danger:disabled{opacity:.45}
.wk-short-buttons{display:flex;flex-direction:column;gap:8px;margin-top:14px}.wk-short-buttons button{width:100%}
.wk-live-top button{padding:6px 14px;border:0;border-radius:999px;background:#ffffff1f;color:#fff;font:800 12px 'DM Sans',sans-serif;cursor:pointer}
.wk-live-dot{width:9px;height:9px;border-radius:50%;background:#ff5f6f;box-shadow:0 0 8px #ff5f6f;animation:wklive 1.2s ease-in-out infinite}
@keyframes wklive{50%{opacity:.35}}
.wk-live-body{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0}
.wk-pet-img{width:min(46vw,190px);height:min(46vw,190px);object-fit:contain;filter:drop-shadow(0 6px 10px #0006)}
.wk-live-time{text-align:right}
.wk-live-time small{display:block;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#9aa1a6}
.wk-live-time strong{font:900 38px Nunito,'DM Sans',sans-serif;font-variant-numeric:tabular-nums;color:#fff}
.wk-live-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wk-live-stats>div{padding:9px 10px;border-radius:12px;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff12}
.wk-live-stats span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:#9aa1a6}
.wk-live-stats strong{display:block;margin-top:2px;font:900 22px Nunito,'DM Sans',sans-serif;color:var(--acc);white-space:nowrap}
.wk-live-stats small{font-size:10px;font-weight:800;color:#9aa1a6}
.wk-live-stats em{font-style:normal;font-size:10px;font-weight:800;color:var(--acc)}
.wk-live p{margin:10px 0 0;font-size:11px;line-height:1.4;color:#9aa1a6}
.wk-row{cursor:pointer}
.wk-row.open{grid-template-columns:44px minmax(0,1fr)}
.wk-detail{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--mu-rim)}
.wk-detail .wk-pet-img{width:96px;height:96px}
.wk-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wk-detail-grid>div{padding:7px 9px;border-radius:10px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.wk-detail-grid span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mu-dim)}
.wk-detail-grid strong{font:900 14px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}

/* One container for the live workout and the week, side by side to scroll through (Sophia 2026-10-23). It keeps the dark
   screen in light mode too (she tried the Pettö's colours and changed her mind). */
.wk-deck{--k-ink:#eef3f1;--k-dim:#9aa1a6;--k-chip:#ffffff0f;--k-line:#ffffff12;margin:0 0 6px;padding:14px 0 10px;border-radius:20px;overflow:hidden;background:var(--mu-screen);color:var(--k-ink);box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
html[data-mode="dark"] .wk-deck{--k-ink:#eef3f1;--k-dim:#9aa1a6;--k-chip:#ffffff0f;--k-line:#ffffff12;background:var(--mu-screen);box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
.wk-track-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.wk-track-row::-webkit-scrollbar{display:none}
.wk-track-row>*{flex:0 0 100%;min-width:0;box-sizing:border-box;padding:0 16px;scroll-snap-align:start}
.wk-deck .wk-hero,.wk-deck .wk-live{background:none;box-shadow:none;border-radius:0;margin:0;color:inherit}
.wk-deck .wk-live[hidden]{display:none}
.wk-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}
.wk-dots[hidden]{display:none}
.wk-dots i{width:7px;height:7px;border-radius:50%;background:var(--k-ink);opacity:.25;transition:opacity .2s,transform .2s}
.wk-dots i.on{opacity:.9;transform:scale(1.2)}
.wk-deck .wk-track{stroke:var(--k-line)}
.wk-deck .wk-ring strong,.wk-deck .wk-live-time strong,.wk-deck .wk-live-top b{color:var(--k-ink)}
.wk-deck .wk-ring small,.wk-deck .wk-live-time small,.wk-deck .wk-stats span,.wk-deck .wk-stats small,.wk-deck .wk-live-stats span,.wk-deck .wk-live-stats small,.wk-deck .wk-live p,.wk-deck .wk-week small{color:var(--k-dim)}
.wk-deck .wk-stats>div,.wk-deck .wk-live-stats>div{background:var(--k-chip);box-shadow:inset 0 0 0 1px var(--k-line)}
.wk-deck .wk-week b{color:var(--k-ink);opacity:.8}.wk-deck .wk-week .now small{color:var(--k-ink)}
.wk-deck .wk-live-top button{background:var(--k-chip);color:var(--k-ink)}
.wk-deck .wk-pet-img{width:min(30vw,118px);height:min(30vw,118px)}
.wk-deck .wk-live-body{margin:2px 0}
.wk-detail .wk-pet-img{width:70px;height:70px}
/* Recent workouts: small rows, the extra numbers fold away inside */
.wk-row{padding:9px 12px;gap:0 12px}
.wk-row>span{display:flex;align-items:center;gap:8px;font-size:11.5px}
.wk-row>span u{margin-left:auto;text-decoration:none;font-size:11px;opacity:.55}
.wk-row>i{width:38px;height:38px;font-size:19px}
.wk-row{grid-template-columns:38px minmax(0,1fr)}
.wk-row.open{grid-template-columns:38px minmax(0,1fr)}
.wk-detail{margin-top:8px;padding-top:8px}
.wk-detail-grid{grid-template-columns:repeat(3,1fr);gap:5px}
.wk-detail-grid>div{padding:5px 7px}
.wk-detail-grid strong{font-size:12.5px}
.wk-detail-grid span{font-size:7.5px}

.wk-del{grid-column:1/-1;justify-self:end;margin-top:8px;padding:7px 14px;border:0;border-radius:999px;background:#ff6f6f22;color:#d4493f;box-shadow:inset 0 0 0 1px #ff6f6f66;font:800 12px 'DM Sans',sans-serif;cursor:pointer}
.wk-detail{grid-template-columns:auto minmax(0,1fr)}
.wk-note{margin:0 0 8px;padding:8px 12px;border-radius:12px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);font-size:12px;font-weight:700;color:var(--mu-ink)}
.wk-live-dot.done{background:#6fd49a;box-shadow:0 0 8px #6fd49a;animation:none}
/* No caption or Close book under the menu book (Sophia 2026-10-24); screen readers still hear the page. */
.mb-foot{display:block;height:0;margin:0!important;padding:0!important;overflow:visible}
.mb-where{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mb-shut{display:none!important}

/* Cycle tracking in the Apple Cycle Tracking style, on the dashboard surface */
html body .cycle-log.cy-on:not(#wb){background:var(--mu-panel)!important;border-color:transparent!important;box-shadow:var(--mu-lift),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
.cy-on .cycle-heading h2,.cy-on .cycle-log-heading h3{color:var(--mu-ink)}
.cy-on .eyebrow{color:var(--mu-dim);letter-spacing:.2em}
.cy-on .cycle-private{background:var(--mu-deep);color:var(--mu-dim);box-shadow:var(--mu-groove-in)}
.cy-day{margin:16px -4px 0;text-align:center}
.cy-day h3{margin:0 0 10px;font:900 19px Nunito,'DM Sans',sans-serif;color:var(--mu-ink);animation:cyfade .4s ease both}
.cy-strip-wrap{position:relative;padding-top:12px}
.cy-pointer{position:absolute;left:50%;top:0;width:0;height:0;margin-left:-6px;border:6px solid transparent;border-top-color:var(--mu-ink);opacity:.75;z-index:2}
.cy-strip{display:flex;align-items:flex-end;gap:10px;overflow-x:auto;padding:30px calc(50% - 22px) 10px;margin-top:-16px;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;touch-action:pan-x pan-y;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}
.cy-strip::-webkit-scrollbar{display:none}
.cy-pill{--s:0;flex:none;position:relative;display:grid;grid-template-rows:auto 1fr;justify-items:center;width:44px;height:78px;padding:7px 0 10px;border:0;border-radius:999px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-dim);scroll-snap-align:center;cursor:pointer;
  transform:scale(calc(1 + .22 * var(--s)),calc(1 + .3 * var(--s)));transform-origin:50% 100%;transition:background .25s,box-shadow .25s;-webkit-tap-highlight-color:transparent}
.cy-pill small{font-size:10px;font-weight:800;opacity:.8}
.cy-pill i{align-self:center;font:900 15px Nunito,'DM Sans',sans-serif;font-style:normal;color:var(--mu-ink)}
.cy-pill u{position:absolute;bottom:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#b99cff}
.cy-pill.period{background:#ff6b6b;box-shadow:0 4px 14px #ff6b6b55}.cy-pill.period i,.cy-pill.period small{color:#fff}
.cy-pill.predicted{background:repeating-linear-gradient(135deg,#ff6b6b66 0 4px,#ff6b6b2a 4px 8px);box-shadow:inset 0 0 0 1.5px #ff6b6b88}
.cy-pill.fertile:not(.period){background:linear-gradient(180deg,#7fd0ff40,#7fd0ff18);box-shadow:inset 0 0 0 1.5px #7fd0ff88}
.cy-pill.ovulation{background:linear-gradient(180deg,#7fd0ff99,#7fd0ff44)}
.cy-pill.today small{color:var(--mu-ink);font-weight:900}
.cy-pill.today::before{content:"";position:absolute;inset:2px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--mu-ink);opacity:.55;pointer-events:none}
.cy-pill.picked{box-shadow:0 8px 18px var(--mu-drop),inset 0 0 0 2px var(--mu-ink)}
.cy-pill.period.picked{box-shadow:0 8px 20px #ff6b6b88,inset 0 0 0 2px #fff}
.cy-status{margin:6px 0 0;font:900 11px 'DM Sans',sans-serif;letter-spacing:.16em;color:var(--mu-dim);animation:cyfade .3s ease both}
.cy-status[data-tone="period"],.cy-status[data-tone="predicted"]{color:#ff6b6b}.cy-status[data-tone="fertile"]{color:#5fb8ec}.cy-status[data-tone="late"]{color:#ffb44d}
@keyframes cyfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.cy-phase,.cy-card{margin:16px 0;padding:14px 16px;border-radius:18px;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 24px var(--mu-drop),0 0 0 1px var(--mu-rim);animation:cyfade .45s ease both}
.cy-phase-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cy-phase-head span{font:900 16px Nunito,'DM Sans',sans-serif;color:var(--c)}
.cy-phase-head b{font-size:12px;font-weight:800;color:var(--mu-dim)}
.cy-phase-bar{position:relative;display:flex;gap:3px;height:10px;margin:12px 0 4px}
.cy-phase-bar i{border-radius:6px;background:color-mix(in srgb,var(--c) 30%,transparent);transition:background .3s}
.cy-phase-bar i.on{background:var(--c);box-shadow:0 0 10px color-mix(in srgb,var(--c) 70%,transparent)}
.cy-phase-bar em{position:absolute;top:-4px;width:6px;height:18px;margin-left:-3px;border-radius:3px;background:var(--mu-ink);transition:left .6s cubic-bezier(.3,.9,.4,1)}
.cy-phase dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:12px 0 0}
.cy-phase dt{font-size:9px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--mu-dim);padding-top:2px}
.cy-phase dd{margin:0;font-size:12.5px;line-height:1.45;color:var(--mu-ink)}
.cy-note{margin:10px 0 0;font-size:11px;line-height:1.45;color:var(--mu-dim)}
.cy-empty b{font:900 15px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.cy-empty p{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--mu-dim)}
.cy-h{margin:22px 2px 0;font:900 17px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.cy-card{margin-top:10px}
.cy-pred b{font-size:11px;font-weight:900;letter-spacing:.06em;color:#9a8cff}
.cy-pred p{margin:6px 0 12px;font:800 15px/1.35 'DM Sans',sans-serif;color:var(--mu-ink)}
.cy-cal-head,.cy-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;text-align:center}
.cy-cal-head{padding:8px 0;border-bottom:1px solid var(--mu-rim);font-size:10.5px;font-weight:800;color:var(--mu-dim)}
.cy-cal{margin-top:10px}
.cy-cal-day{display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font:800 13px 'DM Sans',sans-serif;color:var(--mu-ink);animation:cypop .4s ease both;animation-delay:calc(var(--i) * 12ms)}
@keyframes cypop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.cy-cal-day.period{background:#ff6b6b;color:#fff}
.cy-cal-day.predicted{background:repeating-linear-gradient(135deg,#ff6b6b77 0 3px,#ff6b6b33 3px 6px);box-shadow:inset 0 0 0 1px #ff6b6b66}
.cy-cal-day.fertile:not(.period):not(.predicted){box-shadow:inset 0 0 0 1.5px #7fd0ffaa;background:#7fd0ff22}
.cy-cal-day.today{background:var(--mu-ink);color:var(--mu-panel,#fff);box-shadow:none}
.cy-key{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:10.5px;font-weight:700;color:var(--mu-dim)}
.cy-key li::before{content:"";display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:#ff6b6b}
.cy-key .predicted::before{background:repeating-linear-gradient(135deg,#ff6b6bcc 0 2px,#ff6b6b44 2px 4px)}
.cy-key .fertile::before{background:#7fd0ff}
.cy-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.cy-stats>div{padding:9px 10px;border-radius:12px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.cy-stats span{display:block;font-size:8.5px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--mu-dim)}
.cy-stats strong{display:block;margin-top:3px;font:900 17px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}.cy-stats small{font-size:10px;font-weight:700;color:var(--mu-dim)}
.cy-cycle{padding:12px 0;border-top:1px solid var(--mu-rim)}
.cy-cycle:first-of-type{border-top:0;padding-top:0}
.cy-cycle b{font:800 14px 'DM Sans',sans-serif;color:var(--mu-ink)}.cy-cycle small{display:block;margin-top:2px;font-size:11px;font-weight:700;color:var(--mu-dim)}
.cy-caps{display:flex;gap:2px;margin-top:9px;overflow:hidden;border-radius:10px}
.cy-caps i{flex:1 1 0;min-width:0;height:26px;border-radius:7px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);transform-origin:50% 100%;animation:cygrow .5s ease both;animation-delay:calc(var(--i) * 14ms)}
.cy-caps i.p{background:#ff6b6b;box-shadow:none}
@keyframes cygrow{from{opacity:0;transform:scaleY(.2)}to{opacity:1;transform:none}}
.cy-flag{margin:10px 0 0;padding:9px 12px;border-radius:12px;background:#ffb44d22;box-shadow:inset 0 0 0 1px #ffb44d66;font-size:12px;line-height:1.45;color:var(--mu-ink)}
.cy-learn{display:grid;gap:8px;margin:10px 0 4px}
.cy-learn details{padding:12px 14px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.cy-learn summary{cursor:pointer;font:800 13.5px 'DM Sans',sans-serif;color:var(--mu-ink);list-style:none}
.cy-learn summary::-webkit-details-marker{display:none}
.cy-learn summary::after{content:"+";float:right;font-weight:700;opacity:.6}.cy-learn details[open] summary::after{content:"−"}
.cy-learn p{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--mu-dim)}
.cy-future .cycle-option{opacity:.45;pointer-events:none}
.cy-on .cycle-option{border-radius:16px;box-shadow:inset 0 1px 0 var(--mu-edge),0 0 0 1px var(--mu-rim)}
@media(prefers-reduced-motion:reduce){.cy-day h3,.cy-status,.cy-phase,.cy-card,.cy-cal-day,.cy-caps i{animation:none}.cy-pill{transition:none}}

/* The same look as Body and Meals: a screen on top, small caps section titles, raised plates, matching fields and buttons */
.cy-console{display:flex;align-items:center;gap:16px;margin:14px 0 4px;padding:14px 16px;border-radius:18px;background:var(--mu-screen);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040,0 1px 0 var(--mu-edge)}
.cy-ring{--c:#ff6b6b;position:relative;flex:none;width:84px;height:84px}
.cy-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.cy-ring circle{fill:none;stroke-width:11;stroke-linecap:round}
.cy-ring .t{stroke:#ffffff1f}.cy-ring .f{stroke:var(--c);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--c) 70%,transparent));transition:stroke-dasharray .8s cubic-bezier(.3,.9,.4,1)}
.cy-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.cy-ring strong{font:900 26px Nunito,'DM Sans',sans-serif;color:#fff}.cy-ring small{font-size:9px;font-weight:800;color:#9aa1a6}
.cy-console-text{display:grid;gap:4px;min-width:0}
.cy-console-text b{font:900 16px Nunito,'DM Sans',sans-serif;color:#fff}.cy-console-text small{font-size:11.5px;color:#9aa1a6;line-height:1.4}
.cy-leds{display:flex;gap:6px;margin-top:4px}.cy-leds i{width:22px;height:5px;border-radius:3px;background:#ffffff1f}
.cy-leds i.on{background:var(--c);box-shadow:0 0 8px var(--c)}
.cy-h,.cy-on .cycle-log-heading h3{margin:20px 2px 10px;font-size:9.5px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--mu-dim);font-family:'DM Sans',sans-serif}
.cy-on .cycle-log-heading{margin-top:18px}
.cy-on .cycle-log-heading span{font-size:11px;color:var(--mu-dim)}
.cy-on .cycle-group-label{margin:12px 2px 6px;font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
html body .cy-on .cycle-option,html body .cy-on .cycle-option.other-option,html body .cy-on .cycle-option.factor-option{background:none!important;border:0;border-radius:16px;padding:0;margin:0 0 10px;box-shadow:inset 0 1px 0 var(--mu-edge),0 10px 22px var(--mu-drop),0 0 0 1px var(--mu-rim)!important;color:var(--mu-ink)}
.cy-on .cycle-option summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;list-style:none;cursor:pointer;color:var(--mu-ink);font:800 14px 'DM Sans',sans-serif}
.cy-on .cycle-option summary::-webkit-details-marker{display:none}
.cy-on .cycle-option summary small{display:block;margin-top:2px;font-size:11px;font-weight:700;color:var(--mu-dim)}
.cy-on .cycle-option summary b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font-size:16px;transition:transform .25s}
.cy-on .cycle-option[open] summary b{transform:rotate(45deg)}
.cy-on .cycle-option form{display:grid;gap:12px;padding:2px 16px 16px;animation:cyfade .3s ease both}
.cy-on .cycle-option label{display:grid;gap:5px;font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.cy-on .cycle-option input,.cy-on .cycle-option select{width:100%;height:44px;box-sizing:border-box;padding:0 14px;border:0;border-radius:13px;background:var(--mu-deep);box-shadow:inset 0 0 0 1px var(--mu-rim);color:var(--mu-ink);font:700 15px 'DM Sans',sans-serif;text-transform:none;letter-spacing:0}
.cy-on .cycle-option button[type="submit"]{height:46px;border:0;border-radius:14px;background:var(--pcd,#a76c1c);color:#fff;font:800 14px 'DM Sans',sans-serif;cursor:pointer}
.cy-on .cycle-option .field-hint,.cy-on .cycle-option p{margin:0;font-size:11px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--mu-dim)}
.cy-on .wellness-list .log-row,.cy-on #cycle-list>*{border-radius:14px}

.cy-late{margin:10px 0;padding:14px 16px;border-radius:18px;background:rgba(255,180,77,.14);display:grid;gap:8px}
.cy-late b{font:800 15px 'DM Sans',sans-serif;color:var(--mu-ink,inherit)}.cy-late p{margin:0;font-size:13px;line-height:1.5;color:var(--mu-dim)}
.cy-late div{display:flex;gap:8px;flex-wrap:wrap}.cy-late button{border-radius:999px;padding:9px 14px;font:700 13px 'DM Sans',sans-serif;border:0;background:#ffb44d;color:#2a1c05;cursor:pointer}
.cy-late button.ghost{background:transparent;border:1px solid var(--mu-line,rgba(255,255,255,.25));color:inherit}
.cy-late ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:13px;line-height:1.45;color:var(--mu-dim)}
.ml-ask{margin:2px 0 14px;padding:14px;border-radius:16px;background:var(--pc,#f5b94e);color:#fff;display:grid;gap:8px;text-shadow:0 1px 1px #0003}
.ml-ask b{font:900 15px Nunito,sans-serif}.ml-ask p{margin:0;font:700 13px/1.4 Nunito,sans-serif}
.ml-ask-chips{display:flex;gap:8px;flex-wrap:wrap}.ml-ask .ml-chip{text-shadow:none;background:#fff;color:#2b2233;box-shadow:none;grid-template-columns:auto;grid-template-rows:auto auto}
.ml-ask-row{display:flex;gap:8px;flex-wrap:wrap}.ml-ask-row button{border:0;border-radius:999px;padding:9px 14px;font:800 13px Nunito,sans-serif;background:#ffffff40;color:#fff;cursor:pointer}
.ml-ask-row button:first-child{background:#fff;color:#2b2233;text-shadow:none}
.cu-amount{display:grid;gap:6px}.cu-amount>span{font:700 12px/1.4 Nunito,sans-serif;color:var(--mu-dim,inherit)}
.cu-amount-chips{display:flex;gap:6px;flex-wrap:wrap}.cu-amount-chips button{border:0;border-radius:999px;padding:8px 13px;font:800 13px Nunito,sans-serif;background:var(--mu-deep,#0001);box-shadow:0 0 0 1px var(--mu-rim,#0001);color:var(--mu-ink,inherit);cursor:pointer}
.cu-amount-chips button[aria-pressed="true"]{background:var(--pc,#f5b94e);color:#fff;box-shadow:none;text-shadow:0 1px 1px #0003}
.cu-amount-n{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:700 12px Nunito,sans-serif}.cu-amount-n input{width:84px}.cu-amount-n small{opacity:.7}
.scan-live{display:block;width:100%;margin:0 0 10px;padding:13px 14px;border:0;border-radius:14px;background:var(--pc,#f5b94e);color:#fff;font:800 14px Nunito,sans-serif;text-shadow:0 1px 1px #0003;cursor:pointer}
/* Pulling past the top or bottom of a page stretches in the page's own colours, never black (Sophia 2026-10-25).
   The bottom stretch takes the body's background-color; the iPhone app fills the stretch above with the page's own top colour. */
html[data-petto="aurora"]:not([data-mode="dark"]) body{background-color:color-mix(in srgb,#a26acc 18%,#fffdfa)!important}
html[data-petto="wisp"]:not([data-mode="dark"]) body{background-color:color-mix(in srgb,#d0a5d8 20%,#fffdfa)!important}
/* Your daily Pettö (Sophia 2026-10-25): time-of-day greeting with a pixel sky, an LED sign, and streak, calories-left and energy tiles. */
.welcome.daily{display:block!important}
.daily-head{min-width:0}
.tod-icon{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.12em;margin-left:.1em;animation:tod-bob 2.4s steps(2) infinite}
.tod-icon svg{width:100%;height:100%;display:block;overflow:visible}
@keyframes tod-bob{50%{transform:translateY(-2px)}}
.tod-icon .pY{fill:#ffe08a}.tod-icon .pO{fill:#ffb547}.tod-icon .pW{fill:#fff6d6}.tod-icon .pB{fill:#ff9db0}
.tod-icon .pR{fill:#ff7a59}.tod-icon .pS{fill:#c8b6ff}.tod-icon .pM{fill:#ff8fb8}
.daily[data-tod="night"] .tod-icon .pM{fill:#fff1b8}
.daily[data-tod="night"] .tod-icon .pS,.daily[data-tod="evening"] .tod-icon .pS{animation:px-twinkle 1.6s steps(2) infinite}
@keyframes px-twinkle{50%{opacity:.25}}
/* The LED sign: a dark panel with a dot-matrix canvas, the same in day and night mode, like a real sign. */
.led-sign{position:relative;display:block;width:100%;height:76px;padding:9px 14px;border:1px solid #ffffff14;border-radius:22px;background:radial-gradient(120% 140% at 50% 0,#1b1a20,#0b0b0e 70%);box-shadow:inset 0 0 0 4px #00000059,inset 0 2px 14px #000c,0 8px 22px #00000026;overflow:hidden;color:#ffbf47;-webkit-tap-highlight-color:transparent}
.led-sign:before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#ffffff0d,transparent 38%);pointer-events:none}
.led-sign:after{content:'';position:absolute;right:13px;top:9px;width:4px;height:4px;border-radius:50%;background:#ff5d6c;box-shadow:0 0 6px #ff5d6c;animation:px-twinkle 1.2s steps(2) infinite}
.led-sign:active{transform:scale(.985)}
.led-sign canvas{display:block;width:100%;height:100%}
.led-fallback{position:absolute;inset:0;display:grid;place-items:center;padding:0 22px;font:700 13px/1.2 ui-monospace,Menlo,monospace;letter-spacing:2px;text-transform:uppercase;color:#ffbf47;text-shadow:0 0 6px #ffbf4799;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.led-sign.live .led-fallback{display:none}
.led-sign:not(.live) canvas{visibility:hidden}
/* Today's numbers under the mood box in your Pettö's card, in the same sunken style (Sophia 2026-10-25). */
.pd-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.pd-stat{position:relative;display:grid;align-content:start;justify-items:start;gap:6px;min-width:0;padding:12px 14px;border:0;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);text-align:left;text-decoration:none;font:inherit;transition:transform .15s}
.pd-stat:active{transform:scale(.97)}
.pd-stat.kcal-tile{grid-column:1/-1}
.pd-stat-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:99px;background:var(--mu-panel);color:var(--mu-ink);font-size:10px;font-weight:900;box-shadow:0 1px 0 var(--mu-edge) inset,0 0 0 1px var(--mu-rim)}
.pd-stat-pill .px-icon{width:12px;height:12px}
.pd-stat strong{font:900 22px/1 Nunito,sans-serif;letter-spacing:-.6px;color:var(--mu-ink);white-space:nowrap}
.pd-stat strong em{font:800 11px 'DM Sans',sans-serif;letter-spacing:0;font-style:normal;color:var(--mu-dim)}
.pd-stat small{font-size:11px;line-height:1.35;color:var(--mu-dim)}
.pd-stat .dt-more{color:var(--mu-ink);opacity:.85}
.px-icon{display:inline-block;width:16px;height:16px;flex:none}
.px-icon svg{width:100%;height:100%;display:block}
.px-icon .pO{fill:#ff8a3d}.px-icon .pY{fill:#ffd35c}.px-icon .pW{fill:#fff3c4}
.flame{transform-origin:50% 100%;animation:px-flicker .5s steps(2) infinite}
@keyframes px-flicker{50%{transform:scale(1.08,.94)}}
.streak-tile.none .flame{filter:grayscale(1);opacity:.45;animation:none}
.streak-tile.risk .flame{animation-duration:.9s;opacity:.8}

/* Calories left: twenty pixel cells. Cream is resting energy, orange is what today's active energy added, dim is eaten. */
.px-bar{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;width:100%;height:12px}
.px-bar i{background:#fff1d6;box-shadow:inset 0 -2px #0000001f;animation:px-in .3s steps(3) backwards;animation-delay:calc(var(--i) * 25ms)}
.px-bar i.active{background:#ff9a4d;box-shadow:inset 0 -2px #0000002b,0 0 6px #ff9a4d80}
.px-bar i.eaten{background:#ffffff17;box-shadow:none}
.kcal-tile.over .px-bar i{background:#ff7b9c66}
.kcal-tile.over .px-bar i:last-child{background:#ff7b9c;animation:px-twinkle 1s steps(2) infinite}
.kcal-tile.over strong{color:#ff9db0}
@keyframes px-in{from{opacity:0;transform:scaleY(.2)}}
.kcal-sum{font-variant-numeric:tabular-nums}
.kcal-tile.none strong{color:var(--mu-dim)}
.px-hearts{display:flex;gap:3px;margin:3px 0 1px}
.px-heart{display:block;width:21px;height:19px;animation:px-in .35s steps(3) backwards;animation-delay:calc(var(--i) * 70ms)}
.px-heart svg{width:100%;height:100%;display:block}
.px-heart .pO{fill:#ffffff38}.px-heart .pF,.px-heart .pS{fill:#ffffff0d}
.px-heart.full .pO{fill:#d94c6e}.px-heart.full .pF{fill:#ff7b9c}.px-heart.full .pS{fill:#ffe0e8}
.px-heart.full{animation:px-in .35s steps(3) backwards,px-beat 1.6s steps(2) infinite;animation-delay:calc(var(--i) * 70ms),calc(var(--i) * 120ms)}
@keyframes px-beat{0%,60%{transform:none}70%{transform:scale(1.14)}}
.hearts-tile:hover .px-heart.full,.hearts-tile:active .px-heart.full{animation:px-hop .4s steps(2) both;animation-delay:calc(var(--i) * 60ms)}
@keyframes px-hop{50%{transform:translateY(-5px)}}
.px-icon.spark .pY{fill:#ff9db0}.px-icon.spark .pW{fill:#fff}
.px-icon.bolt .pY{fill:#ffb547}
/* Day mode: light tiles like the page's other cards; the sign stays a dark LED panel. */
html:not([data-mode="dark"]) .px-bar i{background:#fff;box-shadow:inset 0 -2px #0000001a,0 0 0 1px #0000000d}
html:not([data-mode="dark"]) .px-bar i.active{background:#ff9a4d;box-shadow:inset 0 -2px #00000026}
html:not([data-mode="dark"]) .px-bar i.eaten{background:#0000001a;box-shadow:none}
html:not([data-mode="dark"]) .px-heart:not(.full) .pO{fill:#0000002b}
html:not([data-mode="dark"]) .px-heart:not(.full) :is(.pF,.pS){fill:#00000008}

@media(max-width:760px){.led-sign{height:68px}}
@media(prefers-reduced-motion:reduce){.tod-icon,.flame,.px-heart,.px-heart.full,.px-bar i,.led-sign:after{animation:none!important}}
/* Streaks swipe sideways when there's more than one (Sophia 2026-10-25), with pixel dots for each. */
.streak-tile{cursor:pointer}
.streak-track{display:flex;width:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.streak-track::-webkit-scrollbar{display:none}
.streak-slide{flex:0 0 100%;display:grid;gap:6px;scroll-snap-align:start;min-width:0}
.streak-slide.risk small{color:#ff7b9c;font-weight:700}
html:not([data-mode="dark"]) .streak-slide.risk small{color:#d94c6e}
.streak-head{display:flex;align-items:center;gap:8px;max-width:100%}
.streak-track{touch-action:pan-x pan-y}
.streak-dots{display:flex;gap:4px}
.streak-dots:empty{display:none}
.streak-dots i{width:5px;height:5px;background:var(--mu-dim,#8a8a8a);opacity:.4;transition:opacity .2s,background .2s}
.streak-dots i.on{opacity:1;background:#ff8a3d}
/* XP: total and what's left under the growth bar, a "+XP" toast that drops into the bar, sparks and a glow as it fills. */
.xp-sub{display:flex;justify-content:space-between;gap:10px;margin-top:7px;font-size:10px;font-weight:800;color:var(--mu-dim,#8a8a8a);font-variant-numeric:tabular-nums}
.xp-sub span:first-child{color:var(--pd-egg,#f5b94e)}
#xp-bar{position:relative;overflow:visible}
#xp-fill.xp-filling{transition:none!important}
#xp-bar.xp-glow #xp-fill{animation:xp-glow 1s ease-out}
@keyframes xp-glow{30%{filter:brightness(1.5) saturate(1.3);box-shadow:0 0 18px var(--pd-egg,#f5b94e),0 0 4px #fff}}
#xp-bar.xp-level{animation:xp-level .6s steps(4)}
@keyframes xp-level{50%{transform:scaleY(1.8);filter:brightness(1.8)}}
.xp-spark{position:absolute;top:50%;width:4px;height:4px;margin:-2px;background:#fff6c8;box-shadow:0 0 6px var(--pd-egg,#f5b94e);pointer-events:none;animation:xp-spark .8s steps(6) forwards}
.xp-spark:nth-child(odd){background:var(--pd-egg,#f5b94e)}
@keyframes xp-spark{to{transform:translate(var(--dx),var(--dy));opacity:0}}
.xp-toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:300;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:10px;padding:10px 18px 10px 12px;border:1px solid #ffffff1f;border-radius:20px;background:radial-gradient(120% 140% at 50% 0,#22212a,#0b0b0e 75%);box-shadow:0 12px 30px #0007,inset 0 0 0 3px #00000059;color:#ffbf47;transform:translate(-50%,0);touch-action:none;cursor:pointer;font:inherit}
.xp-toast-star{grid-row:1/4;width:26px;height:26px;animation:px-twinkle .8s steps(2) infinite}
.xp-toast-star svg{width:100%;height:100%;display:block}.xp-toast-star .pY{fill:#ffbf47}.xp-toast-star .pW{fill:#fff6c8}
.xp-toast b{font:900 18px/1 Nunito,sans-serif;letter-spacing:.5px;text-shadow:0 0 10px #ffbf4799}
.xp-toast small{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a958c}
@media(prefers-reduced-motion:reduce){#xp-bar.xp-glow #xp-fill,#xp-bar.xp-level,.xp-spark{animation:none!important}}
/* end of your daily Pettö */
/* XP beside your account button (Sophia, 2026-10-25): your level and a little bar of XP into it, tucked behind the avatar. */
.topbar .me-cluster{order:6;display:flex;align-items:center;flex:none}
.me-cluster .avatar{position:relative;z-index:1}
.xp-chip{display:flex;align-items:center;gap:6px;height:30px;margin:0 -16px 0 0;padding:0 22px 0 11px;border:1px solid var(--line);border-radius:99px;background:#fff;color:inherit;font:inherit;cursor:pointer}
.xp-chip b{font:900 11px/1 Nunito,sans-serif;letter-spacing:.3px;color:var(--petto-deep,#b8863e);white-space:nowrap}
.xp-chip-bar{position:relative;width:46px;height:7px;border-radius:99px;background:#00000014;overflow:hidden}
.xp-chip:active{transform:scale(.95)}
html:not([data-mode="dark"]):not([data-theme]) .xp-chip{background:#e8e8ed;border-color:transparent;color:#1d1d1f}
html[data-mode="dark"] .xp-chip{background:#090a0d;border-color:#ffffff14;color:#f5f2ea}
html[data-mode="dark"] .xp-chip b{color:var(--petto,#f5b94e)}
html[data-mode="dark"] .xp-chip-bar{background:#ffffff1c}
@media(max-width:430px){.xp-chip{padding:0 20px 0 9px;gap:5px}}

/* A bigger account button in the header, zoomed in a little on your face so it's clear. */
.topbar .me-cluster .avatar{width:50px;height:50px;flex:none}
.topbar .me-cluster .avatar canvas{width:60px;height:72px;transform:translateY(13px)}
.topbar .me-cluster .avatar img{width:100%;height:100%;object-fit:cover}
.me-cluster .xp-chip{margin-right:-18px}
@media(max-width:430px){.topbar .me-cluster .avatar{width:46px;height:46px}.topbar .me-cluster .avatar canvas{width:56px;height:67px;transform:translateY(12px)}}

/* Growing up in the small bar by your picture, styled like the growth bar on Home: the mood box's sunken container, a
   grooved track with a glowing fill and knob, and a star for each of three forms. */
.topbar{--mu-deep:color-mix(in srgb,var(--petto,#f5b94e) 30%,#ebe8e2);--mu-groove:color-mix(in srgb,var(--petto,#f5b94e) 45%,#cfcac2);--mu-groove-in:inset 0 1px 3px #0000002b,inset 0 -1px 0 #fff;--mu-knob:color-mix(in srgb,var(--petto,#f5b94e) 16%,#fff);--mu-ink:color-mix(in srgb,var(--petto-deep,#a76c1c) 60%,#1f1d22)}
html[data-mode="dark"] .topbar{--mu-deep:#141517;--mu-groove:#0c0d0e;--mu-groove-in:inset 0 2px 4px #000000b0,inset 0 -1px 0 #ffffff10;--mu-knob:#3c4044;--mu-ink:#eceeef}
html .me-cluster .xp-chip{height:36px;gap:9px;padding:0 26px 0 12px;border:0;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink)}
html .me-cluster .xp-chip b{color:var(--mu-ink)}
.gb-row{position:relative;display:block;width:78px;height:18px}
.gb-track{position:absolute;left:7px;right:7px;top:50%;height:7px;margin-top:-3.5px;border-radius:8px;background:var(--mu-groove);box-shadow:var(--mu-groove-in)}
.gb-fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--petto,#f5b94e) 60%,#fff),var(--petto,#f5b94e));box-shadow:0 0 8px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent);transition:width .6s cubic-bezier(.2,.9,.3,1)}
.gb-fill::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--mu-knob);box-shadow:0 1px 3px #00000055,0 0 0 1.5px color-mix(in srgb,var(--petto,#f5b94e) 70%,transparent)}
.gb-star{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px}
.gb-star:nth-of-type(2){left:7px}.gb-star:nth-of-type(3){left:50%}.gb-star:nth-of-type(4){left:calc(100% - 7px)}
.gb-star svg{display:block;width:100%;height:100%;image-rendering:pixelated}
.gb-star .pY{fill:color-mix(in srgb,var(--mu-ink) 28%,transparent)}.gb-star .pW{fill:color-mix(in srgb,var(--mu-ink) 18%,transparent)}
.gb-star.reached .pY{fill:#ffbf47}.gb-star.reached .pW{fill:#fff6c8}
.gb-star.reached svg{filter:drop-shadow(0 0 3px #ffbf47aa)}
.gb-star.target .pY{fill:var(--petto,#f5b94e)}.gb-star.target .pW{fill:#fff}
.gb-star.target{animation:gb-twinkle 1.6s steps(2) infinite}
@keyframes gb-twinkle{50%{transform:scale(1.25);filter:drop-shadow(0 0 4px var(--petto,#f5b94e))}}
@media(max-width:430px){.gb-row{width:62px}html .me-cluster .xp-chip{position:relative;gap:6px;padding-left:9px}
  /* On a phone the level hangs under the bar as a little tag, so the bar fits beside the day/night switch. */
  html .me-cluster .xp-chip b{position:absolute;left:6px;bottom:-9px;z-index:1;padding:2px 5px;border-radius:99px;background:var(--petto,#f5b94e);color:#2a2530;font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.gb-star.target{animation:none}}

/* Your profile phone (Sophia, 2026-10-25): a real-feeling iPhone. A titanium frame with its side buttons, a black
   bezel, the screen with a status bar and island, glass glare on top. It pops up out of your account button; swipe it
   down (or flick the bar at the bottom up) and it slides away. */
.profile-dialog:not(.phone) :is(.phone-wall,.phone-side,.phone-status,.phone-nav,.phone-home,.phone-home-bar,.phone-glare,.phone-settings){display:none!important}
.profile-dialog:not(.phone) .phone-screen{display:contents}
html .profile-dialog.phone{--ph-bg:#f4f2ee;--ph-ink:#1d1d1f;--ph-dim:#6e6e73;--bez:11px;position:fixed;width:min(384px,calc(100vw - 30px));max-width:none;height:min(812px,calc(100dvh - 24px));max-height:none;margin:auto;padding:0;border:0;border-radius:58px;overflow:visible;background:#050506!important;color:var(--ph-ink);box-shadow:0 0 0 1.5px #2a2b2f,0 0 0 3.5px #a9abb2,0 0 0 5px #6d6f76,0 0 0 6px #2c2d31,0 40px 90px #000b,0 10px 30px #0006!important;transform:translate(var(--dx,0px),var(--drag,0px)) rotate(var(--rot,0deg));transform-origin:50% 80%;transition:transform .45s cubic-bezier(.2,1.3,.4,1)}
.profile-dialog.phone.phone-flying{transition:transform .38s cubic-bezier(.4,0,.9,.5),opacity .38s;opacity:.4}
.profile-dialog.phone.phone-flying::backdrop{animation:phone-dim .38s ease reverse both}
html[data-mode="dark"] .profile-dialog.phone{--ph-bg:#111114;--ph-ink:#f5f2ea;--ph-dim:#98979e}
.profile-dialog.phone.dragging{transition:none}
.profile-dialog.phone[open]{animation:phone-pop .62s cubic-bezier(.2,1.25,.35,1) backwards;transform-origin:88% 0}
.profile-dialog.phone.phone-leaving{animation:phone-away .36s cubic-bezier(.55,0,.8,.4) forwards}
.profile-dialog.phone::backdrop{background:#0b0b0e8c;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:phone-dim .4s ease both}
.profile-dialog.phone.phone-leaving::backdrop{animation:phone-dim .36s ease reverse both}
@keyframes phone-pop{0%{opacity:0;transform:translate(38%,-46%) scale(.12) rotate(14deg)}55%{opacity:1}100%{opacity:1;transform:none}}
@keyframes phone-away{from{transform:translate(var(--dx,0px),var(--drag,0px)) rotate(var(--rot,0deg))}to{opacity:.6;transform:translateY(110vh) rotate(-7deg)}}
@keyframes phone-dim{from{opacity:0}}
/* Side buttons: action button and volume on the left, the side button on the right. */
.phone-side{position:absolute;inset:0;pointer-events:none}
.phone-side i{position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#55575d,#b9bbc2 50%,#6d6f76)}
.phone-side .ps-action{left:-10px;top:118px;height:30px}
.phone-side .ps-up{left:-10px;top:170px;height:54px}
.phone-side .ps-down{left:-10px;top:236px;height:54px}
.phone-side .ps-power{right:-10px;top:196px;height:86px}
/* The screen itself, inside the bezel. */
.phone .phone-screen{position:absolute;inset:var(--bez);border-radius:47px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;padding:52px 18px 40px;background:var(--ph-bg)}
.phone .phone-screen::-webkit-scrollbar{display:none}
.phone-glare{position:absolute;inset:var(--bez);z-index:8;border-radius:47px;pointer-events:none;background:linear-gradient(118deg,#ffffff17 0%,#ffffff08 28%,transparent 42%)}
.phone .phone-status{position:absolute;top:var(--bez);left:var(--bez);right:var(--bez);z-index:7;display:flex;align-items:center;justify-content:space-between;height:52px;padding:4px 26px 0 34px;border-radius:47px 47px 0 0;background:color-mix(in srgb,var(--ph-bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ph-ink);font:700 15px/1 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;touch-action:none;cursor:grab}
.phone[data-app="home"] .phone-status{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.phone-island{position:absolute;left:50%;top:11px;width:96px;height:29px;margin-left:-48px;border-radius:20px;background:#000;box-shadow:inset 22px 0 0 -18px #000}
.phone-island::after{content:"";position:absolute;right:13px;top:10px;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#2b3550,#0b0d14 60%)}
.phone-icons{display:flex;align-items:center;gap:6px}
.phone-icons svg{display:block;fill:currentColor}
.pi-signal{width:17px;height:11px}.pi-wifi{width:15px;height:11px}
.phone-batt{position:relative;width:25px;height:12px;border:1.3px solid color-mix(in srgb,currentColor 45%,transparent);border-radius:4px}
.phone-batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;border-radius:0 2px 2px 0;background:color-mix(in srgb,currentColor 45%,transparent)}
.phone-batt i{position:absolute;inset:1.5px;width:auto;border-radius:1.5px;background:currentColor}
/* No ×: it stays for screen readers and the keyboard, out of sight. */
.profile-dialog.phone .close{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.profile-dialog.phone :is(#profile-eyebrow,#profile-title){display:none}
/* Home screen: a wallpaper in your Pettö's colours. */
html .phone[data-app="home"] .phone-screen{background:radial-gradient(110% 60% at 12% 4%,color-mix(in srgb,var(--petto,#f5b94e) 55%,var(--ph-bg)),transparent 70%),radial-gradient(90% 55% at 100% 96%,color-mix(in srgb,var(--petto-deep,#c7843a) 45%,var(--ph-bg)),transparent 72%),var(--ph-bg)}
.phone .phone-home{display:flex;flex-direction:column;min-height:100%;padding-bottom:6px;touch-action:pan-y}
.phone .phone-screen{touch-action:pan-y}
.phone .phone-status,.phone .phone-nav{touch-action:none}
.phone-widget{display:grid;grid-template-columns:1fr;justify-items:center;gap:4px;padding:18px 16px 14px;text-align:center;border-radius:26px;background:color-mix(in srgb,var(--ph-bg) 60%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ph-ink) 8%,transparent)}
.pw-avatar{display:grid;place-items:center;overflow:hidden;width:96px;height:96px;margin-bottom:6px;border-radius:50%;background:color-mix(in srgb,var(--petto,#f5b94e) 35%,var(--ph-bg));box-shadow:0 0 0 3px var(--ph-bg),0 0 0 5.5px var(--petto,#f5b94e);font:900 30px Nunito,sans-serif}
.pw-avatar canvas{width:110px;height:132px;max-width:none;transform:translateY(20px)}
.pw-avatar svg{width:100px;height:116px;max-width:none;transform:translateY(16px)}
.pw-avatar img{width:100%;height:100%;object-fit:cover}
.pw-who strong{display:block;font:900 21px/1.15 Nunito,sans-serif}
.pw-who small{display:block;margin-top:2px;color:var(--ph-dim);font-size:12px;font-weight:800}
.pw-xp{width:100%;margin-top:8px}
.pw-bar{position:relative;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ph-ink) 12%,transparent);overflow:hidden}
.pw-bar i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--petto,#f5b94e) 55%,#fff),var(--petto,#f5b94e));box-shadow:0 0 10px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent);transition:width .8s cubic-bezier(.2,.9,.3,1) .35s}
.pw-sub{display:flex;justify-content:space-between;gap:10px;margin-top:6px;color:var(--ph-dim);font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.pw-sub span:first-child{color:var(--petto-deep,#b8863e)}
html[data-mode="dark"] .pw-sub span:first-child{color:var(--petto,#f5b94e)}
/* Two small widgets: today's steps as a ring, and your streak. */
.phone-widgets{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.profile-dialog .phone-mini{display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:12px;border:0;border-radius:22px;background:color-mix(in srgb,var(--ph-bg) 60%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ph-ink) 8%,transparent);color:var(--ph-ink);text-align:left;cursor:pointer}
.phone-mini>span:last-child{min-width:0}
.phone-mini b{display:block;font:900 18px/1.1 Nunito,sans-serif;font-variant-numeric:tabular-nums}
.phone-mini small{display:block;color:var(--ph-dim);font-size:10px;font-weight:800;white-space:nowrap}
.pm-ring{flex:none;width:40px;height:40px;transform:rotate(-90deg)}
.pm-ring circle{fill:none;stroke:color-mix(in srgb,var(--w) 22%,transparent);stroke-width:6}
.pm-ring .pm-ring-fill{stroke:var(--w);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .9s cubic-bezier(.2,.9,.3,1) .3s}
.pm-flame{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:color-mix(in srgb,var(--w) 22%,transparent);font-size:20px}
/* App icons. */
.phone-section{margin:20px 4px 10px;color:var(--ph-dim);font:800 11px/1 'DM Sans',sans-serif;letter-spacing:1px;text-transform:uppercase}
.phone-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px}
.profile-dialog .phone-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;margin:0;padding:0;border:0;background:none;color:var(--ph-ink);box-shadow:none;cursor:pointer}
.phone-app .pa-icon{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:16px;background:linear-gradient(160deg,var(--a1),var(--a2));box-shadow:0 5px 12px color-mix(in srgb,var(--a2) 35%,transparent),inset 0 1px 0 #ffffff80,inset 0 -1px 0 #0000001a;color:#fff;transition:transform .15s}
.phone-app:active .pa-icon,.phone-mini:active{transform:scale(.9)}
.phone-app .pa-icon svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #0002)}
.phone-app .pa-icon .pa-fill{fill:#fff;stroke:none}
.phone-app .pa-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:700}
.phone-app .cute-heart .ch-body{fill:#fff;stroke:#fff}.phone-app .cute-heart .ch-shine{stroke:#ff6f9e;opacity:.6}
.phone-app .cute-heart .ch-eye{fill:#5b2a3b}.phone-app .cute-heart .ch-smile{stroke:#5b2a3b}
.phone-app .cute-gc circle{fill:#ffffffd9;stroke:none}.phone-app .cute-gc :is(.gc-b,.gc-c){fill:#ffffff99}
.phone-app .cute-mail .cm-door{fill:#fff;stroke:#2f6fa8}.phone-app .cute-mail .cm-body{fill:#ffd3e2;stroke:#2f6fa8}
.phone-app.connected .pa-icon::after{content:"";position:absolute;top:-3px;right:-3px;width:14px;height:14px;border-radius:50%;background:#34c759;box-shadow:0 0 0 2.5px var(--ph-bg)}
.phone-app .mail-count{position:absolute;top:-6px;right:calc(50% - 36px);min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border-radius:99px;background:#ff3b30;color:#fff;font:800 11px/1 'DM Sans',sans-serif;box-shadow:0 0 0 2px var(--ph-bg)}
/* Page dots and the dock along the bottom, like an iPhone. */
.phone-dots{display:flex;justify-content:center;gap:7px;margin:auto 0 10px;padding-top:16px}
.phone-dots i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ph-ink) 25%,transparent)}
.phone-dots i:first-child{background:var(--ph-ink)}
.phone .phone-dock{padding:12px 10px;border-radius:32px;background:color-mix(in srgb,var(--ph-bg) 55%,transparent);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ph-ink) 7%,transparent)}
.phone .phone-dock .pa-name{display:none}
.phone-banner{margin:14px 0 0;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--ph-bg) 80%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 8px 24px #0003;color:var(--ph-ink)!important;font-size:12px;font-weight:700;animation:phone-banner .4s cubic-bezier(.2,1.3,.4,1)}
@keyframes phone-banner{from{opacity:0;transform:translateY(16px) scale(.96)}}
/* An app: Home at the top left and its name; it slides in from the right, and Home slides back in from the left. */
.phone-nav{position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:center;height:44px;margin:-8px -18px 12px;padding:0 18px;background:color-mix(in srgb,var(--ph-bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);touch-action:none}
.phone-nav strong{font:900 16px Nunito,sans-serif;color:var(--ph-ink)}
.profile-dialog .phone-nav button{position:absolute;left:10px;top:6px;margin:0;padding:6px 10px 6px 20px;border:0;background:none!important;box-shadow:none;color:var(--petto-deep,#b8863e);font-size:15px;font-weight:800}
html[data-mode="dark"] .profile-dialog .phone-nav button{color:var(--petto,#f5b94e)}
.profile-dialog .phone-nav button::before{content:"";position:absolute;left:8px;top:50%;width:9px;height:9px;margin-top:-5px;border:solid currentColor;border-width:0 0 2.5px 2.5px;border-radius:1px;transform:rotate(45deg)}
.phone.app-in :is(.phone-nav strong,#profile-form,#account-box,#profile-data,#phone-settings){animation:phone-app-in .38s cubic-bezier(.2,.9,.3,1) backwards}
.phone.home-in .phone-home{animation:phone-home-in .38s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes phone-app-in{from{opacity:0;transform:translateX(60px)}}
@keyframes phone-home-in{from{opacity:.3;transform:scale(.94)}}
.profile-dialog.phone :is(#account-box,#profile-data){margin-top:0}
/* Settings: night mode as an iOS-style row. */
.phone-settings{margin-bottom:22px}
.phone-settings .eyebrow{display:block;margin:0 4px 8px;padding:0;background:none;color:var(--ph-dim)}
.ps-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--ph-ink) 6%,transparent);color:var(--ph-ink);font-size:15px;font-weight:800;cursor:pointer}
.ps-row>span:nth-child(2){flex:1}
.ps-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#8f8cf0,#5b5fb8);color:#fff;font-size:16px}
.ps-row input{appearance:none;-webkit-appearance:none;position:relative;width:51px;height:31px;margin:0;border-radius:99px;background:color-mix(in srgb,var(--ph-ink) 18%,transparent);cursor:pointer;transition:background .2s}
.ps-row input::after{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0004;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.ps-row input:checked{background:#34c759}.ps-row input:checked::after{transform:translateX(20px)}
/* The home bar: tap or flick it up to go home, or (from home) to put the phone away. */
.profile-dialog.phone .phone-home-bar{position:absolute;left:50%;bottom:calc(var(--bez) + 4px);z-index:9;width:150px;height:26px;margin:0 0 0 -75px;padding:0;border:0;background:none;box-shadow:none;touch-action:none;cursor:grab}
.profile-dialog.phone .phone-home-bar::after{content:"";position:absolute;left:8px;right:8px;top:12px;height:5px;border-radius:99px;background:var(--ph-ink);opacity:.8}
@media(max-width:430px){html .profile-dialog.phone{--bez:8px;width:calc(100vw - 26px);height:calc(100dvh - 20px);border-radius:52px}.phone .phone-screen,.phone-glare{border-radius:44px}.phone-app .pa-icon{width:56px;height:56px;border-radius:15px}}
@media(prefers-reduced-motion:reduce){.profile-dialog.phone[open],.profile-dialog.phone.phone-leaving,.phone.app-in *,.phone.home-in *{animation:none!important}}
/* The phone keeps its black bezel and titanium frame in day mode too; the day-mode card style for dialogs is very specific. */
:root body #profile-dialog.phone.phone.phone.phone.phone:not(.onboarding){background:#050506!important;border:0!important;box-shadow:0 0 0 1.5px #2a2b2f,0 0 0 3.5px #c9cbd2,0 0 0 5px #8d8f96,0 0 0 6px #3c3d41,0 40px 90px #0008,0 10px 30px #0004!important}
/* Pixel art phone (Sophia, 2026-10-25): pixel-art app icons on chunky pixel tiles, and your Pettö's room as the wallpaper. */
.phone-wall{position:absolute;inset:var(--bez);border-radius:47px;overflow:hidden;background:var(--ph-bg)}
.phone-wall svg{width:100%;height:100%;display:block}
.phone:not([data-app="home"]) .phone-wall{display:none}
html .phone[data-app="home"] .phone-screen{background:linear-gradient(180deg,#00000040,#0000 22%,#0000 70%,#00000052)}
.phone[data-app="home"] .phone-status{color:#fff;text-shadow:0 1px 3px #0006}
.phone[data-app="home"] .phone-section{color:#fff;text-shadow:0 1px 3px #000a}
.phone[data-app="home"] .phone-app .pa-name{color:#fff;text-shadow:0 1px 2px #000c,0 0 6px #0008}
.phone[data-app="home"] .phone-dots i{background:#ffffff70}.phone[data-app="home"] .phone-dots i:first-child{background:#fff}
.phone[data-app="home"] .phone-home-bar::after{background:#fff}
.phone-app .pa-icon{--t:#fff4f8;--tb:#f3c7d6;width:58px;height:58px;border-radius:0;background:var(--t);box-shadow:inset 0 -5px 0 var(--tb),inset 0 4px 0 #ffffffb0;clip-path:polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px));filter:drop-shadow(0 3px 0 #0000002e)}
.phone-app .pa-icon svg{width:34px;height:34px;fill:initial;stroke:none;filter:none;image-rendering:pixelated}
.phone-app .pa-icon[data-px] svg rect{stroke:none}
[data-px] .pK{fill:#3b2c3a}[data-px] .pW{fill:#fff}[data-px] .pP{fill:#ff8fb6}[data-px] .pL{fill:#ffc4d6}[data-px] .pV{fill:#a98cf0}
[data-px] .pY{fill:#ffd35c}[data-px] .pO{fill:#ff9a4d}[data-px] .pB{fill:#7cc8ff}[data-px] .pN{fill:#c08d5f}[data-px] .pR{fill:#ff6f6f}
[data-px] .pG{fill:#6fd08c}[data-px] .pF{fill:#ffd1b0}[data-px] .pS{fill:#b9bdc9}
.pa-icon[data-px="health"],.pa-icon[data-px="shop"],.pa-icon[data-px="me"]{--t:#ffe3ec;--tb:#f4b3c8}
.pa-icon[data-px="games"]{--t:#ece5ff;--tb:#c7b8f2}
.pa-icon[data-px="mail"],.pa-icon[data-px="friends"]{--t:#dff1ff;--tb:#a9d4f2}
.pa-icon:is([data-px="points"],[data-px="traits"],[data-px="ranks"]){--t:#fff4cf;--tb:#efd27a}
.pa-icon:is([data-px="dex"],[data-px="eggs"]){--t:#fff0df;--tb:#efc89c}
.pa-icon:is([data-px="journey"],[data-px="walk"]){--t:#e3f7e6;--tb:#a8dcb3}
.pa-icon[data-px="goals"]{--t:#ffe6e2;--tb:#f2b0a6}
.pa-icon[data-px="about"],.pa-icon[data-px="settings"]{--t:#eef0f4;--tb:#c6cad4}
.phone-app.connected .pa-icon::after{content:none}
.phone-app.connected::after{content:"";position:absolute;top:-2px;right:calc(50% - 33px);width:12px;height:12px;background:#34c759;box-shadow:0 0 0 2px #3b2c3a}
.pm-flame{border-radius:0}.pm-flame svg{width:26px;height:26px;image-rendering:pixelated}
.pm-flame .pO{fill:#ff8a3d}.pm-flame .pY{fill:#ffd35c}.pm-flame .pW{fill:#fff3c4}
@media(max-width:430px){.phone-app .pa-icon{width:54px;height:54px}.phone-app .pa-icon svg{width:32px;height:32px}}
/* Over the wallpaper, the widgets are dark glass with white text so they read on any room. */
.phone[data-app="home"] :is(.phone-widget,.phone-mini,.phone-dock){background:#17141c8c;box-shadow:inset 0 0 0 1px #ffffff1f;color:#fff}
.phone[data-app="home"] :is(.pw-who small,.pw-sub,.phone-mini small){color:#ffffffb8}
.phone[data-app="home"] .pw-bar{background:#ffffff2e}
.phone[data-app="home"] .pw-sub span:first-child{color:var(--petto,#f5b94e)}
/* On a phone the day/night switch sits in the row with the rest (not centred over it), a little smaller, so it never
   covers the growing-up bar. */
@media(max-width:430px){html .topbar .mode-pill{position:relative;left:auto;top:auto;transform:none;flex:none;order:3;margin:0 auto;zoom:.86}
  html .topbar .me-cluster{margin-left:0}}
/* The rest of the header in the same style (Sophia, 2026-10-25): the points and the day/night switch sit in the same
   sunken containers as the level bar, and the switch is a grooved track with a knob like the growth bar's. */
html body .topbar .point-chip,html body .topbar .mode-pill{height:36px;border:0!important;border-radius:14px;background:var(--mu-deep)!important;box-shadow:var(--mu-groove-in)!important;color:var(--mu-ink)!important}
html body .topbar .point-chip{padding:0 12px;font-weight:900}
html body .topbar .point-chip strong{color:var(--mu-ink)}
html body .topbar .point-chip::first-letter{color:#ffbf47}
html body .topbar .mode-pill .mode-quick{color:var(--mu-ink)!important}
html body .topbar .mode-quick input{background:var(--mu-groove)!important;box-shadow:var(--mu-groove-in)}
html body .topbar .mode-quick input::after{background:var(--mu-knob)!important;box-shadow:0 1px 3px #00000055,0 0 0 1.5px color-mix(in srgb,var(--petto,#f5b94e) 70%,transparent)!important}
html body .topbar .mode-quick input:checked{background:linear-gradient(90deg,color-mix(in srgb,var(--petto,#f5b94e) 60%,#fff),var(--petto,#f5b94e))!important;box-shadow:0 0 8px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent)}
.gb-star svg{filter:drop-shadow(1px 0 0 var(--mu-deep)) drop-shadow(-1px 0 0 var(--mu-deep)) drop-shadow(0 1px 0 var(--mu-deep)) drop-shadow(0 -1px 0 var(--mu-deep))}
.gb-star.reached svg{filter:drop-shadow(1px 0 0 var(--mu-deep)) drop-shadow(-1px 0 0 var(--mu-deep)) drop-shadow(0 1px 0 var(--mu-deep)) drop-shadow(0 0 3px #ffbf47)}
.gb-star{z-index:1}
html .me-cluster .xp-chip{padding-right:30px}
/* Wallpaper picker in Settings (Sophia, 2026-10-25): little phone-shaped tiles, stepped like the pixel icons. */
.phone-settings>.eyebrow~.eyebrow{margin-top:20px}
.phone-walls{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:10px}
.phone-walls .pw-pick{position:relative;aspect-ratio:9/16;max-width:100%;margin:0;padding:0;overflow:hidden;border:0;border-radius:12px;background:color-mix(in srgb,var(--ph-ink) 8%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ph-ink) 14%,transparent);cursor:pointer}
.phone-walls .pw-pick :is(svg,img,.pw-colour){position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.phone-walls .pw-pick[aria-checked="true"]{box-shadow:0 0 0 2.5px var(--ph-bg,#000),0 0 0 5px #34c759}
.phone-walls .pw-pick small{position:absolute;left:4px;right:4px;bottom:4px;padding:2px 0;border-radius:6px;background:#000a;color:#fff;font-size:10px;font-weight:800;text-align:center}
.phone-walls .pw-add b{position:absolute;inset:0;display:grid;place-items:center;color:var(--ph-dim);font-size:26px;font-weight:700}
/* Pixel colour walls: a soft two-colour sky with a faint pixel grid and a few pixel stars. */
.pw-colour{display:block;width:100%;height:100%;background:var(--a)}
.phone-wall img{width:100%;height:100%;display:block;object-fit:cover}
/* Cleaner level bar (Sophia, 2026-10-25): one colour, your Pettö's, for the whole chip; smooth stars, no glow or knob. */
html .me-cluster .xp-chip{background:color-mix(in srgb,var(--petto,#f5b94e) 16%,var(--mu-deep));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--petto,#f5b94e) 30%,transparent)}
html .me-cluster .xp-chip b{color:var(--mu-ink)}
html .gb-track{left:8px;right:8px;height:4px;margin-top:-2px;border-radius:99px;background:color-mix(in srgb,var(--petto,#f5b94e) 28%,transparent);box-shadow:none}
html .gb-fill{background:var(--petto,#f5b94e);box-shadow:none}
html .gb-fill::after{display:none}
html .gb-star{width:14px;height:14px;margin:-7px 0 0 -7px}
html .gb-star:nth-of-type(2){left:8px}html .gb-star:nth-of-type(4){left:calc(100% - 8px)}
html .gb-star svg,html .gb-star.reached svg{filter:none;image-rendering:auto;overflow:visible}
html .gb-star path{fill:color-mix(in srgb,var(--petto,#f5b94e) 16%,var(--mu-deep));stroke:color-mix(in srgb,var(--petto,#f5b94e) 55%,transparent);stroke-width:2}
html .gb-star.reached path{fill:var(--petto,#f5b94e);stroke:var(--petto,#f5b94e)}
html .gb-star.target path{stroke:var(--petto,#f5b94e)}
html .gb-star.target{animation:gb-pulse 2s ease-in-out infinite}
@keyframes gb-pulse{50%{transform:scale(1.18)}}
/* Home-style phone icons (Sophia, 2026-10-25): white line icons on pastel circles with a soft white rim, like the
   care buttons in your Pettö's pod. Replaces the pixel tiles. */
html .phone-app .pa-icon{--t:#ffb38a;width:56px;height:56px;border-radius:50%;clip-path:none;background:var(--t);border:2px solid #ffffffcc;box-shadow:0 4px 14px #0000002a;color:#fff}
html .phone-app .pa-icon svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:none;image-rendering:auto}
html .phone-app .pa-icon svg circle[r=".6"],html .phone-app .pa-icon svg circle[r=".7"]{fill:#fff}
html .pa-icon:is([data-px="health"],[data-px="shop"],[data-px="me"]){--t:#ff9cb8}
html .pa-icon[data-px="games"]{--t:#b7a2f5}
html .pa-icon:is([data-px="mail"],[data-px="friends"]){--t:#7cc0ff}
html .pa-icon:is([data-px="points"],[data-px="traits"],[data-px="ranks"]){--t:#ffc65c}
html .pa-icon:is([data-px="dex"],[data-px="eggs"]){--t:#ffb38a}
html .pa-icon:is([data-px="journey"],[data-px="walk"]){--t:#6fd3a5}
html .pa-icon[data-px="goals"]{--t:#ff9a8a}
html .pa-icon:is([data-px="about"],[data-px="settings"]){--t:#a9afbd}
html .pm-flame{border-radius:50%}html .pm-flame svg{width:22px;height:22px;fill:none;stroke:#ff9a4d;stroke-width:2;stroke-linejoin:round;image-rendering:auto}
@media(max-width:430px){html .phone-app .pa-icon{width:52px;height:52px}html .phone-app .pa-icon svg{width:24px;height:24px}}
/* Wallpaper: one plain colour, your Pettö's, by default. On a pale one the home screen's words turn dark. */
.pw-solid{display:block;width:100%;height:100%;background:var(--petto,#f5b94e)}
.wall-light[data-app="home"] :is(.phone-status,.phone-section,.phone-app .pa-name){color:#2a2530!important;text-shadow:none!important}
html .wall-light[data-app="home"] .phone-screen{background:none}
.wall-light[data-app="home"] .phone-dots i{background:#2a253040}.wall-light[data-app="home"] .phone-dots i:first-child{background:#2a2530}
.wall-light[data-app="home"] .phone-home-bar::after{background:#2a2530}
/* Smaller phone that pops up from the bottom of the screen (Sophia, 2026-11-04). It sits low with room to spare above,
   rises out of the bottom edge with a little bounce and still slides back down to close. */
html .profile-dialog.phone{width:min(330px,calc(100vw - 60px));height:min(660px,calc(100dvh - 120px));margin:auto auto max(18px,env(safe-area-inset-bottom));border-radius:50px}
html .profile-dialog.phone .phone-screen,html .profile-dialog.phone .phone-glare{border-radius:40px}
html .profile-dialog.phone .phone-status{border-radius:40px 40px 0 0}
html .profile-dialog.phone[open]{animation-name:phone-rise;transform-origin:50% 100%}
@keyframes phone-rise{0%{opacity:0;transform:translateY(105%) scale(.55)}45%{opacity:1}100%{opacity:1;transform:none}}
@media(max-width:430px){html .profile-dialog.phone{--bez:8px;width:min(310px,calc(100vw - 64px));height:min(620px,calc(100dvh - 130px));border-radius:46px}html .profile-dialog.phone .phone-screen,html .profile-dialog.phone .phone-glare{border-radius:38px}}
/* Level chip: Lv sits inside the chip at every width (the hanging tag looked messy). */
@media(max-width:430px){html .me-cluster .xp-chip b{position:static;padding:0;background:none;color:var(--mu-ink);font-size:10px}html .gb-row{width:54px}}
.wall-light[data-app="home"] :is(.phone-widget,.phone-mini,.phone-dock){background:#ffffff8c;box-shadow:inset 0 0 0 1px #ffffffb0,0 6px 18px #0000000f;color:#2a2530}
.wall-light[data-app="home"] :is(.pw-who small,.pw-sub,.phone-mini small){color:#2a2530a6}
.wall-light[data-app="home"] .pw-bar{background:#2a25301f}.wall-light[data-app="home"] .pw-bar i{background:var(--petto-deep,#b8863e)}
html .phone-app .pa-icon[data-px] svg rect{stroke:#fff}
.wall-light[data-app="home"] .pw-sub *{color:#2a2530a6}
/* Header layout (Sophia, 2026-10-25): your picture first on the left with the level bar attached to it; the day/night
   switch in the middle; points then the egg logo last on the right. */
html body .topbar .me-cluster{order:0!important;margin:0 auto 0 0!important}
html body .topbar .me-cluster .avatar{order:0}
html body .topbar .me-cluster .xp-chip{order:1;margin:0 0 0 -18px!important;padding:0 12px 0 26px!important}
html body .topbar .point-chip{order:8!important;margin:0 0 0 auto!important}
html body .topbar .mobile-brand{order:9!important;margin:0!important}
/* The level bar: battery-style segments in your Pettö's colour inside a dark case, ringed by this level's aura. */
html .me-cluster .xp-chip{position:relative;gap:8px;background:#121428;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),0 0 10px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent);transition:box-shadow .4s}
html .me-cluster .xp-chip b{order:2;color:#fff}
html .me-cluster .gb-row{order:1;display:flex;gap:3px;width:auto;height:20px}
.gb-seg{flex:none;width:5px;height:100%;border-radius:2px;background:linear-gradient(180deg,#2c3f73,#22335f);box-shadow:inset 0 -3px 0 #ffffff14}
.gb-seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--petto,#f5b94e) 70%,#fff),var(--petto,#f5b94e));box-shadow:0 0 6px color-mix(in srgb,var(--petto,#f5b94e) 70%,transparent),inset 0 1px 0 #ffffff80}
@media(max-width:430px){html .me-cluster .gb-row{gap:2px;height:18px}.gb-seg{width:4px}html body .topbar .me-cluster .xp-chip{padding:0 9px 0 24px!important}}
/* Level up: pop, aura ring burst, a sweep of light through the bars, and a badge that rises out. */
.xp-chip.level-up{animation:gb-pop .7s cubic-bezier(.3,1.6,.5,1)}
.xp-chip.level-up::before{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--aura,#7ce8ff);pointer-events:none;animation:gb-ring 1.1s ease-out 2}
.xp-chip.level-up .gb-seg{animation:gb-sweep 1.2s ease-out both;animation-delay:calc(var(--i) * 60ms)}
.gb-burst{position:absolute;left:50%;top:100%;z-index:5;padding:4px 10px;border-radius:99px;background:var(--aura,#7ce8ff);color:#121428;font:900 11px/1.2 Nunito,sans-serif;white-space:nowrap;box-shadow:0 0 16px var(--aura,#7ce8ff);pointer-events:none;animation:gb-badge 2.6s cubic-bezier(.2,.9,.3,1) both}
.gb-burst b{font-weight:900;text-transform:uppercase;letter-spacing:.6px}
@keyframes gb-pop{0%{transform:scale(1)}35%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes gb-ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.45,2)}}
@keyframes gb-sweep{0%{background:#fff;box-shadow:0 0 12px #fff}40%{background:var(--aura,#7ce8ff);box-shadow:0 0 12px var(--aura,#7ce8ff)}}
@keyframes gb-badge{0%{opacity:0;transform:translate(-50%,-6px) scale(.6)}15%{opacity:1;transform:translate(-50%,8px) scale(1.08)}25%{transform:translate(-50%,6px) scale(1)}85%{opacity:1;transform:translate(-50%,6px)}100%{opacity:0;transform:translate(-50%,0)}}
@media(prefers-reduced-motion:reduce){.xp-chip.level-up,.xp-chip.level-up::before,.xp-chip.level-up .gb-seg{animation:none}.gb-burst{animation:none;transform:translate(-50%,6px)}}
/* A bar lit by new XP flashes white then settles into your Pettö's colour; the case glows for a moment. */
.gb-seg.gb-new{animation:gb-sweep .9s ease-out both}
.xp-chip.gb-gain{animation:gb-glow 1.2s ease-out}
@keyframes gb-glow{30%{box-shadow:inset 0 0 0 1.5px #fff,0 0 22px var(--petto,#f5b94e)}}
@media(prefers-reduced-motion:reduce){.gb-seg.gb-new,.xp-chip.gb-gain{animation:none}}
/* Light mode (Sophia, 2026-10-25): the level bar's case and outline are a darker shade of your Pettö's colour; night
   keeps the dark case. */
html:not([data-mode="dark"]) .me-cluster .xp-chip{background:color-mix(in srgb,var(--petto-deep,#a76c1c) 70%,#1d1b22);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--petto-deep,#a76c1c) 85%,#000),0 0 10px color-mix(in srgb,var(--aura,#7ce8ff) 40%,transparent)}
html:not([data-mode="dark"]) .gb-seg{background:color-mix(in srgb,var(--petto-deep,#a76c1c) 45%,#1d1b22);box-shadow:inset 0 -3px 0 #ffffff12}
html:not([data-mode="dark"]) .gb-seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--petto,#f5b94e) 70%,#fff),var(--petto,#f5b94e));box-shadow:0 0 6px color-mix(in srgb,var(--petto,#f5b94e) 70%,transparent),inset 0 1px 0 #ffffff80}
/* Header sizes (Sophia, 2026-10-25): the level bar and points chip are the same height as the day/night toggle, and
   the egg logo is bigger. */
html body .topbar .me-cluster .xp-chip,html body .topbar .point-chip{height:36px;box-sizing:border-box}
html body .topbar .point-chip{display:inline-flex;align-items:center;padding-top:0;padding-bottom:0}
html body .topbar .mobile-brand svg.logo-egg{width:38px;height:38px}
@media(max-width:430px){html body .topbar .me-cluster .xp-chip,html body .topbar .point-chip{height:31px}html body .topbar .me-cluster .xp-chip{border-radius:12px}html .me-cluster .gb-row{height:15px}html body .topbar .mobile-brand svg.logo-egg{width:34px;height:34px}}
/* Light mode (Sophia, 2026-10-26): the level bar's container is filled exactly like the day/night toggle (its Pettö
   shade, or the plain toggle colour when there's no Pettö theme, never white) with the same aura outline as dark mode. */
html:not([data-mode="dark"]) body .topbar .me-cluster .xp-chip{background:var(--pw-bar,var(--mu-deep))!important;box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),0 0 10px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent)!important}
html:not([data-mode="dark"]) body .topbar .me-cluster .xp-chip b{color:var(--petto-deep,#6b5a3a)}
/* Your picture wears the same aura outline as the level bar beside it (Sophia, 2026-10-26), in day and night. */
html body .topbar .me-cluster .avatar{box-shadow:0 0 0 3px color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),0 0 12px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent)!important}
/* Light mode (Sophia, 2026-10-26): empty bars are sunk in like the day/night toggle's track, in its lighter shade. */
html:not([data-mode="dark"]) body .topbar .gb-seg:not(.on){background:color-mix(in srgb,var(--pw-bar,var(--mu-deep)) 86%,var(--petto-deep,#a76c1c));box-shadow:inset 0 1px 3px #0000002b,inset 0 -1px 0 #ffffffb3}
/* Slightly smaller level container (Sophia, 2026-10-26); the bars inside keep their size. */
html body .topbar .me-cluster .xp-chip{height:32px!important;padding:0 10px 0 24px!important;gap:6px}
@media(max-width:430px){html body .topbar .me-cluster .xp-chip{height:27px!important;padding:0 8px 0 22px!important;border-radius:10px}}
/* Dark mode level container (Sophia, 2026-10-26): toggle's dark fill, lighter black empty bars, filled bars in the aura colour. */
html[data-mode="dark"] body .topbar .me-cluster .xp-chip{background:var(--mu-deep,#141517)}
html[data-mode="dark"] body .topbar .gb-seg:not(.on){background:color-mix(in srgb,var(--mu-deep,#141517) 72%,#fff);box-shadow:inset 0 1px 3px #0000009c,inset 0 -1px 0 #ffffff26}
html[data-mode="dark"] body .topbar .gb-seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),var(--aura,#7ce8ff));box-shadow:0 0 6px color-mix(in srgb,var(--aura,#7ce8ff) 70%,transparent),inset 0 1px 0 #ffffff80}
/* Phone header (Sophia, 2026-10-26): the day/night toggle sits in the middle of the screen; it only shifts right
   when the level bar needs the room. Level bars sit an even gap from the avatar ring and the chip's end. */
@media(max-width:430px){
  html body .topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:6px}
  html body .topbar>*{grid-row:1}
  html body .topbar .me-cluster{grid-column:1;justify-self:start}
  html body .topbar .mode-pill{grid-column:2;margin:0}
  html body .topbar .point-chip{grid-column:3;justify-self:end;margin:0 40px 0 0!important}
  html body .topbar .mobile-brand{grid-column:3;justify-self:end;margin:0}
  html body .topbar .me-cluster .xp-chip{padding:0 7px 0 28px!important}
}
/* Same level bar in light and dark (Sophia, 2026-10-26): lit bars in the aura colour in both modes, and dark mode's
   glows kept as soft as they read on the light header so the box and bars look the same size. */
html body .topbar .gb-seg.on{background:linear-gradient(180deg,color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),var(--aura,#7ce8ff));box-shadow:0 0 3px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent),inset 0 1px 0 #ffffff80}
html[data-mode="dark"] body .topbar .me-cluster .xp-chip{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--aura,#7ce8ff) 70%,#fff),0 0 5px color-mix(in srgb,var(--aura,#7ce8ff) 30%,transparent)!important}
html[data-mode="dark"] body .topbar .gb-seg:not(.on){box-shadow:inset 0 1px 3px #0000006b,inset 0 -1px 0 #ffffff26}
/* Lit and empty bars share the same highlight spot (Sophia, 2026-10-26): a soft line along the bottom edge, like the
   sunken empty bars, so the row reads as one even strip. */
html body .topbar .gb-seg.on{background:var(--aura,#7ce8ff);box-shadow:0 0 3px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent),inset 0 1px 3px #0000002b,inset 0 -1px 0 #ffffffb3}
html[data-mode="dark"] body .topbar .gb-seg.on{box-shadow:0 0 3px color-mix(in srgb,var(--aura,#7ce8ff) 45%,transparent),inset 0 1px 3px #0000006b,inset 0 -1px 0 #ffffff26}
/* Claim XP on the care checklist (Sophia, 2026-10-25): a finished care turns into a shiny Claim box. Tapping it fades
   the screen to black, the level bar comes forward from the header and fills by the XP the care was worth. */
.cc-claim{position:relative;flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:1px;min-width:70px;padding:6px 12px;border:2px solid #ffffffd9;border-radius:14px;overflow:hidden;background:linear-gradient(135deg,color-mix(in srgb,var(--care) 70%,#fff),var(--care) 55%,color-mix(in srgb,var(--care) 70%,#5b3cff));color:#fff;font:inherit;cursor:pointer;box-shadow:0 0 0 3px color-mix(in srgb,var(--care) 25%,transparent),0 4px 16px color-mix(in srgb,var(--care) 55%,transparent);animation:cc-claim-bob 1.6s ease-in-out infinite}
.cc-claim span{font-size:9px;font-weight:900;letter-spacing:1px;text-transform:uppercase;opacity:.9}
.cc-claim b{font:900 13px/1 Nunito,sans-serif;text-shadow:0 1px 0 #00000026}
.cc-claim::after{content:"";position:absolute;inset:-20% auto -20% -60%;width:40%;background:linear-gradient(100deg,transparent,#ffffffb0,transparent);transform:skewX(-20deg);animation:cc-claim-shine 2.2s ease-in-out infinite}
.cc-claim:active{transform:scale(.92)}
.cc-claim:focus-visible{outline:2px solid var(--care);outline-offset:3px}
@keyframes cc-claim-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes cc-claim-shine{0%,40%{left:-60%}80%,100%{left:130%}}
.claim-veil{position:fixed;inset:0;z-index:1000;opacity:0;pointer-events:auto;color:#f5f2ea}
.claim-back{position:absolute;inset:0;background:#000}
.claim-veil.light{color:#1d1d1f}
.claim-veil.light .claim-back{background:#f5f5f7}
.claim-spot{position:fixed;display:block}
.claim-chip{position:relative;transform-origin:50% 50%;cursor:default}
.claim-gain{position:absolute;left:24px;right:24px;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;animation:claim-gain .6s .5s cubic-bezier(.3,1.6,.5,1) both}
.claim-gain em{font:900 13px/1 Nunito,sans-serif;font-style:normal;letter-spacing:2px;text-transform:uppercase;opacity:.7}
.claim-gain b{font:900 40px/1 Nunito,sans-serif;color:var(--petto,#f5b94e);text-shadow:0 0 18px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent)}
.claim-veil.light .claim-gain b{color:var(--petto-deep,#b8863e);text-shadow:none}
.claim-gain p{max-width:280px;margin:4px 0 0;font-size:16px;font-weight:800;line-height:1.35}
.claim-gain small{max-width:260px;margin-top:4px;padding:6px 12px;border-radius:99px;background:color-mix(in srgb,var(--petto,#f5b94e) 22%,transparent);font-size:12px;font-weight:900}
@keyframes claim-gain{from{opacity:0;transform:translateY(-14px) scale(.6)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.cc-claim,.cc-claim::after{animation:none}}
/* The claimed bar wears the header's light-mode look too, so it lands back in the header seamlessly. */
html body .topbar.claim-spot{position:fixed;display:block!important;z-index:auto;margin:0;padding:0;background:none;border:0;box-shadow:none}
html body .topbar.claim-spot .me-cluster{display:block;width:100%;height:100%;margin:0!important}
html body .topbar.claim-spot .me-cluster .xp-chip{margin:0!important;padding:0 12px!important}
/* The flying bar grows from its own middle, so it sits centred on the claim screen (Sophia, 2026-11-08). The header bar grows from the left, which pushed it off to the right. */
html body .topbar.claim-spot .me-cluster .xp-chip{transform-origin:50% 50%;clip-path:none}
/* Ready to grow up (Sophia, 2026-10-26): the baby glows and pulses until you tap it, like the ready egg. */
.pet.grow-ready :is(svg,img,canvas){animation:growready 1.8s ease-in-out infinite}
@keyframes growready{0%,100%{filter:drop-shadow(0 0 6px rgba(255,214,120,.55))}50%{filter:drop-shadow(0 0 22px rgba(255,224,140,1)) brightness(1.08)}}
/* The grow-up reveal reuses the hatch's black screen; the baby glows brighter with each tap, then bursts into light. */
.grow-baby{width:200px;height:200px;transform-origin:50% 90%}
.grow-baby>*{width:100%;height:100%}
.grow-baby :is(svg,img,canvas){filter:drop-shadow(0 0 calc(6px + var(--light) * 34px) color-mix(in srgb,var(--accent) 80%,#fff)) brightness(calc(1 + var(--light) * .5))}
.grow-reveal.shake .grow-baby{animation:hatchshake .45s cubic-bezier(.3,1.5,.5,1)}
.grow-reveal.burst .grow-baby{opacity:0;scale:1.35;filter:brightness(4);transition:opacity .6s ease .15s,scale .6s ease,filter .3s ease}
@media(prefers-reduced-motion:reduce){.pet.grow-ready :is(svg,img,canvas){animation:none;filter:drop-shadow(0 0 14px rgba(255,214,120,.85))}}
/* Daily visit reward (Sophia, 2026-10-26): a card pops up when you open the app; Claim plays the level bar fill. */
.visit-pop{position:fixed;inset:0;z-index:95;display:grid;place-items:center;padding:16px;background:#0000008c;opacity:0;transition:opacity .3s}
.visit-pop.on{opacity:1}
.visit-card{width:min(340px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:24px 20px 18px;border-radius:28px;background:#fffdf8;color:#2a2530;text-align:center;box-shadow:0 0 0 2px color-mix(in srgb,var(--petto,#f5b94e) 55%,#fff),0 20px 50px #00000059;transform:translateY(24px) scale(.92);transition:transform .45s cubic-bezier(.3,1.5,.5,1)}
.visit-pop.on .visit-card{transform:none}
html[data-mode="dark"] .visit-card{background:#17181c;color:#f5f2ea;box-shadow:0 0 0 2px color-mix(in srgb,var(--petto,#f5b94e) 55%,#000),0 20px 50px #000000a6}
.visit-card>small{font-size:11px;font-weight:900;letter-spacing:2px;opacity:.6}
.visit-card h2{margin:0;font:900 32px/1 Nunito,sans-serif}
.visit-card p{margin:0;font-size:15px;font-weight:700;line-height:1.35;opacity:.85}
.visit-pips{display:flex;gap:6px;margin:4px 0}
.visit-pips i{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:color-mix(in srgb,currentColor 10%,transparent);font-size:14px;font-style:normal}
.visit-pips i.on{background:var(--petto,#f5b94e);box-shadow:0 0 10px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent)}
.visit-gifts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.visit-gifts b{padding:6px 12px;border-radius:99px;background:color-mix(in srgb,var(--petto,#f5b94e) 22%,transparent);font-size:13px;font-weight:900}
.visit-claim{min-width:150px;padding:10px 18px;margin-top:6px}
.visit-claim b{font-size:17px}
.visit-card em{font-size:12px;font-style:normal;font-weight:800;opacity:.6}
@media(prefers-reduced-motion:reduce){.visit-pop,.visit-card{transition:none}}
/* Streak countdown (Sophia, 2026-10-26): how long until a streak not kept today ends, or until a broken one can no
   longer be restored. The last 6 hours turn red and pulse. */
.streak-clock{display:inline-flex;align-items:center;gap:4px;justify-self:start;padding:3px 9px;border-radius:99px;background:color-mix(in srgb,currentColor 12%,transparent);font-size:11px;font-weight:800}
.streak-clock b{font-variant-numeric:tabular-nums;font-weight:900}
.streak-clock.soon,.streak-clock.broken{background:#ff5d7d26;color:#ff7b9c;animation:streak-clock 1.6s ease-in-out infinite}
html:not([data-mode="dark"]) .streak-clock.soon,html:not([data-mode="dark"]) .streak-clock.broken{color:#d94c6e}
@keyframes streak-clock{0%,100%{box-shadow:0 0 0 0 #ff5d7d00}50%{box-shadow:0 0 0 4px #ff5d7d33}}
@media(prefers-reduced-motion:reduce){.streak-clock{animation:none!important}}
/* Home after hatching or growing up (Sophia, 2026-10-26): your Pettö celebrates in its room with a pop of sparkles. */

.pet.grow-party :is(svg,img,canvas){animation:growparty .8s cubic-bezier(.3,1.6,.5,1) 2}
@keyframes growparty{0%,100%{transform:none}40%{transform:translateY(-10px) scale(1.06)}}
.party-spark{position:fixed;z-index:85;width:10px;height:10px;margin:-5px;border-radius:2px;background:hsl(var(--hue) 90% 70%);box-shadow:0 0 8px hsl(var(--hue) 90% 70%);pointer-events:none;animation:partyspark 1.4s cubic-bezier(.2,.8,.3,1) both}
.party-spark:nth-child(odd){border-radius:50%}
@keyframes partyspark{0%{opacity:0;transform:translate(0,0) scale(.3) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(200deg)}}
.hatch-reveal.leaving{pointer-events:none}
@media(prefers-reduced-motion:reduce){.pet.grow-party :is(svg,img,canvas),.party-spark{animation:none!important}.party-spark{display:none}}

/* Level up letter with an aura glow (Sophia, 2026-10-26): a dark card ringed by a slowly turning light in the level's
   aura colour, the envelope and seal in the same glow, and sparkles drifting up behind it. */
.letter-dialog.aura-letter .letter-env{background:color-mix(in srgb,var(--aura) 35%,#15141c);box-shadow:0 0 30px color-mix(in srgb,var(--aura) 55%,transparent),0 16px 40px #0006}
.letter-dialog.aura-letter .letter-pocket{background:color-mix(in srgb,var(--aura) 55%,#1d1b26)}
.letter-dialog.aura-letter .letter-flap{background:color-mix(in srgb,var(--aura) 75%,#fff)}
.letter-dialog.aura-letter .letter-seal{background:var(--aura);color:#15141c;box-shadow:0 0 0 4px #ffffff55,0 0 22px var(--aura)}
.letter-dialog.aura-letter .letter-hearts i{color:var(--aura)}
.letter-dialog.aura-letter .letter-paper{isolation:isolate;overflow:hidden;padding:24px 18px 18px;border-radius:22px;background:radial-gradient(120% 70% at 50% 0,color-mix(in srgb,var(--aura) 28%,#17161f),#0f0e14 70%);color:#f6f2ff;border:1.5px solid color-mix(in srgb,var(--aura) 70%,#fff);box-shadow:0 0 18px color-mix(in srgb,var(--aura) 70%,transparent),0 0 60px color-mix(in srgb,var(--aura) 40%,transparent),inset 0 0 30px color-mix(in srgb,var(--aura) 18%,transparent)}
.letter-dialog.aura-letter.out .letter-paper{animation:auraglow 2.6s ease-in-out .8s infinite}
.letter-dialog.aura-letter .letter-paper::before{content:'';position:absolute;inset:-60%;z-index:-1;background:conic-gradient(from 0deg,transparent 0 70%,color-mix(in srgb,var(--aura) 35%,transparent) 85%,transparent);animation:auraturn 6s linear infinite;pointer-events:none}
.letter-dialog.aura-letter .letter-paper::after{content:'✦  ✧    ✦   ✧  ✦';position:absolute;left:0;right:0;bottom:-10px;z-index:-1;color:var(--aura);font-size:13px;letter-spacing:6px;white-space:pre;opacity:.7;animation:aurasparks 4s ease-in-out infinite;pointer-events:none}
.letter-dialog.aura-letter .letter-paper .eyebrow{display:inline-block;padding:4px 10px;border-radius:99px;background:color-mix(in srgb,var(--aura) 22%,transparent);color:var(--aura);letter-spacing:.16em;text-shadow:0 0 10px var(--aura)}
.letter-dialog.aura-letter .letter-paper h2{color:#fff;text-shadow:0 0 14px color-mix(in srgb,var(--aura) 80%,transparent)}
.letter-dialog.aura-letter .letter-pet{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--aura) 75%,transparent))}
.letter-dialog.aura-letter .letter-paper p{color:#e4dff0}
.letter-dialog.aura-letter .letter-unlocks li{background:color-mix(in srgb,var(--aura) 14%,#ffffff08);border:1px solid color-mix(in srgb,var(--aura) 40%,transparent);color:#f6f2ff}
.letter-dialog.aura-letter .letter-sign{color:var(--aura)}
.letter-dialog.aura-letter .letter-actions button{background:var(--aura);color:#15141c;box-shadow:0 0 16px color-mix(in srgb,var(--aura) 60%,transparent)}
.letter-dialog.aura-letter .letter-actions .secondary-button{background:#ffffff14;color:#f6f2ff;box-shadow:none}
@keyframes auraturn{to{transform:rotate(1turn)}}
@keyframes auraglow{50%{box-shadow:0 0 26px color-mix(in srgb,var(--aura) 90%,transparent),0 0 90px color-mix(in srgb,var(--aura) 55%,transparent),inset 0 0 36px color-mix(in srgb,var(--aura) 24%,transparent)}}
@keyframes aurasparks{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-14px);opacity:.85}}
@media(prefers-reduced-motion:reduce){.letter-dialog.aura-letter .letter-paper,.letter-dialog.aura-letter .letter-paper::before,.letter-dialog.aura-letter .letter-paper::after{animation:none!important}}

/* Streak countdown clock beside the days (Sophia, 2026-10-26). */
.streak-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-width:0}
.streak-row .streak-clock{justify-self:auto;flex:none;gap:4px;padding:4px 8px;border:0;color:inherit;font:inherit;font-size:12px;font-weight:800}
.streak-row .streak-clock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
button.streak-clock{cursor:pointer}
.streak-clock.armed{background:linear-gradient(180deg,#ffe2c4,#ffc79c);color:#5b3216;animation:none}
.streak-clock:disabled{opacity:.5}
/* Fasting on the meal log (Sophia, 2026-10-26). */
.ml-fast{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 10px 10px 12px;border-radius:18px;background:var(--mu-deep,#f3efe7);color:var(--mu-ink,inherit)}
.ml-fast p{flex:1;min-width:140px;margin:0;font-size:14px;line-height:1.3}
.ml-fast p small{display:block;margin-top:2px;font-size:12px;opacity:.7}
.ml-fast>button,.ml-fast-chips button{padding:8px 14px;border:0;border-radius:99px;background:#5b5fb8;color:#fff;font:inherit;font-size:13px;font-weight:800;white-space:nowrap}
.ml-fast .ml-fast-x{background:#8881;color:inherit}
.ml-fast-moon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#5b5fb8;color:#ffe9a8;font-size:18px}
.ml-fast-chips{display:flex;flex-wrap:wrap;gap:6px;flex-basis:100%}
.ml-fast-chips button[aria-pressed="false"]{background:#5b5fb833;color:inherit}
.ml-fast-plan{flex-basis:100%;display:grid;gap:8px}
.ml-fast-window{margin:0!important;font-size:13px!important}
.ml-fast-plan ul{margin:0;padding-left:18px;display:grid;gap:4px;font-size:12px;line-height:1.4;opacity:.85}
/* Traits sheet (Sophia, 2026-10-26): slides up from the bulge in the Trait mode look, with the sick day box, the level
   bar, streaks, care left to do, care completed today and traits, all as boxes two to a row. */
.trait-sheet{position:fixed;inset:0;z-index:950;pointer-events:none}
.trait-sheet[hidden]{display:none}
.trait-sheet.open{pointer-events:auto}
.ts-back{position:absolute;inset:0;background:#0009;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .35s}
.trait-sheet.open .ts-back{opacity:1}
.ts-panel{--aura:#7ce8ff;--ts-ink:#f8f5ed;--ts-dim:#aaa9ad;--ts-box:#090a0d;--ts-line:#ffffff12;--ts-chip:#ffffff0d;position:absolute;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;max-height:90dvh;display:flex;flex-direction:column;border-radius:28px 28px 0 0;background:radial-gradient(circle at 50% 30%,#29252b,#18191e 48%,#101114 85%);color:var(--ts-ink);box-shadow:0 -10px 40px #0006;transform:translateY(105%);transition:transform .45s cubic-bezier(.32,.72,0,1);font-family:Nunito,'DM Sans',sans-serif}
html:not([data-mode="dark"]) .ts-panel{--lc:var(--petto,#f0c46a);--lcd:var(--petto-deep,#a8823a);--ts-ink:#26242a;--ts-dim:color-mix(in srgb,var(--lcd) 70%,#26242a);--ts-box:#ffffffb8;--ts-line:#ffffffe0;--ts-chip:#ffffff80;background:linear-gradient(160deg,color-mix(in srgb,var(--lc) 55%,#fff),color-mix(in srgb,var(--lc) 85%,#fff) 60%,var(--lc))}
.trait-sheet.open .ts-panel:not(.dragging){transform:none}
.ts-panel.dragging{transition:none}
.ts-handle{position:relative;flex:none;padding:8px 18px 4px;touch-action:none;cursor:grab}
.ts-grip{display:block;width:40px;height:5px;margin:0 auto 8px;border-radius:3px;background:var(--ts-ink);opacity:.25}
.ts-head{text-align:center;padding:0 40px}
.ts-head .eyebrow{color:var(--ts-dim);letter-spacing:.2em;background:none;padding:0}
.ts-head h2{margin:4px 0 2px;font-size:24px;color:var(--ts-ink)!important}
.ts-head p{margin:0;color:var(--ts-dim);font-size:13px}
.ts-scroll{overflow-y:auto;overscroll-behavior:contain;padding:10px 16px calc(24px + env(safe-area-inset-bottom));display:grid;gap:10px}
.ts-focus{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.ts-focus button{padding:6px 14px;border:1px solid var(--ts-line);border-radius:99px;background:var(--ts-chip);color:var(--ts-dim);font:inherit;font-size:13px;font-weight:800}
.ts-focus button[aria-pressed="true"]{background:var(--fc,var(--ts-ink));border-color:transparent;color:#15141c}
html:not([data-mode="dark"]) .ts-focus button[aria-pressed="true"]{color:#fff;background:var(--fc,var(--lcd))}
.ts-sick{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 12px;border:1px solid var(--ts-line);border-radius:22px;background:var(--ts-box)}
.ts-sick-icon{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:#ffd9b833;font-size:18px}
.ts-sick p{flex:1;min-width:0;margin:0;font-size:14px;line-height:1.25}
.ts-sick small{display:block;color:var(--ts-dim);font-size:12px}
.ts-sick button,.ts-go,.ts-claim{padding:8px 14px;border:0;border-radius:99px;background:linear-gradient(180deg,#ffe2c4,#ffc79c);color:#5b3216;font:inherit;font-size:13px;font-weight:900;white-space:nowrap}
.ts-sick button:disabled{opacity:.45}
.ts-level{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:6px 14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--aura) 55%,transparent);border-radius:18px;background:var(--ts-box);box-shadow:0 0 22px color-mix(in srgb,var(--aura) 18%,transparent)}
.ts-lv{grid-row:1/3;display:grid;place-items:center;min-width:60px;height:60px;padding:0 8px;border-radius:50%;background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--aura) 40%,#fff),var(--aura));color:#15141c;font-size:18px;font-weight:1000;box-shadow:0 0 18px color-mix(in srgb,var(--aura) 60%,transparent)}
.ts-bar{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;height:14px}
.ts-bar i{border-radius:4px;background:var(--ts-line)}
html:not([data-mode="dark"]) .ts-bar i{background:color-mix(in srgb,var(--lcd) 18%,#fff)}
.ts-bar i.on{background:var(--aura);box-shadow:0 0 8px color-mix(in srgb,var(--aura) 70%,transparent);animation:tsfill .5s calc(var(--i) * 45ms) both}
.ts-level small{font-size:12px;font-weight:800;color:var(--ts-dim)}
@keyframes tsfill{from{transform:scaleY(.2);opacity:.2}}
.ts-h{display:flex;align-items:baseline;justify-content:space-between;margin:8px 2px 0;font-size:15px;font-weight:900;color:var(--ts-ink)!important}
.ts-h[hidden],.ts-grid[hidden]{display:none}
.ts-h small{font-size:12px;font-weight:800;color:var(--ts-dim)}
.ts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ts-box{position:relative;display:grid;align-content:start;gap:5px;min-width:0;padding:12px;border:1px solid var(--ts-line);border-radius:16px;background:var(--ts-box);color:var(--ts-dim)}
.ts-box b{color:var(--ts-ink);font-size:13px;line-height:1.2}
.ts-box small{font-size:11px;line-height:1.35}
.ts-top{display:flex;align-items:center;gap:7px;min-width:0}
.ts-top b{min-width:0}
.ts-flame{flex:none;width:20px;height:20px;background:linear-gradient(180deg,#ffd36b,#ff8a3d 55%,#ff5d4d);clip-path:path('M10 1C11.5 5 16 6.5 16 12a6 6 0 0 1-12 0c0-2.3 1.2-3.8 2.3-4.6 0 1.5.8 2.7 1.9 3.1C7.7 7 8.4 4 10 1z')}
.ts-streak.broken .ts-flame{filter:grayscale(.7) brightness(.85)}
.ts-streak strong{font-size:26px;font-weight:1000;color:var(--ts-ink);line-height:1}
.ts-streak strong em{font-size:12px;font-style:normal;font-weight:800;color:var(--ts-dim)}
.ts-streak.kept small{color:#4fbf7f;font-weight:800}
.ts-streak.risk small,.ts-streak.broken small{color:#ff7b9c;font-weight:800}
html:not([data-mode="dark"]) .ts-streak.risk small,html:not([data-mode="dark"]) .ts-streak.broken small{color:#d94c6e}
html:not([data-mode="dark"]) .ts-streak.kept small{color:#2e8a57}
.ts-streak.kept{border-color:color-mix(in srgb,#4fbf7f 45%,transparent)}
.ts-box .streak-clock{justify-self:start;gap:4px;padding:4px 8px;border:0;color:inherit;font:inherit;font-size:12px;font-weight:800}
.ts-box .streak-clock svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.ts-start{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ts-start small{flex-basis:100%;font-size:12px;font-weight:800;color:var(--ts-dim)}
.ts-start span{padding:5px 10px;border:1px solid var(--ts-line);border-radius:99px;background:var(--ts-chip);font-size:12px;font-weight:800;color:var(--ts-dim)}
.ts-care-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--care) 22%,transparent);color:var(--care)}
.ts-care-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ts-care-box.done .ts-care-icon{background:var(--care);color:#fff}
.ts-care-bar{display:block;height:4px;border-radius:3px;background:linear-gradient(90deg,var(--care) var(--part),var(--ts-line) var(--part))}
html:not([data-mode="dark"]) .ts-care-bar{background:linear-gradient(90deg,var(--care) var(--part),color-mix(in srgb,var(--lcd) 15%,#fff) var(--part))}
.ts-go,.ts-claim{justify-self:start;margin-top:3px;padding:6px 12px;font-size:12px}
.ts-go{background:var(--care);color:#fff}
.ts-claim{background:linear-gradient(180deg,color-mix(in srgb,var(--care) 50%,#fff),var(--care));color:#fff;box-shadow:0 0 14px color-mix(in srgb,var(--care) 55%,transparent);animation:tsclaim 1.6s ease-in-out infinite}
@keyframes tsclaim{50%{box-shadow:0 0 22px color-mix(in srgb,var(--care) 80%,transparent)}}
.ts-claimed{justify-self:start;margin-top:3px;font-size:12px;font-weight:900;color:var(--care)}
.ts-care-box.done{border-color:color-mix(in srgb,var(--care) 50%,transparent)}
.ts-all-done{grid-column:1/-1;justify-items:center;text-align:center;padding:18px 14px;border-color:color-mix(in srgb,var(--aura) 60%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--aura) 22%,transparent)}
.ts-all-done>span{font-size:22px;color:var(--aura)}
.ts-all-done b{font-size:16px}
.ts-all-done.small{box-shadow:none;border-color:var(--ts-line)}
.ts-trait{opacity:.6}
.ts-trait.on{opacity:1;border-color:#f5f2ea55;box-shadow:0 0 22px #f5f2ea14}
html:not([data-mode="dark"]) .ts-trait.on{border-color:var(--lcd);box-shadow:0 0 0 2px color-mix(in srgb,var(--lcd) 40%,transparent)}
.ts-tag{justify-self:start;padding:2px 8px;border-radius:99px;background:color-mix(in srgb,var(--fc,var(--aura)) 22%,transparent);color:var(--fc,var(--aura));font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
html:not([data-mode="dark"]) .ts-tag{color:color-mix(in srgb,var(--fc,var(--lcd)) 60%,#26242a)}
.ts-all{justify-self:center;margin-top:4px;padding:10px 22px;border:1px solid var(--ts-line);border-radius:99px;background:var(--ts-box);color:var(--ts-ink);font:inherit;font-weight:900}
@media(prefers-reduced-motion:reduce){.ts-panel{transition:none}.ts-bar i.on,.ts-claim{animation:none}}
html:not([data-mode="dark"]) .ts-bar i.on{background:color-mix(in srgb,var(--aura) 55%,var(--lcd))}

/* restore button with its countdown */
.restore-timed{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.restore-timed .streak-clock{display:inline-flex;padding:2px 7px;border-radius:8px;background:rgba(0,0,0,.18);font-variant-numeric:tabular-nums;font-size:.85em}
.restore-timed .streak-clock b{font-weight:700}

/* Sick day: every streak is paused, so its box looks frozen over with a countdown to the thaw (Sophia, 2026-10-26). */
.streak-tile.frozen,.ts-streak.frozen{position:relative;overflow:hidden;border-color:#bfe6ff!important;background:linear-gradient(160deg,rgba(225,245,255,.92),rgba(170,215,245,.82) 55%,rgba(205,235,255,.9))!important;color:#2f6a94!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7),inset 0 0 22px rgba(255,255,255,.85),0 4px 14px rgba(110,180,230,.3)}
.streak-tile.frozen::before,.ts-streak.frozen::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 18%,rgba(255,255,255,.95) 0 2px,transparent 3px),radial-gradient(circle at 78% 12%,rgba(255,255,255,.9) 0 1.5px,transparent 2.5px),radial-gradient(circle at 90% 70%,rgba(255,255,255,.9) 0 2px,transparent 3px),radial-gradient(circle at 30% 85%,rgba(255,255,255,.8) 0 1.5px,transparent 2.5px),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 42%,transparent 50%),linear-gradient(180deg,rgba(255,255,255,.9),transparent 9px)}
.streak-tile.frozen::after,.ts-streak.frozen::after{content:"";position:absolute;left:0;right:0;top:-1px;height:10px;pointer-events:none;background:radial-gradient(circle at 6px 0,#fff 0 6px,transparent 6.5px) 0 0/14px 10px repeat-x;opacity:.9}
.streak-tile.frozen strong,.streak-tile.frozen strong em,.ts-streak.frozen strong,.ts-streak.frozen strong em{color:#245a80!important}
.streak-tile.frozen small,.ts-streak.frozen small{color:#3d7fae!important;font-weight:800}
.streak-tile.frozen .px-icon.flame,.ts-streak.frozen .ts-flame{filter:grayscale(1) brightness(1.6) opacity(.75)}
.streak-tile.frozen .pd-stat-pill{background:rgba(255,255,255,.6);color:#2f6a94}
.ts-box .streak-clock.frost,.streak-row .streak-clock.frost,.streak-clock.frost{position:relative;z-index:1;background:rgba(255,255,255,.92);color:#1b5a86;box-shadow:inset 0 0 0 1px #9ed2f0}
.streak-clock.frost svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.streak-slide.frozen small{color:#3d7fae}
/* Freezing over: a shiver, the frost climbs up from the bottom, icicles drop in, then a gentle shiver now and then. */
.streak-tile.frozen,.ts-streak.frozen{animation:frost-shiver 6s ease-in-out 2s infinite}
.streak-tile.freezing,.ts-streak.freezing{animation:frost-shake .55s ease-in-out var(--freeze-delay,0s) 2,frost-shiver 6s ease-in-out 3s infinite}
.streak-tile.freezing::before,.ts-streak.freezing::before{animation:frost-creep 1.1s cubic-bezier(.3,.7,.3,1) calc(var(--freeze-delay,0s) + .35s) both}
.streak-tile.freezing::after,.ts-streak.freezing::after{animation:icicles-drop .5s cubic-bezier(.3,1.6,.5,1) calc(var(--freeze-delay,0s) + 1.1s) both}
.streak-tile.freezing .streak-clock.frost,.ts-streak.freezing .streak-clock.frost{animation:frost-pop .45s cubic-bezier(.3,1.6,.5,1) calc(var(--freeze-delay,0s) + 1.2s) both}
@keyframes frost-shake{0%,100%{transform:translateX(0) rotate(0)}15%{transform:translateX(-3px) rotate(-.6deg)}30%{transform:translateX(3px) rotate(.6deg)}45%{transform:translateX(-2px) rotate(-.4deg)}60%{transform:translateX(2px) rotate(.3deg)}80%{transform:translateX(-1px)}}
@keyframes frost-shiver{0%,92%,100%{transform:translateX(0)}93.5%{transform:translateX(-1.5px)}95%{transform:translateX(1.5px)}96.5%{transform:translateX(-1px)}98%{transform:translateX(1px)}}
@keyframes frost-creep{from{clip-path:inset(100% 0 0 0);opacity:.2;filter:blur(3px)}to{clip-path:inset(0 0 0 0);opacity:1;filter:blur(0)}}
@keyframes icicles-drop{from{transform:translateY(-12px);opacity:0}to{transform:none;opacity:.9}}
@keyframes frost-pop{from{transform:scale(.5)}60%{transform:scale(1.08)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.streak-tile.frozen,.ts-streak.frozen,.streak-tile.freezing,.ts-streak.freezing{animation:none}}

/* The sheet's footer: Open Trait mode plus a Menu button for the rest of the app's pages (Sophia, 2026-10-26). */
.ts-foot{display:flex;gap:10px;align-items:stretch}
.ts-foot .ts-all{flex:1;margin:0}
.ts-pages{display:inline-flex;align-items:center;gap:7px;padding:0 16px;border:1px solid var(--ts-line);border-radius:14px;background:var(--ts-box);color:var(--ts-ink);font-weight:800;font-size:14px}
.ts-pages svg{width:17px;height:17px;fill:currentColor}

/* What the Meals numbers mean (Sophia 2026-10-26): "i" beside the Meals heading opens a pop-up in the meals panel style. */
html body .meal-card.ml-on .meal-info-button{width:22px;height:22px;margin:-3px 0 0 8px;border:0;opacity:1;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-dim);font-size:12px}
html body .meal-card.ml-on .meal-info-button:hover{color:var(--mu-ink)}
.meal-info{width:min(460px,calc(100% - 24px));max-height:min(86vh,720px);overflow:auto;overscroll-behavior:contain}
.meal-info h2{padding-right:36px}
.mi-list{display:grid;gap:8px;margin:14px 0 0}
.mi-row{padding:10px 12px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.mi-row dt{font:900 13px Nunito,'DM Sans',sans-serif;color:var(--mu-ink);display:flex;align-items:center;gap:7px}
.mi-row dt em{margin-left:auto;font-style:normal;font-size:11px;color:var(--mu-dim)}
.mi-macro dt::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--mi);box-shadow:0 0 6px color-mix(in srgb,var(--mi) 60%,transparent)}
.mi-row dd{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--mu-dim)}
.meal-info .mi-note{margin:12px 2px 0;font-size:11px;line-height:1.5;color:var(--mu-dim)}
/* Sophia 2026-10-26: the Pettö's mood line sits under the nutrient bars in the Meals hero. */
html body .ml-hero .diner-mood{grid-row:3;grid-column:1/-1;text-align:center}
/* Diary days scroll like the cycle strip (Sophia 2026-10-26); logged days glow honey. */
.meal-cal-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 2px}
.meal-cal-head b{font:900 15px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.meal-cal-head small{font-size:11px;font-weight:700;color:var(--mu-dim)}
.meal-pill.logged{background:linear-gradient(180deg,#ffd27a,#f5b94e);box-shadow:0 4px 14px #f5b94e55}.meal-pill.logged i,.meal-pill.logged small{color:#4a3510}
.meal-pill.logged u{background:#fff}
.meal-pill.logged.picked{box-shadow:0 8px 20px #f5b94e88,inset 0 0 0 2px #fff}
.meal-pill.first small{font-weight:900;color:var(--mu-ink)}

/* Unwell mood offers a sick day (Sophia, 2026-10-26). */
dialog.sick-offer{text-align:center}
.sick-offer-icon{font-size:40px;line-height:1;margin-bottom:6px}
.sick-offer p{margin:8px 0;font-size:14px;line-height:1.45}
.sick-offer-left{display:inline-block;padding:6px 14px;border-radius:99px;background:#dff2ff;color:#1b5a86;font-weight:800}
.sick-offer-left b{font-size:16px}
.sick-offer-buttons{display:grid;gap:8px;margin-top:14px}
.sick-offer-buttons button{padding:12px 16px;border:0;border-radius:99px;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
#sick-offer-yes{background:linear-gradient(180deg,#e6f6ff,#a9dcf7);color:#18507a;box-shadow:0 6px 18px #7cc4ee55,inset 0 0 0 2px #ffffffaa}
#sick-offer-yes:disabled{opacity:.5}
#sick-offer-no{background:transparent;color:inherit;opacity:.75;box-shadow:inset 0 0 0 1px currentColor}
.sick-offer-short{display:block;margin-top:8px;color:#d94c6e;font-weight:800}

/* The XP toast says what the XP is for, and the level bar by your picture flashes when it lands (Sophia, 2026-10-26). */
.xp-toast-why{font-style:normal;font-size:12px;font-weight:800;color:#f5efe2;margin-top:3px}
.xp-toast-why[hidden]{display:none}
.xp-chip.xp-chip-gain{animation:xp-chip-gain 1.1s ease-out}
@keyframes xp-chip-gain{0%{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.12);filter:brightness(1.5) drop-shadow(0 0 10px #ffbf47)}100%{transform:scale(1);filter:brightness(1)}}

/* XP notch (Sophia, 2026-10-26): the day/night capsule is a black Dynamic Island; XP grows out of it. */
html body .topbar .mode-pill{background:#000!important;box-shadow:0 0 0 1px #ffffff14,0 4px 14px #0004!important;color:#fff!important}
html body .topbar .mode-pill .mode-quick,html body .topbar .mode-pill .mode-quick span{color:#f5efe2!important}
.topbar .mode-pill>*{transition:opacity .2s}
.topbar .mode-pill.island-busy>*{opacity:0;pointer-events:none;transition:none}
.xp-island{position:fixed;z-index:400;transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:26px;background:#000;color:#fff;box-shadow:0 10px 30px #0008,0 0 0 1px #ffffff12;touch-action:none;cursor:grab;overflow:visible;white-space:nowrap}
.xp-island.closing>*{opacity:0;transition:opacity .1s}
.xpi-orb{display:inline-flex;align-items:center;gap:7px;padding:7px 14px 7px 9px;border:0;border-radius:99px;background:radial-gradient(120% 140% at 50% 0,#2b2a33,#141418 75%);box-shadow:inset 0 0 0 1px #ffbf4744,0 0 16px #ffbf4733;color:#ffbf47;font:inherit;cursor:grab;touch-action:none}
.xpi-orb b{font:900 17px/1 Nunito,sans-serif;letter-spacing:.4px;text-shadow:0 0 10px #ffbf4799}
.xpi-orb .xp-toast-star{width:22px;height:22px;grid-row:auto}
.xp-island.pulled .xpi-orb{box-shadow:inset 0 0 0 1px #ffbf47aa,0 0 26px #ffbf4799;cursor:grabbing}
.xp-island.pulled .xpi-text{opacity:.4}
.xpi-text{display:grid;gap:2px;text-align:left;transition:opacity .2s}
.xpi-text .xp-toast-why{margin:0;font-size:13px;color:#f5efe2}
.xpi-text small{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#9a958c}
.xpi-flyer{position:fixed;z-index:401;margin:0;pointer-events:none}
.xpi-spark{position:fixed;z-index:401}

/* Ending a walk before 10 minutes asks first (Sophia, 2026-10-26). */
dialog.walk-early{text-align:center}
.walk-early-buttons{display:grid;gap:8px;margin-top:14px}
.walk-early-buttons button{padding:12px 16px;border:0;border-radius:99px;font:inherit;font-size:15px;font-weight:900;cursor:pointer}
#walk-early-keep{background:linear-gradient(180deg,#bff0cf,#6fd49a);color:#15452a}
#walk-early-end{background:transparent;color:inherit;opacity:.75;box-shadow:inset 0 0 0 1px currentColor}

/* Pause a walk (Sophia, 2026-10-26). */
.walk-buttons{display:flex;gap:8px;align-items:stretch;margin-top:12px}
.walk-buttons .walk-go{margin-top:0!important}
.walk-pause{margin:0}
.walk-buttons .walk-go{flex:1}
.walk-pause,html .walk-pause{flex:none;padding:0 18px;border:0;border-radius:99px;font:800 14px Nunito,sans-serif;background:#e8e8ed;color:#1d1d1f;opacity:1;box-shadow:none}
html[data-mode="dark"] .walk-pause{background:#ffffff1f;color:#f5f2ea}
.walk-pause[hidden]{display:none}
/* Your week on a plate (Sophia 2026-10-26): the Diary card, then a dark reveal where the week's top foods land on a plate. */
.pw-card{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 12px;padding:12px 14px;border:0;border-radius:18px;text-align:left;color:#fff8ea;background:radial-gradient(circle at 15% 20%,#ffd27a33,transparent 60%),linear-gradient(135deg,#2a2230,#15161b);box-shadow:0 8px 22px #00000040,inset 0 0 0 1px #ffffff14;cursor:pointer}
.pw-card[hidden]{display:none}
.pw-card>span:nth-child(2){flex:1;display:grid;gap:2px}.pw-card b{font:900 15px Nunito,'DM Sans',sans-serif}.pw-card small{font-size:11.5px;opacity:.75}
.pw-card-plate{position:relative;flex:none;width:58px;height:58px;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 52%,#ece4d6 53% 62%,#fffaf1 63%);box-shadow:0 4px 10px #0006;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;gap:0 1px;padding:8px}
.pw-card-plate .food-sprite{width:20px;height:20px}
.pw-card-new{flex:none;padding:4px 8px;border-radius:99px;background:#ffd27a;color:#3a2a08;font:900 10px 'DM Sans',sans-serif;font-style:normal;letter-spacing:.1em;animation:pwPulse 1.6s ease-in-out infinite}.pw-card-new[hidden]{display:none}
@keyframes pwPulse{50%{transform:scale(1.08)}}
.plate-week{width:100%;max-width:none;height:100dvh;max-height:100dvh;margin:0;padding:0;border:0;border-radius:0;background:none;color:#fbf4e6;overflow:hidden;box-shadow:none}
.plate-week::backdrop{background:#0b0a1150;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.plate-week .close{z-index:3;top:max(14px,env(safe-area-inset-top));right:14px;width:38px;height:38px;border-radius:50%;background:#00000066;color:#fbf4e6;font-size:20px}
.pw-stage{height:100%;overflow-y:auto;overscroll-behavior:contain;padding:max(16px,env(safe-area-inset-top)) 12px 36px;text-align:center;-webkit-overflow-scrolling:touch}
.pw-hint{margin:0 0 4px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#fbf4e6;opacity:0;text-shadow:0 1px 4px #000}
.pw-hint::before{content:"";display:block;width:40px;height:5px;margin:0 auto 6px;border-radius:9px;background:#fbf4e6aa}
.pw-scene{position:relative;width:min(470px,94vw);aspect-ratio:1;margin:0 auto}
.pw-plate{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,#fffaf2 63% 96%,#e8decd 97% 100%);box-shadow:0 30px 60px #000a,inset 0 -10px 24px #0000001c,inset 0 6px 14px #ffffff;opacity:0;transform:translateY(-120%) scale(.5) rotate(-300deg)}
.pw-arc{position:absolute;inset:0;width:100%;height:100%;opacity:0}
/* Pacifico (SIL Open Font License, Sophia's pick 2026-10-26), only the letters of the plate title, so it looks the same on every phone. */
@font-face{font-family:'PW Pacifico';font-weight:400;src:url(data:font/woff2;base64,d09GMgABAAAAAAtsAA4AAAAAFsgAAAsYAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGigbhC4cgW4GYAB0EQgKnQiYBws2AAE2AiQDaAQgBYNyByAbGhNRVJN+SKaRsnD+fvDA46a9j7UkdUlFJ9Qm5qxMrKsYU0/uHE58apaRE/cM4e3/FrTsLWn1kha/ZF6tZZZAATtAmYpQjE5seuc2NdeZEMPehUHlCSQROwLF6L78G/dCud+Gy6ZGX0T4jnrwbM6tLgIIoThbCzasBCOQiEYQSwKCxAwtIucmkU0Jlu49+7sJ81bMnEwYtkrCl0eNxurpkwk+8RtTGxaCs8VkJJB+KFZLFPEvoeWNIN/8nWW2+Q8xyQQ7gPmPsqFbPXlhoASDJN7Gm/8chHZCnEb+8phvksYnZqOhsPdwIpGJJo4wEkAx6mytxCNwAEHYcWDBjhU7k4PDrOLUwaDVZAdBkOpEPsESRDigwRlKp9ohyFgoc0XdmXTGglMlfrO235DMn0C5hDgoNYwodAQj9EaDgVoYgeEEcTjggAOdMMIwSknleEKUkOQzWMkK9Y5bWeGdiVJTP7mCJG99bYWrmSgjJgWR/dl5CjdNCeGp+igIyqIOaCMnyn2CcUgZqc+SRBAzwxTjmLJUbiEJiUW27I/c0twkMqz3yERCQ2/oMDQTzi6xWWrFSw5oY/FZRgD9DqViHCWCul09GoNak8ARJlfPmck5FObY4/9vF9mzXxHXFcRSE3HL2hsVJMyCCGNIAQc9GxPOPwIrNhRGUkE1XqYynVnMMc16hKPTyGSlmRdhfmRuNzeYa80V5nJzmbnUfENd0SUHpcI0CU+UkxTL2jcF2//g0AT726gvrHiX8jtlIZNztraBwXlyitROSnW2SQx3hTpbN3O26ZJa2CmVUpyuiJDU2y11OYtKOjidof/IftRd2bo7QdclX0BohsezMv1yRYYhNMmnd14m+XYIzWXI/keounvdOtTTUYlheNaerbyfGN2t627DM0HnxYx+VLGGIfuXJ259dZVuHXW57H/YbansX46af06XfHfSdMm4mO45pOcp2+VPEnaqS6GLS9gt+41uS+WPdbhqCG2H9EPNyw0Ird3Js0JbIfl03b1ql+TbExDaO9giqV+8/LTsv5tJvx5cKARcI30iEc57071691tU35dKw9+3Z+VJ2f86qrJqXYrRGpFDLC19IDTPRh1V05VVu6RfIDX7mlt/wuKyhh/1LJU/vJi1IyC0eMmno56X07KOt7rrbyI5sEfLXHFW9m9PVGP33oW4ppsHFfvhQ+Vb+tyrUBPeNDw6m85qGaGWsop1SlW2eYhfGaZ+qlVLt2u6LBv6QndDdSRpHeoj04M51B6ikSlsTktZlWDTyIv3Ml1cKyB0Xfpnrr0r+9B+W+7qfO6W5LtQXq7rh5MFhFh7UvZvRx1ueFbuZL9aukJoB+/K/tOoRUd75XlT8XZUZR371F2S74yI1yXD8PiQM7s07nZyEFg41FPFvOMt3vcdotZgtyYKp2dwMi+npzMJ5tX2CM1j2CLyEUmgL1AmXWgXKLJ8n+i6mxpD64So+cV21JhV93RTR0teKrQ3+sBtDYgPSWF3iiKPtjWPn7gtblWMdPIQY+Rv+4PC9nHrEpSFz5Q6v6Am6G7nj1+RmQlWFyYpqKmXjJPyPyRi5S4dPGs4on6rvkrt64jnjzlfPnStqM+X/0doo3wcktk0ofOwURGemLzkS1tOLRo2anCn+pMbz3SMfq6Vp/mCl+eNKh9ZNywnfEREv7DuYUOUopzUga1PPIgM6xuZfqTa/2yH7n16l0V5o4btPxVT2q5Zy6mzR/0UvadfWWbPniGOmNci5zh7xS2VBvSOHhze/OBPw+amZCv+TDteW5+RfQb3eWF+eY+4D3t0iy/Oig0bGDe9WfhHIdGDA6fDQ7+Izc95bHSPJhneQOmwQW2qZviyj77Us31BZev05+P4+/0vYvNz+j/Vb0D9jGmVPdrMrunRpW2P7u16TJw4K+X5ns2md3zldLjyUsnwDj8krMUDBkGOD/rdey4yG47VTiXK1q1eNHXYVEvDfwgrkmUDvTjJdQc0mjP0urVnxcv2elTNGSyXaNr1xpAJSMDVp3cHPxbFsUCgNo6EB6g085/v5VRsaWtmXsdsFitUWJ3TXmSB7ViubEkTPFmjyvz+veKBXveruv01KncfHOows8UnueXej+gJTWwZWmr7CnXIdan8qmEZJahAUpevMQjtMmaUQfiTzX0+fXdEW7Vi63IOXSplEjXlV1OaVcIGmnj+ljTCE95wUMnKn5NyYZYz7W77Zt0BDQhjN4XuE1vyBH7l9k3y0SohW/1gmVC3pul4mTotqGUeJbkdKaazjzs80eJGrots9pXJBVaqQKV7Df57KiEPucA8UJtQ0+8tm21Uk1R3ziQp8yMq0tJk8PdLSDBXs1iia3wjy9btf76X07z3OaSOV91PiGKl4apO2uKDyCvSOmtjz9a49iEDVCCpy6tzw6yB3RmITLn7DJv1TGDw7SlltpY0dXKcAioX5rjTLlXCf+nxfWyKp89o7HaTOisNOkLcttmtjVqHrK5icPbATh24dwXZjr14yhbuyiW2lPfwXs5eC1pKO4RRYVG4ny8iBi1IwUrx0oI+4uzckEnMYtPWTqkraIGIJsCc01hPSY2+dJ1EzpFJ2yv6qwVfWMIG1/ZyWNp4Hdz2Is7F8YIJeC56qJzPPE2n7vd89tbndD1GouaxpBypoK7srg7pLO/JGXh0SwTI9PJhis6s7fi44Ky1T8SKrLIza3ukxpU3Zv39gE4VNDl6VnyzBLQk5WoWKxTH9arm8deKSKTTxZIZa+B2WeMDRA8MHHXVMukmjrK8xvwmA7J+bkvdTgAWHfhElL6rlivRoGWnRtGndFP2DVmy9n2cE+vSHwBU3yA7Zi3UqlEg+DrUzQ3f8cDm3T9ZexrMfCWw3gin61efNyBSGLSrzGjh1fAWawK78z+kBVo5Iz8HboMbHyC6i3ozqzZcXuzRx5tLqhS21A+UCXZrmI5FKl/+LqFujdJRe2tnMR/orkSdhUKoqxrsflgY06N6BvLe6d89S9hzu1l4J2HV+zIRUTbXC0QaCq05me3yxmWv3681KnCuZR1a1QOtYAkdXOnEUxbYFfQa7mbNSg2lCR6/zuQn7qTqqd7qgzIZsztYL3G1lmKjRNan/Hy4hcHuhOFYEBZxs+miEey9hDC7VNiT7xycaTC3JeVkAnVVrBakJ6Y+9AO9JW020B9tvPaJSLlNMbsJ7Cgf7oo2XutTAG/y/sftOL1cTWdWjXjq15g1xFPaMnR7MX5LfHX9psGljW3TpvY1r8i8ni7sY+j4ywDz1XGx+dsL5Tye0vtcWFNrNRNYQoBwLCJIgZedv9TnRL/SOMQXWc7JuWsHFPu9OcBk/bv+X4DSh3wswCG5AiQJatb999/1/z5T+gQayXKInj6bdACIlf//h64BBBoJdAQWCEA5EIA+AAw6DHTQw/8joeMA40E8ixB3KLKcokTcIEusJMPipJWYSivxKSXiMhniuvms+IESsRoOIm5RZFlBqeVCyLRtSWzCwRbsGNAaWKUEU8OibU6WvoOPL1aCCB5AkMwugZWVlrwAwRebDFZ2knBbOVAoo2H51UAdM5nJVNriwsUMKplOPVOZCTrNmXE/vDRnCtOpxcUgetKfwVRQST011FPJFJoxlGpqmYWXCqZTznB6vd89hckolNKcIooozp1SugjRdrDxqpnDTNr1JXIjKli7G1OYyjyVsFbVVIWS9r9UaxTc1FGNgmp/g5nOFBqoplK8dhdmMZM6M1TOQCHfbGwGS62lvjR5FhOn0AJO4nDQegq1eKmmxhhg1sFdvWGBu0NH8ebh/0HElgA=) format('woff2')}
.pw-arc text{font:400 33px 'PW Pacifico',Nunito,'DM Sans',sans-serif;letter-spacing:.5px;fill:#4a3355}
.pw-dates{position:absolute;left:0;right:0;top:24%;font:900 11px 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#b07a2a;opacity:0}
.pw-foods{position:absolute;inset:0}
.pw-food{position:absolute;left:var(--x);top:var(--y);width:19%;aspect-ratio:1;margin:-9.5% 0 0 -9.5%;opacity:0;transform:translateY(-300px) scale(calc(var(--k) * 1.3)) rotate(var(--r));filter:drop-shadow(0 5px 3px #0002)}
.pw-food .food-sprite{width:100%;height:100%;transform:scale(var(--k))}
.pw-food b{position:absolute;right:-6px;bottom:-4px;padding:2px 7px;border-radius:99px;background:#2a2230;color:#ffd27a;font:900 12px 'DM Sans',sans-serif;box-shadow:0 2px 6px #0005;opacity:0}
.pw-pet{position:absolute;right:-4%;bottom:-8%;width:34%;aspect-ratio:1;opacity:0;transform:translateX(40px)}
.pw-pet svg,.pw-pet img{width:100%;height:100%}
.pw-spark{position:absolute;color:#ffd27a;font-size:22px;opacity:0;text-shadow:0 0 8px #ffd27a}.pw-spark.s1{left:-1%;top:12%}.pw-spark.s2{right:2%;top:4%;font-size:28px}.pw-spark.s3{left:4%;bottom:10%;font-size:16px}
.pw-sheet{position:relative;max-width:470px;margin:22px auto 0;padding:18px 16px 22px;border-radius:28px;background:linear-gradient(180deg,#241f2ef2,#141419f7);box-shadow:0 20px 50px #0009,inset 0 1px 0 #ffffff14;opacity:0;transform:translateY(-120px) scale(.92)}
.pw-top{list-style:none;margin:0 auto;padding:0;display:grid;gap:6px;text-align:left}
.pw-top li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;padding:6px 12px 6px 6px;border-radius:14px;background:#ffffff0d;opacity:0;transform:translateY(-14px)}
.pw-top li:first-child{background:linear-gradient(90deg,#ffd27a33,#ffffff0d)}
.pw-top li span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#fffaf1}.pw-top .food-sprite{width:22px;height:22px}
.pw-top b{font:800 13px 'DM Sans',sans-serif}.pw-top small{font:900 12px Nunito,sans-serif;color:#ffd27a}
.pw-days{display:flex;justify-content:center;gap:6px;margin:18px 0 4px}
.pw-days i{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#ffd27a,#f5b94e);color:#3a2a08;font:900 12px Nunito,sans-serif;font-style:normal;opacity:0;transform:scale(.2)}
.pw-days i.fast{background:#5b5fb8;color:#fff}
.pw-h{margin:22px 0 10px;font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;color:#fbf4e6a6}
.pw-macros{display:grid;gap:9px;padding:14px;border-radius:18px;background:#00000040;box-shadow:inset 0 1px 3px #0008,inset 0 -1px 0 #ffffff10;text-align:left}
.pw-macro{display:grid;grid-template-columns:58px 1fr auto;align-items:center;gap:10px;opacity:0}
.pw-macro small{font-size:10px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#fbf4e6b3}
.pw-macro span{height:8px;border-radius:99px;background:#ffffff14;overflow:hidden}
.pw-macro span i{display:block;height:100%;width:0;border-radius:99px;background:var(--c);box-shadow:0 0 8px var(--c)}
.pw-macro b{font:900 13px Nunito,sans-serif}.pw-macro em{font-style:normal;font-size:10px;opacity:.6}
.pw-macro.met b::after{content:" ✓";color:#6fd49a}.pw-macro.over span{box-shadow:0 0 0 1.5px #ffb44d}
.pw-tips{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:left}
.pw-tips li{position:relative;padding:12px 14px 12px 38px;border-radius:16px;background:#ffffff0f;font-size:13px;line-height:1.45;opacity:0;transform:translateY(16px)}
.pw-tips li::before{content:"✦";position:absolute;left:14px;top:12px;color:#ffd27a}
.pw-note{margin:14px 4px 0;font-size:10.5px;line-height:1.5;color:#fbf4e680}
.pw-done{margin:18px auto 0;display:block;padding:13px 30px;border:0;border-radius:99px;background:#fbf4e6;color:#1b1a22;font:900 15px Nunito,sans-serif;box-shadow:0 8px 20px #0006}
.plate-week.play .pw-plate{animation:pwPlate 1.05s cubic-bezier(.22,1.25,.4,1) .1s forwards}
.plate-week.play .pw-arc{animation:pwArc .7s ease-out .95s forwards}
.plate-week.play .pw-dates{animation:pwFade .5s ease 1.15s forwards}
.plate-week.play .pw-food{animation:pwLand .6s cubic-bezier(.3,1.5,.5,1) var(--d) forwards}
.plate-week.play .pw-food b{animation:pwFade .3s ease calc(var(--d) + .45s) forwards}
.plate-week.play .pw-pet{animation:pwPet .6s ease-out 2.5s forwards}
.plate-week.play .pw-spark{animation:pwTwinkle 2.2s ease-in-out 2.3s infinite}.plate-week.play .pw-spark.s2{animation-delay:2.7s}.plate-week.play .pw-spark.s3{animation-delay:3.1s}
.plate-week.play .pw-sheet{animation:pwSheet .7s cubic-bezier(.25,1.2,.45,1) 2.7s forwards}
.plate-week.play .pw-hint{animation:pwHint .5s ease 3.4s forwards}
.plate-week.play .pw-top li{animation:pwSlide .4s ease-out var(--d) forwards}
.plate-week.play .pw-days i{animation:pwPop .4s cubic-bezier(.3,1.8,.5,1) var(--d) forwards}
.plate-week.play .pw-macro{animation:pwFade .35s ease var(--d) forwards}
.plate-week.play .pw-macro span i{animation:pwFill .9s cubic-bezier(.3,.9,.4,1) calc(var(--d) + .15s) forwards}
.plate-week.play .pw-tips li{animation:pwRise .5s ease-out var(--d) forwards}
@keyframes pwFade{to{opacity:1}}
@keyframes pwHint{to{opacity:.75}}
@keyframes pwPlate{0%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pwArc{from{opacity:0;transform:rotate(-40deg) scale(.9)}to{opacity:1;transform:none}}
@keyframes pwLand{0%{opacity:1}70%{opacity:1;transform:translateY(8px) scale(var(--k)) rotate(0)}100%{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes pwPet{to{opacity:1;transform:none}}
@keyframes pwTwinkle{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:1;transform:scale(1.15) rotate(20deg)}}
@keyframes pwSheet{to{opacity:1;transform:none}}
@keyframes pwSlide{to{opacity:1;transform:none}}
@keyframes pwPop{to{opacity:1;transform:none}}
@keyframes pwFill{to{width:var(--w)}}
@keyframes pwRise{to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.plate-week.play :is(.pw-plate,.pw-arc,.pw-dates,.pw-food,.pw-food b,.pw-pet,.pw-sheet,.pw-hint,.pw-top li,.pw-days i,.pw-macro,.pw-tips li){animation:none;opacity:1;transform:none}.plate-week.play .pw-macro span i{animation:none;width:var(--w)}.pw-card-new{animation:none}}
.pw-food.top{z-index:2}

/* Sleep score in the Sleep section (Sophia, 2026-10-26). */
.sleep-summary{grid-template-columns:repeat(4,1fr)}
#sleep-score-mini{font-size:12px;font-weight:900;opacity:.75;margin-left:6px}
#sleep-score-mini:empty{display:none}
@media(max-width:600px){.sleep-summary{grid-template-columns:repeat(2,1fr)}}
/* Today's plate (Sophia 2026-10-26): the day's food on a plate in the middle, level bars around it fill towards your
   goal plus active calories; eaten / active / left underneath. */
html body .meal-card .ml-hero{display:flex;flex-direction:column;align-items:stretch;gap:12px}
.dp-wrap{position:relative;align-self:center;width:min(250px,72vw);aspect-ratio:1}
.dp-bars{position:absolute;inset:0;width:100%;height:100%}
.dp-bars rect{fill:var(--mu-groove);transition:fill .4s}
.dp-bars rect.on{fill:#6fd49a;filter:drop-shadow(0 0 2px #6fd49a)}
.dp-bars rect.over{fill:#ffb44d;filter:drop-shadow(0 0 2px #ffb44d)}
.dp-plate{position:absolute;inset:13%;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,#fffaf2 63% 95%,#e3d8c6 96% 100%);box-shadow:0 10px 22px #0000004d,inset 0 -5px 12px #0000001a}
.dp-foods{position:absolute;inset:0}
.dp-food{position:absolute;width:21%;aspect-ratio:1;transform:translate(-50%,-50%);filter:drop-shadow(0 3px 2px #0002);animation:dpIn .45s cubic-bezier(.3,1.6,.5,1) both}
.dp-food .food-sprite{width:100%;height:100%}
.dp-mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1.05;pointer-events:none}
.dp-mid strong{font:900 30px Nunito,'DM Sans',sans-serif;color:#3a2f2a}.dp-mid small{margin-top:3px;font-size:10px;font-weight:800;color:#8a7a68}
.dp-wrap.has-food .dp-mid{display:none}
.dp-wrap.fed .dp-plate{animation:dpFed .6s ease}
.dp-wrap.won .dp-plate{background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,var(--rim) 63% 95%,color-mix(in srgb,var(--rim) 70%,#000) 96% 100%)}
.dp-wrap.tier-5 .dp-plate{background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,transparent 63%),linear-gradient(135deg,#fff3b0,#e8b234 35%,#b8861c 60%,#ffe58a 85%)}
.dp-wrap.tier-6 .dp-plate{background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,transparent 63%),conic-gradient(#ff8fa3,#ffc36b,#fff07a,#7fe3a0,#7cc4ff,#b49bff,#ff8fa3)}
@keyframes dpIn{from{transform:translate(-50%,-140%) scale(.4);opacity:0}}
@keyframes dpFed{40%{transform:scale(1.05)}}
.dp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.dp-stats span{display:grid;justify-items:center;gap:2px;padding:10px 6px;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in)}
.dp-stats b{font:900 20px Nunito,'DM Sans',sans-serif;color:var(--mu-ink)}
.dp-stats small{font-size:9.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--mu-dim)}
.dp-stats .dp-active b{color:#5aa7ff}.dp-stats .dp-left b{color:#3fbf7f}.dp-stats.over .dp-left b{color:#f59a2e}
html body .meal-card .ml-hero .ml-left{margin:-4px 0 0;padding:0;text-align:center;font-size:11px;font-weight:700;color:var(--mu-dim)}
/* Your Pettö strolls along the bottom of the screen while Meals is open. */
.ml-walker{display:none;position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 6px);height:96px;z-index:30;pointer-events:none}
.ml-walk-x{position:absolute;bottom:0;left:0;width:92px;height:92px;animation:mlWalkX 22s linear infinite}
.ml-walk-flip{width:100%;height:100%;animation:mlWalkFlip 22s steps(1,end) infinite}
.ml-walker .mini-pet{width:100%;height:100%}.ml-walker .mini-pet svg,.ml-walker .mini-pet img{width:100%;height:100%}
.ml-walker.eating :is(.ml-walk-x,.ml-walk-flip){animation-play-state:paused}
@keyframes mlWalkX{0%{transform:translateX(8px)}50%{transform:translateX(calc(100vw - 100px))}100%{transform:translateX(8px)}}
@keyframes mlWalkFlip{0%{transform:none}50%{transform:scaleX(-1)}}
.ml-walker .diner-food{position:absolute;bottom:22px;width:40px;height:40px;margin-left:-20px;z-index:2;animation:mlFoodFall .7s cubic-bezier(.5,0,.6,1.4) both,food-bites 1.6s steps(4,end) 1.1s forwards}
.ml-walker .diner-pop{position:absolute;top:-28px;bottom:auto;transform:translateX(-50%)}
@keyframes mlFoodFall{from{transform:translateY(-75vh) rotate(-30deg)}to{transform:none}}
[hidden] .ml-walker,.meal-card[hidden] .ml-walker{display:none}
@media(prefers-reduced-motion:reduce){.ml-walk-x,.ml-walk-flip{animation:none}.ml-walker .diner-food{animation:none}.dp-food{animation:none}}
.ml-walker.on{display:block}body.egg-waiting .ml-walker,body:has(dialog[open]) .ml-walker{display:none}
body:has(.ml-walker.on) main{padding-bottom:110px}
html body dialog#plate-week{background:none!important;box-shadow:none!important;border:0!important}html body dialog#plate-week::backdrop{background:#0b0a1166!important;-webkit-backdrop-filter:blur(2px)!important;backdrop-filter:blur(2px)!important}

/* Today's XP in the notch (Sophia, 2026-10-26): a star with today's total; tapped, the notch opens into the day's XP
   history like a Live Activity. The notch is black in day and night mode, so the history is black in both too. */
.topbar .mode-pill .xp-today{order:-1;display:inline-flex;align-items:center;gap:4px;height:26px;margin:0 2px 0 4px;padding:0 9px;border:0;border-radius:99px;background:#ffffff12;color:#ffbf47;font:900 12px/1 Nunito,sans-serif;cursor:pointer;white-space:nowrap}
.topbar .mode-pill .xp-today i{font-style:normal;font-size:11px;text-shadow:0 0 8px #ffbf4799}
.topbar .mode-pill .xp-today:focus-visible{outline:2px solid #ffbf47;outline-offset:1px}
.xp-history{position:fixed;user-select:none;-webkit-user-select:none;left:50%;z-index:400;transform:translateX(-50%);width:min(340px,calc(100vw - 24px));max-height:min(460px,calc(100dvh - 90px));display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:#000;color:#f5efe2;box-shadow:0 14px 40px #0009,0 0 0 1px #ffffff14;font-family:Nunito,sans-serif;touch-action:none}
.xp-history>*{animation:xphIn .3s ease-out .18s both}
.xp-history.closing>*{opacity:0;transition:opacity .1s;animation:none}
.xph-head{display:flex;align-items:center;gap:10px;padding:14px 14px 10px 16px}
.xph-head .xp-toast-star{width:24px;height:24px;flex:none}
.xph-head>span:nth-child(2){display:grid;flex:1;min-width:0}
.xph-head small{font-size:9px;font-weight:800;letter-spacing:1.2px;color:#9a958c}
.xph-head b{font:900 20px/1.1 Nunito,sans-serif;color:#ffbf47;text-shadow:0 0 12px #ffbf4766}
/* A plain cross drawn from two lines: it turns in from a plus when the panel opens and spins away when it closes. */
.xph-x{position:relative;width:32px;height:32px;border:0;background:none;color:#9a958c;cursor:pointer;padding:0;flex:none}
.xph-x i,.xph-x i::before{position:absolute;left:50%;top:50%;width:16px;height:2px;margin:-1px 0 0 -8px;border-radius:2px;background:currentColor}
.xph-x i{transform:rotate(45deg);animation:xphX .5s cubic-bezier(.2,1.5,.4,1) .15s both}
.xph-x i::before{content:'';left:0;margin:-1px 0 0;transform:rotate(90deg)}
.xph-x:hover,.xph-x:focus-visible{color:#f5efe2}
.xph-x:active i{scale:.8}
.xph-x.spin i{animation:xphXout .3s ease-in forwards}
.xp-history.closing>.xph-head{transition:opacity .1s}
@keyframes xphX{from{transform:rotate(-90deg) scale(.4);opacity:0}}
@keyframes xphXout{to{transform:rotate(225deg) scale(.3);opacity:0}}
.xph-list{touch-action:pan-y;list-style:none;margin:0;padding:2px 12px 6px 14px;overflow-y:auto;display:grid;gap:2px}
.xph-list li{position:relative;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:10px;padding:9px 2px;animation:xphRow .35s ease-out calc(.22s + var(--i) * .05s) both}
.xph-list li:not(:last-child)::after{content:'';position:absolute;left:10px;top:30px;bottom:-12px;width:1px;background:#ffffff1f}
.xph-list i{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:900;color:#ffbf47;background:#ffbf471f;box-shadow:inset 0 0 0 1px #ffbf4755}
.xph-list span{font-size:14px;font-weight:700;min-width:0;overflow-wrap:anywhere}
.xph-list small{display:block;font-size:11px;font-weight:600;color:#8d887f}
.xph-list b{font-size:14px;font-weight:900;color:#ffbf47;font-variant-numeric:tabular-nums}
.xph-empty{margin:0;padding:6px 18px 12px;font-size:14px;color:#b7b1a6}
.xph-foot{margin:0;padding:10px 16px 14px;border-top:1px solid #ffffff14;font-size:12px;font-weight:700;color:#9a958c}
@keyframes xphIn{from{opacity:0}}
@keyframes xphRow{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){.xp-history>*,.xph-list li{animation:none}}
/* Week on a plate, plate first (Sophia 2026-10-26): the plate is the page. Spin it sideways to flip to top foods,
   nutrients and insights; drag the food about (it bounces back if it leaves the plate); the Pettö strolls on it. */
.pw-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:max(16px,env(safe-area-inset-top)) 12px max(18px,env(safe-area-inset-bottom))}
.pw-scene{width:min(540px,96vw,68dvh);flex:none;perspective:1400px}
.pw-plate{background:none;box-shadow:none}
.pw-dish{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 58%,#ece3d3 59% 62%,#fffaf2 63% 96%,#e8decd 97% 100%);box-shadow:0 30px 60px #000a,inset 0 -10px 24px #0000001c,inset 0 6px 14px #fff;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.pw-face{position:absolute;inset:0;border-radius:50%}
.pw-face.off{visibility:hidden}
.pw-face:not(.pw-front){display:flex;flex-direction:column;align-items:center;justify-content:center;padding:15% 15.5%;color:#2a2230;text-align:center}
.pw-face[hidden]{display:none}
.pw-face .pw-h{flex:none;margin:0 0 9px;color:#b07a2a;font-size:10px}
.pw-face .pw-top{width:100%;gap:4px}
.pw-face .pw-top li{grid-template-columns:26px 1fr auto;gap:8px;padding:3px 10px 3px 3px;background:#2a22300b}
.pw-face .pw-top li:first-child{background:linear-gradient(90deg,#ffd27a66,#2a22300b)}
.pw-face .pw-top li span{width:26px;height:26px;background:#fff;box-shadow:0 1px 3px #0002}.pw-face .pw-top .food-sprite{width:19px;height:19px}
.pw-face .pw-top b{font-size:12px;color:#2a2230;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.pw-face .pw-top small{color:#b07a2a}
.pw-face .pw-days{margin:10px 0 0;gap:4px}.pw-face .pw-days i{width:24px;height:24px;font-size:10px}
.pw-face .pw-macros{width:100%;padding:0;background:none;box-shadow:none;gap:11px}
.pw-face .pw-macro{grid-template-columns:50px 1fr auto;gap:8px}
.pw-face .pw-macro small{color:#2a2230b3}.pw-face .pw-macro span{background:#2a223017}.pw-face .pw-macro b{font-size:12px;color:#2a2230}
.pw-scroll{width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:6px 2px 14px;-webkit-mask-image:linear-gradient(transparent,#000 6%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 6%,#000 86%,transparent)}
.pw-face .pw-tips{gap:6px}.pw-face .pw-tips li{padding:9px 11px 9px 30px;background:#2a22300b;font-size:12px;line-height:1.4}.pw-face .pw-tips li::before{left:11px;top:9px;color:#e0a53c}
.pw-face .pw-note{margin:10px 2px 0;color:#2a223080;font-size:9.5px}
.pw-pet{left:37%;top:56%;right:auto;bottom:auto;width:26%;z-index:3;transform:none;pointer-events:none}
.pw-pet-flip{width:100%;height:100%}.pw-pet-flip :is(svg,img){display:block;width:100%;height:100%;overflow:visible}
.plate-week.play .pw-pet{animation:pwFade .5s ease 2.4s forwards,pwWander 16s ease-in-out 2.9s infinite}
.plate-week.play .pw-pet-flip{animation:pwWanderFlip 16s steps(1,end) 2.9s infinite}
@keyframes pwWander{0%,100%{left:37%;top:56%}25%{left:15%;top:52%}50%{left:37%;top:63%}75%{left:59%;top:52%}}
@keyframes pwWanderFlip{0%{transform:scaleX(-1)}25%{transform:none}75%{transform:scaleX(-1)}}
.pw-food{touch-action:none;cursor:grab}
.pw-food.held{z-index:6;cursor:grabbing;filter:drop-shadow(0 16px 10px #0004)}.pw-food.held .food-sprite{transform:scale(calc(var(--k) * 1.22))}
.pw-food .food-sprite{transition:transform .2s ease}
.pw-food.back{transition:left .6s cubic-bezier(.3,1.7,.5,1),top .6s cubic-bezier(.3,1.7,.5,1)}
.pw-dots{display:flex;gap:7px;margin-top:22px;opacity:0}
.pw-dots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#fbf4e666;transition:width .25s ease,background .25s ease;cursor:pointer}
.pw-dots button[aria-selected="true"]{width:24px;background:#ffd27a}
.plate-week .pw-hint{margin:12px 0 0;opacity:0}.plate-week .pw-hint::before{display:none}
.plate-week .pw-done{margin-top:14px;opacity:0}
.plate-week.play .pw-dots{animation:pwFade .5s ease 2.6s forwards}
.plate-week.play .pw-hint{animation:pwHint .5s ease 3s forwards}
.plate-week.play .pw-done{animation:pwFade .5s ease 3.2s forwards}
@media(prefers-reduced-motion:reduce){.plate-week.play :is(.pw-dots,.pw-done,.pw-pet,.pw-pet-flip){animation:none;opacity:1}}

/* Weekly plates: a sushi conveyor belt (Sophia 2026-10-26): a low black belt lying on its side with a metal rim,
   coloured sushi plates under clear lids. */
.plates-page{margin-top:20px;padding:22px 16px 20px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#29252b,#18191e 48%,#101114 85%);color:#f8f5ed}
.plates-page .section-head h3{margin:0;font-size:22px;color:#f8f5ed}.plates-page .eyebrow{color:#ffd27a}
.plates-count{font:900 14px Nunito,sans-serif;color:#ffd27a}
.plates-sub{margin:8px 2px 14px;font-size:12.5px;line-height:1.45;color:#f8f5edb3}
.pl-belt{position:relative;width:100%;max-width:560px;height:250px;margin:0 auto;touch-action:manipulation}
.pl-track{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.pl-track path{fill:none;stroke-linejoin:round}
.pl-rim{stroke:#8d939c;stroke-width:74;filter:drop-shadow(0 8px 12px #000b)}
.pl-rim-shine{stroke:#d9dde3;stroke-width:70}
.pl-rail{stroke:#121214;stroke-width:58}
.pl-slats{stroke:#2a2b30;stroke-width:56;stroke-dasharray:2 12;animation:plSlats linear infinite}
.pl-belt.hold .pl-slats,.pl-belt.hold .pl-plate{animation-play-state:paused}
@keyframes plSlats{to{stroke-dashoffset:-14}}
.pl-counter{position:absolute;left:74px;right:74px;top:74px;bottom:74px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;background:linear-gradient(180deg,#c98b52,#a86a3a 60%,#8e5630);box-shadow:inset 0 2px 0 #ffffff40,inset 0 -6px 16px #0000004d,0 0 0 3px #5b3a22;text-align:left;padding:4px 14px}
.pl-counter b{font:900 24px/1 Nunito,sans-serif;color:#fff6e4;text-shadow:0 2px 0 #0003;white-space:nowrap}
.pl-counter small{max-width:96px;font-size:9.5px;font-weight:800;line-height:1.25;color:#fff6e4cc}
.pl-pet{flex:none;height:88%;aspect-ratio:1}.pl-pet :is(svg,img){display:block;width:100%;height:100%;overflow:visible}
.pl-plates{position:absolute;inset:0}
.pl-plate{position:absolute;left:0;top:0;width:56px;height:56px;padding:0;border:0;background:none;color:#2a2230;offset-path:var(--path);offset-rotate:0deg;offset-anchor:50% 50%;animation:plRun linear infinite;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pl-dish{position:absolute;inset:0;display:flex;flex-wrap:wrap;align-content:center;justify-content:center;padding:11px 8px;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 50%,#ece4d6 51% 56%,var(--rim,#e0524f) 57% 88%,color-mix(in srgb,var(--rim,#e0524f) 70%,#000) 89%);box-shadow:0 5px 8px #000a}
.pl-dish .food-sprite{width:17px;height:17px}
.pl-lid{position:absolute;left:3px;right:3px;top:-6px;bottom:6px;border-radius:50% 50% 46% 46%;background:radial-gradient(ellipse at 34% 26%,#ffffffd9 0 9%,#ffffff40 10% 30%,#ffffff14 55%,#ffffff2e 80%,#ffffff59);box-shadow:inset 0 0 0 1.5px #ffffff73,0 2px 4px #0003;transform-origin:20% 90%;transition:transform .55s cubic-bezier(.3,1.4,.5,1),opacity .45s ease .1s;pointer-events:none}
.pl-lid::before{content:"";position:absolute;left:50%;top:-5px;width:12px;height:8px;margin-left:-6px;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#fff,#cfd4da);box-shadow:0 1px 2px #0004}
.pl-plate.open .pl-lid{transform:translate(-14px,-34px) rotate(-38deg);opacity:0}
.pl-plate.open .pl-dish{animation:plPop .5s ease .25s}
@keyframes plPop{50%{transform:scale(1.15)}}
.pl-plate small{position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);padding:1px 6px;border-radius:99px;background:#2a2230;color:#ffd27a;font:900 8.5px 'DM Sans',sans-serif;white-space:nowrap;z-index:2}
.pl-plate.new .pl-dish{box-shadow:0 0 0 2.5px #ffd27a,0 0 14px #ffd27a,0 5px 8px #000a}
.pl-plate.ghost .pl-dish{background:radial-gradient(circle,#ffffff22 0 56%,#ffffff12 57%);box-shadow:none;border:2px dashed #ffffff40}
@keyframes plRun{from{offset-distance:0%}to{offset-distance:100%}}
@media(max-width:380px){.pl-counter small{display:none}}
@media(prefers-reduced-motion:reduce){.pl-slats,.pl-plate{animation-play-state:paused}.pl-lid{transition:none}}
/* Turning flat (Sophia: rotate, not flip): the shadows stay put on the plate's spot, the dish turns, and a ring of
   little dots on the rim shows it going round. */
.pw-plate{border-radius:50%;box-shadow:0 30px 60px #000a}
.pw-plate::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 -10px 24px #0000001c,inset 0 6px 14px #fff;pointer-events:none;z-index:4}
.pw-dish{box-shadow:none}
.pw-dish::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,#e6d9c4 0 2.2deg,transparent 2.2deg 12deg);-webkit-mask:radial-gradient(circle,transparent 0 80.5%,#000 81% 85%,transparent 85.5%);mask:radial-gradient(circle,transparent 0 80.5%,#000 81% 85%,transparent 85.5%);pointer-events:none}
.pw-dish .pw-face{opacity:var(--fade,1)}
.pw-dish{touch-action:pan-y}
.plate-week .pw-dish{touch-action:none}

/* The Meals plate's + (Sophia 2026-10-26): a round + in the middle that turns round into an ×, and the numbers and
   nutrients under the plate that it shows and folds away. The food on the plate is loose (dpPlate in script.js). */
.dp-foods{transform-origin:50% 50%}
.dp-food{touch-action:none;cursor:grab}.dp-food.held{z-index:30!important;cursor:grabbing;filter:drop-shadow(0 10px 6px #0004)}
.dp-food.back{transition:left .6s cubic-bezier(.3,1.7,.5,1),top .6s cubic-bezier(.3,1.7,.5,1)}
.dp-plus{position:absolute;left:50%;top:50%;z-index:25;width:21%;aspect-ratio:1;margin:0;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#ffd98a,#f5b94e);box-shadow:0 4px 10px #0000004d,inset 0 2px 0 #ffffff80,inset 0 -3px 0 #c98b2a;cursor:pointer;transition:transform .6s cubic-bezier(.3,1.5,.5,1),background .3s;-webkit-tap-highlight-color:transparent}
.dp-plus i{position:absolute;left:50%;top:50%;width:46%;height:11%;border-radius:9px;background:#5a3a12;transform:translate(-50%,-50%);transition:transform .6s cubic-bezier(.3,1.5,.5,1)}
.dp-plus i+i{transform:translate(-50%,-50%) rotate(90deg)}
.dp-plus[aria-expanded="true"]{transform:translate(-50%,-50%) rotate(225deg);background:linear-gradient(180deg,#fff2d6,#f1d9a6)}
.dp-plus:active{scale:.92}
.dp-wrap:not(.has-food) .dp-mid{transform:translateY(-34%)}
.dp-more{display:flex;flex-direction:column;gap:12px;max-height:0;margin-top:-12px;opacity:0;overflow:hidden;transform:translateY(-14px);transition:max-height .55s cubic-bezier(.3,1,.4,1),opacity .35s ease,transform .45s ease,margin .45s ease}
.dp-open .dp-more{max-height:900px;margin-top:0;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.dp-plus,.dp-plus i,.dp-more{transition:none}}
.dp-food .food-sprite{transform:rotate(calc(-1 * var(--turn,0deg)))}
/* Minimal + / × (Sophia: no big button): just two thin lines in the middle of the plate. */
.dp-plus{width:13%;background:none;box-shadow:none}
.dp-plus i{width:62%;height:7%;background:#6a5a4c;border-radius:4px}
.dp-plus[aria-expanded="true"]{background:none}
/* The middle of the belt is just the page (Sophia: no wooden counter): your Pettö with a small count. */
.pl-counter{background:none;box-shadow:none;gap:8px;padding:0}
.pl-counter b{font-size:15px;color:#ffd27a;text-shadow:none}
.pl-counter small{font-size:9.5px;color:#f8f5ed99}
.pl-pet{height:96%}
/* Thin middle, no Pettö in it (Sophia): the belt runs close round a narrow gap; the count sits under the belt. */
.pl-belt{height:184px;margin-bottom:34px}
.pl-pet{display:none}
.pl-counter{top:auto;bottom:-30px;left:0;right:0;height:auto;border-radius:0;justify-content:center;gap:6px}
.pl-counter small{max-width:none}
/* Cute belt details (Sophia 2026-10-26). */
.pl-bolts{stroke:#f4f6f9;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 24;filter:drop-shadow(0 .5px 0 #0006)}
.pl-roller{animation:plRoll linear infinite}
.pl-roller circle{fill:#d9dde3;stroke:#8d939c;stroke-width:2}.pl-roller path{stroke:#8d939c;stroke-width:2;stroke-linecap:round}
@keyframes plRoll{to{transform:rotate(360deg)}}
.pl-belt.hold .pl-roller{animation-play-state:paused}
.pl-dish{animation:plBob 1.6s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.37s)}
@keyframes plBob{50%{transform:translateY(-2.5px) rotate(-2deg)}}
.pl-plate .pl-lid::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 35%,#ffffffb3 47%,transparent 58%);background-size:260% 100%;background-position:120% 0;animation:plGlint 4.5s ease-in-out infinite;animation-delay:calc(var(--i,0) * -.9s)}
@keyframes plGlint{0%,62%{background-position:120% 0}86%,100%{background-position:-60% 0}}
.pl-plate:not(.ghost)::before,.pl-plate:not(.ghost)::after{content:"";position:absolute;left:44%;top:-4px;width:7px;height:7px;border-radius:50%;background:#ffffffb0;filter:blur(.6px);opacity:0;animation:plSteam 2.6s ease-out infinite;animation-delay:calc(var(--i,0) * -.6s);pointer-events:none;z-index:3}
.pl-plate:not(.ghost)::after{left:58%;width:5px;height:5px;animation-delay:calc(var(--i,0) * -.6s - 1.3s)}
@keyframes plSteam{0%{opacity:0;transform:translateY(0) scale(.6)}25%{opacity:.85}100%{opacity:0;transform:translateY(-22px) translateX(4px) scale(1.4)}}
.pl-plate.open::before,.pl-plate.open::after{animation:none;opacity:0}
.pl-twinkle{position:absolute;color:#ffd27a;font-size:15px;text-shadow:0 0 8px #ffd27a;opacity:0;animation:pwTwinkle 2.6s ease-in-out infinite;pointer-events:none}
.pl-twinkle.t1{left:-2px;top:6%}.pl-twinkle.t2{right:2px;top:-10px;font-size:19px;animation-delay:.7s}.pl-twinkle.t3{right:-4px;bottom:16%;animation-delay:1.4s}.pl-twinkle.t4{left:10%;bottom:-12px;font-size:12px;animation-delay:2s}
@media(prefers-reduced-motion:reduce){.pl-roller,.pl-dish,.pl-lid::after,.pl-plate::before,.pl-plate::after,.pl-twinkle{animation:none}}
/* A little 3D without tilting (Sophia): the rim has a thick side and a shine, the belt sits sunk in, and the plates
   stand up off it with their own shadows. Rims level up with the streak. */
.pl-3d{position:absolute;inset:0}
.pl-up{position:absolute;inset:0}
.pl-rim{stroke:#9aa1ab;filter:drop-shadow(0 3px 0 #6d737c) drop-shadow(0 3px 0 #4d5259) drop-shadow(0 10px 12px #000c)}
.pl-rim-shine{stroke:url(#pl-steel)}
.pl-rail{stroke:#0d0d0f}
.pl-slats{stroke:#303139}
.pl-belt-shade{stroke:url(#pl-sink);stroke-width:58;fill:none}
.pl-bolts{stroke-width:4.4;stroke-dasharray:0 22}
.pl-roller circle{fill:#ffc2d1;stroke:#fff;stroke-width:2.5}.pl-roller path{stroke:#fff;stroke-width:2.5}
.pl-dish{box-shadow:0 2px 0 color-mix(in srgb,var(--rim) 55%,#000),0 4px 0 color-mix(in srgb,var(--rim) 35%,#000),0 9px 10px #000c}
.pl-plate.tier-5 .pl-dish{background:radial-gradient(circle,#fffdf8 0 50%,#ece4d6 51% 56%,transparent 57%),linear-gradient(135deg,#fff3b0,#e8b234 35%,#b8861c 60%,#ffe58a 85%)}
.pl-plate.tier-6 .pl-dish{background:radial-gradient(circle,#fffdf8 0 50%,#ece4d6 51% 56%,transparent 57%),conic-gradient(#ff8fa3,#ffc36b,#fff07a,#7fe3a0,#7cc4ff,#b49bff,#ff8fa3)}
.pl-plate.tier-6 .pl-dish::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 12px #fff8,0 0 0 1.5px #fff9;animation:pwPulse 1.8s ease-in-out infinite}
.pl-tiers-h{margin:10px 0 8px;font-size:10px;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:#f8f5ed99;text-align:center}
.pl-tiers{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin:0;padding:0;text-align:center}
.pl-tiers li{display:grid;justify-items:center;gap:2px;opacity:.38;filter:grayscale(.7)}
.pl-tiers li.got{opacity:1;filter:none}
.pl-tiers span{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#fffdf8 0 48%,var(--rim) 50% 88%,color-mix(in srgb,var(--rim) 70%,#000) 90%);box-shadow:0 2px 0 color-mix(in srgb,var(--rim) 45%,#000),0 4px 6px #0008}
.pl-tiers .tier-5 span{background:radial-gradient(circle,#fffdf8 0 48%,transparent 50%),linear-gradient(135deg,#fff3b0,#e8b234 35%,#b8861c 60%,#ffe58a 85%)}
.pl-tiers .tier-6 span{background:radial-gradient(circle,#fffdf8 0 48%,transparent 50%),conic-gradient(#ff8fa3,#ffc36b,#fff07a,#7fe3a0,#7cc4ff,#b49bff,#ff8fa3)}
.pl-tiers b{font:900 10px Nunito,sans-serif;color:#f8f5ed}.pl-tiers small{font-size:8.5px;font-weight:800;color:#f8f5ed80}
/* The black band as a 3D belt (Sophia): rounded across its width (darker at the edges, a soft sheen down the middle)
   with raised slats, each a dark gap and a lit front edge. */
.pl-rail{stroke:#08080a;stroke-width:58}
.pl-rail-mid{stroke:#131317;stroke-width:46}
.pl-rail-top{stroke:#1d1e23;stroke-width:26}
.pl-slats{stroke:#000;stroke-width:56;stroke-dasharray:2.5 11.5;stroke-opacity:.9}
.pl-slats.lit{stroke:#4a4c55;stroke-width:52;stroke-dasharray:1.2 12.8;stroke-dashoffset:-2.6;stroke-opacity:.85}
.pl-slats.lit{animation-name:plSlatsLit}
@keyframes plSlatsLit{from{stroke-dashoffset:-2.6}to{stroke-dashoffset:-16.6}}
/* Rubbery (Sophia): soft matte rubber, slats as soft rounded ridges, a blurred sheen down the middle. */
.pl-rail{stroke:#121316}
.pl-rail-mid{stroke:#1a1b1f;stroke-width:44;filter:url(#pl-softer)}
.pl-rail-top{stroke:#2a2b31;stroke-width:16;stroke-opacity:.8;filter:url(#pl-softer)}
.pl-slats{stroke:#050506;stroke-width:52;stroke-dasharray:3 11;stroke-opacity:.75;filter:url(#pl-soft)}
.pl-slats.lit{stroke:#3a3c44;stroke-width:48;stroke-dasharray:3 11;stroke-opacity:.55;filter:url(#pl-soft)}

/* The Pettö lives on the Meals plate (Sophia 2026-10-26): it strolls to and fro across the lower half, in front of
   the food and under the +, and eats right there on the plate when you feed it. */
.dp-plate .ml-walker{display:block!important;position:absolute;left:10%;right:10%;top:auto;bottom:12%;height:44%;z-index:22;pointer-events:none}
.dp-plate .ml-walk-x{width:auto;height:100%;aspect-ratio:1;bottom:0;animation:dpWalk 16s linear infinite}
.dp-plate .ml-walk-flip{animation:dpWalkFlip 16s steps(1,end) infinite}
@keyframes dpWalk{0%{left:0}50%{left:45%}100%{left:0}}
@keyframes dpWalkFlip{0%{transform:none}50%{transform:scaleX(-1)}}
.dp-plate .ml-walker .diner-food{bottom:4%;width:34%;height:auto;aspect-ratio:1;margin-left:-17%;animation:dpFoodFall .6s cubic-bezier(.5,0,.6,1.4) both,food-bites 1.6s steps(4,end) 1.1s forwards}
@keyframes dpFoodFall{from{transform:translateY(-160%) scale(1.3);opacity:0}30%{opacity:1}to{transform:none}}
.dp-plate .ml-walker .diner-pop{top:-34%;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.dp-plate .ml-walk-x,.dp-plate .ml-walk-flip{animation:none}.dp-plate .ml-walk-x{left:27%}}

/* Rubbery 3D belt, stronger (Sophia 2026-10-26): deep shadow where the band runs under the rims, a soft gloss stripe
   with a glint riding round, and tighter slats at the bends as the rubber bunches round the rollers. */
.pl-sink{fill:none;stroke:#000;stroke-width:12;stroke-opacity:.85;filter:url(#pl-softer)}
.pl-gloss{fill:none;stroke:#fff;stroke-width:9;stroke-opacity:.09;filter:url(#pl-softer)}
.pl-gloss.sharp{stroke-width:1.6;stroke-opacity:.16;filter:url(#pl-soft)}
.pl-glint{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-opacity:.28;filter:url(#pl-soft);animation:plGlint linear infinite}
@keyframes plGlint{from{stroke-dashoffset:0}to{stroke-dashoffset:calc(-1 * var(--len, 0px))}}
.pl-squash{fill:none;stroke:#000;stroke-width:50;stroke-dasharray:1.5 5.5;stroke-opacity:.45;filter:url(#pl-soft);animation:plSquash linear infinite}
@keyframes plSquash{to{stroke-dashoffset:-7}}
.pl-belt.hold :is(.pl-glint,.pl-squash){animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pl-glint,.pl-squash{animation:none}}

/* Rubber belt like Sophia's reference (2026-10-26): matte charcoal rubber with raised chevron treads riding round,
   between matte metal rims for contrast. The earlier slats, gloss and glint are off. */
.pl-slats,.pl-squash,.pl-gloss,.pl-glint{display:none}
.pl-rail{stroke:#2a2c30}.pl-rail-mid{stroke:#34363b;stroke-width:46;filter:url(#pl-softer)}.pl-rail-top{display:none}
.pl-sink{stroke-width:10;stroke-opacity:.9}
.pl-treads{position:absolute;inset:0;filter:drop-shadow(0 1.2px 0 #000c)}
.pl-tread{position:absolute;left:0;top:0;width:8px;height:44px;offset-path:var(--path);offset-rotate:auto;offset-anchor:50% 50%;animation:plRun linear infinite;
  background:linear-gradient(90deg,#16171a 0 25%,#3c3f45 60%,#53565d);clip-path:polygon(0 0,42% 0,100% 50%,42% 100%,0 100%,58% 50%)}
.pl-belt.hold .pl-tread{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.pl-tread{animation-play-state:paused}}
.pl-rim{stroke:#80868f;filter:drop-shadow(0 2px 0 #5c616a) drop-shadow(0 8px 12px #000c)}
.pl-rim-shine{stroke:url(#pl-matte)}
.pl-lip{fill:none;stroke:#000;stroke-width:2.6;stroke-opacity:.75}
.pl-edge{fill:none;stroke:#f2f4f6;stroke-width:1.2;stroke-opacity:.55}
.pl-bolts{stroke:#8a9099;filter:drop-shadow(0 .6px 0 #fff9)}

/* The plate dropping onto the belt as Week on a plate closes. */
.pl-fly{position:fixed;z-index:2147482000;pointer-events:none;border-radius:50%;transform-origin:50% 50%;will-change:transform}
.pl-fly .pl-dish{position:absolute;inset:0;border-radius:50%;display:flex;align-items:center;justify-content:center;gap:2%;padding:16%;
  background:radial-gradient(circle,#fffdf8 0 52%,var(--rim) 54% 72%,color-mix(in srgb,var(--rim) 70%,#000) 74% 100%);box-shadow:0 14px 26px #000a}
.pl-fly .pl-dish .food-sprite{width:30%;height:auto;aspect-ratio:1}
.pl-fly.tier-6 .pl-dish{background:radial-gradient(circle,#fffdf8 0 52%,transparent 54%),conic-gradient(#f29bb5,#e8b234,#35a866,#3f86e0,#b07be8,#f29bb5)}
.pl-plate.landed .pl-up{animation:plLand .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes plLand{0%{transform:scale(1.25)}40%{transform:scale(.88,1.1)}100%{transform:none}}

/* Activity rings on the Workouts page (Sophia, 2026-10-26): swipe the deck sideways to see Move, Exercise and Stand
   with your Pettö in the middle, and the XP each ring pays. */
.wk-rings{display:flex;flex-direction:column;gap:10px}
.rg-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.rg-head .eyebrow{color:var(--k-dim);white-space:nowrap;letter-spacing:.12em}
.rg-head b,.rg-row b{padding:4px 9px;border-radius:99px;background:#ffbf4722;color:#ffbf47;font:900 11px Nunito,sans-serif;white-space:nowrap}
.rg-head b.got,.rg-row.got b{background:#6fd49a26;color:#6fd49a}
.rg-stage{position:relative;width:min(64vw,240px);aspect-ratio:1;margin:0 auto}
.rg-stage>svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.rg-track,.rg-fill{fill:none;stroke-width:10.5}
.rg-track{opacity:.2}
.rg-fill{stroke-linecap:round;transition:stroke-dasharray .9s cubic-bezier(.2,.8,.3,1)}
.rg-lap{filter:drop-shadow(0 0 2px #000a)}
.rg-pet{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;translate:-50% -58%;display:grid;place-items:center}
.rg-pet svg,.rg-pet img{width:100%;height:100%}
.rg-stage.all .rg-pet{animation:rgHop 1.6s ease-in-out infinite}
@keyframes rgHop{0%,100%{transform:none}50%{transform:translateY(-5%)}}
.rg-rows{display:grid;gap:6px}
.rg-row{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:var(--k-chip);box-shadow:inset 0 0 0 1px var(--k-line)}
.rg-row i{width:10px;height:10px;border-radius:50%;background:var(--rc);box-shadow:0 0 8px var(--rc)}
.rg-row span{font:900 12px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--rc)}
.rg-row strong{justify-self:end;font:900 17px Nunito,sans-serif;font-variant-numeric:tabular-nums;color:var(--k-ink)}
.rg-row strong small{font-size:11px;font-weight:800;color:var(--k-dim)}
.rg-note{margin:0;font-size:11px;line-height:1.4;color:var(--k-dim)}
@media(prefers-reduced-motion:reduce){.rg-stage.all .rg-pet{animation:none}.rg-fill{transition:none}}

/* Trait mode: today's Activity rings as bars (Sophia, 2026-10-27). */
.trait-rings{display:grid;gap:8px;margin:0 0 14px;padding:14px;border-radius:18px;background:var(--mu-screen,#111);color:#eef3f1;box-shadow:inset 0 2px 8px #000000b0,0 0 0 1px #00000040}
.tr-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.tr-head .eyebrow{color:#9aa1a6}
.tr-head small{font-size:11px;font-weight:800;color:#ffbf47}
.tr-row{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:4px 10px}
.tr-row span{font:900 12px Nunito,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--rc)}
.tr-row small{font-size:12px;font-weight:700;color:#cfd5d8;font-variant-numeric:tabular-nums}
.tr-row b{font:900 11px Nunito,sans-serif;color:#ffbf47;white-space:nowrap}
.tr-row.done b{color:#6fd49a}
.tr-bar{grid-column:1/-1;display:block;height:8px;border-radius:99px;background:color-mix(in srgb,var(--rc) 20%,transparent);overflow:hidden}
.tr-bar em{display:block;height:100%;border-radius:inherit;background:var(--rc);box-shadow:0 0 8px var(--rc);transition:width .8s cubic-bezier(.2,.8,.3,1)}
/* Switching the Pettodex off turns its switch into a black hole that swallows the page (Sophia, 2026-10-27). */
.egg-dex .dex-warp{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.dex-hole{position:fixed;inset:0;width:100vw;height:100vh;z-index:61;pointer-events:none}
.egg-dex.swallowing{pointer-events:none;animation:none}
.egg-dex.swallowing #dex-exit{transition:none}
.dex-toggle.forming .dex-switch{visibility:hidden}
.dex-toggle.settle .dex-switch{animation:dexForm .6s cubic-bezier(.34,1.3,.64,1)}
.dex-toggle.settle .dex-switch::after{animation:dexKnob .6s ease}
@keyframes dexForm{0%{clip-path:circle(10px at var(--kx,12px) 50%);background:#000}45%{clip-path:circle(16px at var(--kx,12px) 50%)}100%{clip-path:circle(48px at var(--kx,12px) 50%)}}
.dex-toggle.on .dex-switch,.dex-toggle[aria-pressed="true"] .dex-switch{--kx:28px}
dialog#collection.swallowing{pointer-events:none}
@keyframes dexKnob{0%{background:#000;box-shadow:0 0 0 2px #f6efdf,0 0 12px #fff6e0}100%{}}
/* In the preview's egg-only frame the page behind is the preview itself, so the frame goes see-through as it's swallowed. */
html.dex-only.swallow-dex,html.dex-only.swallow-dex body,html.dex-only.swallow-dex dialog#collection,html.dex-only.swallow-dex dialog#collection::backdrop{background:transparent!important}
html.dex-only.swallow-dex dialog#collection{visibility:hidden}
html.dex-only.swallow-dex #egg-dex,html.dex-only.swallow-dex .dex-hole{visibility:visible}
/* From the menu, the incubator stays out of sight while the Pettodex pours out of the hole over the swallowed page. */
html.hole-in body > .dex-hole{position:fixed;z-index:2147483000}
html.hole-in dialog#collection,html.hole-in dialog#collection::backdrop{background:transparent!important;box-shadow:none!important}
html.hole-in dialog#collection > :not(#egg-dex):not(.dex-hole){visibility:hidden}
/* The menu's Pettodex bubble: black, with a cream rim like the black hole, and an egg that changes colour (Sophia, 2026-10-27). */
.md-orb.dex-orb .md-ball{background:#000;border-color:#f6efdf40;box-shadow:0 0 0 2px #000,0 0 18px #fff6e033,inset 0 0 12px #fff6e014}
.md-orb.dex-orb .md-ball svg{width:52%;height:52%;overflow:visible}
.dex-orb .dex-orb-egg{stroke-width:1.1;transform-origin:12px 18.8px;transition:fill .6s}
.dex-orb .dex-orb-shine{stroke:#fff;stroke-width:1.2;opacity:.75;fill:none}
@keyframes mdEggBob{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
html:not([data-mode="dark"]) .md-orb.dex-orb .md-ball{background:#000!important}
/* The same black Pettodex button in the bar along the top and in the quick button picker (Sophia, 2026-10-27). */
html body .page-tabs a.dex-orb{background:#000;border-color:#f6efdf40;color:#f6efdf;box-shadow:0 0 14px #fff6e026}
.page-tabs a.dex-orb svg{width:21px;height:21px;overflow:visible}
html body .quick-grid button.dex-orb .md-ball{background:#000!important;border-color:#f6efdf40!important}
.quick-grid button.dex-orb .md-ball svg{overflow:visible}
/* The top bar's black Pettodex button: the egg sits in the middle of the round button and a little bigger (Sophia,
   2026-10-27), and it's where the black hole goes back to when the Pettodex was opened from it. */
html body .page-tabs a.dex-orb:not([aria-current="page"]){gap:0;justify-content:center;padding:0!important}
html body .page-tabs a.dex-orb:not([aria-current="page"]) span{display:none}
html body .page-tabs a.dex-orb svg{width:24px!important;height:24px!important;translate:0 1px}
.page-tabs a.dex-orb.forming svg{visibility:hidden}
.page-tabs a.dex-orb.settle svg{animation:dexOrbPop .6s cubic-bezier(.34,1.5,.64,1)}
@keyframes dexOrbPop{0%{scale:.3}60%{scale:1.15}100%{scale:1}}
.trading-pet img.trading-adult-pose{display:block;width:76%;height:76%;max-width:155px;max-height:118px;object-fit:contain;animation:trading-adult-breathe 3.5s linear infinite;transform-origin:50% 95%}
@keyframes trading-adult-breathe{0%,50%,100%{transform:scale(1.025,.98)}25%,75%{transform:scale(.99,1.01)}}
@media(prefers-reduced-motion:reduce){.trading-pet img.trading-adult-pose{animation:none}}
.trading-card-main[data-stage="newborn"] .trading-pet svg,.trading-stack .trading-card-back[data-stage="newborn"] .trading-pet svg{transform:scale(.64);transform-origin:50% 82%}
/* Scrolling the incubator (Sophia, 2026-10-27: "laggy ... to my touch and dragging around inside"): the egg cards no longer
   scroll in a box of their own inside the scrolling incubator, so one drag always moves the whole thing; and while it
   scrolls, the floating ticket, lamp and LEDs hold still, so the phone isn't redrawing the ticket's shadows every frame. */
dialog#collection .egg-grid{max-height:none;overflow:visible}
dialog#collection.scrolling :not(#egg-dex, #egg-dex *){animation-play-state:paused!important}
.egg-cell.still,.egg-cell.still *{animation-play-state:paused!important}
/* A class rather than :has(), which made the phone restyle the whole page on every move of the egg field. */
html.dex-open :not(#egg-dex, #egg-dex *){animation-play-state:paused!important}
/* Hold to reveal (Sophia, 2026-10-27): the level bar tucks away under your picture and slides out from under it when
   you press and hold (or when XP comes in). Tucked, it is moved back behind the picture and clipped at the picture's
   middle, so it seems to come out of it. The ring round your picture fills towards the next level. */
html body .topbar .me-cluster{position:relative;--tuck:18px}
html body .topbar .me-cluster .xp-chip{clip-path:inset(-60px -60px -60px 0);transform-origin:left center;transition:transform .52s cubic-bezier(.32,.72,0,1),clip-path .52s cubic-bezier(.32,.72,0,1),scale .52s cubic-bezier(.32,.72,0,1)}
html body .topbar .me-cluster.bar-in .xp-chip{transform:translateX(calc(-100% + var(--tuck)));clip-path:inset(-60px -60px -60px calc(100% - var(--tuck)));pointer-events:none}
html body .topbar .me-cluster .avatar{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
html body .topbar .me-cluster .avatar.holding{transform:scale(.9);transition:transform .42s ease-out}
html body .topbar .me-cluster .avatar{box-shadow:0 0 12px color-mix(in srgb,var(--aura,#7ce8ff) 40%,transparent)!important}
.me-ring{position:absolute;z-index:2;left:-4px;top:50%;width:58px;height:58px;transform:translateY(-50%);pointer-events:none;overflow:visible}
.me-ring circle{fill:none;stroke-width:3.4}
.me-ring .mr-track{stroke:color-mix(in srgb,var(--aura,#7ce8ff) 22%,transparent)}
html:not([data-mode="dark"]) .me-ring .mr-track{stroke:color-mix(in srgb,var(--aura,#7ce8ff) 30%,#0000001f)}
.me-ring .mr-fill{stroke:color-mix(in srgb,var(--aura,#7ce8ff) 75%,#fff);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .6s cubic-bezier(.3,.8,.3,1),stroke .4s;filter:drop-shadow(0 0 2px color-mix(in srgb,var(--aura,#7ce8ff) 70%,transparent))}
.topbar .me-cluster .avatar.holding~.me-ring,.topbar .me-cluster:has(.avatar.holding) .me-ring{transform:translateY(-50%) scale(.9);transition:transform .42s ease-out}
.me-ring{transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
@media(max-width:430px){.me-ring{width:54px;height:54px}}
@media(prefers-reduced-motion:reduce){html body .topbar .me-cluster .xp-chip,.me-ring .mr-fill{transition:none}}

/* Birth year for the 13+ age limit (2026-11-01): sign-up "You" step and the terms check. */
.age-field{display:flex;flex-direction:column;gap:6px;margin:14px 0 2px;font-size:13px;font-weight:800;text-align:left}
.age-field small{font-weight:600;opacity:.6}
.age-field input{width:100%;padding:12px 16px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:999px;background:color-mix(in srgb,currentColor 6%,transparent);color:inherit;font:inherit;font-size:15px;font-weight:600}
.age-field input:focus{outline:none;border-color:currentColor}
.age-field .age-no{font-style:normal;font-weight:700;color:#ff9e8f}
/* The notch sits in the true middle of the phone header (Sophia, 2026-11-01): the tucked level bar no longer takes room
   in the first column, and the notch slides right with the bar only when the open bar needs the space. */
@media(max-width:430px){html body .topbar{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}}
html body .topbar .mode-pill{transition:translate .52s cubic-bezier(.32,.72,0,1),min-width .52s cubic-bezier(.32,.72,0,1)}
@media(prefers-reduced-motion:reduce){html body .topbar .mode-pill{transition:none}}
/* Meal log boxes (Sophia 2026-11-02): pick Breakfast, Lunch, Dinner or Snacks & Drinks for the next food, and when it
   was eaten; the Diary shows the day in those four boxes with the time beside each food. */
.ml-box{display:grid;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:18px;background:var(--mu-deep,#f3efe7);color:var(--mu-ink,inherit)}
.ml-box-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.ml-box-label,.ml-when{font-size:12px;font-weight:800;opacity:.75}
.ml-box-row button{padding:7px 12px;border:0;border-radius:99px;background:#8881;color:inherit;font:inherit;font-size:13px;font-weight:800}
.ml-box-row button[aria-pressed="true"]{background:#ff9a73;color:#fff}
.ml-when{display:flex;align-items:center;gap:8px}
.ml-when input{padding:5px 8px;border:1px solid #8884;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:14px}
.ml-box-note{font-size:11px;opacity:.6}
.meal-box{padding:6px 0 4px;border-bottom:1px dashed #8884}
.meal-box:last-child{border-bottom:0}
.meal-box>header{display:flex;align-items:center;gap:8px;padding:4px 0}
.meal-box>header h4{margin:0;font:900 15px Nunito,sans-serif}
.meal-box>header small{flex:1;font-size:12px;opacity:.65}
.meal-box-add{padding:4px 10px;border:0;border-radius:99px;background:#ff9a7333;color:inherit;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.meal-box .diet-tick{width:20px;height:20px}
.meal-box.done .diet-tick{background:#f7c948;border-color:#f7c948}
.meal-box.done .diet-tick::after{content:'';width:8px;height:4px;border:solid #3a2f12;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.meal-box .meal-item:last-child{border-bottom:0}
.meal-item .meal-time{display:inline-block;padding:0;margin-top:2px;border:0;background:none;color:inherit;font:inherit;font-size:11px;font-weight:800;opacity:.75;cursor:pointer}
.meal-time-input{margin-top:2px;padding:2px 6px;border:1px solid #8884;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:12px}

/* Egg ticket reel (Sophia 2026-11-02): full screen like the Pettodex. The incubator drops its dome, slide and scroll while
   the reel shows, so the reel is never boxed inside it, and the incubator doesn't show through while the reel fades in. */
dialog#collection.ticket-on,dialog#collection:has(#ticket-reel: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!important;transform:none!important;background:#101114}
dialog#collection.ticket-on>:not(#ticket-reel){visibility:hidden}
dialog#collection.ticket-on #ticket-reel{position:fixed;inset:0;animation:none}
dialog#collection.ticket-on #ticket-reel:not([hidden]){display:flex}
/* Skip a meal you didn't eat (Sophia 2026-11-02): counts as done for the meals XP. */
.meal-box-skip{padding:4px 10px;border:0;border-radius:99px;background:#8881;color:inherit;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.meal-box.skipped .diet-tick{background:#8886;border-color:#8886}
.meal-box.skipped .diet-tick::after{content:'–';font-size:13px;font-weight:900;line-height:1}
.meal-box.skipped h4{opacity:.6}

/* Scan card: what happened, right under the scan buttons, and a way on when a barcode isn't in the database (2026-11-02). */
.cu-card .scan-note{margin:4px 0 8px;font-size:12px;font-weight:700}.cu-card .scan-note[hidden]{display:none}.scan-search{display:block;width:100%;margin:0 0 10px;padding:11px 14px;border:1px solid var(--line,#e5e9df);border-radius:14px;background:transparent;color:inherit;font:800 13px Nunito,sans-serif;cursor:pointer}.scan-search[hidden]{display:none}

/* Diary: press and hold a food, drag it onto another meal box (2026-11-02). */
.meal-box .meal-item{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.meal-box .meal-item.dragging{opacity:.35}
.meal-ghost{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;display:flex;align-items:center;gap:10px;max-width:70vw;padding:6px 16px 6px 6px;border-radius:999px;background:#fff;color:#2b2b2b;font:800 15px Nunito,sans-serif;box-shadow:0 14px 34px #0005;scale:1.05}.meal-ghost b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meal-ghost .food-art{flex:none}
[data-mode="dark"] .meal-ghost{background:#2a2a2e;color:#f4efe6}
.meal-box.drop-here{border-radius:16px;outline:2px dashed var(--pc,#f5b94e);outline-offset:2px;background:color-mix(in srgb,var(--pc,#f5b94e) 12%,transparent)}
html.meal-dragging,html.meal-dragging body{touch-action:none;overscroll-behavior:none;cursor:grabbing}
.meal-move-tip{margin:10px 0 2px;font-size:11px;opacity:.6;text-align:center}
/* Portion picker for scanned foods, in Type it in and in Edit (2026-11-02): chips in a row, the amount box beside its unit. */
.cu-amount .cu-amount-chips{flex-direction:row}
.cu-amount .cu-amount-chips button{display:inline-block;width:auto;flex:0 0 auto;margin:0;padding:8px 13px;white-space:nowrap}
.cu-amount .cu-amount-n{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px}
.cu-amount .cu-amount-n>span{flex-basis:100%}
.cu-amount .cu-amount-n input,#meal-form .cu-amount .cu-amount-n input{width:96px;flex:0 0 96px;margin:0;display:inline-block}
.cu-amount .cu-amount-n small{font-size:13px}

/* Egg hatch and grow-up screens (Sophia 2026-11-03: "the bottom of the screen is showing the website"). On iPhone Safari
   a fixed full-screen layer stops at the toolbar's edge, so the page behind showed through the strip under the toolbar
   and the home bar. A black skirt below the screen (a shadow offset downwards, so it slides away with the screen when you
   swipe it home) and a black page edge cover that strip, and the menu handle can't be grabbed through it. */
.hatch-reveal{box-shadow:0 50vh 0 0 #000}
html:has(body.hatch-open),body.hatch-open{background:#000;overscroll-behavior:none}
body.hatch-open :is(.menu-bulge,.menu-lava,.menu-drop){visibility:hidden;pointer-events:none}
/* Notifications app on the phone screen (Sophia, 2026-11-04): one switch per kind. */
.phone-notify .ps-list{display:grid;gap:8px}
.ps-notify>span:nth-child(2){display:grid;gap:2px;line-height:1.25}
.ps-notify small{font-size:12px;font-weight:600;color:var(--ph-dim)}
.ps-notify .ps-icon{font-size:15px}
.ps-icon.ps-grow{background:linear-gradient(160deg,#ffe6a8,#f2a93b)}
.ps-icon.ps-food{background:linear-gradient(160deg,#ffd0b5,#eb8f6a)}
.ps-icon.ps-sleep{background:linear-gradient(160deg,#8f8cf0,#5b5fb8)}
.ps-icon.ps-mind{background:linear-gradient(160deg,#ffc7da,#e58fb1)}
.ps-icon.ps-streaks{background:linear-gradient(160deg,#ffb38a,#e5604a)}
.ps-note{margin:12px 4px 0;font-size:12px;line-height:1.4;color:var(--ph-dim)}
.phone.app-in #phone-notify{animation:phone-app-in .38s cubic-bezier(.2,.9,.3,1) both}
/* A missed notification in the Mailbox shows what it said. */
.mb-paper .mb-body{display:block;font-size:12px;line-height:1.35;opacity:.75;margin-top:2px}
/* Missed notifications (Sophia 2026-11-04): black like the notch, the mail icon with no circle round it, no XP.
   It shows the count first, then tucks into the notch small, shaking side to side. */
.notch-mail{position:fixed;z-index:400;display:flex;align-items:center;gap:12px;padding:10px 20px 10px 16px;border:0;border-radius:26px;background:#000;color:#fff;box-shadow:0 10px 30px #0008,0 0 0 1px #ffffff12;white-space:nowrap;cursor:pointer;font:inherit;text-align:left;overflow:visible}
.notch-mail .nm-icon{position:relative;display:block;width:26px;height:26px;flex:none;color:#ffbf47}
.notch-mail .nm-icon svg,.nm-star svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px #ffbf4766)}
.notch-mail .nm-icon b{position:absolute;top:-8px;right:-10px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;background:#ff3b30;color:#fff;font-size:11px;line-height:17px;text-align:center}
.notch-mail .nm-text{display:grid;min-width:0}
.notch-mail .nm-text em{font-style:normal;font-size:14px;font-weight:700;color:#f5efe2}
.notch-mail .nm-text small{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9a958c}
.notch-mail.small{gap:0;padding:7px 14px 6px 10px;box-shadow:none;animation:nm-shake 1.6s ease-in-out infinite}
.notch-mail.small .nm-icon{width:20px;height:20px}
.notch-mail.small .nm-icon b{top:-7px;right:-9px;min-width:15px;height:15px;font-size:10px;line-height:15px}
.notch-mail.small .nm-text{display:none}
@keyframes nm-shake{0%,45%,100%{translate:0}5%{translate:-3px}10%{translate:3px}15%{translate:-3px}20%{translate:3px}25%{translate:-2px}30%{translate:2px}35%{translate:-1px}40%{translate:1px}}
@media(prefers-reduced-motion:reduce){.notch-mail.small{animation:none}}
/* The missed notifications centre reuses the XP centre's panel. */
.xph-head .nm-star{width:26px;height:26px;animation:none;color:#ffbf47}
.xph-info{margin:0;padding:0 16px 10px;font-size:12px;line-height:1.4;color:#9a958c}
.nm-list li{display:block;padding:0}
.nm-list li button{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:10px;width:100%;padding:9px 2px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.nm-list i{background:#ffffff10;box-shadow:inset 0 0 0 1px #ffffff1f;font-size:11px}
.nm-list em{display:block;font-style:normal;font-size:12px;font-weight:600;line-height:1.35;color:#cfc9be;margin-top:1px}
.nm-foot{display:flex;gap:8px;justify-content:flex-end}
.nm-foot button{border:0;border-radius:99px;padding:7px 12px;background:#ffffff14;color:#f5efe2;font:inherit;font-size:12px;font-weight:800;cursor:pointer}
.nm-foot button:last-child{background:#ffbf47;color:#2a1d05}
/* Press and hold (holdToOpen): the button sinks a little while you hold, then pops open with a buzz. */
#xp-today,.notch-mail{-webkit-touch-callout:none;user-select:none;-webkit-user-select:none;transition:transform .42s cubic-bezier(.3,.7,.4,1)}
#xp-today.holding,.notch-mail.holding{transform:scale(.92)}

/* The deck's card back is the reveal's card back, with its shimmering sheen (Sophia 2026-11-04). */
.trading-stack .trading-reverse{padding:0!important;border:0!important;background:none!important;overflow:hidden;border-radius:19px;font-size:19.6px;color:#fff6dc}
.trading-stack .trading-reverse::before,.trading-stack .trading-reverse::after{display:none!important}
.trading-stack .trading-reverse .card-back-art{position:absolute;inset:0;border-radius:inherit}
.trading-stack .trading-card-back[hidden]{display:none!important}
/* Nothing redeemed yet: an empty deck says where cards come from. */
.trading-showcase.deck-empty .trading-stage,.trading-showcase.deck-empty .trading-menu-current,.trading-showcase.deck-empty .trading-collection{display:none}
.trading-showcase.deck-empty .trading-menu-title::after{content:"Your deck is empty. Redeem your egg card above to start it.";display:block;margin-top:8px;font-size:15px;opacity:.75}

/* Sun and moon in the notch (Sophia, 2026-11-04): the day/night switch hides under a sun in dark mode and a moon in
   light mode, and slides smoothly out of it when tapped, then back under the new icon once flipped. */
.topbar .mode-pill .mode-peek{display:grid;place-items:center;flex:none;width:34px;height:32px;margin:0;padding:0;border:0;border-radius:99px;background:none;color:#f5efe2;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:width .5s cubic-bezier(.32,.72,0,1),opacity .3s ease,transform .5s cubic-bezier(.34,1.56,.64,1)}
.topbar .mode-pill .mode-peek svg{grid-area:1/1;width:19px;height:19px;transition:transform .55s cubic-bezier(.34,1.56,.64,1),opacity .3s ease}
.topbar .mode-pill .mode-peek .mp-sun{fill:#ffd46b;stroke:#ffd46b;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 4px #ffbf4766)}
.topbar .mode-pill .mode-peek .mp-moon{fill:#e9e4ff;filter:drop-shadow(0 0 4px #c9c2ff55)}
html[data-mode="dark"] .topbar .mode-pill .mode-peek .mp-moon,html:not([data-mode="dark"]) .topbar .mode-pill .mode-peek .mp-sun{opacity:0;transform:rotate(-120deg) scale(.3)}
html body .topbar .mode-pill .mode-quick{max-width:130px;overflow:hidden;transition:max-width .5s cubic-bezier(.32,.72,0,1),padding .5s cubic-bezier(.32,.72,0,1),opacity .3s ease .12s,transform .5s cubic-bezier(.34,1.56,.64,1)}
html body .topbar .mode-pill:not(.mode-open) .mode-quick{max-width:0;padding-left:0;padding-right:0;gap:0;opacity:0;transform:scale(.5);pointer-events:none;transition:max-width .45s cubic-bezier(.32,.72,0,1),padding .45s cubic-bezier(.32,.72,0,1),gap .45s,opacity .2s ease,transform .4s ease}
.topbar .mode-pill.mode-open .mode-peek{width:0;opacity:0;transform:scale(.3) rotate(90deg);pointer-events:none}
@media(prefers-reduced-motion:reduce){.topbar .mode-pill .mode-peek,.topbar .mode-pill .mode-peek svg,html body .topbar .mode-pill .mode-quick{transition:none!important}}
.topbar .mode-pill .mode-peek{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.topbar .mode-pill .mode-peek.holding svg{transform:scale(.72)!important;transition:transform .42s cubic-bezier(.32,.72,0,1)}
.topbar .mode-pill .mode-peek.nudge svg{animation:mode-peek-nudge .45s cubic-bezier(.34,1.56,.64,1)}
@keyframes mode-peek-nudge{0%,100%{rotate:0deg}30%{rotate:-14deg}65%{rotate:9deg}}
/* The colour dot folds away with the day/night switch (Sophia, 2026-11-04). */
html body .topbar .mode-pill .theme-menu{max-width:40px;transition:max-width .5s cubic-bezier(.32,.72,0,1),opacity .3s ease .12s,transform .5s cubic-bezier(.34,1.56,.64,1)}
html body .topbar .mode-pill:not(.mode-open) .theme-menu{max-width:0;opacity:0;transform:scale(.5);pointer-events:none;transition:max-width .45s cubic-bezier(.32,.72,0,1),opacity .2s ease,transform .4s ease}
html body .topbar .mode-pill:not(.mode-open) .theme-menu .theme-control{overflow:hidden}
/* The notch stays black in light mode too, whatever the Pettö colour (Sophia, 2026-11-04). */
html body header.topbar .mode-pill.mode-pill{background:#000!important;box-shadow:0 0 0 1px #ffffff14,0 4px 14px #0004!important;color:#fff!important}
html body header.topbar .mode-pill.mode-pill .mode-quick,html body header.topbar .mode-pill.mode-pill .mode-quick span{color:#f5efe2!important}
html body .topbar .mode-pill:not(.mode-open) :is(.mode-quick,.theme-menu),html body .topbar .mode-pill:not(.mode-open) :is(.mode-quick,.theme-menu) *{pointer-events:none!important}
html body .topbar .mode-pill:not(.mode-open) :is(.mode-quick,.theme-menu){margin-left:-2px!important;margin-right:0!important}
/* Holding a notch icon never highlights or selects it (Sophia 2026-11-04): no text selection, tap flash or iOS callout. */
.topbar,.topbar *,.notch-mail,.notch-mail *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.topbar ::selection,.notch-mail ::selection{background:transparent}
.topbar img,.topbar svg,.notch-mail svg{-webkit-user-drag:none}
/* The switch uses the same sun and moon as the notch button (Sophia 2026-11-04). */
.topbar .mode-pill .mode-quick .mq-icon{display:inline-grid;place-items:center;line-height:0}
.topbar .mode-pill .mode-quick .mq-icon svg{width:14px;height:14px;display:block}
.topbar .mode-pill .mode-quick .mq-sun{fill:#ffd46b;stroke:#ffd46b;stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 3px #ffbf4766)}
.topbar .mode-pill .mode-quick .mq-moon{fill:#e9e4ff;filter:drop-shadow(0 0 3px #c9c2ff55)}
/* The notch is the size of a real iPhone's Dynamic Island, 126 x 37 points (Sophia 2026-11-04), with an empty middle
   like the island's: the XP star sits at the left end and the sun or moon at the right. On phones the header is zoomed
   to .86, so the numbers are scaled up to land on the same real size. */
html body header.topbar .mode-pill.mode-pill{min-width:126px;height:37px;border-radius:99px;justify-content:flex-start;padding:0 5px 0 2px!important}
html body header.topbar .mode-pill.mode-pill .mode-peek{margin-left:auto}
@media(max-width:430px){html body header.topbar .mode-pill.mode-pill{min-width:147px;height:43px}}
/* Tucked into the notch (Sophia 2026-11-04): the mail sits in the notch's empty middle, between the XP star and the
   sun or moon, with no black box of its own. It steps aside while the day/night switch is out. */
html body header.topbar .mode-pill .notch-mail.small{position:absolute!important;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;padding:4px 6px;background:none;box-shadow:none;border-radius:0}
html body header.topbar .mode-pill.mode-open .notch-mail.small{opacity:0;pointer-events:none}

/* The phone in the site's own style (Sophia, 2026-11-04): it follows the page's light or dark mode and uses the same quiet
   buttons as the quick bar, dark rounded buttons with a thin edge and a plain cream line icon that turns solid cream when
   pressed (grey with dark icons by day). No bright colours on the buttons. */
html[data-mode="dark"] body .profile-dialog.phone{--ph-bg:#0f0f12;--ph-ink:#f5f2ea;--ph-dim:#98979e}
html:not([data-mode="dark"]) body .profile-dialog.phone{--ph-bg:#f4f2ee;--ph-ink:#1d1d1f;--ph-dim:#6e6e73}
html[data-mode="dark"] .pw-solid{background:radial-gradient(90% 50% at 14% 0%,color-mix(in srgb,var(--petto,#f5b94e) 16%,transparent),transparent 70%),#0e0e11}
html:not([data-mode="dark"]) .pw-solid{background:radial-gradient(90% 50% at 14% 0%,color-mix(in srgb,var(--petto,#f5b94e) 22%,transparent),transparent 70%),#f4f2ee}
.phone:not(.wall-light) .phone-section{color:var(--ph-dim)}
.phone:not(.wall-light) .phone-app .pa-name{color:var(--ph-ink);text-shadow:none;font-weight:700}
.phone:not(.wall-light) .phone-status{text-shadow:none}
.phone .phone-app.connected .pa-icon::after{box-shadow:0 0 0 2.5px var(--ph-bg)}
.phone .phone-app .pa-icon{border-radius:22px;transition:transform .15s,background .25s,border-color .25s}
.phone .phone-app .pa-icon svg{filter:none;transition:stroke .25s}
/* Dark. */
html[data-mode="dark"] .phone :is(.phone-widget,.phone-mini,.phone-dock){background:#141417;box-shadow:inset 0 0 0 1px #2a2a2f,0 8px 22px #0005}
html[data-mode="dark"] .phone .phone-dock{border-radius:34px}
html[data-mode="dark"] .phone .phone-app .pa-icon{background:#17171a;border:1px solid #2a2a2f;box-shadow:0 6px 16px #0006}
html[data-mode="dark"] .phone .phone-app .pa-icon svg{stroke:#d8d3c7}
html[data-mode="dark"] .phone .phone-app .pa-icon .pa-fill{fill:#d8d3c7}
html[data-mode="dark"] .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon{background:#f5f2ea;border-color:#f5f2ea;box-shadow:0 0 24px #f5f2ea22}
html[data-mode="dark"] .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon svg{stroke:#101114}
html[data-mode="dark"] .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon .pa-fill{fill:#101114}
html[data-mode="dark"] .phone .pw-avatar{background:#0b0b0d;box-shadow:0 0 0 2px #2a2a2f,0 0 0 4px color-mix(in srgb,var(--petto,#f5b94e) 60%,transparent)}
html[data-mode="dark"] .phone .pw-bar{background:#ffffff1a}
html[data-mode="dark"] .phone .pw-bar i{background:#f5f2ea;box-shadow:none}
html[data-mode="dark"] .phone .pw-sub span:first-child{color:#d8d3c7}
html[data-mode="dark"] .phone .pm-flame{background:#ffffff0f}
html[data-mode="dark"] .phone:not(.wall-light) .phone-status{background:#0f0f12ee}
html[data-mode="dark"] .phone[data-app="home"]:not(.wall-light) .phone-status{background:linear-gradient(#0e0e11f2 70%,#0e0e1100)}
/* Light. */
html:not([data-mode="dark"]) .phone :is(.phone-widget,.phone-mini,.phone-dock){background:#fff;box-shadow:inset 0 0 0 1px #eeeae2,0 6px 18px #0000000f}
html:not([data-mode="dark"]) .phone .phone-dock{border-radius:34px}
html:not([data-mode="dark"]) .phone .phone-app .pa-icon{background:#e8e8ed;border:1px solid transparent;box-shadow:none}
html:not([data-mode="dark"]) .phone .phone-app .pa-icon svg{stroke:#1d1d1f}
html:not([data-mode="dark"]) .phone .phone-app .pa-icon .pa-fill{fill:#1d1d1f}
html:not([data-mode="dark"]) .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon{background:#1d1d1f}
html:not([data-mode="dark"]) .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon svg{stroke:#fff}
html:not([data-mode="dark"]) .phone :is(.phone-app:hover,.phone-app:focus-visible,.phone-app:active) .pa-icon .pa-fill{fill:#fff}
html:not([data-mode="dark"]) .phone .pw-avatar{background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4.5px #d9d5cc,0 6px 16px #0000001f}
html:not([data-mode="dark"]) .phone .pw-bar i{background:#1d1d1f;box-shadow:none}
html:not([data-mode="dark"]) .phone .pw-sub span:first-child{color:#1d1d1f}
html:not([data-mode="dark"]) .phone:not(.wall-light) .phone-status{background:#f4f2eeee}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) .phone-status{background:linear-gradient(#f4f2eef2 70%,#f4f2ee00)}
/* Light mode: dark words on the pale screen, and no dark shading over the wallpaper. */
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) :is(.phone-status,.pw-who strong,.phone-mini b,.phone-section,.phone-app .pa-name){color:var(--ph-ink);text-shadow:none}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) :is(.pw-who small,.pw-sub,.pw-sub span:last-child,.phone-mini small,.phone-section){color:var(--ph-dim)}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) .phone-screen{background:none}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) .phone-dots i{background:#1d1d1f33}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) .phone-dots i:first-child{background:#1d1d1f}
html:not([data-mode="dark"]) .phone[data-app="home"]:not(.wall-light) .phone-home-bar::after{background:#1d1d1f}
/* Steps and streak tiles (Sophia, 2026-11-04): sunk into the screen like the streaks box on Home, with the same little pill
   label, big number and dim small words. */
.phone .phone-mini{position:relative;display:grid;align-content:start;justify-items:start;gap:6px;padding:12px 14px;border-radius:14px;text-align:left;transition:transform .15s}
.phone .phone-mini:active{transform:scale(.97)}
.phone .phone-mini .pm-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 7px;border-radius:99px;font-size:10px;font-weight:900;line-height:1}
.phone .phone-mini .pm-pill:not(:has(.pm-flame)){padding-left:10px}
.phone .phone-mini .pm-flame{display:inline-grid;place-items:center;width:12px;height:12px;border-radius:0;background:none;font-size:12px}
.phone .phone-mini .pm-flame svg{width:12px;height:12px}
.phone .phone-mini b{font:900 22px/1 Nunito,sans-serif;letter-spacing:-.6px;white-space:nowrap}
.phone .phone-mini small{font-size:11px;line-height:1.35;white-space:nowrap}
.phone .phone-mini .pm-ring{position:absolute;top:12px;right:12px;width:30px;height:30px}
.phone .phone-mini .pm-ring circle{stroke-width:7}
html[data-mode="dark"] .phone .phone-mini{background:#141517;box-shadow:inset 0 2px 4px #000000b0,inset 0 -1px 0 #ffffff10;color:#eceeef}
html[data-mode="dark"] .phone .phone-mini .pm-pill{background:linear-gradient(160deg,#25282b,#1a1c1e);color:#eceeef;box-shadow:0 1px 0 #ffffff12 inset,0 0 0 1px #00000080}
html[data-mode="dark"] .phone .phone-mini small{color:#878c91}
html:not([data-mode="dark"]) .phone .phone-mini{background:#e4e3df;box-shadow:inset 0 1px 3px #0000002b,inset 0 -1px 0 #fff;color:#26282b}
html:not([data-mode="dark"]) .phone .phone-mini .pm-pill{background:linear-gradient(160deg,#fbfbfa,#ecebe8);color:#26282b;box-shadow:0 1px 0 #fff inset,0 0 0 1px #00000012}
html:not([data-mode="dark"]) .phone .phone-mini small{color:#7b7f84}
/* The two tiles sit sunk inside one lighter card, like the streak and energy boxes on Home, with the unit after the number. */
.phone .phone-widgets{margin-top:12px;padding:12px;gap:10px;border-radius:26px}
.phone .phone-mini .pm-val{display:flex;align-items:baseline;gap:4px}
.phone .phone-mini .pm-val em{font:800 11px 'DM Sans',sans-serif;letter-spacing:0;font-style:normal}
html[data-mode="dark"] .phone .phone-widgets{background:#1a1b1e;box-shadow:inset 0 0 0 1px #ffffff0f,0 8px 22px #0005}
html[data-mode="dark"] .phone .phone-mini{background:#101113;box-shadow:inset 0 2px 5px #000000c8,inset 0 -1px 0 #ffffff12}
html[data-mode="dark"] .phone .phone-mini .pm-val em{color:#878c91}
html:not([data-mode="dark"]) .phone .phone-widgets{background:#fff;box-shadow:inset 0 0 0 1px #eeeae2,0 6px 18px #0000000f}
html:not([data-mode="dark"]) .phone .phone-mini .pm-val em{color:#7b7f84}
.phone .phone-app .pa-icon{filter:none}
/* Same look on any wallpaper (a picked colour, a room or a photo): the buttons and cards carry their own surface, and only the
   words sitting straight on the wallpaper change with it. */
html[data-mode="dark"] .phone .phone-widget :is(.pw-who strong,.pw-sub span:last-child){color:#eceeef}
html[data-mode="dark"] .phone .phone-widget :is(.pw-who small,.pw-sub){color:#98979e}
html[data-mode="dark"] .phone:not(.wall-light)[data-app="home"] :is(.phone-section,.phone-app .pa-name){text-shadow:0 1px 3px #000c}
/* Browse the menu by type or cuisine (Sophia, 2026-11-04): two rows of chips above the book, each scrolling sideways. */
.menu-cats{display:grid;gap:6px;margin:0 0 10px}.menu-cats[hidden]{display:none}
.mc-row{display:flex;align-items:center;gap:4px;overflow-x:auto;padding:4px;border-radius:99px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);scrollbar-width:none;-webkit-overflow-scrolling:touch}
.mc-row::-webkit-scrollbar{display:none}
.mc-row>span{flex:none;padding:0 6px 0 10px;font-size:9px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--mu-dim)}
.mc-row button{flex:none;display:flex;align-items:center;gap:5px;padding:7px 11px;border:0;border-radius:99px;background:none;color:var(--mu-dim);font-size:11.5px;font-weight:900;cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.mc-row button small{font-size:9.5px;font-weight:900;opacity:.65}
.mc-row button[aria-pressed="true"]{background:var(--mu-knob);color:var(--mu-ink);box-shadow:var(--mu-knob-shadow)}
.mc-row button:focus-visible{outline:2px solid #6fb2ff;outline-offset:1px}
.mb-empty{grid-column:1/-1;margin:14px 4px;font-size:12.5px;line-height:1.45;font-weight:800;color:color-mix(in srgb,var(--ink-b) 70%,transparent);text-align:center}
.mb-showing{margin:10px 4px 0;font-size:12px;font-weight:800;color:var(--ink-b);display:flex;align-items:center;justify-content:space-between;gap:8px}
.mb-showing button{border:0;border-radius:99px;padding:5px 10px;background:color-mix(in srgb,var(--pc,#f5b94e) 30%,transparent);color:inherit;font:inherit;font-size:11px;cursor:pointer}
/* Pet cases (Sophia, 2026-11-04): a case only reskins the pod's shell (colours, pattern, shading and a trim round the
   window), drawn into the pod's SVG layers by renderPodCase. The window, buttons and layout stay exactly as they are. */
.shop-item-icon .case-icon,.shop-item-icon svg[aria-label$="pod case"]{width:100%;height:100%;overflow:visible}
/* Pet case picker in the account's phone settings, and the swap animation on the pod. */
@keyframes caseSwap{0%{transform:scale(.93) rotate(-2.5deg);filter:brightness(1.5) saturate(1.3)}55%{transform:scale(1.035) rotate(1deg);filter:brightness(1.12)}100%{transform:none;filter:none}}
html body .pet-card.pd-on .pd-pod.case-swap:not(#wb){animation:caseSwap .75s cubic-bezier(.3,1.4,.5,1)}
@keyframes cpfloat{50%{transform:translateY(-5px) rotate(1.2deg)}}
@keyframes cpswap{0%{transform:scale(.7) rotate(-8deg);opacity:.4}60%{transform:scale(1.08) rotate(2deg);opacity:1}100%{transform:none}}
@keyframes cptwinkle{0%,100%{opacity:0;transform:scale(.3) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.case-picker{display:grid;gap:12px;margin-bottom:6px}
.cp-hero{position:relative;display:grid;justify-items:center;gap:3px;padding:18px 12px 14px;border-radius:24px;overflow:hidden;text-align:center;color:var(--ph-ink);background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--cp,#f5b94e) 38%,transparent),transparent 68%),color-mix(in srgb,var(--ph-ink) 6%,transparent)}
.cp-hero .cp-big{width:112px;height:134px;animation:cpfloat 4.5s ease-in-out infinite;filter:drop-shadow(0 12px 12px #0000004d)}
.cp-hero .cp-big svg{width:100%;height:100%;display:block;overflow:visible}
.cp-hero.swap .cp-big{animation:cpswap .7s cubic-bezier(.3,1.5,.5,1)}
.cp-hero b{font-size:17px;font-weight:900;margin-top:4px}
.cp-hero span{max-width:270px;font-size:12px;line-height:1.35;font-weight:700;color:var(--ph-dim)}
.cp-hero i{position:absolute;width:12px;height:12px;background:var(--cp,#f5b94e);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);opacity:0;animation:cptwinkle 2.8s ease-in-out infinite}
.cp-hero i:nth-child(1){left:20%;top:22%}.cp-hero i:nth-child(2){right:18%;top:32%;animation-delay:.9s}.cp-hero i:nth-child(3){left:30%;bottom:28%;animation-delay:1.7s}
.cp-row{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 12px;margin:0 -4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cp-row::-webkit-scrollbar{display:none}
.cp-card{flex:0 0 82px;scroll-snap-align:center;display:grid;justify-items:center;gap:3px;padding:10px 4px 8px;border:0;border-radius:18px;background:color-mix(in srgb,var(--ph-ink) 7%,transparent);color:var(--ph-ink);font:800 11px/1.15 'DM Sans',sans-serif;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
.cp-card:active{transform:scale(.94)}
.cp-card svg{width:50px;height:60px;display:block;overflow:visible}
.cp-card small{font-size:10px;font-weight:800;color:var(--ph-dim)}
.cp-card[aria-checked="true"]{box-shadow:0 0 0 2.5px var(--ph-bg,#000),0 0 0 5px #34c759}
.cp-card.cp-locked svg{filter:grayscale(.75);opacity:.5}
.cp-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cp-btn{padding:12px 10px;border:0;border-radius:16px;background:color-mix(in srgb,var(--ph-ink) 8%,transparent);color:var(--ph-ink);font:800 13px 'DM Sans',sans-serif;cursor:pointer}
.cp-btn:active{transform:scale(.96)}
.cp-note{display:block;font-size:11px;font-weight:700;color:var(--ph-dim)}
@media(prefers-reduced-motion:reduce){.cp-hero .cp-big,.cp-hero i,.cp-hero.swap .cp-big,html body .pet-card.pd-on .pd-pod.case-swap:not(#wb){animation:none}}
/* Pink Star Pop: the window's rim is a raised, bevelled edge to match the shell's rounded outline. */
html body .pet-card[data-case="case_starpop"] .pet-scene:not(#wb){border-color:#4a52d6;box-shadow:0 0 0 2px #9aa0ff,0 0 0 3.5px #272c85,0 5px 0 3.5px #272c85,0 12px 16px #00000059,inset 0 4px 9px #000000a0,inset 0 -2px 0 #ffffff40,inset 3px 0 6px #00000040}
/* The profile card on the phone's home screen opens the character editor; a little pencil on the picture says so. */
.phone #phone-me{position:relative;cursor:pointer;transition:transform .15s}
.phone #phone-me:active{transform:scale(.98)}
.phone #phone-me::after{content:"\270E";position:absolute;top:92px;left:calc(50% + 22px);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ph-ink);color:var(--ph-bg);font-size:14px;box-shadow:0 0 0 3px var(--ph-bg)}
.phone #phone-me:focus-visible{outline:2px solid var(--ph-ink);outline-offset:2px}
/* The colour picker grows out of the notch (Sophia, 2026-11-04): it is the notch itself opening up, like the Dynamic
   Island, instead of a separate box. Same black, it starts at the notch's own top edge and sits behind the dot and
   sun or moon, which stay in the top row. It unfolds from the notch's centre. */
html body header.topbar .mode-pill .theme-menu{position:static}
html body header.topbar .mode-pill .theme-panel:not(#wb){
  --mu-panel:#000;--mu-deep:#16161a;--mu-ink:#f5efe2;--mu-dim:#9a958c;--mu-rim:#ffffff14;
  --mu-groove:#2a2a30;--mu-groove-in:inset 0 1px 3px #000c,inset 0 -1px 0 #ffffff0d;--mu-tick:#ffffff2e;
  --mu-knob:#2b2b31;--mu-knob-shadow:0 6px 12px #000a,0 1px 2px #0008;
  position:absolute!important;z-index:-1!important;top:0!important;left:50%!important;right:auto!important;
  width:min(300px,calc(100vw - 32px))!important;transform:translateX(-50%)!important;
  padding:46px 16px 16px!important;border-radius:28px!important;background:#000!important;color:var(--mu-ink)!important;
  box-shadow:0 0 0 1px #ffffff14,0 18px 36px #0006!important;
  transform-origin:50% 0;animation:notch-drop .42s cubic-bezier(.34,1.3,.5,1) both}
@media(max-width:430px){html body header.topbar .mode-pill .theme-panel:not(#wb){padding-top:54px!important}}
html body header.topbar .mode-pill .theme-panel:not(#wb) .theme-swatches [aria-checked="true"]{background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--swatch) 28%,transparent))!important}
@keyframes notch-drop{from{opacity:0;scale:.42 .16}50%{opacity:1}to{opacity:1;scale:1 1}}
@media(prefers-reduced-motion:reduce){html body header.topbar .mode-pill .theme-panel:not(#wb){animation:none}}
/* While your finger is still down from the hold, the switch and colour dot ignore touches (Sophia, 2026-11-04). */
html body header.topbar .mode-pill.mode-settling :is(.mode-quick,.theme-menu),html body header.topbar .mode-pill.mode-settling :is(.mode-quick,.theme-menu) *{pointer-events:none!important}
/* The notch's XP star shows no number and is the same size as the sun and moon (Sophia, 2026-11-04). The total is
   still in the star's label and in the history it opens. */
html body header.topbar .mode-pill .xp-today{justify-content:center;gap:0;width:34px;height:32px;margin:0 0 0 2px;padding:0;background:none;border-radius:99px}
html body header.topbar .mode-pill .xp-today b{display:none}
html body header.topbar .mode-pill .xp-today i{display:block;font-size:19px;line-height:1;text-shadow:0 0 4px #ffbf4766}

/* Wallet in the notch (Sophia, 2026-11-04): the points chip leaves the header and becomes a coin in the notch, next to
   the XP star. Tapped, the notch opens into a wallet overview with a button to the shop. The notch is wider to fit it. */
html body .topbar .point-chip{display:none!important}
html body header.topbar .mode-pill.mode-pill{min-width:176px}
@media(max-width:430px){html body header.topbar .mode-pill.mode-pill{min-width:206px}}
.topbar .mode-pill .notch-wallet{order:-1;display:grid;place-items:center;flex:none;width:34px;height:32px;margin:0;padding:0;border:0;border-radius:99px;background:none;color:#ffbf47;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .42s cubic-bezier(.3,.7,.4,1)}
.topbar .mode-pill .notch-wallet.holding{transform:scale(.92)}
.notch-wallet svg,.xpw-coin svg{width:22px;height:22px;display:block;filter:drop-shadow(0 0 4px #ffbf4766)}
.notch-wallet svg circle:first-child,.xpw-coin svg circle:first-child{fill:#ffbf47}
.notch-wallet .nw-rim,.xpw-coin .nw-rim{fill:none;stroke:#b87d12;stroke-width:1.4}
.notch-wallet .nw-spark,.xpw-coin .nw-spark{fill:#b87d12}
.xpw-coin{display:grid;place-items:center;width:24px;height:24px;flex:none}
.xpw-coin svg{width:24px;height:24px}
.xpw-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:4px 14px 12px}
.xpw-stats span{display:grid;gap:2px;justify-items:center;padding:10px 4px;border-radius:16px;background:#ffffff12;text-align:center}
.xpw-stats b{font:900 17px/1.1 Nunito,sans-serif;color:#f5efe2}
.xpw-stats small{font-size:9px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:#9a958c}
.xpw-actions{display:grid;gap:8px;padding:0 14px 16px}
.xpw-actions button{height:44px;border:0;border-radius:99px;font:900 14px/1 Nunito,sans-serif;cursor:pointer}
.xpw-shop{background:#ffbf47;color:#2b1c00}
.xpw-more{background:#ffffff14;color:#f5efe2}
.xpw-actions button:active{transform:scale(.97)}

/* Wallet in the notch's style (Sophia, 2026-11-04): a cute Tama coin beside the Tama number, and the Tama and tickets
   window is black like the notch, with no striped awning. */
.xpw-stats .tama-coin{width:20px;height:20px;margin-right:5px;vertical-align:-4px;filter:drop-shadow(0 0 5px #f6c64f66)}
html body dialog.wallet-dialog{background:#000!important;color:#f5efe2!important;border-radius:28px;box-shadow:0 18px 44px #000a,0 0 0 1px #ffffff14!important}
html body .wallet-dialog::backdrop{background:#000a}
html body .wallet-dialog .stall-awning,html body .wallet-dialog .stall-counter{display:none!important}
html body .wallet-dialog .stall-body{border-image:none!important;border:0!important;padding:22px 16px 18px}
html body .wallet-dialog .eyebrow,html body .wallet-dialog .wallet-note{color:#9a958c!important}
html body .wallet-dialog h2{color:#f5efe2!important}
html body .wallet-dialog .close,html body .wallet-dialog .wallet-title-row .close.inc-close{background:none!important;color:#9a958c!important;box-shadow:none!important}
html body .wallet-dialog .inset-panel{background:#ffffff12!important;box-shadow:none!important;border:0!important;color:#f5efe2!important}
html body .wallet-dialog .inset-panel strong,html body .wallet-dialog .inset-panel b{color:#f5efe2!important}
html body .wallet-dialog .inset-panel small{color:#9a958c!important}
html body .wallet-dialog .wallet-grid .shop-item,html body .wallet-dialog .wallet-ticket{background:#ffffff12!important;border:0!important;box-shadow:none!important;color:#f5efe2!important}
html body .wallet-dialog .wallet-buy{background:#ffbf47!important;color:#2b1c00!important;box-shadow:none!important}
html body .wallet-dialog .wallet-buy:disabled{opacity:.4}
html body .wallet-dialog input{background:#16161a!important;color:#f5efe2!important;border:1px solid #ffffff1f!important;box-shadow:none!important}
/* The notch's wallet icon is the same ✦ as the old points chip (Sophia, 2026-11-04). */
.topbar .mode-pill .notch-wallet{color:#f5efe2}
.notch-wallet i,.xpw-coin i{font-style:normal;font-size:19px;line-height:1;text-shadow:0 0 6px #ffffff40}
.xpw-coin{color:#f5efe2}.xpw-coin i{font-size:22px}

/* Keyboard focus (2026-11-04 accessibility pass): the dashboard knob and the mailbox stage had their outline removed, so
   keyboard users could not see where they were. */
.wb-knob:focus-visible,.mb-stage:focus-visible,.food-edit:focus-visible{outline:3px solid var(--acc,#6fb2ff);outline-offset:3px}

/* Walk page containers in the home page's soft Pettö look (Sophia, 2026-11-04): tinted rounded panels, pale pill tags with a
   lit dot, round pastel buttons with a pale ring. Only the containers and buttons; the map is left exactly as it was. */
.walk-page{--wk-acc:var(--petto,#f5b94e);--wk-accd:var(--petto-deep,#a76c1c)}
html:not([data-mode="dark"]) .walk-page{--wk-ink:color-mix(in srgb,var(--wk-accd) 60%,#1f1d22);--wk-dim:color-mix(in srgb,var(--wk-accd) 65%,#8a8a8a);
  --wk-panel:color-mix(in srgb,var(--wk-acc) 24%,#f4f6f3);--wk-pill:linear-gradient(180deg,#fff,color-mix(in srgb,var(--wk-acc) 14%,#fff));
  --wk-line:color-mix(in srgb,var(--wk-accd) 18%,transparent);--wk-shadow:0 8px 20px color-mix(in srgb,var(--wk-accd) 22%,transparent)}
html[data-mode="dark"] .walk-page{--wk-ink:#eceeef;--wk-dim:#9aa0a5;--wk-panel:#1c1e21;--wk-pill:linear-gradient(180deg,#2b2e32,#222427);
  --wk-line:#ffffff14;--wk-shadow:0 8px 20px #0008}
.walk-card,html[data-mode="dark"] .walk-card,.walk-page:not(.off-page) .walk-card,html[data-mode="dark"] .walk-page:not(.off-page) .walk-card,
.walk-history,html[data-mode="dark"] .walk-history{background:var(--wk-panel)!important;color:var(--wk-ink);border:1px solid var(--wk-line);border-radius:26px;box-shadow:var(--wk-shadow)}
.walk-card h3,html[data-mode="dark"] .walk-card h3{color:var(--wk-ink);font:800 17px 'DM Sans',sans-serif}
.walk-where,.walk-note,.walk-note a{color:var(--wk-dim);opacity:1}
.walk-history h3{font:800 11px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--wk-dim)}
.walk-history li{border-color:var(--wk-line)}
/* Pale pill tag with a lit dot, like "Feeling excited". */
.walk-state,.walk-state.live{display:inline-flex;align-items:center;gap:8px;background:var(--wk-pill);color:var(--wk-ink);font:700 12.5px 'DM Sans',sans-serif;padding:7px 14px;
  box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line),0 3px 8px color-mix(in srgb,var(--wk-accd) 12%,transparent)}
.walk-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--wk-acc);flex:none}
.walk-state.live::before{box-shadow:0 0 8px var(--wk-acc);animation:wkdot 1.6s ease-in-out infinite}
@keyframes wkdot{50%{opacity:.45}}
/* Stats: three soft tiles. */
.walk-stats{background:none;box-shadow:none;gap:8px;padding:0}
.walk-stats>div,html[data-mode="dark"] .walk-stats>div,.walk-page:not(.off-page) .walk-card .walk-stats>div,html.petto-theme:not([data-mode="dark"]) .walk-page .walk-stats>div{
  background:var(--wk-pill)!important;border:0!important;border-radius:16px;padding:9px 4px;box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line)}
.walk-stats small,.walk-page:not(.off-page) .walk-card .walk-stats small{color:var(--wk-dim);opacity:1;font:700 10.5px 'DM Sans',sans-serif}
.walk-stats strong,.walk-page:not(.off-page) .walk-card .walk-stats strong{color:var(--wk-ink);font:800 16px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
/* Top chips: white pills with a round pastel icon button. */
.walk-chip,.walk-chip.share,.walk-chip.history,.walk-chip.eggs,html[data-mode="dark"] .walk-chip{background:var(--wk-pill);color:var(--wk-ink);font:700 13px 'DM Sans',sans-serif;
  padding:6px 15px 6px 6px;box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line),var(--wk-shadow)}
.walk-chip span,html[data-mode="dark"] .walk-chip span{width:26px;height:26px;border-radius:50%;background:var(--wk-acc);color:#fff;font-size:12px;box-shadow:0 0 0 3px color-mix(in srgb,var(--wk-acc) 28%,#fff0)}
.walk-chip.history span{background:#8fb8f0}.walk-chip.eggs span{background:#f4a98a}
.walk-chip.share[aria-pressed="true"],html[data-mode="dark"] .walk-chip.share[aria-pressed="true"]{background:var(--wk-acc);color:#fff;box-shadow:inset 0 1px 0 #fff6,0 6px 16px color-mix(in srgb,var(--wk-acc) 45%,#0000)}
.walk-chip.share[aria-pressed="true"] span{background:#fff;color:var(--wk-accd);box-shadow:none}
/* Main button: a saturated pastel pill with a pale ring. */
.walk-go,.walk-go.primary,html .walk-go.primary{background:var(--wk-acc);color:#fff;border:0;border-radius:99px;padding:14px;font:800 15px 'DM Sans',sans-serif;
  text-shadow:0 1px 2px color-mix(in srgb,var(--wk-accd) 55%,#0000);box-shadow:inset 0 1px 0 #ffffff80,0 0 0 4px color-mix(in srgb,var(--wk-acc) 25%,#fff0),0 8px 18px color-mix(in srgb,var(--wk-acc) 40%,#0000)}
.walk-go.stop,html .walk-go.primary.stop,html[data-mode="dark"] .walk-go.primary.stop{background:var(--wk-pill);color:var(--wk-ink);text-shadow:none;box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line),var(--wk-shadow)}
.walk-pause{border-radius:99px;background:var(--wk-pill)!important;color:var(--wk-ink)!important;font:700 13px 'DM Sans',sans-serif;box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line)}
.walk-recentre,html[data-mode="dark"] .walk-recentre{background:var(--wk-pill);color:var(--wk-accd);box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line),var(--wk-shadow)}
html[data-mode="dark"] .walk-recentre{color:var(--wk-acc)}
@media(prefers-reduced-motion:reduce){.walk-state.live::before{animation:none}}
/* Walk buttons, take two: gradient Pettö pill, dark text so it reads on any Pettö colour, round play button inside. */
html:not(#a):not(#b) body .walk-card .walk-go:not(.stop){display:block;text-align:center;
  background:linear-gradient(180deg,color-mix(in srgb,var(--wk-acc) 85%,#fff),color-mix(in srgb,var(--wk-acc) 80%,var(--wk-accd)))!important;color:color-mix(in srgb,var(--wk-accd) 40%,#14161a)!important;text-shadow:none;
  border:0;border-radius:99px;padding:11px 16px;font:800 15px 'DM Sans',sans-serif;
  box-shadow:inset 0 1px 0 #ffffffb3,0 0 0 4px color-mix(in srgb,var(--wk-acc) 24%,#fff0),0 8px 18px color-mix(in srgb,var(--wk-acc) 42%,#0000)}
html:not(#a):not(#b) body .walk-card .walk-go:not(.stop)::before{content:"▶";display:inline-grid;vertical-align:middle;margin-right:10px;place-items:center;width:26px;height:26px;border-radius:50%;background:#fff;
  color:var(--wk-accd);font-size:10px;padding-left:2px;box-shadow:0 2px 6px color-mix(in srgb,var(--wk-accd) 30%,#0000)}
html:not(#a):not(#b) body .walk-card .walk-go.stop{display:block;text-align:center;background:var(--wk-pill)!important;color:var(--wk-ink)!important;
  box-shadow:inset 0 1px 0 #fff9,0 0 0 1px var(--wk-line),var(--wk-shadow);padding:11px 16px}
html:not(#a):not(#b) body .walk-card .walk-go.stop::before{content:"■";display:inline-grid;vertical-align:middle;margin-right:10px;place-items:center;width:26px;height:26px;border-radius:50%;background:#e5646e;color:#fff;font-size:9px}
html:not(#a):not(#b) body .walk-card .walk-go:active{transform:scale(.97)}
html:not(#a):not(#b) body .walk-card .walk-pause{display:inline-flex;align-items:center;justify-content:center;border-radius:99px;padding:11px 16px;background:var(--wk-pill)!important;color:var(--wk-ink)!important}

/* Pictures in the handbook (Sophia 2026-11-04): small diagrams that show how things work, drawn from the app's real colours. */
.bpv{margin:2px 0 4px;color:#3a3340;font-size:.86em}
[data-mode="dark"] .bpv{color:#ece6dc}
.bpv-row,.bpv-grid,.bpv-stages{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:center;gap:6px}
.bpv-grid{display:grid;grid-template-columns:1fr 1fr}
.bpv-tile{flex:1 1 0;min-width:56px;overflow-wrap:anywhere;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 4px 7px;border-radius:12px;text-align:center;line-height:1.2;background:color-mix(in srgb,var(--book,#f5b94e) 15%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--book-line,#a76c1c) 22%,transparent)}
.bpv-tile b{font-size:.92em;font-weight:800}
.bpv-tile small{font-size:.78em;opacity:.75;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap}
.bpv-tile .bp-icon{width:1.9em;height:1.9em;margin:0}
.bpv-tile small .bp-icon{width:1.3em;height:1.3em}
.bpv-grid .bpv-tile{flex-direction:column}
.bpv-grid .bpv-tile>span:first-child{display:flex;align-items:center;justify-content:center;gap:4px}
.bpv-grid .bpv-tile .bpv-arrow{display:none}
.bpv-how{display:inline-flex;gap:2px}
.bpv-face{font-size:1.6em;line-height:1}
.bpv-arrow{align-self:center;font-style:normal;font-weight:800;opacity:.45;font-size:1.3em}
.bpv-stages{flex-wrap:nowrap;gap:2px;align-items:center}
.bpv-stage{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 1px;border-radius:10px;background:color-mix(in srgb,var(--book,#f5b94e) 15%,transparent);text-align:center;line-height:1.15}
.bpv-stage span{font-size:1.5em}
.bpv-stage b{font-size:.74em;font-weight:800}
.bpv-stage small{font-size:.72em;opacity:.75}
.bpv-notch{display:flex;align-items:center;justify-content:space-around;width:78%;margin:2px auto 0;padding:7px 12px;border-radius:99px;background:#0b0b0d;box-shadow:0 2px 6px #0004}
.bpv-notch .bp-icon{margin:0}
.bpv-caps{display:flex;justify-content:space-around;gap:4px;margin-top:5px;text-align:center}
.bpv-caps small{flex:1;font-size:.78em;line-height:1.2;opacity:.8}
.bpv-caps.single small{flex:none}
.bpv-bar{display:flex;align-items:center;gap:8px;font-size:.92em}
.bpv-bar i{flex:1;height:12px;border-radius:99px;overflow:hidden;background:color-mix(in srgb,var(--book-line,#a76c1c) 20%,transparent);box-shadow:inset 0 1px 2px #0003}
.bpv-bar u{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--book,#f5b94e),color-mix(in srgb,var(--book-line,#a76c1c) 70%,var(--book,#f5b94e)))}
.bpv-plate{width:34px;height:34px;border-radius:50%;background:#fffdf7;border:5px solid var(--rim);box-shadow:0 1px 3px #0003,inset 0 0 0 2px #0000000d}
.bpv-lives{display:flex;justify-content:center;gap:8px}
.bpv-lives .bp-icon{width:2.2em;height:2.2em;margin:0}
.bpv-lives .off{opacity:.3;filter:grayscale(1)}
.bpv-list{display:grid;gap:5px}
.bpv-switch{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:color-mix(in srgb,var(--book,#f5b94e) 15%,transparent)}
.bpv-switch span{font-size:1.2em;line-height:1}
.bpv-switch b{flex:1;font-weight:700}
.bpv-switch i{position:relative;flex:none;width:34px;height:20px;border-radius:99px;background:#34c759}
.bpv-switch i::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0004}
.bpv-tile small .bp-icon svg{stroke-width:2.2}
@media(prefers-reduced-motion:no-preference){.book-page.popping .bpv-stage,.book-page.popping .bpv-tile{animation:bp-fade .45s ease-out both}}
.bpv-apps .bpv-tile{flex:1 1 28%;max-width:31%}

/* Places on the walk map (Sophia, 2026-11-04), tidied: one flat pill style for the top chips and filters (hairline ring, no
   drop shadow, so nothing is clipped into a band), simple round pins with a clean label, and a card in the walk card's style. */
/* Menu: one row of three equal pills and a small egg count; the filter row is compact, only the chosen filter shows its name. */
.walk-top .walk-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:8px;overflow:visible;padding:0}
.walk-top .walk-chip{justify-content:flex-start;min-width:0}
.walk-top .walk-chip.eggs{padding:0 12px 0 5px;cursor:default}
.places-filters{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0;margin-top:8px;-webkit-mask-image:linear-gradient(90deg,#000 90%,#0000);mask-image:linear-gradient(90deg,#000 90%,#0000)}
.places-filters::-webkit-scrollbar{display:none}
.places-filters[hidden]{display:none}
/* Same flat pill for every chip and filter. */
.walk-top .walk-chip,.walk-top .walk-chip.share,.walk-top .walk-chip.history,.walk-top .walk-chip.eggs,.walk-top .walk-chip.places,.places-filter,.places-none{
  height:36px;box-sizing:border-box;border:0;border-radius:99px;display:flex;align-items:center;gap:8px;padding:0 14px 0 5px;
  background:var(--wk-panel,#f4f6f3);color:var(--wk-ink,#26282b);font:700 13px/1 'DM Sans',sans-serif;box-shadow:0 0 0 1px var(--wk-line,#0000001a);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.places-filter{flex:none;white-space:nowrap;gap:6px;padding:0 11px 0 10px}
.places-none{flex:none;white-space:normal;height:auto;min-height:36px;padding:8px 14px;line-height:1.25;max-width:100%}
.walk-top .walk-chip{flex:none;white-space:nowrap}
.walk-top .walk-chip span{width:26px;height:26px;border-radius:50%;box-shadow:none;font-size:12px}
.walk-chip.places span{background:#6fb2ff;color:#fff}
.places-filter span{font-size:14px;line-height:1}
.places-filter em{display:none;font-style:normal}
.places-filter[aria-pressed="true"] em{display:inline}
.places-filter b{font-weight:700;font-size:11.5px;opacity:.5}
/* On state: filled with your Pettö's colour, dark text. */
.walk-top .walk-chip.places[aria-pressed="true"],.walk-top .walk-chip.share[aria-pressed="true"],.places-filter[aria-pressed="true"]{background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c;box-shadow:none}
.walk-top .walk-chip.places[aria-pressed="true"] span,.walk-top .walk-chip.share[aria-pressed="true"] span{background:#fff;color:var(--wk-accd,#a76c1c)}
.places-filter[aria-pressed="true"] b{opacity:.65}
/* Pins: a white disc with a coloured ring, and a plain label. */
.walk-3d-pin.place{pointer-events:auto}
.walk-place{display:flex;flex-direction:column;align-items:center;gap:3px;border:0;background:none;padding:0;cursor:pointer}
.walk-place .wp-disc{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;line-height:1;background:#fff;
  box-shadow:0 0 0 3px var(--pc),0 3px 8px #00000030;transition:transform .2s}
.walk-place:active .wp-disc{transform:scale(.92)}
.walk-place small{max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 7px;border-radius:99px;background:#ffffffeb;color:#26282b;font:700 10px/1.3 'DM Sans',sans-serif}
/* The card: same panel, radius and spacing as the walk card below it. */
.place-sheet{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 236px);max-width:520px;margin-inline:auto;z-index:18;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:20px;
  background:var(--wk-panel,#f4f6f3);color:var(--wk-ink,#26282b);box-shadow:0 0 0 1px var(--wk-line,#0000001a),0 8px 20px #00000026;animation:lootpop .3s both}
.place-sheet[hidden]{display:none}
.ps-icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-size:21px;background:#fff;box-shadow:0 0 0 3px var(--pc)}
.ps-text{flex:1;min-width:0}
.ps-text .eyebrow{display:block;font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--wk-dim,#7b7f84)}
.ps-text h3{margin:4px 0 3px;font:800 16px/1.2 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ps-text p{margin:0;font:500 12.5px/1.2 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.ps-actions{flex:none;display:flex;align-items:center;gap:8px}
.ps-go{display:flex;align-items:center;height:36px;padding:0 16px;border-radius:99px;font:800 13px/1 'DM Sans',sans-serif;text-decoration:none;color:#17191c;background:var(--wk-acc,var(--petto,#f5b94e))}
.ps-close{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:0;padding:0;font-size:18px;line-height:1;background:transparent;color:var(--wk-ink,#26282b);box-shadow:0 0 0 1px var(--wk-line,#0000001a)}
@media(prefers-reduced-motion:reduce){.place-sheet{animation:none}}

/* Walk page, containers in containers (Sophia, 2026-11-04): like the home page, a bigger panel holds smaller parts, some raised
   (buttons, pills) and some sunk in (the stats readout, the filter tray, the luck groove). The top menu is one tray, not floating bits. */
.walk-page{--wk-well:color-mix(in srgb,var(--wk-acc,#f5b94e) 16%,#e3e5e1);--wk-well-shadow:inset 0 2px 5px #0000002e,inset 0 -1px 0 #ffffff99;
  --wk-raise:linear-gradient(180deg,#fff,color-mix(in srgb,var(--wk-acc,#f5b94e) 12%,#fff));--wk-raise-shadow:inset 0 1px 0 #ffffffcc,0 1px 3px #00000030}
html[data-mode="dark"] .walk-page{--wk-well:#0f1012;--wk-well-shadow:inset 0 2px 6px #000000b8,inset 0 -1px 0 #ffffff10;
  --wk-raise:linear-gradient(180deg,#2d3034,#232528);--wk-raise-shadow:inset 0 1px 0 #ffffff14,0 1px 3px #00000066}
/* The notch pill no longer sits on the menu: the menu and everything under it move down. */
body:has(.walk-page:not(.off-page)) .page-tabs{top:calc(max(env(safe-area-inset-top),10px) + 74px)}
.walk-page:not(.off-page) .walk-top{top:calc(max(env(safe-area-inset-top),10px) + 132px)}
.walk-page:not(.off-page) .walk-toast{top:calc(max(env(safe-area-inset-top),10px) + 268px)}
.walk-page:not(.off-page) .walk-history{top:calc(max(env(safe-area-inset-top),10px) + 268px)}
/* The tray. */
.walk-top{padding:0 12px}
.walk-dock{padding:8px;border-radius:24px;background:var(--wk-panel);box-shadow:0 0 0 1px var(--wk-line),0 6px 16px #00000026;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.walk-top .walk-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:6px;overflow:visible;padding:0}
.walk-top .walk-chip,.walk-top .walk-chip.share,.walk-top .walk-chip.history,.walk-top .walk-chip.places{height:34px;padding:0 10px 0 4px;gap:6px;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:12.5px}
.walk-top .walk-chip.eggs{height:34px;padding:0 11px 0 4px;gap:6px;background:var(--wk-well);box-shadow:var(--wk-well-shadow);color:var(--wk-dim,#7b7f84);font-size:12.5px;backdrop-filter:none;-webkit-backdrop-filter:none}
.walk-top .walk-chip span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;background:#8fb8f0;box-shadow:none}
.walk-top .walk-chip span svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.walk-top .walk-chip.share span{background:var(--wk-acc)}
.walk-top .walk-chip.places span{background:#5fbf9a}
.walk-top .walk-chip.eggs span{background:#f4a98a}
.walk-top .walk-chip.places[aria-pressed="true"],.walk-top .walk-chip.share[aria-pressed="true"]{background:var(--wk-acc);color:#17191c;box-shadow:inset 0 1px 0 #ffffff66,0 1px 3px #00000040}
.walk-top .walk-chip.places[aria-pressed="true"] span,.walk-top .walk-chip.share[aria-pressed="true"] span{background:#fff;color:var(--wk-accd,#a76c1c)}
/* Sunken filter tray inside the tray. */
.places-filters{margin-top:8px;padding:4px;gap:4px;border-radius:18px;background:var(--wk-well);box-shadow:var(--wk-well-shadow);-webkit-mask-image:none;mask-image:none}
.places-filter,.places-none{height:30px;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;font-size:12.5px}
.places-none{height:auto;min-height:30px;padding:6px 10px;background:none;box-shadow:none;color:var(--wk-dim,#7b7f84)}
.places-filter[aria-pressed="true"]{background:var(--wk-acc);color:#17191c;box-shadow:inset 0 1px 0 #ffffff66,0 1px 3px #00000040}
/* Walk card: stats sunk in, luck groove sunk in, button raised. */
.walk-stats,html[data-mode="dark"] .walk-stats{background:var(--wk-well);border-radius:16px;padding:4px 0;gap:0;box-shadow:var(--wk-well-shadow)}
.walk-stats>div,html[data-mode="dark"] .walk-stats>div,.walk-page:not(.off-page) .walk-card .walk-stats>div,html.petto-theme:not([data-mode="dark"]) .walk-page .walk-stats>div{background:none!important;box-shadow:none;border-radius:0;border:0!important;padding:6px 4px}
.walk-stats>div+div,.walk-page:not(.off-page) .walk-card .walk-stats>div+div{border-left:1px solid color-mix(in srgb,var(--wk-ink,#26282b) 12%,transparent)!important}
.walk-luck{margin-top:8px}
.walk-luck[hidden]{display:none}
.walk-luck span{display:flex;justify-content:space-between;align-items:baseline;font:700 12px/1 'DM Sans',sans-serif;color:var(--wk-ink,#26282b);margin:0 2px 6px}
.walk-luck small{font:500 11px/1 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.walk-luck i{display:block;height:10px;border-radius:99px;background:var(--wk-well);box-shadow:var(--wk-well-shadow);overflow:hidden}
.walk-luck b{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--wk-acc,#f5b94e) 70%,#fff),var(--wk-acc,#f5b94e));box-shadow:0 0 8px color-mix(in srgb,var(--wk-acc,#f5b94e) 60%,transparent);transition:width .8s ease}
/* Place card: icon sunk into a well, the rest raised. */
.ps-icon{background:var(--wk-well);box-shadow:var(--wk-well-shadow),0 0 0 2px var(--pc)}
.ps-close{background:var(--wk-raise);box-shadow:var(--wk-raise-shadow)}
.walk-place .wp-disc{background:#fff}
/* The Pettö-theme item rule is ID-strength, so the stats cells need the same weight to stay sunk in the well. */
html.petto-theme:not([data-mode="dark"]) #walk .walk-stats>div,html:not([data-mode="dark"]) #walk .walk-stats>div{background:none!important;border-color:transparent!important}
html:not([data-mode="dark"]) #walk .walk-stats>div+div{border-left:1px solid color-mix(in srgb,var(--wk-ink,#26282b) 12%,transparent)!important}
.walk-top .walk-chip.share span{background:var(--wk-accd,#a76c1c)}
/* Light mode: sunken parts are a deeper shade of the panel's own colour, not grey, so the card reads as one piece. */
html:not([data-mode="dark"]) .walk-page{--wk-panel:color-mix(in srgb,var(--wk-acc,#f5b94e) 24%,#f6f7f4);
  --wk-well:color-mix(in srgb,var(--wk-accd,#a76c1c) 20%,color-mix(in srgb,var(--wk-acc,#f5b94e) 24%,#f6f7f4));
  --wk-well-shadow:inset 0 2px 4px color-mix(in srgb,var(--wk-accd,#a76c1c) 35%,#0000001a),inset 0 -1px 0 #ffffffb3}
html:not([data-mode="dark"]) .walk-card,html:not([data-mode="dark"]) .walk-page:not(.off-page) .walk-card{background:var(--wk-panel)!important;backdrop-filter:none;-webkit-backdrop-filter:none}
html:not([data-mode="dark"]) .walk-stats{border:0}
html:not([data-mode="dark"]) .walk-stats small{color:color-mix(in srgb,var(--wk-accd,#a76c1c) 70%,#3a3a3a);opacity:1}
html:not([data-mode="dark"]) .walk-stats strong{color:color-mix(in srgb,var(--wk-accd,#a76c1c) 45%,#1a1a1c);text-shadow:none}
html:not([data-mode="dark"]) .walk-luck i{background:var(--wk-well)}
html:not([data-mode="dark"]) .walk-luck b{background:linear-gradient(90deg,var(--wk-accd,#a76c1c),color-mix(in srgb,var(--wk-acc,#f5b94e) 85%,var(--wk-accd,#a76c1c)));box-shadow:none}
html:not([data-mode="dark"]) .walk-state{background:var(--wk-raise);box-shadow:var(--wk-raise-shadow)}

/* Place card with details (Sophia, 2026-11-04): the head on top, and a sunken well below with how busy, opening hours and hygiene. */
.place-sheet{display:block;padding:12px;max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch}
.ps-head{display:flex;align-items:center;gap:12px;padding:0 2px}
.ps-details{margin-top:10px;padding:10px 12px;border-radius:16px;background:var(--wk-well);box-shadow:var(--wk-well-shadow);display:grid;gap:8px}
.ps-row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:start;font:500 13px/1.3 'DM Sans',sans-serif}
.ps-k{font:700 10px/1.6 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--wk-dim,#7b7f84)}
.ps-v{display:grid;gap:2px;min-width:0;color:var(--wk-ink,#26282b)}
.ps-v b{font-weight:800}
.ps-v small{font:500 11.5px/1.35 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.ps-muted{color:var(--wk-dim,#7b7f84)}
.ps-v .open{color:#2e9d62}.ps-v .shut{color:#d1564f}.ps-v .soon{color:#c98a1a}
html[data-mode="dark"] .ps-v .open{color:#5fd093}html[data-mode="dark"] .ps-v .shut{color:#ef8780}html[data-mode="dark"] .ps-v .soon{color:#f0c15a}
.ps-v .busy.l0,.ps-v .busy.l1{color:#2e9d62}.ps-v .busy.l2{color:#c98a1a}.ps-v .busy.l3{color:#d1564f}
html[data-mode="dark"] .ps-v .busy.l0,html[data-mode="dark"] .ps-v .busy.l1{color:#5fd093}html[data-mode="dark"] .ps-v .busy.l2{color:#f0c15a}html[data-mode="dark"] .ps-v .busy.l3{color:#ef8780}
.ps-bars{display:flex;align-items:flex-end;gap:3px;height:34px;padding:0 2px}
.ps-bars i{flex:1;min-width:0;border-radius:3px 3px 1px 1px;background:color-mix(in srgb,var(--wk-ink,#26282b) 16%,transparent);height:8px}
.ps-bars i.l1{height:14px}.ps-bars i.l2{height:24px;background:color-mix(in srgb,var(--wk-acc,#f5b94e) 70%,var(--wk-ink,#26282b) 10%)}.ps-bars i.l3{height:34px;background:var(--wk-acc,#f5b94e)}
.ps-bars i.now{box-shadow:0 0 0 2px var(--wk-ink,#26282b)}
.ps-axis{display:flex;justify-content:space-between;padding:0 2px;margin-top:-4px;font:600 9.5px/1 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.pill{display:inline-block;width:max-content;padding:2px 9px;border-radius:99px;font:800 12px/1.4 'DM Sans',sans-serif;color:#17191c}
.pill.green{background:#8fdcae}.pill.amber{background:#f2cf72}.pill.red{background:#f0a19c}.pill.grey{background:color-mix(in srgb,var(--wk-ink,#26282b) 18%,transparent);color:var(--wk-ink,#26282b)}
.ps-ask p{margin:0 0 8px;font:500 12.5px/1.4 'DM Sans',sans-serif;color:var(--wk-ink,#26282b)}
.ps-ask div{display:flex;gap:8px}
.ps-yes,.ps-no{height:32px;padding:0 14px;border:0;border-radius:99px;font:800 12.5px/1 'DM Sans',sans-serif}
.ps-yes{background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c}
.ps-no{background:var(--wk-raise);color:var(--wk-ink,#26282b);box-shadow:var(--wk-raise-shadow)}
.ps-link{justify-self:start;border:0;background:none;padding:0;font:700 12.5px/1.3 'DM Sans',sans-serif;color:var(--wk-accd,#a76c1c);text-decoration:underline;text-underline-offset:2px}
.ps-off{font-weight:600;font-size:11.5px;color:var(--wk-dim,#7b7f84)}
/* Tighter card, and readable colours in light mode. */
.ps-details{padding:8px 12px;gap:6px}
.ps-bars{height:28px}
.ps-bars i.l1{height:12px}.ps-bars i.l2{height:20px}.ps-bars i.l3{height:28px}
.ps-ask p{font-size:12px}
html:not([data-mode="dark"]) .ps-bars i.l2{background:color-mix(in srgb,var(--wk-accd,#a76c1c) 55%,#ffffff00)}
html:not([data-mode="dark"]) .ps-bars i.l3{background:var(--wk-accd,#a76c1c)}
html:not([data-mode="dark"]) .ps-yes{background:var(--wk-accd,#a76c1c);color:#fff}
html:not([data-mode="dark"]) .ps-go{background:var(--wk-accd,#a76c1c);color:#fff}

/* Places, next steps (Sophia, 2026-11-04): saved stars, the list, walking there, stamps. */
.ps-head .ps-close{margin-left:auto;flex:none}
.ps-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.ps-btn{display:flex;align-items:center;justify-content:center;gap:6px;height:36px;border:0;border-radius:99px;padding:0 8px;font:800 12.5px/1 'DM Sans',sans-serif;text-decoration:none;white-space:nowrap;
  background:var(--wk-raise);color:var(--wk-ink,#26282b);box-shadow:var(--wk-raise-shadow)}
.ps-btn span{font-size:13px;line-height:1}
.ps-btn.on{background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c;box-shadow:inset 0 1px 0 #ffffff66,0 1px 3px #00000040}
.ps-btn.go:not(.on){background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c;box-shadow:inset 0 1px 0 #ffffff66,0 1px 3px #00000040}
html:not([data-mode="dark"]) .ps-btn.go:not(.on),html:not([data-mode="dark"]) .ps-btn.on{background:var(--wk-accd,#a76c1c);color:#fff}
html:not([data-mode="dark"]) .ps-btn.ps-go{background:var(--wk-raise);color:var(--wk-ink,#26282b)}
.walk-place.saved .wp-disc::after{content:"★";position:absolute;right:-6px;top:-6px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font-size:10px;line-height:1;background:#f5c542;color:#6b4a00;box-shadow:0 0 0 2px #fff}
.walk-place .wp-disc{position:relative}
.walk-place.dest .wp-disc{box-shadow:0 0 0 3px var(--pc),0 0 0 8px color-mix(in srgb,var(--pc) 30%,#0000),0 3px 8px #00000030;animation:wkdest 1.8s ease-in-out infinite}
@keyframes wkdest{50%{transform:scale(1.1)}}
@media(prefers-reduced-motion:reduce){.walk-place.dest .wp-disc{animation:none}}
.walk-dest{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:7px 8px 7px 10px;border-radius:14px;background:var(--wk-well);box-shadow:var(--wk-well-shadow)}
.walk-dest[hidden]{display:none}
.wd-icon{font-size:16px;line-height:1}
.wd-text{flex:1;min-width:0;display:grid;gap:1px}
.wd-text b{font:800 13px/1.2 'DM Sans',sans-serif;color:var(--wk-ink,#26282b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wd-text small{font:500 11.5px/1.2 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.wd-x{width:28px;height:28px;border:0;border-radius:50%;padding:0;font-size:16px;line-height:1;background:var(--wk-raise);color:var(--wk-ink,#26282b);box-shadow:var(--wk-raise-shadow)}
.places-filter.list{margin-left:auto}
/* The list uses the same card as a single place. */
.places-list{position:fixed;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom) + 236px);max-width:520px;margin-inline:auto;z-index:18;padding:12px;border-radius:20px;max-height:min(60vh,420px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--wk-panel,#f4f6f3);color:var(--wk-ink,#26282b);box-shadow:0 0 0 1px var(--wk-line,#0000001a),0 8px 20px #00000026;animation:lootpop .3s both}
.places-list[hidden]{display:none}
.pl-head{display:flex;align-items:flex-start;justify-content:space-between;padding:0 2px}
.pl-head h3{margin:3px 0 0;font:800 16px/1.2 'DM Sans',sans-serif}
.pl-head .eyebrow{font:700 10px/1 'DM Sans',sans-serif;letter-spacing:.14em;color:var(--wk-dim,#7b7f84)}
.pl-goal{margin-top:10px;gap:8px}
.pl-bar{display:block;height:8px;border-radius:99px;background:color-mix(in srgb,var(--wk-ink,#26282b) 14%,transparent);overflow:hidden}
.pl-bar b{display:block;height:100%;border-radius:inherit;background:var(--wk-acc,#f5b94e)}
html:not([data-mode="dark"]) .pl-bar b{background:var(--wk-accd,#a76c1c)}
.pl-rows{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.pl-row{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:14px;padding:8px 10px;text-align:left;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);color:var(--wk-ink,#26282b)}
.pl-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:17px;background:var(--wk-well);box-shadow:var(--wk-well-shadow),0 0 0 2px var(--pc)}
.pl-text{min-width:0;display:grid;gap:2px}
.pl-text b{font:800 13.5px/1.2 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-text small{font:500 11.5px/1.2 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.pl-none{padding:10px;color:var(--wk-dim,#7b7f84);font:500 13px 'DM Sans',sans-serif}
@media(prefers-reduced-motion:reduce){.places-list{animation:none}}

/* Explore mode (Sophia, 2026-11-04): a "Search this area" pill, and numbered clusters when many places are in view. */
.places-search{position:fixed;left:50%;transform:translateX(-50%);z-index:17;height:38px;padding:0 18px;border:0;border-radius:99px;font:800 13px/1 'DM Sans',sans-serif;white-space:nowrap;
  background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c;box-shadow:inset 0 1px 0 #ffffff66,0 6px 16px #00000040;animation:lootpop .3s both}
.places-search[hidden]{display:none}
.places-search:disabled{background:var(--wk-raise);color:var(--wk-dim,#7b7f84);box-shadow:var(--wk-raise-shadow),0 6px 16px #00000030}
html:not([data-mode="dark"]) .places-search:not(:disabled){background:var(--wk-accd,#a76c1c);color:#fff}
.walk-3d-pin.place .walk-cluster{display:grid;place-items:center;width:40px;height:40px;border:0;padding:0;border-radius:50%;cursor:pointer;
  background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c;box-shadow:0 0 0 3px #fff,0 0 0 6px color-mix(in srgb,var(--wk-acc,#f5b94e) 35%,#0000),0 4px 10px #00000040;font:800 14px/1 'DM Sans',sans-serif}
html:not([data-mode="dark"]) .walk-cluster{background:var(--wk-accd,#a76c1c);color:#fff}
.walk-cluster:active{transform:scale(.92)}
@media(prefers-reduced-motion:reduce){.places-search{animation:none}}
/* Names would pile up when many places are in view, so they show from street level in. */
.walk-map.places-compact .walk-place small{display:none}

/* Where to? (Sophia, 2026-11-04): a row on the walk card above Start, and a picker with a name search. */
.walk-where-to{display:flex;align-items:center;gap:10px;width:100%;margin:8px 0 2px;padding:8px 12px 8px 10px;border:0;border-radius:14px;text-align:left;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);color:var(--wk-ink,#26282b)}
.walk-where-to[hidden]{display:none}
.walk-where-to i{margin-left:auto;font:400 22px/1 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84);font-style:normal}
.walk-where-to:active{transform:scale(.99)}
.walk-dest .wd-text,.walk-dest .wd-icon{cursor:pointer}
.pl-search{display:block;width:100%;box-sizing:border-box;height:40px;margin:10px 0 0;padding:0 14px;border:0;border-radius:99px;font:600 14px 'DM Sans',sans-serif;color:var(--wk-ink,#26282b);background:var(--wk-well);box-shadow:var(--wk-well-shadow);outline:0;-webkit-appearance:none;appearance:none}
.pl-search::placeholder{color:var(--wk-dim,#7b7f84)}
.pl-search:focus{box-shadow:var(--wk-well-shadow),0 0 0 2px var(--wk-acc,#f5b94e)}
.pl-hint{margin:8px 2px 0;font:500 11.5px/1.35 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.pl-go{margin-left:auto;flex:none;padding:5px 12px;border-radius:99px;font:800 12px/1 'DM Sans',sans-serif;background:var(--wk-acc,var(--petto,#f5b94e));color:#17191c}
html:not([data-mode="dark"]) .pl-go{background:var(--wk-accd,#a76c1c);color:#fff}

/* Kids, toilets and water, family facts, share (Sophia, 2026-11-04): getting everyone out of the house and walking. */
.ps-facts{display:flex;flex-wrap:wrap;gap:6px}
.fact{display:inline-flex;align-items:center;gap:5px;padding:4px 10px 4px 8px;border-radius:99px;font:700 12px/1.2 'DM Sans',sans-serif;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);color:var(--wk-ink,#26282b)}
.fact i{font-style:normal;font-size:13px;line-height:1}
.ps-share{flex:none;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;background:var(--wk-raise);color:var(--wk-ink,#26282b);box-shadow:var(--wk-raise-shadow);margin-left:auto}
.ps-share svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-share+.ps-close{margin-left:0}
/* Links inside the details well use the accent, not the browser blue. */
.ps-v a{color:var(--wk-accd,#a76c1c);font-weight:700;text-underline-offset:2px}
html[data-mode="dark"] .ps-v a{color:var(--wk-acc,#f5b94e)}

/* Choose anywhere (Sophia, 2026-11-04): search results in the picker, and the card for a dropped pin. */
.pl-geo{margin-top:8px}
.pl-geo .pl-rows{margin-top:6px}
.pl-geo .pl-hint{margin:6px 2px 0}
.pl-geo .ps-ask{margin-top:4px;padding:10px 12px;border-radius:14px;background:var(--wk-well);box-shadow:var(--wk-well-shadow)}
.ps-details[hidden]{display:none}
.ps-links{display:flex;flex-wrap:wrap;gap:2px 0;font:600 13px/1.4 'DM Sans',sans-serif}
.ps-links i{font-style:normal;color:var(--wk-dim,#7b7f84);padding:0 6px}

/* Directions on the map (Sophia, 2026-11-04): the next turn in the destination banner, and the opt-in. */
.wd-step{font:700 12.5px/1.3 'DM Sans',sans-serif!important;color:var(--wk-ink,#26282b)!important}
.wd-step[hidden]{display:none}
.walk-dest-ask{margin:6px 0 2px;padding:8px 10px;border-radius:14px;background:var(--wk-well);box-shadow:var(--wk-well-shadow)}
.walk-dest-ask[hidden]{display:none}
.walk-dest-ask p{margin:0 0 8px;font:500 12px/1.4 'DM Sans',sans-serif;color:var(--wk-ink,#26282b)}
.walk-dest-ask>div{display:flex;gap:8px}

/* Parent & baby groups (Sophia, 2026-11-04) */
.ps-groups{margin-top:10px;padding:10px 12px;border-radius:16px;background:var(--wk-well);box-shadow:var(--wk-well-shadow);display:grid;gap:8px}
.ps-groups[hidden]{display:none}
.gr-head .ps-k{font:700 10px/1.6 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--wk-dim,#7b7f84)}
.gr-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.gr-row{display:grid;gap:2px;padding:8px 10px;border-radius:12px;background:var(--wk-raise);box-shadow:var(--wk-raise-shadow);font:500 13px/1.35 'DM Sans',sans-serif;color:var(--wk-ink,#26282b)}
.gr-row b{font-weight:800}
.gr-row small{font:500 12px/1.35 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.gr-row em{font:700 11px/1.3 'DM Sans',sans-serif;color:#c98a1a;font-style:normal}
.gr-links{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font:600 12.5px/1.4 'DM Sans',sans-serif}
.gr-why{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.gr-why .ps-no{height:28px;font-size:11.5px;padding:0 10px}
.gr-none{margin:0;font:500 12.5px/1.4 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.gr-note{margin:0;font:500 11.5px/1.4 'DM Sans',sans-serif;color:var(--wk-dim,#7b7f84)}
.gr-add{width:100%}
.gr-sub{margin:10px 0 6px;font:800 13px 'DM Sans',sans-serif}
.gr-review{height:32px;padding:0 12px;margin-left:auto;margin-right:8px;font-size:12px}
dialog.group-dialog{max-width:420px;width:calc(100% - 24px);max-height:88vh;overflow:auto}
.gr-form{display:grid;gap:12px;font:500 14px/1.4 'DM Sans',sans-serif}
.gr-form h2{margin:0;font:800 20px 'DM Sans',sans-serif}
.gr-form label{display:grid;gap:4px;font-weight:700;font-size:13px}
.gr-form input:not([type=checkbox]),.gr-form select,.gr-form textarea{font:500 15px 'DM Sans',sans-serif;padding:9px 12px;border:1px solid #00000024;border-radius:12px;background:#fff;color:#1d1d1f;width:100%;box-sizing:border-box}
html[data-mode="dark"] .gr-form input:not([type=checkbox]),html[data-mode="dark"] .gr-form select,html[data-mode="dark"] .gr-form textarea{background:#16171b;color:#f5f2ea;border-color:#ffffff24}
.gr-help,.gr-at{margin:0;font-size:12.5px;color:#6b6b72}
html[data-mode="dark"] .gr-help,html[data-mode="dark"] .gr-at{color:#b7b2a6}
.gr-form fieldset{border:0;margin:0;padding:0;display:grid;gap:6px}
.gr-form legend{font-weight:700;font-size:13px;padding:0}
.gr-chips{display:flex;flex-wrap:wrap;gap:6px}
.gr-chip{position:relative;display:inline-block!important}
.gr-chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.gr-chip span{display:inline-block;padding:6px 12px;border-radius:99px;border:1px solid #00000024;font-weight:700;font-size:13px}
.gr-chip input:checked+span{background:#1d1d1f;color:#fff;border-color:#1d1d1f}
html[data-mode="dark"] .gr-chip span{border-color:#ffffff30}
html[data-mode="dark"] .gr-chip input:checked+span{background:#f5f2ea;color:#101114}
.gr-chip input:focus-visible+span{outline:2px solid #6fb2ff;outline-offset:2px}
.gr-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gr-confirm{display:flex!important;grid-template-columns:none!important;align-items:flex-start;gap:8px!important;font-weight:500!important}
.gr-errors{list-style:none;margin:0;padding:0;color:#c2362f;font-size:13px;font-weight:600;display:grid;gap:3px}
.gr-errors:empty{display:none}
.gr-actions{display:flex;gap:10px;justify-content:flex-end}
.gr-done{display:grid;gap:12px;text-align:center}
.gr-done h2{margin:0;font:800 20px 'DM Sans',sans-serif}
/* The card deck can't be highlighted or long-press selected, so no selection box shows on a card (Sophia 2026-11-04). */
.trading-stage,.trading-stage *,.trading-card-grid,.trading-card-grid *,.first-card,.first-card *,.card-reveal,.card-reveal *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
/* App tour (Sophia 2026-11-04) */
.tour{position:fixed;inset:0;z-index:9500}
.tour-offer{display:grid;place-items:center;background:#0009;padding:16px}
.tour-ring{position:fixed;border-radius:18px;box-shadow:0 0 0 9999px #000a,0 0 0 3px #ffd76a;transition:all .3s ease;pointer-events:none}
.tour-card{position:fixed;background:#fffdf8;color:#313a36;border-radius:20px;padding:16px 18px;box-shadow:0 12px 40px #0006;font-size:14px;line-height:1.45}
.tour-offer .tour-card{position:relative;max-width:320px;text-align:center}
.tour-card small{color:#88918b;font-weight:700;letter-spacing:.06em}
.tour-card h3{margin:2px 0 6px;font-size:18px}
.tour-card p{margin:0 0 14px}
.tour-emoji{font-size:34px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tour-actions button{border:0;border-radius:999px;padding:9px 16px;font-weight:800;background:#eeeae2;color:#313a36;cursor:pointer}
.tour-actions .tour-next{background:#121317;color:#f5f2ea}
.tour-actions .tour-skip{background:none;color:#88918b;padding-left:0}
.tour-actions span{display:flex;gap:8px}
.tour-offer .tour-actions{justify-content:center}
.bpv-tour{display:grid;place-items:center;padding:6px 0}
.bp-tour-go{border:0;border-radius:999px;padding:12px 22px;font-weight:800;background:#121317;color:#f5f2ea;cursor:pointer}
html[data-mode="dark"] .tour-card{background:#17181d;color:#f5f2ea}
html[data-mode="dark"] .tour-actions button{background:#ffffff14;color:#f5f2ea}
html[data-mode="dark"] .tour-actions .tour-next{background:#f5f2ea;color:#101114}
html[data-mode="dark"] .tour-actions .tour-skip{background:none;color:#aaa9ad}
@media(prefers-reduced-motion:reduce){.tour-ring{transition:none}}

/* Games never highlight text (Sophia, 2026-11-05): holding or dragging in any mini game, or on the Games tab, used to start the
   blue text selection and the iPhone callout. Every game's full screen is a .sg-full. Typing boxes stay selectable. */
.games-page,.games-page *,.sg-full,.sg-full *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
.games-page :is(input,textarea,[contenteditable]),.sg-full :is(input,textarea,[contenteditable]){-webkit-user-select:text;user-select:text}
.sg-full img,.games-page img{-webkit-user-drag:none}
/* Accessibility settings (Sophia 2026-11-07): rows in Profile > Settings, same look as Night mode. Nothing below changes
   the app until a switch is on: each rule hangs off a class on <html> that only the switch adds. */
.phone-settings .a11y-settings{display:grid;gap:8px;margin:20px 0 20px}
.phone-settings .a11y-settings .eyebrow{margin-bottom:0}
.a11y-settings .ps-row .ps-icon{flex:none;width:30px;height:30px;border-radius:9px;box-shadow:none;color:#fff;font:800 14px/1 'DM Sans',sans-serif}
.a11y-settings .ps-row:nth-of-type(1) .ps-icon{background:linear-gradient(160deg,#ffd0b5,#eb8f6a)}
.a11y-settings .ps-row:nth-of-type(2) .ps-icon{background:linear-gradient(160deg,#9aa0a8,#3f444c);font-size:17px}
.a11y-settings .ps-row:nth-of-type(3) .ps-icon{background:linear-gradient(160deg,#a8e6c4,#3fae78);font-size:17px}
.a11y-settings .ps-row:nth-of-type(4) .ps-icon{background:linear-gradient(160deg,#a9d8ff,#4c8fe0);font-size:17px}
.a11y-settings .ps-row:nth-of-type(5) .ps-icon{background:linear-gradient(160deg,#ffe6a8,#f2a93b);font-size:15px}
.a11y-settings .ps-row input:disabled{opacity:.55;cursor:default}
.a11y-settings .a11y-phone{color:#34c759}
.a11y-settings .ps-note{margin:4px 4px 0}
.a11y-sizes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:8px;border-radius:16px;background:color-mix(in srgb,var(--ph-ink) 6%,transparent)}
.a11y-sizes[hidden]{display:none}
.a11y-sizes button{display:grid;place-items:center;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--ph-ink);font:800 calc(13px * var(--s)) / 1 'DM Sans',sans-serif;cursor:pointer;transition:background .2s}
.a11y-sizes button[aria-pressed="true"]{background:var(--ph-ink);color:var(--ph-bg,#1c1c1e)}
/* Bigger buttons: small controls grow to a 44 by 44 tap area. */
html.a11y-targets .a11y-big{min-width:44px;min-height:44px}
html.a11y-targets a.a11y-big{display:inline-flex;align-items:center;justify-content:center}
html.a11y-targets :is(button,a,[role="button"]):focus-visible{outline:3px solid #4c8fe0;outline-offset:2px}
/* Reduce motion: the same as the phone's own setting. */
html.a11y-calm *,html.a11y-calm *::before,html.a11y-calm *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
/* Colour-blind friendly: a tick or a mark beside states that were shown by colour alone, and links underlined. */
html.a11y-colour a[href]{text-decoration:underline;text-underline-offset:2px}
html.a11y-colour .bd-tile.ok .bd-state::before{content:"✓";width:auto;height:auto;background:none;box-shadow:none;color:#6fd49a;font-size:11px;font-weight:900}
html.a11y-colour :is(.bd-tile.off,.bd-extra.fresh) .bd-state::before{content:"!";width:auto;height:auto;background:none;box-shadow:none;color:#ffb44d;font-size:11px;font-weight:900}
html.a11y-colour .bd-extra.fresh .bd-state::before{content:"✓";color:#6fd49a}
html.a11y-colour .wb-fader.good .wb-fader-led{width:auto;height:auto;background:none;box-shadow:none}
html.a11y-colour .wb-fader.good .wb-fader-led::before{content:"✓";color:var(--acc);font:900 9px/1 'DM Sans',sans-serif}
/* The walk map's place card also has .ps-row rows (a two-column grid); keep the Settings rows as switch rows. */
.phone-settings .ps-row,.phone-notify .ps-row{display:flex;grid-template-columns:none;gap:12px;align-items:center;font-size:15px;font-weight:800;line-height:normal}
.phone-settings .ps-row>.ps-icon{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(160deg,#8f8cf0,#5b5fb8);box-shadow:none;color:#fff;font-size:16px}
.phone-settings .ps-row>span:nth-child(2){flex:1;text-align:left}
html.a11y-text .walk-top .walk-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
html.a11y-text .walk-top .walk-chip{min-width:0}

/* Calmer Log food (Sophia 2026-11-07): her menu book, plate, Pettö and Weekly plates stay as they are. The extra bits
   around them go: one meal row (the icons) picks the meal and the box, no "Have you had lunch yet?" card, no portion
   note, one filter row, and the plate shrinks while you scroll. Buttons are at least 44 points tall. */
#meals #ml-box,#meals #ml-ask,#meals #ml-portion-note{display:none!important}
#meals .ml-hero{transform-origin:50% 0;transition:transform .35s cubic-bezier(.3,1.2,.4,1)}
#meals .ml-hero.ml-tiny{transform:scale(.5)}
@media (prefers-reduced-motion:reduce){#meals .ml-hero{transition:none}}
#meals .meal-types button,#meals .ml-portion button,#meals .ml-tabs .ml-tab,#meals .ml-find{min-height:44px}
#meals .menu-cats .mc-row button{min-height:40px}
#meals .menu-cats .mc-row>span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#meals .menu-cats .mc-split{flex:none;width:1px;align-self:stretch;margin:6px 4px;background:currentColor;opacity:.25}
#meals .ml-own{margin:14px 0 0}

/* Sophia 2026-11-07: no portion row; tapping a food asks how much (#portion-ask). Quick adds are just the food icons.
   More room between the parts of Log food. */
#meals #ml-portion{display:none!important}
#meals .ml-tools .ml-find{flex:1}
#ml-panel-add{display:flex;flex-direction:column;gap:22px;padding-top:6px}
#ml-panel-add>*{margin-top:0!important;margin-bottom:0!important}
#meals .ml-tabs{margin-bottom:6px}
#meals .ml-hero{margin-bottom:22px}
#meals .menu-cats{margin:-8px 0 0!important}
#meals .ml-recent-row{gap:12px}
#meals .ml-recent-row .ml-chip{width:60px;height:60px;min-width:0;padding:0;border-radius:50%;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-items:center;flex:none}
#meals .ml-recent-row .ml-chip b,#meals .ml-recent-row .ml-chip small{display:none}
#meals .ml-recent-row .ml-chip .food-art{margin:0;width:48px;height:48px}
#meals .ml-recent-row .ml-chip .food-art svg{width:34px;height:34px}
.portion-ask{width:min(380px,calc(100% - 24px))}
.portion-ask .pa-head{display:flex;align-items:center;gap:14px;padding-right:36px}
.portion-ask .pa-head .food-art{flex:none;width:64px;height:64px;margin:0}
.portion-ask .pa-head .food-art svg{width:44px;height:44px}
.portion-ask h2{margin:2px 0 2px;font-size:21px}
.portion-ask p{margin:0;color:var(--mu-dim);font-size:13px}
.portion-ask .pa-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.portion-ask .pa-pick{min-height:64px;border:0;border-radius:18px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);display:grid;place-items:center;align-content:center;gap:2px;font:inherit}
.portion-ask .pa-pick b{font-size:16px;font-weight:900}
.portion-ask .pa-pick small{font-size:13px;color:var(--mu-dim)}
.portion-ask .pa-pick.usual{background:var(--mu-knob);box-shadow:var(--mu-knob-shadow)}
html body dialog#portion-ask::backdrop{background:#1d1e24aa;backdrop-filter:blur(4px)}

/* Search as an icon at the end of the meal row (Sophia 2026-11-07); tapping it turns the row into the search field. */
#meals .ml-tools{display:none!important}
html body .meal-card.ml-on .meal-types .mt-search{flex:none;width:44px;padding:0;border:0;border-radius:16px;background:none;color:var(--mu-dim)}
html body .meal-card.ml-on .meal-types .mt-search .mt-icon{width:19px;height:19px}
#meals .quick-head.searching .meal-types{display:none}
#meals .ml-search{display:flex;align-items:center;gap:8px;animation:mlSearchIn .28s cubic-bezier(.3,1.3,.5,1) both;transform-origin:100% 50%}
#meals .ml-search .ml-find{flex:1;min-height:50px;border-radius:20px}
#meals .ml-search .ml-find input{height:50px;padding-left:40px;font:700 16px 'DM Sans',sans-serif}
#meals .ml-search .ml-find svg{left:15px;width:18px;height:18px}
#meals .ml-search{position:relative;flex:1 1 100%;min-width:0}
#meals .ml-search .ml-find input{padding-right:52px}
/* The × sits inside the search field, drawn with thin lines like the magnifier, no circle of its own (Sophia 2026-11-07). */
#meals .ml-search-x{position:absolute;right:3px;top:50%;transform:translateY(-50%);width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:none;box-shadow:none;color:var(--mu-dim)}
#meals .ml-search-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
#meals .ml-search-x:hover,#meals .ml-search-x:active{color:var(--mu-ink)}
@keyframes mlSearchIn{from{opacity:0;transform:scaleX(.2)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#meals .ml-search{animation:none}}
#meals .ml-search input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
.portion-ask .pa-box{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;font-size:14px;font-weight:700;color:var(--mu-dim)}
.portion-ask .pa-box select{min-height:44px;padding:0 12px;border:0;border-radius:14px;background:var(--mu-deep);box-shadow:var(--mu-groove-in);color:var(--mu-ink);font:700 15px 'DM Sans',sans-serif}
/* Lava restyle (Sophia 2026-11-09: "make the lava look like it belongs"): a soft pastel jelly in your petto's colour
   with a crisp darker outline, a flat shade along the bottom right and a white shine, like the pet and the care
   buttons. No blurry glow; at night it only glows softly. Same slide, stretch and pop as before. */
.menu-lava{--lava-body:color-mix(in srgb,var(--lava) 62%,#fff8ee);--lava-ink:color-mix(in srgb,var(--lava) 82%,#6b4a3a);--lava-shade:color-mix(in srgb,var(--lava) 82%,#fff8ee)}
.menu-lava .lava-body{flood-color:var(--lava-body)}.menu-lava .lava-ink{flood-color:var(--lava-ink)}.menu-lava .lava-shade{flood-color:var(--lava-shade)}
.menu-lava svg,html[data-mode="dark"] .menu-lava svg{filter:drop-shadow(0 4px 0 color-mix(in srgb,var(--lava-ink) 18%,transparent))}
html[data-mode="dark"] .menu-lava{--lava-body:color-mix(in srgb,var(--lava) 78%,#fff8ee);--lava-ink:color-mix(in srgb,var(--lava) 60%,#14100e);--lava-shade:var(--lava)}
html[data-mode="dark"] .menu-lava svg{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--lava) 30%,transparent))}
.menu-lava .lava-shine{fill:#fff;opacity:.85}
.menu-drop svg{fill:#fff;filter:drop-shadow(0 1px 0 color-mix(in srgb,var(--lava-ink,#6b4a3a) 70%,transparent))}
/* The Watch's buttons on the iPhone too (Sophia 2026-11-12, "Watch style on both"): one button at the top of the
   window that follows your Pettö's needs, the poop beside your Pettö, and each room's own care buttons. */
html body .pet-card.pd-on .pd-call:not(#wb){position:absolute;left:50%;top:10px;z-index:8;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:6px 12px 6px 8px;border:2px solid #ffffffcc;border-radius:99px;background:var(--care,#9aa6b2);color:#fff;font-family:inherit;font-size:11px;font-weight:900;line-height:1;white-space:nowrap;letter-spacing:.04em;box-shadow:0 4px 14px #0000002a;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s}
html body .pet-card.pd-on .pd-call:not(#wb)[hidden]{display:none}
html body .pet-card.pd-on .pd-call:not(#wb):active{transform:translateX(-50%) scale(.92)}
html body .pet-card.pd-on .pd-call:not(#wb) svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html body .pet-card.pd-on .pd-call.need:not(#wb){animation:pdneedpulse 1.4s ease-in-out infinite}
@keyframes pdneedpulse{50%{box-shadow:0 0 0 4px #ffd75e,0 4px 14px #0000002a}}
/* The poop sits on the floor just behind your Pettö (Sophia 2026-11-12), drawn rather than an emoji. */
.pd-poop{position:absolute;z-index:1;left:64%;bottom:14%;width:34px;line-height:0;pointer-events:none}
.pd-poop svg{display:block;width:100%;height:auto}
html body .pet-card.pd-on .pd-call:not(#wb){width:34px;height:34px;padding:0;justify-content:center;border-radius:50%}
html body .pet-card.pd-on .pd-call:not(#wb) svg{width:18px;height:18px}
.pd-poop[hidden]{display:none}
html body .pet-card.pd-on .scene-care:not(#wb) .care-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;border-radius:99px;background:#ff3b5c;color:#fff;font-family:inherit;font-size:10px;font-weight:900;line-height:16px;text-align:center}
html body .pet-card.pd-on .room-tabs:not([hidden]){display:flex!important;justify-content:center;gap:8px;margin:8px 0 0}
@media (prefers-reduced-motion:reduce){html body .pet-card.pd-on .pd-call.need:not(#wb){animation:none}}

/* Self care car wash over the whole page (Sophia 2026-11-13): spray bar + rain, foam, two spinning pastel roller brushes,
   rinse curtain, shine and sparkles. 4.8s in all (CAR_WASH_MS in script.js). */
.car-wash{position:fixed;inset:0;z-index:9000;pointer-events:none;overflow:hidden;container-type:size;animation:cw-tint 4.8s ease forwards}
@keyframes cw-tint{0%{background:rgba(140,210,245,0)}10%,78%{background:rgba(140,210,245,.38)}100%{background:rgba(140,210,245,0)}}
.cw-bar{position:absolute;left:-4%;right:-4%;top:0;height:calc(30px * var(--k,1));display:flex;justify-content:space-around;align-items:flex-end;
  background:linear-gradient(#fdf4fa,#f3c4dd 55%,#e79cc3);border-bottom:3px solid #d784b0;border-radius:0 0 18px 18px;
  box-shadow:0 4px 10px rgba(180,90,140,.25);transform:translateY(-110%);animation:cw-bar 4.8s cubic-bezier(.3,1.4,.5,1) forwards}
.cw-bar span{width:12px;height:9px;margin-bottom:-8px;border-radius:0 0 6px 6px;background:#9fd8f2;border:2px solid #6cb8dc;border-top:0}
@keyframes cw-bar{0%{transform:translateY(-110%)}9%,84%{transform:translateY(0)}100%{transform:translateY(-110%)}}
.cw-rain{position:absolute;inset:30px 0 0;animation:cw-rain 4.8s linear forwards}
@keyframes cw-rain{0%,6%{opacity:0}10%,30%{opacity:1}38%,60%{opacity:0}64%,76%{opacity:1}82%,100%{opacity:0}}
.cw-drop{position:absolute;top:-90px;width:3px;height:var(--len);border-radius:3px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.95) 60%,#bfe9fb);animation:cw-fall .55s linear infinite}
@keyframes cw-fall{to{transform:translateY(calc(100cqh + 90px))}}
.cw-foam{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);border-radius:50%;opacity:0;transform:scale(0);
  background:radial-gradient(circle at 32% 28%,#fff 0 18%,var(--tint) 46%,rgba(255,255,255,.55) 72%,rgba(190,225,245,.7));box-shadow:inset -3px -4px 8px rgba(150,200,230,.35);
  animation:cw-foam 2.3s cubic-bezier(.3,1.5,.6,1) forwards}
@keyframes cw-foam{0%{opacity:0;transform:scale(0)}18%{opacity:.96;transform:scale(1)}50%{transform:scale(1.08) translateX(4px)}78%{opacity:.94;transform:scale(1) translateX(-3px)}100%{opacity:0;transform:translateY(40cqh) scale(.4)}}
.cw-brush{position:absolute;top:24px;bottom:-30px;width:min(30cqw,140px);animation:cw-sweep-l 2.1s cubic-bezier(.45,0,.55,1) .95s both}
.cw-brush-r{animation-name:cw-sweep-r;animation-delay:1.2s}
.cw-brush b{position:relative;display:block;height:100%;border-radius:999px;box-shadow:0 10px 26px rgba(120,80,140,.28);
  -webkit-mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 64%) 0 0/14px 14px,linear-gradient(90deg,transparent 7px,#000 7px calc(100% - 7px),transparent calc(100% - 7px));
  mask:radial-gradient(circle at 50% 50%,#000 62%,transparent 64%) 0 0/14px 14px,linear-gradient(90deg,transparent 7px,#000 7px calc(100% - 7px),transparent calc(100% - 7px));
  background:repeating-linear-gradient(172deg,#ffb3d4 0 18px,#ffd2e6 18px 22px,#9fd8f2 22px 40px,#cdeefc 40px 44px,#ffe08a 44px 62px,#fff0bf 62px 66px,#a8e8c4 66px 84px,#d6f7e4 84px 88px);
  background-size:100% 88px;animation:cw-spin .3s linear infinite}
/* Round shading so each brush looks like a spinning drum, with its pole above. */
.cw-brush b::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,rgba(90,60,110,.32),rgba(255,255,255,.0) 28%,rgba(255,255,255,.55) 46%,rgba(255,255,255,0) 62%,rgba(90,60,110,.32))}
.cw-brush::before{content:'';position:absolute;left:50%;top:-30px;width:10px;height:44px;margin-left:-5px;border-radius:5px;background:linear-gradient(90deg,#c9a3bb,#fff,#c9a3bb)}
.cw-brush-r b{animation-direction:reverse}
@keyframes cw-spin{to{background-position:0 88px}}
@keyframes cw-sweep-l{0%{transform:translateX(-130%) rotate(-4deg)}50%{transform:translateX(calc(50cqw - 50%)) rotate(3deg)}100%{transform:translateX(calc(100cqw + 30%)) rotate(-3deg)}}
@keyframes cw-sweep-r{0%{transform:translateX(calc(100cqw + 30%)) rotate(4deg)}50%{transform:translateX(calc(50cqw - 50%)) rotate(-3deg)}100%{transform:translateX(-130%) rotate(3deg)}}
.cw-rinse{position:absolute;left:0;right:0;top:0;height:60cqh;transform:translateY(-100%);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 9px,rgba(255,255,255,.6) 9px 12px,rgba(255,255,255,0) 12px 21px),linear-gradient(rgba(150,215,245,0),rgba(140,210,245,.7) 45%,rgba(200,236,252,.85) 80%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(transparent,#000 25%,#000 78%,transparent);mask:linear-gradient(transparent,#000 25%,#000 78%,transparent);
  animation:cw-rinse .95s cubic-bezier(.5,0,.6,1) 2.9s forwards}
@keyframes cw-rinse{to{transform:translateY(190cqh)}}
.cw-shine{position:absolute;top:-20%;bottom:-20%;left:0;width:45%;transform:translateX(-120%) skewX(-18deg);opacity:0;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.85),rgba(255,248,214,.6),rgba(255,255,255,0));animation:cw-shine .8s ease-in-out 3.75s forwards}
@keyframes cw-shine{0%{opacity:1;transform:translateX(-120%) skewX(-18deg)}100%{opacity:1;transform:translateX(330%) skewX(-18deg)}}
.cw-star{position:absolute;width:var(--s);height:var(--s);fill:#fff6b8;stroke:#f1c84c;stroke-width:1;opacity:0;transform:scale(0) rotate(0);animation:cw-star .75s ease-out forwards;filter:drop-shadow(0 0 6px rgba(255,240,170,.9))}
@keyframes cw-star{0%{opacity:0;transform:scale(0) rotate(0)}45%{opacity:1;transform:scale(1.15) rotate(30deg)}100%{opacity:0;transform:scale(.3) rotate(80deg)}}
/* In the room window (Sophia 2026-11-14): under the room name and the top button. */
.pet-scene>.car-wash{position:absolute;z-index:6;border-radius:inherit}
/* Sparkles + bubbles around your clean Pettö afterwards. */
.clean-sparkles{position:absolute;inset:0;z-index:3;pointer-events:none}
.clean-sparkles svg{position:absolute;width:28px;height:28px;margin:-14px;fill:#fff6b8;stroke:#f1c84c;stroke-width:1;opacity:0;animation:cw-twinkle 1.1s ease-in-out infinite;filter:drop-shadow(0 0 5px rgba(255,240,170,.9))}
@keyframes cw-twinkle{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:1;transform:scale(1) rotate(45deg)}}
.clean-sparkles i{position:absolute;bottom:22%;width:14px;height:14px;border-radius:50%;opacity:0;border:2px solid rgba(255,255,255,.9);background:radial-gradient(circle at 35% 30%,#fff,rgba(190,230,250,.4));animation:cw-bubble 2.2s ease-out infinite}
.clean-sparkles i:nth-of-type(1){left:34%}.clean-sparkles i:nth-of-type(2){left:46%;animation-delay:.4s;width:10px;height:10px}
.clean-sparkles i:nth-of-type(3){left:58%;animation-delay:.8s}.clean-sparkles i:nth-of-type(4){left:40%;animation-delay:1.2s;width:9px;height:9px}
.clean-sparkles i:nth-of-type(5){left:64%;animation-delay:1.5s;width:11px;height:11px}
@keyframes cw-bubble{0%{opacity:0;transform:translateY(0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translateY(-120px) translateX(10px) scale(1.1)}}