.trail{z-index:30;width:46px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .5s;position:fixed;top:4.5rem;bottom:1.2rem;left:.4rem}.trail.show{opacity:1}.trail-svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.trail .stop{pointer-events:auto;align-items:center;gap:.5rem;text-decoration:none;display:flex;position:absolute;left:50%;translate:-50% -50%}.trail .dot{background:var(--bg);opacity:.55;width:14px;height:14px;transition:transform .4s var(--ease-bounce), background .3s, opacity .3s;border:3px solid;border-radius:50%}.trail .stop.passed .dot,.trail .stop.here .dot{background:var(--accent);opacity:1;border-color:var(--accent)}.trail .stop.here .dot{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent);transform:scale(1.5)}.trail .lbl{font:800 .85rem var(--font-display);background:var(--bg);color:var(--ink);white-space:nowrap;opacity:0;border-radius:99rem;padding:.15rem .6rem;transition:opacity .25s,translate .25s;position:absolute;left:24px;translate:-6px;box-shadow:0 2px #0000001f}.trail .stop:hover .lbl,.trail .stop:focus-visible .lbl{opacity:1;translate:0}.trail .walker{will-change:transform;width:46px;position:absolute;top:0;left:50%;translate:-50% -88%}.trail .walker-m{width:100%;height:auto;animation:.5s ease-in-out infinite alternate paused step}.trail.moving .walker-m{animation-play-state:running}.trail .found{pointer-events:auto;font:800 .8rem var(--font-body);color:#ffe27a;cursor:default;background:#2b2a26;border:0;border-radius:99rem;padding:.2rem .55rem;position:absolute;bottom:-2.2rem;left:0}@keyframes step{to{transform:translateY(-4px)rotate(4deg)}}@media (width<=760px){.trail{width:30px;top:4rem;left:.1rem}.trail .walker{width:30px}.trail .lbl{display:none}}:root{--hl-far:#c9dcb0;--hl-far2:#b9d19f;--hl-mid:#a9c88f;--hl-near:#94ba7d}.act[data-place=waddlo]{--hl-far:#b8d8c6;--hl-far2:#a8cdb6;--hl-mid:#98c4a5;--hl-near:#88b894}.act[data-place=hatchlo]{--hl-far:#e9c1a8;--hl-far2:#e2b194;--hl-mid:#dba07e;--hl-near:#cf926f}.act[data-place=fireflo]{--hl-near:#26305a}main>*{z-index:1;position:relative}html[data-village] body{background:var(--bg)}.hero{text-align:center;min-height:100svh;padding:5rem var(--gutter) 22svh;place-items:center;display:grid;position:relative;overflow:hidden}.hero-in{z-index:2;transform:translateY(calc(var(--hp,0) * -60px));opacity:calc(1 - var(--hp,0) * 1.4);position:relative}.lolo-btn{cursor:pointer;background:0 0;border:0;padding:0}.hero .mascot{filter:drop-shadow(0 12px 14px #0000001a);width:min(46vw,210px);height:auto;animation:4s ease-in-out infinite bob}.hero h1{font-size:var(--step-4);margin:.2em 0}.sub{font-size:var(--step-1);margin:0}.hint{opacity:.65;font-size:var(--step--1);margin-top:2.2rem;font-weight:800}.hint .arrow{animation:1.4s ease-in-out infinite nudge;display:inline-block}.hero-ground{z-index:1;width:100%;height:26svh;position:absolute;inset:auto 0 0}.split .w{white-space:nowrap;display:inline-block}.split .l{opacity:0;transition:transform .7s var(--ease-bounce) calc(var(--i) * 45ms), opacity .3s calc(var(--i) * 45ms);display:inline-block;transform:translateY(.9em)rotate(6deg)scale(.7)}.split.on .l{opacity:1;transform:none}@keyframes bob{50%{transform:translateY(-10px)}}@keyframes nudge{50%{transform:translateY(6px)}}.act{height:240vh;position:relative}.stage{align-items:center;height:100svh;padding-inline:6vw;display:flex;position:sticky;top:0;overflow:hidden}.act[data-side=right] .stage{justify-content:flex-end}.copy{z-index:3;width:min(30rem,42vw);color:var(--on-card,#3b3730);background:var(--card,#fffaf0db);backdrop-filter:blur(8px);opacity:0;transition:opacity .6s, transform .8s var(--ease-bounce);border-radius:1.8rem;padding:1.7rem 1.9rem;position:relative;transform:translateY(40px)scale(.96);box-shadow:0 8px #00000014,0 22px 40px #0000001f}.act.on .copy{opacity:1;transform:none}.copy h2{font-size:var(--step-3)}.copy .tag{font-weight:800}.actions{flex-wrap:wrap;gap:.7rem;margin-bottom:.4rem;display:flex}.copy .btn--ghost{color:inherit}.tapme{font-size:var(--step--1);opacity:0;margin:.6rem 0 0;font-weight:800;transition:opacity .6s}.act.late .tapme{opacity:.65}.stage .world{transition:transform .5s,opacity .5s}.stage .world.zooming{opacity:0;transform:scale(1.8)}.dusk{z-index:2;pointer-events:none;opacity:var(--dusk,0);background:radial-gradient(circle at var(--mx,50%) var(--my,60%), #ffe28c29 0, transparent 13vmax), radial-gradient(circle at var(--mx,50%) var(--my,60%), transparent 0, transparent 12vmax, #06091cc7 38vmax);position:fixed;inset:0}.why{max-width:52rem;padding:14vh var(--gutter) 10vh;margin:0 auto;position:relative;overflow-x:clip}.why h2{text-align:center;font-size:var(--step-3)}.goodnight{text-align:center;padding:6vh var(--gutter) 6vh;position:relative;overflow-x:clip}.roofs{width:min(100%,52rem);height:auto}.win{fill:#3b3a45;transition:fill .6s calc(var(--i) * .25s), filter .6s calc(var(--i) * .25s)}.goodnight.on .win{fill:#ffd96b;filter:drop-shadow(0 0 8px #ffd96b)}.smoke{fill:#fff;opacity:0;animation:smoke 5s ease-out calc(var(--i) * -1.2s) infinite}@keyframes smoke{0%{opacity:.5;transform:translateY(0)scale(.6)}to{opacity:0;transform:translateY(-50px)scale(1.8)}}.sleeper{width:8rem;margin:-1.2rem auto 0;position:relative}.sleeper .mascot{--lantern:.12;width:100%;height:auto;transform:rotate(-6deg)}.sleepy .eye{animation:none!important;transform:scaleY(.12)!important}.sleepy{--lantern:.12}.zzz{font:800 1.4rem var(--font-display);color:var(--ink);position:absolute;top:-.4rem;right:-1rem}.zzz i{opacity:0;font-style:normal;animation:3s ease-in-out infinite zz;display:inline-block}.zzz i:nth-child(2){font-size:1.2em;animation-delay:.5s}.zzz i:nth-child(3){font-size:1.5em;animation-delay:1s}@keyframes zz{0%{opacity:0;transform:translateY(8px)}40%{opacity:1}to{opacity:0;transform:translate(10px,-22px)}}.bye{font-size:var(--step-2);margin:1rem 0}.again{margin-bottom:3rem}.bubble{z-index:60;pointer-events:none;font:800 1rem var(--font-display);color:#333;background:#fff;border-radius:1rem;padding:.25rem .8rem;animation:1.1s forwards pop;position:fixed;transform:translate(-50%,-140%);box-shadow:0 3px #0000001f}@keyframes pop{to{opacity:0;transform:translate(-50%,-240%)}}.confetti{z-index:70;pointer-events:none;border-radius:50%;width:10px;height:10px;animation:1.6s ease-out forwards conf;position:fixed}@keyframes conf{to{transform:translate(var(--dx), var(--dy)) rotate(540deg);opacity:0}}@media (width<=760px),(aspect-ratio<=6/5){.act{height:210vh}.stage,.act[data-side=right] .stage{justify-content:center;align-items:flex-start;padding:4.2rem .9rem 0}.copy{text-align:center;width:100%;padding:1rem 1.15rem}.copy h2{font-size:var(--step-2);margin-bottom:.1em}.copy p{margin-bottom:.5em;font-size:.95rem}.copy .actions{justify-content:center}.copy .btn{padding:.5rem 1rem;font-size:.95rem}.tapme{display:none}.hero h1{font-size:var(--step-3)}.why{padding-inline:2.6rem 1rem}.wire{left:1.1rem}.lamp{grid-template-columns:3.4rem 1fr;min-height:8rem}.lamp .lantern{grid-column:1;width:3rem}.lamp .note,.lamp:nth-child(odd) .note,.lamp:nth-child(2n) .note{text-align:start;--from:40px;grid-column:2}}@media (prefers-reduced-motion:reduce){.act{height:auto}.stage{height:85svh;position:relative}.copy,.lamp .note,.lamp .lantern,.split .l{opacity:1!important;transform:none!important}.dusk{display:none}}
