:root{color-scheme:light;--paper:#f8f0e4;--ink:#503c30;--soft:#70594b;--line:#dbc6af;--terra:#955e45;--white:#fff9ef}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at 45% 0,#fff9ed,var(--paper) 62%);color:var(--ink);font:16px/1.55 system-ui,sans-serif}
a{color:inherit;text-underline-offset:4px}button,textarea{font:inherit}
.bar,main,footer{width:min(calc(100% - 64px),1160px);margin-inline:auto}
.bar{height:70px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{font:27px Georgia,serif;text-decoration:none}.brand span{color:var(--terra);margin-right:4px}
nav{display:flex;gap:26px;font-size:14px}nav a{padding:12px 0;text-decoration:none}nav a:hover{text-decoration:underline}
.intro{text-align:center;padding:31px 0 23px}.kicker{margin:0;color:var(--terra);font-size:11px;letter-spacing:.17em;font-weight:700}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.08;margin:0}
h1{font-size:clamp(40px,5.7vw,72px);letter-spacing:-.04em;margin:6px 0 10px}
.intro>p:last-child{margin:0;color:var(--soft)}
.room{position:relative;display:grid;align-items:end;isolation:isolate;min-height:clamp(350px,43vw,555px);background:#ead8bd url(room.svg) center/cover;border:1px solid #cbae8e;border-radius:26px;box-shadow:0 15px 34px #7c4b2320;overflow:hidden;padding:82px clamp(18px,5%,68px) 26px}
.room-label{position:absolute;top:17px;left:17px;font-size:10px;letter-spacing:.18em;background:#fff9e9eb;border:1px solid #b89473;padding:6px 10px;border-radius:20px;color:var(--ink)}
.family{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:end;gap:clamp(10px,2.2vw,28px)}
.portrait{position:relative;display:grid;justify-items:center;gap:5px;min-width:0;width:100%;padding:6px 6px 7px;border:1px solid #c6a988;border-radius:48% 48% 18px 18px / 38% 38% 18px 18px;background:#fff3df;box-shadow:0 10px 16px #5839203e;color:var(--ink);cursor:pointer;transition:transform .22s,box-shadow .22s}
.portrait:nth-child(even){margin-bottom:13px}.portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:48% 48% 12px 12px / 39% 39% 12px 12px}
.portrait span{font:clamp(16px,2vw,22px)/1.3 Georgia,serif}
.portrait[aria-pressed=true]{box-shadow:0 0 0 3px #fbefdb,0 0 0 5px #8a674b,0 10px 16px #5839203e}
@media(hover:hover){.portrait:hover{transform:translateY(-6px)}}
:focus-visible{outline:3px solid #785438;outline-offset:4px}
.room-caption{text-align:center;min-height:24px;margin:12px 0 20px;color:var(--soft);font-size:14px}
.daily{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(18px,4vw,50px);padding-top:24px;border-top:1px solid var(--line)}
.care,.capture{min-width:0}.capture{background:#efe1ce;border:1px solid var(--line);border-radius:20px;padding:22px}
h2{font-size:clamp(26px,3vw,34px);margin:5px 0 10px}
.hint{font-size:13px;color:var(--soft);margin:6px 0 10px}
.quiet-link{display:inline-block;margin-top:8px;font-size:14px;font-weight:650;color:var(--terra)}
textarea{display:block;width:100%;resize:vertical;min-height:90px;padding:12px 14px;color:var(--ink);background:var(--white);border:1px solid #b69a80;border-radius:12px}
textarea::placeholder{color:#70594b}
.capture-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.capture-actions button{padding:7px 10px;border-radius:20px;border:1px solid #c6ad91;color:#70594b;background:#fbf2e4;font-size:13px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
footer{border-top:1px solid var(--line);margin-block:34px 0;padding-block:15px;display:flex;justify-content:space-between;gap:12px;color:var(--soft);font-size:12px}
@media(max-width:680px){
 .bar,main,footer{width:calc(100% - 32px)}.bar{height:60px}nav{gap:16px}
 .intro{padding:23px 0 17px}.intro>p:last-child{font-size:14px}
 .room{min-height:0;border-radius:19px;padding:48px clamp(10px,5vw,26px) 15px;background-position:39% center}
 .room-label{top:9px;left:9px}.family{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:380px;width:100%;margin-inline:auto}
 .portrait:nth-child(even){margin-bottom:0}.portrait img{aspect-ratio:1.12}.daily{grid-template-columns:1fr}.capture{padding:16px}
}
@media(prefers-reduced-motion:reduce){.portrait{transition:none}.portrait:hover{transform:none}}

/* Hero artwork: source pet pixels are layered, never retouched or stretched. */
.room-hero{display:block;aspect-ratio:2.25;min-height:0;padding:0;border:0;background:#f2d2a9 url(room-hero.png) center 53%/cover;border-radius:24px;margin-top:20px}
.hero-mark{position:absolute;inset:2% 0 auto;text-align:center;z-index:5;margin:0;line-height:.9;color:#743b17;text-shadow:0 1px 2px #fff5dc}
.wordmark{font-family:"Snell Roundhand","Apple Chancery",Georgia,cursive;font-style:italic;font-weight:600;letter-spacing:-.05em;font-size:clamp(42px,8vw,105px);display:inline-flex;align-items:center;gap:.05em}
.wordmark svg{width:.92em;height:.66em;overflow:visible;fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.hero-tag{display:block;font:500 clamp(13px,2.35vw,29px)/1.2 Georgia,serif;letter-spacing:0;margin-top:.15em}

.hero-flourish{display:block;width:clamp(95px,21vw,265px);margin:auto;line-height:0}.hero-flourish svg{display:block;width:100%}
.room-hero{aspect-ratio:2.45;border-radius:28px}
.room-hero .family{position:absolute;inset:auto 5% 9%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,2vw,24px)}
.room-hero .portrait{display:block;position:relative;margin:0;padding:clamp(3px,.65vw,8px);background:#fff4e5;border:1px solid #fff9ed;border-radius:clamp(9px,1.7vw,23px);box-shadow:0 8px 18px #5f331b66;rotate:var(--turn);translate:0 var(--rise)}
.room-hero .portrait img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;border-radius:clamp(6px,1.25vw,17px)}
.room-hero .portrait[aria-pressed=true]{outline:3px solid #924d2e;outline-offset:2px}
.peipei{--turn:-5deg;--rise:0}.meme{--turn:3deg;--rise:-14%}.didi{--turn:-4deg;--rise:-2%}.abing{--turn:4deg;--rise:-11%}
.room-caption{margin-bottom:10px}
.quick-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 2.5% 18px}
.quick-nav>*{display:grid;justify-items:center;align-content:center;gap:1px;text-align:center;text-decoration:none;min-height:91px;padding:8px 4px;border:1px solid #fffaf2;border-radius:45px;background:#fae5d8;box-shadow:0 4px 9px #a65c3026;color:#623320;font:inherit}
.quick-nav>:nth-child(2){background:#edf0d8}.quick-nav>:nth-child(3){background:#f3e3ed}
.quick-nav span,.bottom-nav span{font-size:25px;line-height:1;color:#91551f}.quick-nav small{font-size:12px;color:#70594b}
.daily{border-top:0;padding-top:0;gap:12px}.care,.capture,.plans,.bottom-nav{background:#fff4e8;border:1px solid #fffaf4;border-radius:24px;padding:16px;box-shadow:0 4px 12px #9e5d2d24}
.daily h2,.plans h2{font:700 clamp(20px,3vw,29px)/1.2 system-ui,sans-serif;color:#672b24}
.plans{display:grid;grid-template-columns:1fr 1.6fr;gap:14px;margin:14px 0}.plans h3,.plans p{margin:4px 0}.plans>div+div{border-left:1px solid var(--line);padding-left:14px}
.bottom-nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:5px;text-align:center;padding:11px 5px;border-radius:40px}
.bottom-nav a,.bottom-nav button{display:grid;justify-items:center;gap:3px;text-decoration:none;color:#673723;background:none;border:0;padding:5px 0;font-size:clamp(10px,2.5vw,15px)}
.bottom-nav a[aria-current]{font-weight:750;color:#a74728}.bottom-nav .nav-add{place-items:center;width:44px;height:44px;margin:auto;border-radius:50%;background:#cb623e;color:#fff;font-size:30px;line-height:1}
#care-quick .med-quick-heading{display:none}
#care-quick .med-quick-list{grid-template-columns:minmax(0,1fr);gap:8px}
#care-quick .med-quick-dose{flex-direction:row;align-items:center;padding:10px 12px;gap:8px;background:#f4e5d7}
#care-quick .med-taken{font:inherit;font-size:13px;border:1px solid;border-radius:20px;padding:6px 10px;min-height:34px}
#care-feedback:empty{display:none}
@media(max-width:680px){
 .room-hero{aspect-ratio:1.05;border-radius:18px;margin-top:12px}
 .hero-mark{top:4%}
 .room-hero .family{inset:auto 8% 7%;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
 .room-hero .portrait img{aspect-ratio:1.28;object-fit:cover;object-position:center 45%}
 .meme,.abing{--rise:-8%}
 .quick-nav{margin-inline:0;gap:5px}.quick-nav>*{font-size:12px;min-height:72px;border-radius:20px}.quick-nav small{font-size:10px}
 .plans{grid-template-columns:1fr;gap:5px}.plans>div+div{border-left:0;border-top:1px solid var(--line);padding:7px 0 0}
}
@media(max-width:680px){.room-hero .portrait img{height:auto;width:100%;aspect-ratio:1.35;object-fit:cover}}
@media(max-width:680px){
 .room-hero{aspect-ratio:1}
 .room-hero .family{width:auto;max-width:none}
}

/* Preserve the existing stagger and add only Meme’s review offset. */
.room-hero .portrait.meme{translate:0 calc(var(--rise) + 18px)}

.room-hero .portrait.abing{translate:0 calc(var(--rise) + 18px)}

/* Only visible before the matching private portrait has been imported. */
.room-hero .portrait img[hidden]{display:none}
.room-hero .portrait:has(img[hidden]){aspect-ratio:1}
.room-hero .portrait:has(img[hidden])::after{content:attr(data-pet);display:grid;place-items:center;height:100%;color:#714730}
.portrait-import{margin:12px 0;color:#714730}
.portrait-import summary{cursor:pointer;text-align:center}
#portrait-inputs{display:grid;gap:8px}
#portrait-inputs label{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#portrait-inputs input{max-width:100%}