.pet-page{max-width:520px;margin:0 auto;color:#394c63}
.pet-eyebrow{font-size:12px;line-height:1.7;color:var(--muted);letter-spacing:.06em}
.pet-page-heading{display:flex;justify-content:space-between;align-items:center;padding:0 3px}
.pet-stage-name{font-size:11px;color:#607b9a;background:#e9eff8;padding:4px 10px;border-radius:20px}
.pet-scene{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;height:278px;margin:8px 0 0;overflow:hidden;border-radius:28px;background:radial-gradient(ellipse at 50% 50%,#f9fcff 0,#eaf2fa 63%,#e5edf6 100%)}
.pet-scene-halo{position:absolute;z-index:-1;width:235px;height:235px;top:20px;border-radius:50%;background:#ffffff80}
.pet-scene::after{content:"";position:absolute;z-index:-1;left:15%;right:15%;bottom:13px;height:12px;border-radius:50%;background:#9fb5d018;filter:blur(3px)}
.pet-scene-sleeping{background:radial-gradient(ellipse at 50% 50%,#f2f5fb,#e2e9f4)}
.pet-touch{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:10px 20px 18px;background:transparent;border-radius:28px;touch-action:manipulation;z-index:1}
.pet-touch:focus-visible{outline-offset:-5px}
.pet-touch-hint{position:absolute;right:14px;bottom:11px;color:#7d8fa4;font-size:10px;pointer-events:none}
.pet-art{display:inline-flex;align-items:center;justify-content:center;width:100%;max-width:255px;height:100%;vertical-align:middle;line-height:0}
.pet-character-image{display:block;max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.pet-growth-0{max-width:224px;height:224px}
.pet-growth-1{max-width:244px;height:244px}
.pet-growth-2,.pet-growth-3{max-width:265px;height:100%}
.pet-response{text-align:center;padding:10px 14px 0}
.pet-response h1{font-size:25px;line-height:1.4;overflow-wrap:anywhere}
.pet-state{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;line-height:1.7;margin-top:5px;color:#6d83a0}
.pet-state-dot{width:5px;height:5px;background:#96b0d1;border-radius:50%}
.pet-response-copy{max-width:350px;margin:7px auto 0;font-size:13px;line-height:1.8;color:var(--muted);min-height:46px;text-wrap:pretty}
.pet-action{display:flex;flex-direction:column;align-items:center;gap:3px;margin-top:14px}
.pet-primary{width:100%;max-width:320px;min-height:47px}
.pet-yesterday{background:transparent;color:var(--muted);font-size:12px;line-height:1.6;min-height:44px;padding:10px 15px;text-decoration:underline;text-underline-offset:4px}
.pet-progress{display:flex;justify-content:center;align-items:center;gap:7px;color:#8290a4;font-size:11px;line-height:1.8;text-align:center;margin:10px 0 16px}
.pet-progress>span{color:#8b9cc2;font-size:17px;line-height:1}
.pet-details-stack{border-top:1px solid var(--line)}
.pet-details{border-bottom:1px solid var(--line);font-size:12px}
.pet-details>summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:11px 3px;list-style:none;cursor:pointer;font-size:12px;color:#63758e}
.pet-details>summary::-webkit-details-marker{display:none}
.pet-details>summary::after{content:"+";font-size:17px;font-weight:300;color:#91a0b4;line-height:1;margin-left:auto}
.pet-details[open]>summary::after{content:"−"}
.pet-details>summary>span{color:#8c9aaf;font-size:10px;margin-left:4px}
.pet-details-content{padding:2px 3px 18px}
.pet-memory-list{list-style:none;margin:0;padding:0}
.pet-memory{padding:13px 0;border-top:1px solid #e3e9f1}
.pet-memory:first-child{border:0;padding-top:3px}
.pet-memory-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pet-memory-top h3{font-size:12px;font-weight:550;flex:1;min-width:120px}
.pet-memory-portrait{width:42px;height:54px;flex-shrink:0;background:#edf3fa;border-radius:8px;display:flex;align-items:center;justify-content:center}
.pet-memory-portrait .pet-art{width:100%;height:100%;padding:3px}
.pet-memory-top time{margin-left:auto;color:#8b99ac;font-size:10px;white-space:nowrap}
.pet-memory-task{font-size:11px;line-height:1.7;color:#8493a8;margin-top:7px;overflow-wrap:anywhere}
.pet-memory-evidence{margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid #cbd8ea;white-space:pre-wrap;font-size:12px;line-height:1.9;color:#63758c;overflow-wrap:anywhere}
.pet-detail-note{font-size:11px;line-height:1.9;color:var(--muted);margin-top:6px;overflow-wrap:anywhere}
.pet-growth-route{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.pet-growth-route li{display:flex;align-items:baseline;gap:12px}
.pet-growth-route li>span{width:48px;color:#8a9bb5;font-size:10px;flex-shrink:0}
.pet-growth-route strong{font-size:12px;font-weight:550;color:#627b9e}
.pet-growth-route p{font-size:11px;color:var(--muted);line-height:1.8;margin-top:2px}
.pet-rule-list{margin:0;padding-left:16px;color:#79889c;font-size:12px;line-height:1.9}
.pet-rule-list li+li{margin-top:7px}
.pet-settings-form{display:grid;gap:14px;padding:5px 3px 18px}
.pet-settings-form>.button{justify-self:start;min-width:100px}
.pet-name-field>label{font-size:12px;color:#6e8099;margin-bottom:7px}
.pet-name-field>input{min-height:46px;background:var(--paper);font-size:15px}
.pet-adoption-heading{text-align:center;margin-top:5px}
.pet-adoption-heading h1{font-size:23px;line-height:1.6;margin:8px auto 0;letter-spacing:-.5px;max-width:300px;text-wrap:balance;white-space:pre-line}
.pet-intro{font-size:12px;line-height:1.9;color:var(--muted);margin:9px auto 0}
.pet-adoption-scene{height:226px;margin-top:0}
.pet-adoption-scene>.pet-art{height:211px;max-width:224px}
.pet-adoption-scene .pet-scene-halo{width:190px;height:190px;top:17px}
.pet-adopt-form{display:grid;gap:13px;max-width:340px;margin:14px auto 0}
.pet-adopt-form>.pet-primary{max-width:none;margin-top:2px}
.pet-adoption-note{text-align:center;color:#8c99ab;font-size:11px;line-height:1.8;margin-top:12px}
.pet-credits{text-align:center;color:#8c99ab;font-size:10px;margin:5px 0 0}
.pet-credits>a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:3px}
.pet-mini .pet-art,.pet-feed-receipt .pet-art{width:90px;height:100px;flex-shrink:0}
.pet-feed-celebrate .pet-touch>.pet-art,.pet-pat-active .pet-touch>.pet-art{animation:pet-response-nod .5s ease-out both}
.pet-receipt{display:flex;align-items:center;gap:10px;padding:9px 13px 9px 6px;margin-top:16px;border:1px solid #d8e2f0;border-radius:15px;background:#edf3fa}
.pet-receipt-art{width:57px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pet-receipt-art>.pet-art{width:100%;height:100%;max-width:none;flex-shrink:0}
.pet-receipt>span:nth-child(2){min-width:0;flex:1}
.pet-receipt strong{display:block;font-size:12px;font-weight:550;line-height:1.7;color:#617b9e;overflow-wrap:anywhere}
.pet-receipt small{display:block;font-size:10px;line-height:1.8;color:#8395ac;margin-top:2px}
.pet-receipt>a{display:flex;align-items:center;justify-content:center;align-self:stretch;min-height:44px;min-width:50px;font-size:11px;color:#6d85a8;white-space:nowrap;padding:3px}
@keyframes pet-response-nod{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}}
@media(max-width:700px){.pet-scene{height:250px;margin-top:4px}.pet-scene-halo{width:205px;height:205px;top:18px}.pet-growth-0{max-width:210px;height:210px}.pet-growth-1{max-width:225px;height:225px}.pet-response{padding-top:7px}.pet-response h1{font-size:23px}.pet-response-copy{font-size:12px;min-height:43px;max-width:310px}.pet-action{margin-top:12px}.pet-progress{margin-bottom:12px}.pet-adoption-heading h1{font-size:22px;max-width:290px}.pet-adoption-scene{height:210px}.pet-adoption-scene>.pet-art{height:200px;max-width:210px}.pet-adoption-scene .pet-scene-halo{width:180px;height:180px;top:15px}.pet-adoption-note{font-size:10px}.pet-touch-hint{font-size:9px}}
@media(max-width:360px){.pet-scene{height:230px}.pet-growth-0{height:195px}.pet-growth-1{height:210px}.pet-adoption-scene{height:200px}.pet-adoption-scene>.pet-art{height:190px}.pet-adoption-heading h1{font-size:21px}.pet-memory-top h3{min-width:100px}}
@media(prefers-reduced-motion:reduce){.pet-page *,.pet-art *{animation:none!important;transition:none!important}}

.pet-home .pet-scene:has(.pet-growth-2),.pet-home .pet-scene:has(.pet-growth-3){height:340px}
@media(max-width:700px){.pet-home .pet-scene:has(.pet-growth-2),.pet-home .pet-scene:has(.pet-growth-3){height:315px}}
@media(max-width:360px){.pet-home .pet-scene:has(.pet-growth-2),.pet-home .pet-scene:has(.pet-growth-3){height:290px}}