@font-face{font-family:"TWK Everett";src:url(/fonts/TWKEverett-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TWK Everett";src:url(/fonts/TWKEverett-Medium.woff2) format("woff2");font-weight:500 600;font-display:swap}
@font-face{font-family:"TWK Everett";src:url(/fonts/TWKEverett-Bold.woff2) format("woff2");font-weight:700 800;font-display:swap}
:root{--g:#1fed93;--ink:#f5f2ea;--muted:rgba(245,242,234,.72);--night:#0d1416;--warm:#ffb46b;color-scheme:dark}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--night);color:var(--ink);font-family:"TWK Everett",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
body{background:radial-gradient(120% 70% at 50% 108%,rgba(255,170,90,.28),transparent 60%),radial-gradient(90% 60% at 50% -10%,rgba(31,237,147,.16),transparent 60%),linear-gradient(180deg,#0b1517,#11201f 55%,#1a1712)}
.snow{position:fixed;inset:0;pointer-events:none;z-index:5}
#app{height:100%;display:flex;justify-content:center;align-items:center}
.deck{position:relative;width:100%;max-width:480px;height:100%;height:100dvh;outline:none;overflow:hidden}
@media (min-width:700px){.deck{margin:24px 0;height:min(calc(100dvh - 48px),860px);border-radius:28px;box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06)}}
.bars{position:absolute;top:max(12px,env(safe-area-inset-top));left:14px;right:60px;display:flex;gap:5px;z-index:8}
.bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}.bars i b{display:block;height:100%;width:0;background:var(--g)}
.bars i.done b{width:100%}.bars i.on b{width:100%;transition:width .5s ease}
.snd{position:absolute;top:max(4px,calc(env(safe-area-inset-top) - 8px));right:8px;z-index:9;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.snd svg{width:20px;height:20px}.snd[aria-pressed=false] .w{opacity:.25}.snd[aria-pressed=true]{color:var(--g)}
.nav{position:absolute;top:56px;bottom:0;z-index:6;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.nav.prev{left:0;width:32%}.nav.next{right:0;width:68%}
.nav:focus-visible{outline:2px solid var(--g);outline-offset:-4px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:76px 26px max(34px,env(safe-area-inset-bottom));overflow:hidden}
.slide[hidden]{display:none}
.in-r{animation:inR .55s cubic-bezier(.2,.7,.2,1)}.in-l{animation:inL .55s cubic-bezier(.2,.7,.2,1)}
@keyframes inR{from{opacity:0;transform:translateX(26px) scale(.985)}to{opacity:1;transform:none}}@keyframes inL{from{opacity:0;transform:translateX(-26px) scale(.985)}to{opacity:1;transform:none}}
.txt{position:relative;z-index:2}.txt.top{margin-bottom:auto}.txt.center{margin:auto 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.kicker{margin:0 0 10px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--g);font-weight:600}
h1,h2{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}h1{font-size:clamp(34px,10vw,48px)}h2{font-size:clamp(28px,8.4vw,40px)}
.sub{margin:14px 0 0;font-size:17px;line-height:1.45;color:var(--muted);text-wrap:pretty}.hint{margin:22px 0 0;font-size:13px;color:var(--muted);opacity:.7}
.big{margin:26px 0 30px;font-size:26px;font-weight:700;color:var(--warm)}
/* opening: the snow globe */
.s-open{justify-content:flex-end}
.hero{position:absolute;inset:0;display:grid;place-items:center;padding:70px 0 220px}
.hero img{width:min(92%,420px);max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 60px rgba(255,170,90,.35));animation:float 6s ease-in-out infinite}
.hero .mark.big{width:46%;color:var(--g);opacity:.9}
@keyframes float{50%{transform:translateY(-8px)}}
.s-open .txt{background:linear-gradient(180deg,transparent,rgba(10,16,17,.75) 30%);margin:0 -26px -34px;padding:60px 26px 34px}
/* tour */
.nums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}.nums div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px 10px;text-align:center}
.nums b{display:block;font-size:32px;color:var(--g)}.nums span{font-size:13px;color:var(--muted)}
.route{list-style:none;margin:0;padding:0 0 0 6px;position:relative}.route:before{content:"";position:absolute;left:12px;top:10px;bottom:10px;border-left:2px dashed rgba(31,237,147,.5)}
.route li{position:relative;padding:0 0 18px 34px;animation:inR .5s both;animation-delay:calc(var(--i) * .12s + .2s)}.route li:last-child{padding-bottom:0}
.route .pin{position:absolute;left:0;top:4px;width:14px;height:14px;border-radius:50%;background:var(--g);box-shadow:0 0 0 5px rgba(31,237,147,.18)}
.route b{display:block;font-size:20px}.route li>span:last-child{font-size:14px;color:var(--muted)}
/* stand */
.bgimg{position:absolute;inset:0}.bgimg img{width:100%;height:100%;object-fit:cover}.bgimg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,17,.35),rgba(10,16,17,.1) 30%,rgba(10,16,17,.92) 75%)}
.s-stand:not(:has(.bgimg)) .txt{margin:auto 0}
.facts{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}.facts li{font-size:14px;padding:7px 12px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
/* photos */
.photos{display:grid;gap:8px;margin-top:18px;flex:1;min-height:0}.photos img{width:100%;height:100%;object-fit:cover;border-radius:16px;min-height:0}
.photos.n1{grid-template-rows:1fr}.photos.n2{grid-template-rows:1fr 1fr}.photos.n3{grid-template-columns:1fr 1fr;grid-template-rows:1.3fr 1fr}.photos.n3 img:first-child{grid-column:1/3}.photos.n4{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}
/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.stats div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:18px 14px;animation:pop .5s both;animation-delay:calc(var(--i) * .1s + .15s)}
.stats div:first-child:nth-last-child(odd){grid-column:1/3}.stats b{display:block;font-size:clamp(30px,9vw,40px);color:var(--g);line-height:1}.stats span{display:block;margin-top:6px;font-size:14px;color:var(--muted);line-height:1.3}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
/* message */
.s-msg .txt{margin:auto 0}.letter{background:rgba(255,248,235,.07);border:1px solid rgba(255,220,180,.16);border-radius:22px;padding:22px 20px;font-size:17px;line-height:1.55;overflow:visible}
.letter p{margin:0 0 12px}.letter .sign{margin:16px 0 0;color:var(--warm);font-weight:600}
/* close */
.mark.glow{width:84px;color:var(--g);filter:drop-shadow(0 0 22px rgba(31,237,147,.5));margin-bottom:22px}.logo{width:170px;color:var(--ink);opacity:.9;margin-top:6px}
/* code */
.s-code input{margin-top:22px;width:220px;max-width:100%;text-align:center;font:inherit;font-size:24px;letter-spacing:.2em;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--ink);text-transform:uppercase}
.s-code button{margin-top:14px;font:inherit;font-weight:700;font-size:16px;padding:13px 26px;border:0;border-radius:99px;background:var(--g);color:#0b2a1c;cursor:pointer}.s-code button:disabled,.s-code input:disabled{opacity:.5}.err{color:#ffb4ae;margin:14px 0 0}
.solo .slide{position:absolute}
.spark{position:absolute;width:8px;height:8px;z-index:3;pointer-events:none;background:radial-gradient(circle,#fff 0 30%,rgba(255,240,200,.8) 40%,transparent 70%);border-radius:50%;animation:spark 1.4s ease-out both}
@keyframes spark{0%{opacity:0;transform:scale(.2)}30%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(.4) translateY(-14px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.route:has(li:nth-child(5)) li{padding-bottom:10px}.route:has(li:nth-child(5)) b{font-size:17px}.route:has(li:nth-child(7)) li>span:last-child{display:none}
/* ---------- festive layer ---------- */
:root{--gold:#ffcf6b;--berry:#ff5d73;--ice:#9fd8ff}
.art{position:absolute;pointer-events:none;z-index:1}
.lights{top:max(26px,calc(env(safe-area-inset-top) + 14px));left:-4px;right:-4px;width:calc(100% + 8px);height:auto}
.bulb path{transition:opacity .3s}.bulb.c-g path{fill:var(--g)}.bulb.c-r path{fill:var(--berry)}.bulb.c-y path{fill:var(--gold)}.bulb.c-b path{fill:var(--ice)}
.bulb path{filter:drop-shadow(0 0 6px currentColor);animation:twinkle 2.4s ease-in-out infinite}.bulb.c-g{color:var(--g)}.bulb.c-r{color:var(--berry)}.bulb.c-y{color:var(--gold)}.bulb.c-b{color:var(--ice)}
.bulb.d1 path{animation-delay:.4s}.bulb.d2 path{animation-delay:.9s}.bulb.d3 path{animation-delay:1.3s}.bulb.d4 path{animation-delay:1.8s}
@keyframes twinkle{0%,100%{opacity:1}45%{opacity:.35}55%{opacity:.9}}
.hills{left:0;right:0;bottom:0;width:100%;height:120px}.hills .h1{fill:#e9f2f2;opacity:.13}.hills .h2{fill:#f4f8f8;opacity:.2}.hills .trees{fill:#0f2a24;opacity:.7}
.s-open .hills{bottom:0}
.baubles{top:58px;right:-10px;width:62%;max-width:280px;height:auto}
.bauble{transform-box:fill-box;transform-origin:50% 0}.bauble circle:nth-of-type(1){filter:drop-shadow(0 8px 14px rgba(0,0,0,.35))}
.bauble.c-r circle:nth-of-type(1){fill:var(--berry)}.bauble.c-g circle:nth-of-type(1){fill:var(--g)}.bauble.c-y circle:nth-of-type(1){fill:var(--gold)}
.bauble .band{fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:3 5}
.go .bauble{animation:swing 3.6s ease-in-out infinite}.go .bauble.s1{animation-duration:4.2s;animation-delay:-1s}.go .bauble.s2{animation-duration:3.2s;animation-delay:-2s}
@keyframes swing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
.holly .leaf{fill:#1d8a5a;stroke:#0f5c3b;stroke-width:1.5}.holly .berry{fill:var(--berry)}
.holly.corner{right:14px;bottom:24px;width:96px;opacity:.95}.go .holly.corner{animation:pop .6s .5s both}
.holly.lcorner{position:absolute;top:-22px;right:-10px;width:78px;transform:rotate(14deg)}
/* opening: a glowing globe, a twinkle of light behind it */
.globe{position:relative;width:min(84%,400px);display:grid;place-items:center}
.globe:before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(circle,rgba(255,207,107,.35),rgba(31,237,147,.12) 45%,transparent 70%);filter:blur(18px);animation:glow 4s ease-in-out infinite}
.globe img{position:relative;width:100%}
@keyframes glow{50%{transform:scale(1.08);opacity:.75}}
.go.s-open .globe{animation:dropIn 1s cubic-bezier(.2,.8,.2,1.2) both}
@keyframes dropIn{from{opacity:0;transform:translateY(-40px) scale(.9)}to{opacity:1;transform:none}}
.hint .tap{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g);margin-right:8px;vertical-align:middle;animation:ping 1.6s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(31,237,147,.6)}100%{box-shadow:0 0 0 12px rgba(31,237,147,0)}}
/* headings: words rise in one by one */
.words .w{display:inline-block}.go .words .w{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i) * .07s + .1s)}
@keyframes rise{from{opacity:0;transform:translateY(16px) rotate(2deg);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.go .sub{animation:fadeUp .7s .45s both}.go .kicker{animation:fadeUp .5s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* pills: frosted glass with an icon and a glint */
.facts li{position:relative;display:inline-flex;align-items:center;gap:7px;overflow:hidden;font-weight:500;background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.facts li:after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);animation:glint 4s ease-in-out infinite;animation-delay:calc(var(--i) * .35s + 1s)}
@keyframes glint{0%,70%{left:-60%}100%{left:130%}}
.go .facts li{animation:pop .45s both;animation-delay:calc(var(--i) * .08s + .55s)}
.pi{width:15px;height:15px;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
/* tour: counters, and a plane flying the route */
.nums .num{position:relative;overflow:hidden;background:linear-gradient(160deg,rgba(31,237,147,.16),rgba(255,255,255,.04));border-color:rgba(31,237,147,.25)}
.nums .num.t1{background:linear-gradient(160deg,rgba(255,207,107,.18),rgba(255,255,255,.04));border-color:rgba(255,207,107,.3)}.nums .num.t1 b{color:var(--gold)}
.nums .num.t2{background:linear-gradient(160deg,rgba(255,93,115,.18),rgba(255,255,255,.04));border-color:rgba(255,93,115,.3)}.nums .num.t2 b{color:var(--berry)}
.go .nums .num{animation:pop .5s both;animation-delay:calc(var(--i) * .1s + .3s)}
.routewrap{position:relative}.flyer{position:absolute;left:3px;top:0;width:22px;height:22px;z-index:2;opacity:0}
.flyer .plane{position:static;width:22px;height:22px;fill:var(--gold);transform:rotate(180deg);filter:drop-shadow(0 0 6px rgba(255,207,107,.6))}
.go .flyer{animation:fly 2.6s .5s ease-in-out both}@keyframes fly{0%{opacity:0;top:0}10%{opacity:1}90%{opacity:1}100%{opacity:0;top:calc(100% - 22px)}}
.route .pin{box-shadow:0 0 0 5px rgba(31,237,147,.18),0 0 14px rgba(31,237,147,.6)}
/* stats: gift tags */
.stats .tag{position:relative;border-radius:16px 16px 16px 16px;padding:22px 14px 16px;background:linear-gradient(160deg,#1c3a33,#142824);border:1px solid rgba(31,237,147,.28);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.stats .tag .hole{position:absolute;top:10px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--night);box-shadow:0 0 0 2px rgba(255,255,255,.18)}
.stats .tag.t1{background:linear-gradient(160deg,#3a2f1a,#2a2214);border-color:rgba(255,207,107,.35)}.stats .tag.t1 b{color:var(--gold)}
.stats .tag.t2{background:linear-gradient(160deg,#3a1c24,#2a141a);border-color:rgba(255,93,115,.35)}.stats .tag.t2 b{color:var(--berry)}
.stats .tag.t3{background:linear-gradient(160deg,#1a2a3a,#141e2a);border-color:rgba(159,216,255,.35)}.stats .tag.t3 b{color:var(--ice)}
.stats .tag:nth-child(odd){transform:rotate(-1.6deg)}.stats .tag:nth-child(even){transform:rotate(1.4deg)}
.go .stats .tag{animation:hang .7s cubic-bezier(.2,.8,.2,1.3) both;animation-delay:calc(var(--i) * .12s + .25s)}
@keyframes hang{from{opacity:0;transform:translateY(-30px) rotate(-8deg)}}
.stats b{font-variant-numeric:tabular-nums}
.gift{width:58px;height:58px;top:max(70px,calc(env(safe-area-inset-top) + 58px))}.gift.g1{right:20px}.gift.g2{right:78px;width:42px;height:42px;top:max(86px,calc(env(safe-area-inset-top) + 74px))}
.gift .box{fill:var(--berry)}.gift .lid{fill:#ff7d8f}.gift .rib,.gift .bow{fill:var(--gold)}.gift.g2 .box{fill:var(--g)}.gift.g2 .lid{fill:#59f3b0}
.go .gift{animation:pop .5s 1s both}.go .gift.g2{animation-delay:1.15s}
/* photos: polaroids with tape */
.photos .pol{margin:0;position:relative;background:#f7f3ea;padding:8px 8px 22px;border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.4);min-height:0}
.photos .pol img{border-radius:3px;height:100%}.photos .pol.p0{transform:rotate(-2deg)}.photos .pol.p1{transform:rotate(1.8deg)}.photos .pol.p2{transform:rotate(-1.2deg)}.photos .pol.p3{transform:rotate(2.4deg)}
.photos .tape{position:absolute;top:-8px;left:50%;width:58px;height:18px;margin-left:-29px;background:rgba(255,236,190,.75);transform:rotate(-4deg)}
.go .photos .pol{animation:drop .6s cubic-bezier(.2,.8,.2,1.2) both;animation-delay:calc(var(--i) * .15s + .2s)}
@keyframes drop{from{opacity:0;transform:translateY(-24px) rotate(-10deg) scale(1.05)}}
/* message: a letter, sealed */
.s-msg .letter{position:relative;background:linear-gradient(180deg,#fbf6ec,#f2eadb);color:#20241f;border:0;box-shadow:0 20px 50px rgba(0,0,0,.45)}
.s-msg .letter .sign{color:#0f6b45}.go .letter{animation:unfold .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes unfold{from{opacity:0;transform:perspective(800px) rotateX(-35deg) translateY(30px)}to{opacity:1;transform:none}}
.seal{position:absolute;right:16px;bottom:-18px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2bf6a0,#0f9a62);display:grid;place-items:center;box-shadow:0 6px 14px rgba(0,0,0,.35)}
.seal .mark{width:28px;color:#063a24}.go .seal{animation:stamp .5s 1s cubic-bezier(.2,.8,.2,1.4) both}
@keyframes stamp{from{opacity:0;transform:scale(1.8) rotate(-20deg)}to{opacity:1;transform:none}}
/* close: a tree that lights up */
.tree{position:relative;width:min(58vw,230px);height:auto;margin:-10px auto 4px}
.tree .t1{fill:#0f6b45}.tree .t2{fill:#14845a}.tree .t3{fill:#1aa36f}.tree .garland{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round}
.tree .star{fill:var(--gold);transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 10px rgba(255,207,107,.9))}
.tree .orn.c-r{fill:var(--berry)}.tree .orn.c-y{fill:var(--gold)}.tree .orn.c-b{fill:var(--ice)}.tree .orn.c-g{fill:#7dffc6}
.go .tree .orn{animation:twinkle 2s ease-in-out infinite}.tree .orn.d1{animation-delay:.3s}.tree .orn.d2{animation-delay:.7s}.tree .orn.d3{animation-delay:1.1s}.tree .orn.d4{animation-delay:1.5s}
.go .tree .t1,.go .tree .t2,.go .tree .t3{animation:grow .6s cubic-bezier(.2,.8,.2,1.2) both}.go .tree .t2{animation-delay:.15s}.go .tree .t3{animation-delay:.3s}
.go .tree .star{animation:starIn .7s .6s cubic-bezier(.2,.8,.2,1.6) both,spin 6s 1.3s linear infinite}
@keyframes grow{from{opacity:0;transform:scaleY(.4) translateY(30px)}}@keyframes starIn{from{opacity:0;transform:scale(0) rotate(-90deg)}}@keyframes spin{50%{transform:scale(1.12)}}
.s-close .txt.center{position:relative;z-index:2}.s-close .hills{opacity:.8}
.s-stand .txt{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.bulb path,.globe:before{animation:none}}

/* one photo: a landscape polaroid in the middle, not a tall strip */
.photos.n1{grid-template-rows:auto;flex:0 1 auto;margin:auto 0}.photos.n1 .pol img{height:auto;aspect-ratio:4/3;max-height:52dvh}