@font-face{font-family:Onest;src:url(/static/Onest-Regular.ttf);font-weight:400;font-display:swap}
@font-face{font-family:Onest;src:url(/static/Onest-Medium.ttf);font-weight:500;font-display:swap}
@font-face{font-family:Onest;src:url(/static/Onest-Bold.ttf);font-weight:700;font-display:swap}
@font-face{font-family:NF;src:url(/static/NeutralFace-Bold.otf);font-weight:700;font-display:swap}
:root{--lagoon:#13b5b1;--lagoon2:#0e9c98;--lagoon-soft:#e2f5f3;--ocean:#0e3b5c;--ink:#0e2a3f;--mute:#5f7280;--sand:#f6f1e7;--sand2:#efe6d4;--card:#fff;--line:#e5ded0;--coral:#e8553f;--coral-soft:#fdebe7}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{background:var(--sand);color:var(--ink);font:16px/1.45 Onest,system-ui,sans-serif}
body{overflow-x:hidden}
.wrap{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 14px) 16px calc(env(safe-area-inset-bottom,0px) + 120px)}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 0 12px}
.brand img{height:15px;width:auto;display:block}
.brand .flag{width:27px;height:18px;border-radius:3px;display:block;flex:none;box-shadow:0 0 0 1px rgba(14,42,63,.08)}
.who{font-size:13.5px;color:var(--mute);margin:-2px 0 10px}.who b{color:var(--ink);font-weight:500}
.bar{position:sticky;top:0;z-index:5;background:var(--sand);padding:6px 0 12px;display:flex;align-items:center;gap:10px}
.dots{display:flex;gap:6px;flex:1}
.dots i{height:6px;flex:1;border-radius:9px;background:var(--sand2);transition:background .3s}
.dots i.d{background:var(--ocean)}.dots i.c{background:var(--lagoon)}
.bar span{font-size:12.5px;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.step{display:none;animation:in .4s cubic-bezier(.2,.8,.2,1)}
.step.on{display:block}
@keyframes in{from{opacity:.001;transform:translateY(12px)}to{opacity:1;transform:none}}
h1,h2{font-family:NF,Onest,sans-serif;font-weight:700;color:var(--ocean);text-wrap:balance}
h1{font-size:27px;line-height:1.12;letter-spacing:-.01em;margin-bottom:12px}
h2{font-size:22px;line-height:1.15;margin-bottom:6px}
.lead{color:#2f4555;margin-bottom:10px;font-size:16.5px}
.sub{color:var(--mute);font-size:14.5px;margin-bottom:14px}
/* hero */
.hero{border-radius:22px;overflow:hidden;background:var(--card);margin-bottom:12px}
.pic{height:210px;position:relative;background:url(/static/hero.jpg) center/cover no-repeat,linear-gradient(180deg,#8fdcd6 0%,#3ec3bd 42%,#13a7a6 62%,#0e6f8a 100%)}
.pic svg{position:absolute;inset:0;width:100%;height:100%}
.pic.photo svg{display:none}
.hero .txt{padding:18px 18px 20px}
.dates{font-size:13px;color:var(--lagoon2);font-weight:500;margin-bottom:8px}
.facts{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:12px;font-size:13.5px;color:var(--mute)}
/* cards */
.card{background:var(--card);border-radius:18px;padding:12px 12px 12px;margin-bottom:8px}
.rq{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 2px 9px}
.rq .t{font-weight:500;font-size:15.5px;line-height:1.25}
.na{flex:none;font:500 13px Onest,sans-serif;border:1.5px solid var(--line);background:#fff;color:var(--mute);border-radius:99px;padding:6px 11px;cursor:pointer;min-height:34px}
.na.sel{background:var(--ocean);border-color:var(--ocean);color:#fff}
.faces,.lbls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.faces button{font:500 clamp(9px,2.7vw,10.5px)/1.1 Onest,sans-serif;letter-spacing:-.01em;border:1.5px solid var(--line);background:#fbf9f4;border-radius:14px;min-height:52px;padding:4px 0;position:relative;color:var(--mute);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;transition:transform .15s,background .15s,border-color .15s,opacity .15s}
.faces button b{font-size:clamp(23px,7vw,28px);line-height:1;font-weight:400}
.faces button.sel{background:var(--lagoon-soft);border-color:var(--lagoon);color:var(--ink);transform:scale(1.06)}
.faces.has button:not(.sel){opacity:.55}
.faces.off button{opacity:.3}
.card.done-row{box-shadow:inset 0 0 0 1.5px rgba(19,181,177,.35)}
.whyw{margin-top:10px}.wl{display:block;font-weight:500;font-size:14.5px;color:var(--coral);margin:0 2px 6px}
.why{width:100%;padding:10px 12px;border-radius:12px;border:1.5px solid #f2c3b9;font:inherit;font-size:15px;resize:vertical;background:var(--coral-soft)}
.why::placeholder{color:#a8756b}
/* texts + voice */
label.t{display:block;font-weight:500;margin-bottom:8px;font-size:15.5px}
textarea,input[type=text]{width:100%;font:16px Onest,sans-serif;border:1.5px solid var(--line);border-radius:14px;padding:11px 12px;background:#fff;color:var(--ink);resize:none}
textarea:focus,input:focus{outline:none;border-color:var(--lagoon)}
.mic{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:8px}
.vrec{display:flex;align-items:center;gap:8px;background:var(--lagoon-soft);border-radius:12px;padding:6px 8px}
.vrec .pl{width:34px;height:34px;border-radius:50%;border:0;background:var(--ocean);color:#fff;font-size:14px;flex:none;padding:0!important}
.vrec .vt{flex:1;font-size:13.5px}.vrec .vt b{color:var(--lagoon2);font-weight:500;margin-left:4px}
.vrec .dl{border:0;background:none;font-size:16px;color:var(--mute);padding:4px 6px!important}
.mic .addv{align-self:flex-start}
.mic button{font:500 14px Onest,sans-serif;border:1.5px solid var(--line);background:#fff;border-radius:99px;padding:8px 13px;color:var(--ink);cursor:pointer}
.mic button.rec{background:var(--coral);border-color:var(--coral);color:#fff;animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(232,85,63,.18)}}
/* destinations */
.qh{font-weight:700;font-size:17px;line-height:1.25;margin:0 2px 10px;color:var(--ocean)}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chips button{font:500 14.5px/1.2 Onest,sans-serif;border:1.5px solid var(--line);background:#fff;border-radius:16px;padding:10px 12px;min-height:56px;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;transition:background .15s,border-color .15s}
.chips .fl{font-size:24px;line-height:1;flex:none}
.chips button.sel{background:var(--ocean);border-color:var(--ocean);color:#fff}
/* footer */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:6;background:linear-gradient(180deg,rgba(246,241,231,0),var(--sand) 32%);padding:18px 16px calc(env(safe-area-inset-bottom,0px) + 12px)}
.foot .in{max-width:520px;margin:0 auto;display:flex;gap:10px}
.btn{flex:1;font:700 17px Onest,sans-serif;border:0;border-radius:16px;padding:16px;background:var(--ocean);color:#fff;cursor:pointer;transition:opacity .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn[disabled]{opacity:.35}
.btn.go{background:var(--coral)}
.back{flex:none;width:56px;font:700 20px Onest;border:1.5px solid var(--line);background:#fff;border-radius:16px;color:var(--ocean);cursor:pointer}
.hint{font-size:13px;color:var(--mute);text-align:center;margin-top:8px;min-height:18px}
.err{color:var(--coral);font-size:14px;text-align:center;margin-top:10px}
/* thank you, no link */
.fin{text-align:center;padding-top:36px;position:relative}
.fin .big{font-size:64px;line-height:1;margin-bottom:14px}
.fin .lead{max-width:360px;margin:0 auto 10px}
.hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.hearts span{position:absolute;bottom:-40px;font-size:26px;animation:up 4.6s ease-in forwards;opacity:0}
@keyframes up{0%{transform:translateY(0) scale(.7);opacity:0}12%{opacity:1}100%{transform:translateY(-105vh) translateX(var(--dx)) scale(1.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.hearts{display:none}.step{animation:none}}
.gate{background:var(--card);border-radius:22px;padding:28px 20px;text-align:center;margin-top:8px}
.gate .big{font-size:44px;margin-bottom:10px}
.gate p{color:#2f4555}
@media (max-height:700px){.pic{height:160px}h1{font-size:24px}}
/* срез настроения */
.kick{font:500 13px Onest,sans-serif;color:var(--lagoon2);margin:4px 2px 8px}
.intro{margin:0 2px 14px}
.faces button.wow{background:#fff7e0;border-color:#f3d58a}
.faces button.wow.sel{background:linear-gradient(140deg,#ffe6a0,#ffc7b5);border-color:var(--coral);transform:scale(1.1)}
.faces .spk{position:absolute;top:1px;right:3px;font-size:11px;font-style:normal;line-height:1}
.lbls{margin-top:5px}
.lbls span{font-size:clamp(9px,2.45vw,10.5px);line-height:1.1;color:var(--mute);text-align:center;letter-spacing:-.015em;overflow-wrap:normal;hyphens:none;transition:color .15s}
.lbls.has span:not(.sel){opacity:.6}.lbls span.sel{color:var(--ink);font-weight:700;opacity:1}.lbls span.w.sel{color:var(--coral)}
.sign{display:block;margin-top:6px;font-weight:600;opacity:.8}