:root{--paper:#fcf8ec;--ink:#345447;--muted:#637261;--green:#365b43;--line:#d8dacd;--gold:#c08a41}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 'Trebuchet MS',Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}header{max-width:1440px;margin:auto;padding:27px 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:9px;font-family:Georgia,serif;font-size:24px;font-weight:bold;letter-spacing:1px}.brand span{font-weight:normal;margin-left:-9px}.brand svg{width:31px;height:31px}header nav{display:flex;gap:35px;font-size:14px}header button{background:none;border:0;padding:0}.language{display:flex;gap:10px;font-size:13px}.language button{font-size:13px}.language [aria-pressed=true]{font-weight:bold;text-decoration:underline;text-underline-offset:6px}.language span{color:#b8bcaf}.intro{text-align:center;padding:36px 20px 0}.eyebrow{font-size:11px;letter-spacing:2.6px;font-weight:bold;color:var(--green);margin:0 0 9px}h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,4vw,53px);font-weight:normal;line-height:1.15;margin:0 0 13px}.intro>p:last-child{color:var(--muted);margin:0;font-size:15px}.scene{max-width:1280px;margin:-12px auto 0}.scene>svg{width:100%;height:auto;display:block}.room-link{outline:none}.room-link .room-fill{transition:fill .2s,filter .2s}.room-link:hover .room-fill,.room-link:focus .room-fill{fill:#f3d59b;filter:brightness(1.06)}.room-link:hover .room-label,.room-link:focus .room-label{fill:#244c35}.room-link:focus .focus-border{stroke:#fff5c6;stroke-width:5}.room-label{font-family:'Trebuchet MS',sans-serif;font-size:13px;fill:#fff5df;font-weight:bold;letter-spacing:.4px}.scene-caption{display:flex;align-items:center;gap:14px;max-width:1120px;margin:-4px auto 32px;padding:0 24px;color:var(--muted);font-size:13px}.small-leaf{font-size:25px;color:#66824a}.caption-line{height:1px;background:var(--line);flex:1}.scene-caption>span:last-child{font-family:Georgia,serif;font-style:italic}footer{border-top:1px solid var(--line);max-width:1300px;margin:auto;padding:20px 4%;display:flex;gap:30px;justify-content:space-between;color:var(--muted);font-size:12px}.draft{color:#52664a}a:hover,button:hover{color:#9b6529}:focus-visible{outline:3px solid #ab6f22;outline-offset:5px;border-radius:3px}[hidden]{display:none!important}.room-nav{max-width:1050px;margin:24px auto;padding:20px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;border-block:1px solid var(--line)}.room-nav a,.neighbors a{padding:7px 14px;border:1px solid #c9cec1;border-radius:30px;font-size:14px}.room-heading{text-align:center;max-width:760px;margin:30px auto 0;padding:0 20px}.room-heading .back{display:block;margin-bottom:24px;font-size:14px}.room-heading>p:last-child{color:var(--muted);max-width:640px;margin:15px auto}.interior{max-width:950px;margin:0 auto}.interior svg{display:block;width:100%;height:auto}.object-link:hover .object-card,.object-link:focus .object-card{fill:#ffebb4;stroke:#365b43;stroke-width:3}.object-hint{text-align:center;font-size:14px;color:var(--muted)}.neighbors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:950px;margin:25px auto 40px;padding:0 20px}.note{max-width:640px;margin:50px auto 100px;padding:20px}.note h1{font-size:40px}@media(min-width:1500px){.scene{max-width:1400px}}@media(max-width:650px){header{padding:18px 20px;gap:12px;flex-wrap:wrap}.brand{font-size:21px}header nav{order:3;width:100%;justify-content:center;gap:30px;padding-top:8px}.intro{padding:25px 15px 10px}.intro>p:last-child{font-size:14px}.scene{margin:0;overflow:auto}.scene>svg{width:860px;max-width:none;margin-left:calc((100vw - 860px)/2)}.scene-caption{flex-wrap:wrap;font-size:12px;margin:0 auto 25px;gap:8px}.scene-caption>span:last-child{display:none}footer{flex-wrap:wrap;gap:10px 25px;padding:18px 20px}.room-label{font-size:14px}.interior{overflow:auto}.interior svg{min-width:620px}.room-heading{margin-top:22px}.neighbors a{font-size:13px}.eyebrow{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

#mobile-rooms{display:none}@media(max-width:650px){.scene>svg{width:100%;margin:0}.scene{overflow:visible}#mobile-rooms{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:4px 20px 20px}#mobile-rooms a{font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:5px}.interior svg{min-width:0}.object-hint{padding:0 20px}}

.mobile-objects{display:none}@media(max-width:650px){.mobile-objects{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:8px 20px}.mobile-objects a{padding:10px 16px;border:1px solid #b89864;border-radius:5px;background:#f6e8c8;font-size:16px}}

/* Spring: warm paper, soft paint and small living details. */
.scene{background:radial-gradient(ellipse at 50% 43%,#edf6e5 0%,#f4f8e9 34%,transparent 69%)}
.room-link:hover .room-label,.room-link:focus .room-label{fill:#fff9da}
.room-link:hover .room-fill,.room-link:focus .room-fill{fill:#fff1c7}
.secret-bird:focus-visible{outline:none}.secret-bird:focus-visible>rect{stroke:#315d72;stroke-width:3}
.secret-bird .bird-body{transition:transform .25s;transform-origin:0 20px}.secret-bird:hover .bird-body,.secret-bird:focus-visible .bird-body{transform:rotate(-9deg) translateY(-3px)}
@media(prefers-reduced-motion:reduce){.secret-bird .bird-body{transition:none}.secret-bird:hover .bird-body,.secret-bird:focus-visible .bird-body{transform:none}}

/* Gentle atmosphere: transforms animate inside the fixed SVG placements. */
.atmosphere-controls{display:flex;gap:5px;align-items:center}
.atmosphere-controls button{padding:6px 10px;border:1px solid var(--line);border-radius:20px;font-size:13px;min-height:36px}
.atmosphere-controls button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
body{transition:background-color 1.2s,color 1.2s}
.tree-sway{transform-origin:0 145px;animation:tree-breeze 9s ease-in-out infinite alternate}
.flower-sway{transform-origin:0 25px;animation:flower-breeze 5.5s ease-in-out infinite alternate}
.scene svg>g:nth-of-type(even) .tree-sway{animation-delay:-4s;animation-duration:11s}
g:nth-child(3n)>.flower-sway{animation-delay:-2.7s;animation-duration:6.7s}
g:nth-child(3n+1)>.flower-sway{animation-delay:-1.4s;animation-duration:4.8s}
.sun-travel{transform:translate(965px,164px);animation:sun-journey 240s linear infinite alternate}
.sun-glow{animation:sun-breath 12s ease-in-out infinite alternate}
.sun-rays{animation:sun-rays-turn 100s linear infinite;transform-origin:0 0}
.day-sky,.night-sky,.day-clouds{transition:opacity 1.3s;pointer-events:none}
.night-sky{opacity:0}.day-sky{opacity:1}
.star{animation:star-shimmer 7s ease-in-out infinite alternate}.star-1{animation-delay:-3s;animation-duration:9s}.star-2{animation-delay:-5s;animation-duration:11s}
@keyframes tree-breeze{from{transform:rotate(-.7deg)}to{transform:rotate(1deg)}}
@keyframes flower-breeze{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
@keyframes sun-journey{0%{transform:translate(965px,164px)}25%{transform:translate(785px,18px)}50%{transform:translate(600px,-42px)}75%{transform:translate(405px,18px)}100%{transform:translate(220px,164px)}}
@keyframes sun-breath{from{opacity:.65;transform:scale(.92)}to{opacity:1;transform:scale(1.08)}}
@keyframes sun-rays-turn{to{transform:rotate(360deg)}}
@keyframes star-shimmer{from{opacity:.35}to{opacity:.95}}
html[data-time="night"]{color-scheme:dark;--paper:#182b3a;--ink:#f3e8cd;--muted:#b6c9ce;--green:#b9d4b8;--line:#3b5161}
html[data-time="night"] .scene{background:radial-gradient(ellipse at 50% 43%,#263f52 0%,#203748 34%,transparent 69%)}
html[data-time="night"] .day-sky,html[data-time="night"] .day-clouds{opacity:0}
html[data-time="night"] .night-sky{opacity:1}
html[data-time="night"] .tree-sway{filter:brightness(.62) saturate(.65)}
html[data-time="night"] .flower-sway{filter:brightness(.8)}
html[data-time="night"] .room-fill{fill:#f1cd89;filter:drop-shadow(0 0 8px #efc76c55)}
html[data-time="night"] .room-link:hover .room-fill,html[data-time="night"] .room-link:focus .room-fill{fill:#ffe6ab}
html[data-time="night"] .draft,html[data-time="night"] .small-leaf{color:#b9d4b8}
html[data-time="night"] a:hover,html[data-time="night"] button:hover{color:#f6d697}
html[data-time="night"] .atmosphere-controls button[aria-pressed="true"]:hover{color:#182b3a}
html[data-time="night"] .mobile-objects a{color:#354d3d}
html[data-motion="paused"] .scene *,html.page-hidden .scene *{animation-play-state:paused!important}
@media(max-width:1000px){header{gap:15px;flex-wrap:wrap}header nav{gap:22px}.atmosphere-controls{margin-left:auto}}
@media(max-width:650px){header nav{order:3;width:auto;flex:1;justify-content:flex-start;font-size:13px;gap:18px}.atmosphere-controls{order:4;gap:4px}.atmosphere-controls button{font-size:12px;padding:6px 8px}.language{margin-left:auto}}
@media(max-width:420px){header nav{width:100%;justify-content:center}.atmosphere-controls{order:5;margin:0 auto}}
@media(prefers-reduced-motion:reduce){.scene *{animation:none!important}body,.day-sky,.night-sky,.day-clouds{transition:none!important}}

html[data-time="night"] .meadow-ground{fill:#4a6655}
html[data-time="night"] .distant-grass{stroke:#405c4b}
html[data-time="night"] .flower-bed{fill:#58754f}
html[data-time="night"] .garden-path{fill:#899276}
html[data-time="night"] .stepping-stones{fill:#63745d}
html[data-time="night"] .grass-stroke{stroke:#608356}
html[data-time="night"] .grass-bushes{fill:#52744d}
html[data-time="night"] #logs rect{fill:#8d6544}
html[data-time="night"] #logs path:nth-of-type(1){stroke:#9e7650}
html[data-time="night"] #roof rect{fill:#527e7d}

/* Smoke rises from the flue; the roof overlaps the chimney's lower edge. */
.chimney-smoke{fill:#c8c5b9;opacity:0;animation:chimney-drift 10s linear infinite;transform-origin:0 0}
.smoke-two{animation-delay:-3.33s}.smoke-three{animation-delay:-6.66s}
html[data-time="night"] .chimney-smoke{fill:#c8d1d5}
@keyframes chimney-drift{
  0%{transform:translate(0,0) scale(.35);opacity:0}
  15%{transform:translate(-2px,-12px) scale(.55);opacity:.32}
  48%{transform:translate(8px,-40px) scale(.85);opacity:.24}
  78%{transform:translate(22px,-64px) scale(1.15);opacity:.12}
  100%{transform:translate(32px,-82px) scale(1.4);opacity:0}
}
@media(prefers-reduced-motion:reduce){.chimney-smoke{animation:none!important;opacity:.18;transform:translate(2px,-15px) scale(.6)}.smoke-two,.smoke-three{display:none}}
