.heart-board{padding:30px 0 0}.heart-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;width:min(100%,560px);margin:0 auto}.heart-tile{position:relative;aspect-ratio:1;padding:0;border:3px solid #fff;border-radius:3px;background:#fff;box-shadow:0 2px 6px var(--shadow);cursor:zoom-in;overflow:visible;-webkit-tap-highlight-color:transparent}.heart-tile img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}.heart-tile:focus-visible{outline:4px solid var(--accent);outline-offset:2px}.heart-tile.lit:before{content:"";position:absolute;top:-7px;left:-7px;width:10px;height:10px;border-radius:50%;background:#fff3b0;box-shadow:0 0 8px 3px #ffe278d9;z-index:1;animation:bulb 1.8s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.23s)}.heart-unread{position:absolute;top:-9px;right:-9px;z-index:2;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--accent);color:#fff;font:700 14px/24px Rubik,sans-serif;box-shadow:0 0 0 2px #fff,0 2px 5px var(--shadow)}@keyframes bulb{0%{opacity:.55}to{opacity:1}}@media(prefers-reduced-motion:reduce){.heart-tile.lit:before{animation:none}}@media(max-width:600px){.heart-board{padding-top:22px}.heart-grid{gap:4px}.heart-tile{border-width:2px}.heart-tile.lit:before{width:8px;height:8px;top:-5px;left:-5px}}.stage{position:relative}.scene{position:relative;margin-top:18px}.stage .scene{display:none}.stage .road{display:block}:root[data-scene] .stage .road{display:none}:root[data-scene=train] .rails{display:block}:root[data-scene=ship] .sea{display:block}:root[data-scene=beach] .shore{display:block}:root[data-scene=orchard] .orchard{display:block}:root[data-scene=truck] .haul{display:block}.hero{position:absolute;z-index:2;background:none;border:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}.hero svg{display:block;width:100%;height:auto;overflow:visible}.hero:focus-visible{outline:4px solid var(--accent);outline-offset:6px;border-radius:12px}.hero .puffs{animation:puff 2.2s ease-in-out infinite alternate}.road{height:108px;border-bottom:4px dashed var(--on-wall-soft)}#car{bottom:-4px;right:12%;width:150px}#car.driving{animation:drive 3.2s ease-in-out}@keyframes drive{0%{transform:translate(0)}50%{transform:translate(calc(-100vw + 100%))}to{transform:translate(0)}}.beep{position:absolute;top:-34px;right:-10px;background:var(--paper);color:var(--ink);font-family:Amatic SC,Rubik,sans-serif;font-size:26px;font-weight:700;padding:2px 14px;border-radius:18px 18px 2px;box-shadow:0 2px 6px var(--shadow);opacity:0;transition:opacity .2s;pointer-events:none}.hero.beeping .beep{opacity:1}@keyframes puff{0%{opacity:.55;transform:translateY(0)}to{opacity:.95;transform:translateY(-4px)}}.rails{height:150px}.rails:before{content:"";position:absolute;left:0;right:0;bottom:42px;height:6px;background:var(--on-wall-soft);border-radius:3px}.rails:after{content:"";position:absolute;left:0;right:0;bottom:0;height:42px;background:radial-gradient(circle at 50% 100%,transparent 29px,var(--on-wall-soft) 30px 36px,transparent 37px) 0 0 / 84px 42px repeat-x;opacity:.8}#train{bottom:46px;right:6%;width:250px}#train.driving{animation:drive 3.4s ease-in-out}.sea{height:132px}.sea:before,.sea:after{content:"";position:absolute;left:0;right:0;bottom:0;background:radial-gradient(circle at 20px 12px,var(--sea) 13px,transparent 14px) 0 0 / 40px 22px repeat-x,linear-gradient(var(--sea),var(--sea)) 0 12px / 100% 100% no-repeat;animation:waves 6s linear infinite}.sea:before{height:44px;opacity:.55;z-index:1}.sea:after{height:26px;z-index:3;filter:brightness(.9);animation-direction:reverse;animation-duration:8s}@keyframes waves{to{background-position:40px 0,0 12px}}#ship{bottom:14px;right:10%;width:236px}#ship.driving{animation:sail 3.6s ease-in-out}@keyframes sail{0%{transform:translate(0) rotate(0)}25%{transform:translate(calc((-100vw + 100%)/2)) rotate(3deg)}50%{transform:translate(calc(-100vw + 100%)) rotate(-3deg)}75%{transform:translate(calc((-100vw + 100%)/2)) rotate(3deg)}to{transform:translate(0) rotate(0)}}.shore{height:150px}.shore:before{content:"";position:absolute;left:0;right:0;bottom:40px;height:46px;background:radial-gradient(circle at 20px 12px,var(--sea) 13px,transparent 14px) 0 0 / 40px 22px repeat-x,linear-gradient(var(--sea),var(--sea)) 0 12px / 100% 100% no-repeat;animation:waves 7s linear infinite}.shore:after{content:"";position:absolute;left:0;right:0;bottom:0;height:48px;background:var(--sand);border-radius:40% 60% 0 0/14px 18px 0 0}.shore .boat{position:absolute;left:8%;bottom:66px;width:64px;animation:bob 4s ease-in-out infinite alternate}@keyframes bob{0%{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(2deg)}}.shore .umbrella{position:absolute;right:8%;bottom:14px;width:104px;z-index:1}.shore .ball{position:absolute;right:26%;bottom:10px;width:40px;z-index:1}#crab{bottom:12px;right:46%;width:92px}#crab.driving{animation:scuttle 3.2s ease-in-out}@keyframes scuttle{0%{transform:translate(0)}30%{transform:translate(-38vw)}55%{transform:translate(-30vw)}to{transform:translate(0)}}.orchard{height:196px}.orchard:after{content:"";position:absolute;left:0;right:0;bottom:0;height:26px;background:radial-gradient(circle at 50% 100%,var(--leaf) 11px,transparent 12px) 0 0 / 34px 26px repeat-x,linear-gradient(transparent 60%,var(--leaf) 60%)}#tree{bottom:6px;right:12%;width:190px;z-index:1}#tree .beep{top:-18px}#tree.driving svg{animation:shake .7s ease-in-out;transform-origin:50% 100%}@keyframes shake{0%,to{transform:rotate(0)}25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}#tree.driving .apple{animation:fall 1.6s ease-in forwards;animation-delay:calc(var(--i) * .18s)}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}70%{transform:translateY(120px) rotate(30deg);opacity:1}to{transform:translateY(126px) rotate(30deg);opacity:0}}.haul{height:132px;border-bottom:4px dashed var(--on-wall-soft)}#truck{bottom:-4px;right:8%;width:310px}#truck.driving{animation:drive 3.6s ease-in-out}#truck .sign{font-family:Amatic SC,Rubik,sans-serif;font-size:27px;font-weight:700;fill:var(--ink)}#truck .sign.sale{fill:var(--accent);font-size:30px}@media(prefers-reduced-motion:reduce){.hero.driving,#tree.driving svg,#tree.driving .apple,.hero .puffs,.sea:before,.sea:after,.shore:before,.shore .boat{animation:none}}@media(max-width:600px){.scene{margin-top:12px}.road{height:84px}#car{width:118px;right:8%}.beep{font-size:22px;top:-30px}.rails{height:124px}.rails:before{bottom:34px}.rails:after{height:34px;background:radial-gradient(circle at 50% 100%,transparent 23px,var(--on-wall-soft) 24px 29px,transparent 30px) 0 0 / 68px 34px repeat-x}#train{width:184px;bottom:38px;right:4%}.sea{height:110px}#ship{width:176px;right:6%;bottom:12px}.shore{height:128px}.shore:before{height:40px;bottom:34px}.shore:after{height:40px}.shore .umbrella{width:82px;right:4%;bottom:10px}.shore .ball{width:32px;right:24%;bottom:8px}.shore .boat{width:50px;bottom:56px}#crab{width:74px;right:44%;bottom:10px}.orchard{height:160px}#tree{width:150px;right:8%}.haul{height:100px}#truck{width:230px;right:4%}@keyframes fall{0%{transform:translateY(0) rotate(0);opacity:1}70%{transform:translateY(96px) rotate(30deg);opacity:1}to{transform:translateY(100px) rotate(30deg);opacity:0}}}:root[data-scene=bus] .london,:root[data-scene=watermelons] .melon-field,:root[data-scene=corn] .corn-field{display:block}.london{height:172px;border-bottom:4px dashed var(--on-wall-soft)}#bus{width:min(290px,76%);bottom:-3px;right:9%}#bus.driving{animation:drive 3.6s ease-in-out}.melon-field,.corn-field{height:clamp(120px,23vw,176px)}.melon-field:before,.corn-field:before{content:"";position:absolute;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);height:min(44px,6vw);background:var(--leaf)}.corn-field:before{height:min(22px,3vw)}.field-hero{width:100%;inset:auto 0 0}.field-hero svg{max-height:176px}.field-hero .beep{top:-18px;left:50%;right:auto;transform:translate(-50%)}.field-hero.driving .crop{animation:crop-dance 1s ease-in-out 2;animation-delay:calc(var(--i) * .07s)}@keyframes crop-dance{25%{transform:rotate(-5deg) translateY(-8px)}75%{transform:rotate(5deg)}}@media(prefers-reduced-motion:reduce){#bus.driving,.field-hero.driving .crop{animation:none}}.flyers{position:absolute;inset:0;z-index:0;pointer-events:none}.flyer{display:none;position:absolute;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent}.flyer svg{display:block;width:100%;height:auto;overflow:visible}[data-flyers~=plane] .flyer.plane:not(.plane-second),[data-flyers~=plane2] .flyer.plane-second,[data-flyers~=balloons] .flyer.balloons,[data-flyers~=hotair] .flyer.hotair,[data-flyers~=basketball] .flyer.basketball{display:block}.flyer.plane{top:92px;right:-140px;width:110px;animation:plane-cross 26s linear infinite}.flyer.plane svg{transform:scaleX(-1)}.flyer.plane-second{top:170px;width:88px;animation-duration:32s;animation-delay:-12s}@keyframes plane-cross{0%{transform:translate(0)}50%{transform:translate(-60vw,-14px)}to{transform:translate(calc(-100vw - 280px),6px)}}.flyer.plane.hit svg{animation:loop .9s ease-in-out}@keyframes loop{to{transform:scaleX(-1) rotate(360deg)}}.flyer.balloons{bottom:-140px;left:7%;width:64px;animation:rise 22s linear infinite}@keyframes rise{0%{transform:translate(0) rotate(-3deg)}50%{transform:translate(18px,-300px) rotate(3deg)}to{transform:translate(-6px,-640px) rotate(-3deg)}}.flyer.balloons.hit svg{animation:wobble .8s ease-in-out}.flyer.hotair{top:120px;right:6%;width:70px;animation:drift 30s ease-in-out infinite alternate}@keyframes drift{0%{transform:translate(0)}25%{transform:translate(-6vw,-16px)}50%{transform:translate(-12vw,4px)}75%{transform:translate(-18vw,-12px)}to{transform:translate(-24vw)}}.flyer.hotair.hit svg{animation:lift 1s ease-in-out}@keyframes lift{50%{transform:translateY(-28px)}}.flyer.basketball{top:230px;left:-70px;width:44px;animation:throw 13s ease-in-out infinite}.flyer.basketball svg{animation:spin 1.4s linear infinite}@keyframes throw{0%,55%{transform:translate(0);opacity:0}56%{opacity:1}78%{transform:translate(55vw,-170px)}99%{transform:translate(calc(100vw + 120px),40px);opacity:1}to{transform:translate(calc(100vw + 120px),40px);opacity:0}}@keyframes spin{to{transform:rotate(360deg)}}.flyer.basketball.playing{animation:none;opacity:1;transition:left 2.4s ease-out,top 2.4s ease-out}.flyer.basketball.playing svg{animation:spin 3s linear infinite}.flyer.basketball.hopping{animation:hop 2.4s ease-out}@keyframes hop{0%{translate:0 0}30%{translate:0 -60px}55%{translate:0 0}75%{translate:0 -20px}90%,to{translate:0 0}}@keyframes wobble{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@media(prefers-reduced-motion:reduce){.flyer,.flyer svg,.flyer.hit svg{animation:none!important}.flyer.plane{right:20%}.flyer.plane-second{right:60%}.flyer.balloons{bottom:30px}.flyer.basketball{left:80%;top:160px}.flyer.basketball.playing{transition:none}}.thanks{max-width:460px;margin:22px auto 4px;padding:20px 24px 24px;background:var(--paper);color:var(--ink);border-radius:20px;box-shadow:0 10px 28px var(--shadow);border-top:10px solid var(--frame);text-align:center}.thanks-party{font-size:40px;line-height:1}.thanks-title{font-family:Amatic SC,Rubik,sans-serif;font-size:42px;font-weight:700;margin:4px 0 0;line-height:1.1}.thanks-title .en{display:block;font-family:Rubik,sans-serif;font-size:15px;font-weight:400;color:var(--ink-soft);margin-top:2px}.thanks-art{display:block;width:min(220px,70%);margin:16px auto 12px;padding:7px;background:#fff}.thanks-art img{display:block;width:100%;height:auto;border-radius:2px}.thanks-name{font-size:19px;font-weight:700;margin:0;line-height:1.35}.thanks-name .en{display:block;font-size:13px;font-weight:400;color:var(--ink-soft)}.thanks-body{margin:14px 0 0;font-size:17px;line-height:1.6}.thanks-body .en{display:block;font-size:13px;color:var(--ink-soft)}.thanks-close{margin-top:18px}@media(max-width:600px){.thanks{padding:18px 16px 20px}.thanks-title{font-size:36px}}.qr-card{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px));background:#fff;color:#28343f;text-align:center;overflow-y:auto}.qr-card h2{font-family:Amatic SC,Rubik,sans-serif;font-size:clamp(36px,8vw,52px);font-weight:700;line-height:1.05;margin:0}.qr-price{margin:0;font-size:22px;font-weight:700;color:#4e8f63}.qr-box{width:min(78vw,62vh,460px);aspect-ratio:1;margin:6px 0;background:#fff}.qr-box svg{display:block;width:100%;height:100%}.qr-hint{max-width:24em;margin:0;color:#5a6b7a;font-size:16px;line-height:1.5}.qr-close{margin-top:8px}body.qr-open{overflow:hidden}
