:root{color-scheme:dark;--night:#05110f;--real:#2ee0a4;--glow:#7cf5c8;--sun:#ffd35e;--sign:#0a5c43;--h:58vh;--floor:var(--night);--road:var(--night);--dash:var(--sun);--dusk:cubic-bezier(.4,0,.2,1)}
:root[data-theme=light]{--real:#14c08b;--sun:#ffc93c;--floor:#e4f1ea;--road:#fff;--dash:#d69a00}
html,body{background:var(--floor)}
body{color:var(--ink)}
main{position:relative;z-index:1}
.scene{position:fixed;z-index:0;inset:0;overflow:hidden;pointer-events:none;}
.sky i{position:absolute;left:0;right:0;top:0;height:var(--h)}
.sky .day{background:linear-gradient(#fff6e0,#ffe6c7 45%,#ffc9a6 75%,#ffab98)}
.sky .dusk{background:linear-gradient(#1b1440,#4b2468 35%,#a8406f 65%,#ff7a52 92%,#ffb36b);transition:opacity 1.2s ease-in-out}
.sky .night{background:linear-gradient(#05110f,#0a1a17 60%,#121a3a);transition:opacity 1.8s var(--dusk) .6s}
:root[data-theme=light] .sky .dusk{opacity:0;transition:opacity 1.2s ease-in-out .8s}
:root[data-theme=light] .sky .night{opacity:0;transition:opacity 1.4s var(--dusk)}
.stars{transition:opacity .9s ease 1.6s}
:root[data-theme=light] .stars{opacity:0;transition:opacity .5s ease}
:root[data-theme=light] .sunset{background:radial-gradient(closest-side,rgba(255,201,60,.95),rgba(255,145,82,.55) 35%,rgba(255,110,130,.18) 65%,transparent)}
.stars i{position:absolute;left:var(--x);top:var(--y);width:var(--s,3px);height:var(--s,3px);background:var(--c,var(--glow));animation:tw 3s steps(1) var(--d,0s) infinite}
@keyframes tw{0%,100%{opacity:.9}40%{opacity:.15}70%{opacity:.6}}
.sunset{position:absolute;left:50%;top:var(--h);width:min(70vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,211,94,.5),rgba(255,145,82,.18) 45%,transparent)}
.sunset::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--sun);box-shadow:0 0 24px 6px rgba(255,211,94,.7)}
.floor{position:absolute;left:0;right:0;top:var(--h);bottom:0;overflow:hidden;perspective:240px;perspective-origin:50% 0;background:var(--floor);transition:background-color 1.4s ease .4s}
.floor::before{content:"";position:absolute;z-index:2;left:0;right:0;top:0;height:2px;background:var(--real);box-shadow:0 0 16px 1px var(--real)}
.floor::after{content:"";position:absolute;z-index:1;inset:0;background:linear-gradient(var(--floor),transparent 40%)}
.plane{position:absolute;left:-150%;right:-150%;top:0;height:400%;transform-origin:50% 0;transform:rotateX(76deg)}
.tiles,.dash{position:absolute;inset:-200px 0 0;animation:drift 7s linear infinite;will-change:transform}
@keyframes drift{to{transform:translate3d(0,100px,0)}}
.tiles{background:linear-gradient(90deg,rgba(20,192,139,.5) 3px,transparent 3px) 50% 0/100px 100px,linear-gradient(rgba(20,192,139,.5) 4px,transparent 4px) 0 0/100px 100px}
.road{position:absolute;left:50%;top:0;bottom:0;width:clamp(150px,22vw,340px);transform:translateX(-50%);background:var(--road);transition:background-color 1.4s ease .4s;box-shadow:-3px 0 0 var(--real),3px 0 0 var(--real);overflow:hidden}
.dash{left:50%;width:10px;margin-left:-5px;background:repeating-linear-gradient(var(--dash) 0 50px,transparent 50px 100px)}
@media (prefers-reduced-motion:reduce){.tiles,.dash,.stars i{animation:none}}

main{width:min(100%,560px);padding:0 16px 30vh}
.top{min-height:calc(var(--h) - 90px);display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:12px;padding-bottom:32px;text-align:center}
.kicker{margin:0;font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--real-text)}
h1{margin:0;font-size:clamp(52px,12vw,104px);line-height:.95}
h1 em{font-style:normal;color:var(--real-text)}
.lead{margin:0;max-width:34ch;text-wrap:balance;color:var(--ink-muted)}
.legend{margin:0;font-size:14px;color:var(--ink-muted)}

.sign{position:relative;margin:14vh 0 0;padding:24px 26px;border-radius:14px;background:var(--sign);color:#fff;box-shadow:inset 0 0 0 4px var(--sign),inset 0 0 0 7px #fff,0 18px 40px rgba(0,0,0,.45)}
.sign:first-of-type{margin-top:8vh}
.sign::before,.sign::after{content:"";position:absolute;z-index:-1;top:100%;width:8px;height:14vh;background:linear-gradient(#8aa39c,#3b4f4a)}
.sign::before{left:22%}
.sign::after{right:22%}
.sign:last-child::before,.sign:last-child::after{display:none}
.sign h2{margin:0 0 4px;font:800 clamp(28px,5vw,40px)/1.05 "Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.03em;text-wrap:balance}
.sign p,.sign li{color:rgba(255,255,255,.85)}
.sign strong{color:#fff}
.sign a{color:var(--sun)}
.eyebrow{margin:0 0 6px;font-weight:600;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--sun)}
.check{list-style:none;margin:12px 0 0;padding:0}
.check li{display:flex;gap:10px;align-items:baseline;margin:8px 0}
.check li::before{flex:none;width:1.4em;text-align:center;font-weight:600}
.done{color:#fff}
.done::before{content:"✓";color:#7cf5c8}
.wip::before{content:"◐";color:var(--sun)}
.todo{color:rgba(255,255,255,.7)}
.todo::before{content:"○";color:rgba(255,255,255,.6)}
.cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.cta a{flex:1 0 auto;display:inline-flex;justify-content:center;align-items:center;min-height:52px;padding:0 22px;border-radius:16px;font-weight:600;text-decoration:none;transition:transform 90ms,box-shadow 90ms}
.cta a:active{transform:translateY(4px);box-shadow:none}
.cta .beer{background:var(--sun);color:#04261c;box-shadow:0 4px 0 #c99a1c}
.cta .pay{background:var(--real);color:#04261c;box-shadow:0 4px 0 #14a877}
.cta [hidden]{display:none}
header{background:none}
.back{font-size:15px;color:var(--real-text);text-underline-offset:3px}