*{box-sizing:border-box;margin:0}
:root{--p:#ff3d81;--y:#ffd23f;--m:#3ddc97;--b:#4cc9f0}
body{font-family:Rubik,system-ui,sans-serif;color:#fff;min-height:100vh;overflow-x:hidden;background:radial-gradient(circle at 12% 8%,#6a21a655,transparent 45%),radial-gradient(circle at 88% 92%,#ff3d8140,transparent 45%),#140f2e;background-attachment:fixed}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.page{position:relative;z-index:2;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px 16px 88px;text-align:center;animation:in .5s both;overflow:hidden}
@keyframes in{from{opacity:0;transform:translateY(16px)}}
h1{font-size:clamp(28px,6vw,46px);color:var(--y);text-shadow:0 3px 0 #0005}
h2{font-size:clamp(22px,4.6vw,32px);color:var(--y);max-width:720px;line-height:1.25}
.xl{font-family:Pacifico,cursive;font-weight:400;font-size:clamp(46px,11vw,92px);animation:tada 1.4s .3s both}
@keyframes tada{0%{transform:scale(.3) rotate(-8deg)}40%{transform:scale(1.15) rotate(3deg)}60%{transform:scale(.97)}100%{transform:none}}
.q{font-size:clamp(18px,3.6vw,26px);max-width:760px;line-height:1.35;font-weight:500}
.q b{text-decoration:underline;text-underline-offset:5px;color:var(--y)}
.pic{width:auto;height:auto;max-width:min(92vw,560px);max-height:42vh;border-radius:18px;box-shadow:0 10px 30px #0006}
.btn{font:700 clamp(16px,3.5vw,20px) Rubik,sans-serif;color:#fff;border:0;border-radius:999px;padding:14px 34px;cursor:pointer;background:linear-gradient(135deg,var(--p),#ff8a3d);box-shadow:0 6px 0 #a81e55,0 10px 24px #ff3d8155;transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 #a81e55}
.btn.big{font-size:clamp(20px,4vw,26px);padding:18px 46px;animation:pulse 1.6s infinite}
@keyframes pulse{50%{transform:scale(1.06)}}
.btn.ok{background:linear-gradient(135deg,#2ecc71,#16a34a)!important;box-shadow:0 6px 0 #0d6b30,0 0 34px #2ecc71!important;animation:okp .6s}
.btn.bad{background:linear-gradient(135deg,#ff5252,#c62828)!important;box-shadow:0 6px 0 #7f1111,0 0 34px #ff5252!important;animation:shk .5s}
.btn.ok::before{content:"✓ "}.btn.bad::before{content:"✕ "}
@keyframes okp{40%{transform:scale(1.18)}}
@keyframes shk{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
.opts{display:flex;gap:16px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2.5vw,28px);width:min(94vw,900px)}
.grid>div{display:flex;flex-direction:column;gap:14px;align-items:center}
.grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;box-shadow:0 8px 24px #0006}
.grid.c img{border-radius:50%;border:4px solid #fff3}
.grid .btn{width:100%;max-width:150px;padding:11px 0}
.car{position:relative;width:min(94vw,520px)}
.trk{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:18px;background:#0005}
.trk::-webkit-scrollbar{display:none}
.trk img{flex:0 0 100%;width:100%;height:52vh;object-fit:contain;scroll-snap-align:center;scroll-snap-stop:always}
.ar{position:absolute;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;border:0;background:#000a;color:#fff;font-size:28px;line-height:1;cursor:pointer}
.ar.l{left:8px}.ar.r{right:8px}
.cnt{font-size:16px;opacity:.85}
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,2vw,28px);width:min(96vw,1100px)}
.vids video{width:100%;aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:14px}
.vids figcaption{margin-top:10px;font-size:clamp(13px,2vw,18px);line-height:1.3}
@media(max-width:560px){.vids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}.vids figure{flex:0 0 62vw;scroll-snap-align:center}}
.sp{position:relative;display:inline-block;border-radius:18px;overflow:hidden;cursor:pointer;box-shadow:0 10px 30px #0008}
.sp img{display:block;width:auto;height:auto;max-width:min(86vw,440px);max-height:var(--mh);filter:blur(34px) brightness(.8);transform:scale(1.15);transition:filter 1s,transform 1s}
.sp canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .8s}
.sp i{position:absolute;left:50%;bottom:16px;translate:-50% 0;font:500 14px/1.2 Rubik,sans-serif;background:#0008;padding:7px 14px;border-radius:99px;white-space:nowrap;transition:opacity .4s}
.sp.open{cursor:default}.sp.open img{filter:none;transform:none}.sp.open canvas,.sp.open i{opacity:0}
.sc{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.sc img{position:absolute;left:var(--x);top:var(--y);width:var(--w);transform:rotate(var(--r));filter:drop-shadow(0 10px 16px #000a);animation:fl 5s ease-in-out var(--d) infinite alternate}
@keyframes fl{to{transform:translateY(-14px) rotate(calc(var(--r) + 3deg))}}
@media(max-width:700px){.sc img{left:var(--mx);top:var(--my);width:var(--mw)}}
.hero{position:relative;z-index:3;width:100%;max-width:560px;padding:28px 22px;border-radius:28px;background:#140f2ed9;backdrop-filter:blur(8px);border:1px solid #fff2;display:flex;flex-direction:column;align-items:center;gap:20px}
.hero h1{font-family:Pacifico,cursive;font-weight:400;font-size:clamp(36px,7vw,60px);line-height:1.15;animation:tada 1.4s .2s both}
.wish{list-style:none;padding:0;display:grid;gap:10px;font-size:clamp(15px,2.6vw,19px);line-height:1.4}
#bl{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.bn{position:absolute;bottom:-140px;width:46px;height:58px;border-radius:50% 50% 50% 50%/58% 58% 42% 42%;background:radial-gradient(circle at 35% 30%,#fff8,transparent 30%),var(--c);animation:up var(--d) linear var(--l) infinite}
.bn::after{content:"";position:absolute;left:50%;top:100%;width:1px;height:60px;background:#fff6}
@keyframes up{to{transform:translate(var(--s),-125vh) rotate(8deg)}}
#nav button{position:fixed;bottom:16px;z-index:40;width:44px;height:44px;border-radius:50%;border:2px solid #fff4;background:#ffffff1c;backdrop-filter:blur(6px);color:#fff;cursor:pointer;display:grid;place-items:center}
#nav .b0{left:16px}#nav .f{right:16px}
#ov{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;pointer-events:none}
#ov.show{display:flex;animation:fade 1.5s both}
#ov.ok{background:#16a34add}#ov.bad{background:#c62828dd}
#ov span{font:400 clamp(44px,11vw,140px) Pacifico,cursive;text-shadow:0 6px 0 #0004;animation:pop 1.5s both}
@keyframes fade{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
@keyframes pop{0%{transform:scale(.2) rotate(-12deg)}20%{transform:scale(1.15) rotate(4deg)}35%{transform:none}100%{transform:scale(1.08)}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
@media(prefers-reduced-motion:reduce){.sc img,.bn,.btn.big,.xl,.hero h1{animation:none}}