:root{color-scheme:light;background:#f6eede;color:#3f492f;font-family:Georgia,serif}*{box-sizing:border-box}html,body{margin:0}:root{--land-filter:none;--object-filter:brightness(1);--ink:#3f492f;--accent:#9a563d;--wash:transparent;--halo:0;--stars:0;--moon:0;--control-bg:#f6eedecc;--control-ink:#4e5a3c}main{position:relative;width:100%;height:100svh;min-height:0;overflow:hidden;isolation:isolate;background:#f6eede}
.composition{position:absolute;left:50%;top:50%;width:max(100vw,150svh);height:max(100svh,66.666667vw);transform:translate(-50%,-50%);container-type:inline-size}
.scenery,.scenery img{position:absolute;inset:0;display:block;width:100%;height:100%}
.scenery{z-index:0;filter:var(--land-filter);transition:filter 1.4s}
.color-wash{position:absolute;inset:0;background:var(--wash);z-index:1;pointer-events:none;transition:background 1.4s}
.horizon-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 66% 59%,#f6c27c88,transparent 49%);opacity:var(--halo);z-index:2;pointer-events:none;transition:opacity 1.4s}
.wordmark{position:absolute;left:52.5%;top:43.5%;transform:translate(-50%,-50%);margin:0;text-align:center;font-family:Baskerville,'Baskerville Old Face','Times New Roman',serif;font-weight:400;font-size:12cqw;line-height:.8;letter-spacing:-.055em;white-space:nowrap;color:var(--ink);text-shadow:0 1px 18px #f6eede80;z-index:5;transition:color 1.4s,text-shadow 1.4s}
.wordmark span{display:block}
.wordmark .simple{font-style:italic;font-size:1.02em;letter-spacing:-.065em;margin:.06em 0 .14em;padding-right:.035em;color:var(--accent);transition:color 1.4s}
.wordmark .life{font-size:.98em}
.orange-tree{position:absolute;width:50%;left:-8%;top:-7%;height:auto;pointer-events:none;transform-origin:15% 14%;animation:canopy-gust 10s ease-in-out infinite;z-index:3;filter:saturate(.72) var(--object-filter);transition:filter 1.4s}
.viewport-foreground{position:absolute;left:0;bottom:0;width:clamp(220px,27vw,400px);height:clamp(145px,18vw,230px);z-index:8;pointer-events:none;filter:var(--object-filter);transition:filter 1.4s}
.foreground-sprig{position:absolute;bottom:-9%;height:auto;transform-origin:50% 96%;animation:sprig-sway 8s ease-in-out infinite}
.sprig-1{left:-5%;width:34%;--lean:4deg;animation-delay:-2s}
.sprig-2{left:20%;width:32%;--lean:5deg;animation-duration:9.5s;animation-delay:-3.5s}
.sprig-3{left:46%;width:29%;--lean:3.8deg;animation-duration:7.5s;animation-delay:-1s}
.water-ripples{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;filter:var(--object-filter);transition:filter 1.4s}
.water-mobile{display:none}
.boat-voyage{animation:boat-glide 115s ease-in-out infinite alternate}
.route-near{animation-duration:135s;animation-direction:alternate-reverse}
.boat-rock{transform-box:fill-box;transform-origin:50% 90%;animation:boat-rock 7s ease-in-out infinite alternate}
.boat-wake{transform-box:view-box;transform-origin:0 0;opacity:0;animation:hull-ripple 18s linear infinite;vector-effect:non-scaling-stroke}
.wake-two{animation-delay:-6s}
.wake-three{animation-delay:-12s}
.occasional-boat{opacity:0;animation:occasional-boat 100s linear infinite}
.butterfly{position:absolute;left:16%;top:63%;width:3.2%;z-index:6;pointer-events:none;animation:butterfly-flight 38s ease-in-out infinite}
.butterfly svg,.floating-leaf svg{width:100%;height:auto;display:block}
.wing{transform-box:view-box;transform-origin:30px 26px;animation:wing-flap .7s ease-in-out infinite alternate}
.wing-right{animation-delay:-.15s}
.wind-plant{position:absolute;width:10%;height:auto;right:1%;bottom:-2%;z-index:4;pointer-events:none;transform-origin:78% 100%;animation:right-gust 9s ease-in-out infinite;animation-delay:-3s;filter:var(--object-filter)}
.floating-leaf{position:absolute;left:17%;top:24%;width:3.6%;z-index:7;pointer-events:none;opacity:0;transform-origin:20% 90%;animation:wind-carried-leaf 52s ease-in-out infinite;filter:var(--object-filter)}
.stars{position:absolute;inset:0;opacity:var(--stars);transition:opacity 1.8s;z-index:2;pointer-events:none}
.star{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#fbf5df;box-shadow:0 0 5px #fff2d466;animation:twinkle var(--duration) ease-in-out var(--delay) infinite alternate}
.moon{position:absolute;width:4%;height:auto;left:80%;top:15%;opacity:var(--moon);transition:opacity 1.8s;z-index:2;filter:drop-shadow(0 0 9px #f3e7c922);pointer-events:none}
.morning-birds{position:absolute;left:69%;top:41%;width:12%;opacity:0;z-index:2;pointer-events:none;animation:birds 70s ease-in-out infinite alternate}
.motion-toggle{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));width:36px;height:36px;display:grid;place-items:center;border:1px solid #9a9b7560;border-radius:50%;background:var(--control-bg);color:var(--control-ink);cursor:pointer;z-index:20}
.motion-toggle svg{width:12px;height:12px}
.motion-toggle:focus-visible,.time-controls summary:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.motion-toggle[hidden]{display:none}
.time-controls{position:absolute;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:20;color:var(--control-ink);font:12px/1.4 system-ui,sans-serif}
.time-controls summary{display:flex;align-items:center;gap:6px;padding:9px 12px;border-radius:24px;border:1px solid #9a9b7560;background:var(--control-bg);cursor:pointer;list-style:none}
.time-controls summary::-webkit-details-marker{display:none}
.time-controls summary svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.time-panel{position:absolute;right:0;bottom:48px;width:210px;padding:16px;border-radius:12px;background:var(--control-bg);border:1px solid #9a9b7560;box-shadow:0 8px 35px #1a281e18;backdrop-filter:blur(12px)}
.time-panel label{display:block;font-weight:600;margin-bottom:8px}
.time-panel select{width:100%;font:inherit;border:1px solid #929b7770;border-radius:6px;padding:8px;background:#f6eede;color:#394029}
.time-note{font-size:11px;opacity:.75;margin:10px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.paused .animated,.tab-hidden .animated{animation-play-state:paused}
:root[data-period=morning]{--land-filter:brightness(1.02) saturate(.85);--object-filter:saturate(.85);--wash:linear-gradient(#f4cda822,#f4ddc400 55%);--halo:.45;--ink:#53513a;--accent:#ab6b4a}:root[data-period=morning] .morning-birds{opacity:.6}:root[data-period=sunset]{--land-filter:brightness(.81) sepia(.2) saturate(.85);--object-filter:brightness(.82) sepia(.15) saturate(.8);--wash:linear-gradient(#ba704a36,#df984a22 58%,#65483920);--halo:.85;--ink:#63402e;--accent:#9e4b32;--control-bg:#f2dcc0de;--control-ink:#654730}:root[data-period=night]{--land-filter:brightness(.3) saturate(.48);--object-filter:brightness(.39) saturate(.48);--wash:linear-gradient(#10274380,#17334a4d);--halo:0;--stars:1;--moon:1;--ink:#eee4cd;--accent:#d5a285;--control-bg:#152b3ee8;--control-ink:#e2d8bf;background:#13283b}:root[data-period=night] .wordmark{text-shadow:0 2px 22px #0c1b3055}:root[data-period=night] .water-ripples,:root[data-period=night] .butterfly,:root[data-period=night] .floating-leaf{display:none}
@keyframes canopy-gust{0%,100%{transform:rotate(-.15deg)}35%{transform:rotate(-.85deg)}62%{transform:rotate(-.35deg)}80%{transform:rotate(-.65deg)}}
@keyframes sprig-sway{0%,100%{transform:rotate(.1deg)}36%{transform:rotate(var(--lean))}67%{transform:rotate(.7deg)}84%{transform:rotate(calc(var(--lean)*.65))}}
@keyframes right-gust{0%,100%{transform:rotate(.4deg)}40%{transform:rotate(3deg)}75%{transform:rotate(1.2deg)}}
@keyframes boat-glide{from{transform:translate(0,0)}to{transform:translate(35px,4px)}}
@keyframes boat-rock{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@keyframes hull-ripple{0%{transform:scale(.06);opacity:0}10%{opacity:.45}55%{opacity:.3}100%{transform:scale(2.5,2.1);opacity:0}}
@keyframes occasional-boat{0%,12%{opacity:0}22%,66%{opacity:1}78%,100%{opacity:0}}
@keyframes butterfly-flight{0%,100%{transform:translate(0,0) rotate(-8deg);opacity:.8}28%{transform:translate(65px,-55px) rotate(12deg);opacity:1}57%{transform:translate(115px,-10px) rotate(-6deg)}78%{transform:translate(38px,28px) rotate(6deg)}}
@keyframes wing-flap{from{transform:scaleX(.3)}to{transform:scaleX(1)}}
@keyframes wind-carried-leaf{0%{opacity:0;transform:translate(0,0) rotate(-12deg)}12%,28%{opacity:.85;transform:translate(0,0) rotate(-8deg)}45%{opacity:.85;transform:translate(-6cqw,9cqw) rotate(20deg)}62%{opacity:.85;transform:translate(-15cqw,23cqw) rotate(65deg)}76%{opacity:.75;transform:translate(-27cqw,39cqw) rotate(105deg)}85%,100%{opacity:0;transform:translate(-40cqw,55cqw) rotate(145deg)}}
@keyframes twinkle{from{opacity:.25;transform:scale(.7)}to{opacity:.95;transform:scale(1.15)}}
@keyframes birds{from{transform:translateX(-25px)}to{transform:translateX(70px)}}
@media(max-aspect-ratio:4/5){.composition{width:max(100vw,57.692308svh);height:max(100svh,173.333333vw)}
.wordmark{left:50%;top:47%;font-size:24cqw}
.orange-tree{width:80%;left:-9%;top:-5%}
.water-desktop{display:none}
.water-mobile{display:block}
.butterfly{left:17%;top:65%;width:6%}
.wind-plant{width:20%;right:3%;bottom:-1%}
.floating-leaf{left:22%;top:19%;width:6%}
.viewport-foreground{width:240px;height:180px}
.moon{width:7%;left:78%;top:25%}
.morning-birds{left:67%;top:35%;width:22%}}
@media(prefers-reduced-motion:reduce){.animated{animation:none!important}*,*::before,*::after{transition:none!important}
.floating-leaf,.motion-toggle{display:none}
.boat-wake{opacity:.14;transform:scale(.8)}
.star{opacity:.7}
.occasional-boat{opacity:0}}

.bumblebee{position:absolute;left:0;top:0;width:clamp(19px,1.8vw,27px);height:auto;pointer-events:none;z-index:10;opacity:0;filter:drop-shadow(0 2px 2px #2e3e201a);will-change:transform}
.bumblebee svg{display:block;width:100%;height:auto;overflow:visible}
.bee-wings{transform-box:fill-box;transform-origin:50% 90%;animation:bee-wingbeat .09s linear infinite alternate}
.bee-legs{transform-box:fill-box;transform-origin:50% 20%}
.bumblebee[data-state=landed] .bee-wings{animation:none;transform:scaleY(.25) rotate(-8deg);opacity:.65}
.bumblebee[data-state=landed] .bee-legs{animation:bee-crawl .26s ease-in-out infinite alternate}
.bumblebee[data-state=landed]{filter:none}
@keyframes bee-wingbeat{from{transform:scaleY(.25) rotate(-15deg)}to{transform:scaleY(1) rotate(8deg)}}
@keyframes bee-crawl{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}:root[data-period=night] .bumblebee{display:none}
@media(prefers-reduced-motion:reduce){.bumblebee{display:none}}

/* Sunset: give the lettering clear contrast against the amber scenery. */
:root[data-period=sunset]{--ink:#30392b;--accent:#693a27}
:root[data-period=sunset] .wordmark{text-shadow:0 1px 1px #fff1d9aa,0 0 14px #fff1d944}
:root[data-period=sunset] .wordmark::before{content:"";position:absolute;inset:-15% -25%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#fff3dc9e 0%,#fff3dc75 35%,#fff3dc22 58%,transparent 73%);border-radius:50%}

/* A few bright stars shimmer; the quieter ones keep the sky calm. */
.star{animation-name:quiet-twinkle}
.star:nth-child(4n+1){animation-name:bright-twinkle;box-shadow:0 0 5px #fff2d480}
.star:nth-child(7n){animation-duration:8s}
@keyframes quiet-twinkle{from{opacity:.35;transform:scale(.85)}to{opacity:.65;transform:scale(1)}}
@keyframes bright-twinkle{0%,100%{opacity:.2;transform:scale(.7)}45%{opacity:.95;transform:scale(1.3)}62%{opacity:.48;transform:scale(.95)}}
.shooting-star{position:absolute;left:var(--meteor-x,4.5%);top:var(--meteor-y,42%);width:clamp(60px,8cqw,125px);height:1.5px;z-index:2;opacity:0;pointer-events:none;transform-origin:100% 50%;border-radius:50%;background:linear-gradient(90deg,transparent,#f6e8c966 60%,#fff5df);filter:drop-shadow(0 0 3px #fff1cf55)}
.shooting-star::after{content:"";position:absolute;right:0;top:-1px;width:3px;height:3px;border-radius:50%;background:#fff8e9;box-shadow:0 0 5px #fff2d6}
.shooting-star.is-shooting{animation:shoot-across 1.65s ease-out both}
@keyframes shoot-across{0%{opacity:0;transform:translate(-2cqw,-1cqw) rotate(20deg) scaleX(.4)}12%{opacity:.85}55%{opacity:.7;transform:translate(7cqw,2cqw) rotate(20deg) scaleX(1)}100%{opacity:0;transform:translate(17cqw,5cqw) rotate(20deg) scaleX(.45)}}main:not([data-period=night]) .shooting-star{display:none}
.shooting-star-test,.meteor-help{display:none}:root[data-period=night] .shooting-star-test{display:block;width:100%;margin-top:13px;padding:8px;border:1px solid #c8bda66b;border-radius:6px;background:#ecdec51a;color:inherit;font:inherit;cursor:pointer}:root[data-period=night] .shooting-star-test:hover:not(:disabled){background:#ecdec530}
.shooting-star-test:disabled{opacity:.5;cursor:default}
.shooting-star-test:focus-visible{outline:2px solid var(--accent);outline-offset:3px}:root[data-period=night] .meteor-help{display:block;margin:7px 0 0;font-size:10px;opacity:.7}
@media(prefers-reduced-motion:reduce){.shooting-star{display:none}
.star{animation:none!important;opacity:.65;transform:none}}

.animation-previews{margin-top:13px;border-top:1px solid #929b7740;padding-top:10px}
.animation-previews>summary{padding:0;border:0;border-radius:0;background:none;font-size:11px;display:block}
.animation-previews>summary::after{content:" +";opacity:.65}
.animation-previews[open]>summary::after{content:" −"}
.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}
.preview-grid .preview-trigger,.preview-grid .shooting-star-test{display:block!important;width:100%;margin:0;padding:8px 5px;border:1px solid #929b7760;border-radius:6px;background:transparent;color:inherit;font:inherit;font-size:10px;cursor:pointer}
.preview-grid .preview-trigger:hover:not(:disabled){background:#b0a17422}
.preview-grid .preview-trigger:disabled{opacity:.45;cursor:default}
.preview-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.preview-all{grid-column:1/-1}
.preview-hint{font-size:10px;line-height:1.4;opacity:.75;margin:8px 0 0}
.time-panel{max-height:calc(100svh - 100px);overflow:auto}
.meteor-help{display:none!important}
.preview-leaf .floating-leaf{animation:leaf-preview 19s ease-in-out both}
.preview-boat .occasional-boat{animation:boat-preview 21s ease-in-out both}
@keyframes leaf-preview{0%{opacity:0;transform:translate(0,0) rotate(-12deg)}6%{opacity:.9}20%{opacity:.9;transform:translate(-3cqw,6cqw) rotate(10deg)}50%{opacity:.9;transform:translate(-14cqw,23cqw) rotate(65deg)}80%{opacity:.65;transform:translate(-30cqw,45cqw) rotate(115deg)}100%{opacity:0;transform:translate(-40cqw,55cqw) rotate(145deg)}}
@keyframes boat-preview{0%{opacity:0}8%,75%{opacity:1}100%{opacity:0}}
.paused .animated,.tab-hidden .animated{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.preview-leaf .floating-leaf,.preview-boat .occasional-boat{animation:none!important}}
.preview-grid .preview-trigger{min-height:38px;font-size:11px}

/* The meteor enters rightward through the open left sky below the orange canopy, away from the moon. */
@media(max-aspect-ratio:4/5){.shooting-star{left:var(--meteor-x,4.5%);top:calc(var(--meteor-y,42%) - 8%);width:clamp(45px,10cqw,75px)}}

/* The original illustration and composition are retained. These rules refine behavior and fit. */
html, body { width: 100%; min-height: 100%; }
main { height: 100svh; min-height: 0; background: #f6eede; transition: background 1.8s; }
:root[data-period=night] main { background: #13283b; }
[hidden] { display: none !important; }
.orange-tree img { display: block; width: 100%; height: auto; }
.blossom-anchors { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.wordmark { width: 24.865cqw; font-size: inherit; line-height: 1; letter-spacing: normal; text-shadow: none !important; }
.wordmark svg { display: block; width: 100%; height: auto; overflow: visible; }
.wordmark path { transition: fill 1.8s; }
.wordmark .logo-accent { fill: var(--accent); }
.wordmark::before { display: none; }
.motion-toggle { width: 46px; height: 46px; }
.motion-toggle svg { width: 15px; height: 15px; }
.time-controls > summary { min-height: 46px; padding: 11px 15px; gap: 8px; }
.time-panel { bottom: 58px; width: min(250px, calc(100vw - 32px)); max-height: calc(100svh - 98px - env(safe-area-inset-bottom)); padding: 18px; }
.time-panel select { min-height: 44px; font-size: 16px; }
.time-note { font-size: 12px; line-height: 1.5; opacity: 1; }
.time-controls, .motion-toggle { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.motion-toggle:hover, .time-controls > summary:hover { border-color: var(--control-ink); }
:root[data-period=night] .time-panel select { background: #203748; color: #eee4cd; color-scheme: dark; }
.scenery, .color-wash, .orange-tree, .viewport-foreground, .water-ripples, .wind-plant, .floating-leaf, .bumblebee { transition: filter 1.8s, background 1.8s; }
.butterfly { filter: var(--object-filter); }
.bumblebee { filter: var(--object-filter); z-index: 9; will-change: auto; }
.event-bee .bumblebee { will-change: transform; }
.bumblebee[data-state=landed] { filter: var(--object-filter); }
.scenery { transition: filter 1.8s; }
:root[data-period=night] { --object-filter: brightness(.43) saturate(.5); }
/* Separate washes crossfade instead of snapping between unlike CSS gradients. */
.color-wash { background: none; }
.color-wash::before, .color-wash::after, .night-wash { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.8s; }
.color-wash::before { background: linear-gradient(#f4cda822, #f4ddc400 55%); }
.color-wash::after { background: linear-gradient(#ba704a36, #df984a22 58%, #65483920); }
.night-wash { z-index: 1; background: linear-gradient(#10274380, #17334a4d); }
:root[data-period=morning] .color-wash::before,
:root[data-period=sunset] .color-wash::after,
:root[data-period=night] .night-wash { opacity: 1; }

/* Motion is progressive enhancement. With no JavaScript, the complete scene stays still. */
main:not(.motion-ready), main:not(.motion-ready) * { transition: none !important; }
.animated { animation-play-state: paused; }
.motion-ready .animated { animation-play-state: running; }
:root[data-paused=true] .animated,
.paused .animated, .tab-hidden .animated { animation-play-state: paused !important; }
.orange-tree { animation-duration: 17s; }
.foreground-sprig { animation-duration: 13s; }
.sprig-2 { animation-duration: 16s; }
.sprig-3 { animation-duration: 14s; }
.wind-plant { animation-duration: 15s; }
@keyframes canopy-gust {
  0%, 23%, 100% { transform: rotate(-.15deg); }
  44% { transform: rotate(-.72deg); }
  61% { transform: rotate(-.24deg); }
  76% { transform: rotate(-.48deg); }
  90% { transform: rotate(-.15deg); }
}
@keyframes hull-ripple {
  0% { transform: scale(.18); opacity: 0; }
  17% { opacity: .22; }
  60% { opacity: .1; }
  100% { transform: scale(1.55, 1.3); opacity: 0; }
}
.boat-rock { animation-duration: 11s; }
@keyframes boat-rock { from { transform: rotate(-.9deg); } to { transform: rotate(.9deg); } }
.occasional-boat, .butterfly, .floating-leaf { animation: none; opacity: 0; }
.event-boat .occasional-boat { animation: quiet-boat 52s ease-in-out both; }
.event-leaf .floating-leaf { animation: leaf-preview 21s ease-in-out both; }
.event-butterfly .butterfly { animation: butterfly-visit 27s ease-in-out both; }
.butterfly .wing, .bumblebee .animated { animation-play-state: paused; }
.event-butterfly .wing, .event-bee .animated { animation-play-state: running; }
.occasional-boat .animated { animation-play-state: paused; }
.event-boat .occasional-boat .animated { animation-play-state: running; }
:root:not([data-period=night]) .star,
:root:not([data-period=morning]) .morning-birds { animation-play-state: paused; }
@keyframes quiet-boat { 0%, 100% { opacity: 0; } 14%, 80% { opacity: .95; } }
@keyframes butterfly-visit {
  0% { opacity: 0; transform: translate(-24px, 18px) rotate(-8deg); }
  12% { opacity: .85; }
  32% { transform: translate(35px, -32px) rotate(9deg); }
  60% { transform: translate(var(--butterfly-drift, 95px), -12px) rotate(-7deg); }
  80% { opacity: .85; transform: translate(65px, 22px) rotate(6deg); }
  100% { opacity: 0; transform: translate(128px, 3px) rotate(-5deg); }
}
.preview-grid button { min-height: 44px; padding: 8px 6px; border: 1px solid #929b7770; border-radius: 6px; color: inherit; background: transparent; font: inherit; cursor: pointer; }
.preview-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.preview-grid button:disabled { opacity: .5; cursor: default; }
.animation-previews > summary { min-height: 44px; display: flex; font-size: 12px; }
.preview-hint, .preview-status { font-size: 11px; line-height: 1.5; }
.preview-status:empty { display: none; }

@media (max-aspect-ratio: 4/5) { .wordmark { width: 49.73cqw; } }
/* Short landscape phones need a title and controls that fit the actual visible screen. */
@media (min-aspect-ratio: 2/1) {
  .wordmark { top: 50%; width: min(24.865cqw, calc((100svh - 100px) * .7957)); }
  .viewport-foreground { width: 210px; height: 145px; }
}
@media (max-height: 440px) {
  .motion-toggle { bottom: max(10px, env(safe-area-inset-bottom)); left: max(12px, env(safe-area-inset-left)); }
  .time-controls { bottom: max(10px, env(safe-area-inset-bottom)); right: max(12px, env(safe-area-inset-right)); }
  .time-panel { max-height: calc(100svh - 84px - env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .animated, .motion-ready .animated { animation: none !important; }
  .butterfly, .floating-leaf, .bumblebee, .shooting-star, .motion-toggle, .occasional-boat { display: none !important; }
  *, *::before, *::after { transition: none !important; }
}

/* Readable, keyboard-friendly controls on solid surfaces in every lighting mode. */
:root { --control-bg: #fbf5e8; --control-ink: #33412d; --control-border: #77836b; }
:root[data-period=morning] { --control-bg: #fbf5e8; --control-ink: #33412d; }
:root[data-period=sunset] { --control-bg: #f6e5ce; --control-ink: #503725; --control-border: #897157; }
:root[data-period=night] { --control-bg: #152b3e; --control-ink: #f1e7d4; --control-border: #99aaaf; }
.motion-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; min-width: 46px; padding: 0 15px; border-radius: 25px; font: 500 .875rem/1.2 system-ui, sans-serif; }
.motion-toggle, .time-controls summary { border-color: var(--control-border); }
.motion-toggle:disabled { cursor: default; opacity: 1; }
.motion-label { white-space: nowrap; }
.time-controls { font-size: .875rem; }
.time-controls > summary { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 1px; padding: 8px 15px; line-height: 1.25; min-height: 48px; }
.time-controls > summary > span:first-child { font-weight: 650; }
.period-label { grid-column: 1; grid-row: 2; font-size: .75rem; }
.time-controls > summary > svg { grid-column: 2; grid-row: 1 / 3; width: 14px; }
.time-controls[open] > summary > svg { transform: rotate(180deg); }
.time-panel { width: min(360px, calc(100vw - 32px)); bottom: 60px; padding: 18px; max-height: calc(100svh - 100px - env(safe-area-inset-bottom)); background: var(--control-bg); border: 1px solid var(--control-border); box-shadow: 0 8px 35px #13231935; backdrop-filter: none; overscroll-behavior: contain; scrollbar-gutter: stable; }
.panel-heading { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin: -7px -5px 12px 0; }
.panel-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 650; }
.close-controls { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 8px; border: 1px solid transparent; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.close-controls svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.time-panel label { font-size: .875rem; }
.time-panel select { background: var(--control-bg); color: var(--control-ink); border-color: var(--control-border); padding: 9px 8px; font-size: 1rem; min-height: 46px; }
:root[data-period=night] .time-panel select { background: var(--control-bg); color: var(--control-ink); }
.time-note, .menu-copy, .moment-list p { font-size: .8125rem; line-height: 1.55; opacity: 1; }
.play-controls, .thought-controls { border-top: 1px solid var(--control-border); margin-top: 18px; padding-top: 6px; }
.time-panel details > summary { min-height: 48px; border: 0; border-radius: 4px; padding: 8px 0; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.time-panel details > summary::after { content: '+'; font-size: 1.25rem; font-weight: 400; }
.time-panel details[open] > summary::after { content: '−'; }
.moment-list { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 16px; }
.moment-list p { margin: 6px 0 0; }
.moment-list button, .plain-button { display: block; width: 100%; min-height: 46px; padding: 10px 12px; color: var(--control-ink); border: 1px solid var(--control-border); border-radius: 7px; background: transparent; font: 600 .875rem/1.4 system-ui, sans-serif; text-align: left; cursor: pointer; }
.moment-list button:hover:not(:disabled), .plain-button:hover:not(:disabled), .close-controls:hover { background: #8b987a20; }
.moment-list button:disabled, .plain-button:disabled { cursor: default; border-style: dashed; font-weight: 400; }
#little-thought { margin: 10px 0 18px; font: italic 1.25rem/1.5 Georgia, serif; }
button:focus-visible, summary:focus-visible, select:focus-visible { outline: 3px solid var(--control-ink) !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px var(--control-bg); }
.paused *, .tab-hidden * { transition: none !important; }
@media (max-height: 440px) { .time-panel { max-height: calc(100svh - 88px - env(safe-area-inset-bottom)); } }
@media (max-width: 359px) { .motion-toggle { padding: 0 11px; } .time-controls > summary { padding-inline: 11px; } .time-panel { padding: 14px; } }
@media (forced-colors: active) {
  .time-panel, .motion-toggle, .time-controls summary, .time-panel select, .moment-list button, .plain-button { background: Canvas; color: CanvasText; border: 1px solid ButtonText; }
  button:focus-visible, summary:focus-visible, select:focus-visible { outline-color: Highlight !important; box-shadow: none; }
  .wordmark { color: CanvasText; } .wordmark .logo-accent { fill: CanvasText; }
}

/* Decorative moments use transforms and slow fades. They never receive focus. */
.ambient-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 4; }
.ambient-layer svg { display: block; width: 100%; height: auto; }
.moment { position: absolute; opacity: 0; pointer-events: none; }
.morning-birds { display: none; }
.bird-flock { left: -150px; top: var(--bird-height, 24%); width: clamp(75px, 10vw, 140px); color: #63715c; }
:root[data-period=sunset] .bird-flock { color: #514c3c; }
.event-birds .bird-flock { animation: birds-pass 19s linear both; animation-direction: var(--bird-direction, normal); }
.bird-facing, .bird-body, .bird-wing { transform-box: view-box; transform-origin: 0 0; }
:root[data-period=sunset] .bird-facing { transform: scaleX(-1); }
.bird-wing-near { --wing-up: 0deg; --wing-down: -108deg; --wing-glide: -51deg; }
.bird-wing-far { --wing-up: 16deg; --wing-down: -88deg; --wing-glide: -35deg; opacity: .65; }
.event-birds .bird-wing { animation: birds-wingbeat var(--wing-cycle) ease-in-out var(--wing-phase) infinite; }
.event-birds .bird-body { animation: birds-float 3.1s ease-in-out var(--wing-phase) infinite alternate; }
@keyframes birds-pass { 0% { opacity: 0; transform: translate(-20px, 25px); } 9%, 88% { opacity: .75; } 48% { transform: translate(50vw, -12px); } 100% { opacity: 0; transform: translate(calc(100vw + 180px), 18px); } }
/* Three shoulder-hinged wing strokes, followed by a short glide. Each bird has its own rhythm. */
@keyframes birds-wingbeat { 0%, 18%, 36%, 100% { transform: rotate(var(--wing-up)); } 9%, 27%, 45% { transform: rotate(var(--wing-down)); } 54%, 88% { transform: rotate(var(--wing-glide)); } }
@keyframes birds-float { from { transform: translateY(-1px) rotate(-2deg); } to { transform: translateY(1.5px) rotate(2deg); } }
.dew-drops { bottom: 14px; left: 0; width: clamp(200px, 25vw, 370px); }
.event-dew .dew-drops { animation: dew-light 16s ease-in-out both; }
@keyframes dew-light { 0%, 100% { opacity: 0; } 35% { opacity: .8; transform: translateY(-1px); } 68% { opacity: .3; } 84% { opacity: .65; transform: translateY(0); } }
.petal { position: absolute; width: 6px; height: 10px; border-radius: 80% 20% 70% 30%; background: #f5edcf; box-shadow: inset 1px 0 #bcb79a; left: calc(10% + var(--i) * 2.5%); top: calc(15% + var(--i) * 2%); opacity: 0; }
.event-petals .petal { animation: blossom-fall 18s ease-in-out both; animation-delay: calc(var(--i) * .8s); }
@keyframes blossom-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(20deg); } 12% { opacity: .9; } 40% { transform: translate(-2vw, 11vh) rotate(95deg); } 70% { opacity: .75; transform: translate(3vw, 25vh) rotate(180deg); } 100% { opacity: 0; transform: translate(-6vw, 41vh) rotate(275deg); } }
main[data-petals-variant="1"] .petal { left: calc(15% + var(--i) * 1.8%); width: 5px; }
main[data-petals-variant="2"] .petal { top: calc(12% + var(--i) * 2.5%); }
.lake-mist { right: -5%; bottom: 12%; width: 67%; }
.event-mist .lake-mist { animation: mist-pass 30s ease-in-out both; }
@keyframes mist-pass { 0% { opacity: 0; transform: translateX(4vw); } 20%, 65% { opacity: .65; } 100% { opacity: 0; transform: translateX(-7vw); } }
.fish-rings, .jump-fish { opacity: 0; }
.event-fish .jump-fish { animation: fish-arc 13s linear both; }
.event-fish .fish-rings { transform-origin: 46px 2px; animation: fish-ripples 13s ease-out both; }
@keyframes fish-arc { 0%, 12% { opacity: 0; transform: translate(0, 3px) rotate(-28deg); } 15% { opacity: .9; } 24% { opacity: .9; transform: translate(calc(var(--fish-sign, 1) * 23px), -32px) rotate(0deg); } 34% { opacity: .9; transform: translate(calc(var(--fish-sign, 1) * 46px), 1px) rotate(28deg); } 36%, 100% { opacity: 0; transform: translate(calc(var(--fish-sign, 1) * 46px), 6px); } }
@keyframes fish-ripples { 0%, 33% { opacity: 0; transform: scale(.3); } 38% { opacity: .7; } 100% { opacity: 0; transform: scale(2.4, 1.8); } }
main[data-fish-variant="1"] .fish-rings { translate: -92px 0; }
.event-breeze .orange-tree { animation: canopy-breeze 14s ease-in-out both; }
.event-breeze .foreground-sprig, .event-breeze .wind-plant { animation: garden-breeze 14s ease-in-out both; }
@keyframes canopy-breeze { 0%, 100% { transform: rotate(-.15deg); } 30% { transform: rotate(-1.35deg); } 48% { transform: rotate(-.45deg); } 64% { transform: rotate(-1deg); } 82% { transform: rotate(-.3deg); } }
@keyframes garden-breeze { 0%, 100% { transform: rotate(.3deg); } 30% { transform: rotate(6deg); } 48% { transform: rotate(2deg); } 64% { transform: rotate(4.5deg); } 82% { transform: rotate(1deg); } }
.firefly { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #e5db91; box-shadow: 0 0 5px 1px #d2d28e50; opacity: 0; }
.event-fireflies .firefly { animation: firefly-drift 21s ease-in-out both; animation-delay: calc(var(--i) * .7s); }
@keyframes firefly-drift { 0%, 100% { opacity: 0; transform: translate(0, 5px); } 25% { opacity: .8; transform: translate(16px, -15px); } 50% { opacity: .1; transform: translate(-2px, -29px); } 75% { opacity: .7; transform: translate(25px, -43px); } }
main[data-fireflies-variant="1"] .firefly { left: calc(100% - var(--x)); }
main[data-fireflies-variant="2"] .firefly { top: calc(var(--y) - 5%); }
.moon-moth { left: calc(var(--moon-x, 80vw) - 15px); top: calc(var(--moon-y, 15vh) + 30px); width: clamp(18px, 2vw, 28px); }
.event-moth .moon-moth { animation: moth-loop 24s ease-in-out both; }
.event-moth .moth-wings { transform-origin: 30px 28px; animation: moth-wingbeat .8s ease-in-out infinite alternate; }
@keyframes moth-loop { 0% { opacity: 0; transform: translate(10px, 55px) rotate(-15deg); } 16% { opacity: .7; } 35% { transform: translate(-38px, 10px) rotate(18deg); } 60% { opacity: .8; transform: translate(2px, -20px) rotate(-12deg); } 83% { opacity: .6; transform: translate(-57px, 5px) rotate(12deg); } 100% { opacity: 0; transform: translate(-80px, 35px) rotate(-10deg); } }
@keyframes moth-wingbeat { from { transform: scaleX(.45); } to { transform: scaleX(1); } }
main[data-moth-variant="1"] .moon-moth { left: calc(var(--moon-x, 80vw) - 45px); }
main[data-moth-variant="2"] .moon-moth { top: calc(var(--moon-y, 15vh) + 55px); }
.sky-cloud { left: -32vw; top: 18%; width: clamp(120px, 22vw, 290px); color: #fffdf0; }
:root[data-period=night] .sky-cloud { top: calc(var(--moon-y, 15vh) - 8px); color: #354657; }
.event-cloud .sky-cloud { animation: cloud-cross 40s linear both; }
@keyframes cloud-cross { 0% { opacity: 0; transform: translateX(0); } 12%, 85% { opacity: .45; } 100% { opacity: 0; transform: translateX(140vw); } }
main[data-cloud-variant="1"] .sky-cloud { width: clamp(100px, 18vw, 250px); margin-top: 20px; }
main[data-cloud-variant="2"] .sky-cloud { margin-top: -18px; }
.constellation { left: 46%; top: 5%; width: clamp(110px, 16vw, 220px); }
.event-constellation .constellation { animation: constellation-reveal 20s ease-in-out both; }
.constellation-line { stroke-dasharray: 230; stroke-dashoffset: 230; opacity: .25; }
.event-constellation .constellation-line { animation: connect-stars 20s ease-in-out both; }
@keyframes constellation-reveal { 0%, 100% { opacity: 0; } 28%, 70% { opacity: .85; } }
@keyframes connect-stars { 0%, 15% { stroke-dashoffset: 230; } 60%, 100% { stroke-dashoffset: 0; } }
main[data-constellation-variant="1"] .constellation { transform: rotate(12deg); top: 8%; }
main[data-constellation-variant="2"] .constellation { transform: scaleX(-1); left: 42%; }
.paused .animated, .tab-hidden .animated, main:not(.motion-ready) .animated { animation-play-state: paused !important; }
@media (max-aspect-ratio: 4/5) {
  .lake-mist { width: 100%; bottom: 10%; right: -23%; }
  .constellation { left: 40%; top: 21%; width: 38%; }
  main[data-constellation-variant="1"] .constellation { top: 23%; }
  .petal { width: 4px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-layer, .fish-visit { display: none !important; }
  .motion-toggle { display: inline-flex !important; }
  .animated, .moment { animation: none !important; }
}