/* The room follows real weather; the pet brings its own weekday personality. */
body {
  --weather-bg:#efeaf4;
  --mood-wash:rgba(181,158,214,.2);
  --metric-ink:#554369;
  --income-ink:#745692;
  background:var(--weather-bg);
  isolation:isolate;
}
body[data-weather=clear] { --weather-bg:#f3eee5; }
body[data-weather=cloudy] { --weather-bg:#e9ecf2; }
body[data-weather=rain],body[data-weather=storm] { --weather-bg:#e3eaf0; }
body[data-weather=snow] { --weather-bg:#edf3f5; }
body[data-weather=fog] { --weather-bg:#e7ece9; }
body[data-mood=sleepy] { --mood-wash:rgba(159,175,210,.32); --metric-ink:#4d5b76; --income-ink:#6b739d; }
body[data-mood=busy] { --mood-wash:rgba(155,193,172,.3); --metric-ink:#405e58; --income-ink:#5b7b69; }
body[data-mood=dreamy] { --mood-wash:rgba(186,155,218,.32); }
body[data-mood=grumpy] { --mood-wash:rgba(209,167,171,.26); --metric-ink:#6a4a5c; --income-ink:#8b5d76; }
body[data-mood=happy] { --mood-wash:rgba(240,196,137,.3); --metric-ink:#71543f; --income-ink:#96663d; }
body[data-mood=lazy] { --mood-wash:rgba(150,191,180,.3); --metric-ink:#415f63; --income-ink:#4e7a78; }
body[data-mood=cozy] { --mood-wash:rgba(208,173,187,.27); --metric-ink:#715468; --income-ink:#8b627f; }
.weather-backdrop { position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; }
.weather-backdrop:after { content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 58%,var(--mood-wash),transparent 75%); }
.weather-backdrop>svg { width:100%; height:100%; display:block; }
.sky-clouds { opacity:.38; animation:cloud-drift 24s ease-in-out infinite alternate; }
.sky-rays,.sky-rain,.sky-snow,.sky-stars,.sky-lightning { display:none; }
body[data-weather=clear] .sky-rays { display:block; opacity:.3; animation:sun-glow 8s ease-in-out infinite; }
body[data-weather=rain] .sky-rain,body[data-weather=storm] .sky-rain { display:block; animation:rainfall 2.1s linear infinite; }
body[data-weather=snow] .sky-snow { display:block; opacity:.85; animation:snowfall 9s linear infinite; }
body[data-weather=storm] .sky-lightning { display:block; opacity:0; animation:lightning 11s infinite; }
body[data-daylight=night] {
  --weather-bg:#263449; --color-text:#f1eaf5; --color-muted:#ccc3d8; --color-primary:#c3acdf; --color-primary-hover:#d6c2ed; --color-surface:#364359; --color-border:#596179;
  --metric-ink:#f2e8fc; --income-ink:#d3b8ed;
}
body[data-daylight=night] .sky-rays { display:none; }
body[data-daylight=night] .sky-stars { display:block; opacity:.65; animation:star-glow 5s ease-in-out infinite; }
body[data-daylight=night] .sky-clouds { fill:#8493ad; opacity:.13; }
body[data-daylight=night] .currency,body[data-daylight=night] .digit-colon { color:#b7a0d0; }
body[data-daylight=night] .speech-bubble { box-shadow:0 4px 0 #202b3d; }
body[data-daylight=night] .button.primary { color:#293246; }
body[data-daylight=night] input[type=text],body[data-daylight=night] input[type=time],body[data-daylight=night] input[type=number],body[data-daylight=night] select { background:#29374b; color:#f1eaf5; border-color:#8990a7; }
body[data-daylight=night] .mood-option span,body[data-daylight=night] .name-presets button { background:#43516a; color:#f1eaf5; border-color:#758099; }
body[data-daylight=night] .mood-option input:checked+span { background:#c3acdf; color:#293246; }
body[data-daylight=night] .pet-dock { box-shadow:0 6px 0 #1f2a3a; }
body[data-daylight=night] .scene-bottom time,body[data-daylight=night] nav .icon-button { color:#c9badc; }
body[data-daylight=night] .form-error { color:#8e2e46; }
.time-value { color:var(--metric-ink); }
.income-value { color:var(--income-ink); }
.site-header { position:relative; }
.weather-chip,.mood-chip { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; padding:8px 13px; border:0; border-radius:14px; background:transparent; color:var(--color-muted); font-size:12px; white-space:nowrap; }
.weather-chip { margin-left:auto; margin-right:24px; }
.weather-chip>span:first-child { font-size:24px; line-height:1; }
.mood-chip { padding:0 12px; margin:0 0 29px -12px; background:rgba(255,255,255,.24); color:var(--metric-ink); font-size:12px; }
.mood-chip>span:first-child { font-size:21px; }
.income-section { position:relative; }
.income-configure { position:absolute; top:0; right:0; color:var(--color-muted); }
.income-heading { min-height:30px; }
.income-row { margin-top:12px; }
.day-progress { margin-top:28px; }
.numbers { padding-bottom:24px; }
.pet-space { padding-top:60px; }
.pet-button { border-radius:30%; }
.pet-stage { padding-bottom:2px; }
.pet-gaze { transform-origin:305px 280px; transform:translate(var(--gaze-head-x,0px),var(--gaze-head-y,0px)) rotate(var(--gaze-turn,0deg)); transition:transform 240ms var(--ease-out); }
.pet-pupils { transform:translate(var(--gaze-x,0px),var(--gaze-y,0px)); transition:transform 160ms var(--ease-out); }
.pet-head { animation:head-idle 5.4s ease-in-out infinite; }
.pet-tail { animation:tail-alive 3s ease-in-out infinite; }
.pet-open-eyes { animation:blink 4.8s infinite; }
.pet-mouth-open,.pet-mouth-chew,.pet-cheeks,.pet-sparkle-eyes,.pet-sleepy-eyes,.pet-brows { display:none; }
.pet-lick,.pat-hand,.food-crumbs,.pet-zzz,.pet-thought,.pet-purr,.pet-sparkles { opacity:0; pointer-events:none; }
.pet-paw-right { transform-origin:70% 65%; }
.pat-hand { transform-origin:320px 100px; }
.pet-hearts { transform-origin:300px 120px; }
.pet-stage[data-action] .pet-head { animation:none; }
.pet-stage[data-action=pet] .pet-paw { animation:cuddle-left .52s ease-in-out infinite; }
.pet-stage[data-action=pet] .pet-paw-right { animation:cuddle-right .52s ease-in-out -.26s infinite; }
.pet-paw-right,.pet-blush { transition:transform 200ms var(--ease-out),opacity 150ms; }
.pet-blush { transform-box:fill-box; transform-origin:center; }
.pet-stage[data-action=pet] .pet-blush { opacity:1; transform:scale(1.2); }
.pet-stage[data-action=pet] .pet-mouth-normal { display:none; }
.pet-stage[data-action=pet] .pet-mouth-open { display:block; transform-origin:305px 239px; transform:scale(.85,.95); }
.pet-stage[data-action=pet] .pet-purr { animation:purr-lines .45s ease-in-out infinite alternate; }
.pet-stage[data-action=pet] .pet-body { animation:cuddle-body .52s ease-in-out infinite; }
.pet-stage[data-action=pet] .pet-tail,.pet-stage[data-action=feed] .pet-tail { animation:tail-alive .36s ease-in-out infinite; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-open-eyes { display:block; transform:scale(1.15); animation:none; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-happy-eyes { display:none; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-pupils { opacity:0; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-sparkle-eyes { display:block; animation:hungry-eyes .3s ease-in-out infinite alternate; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-paw { transform:translate(-10px,-30px) rotate(-45deg); }
.pet-stage[data-action=feed][data-step=anticipate] .pet-paw-right { transform:translate(5px,-24px) rotate(36deg); }
.pet-stage[data-action=feed] .pet-mouth-normal { display:none; }
.pet-stage[data-action=feed] .pet-mouth-open { display:block; }
.pet-stage[data-action=feed][data-step=anticipate] .pet-mouth-open { transform-origin:305px 237px; transform:scale(1.3,1.4); }
.pet-stage[data-action=feed][data-step=chew] .pet-mouth-open { display:none; }
.pet-stage[data-action=feed][data-step=chew] .pet-mouth-chew { display:block; transform-origin:305px 237px; animation:chew .2s ease-in-out 4; }
.pet-stage[data-action=feed][data-step=chew] .pet-cheeks { display:block; }
.pet-stage[data-action=feed][data-step=chew] .pet-head { animation:munch-bob .2s ease-in-out 4; }
.pet-stage[data-action=feed][data-step=chew] .pet-blush { animation:puff-cheeks .2s ease-in-out 4; }
.pet-stage[data-step=chew] .food-crumbs { animation:crumb-pop .65s ease-out 1; }
.pet-stage[data-action=feed][data-step=satisfied] .pet-mouth-normal { display:block; }
.pet-stage[data-action=feed][data-step=satisfied] .pet-mouth-open { display:none; }
.pet-stage[data-action=feed][data-step=satisfied] .pet-lick { opacity:1; transform-origin:305px 232px; animation:lick .45s ease-in-out 2; }
.pet-stage[data-mood=sleepy]:not([data-action]) .pet-open-eyes,.pet-stage[data-mood=lazy]:not([data-action]) .pet-open-eyes { display:none; }
.pet-stage[data-mood=sleepy]:not([data-action]) .pet-sleepy-eyes,.pet-stage[data-mood=lazy]:not([data-action]) .pet-sleepy-eyes { display:block; }
.pet-stage[data-mood=grumpy]:not([data-action]) .pet-brows { display:block; }
.pet-stage[data-mood=grumpy] .pet-tail { animation-duration:1.5s; }
.pet-stage[data-mood=happy]:not([data-action]) .pet-open-eyes { display:none; }
.pet-stage[data-mood=happy]:not([data-action]) .pet-happy-eyes { display:block; }
.pet-stage[data-mood=cozy] .pet-head { animation-duration:7s; }
.pet-stage[data-idle=type] .pet-paw,.pet-stage[data-mood=busy]:not([data-action]) .pet-paw { animation:tap-left .55s ease-in-out infinite; }
.pet-stage[data-idle=type] .pet-paw-right,.pet-stage[data-mood=busy]:not([data-action]) .pet-paw-right { animation:tap-right .55s ease-in-out -.27s infinite; }
.pet-stage[data-idle=look] .pet-head { animation:look-out 2.9s ease-in-out; }
.pet-stage[data-idle=look] .pet-pupils { transform:translate(7px,-5px); }
.pet-stage[data-idle=look] .pet-thought { animation:thought-float 2.9s ease-in-out; }
.pet-stage[data-idle=stretch] .pet-head { animation:stretch-head 2.9s ease-in-out; }
.pet-stage[data-idle=stretch] .pet-paw { animation:stretch-left 2.9s ease-in-out; }
.pet-stage[data-idle=stretch] .pet-paw-right { animation:stretch-right 2.9s ease-in-out; }
.pet-stage[data-idle=yawn] .pet-open-eyes { display:none; }
.pet-stage[data-idle=yawn] .pet-sleepy-eyes { display:block; }
.pet-stage[data-idle=yawn] .pet-happy-eyes,.pet-stage[data-idle=yawn] .pet-mouth-normal { display:none; }
.pet-stage[data-idle=yawn] .pet-mouth-open { display:block; transform-origin:305px 237px; animation:yawn 2.9s ease-in-out; }
.pet-stage[data-idle=yawn] .pet-zzz { animation:thought-float 2.9s ease-in-out; }
.pet-stage[data-gaze]:not([data-action]) .pet-open-eyes { display:block; }
.pet-stage[data-gaze]:not([data-action]) .pet-sleepy-eyes,.pet-stage[data-gaze]:not([data-action]) .pet-happy-eyes { display:none; }
.window-rain,.window-snow,.window-night { display:none; }
.window-cloud { opacity:.7; animation:window-cloud 10s ease-in-out infinite alternate; }
body[data-weather=clear] .window-cloud { opacity:.35; }
body[data-weather=rain] .window-rain,body[data-weather=storm] .window-rain { display:block; animation:window-rain 1.2s linear infinite; }
body[data-weather=snow] .window-snow { display:block; animation:window-rain 5s linear infinite; }
body[data-weather=rain] .scene-sun,body[data-weather=storm] .scene-sun,body[data-weather=snow] .scene-sun,body[data-weather=fog] .scene-sun { opacity:.2; }
body[data-daylight=night] .scene-sun { display:none; }
body[data-daylight=night] .window-night { display:block; }
body[data-daylight=night] .window-scene>rect:nth-of-type(2) { fill:#354761; }
body[data-daylight=night] .window-scene>path { fill:#60708a; }
body[data-daylight=night] .window-cloud { opacity:.2; }
.mood-options { gap:10px; }
.mood-option span { gap:5px; padding:12px 7px; font-size:12px; display:flex; align-items:center; justify-content:center; }
.mood-option b { font-size:21px; font-weight:400; }
.weekly-moods { font-size:12px; color:var(--color-muted); margin-top:10px; }
.weekly-moods summary { cursor:pointer; min-height:40px; display:flex; align-items:center; }
.weekly-moods>div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.weekly-moods label { display:flex; flex-direction:column; gap:6px; }
.weekly-moods select { min-height:40px; width:100%; border:1px solid #c9bdd8; background:var(--color-surface); color:var(--color-text); border-radius:9px; padding:5px; font:inherit; }
.weather-dialog { width:440px; }
.weather-detail { font-size:24px; line-height:1.5; margin:0 0 15px; }
.weather-actions { display:flex; gap:10px; margin-bottom:24px; }
#city-form label { display:block; font-size:12px; color:var(--color-muted); margin-bottom:8px; }
.city-search-row { display:flex; gap:10px; }
.city-search-row input { min-width:0; }
.city-search-row button { flex:none; }
.city-results { display:grid; gap:7px; font-size:12px; color:var(--color-muted); margin-top:13px; }
.city-result { min-height:44px; background:var(--color-surface); color:var(--color-text); border:1px solid var(--color-border); border-radius:9px; padding:9px 12px; text-align:left; font:inherit; }
.weather-credit { font-size:11px; color:var(--color-muted); line-height:1.8; margin-top:20px; }
@keyframes head-idle { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-4px) rotate(1.3deg); } }
@keyframes tail-alive { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(8deg); } }
@keyframes tap-left { 0%,100% { transform:translateY(0) rotate(-2deg); } 50% { transform:translateY(-8px) rotate(-12deg); } }
@keyframes tap-right { 0%,100% { transform:translateY(-7px) rotate(8deg); } 50% { transform:translateY(0) rotate(0deg); } }
@keyframes look-out { 0%,100% { transform:rotate(0); } 30%,75% { transform:translate(9px,-5px) rotate(8deg); } }
@keyframes stretch-head { 0%,100% { transform:translateY(0) rotate(0); } 40%,65% { transform:translateY(-15px) rotate(-5deg); } }
@keyframes stretch-left { 0%,100% { transform:rotate(0); } 40%,65% { transform:translate(-8px,-22px) rotate(-72deg); } }
@keyframes stretch-right { 0%,100% { transform:rotate(0); } 40%,65% { transform:translate(8px,-22px) rotate(65deg); } }
@keyframes yawn { 0%,100% { transform:scale(.4,.25); } 35%,65% { transform:scale(1.1,1.2); } }
@keyframes chew { 0%,100% { transform:scale(1,.45); } 50% { transform:scale(.8,.9); } }
@keyframes lick { 0%,100% { transform:rotate(0) scaleX(.5); } 45% { transform:rotate(-30deg) scale(1.4,1.15); } }
@keyframes crumb-pop { from { opacity:1; transform:translateY(-2px) scale(.8); } to { opacity:0; transform:translateY(25px) scale(1.25); } }
@keyframes cuddle-left { 0%,100% { transform:translate(-4px,-33px) rotate(-58deg); } 50% { transform:translate(-9px,-42px) rotate(-72deg); } }
@keyframes cuddle-right { 0%,100% { transform:translate(5px,-30px) rotate(40deg); } 50% { transform:translate(10px,-40px) rotate(55deg); } }
@keyframes cuddle-body { 0%,100% { transform:translateY(0) scale(1.03,.98); } 50% { transform:translateY(-5px) scale(.99,1.03); } }
@keyframes purr-lines { from { opacity:.4; transform:translateY(2px) scale(.98); } to { opacity:1; transform:translateY(-3px) scale(1.02); } }
@keyframes hungry-eyes { from { opacity:.8; } to { opacity:1; } }
@keyframes munch-bob { 0%,100% { transform:translateY(3px) rotate(-2deg) scale(1.08,.94); } 50% { transform:translateY(-3px) rotate(2deg) scale(1.03,1.03); } }
@keyframes puff-cheeks { 0%,100% { transform:scale(1.15,1.3); } 50% { transform:scale(1.4,1.6); } }
@keyframes thought-float { 0%,100% { opacity:0; transform:translateY(6px); } 30%,75% { opacity:.9; transform:translateY(-5px); } }
@keyframes cloud-drift { from { transform:translateX(-25px); } to { transform:translateX(55px); } }
@keyframes rainv { from { transform:translate(0,-30px); } to { transform:translate(-20px,35px); } }
@keyframes rainfall { from { transform:translate(0,-35px); } to { transform:translate(-35px,75px); } }
@keyframes snowfall { from { transform:translate(0,-30px); } to { transform:translate(35px,80px); } }
@keyframes sun-glow { 0%,100% { opacity:.15; } 50% { opacity:.4; } }
@keyframes star-glow { 0%,100% { opacity:.4; } 50% { opacity:.85; } }
@keyframes lightning { 0%,68%,71%,100% { opacity:0; } 69%,70% { opacity:.45; } }
@keyframes window-cloud { from { transform:translateX(-5px); } to { transform:translateX(10px); } }
@keyframes window-rain { from { transform:translate(0,-5px); } to { transform:translate(-3px,10px); } }
@media(hover:hover) and (pointer:fine) { .weather-chip:hover,.mood-chip:hover { background:rgba(255,255,255,.22); } }
@media(max-width:1100px) { .weather-chip { margin-right:10px; } }
@media(max-width:760px) { .site-header { gap:6px; } .weather-chip { margin-right:0; padding:7px; font-size:10px; gap:5px; max-width:165px; } .weather-chip #weather-value { max-width:110px; overflow:hidden; text-overflow:ellipsis; } .weather-chip>span:first-child { font-size:20px; } .mood-chip { grid-column:1/-1; justify-self:start; min-height:33px; margin:0 0 1px 0; padding:1px 9px; font-size:11px; } .numbers { row-gap:11px; padding-bottom:8px; } .day-progress { margin-top:15px; } .income-configure { top:15px; right:-8px; } .income-row { margin-top:10px; } .pet-space { margin-top:0; } .scene-bottom { padding-top:15px; } }
@container page (max-width:760px) { .mood-chip { grid-column:1/-1; justify-self:start; min-height:33px; margin:0 0 1px; padding:1px 9px; font-size:11px; } .numbers { row-gap:11px; padding-bottom:8px; } .day-progress { margin-top:15px; } .income-configure { top:15px; right:-8px; } .income-row { margin-top:10px; } }
@media(max-width:380px) { .site-header { padding:0 12px; } .brand { font-size:19px; gap:6px; } .brand-cat { width:28px; height:28px; } .weather-chip { max-width:105px; margin-left:4px; gap:4px; } .weather-chip #weather-value { max-width:72px; } .weather-chip>span:first-child { font-size:17px; } nav { margin-left:auto; } .site-header nav .icon-button { min-width:34px; min-height:40px; padding:7px; } .site-header nav .icon { width:18px; height:18px; } }
html[data-motion=off] .pet-stage[data-action] .pet-happy-eyes { display:block; }
html[data-motion=off] .pet-stage[data-action] .pet-open-eyes,html[data-motion=off] .pet-stage[data-action] .pet-sleepy-eyes { display:none; }
body { min-height:100dvh; }
.pet-food { transform-origin:470px 272px; }
body { color:var(--color-text); }
body[data-daylight=night] .desk-art>ellipse:first-child { fill:#151f30; opacity:.45; }
.income-configure { position:static; margin:0; }
body[data-daylight=night] .brand-cat { color:#5c4866; }
/* Top date and a single settings entry; retired controls have no UI. */
.header-frame { container-type:inline-size; container-name:header; }
.top-date { display:flex; align-items:baseline; gap:9px; margin-left:24px; white-space:nowrap; }
#today-weekday { font-size:15px; font-weight:600; color:var(--color-text); }
#today-calendar { font-size:11px; color:var(--color-muted); }
.scene-bottom { display:flex; justify-content:center; }
@container header (max-width:760px) {
  .site-header { display:grid; grid-template-columns:minmax(100px,1fr) auto 44px; grid-template-rows:1fr 1fr; column-gap:12px; row-gap:2px; height:96px; padding:15px 24px; }
  .brand { grid-column:1; grid-row:1; align-self:end; }
  .top-date { grid-column:1; grid-row:2; align-self:start; margin:2px 0 0; gap:7px; }
  #today-weekday { font-size:12px; }
  #today-calendar { font-size:10px; }
  .weather-chip { grid-column:2; grid-row:1/3; margin:0; }
  .site-header nav { grid-column:3; grid-row:1/3; margin:0; }
}
@media(max-width:380px) { .site-header { padding-left:16px; padding-right:16px; column-gap:7px; grid-template-columns:minmax(96px,1fr) auto 38px; } }