:root{--bg:#fdfcf8;--fg:#1d1d1f;--muted:#6e6e73;--accent:#c2410c;--ph:#b4530a;--sky1:#ffd9a8;--sky2:#ffb37a;--hill:#9a3412;--orb:#fff3c4}
@media (prefers-color-scheme:dark){:root{--bg:#121214;--fg:#ececef;--muted:#9b9ba3;--accent:#fb923c;--ph:#f0a35e}}
[data-season=winter]{--sky1:#dbe7f5;--sky2:#a9c1df;--hill:#f4f7fb;--orb:#fff}
[data-season=spring]{--sky1:#d7f0ff;--sky2:#ffd6e8;--hill:#6fbf73;--orb:#fff6b0}
[data-season=summer]{--sky1:#8fd3ff;--sky2:#4aa8f0;--hill:#2f8f46;--orb:#ffe066}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.75 Inter,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:600px;margin:0 auto;padding:64px 24px 80px}
.kicker{font:italic 600 22px Fraunces,Georgia,serif;color:var(--accent);margin:36px 0 0}
h1{font:800 clamp(40px,8vw,64px)/1.05 Fraunces,Georgia,serif;letter-spacing:-.035em;margin:4px 0 20px;font-variation-settings:"opsz" 144}
.reveal{opacity:0;transform:translateY(12px);animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
.lede{font-size:19px}
a{text-decoration-thickness:1.5px;transition:color .2s}a:hover{color:#db2777}
h2{font:600 15px ui-sans-serif,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:40px 0 8px}
a{color:var(--accent);text-underline-offset:3px}
.things{padding-left:1.2em}.things li{margin:4px 0}
.links{margin-top:40px}
.ph{color:var(--ph);font-style:italic}
.window{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;color:inherit}
.window:focus-visible .sky{outline:3px solid var(--accent);outline-offset:4px}
.window:hover .sky{transform:translateY(-2px);box-shadow:inset 0 0 0 6px rgba(0,0,0,.08),0 12px 30px -12px rgba(194,65,12,.45)}
.sky{position:relative;transition:transform .3s,box-shadow .3s,background .8s;display:block;height:150px;border-radius:14px;overflow:hidden;background:linear-gradient(var(--sky1),var(--sky2));box-shadow:inset 0 0 0 6px rgba(0,0,0,.08);transition:background .8s}
.orb{position:absolute;top:24px;right:48px;width:40px;height:40px;border-radius:50%;background:var(--orb);box-shadow:0 0 30px var(--orb)}
.hills{position:absolute;left:-10%;right:-10%;bottom:-60px;height:110px;border-radius:50%;background:var(--hill);transition:background .8s}
.house{position:absolute;left:22%;bottom:28px;width:34px;height:24px;background:#7c2d12}
.house::before{content:"";position:absolute;left:-6px;top:-18px;border:23px solid transparent;border-top:0;border-bottom:18px solid #451a03}
.house::after{content:"";position:absolute;left:12px;top:8px;width:9px;height:9px;background:#fde68a}
.fx{position:absolute;inset:0}
@keyframes fall{to{background-position:0 220px,10px 200px}}
.caption{display:block;margin-top:8px;font:14px ui-sans-serif,system-ui,sans-serif;color:var(--muted)}
.fx i{position:absolute;top:-12px;width:9px;height:7px;border-radius:60% 0;background:#ea580c;transform:scale(var(--s));animation:drift 8s linear infinite}
.fx i:nth-child(3n){background:#facc15}.fx i:nth-child(4n){background:#b91c1c}
[data-season=winter] .fx i{background:#fff;border-radius:50%;width:6px;height:6px}
[data-season=spring] .fx i{background:#f9a8d4}
[data-season=summer] .fx i{display:none}
@keyframes drift{0%{transform:translate(0,0) rotate(0) scale(var(--s))}50%{transform:translate(18px,85px) rotate(180deg) scale(var(--s))}100%{transform:translate(-6px,175px) rotate(360deg) scale(var(--s))}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;animation:none}.ch{animation:none!important;opacity:1;transform:none}.ul path{animation:none;stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.fx i{animation:none!important;display:none}.sky,.hills{transition:none}}

h1{cursor:pointer;user-select:none}
.w{display:inline-block;white-space:nowrap;position:relative}
.ch{display:inline-block;opacity:0;transform:translateY(-.9em) rotate(-8deg);animation:place .55s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes place{60%{opacity:1;transform:translateY(.06em) rotate(1deg)}100%{opacity:1;transform:none}}
.ch.hop{animation:hop .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes hop{0%{opacity:1;transform:none}40%{opacity:1;transform:translateY(-.18em) rotate(-4deg)}100%{opacity:1;transform:none}}
.b .ch{background:linear-gradient(90deg,var(--accent),#db2777);-webkit-background-clip:text;background-clip:text;color:transparent}
.ul{position:absolute;left:-2%;bottom:-.12em;width:104%;height:.32em;overflow:visible}
.ul path{fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;opacity:.85}
h1.built .ul path{animation:draw .7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.dot .ch{color:#db2777}
h1.built .dot .ch{animation:pop .5s ease-out forwards}
@keyframes pop{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.6)}100%{opacity:1;transform:none}}