:root{font-family:Arial,sans-serif;color:#fbeefe;background:#07030d;font-size:16px;--accent:#ff2e93;--card:#160624;--radius:32px;--width:620px;--padding:32px;--buttonRadius:20px;--neon-secondary:#7b2cff;--neon-line:rgba(255,46,147,.4);--neon-glow:rgba(255,46,147,.18);--neon-soft:rgba(255,46,147,.09);--neon-highlight:rgba(255,110,196,.58)}
@supports(color:color-mix(in srgb,red,transparent)){:root{--neon-line:color-mix(in srgb,var(--accent) 42%,transparent);--neon-glow:color-mix(in srgb,var(--accent) 20%,transparent);--neon-soft:color-mix(in srgb,var(--accent) 10%,transparent);--neon-highlight:color-mix(in srgb,var(--accent) 62%,white)}}
*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(ellipse at 15% 15%,var(--neon-soft),transparent 68%);overflow-x:hidden}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--neon-highlight);outline-offset:4px}button:disabled{cursor:default;opacity:.45}[hidden]{display:none!important}

/* Soft gradients avoid full-screen blur filters and a large particle count. */
.neon-orbs,.ambient{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.neon-orbs span{position:absolute;width:clamp(220px,48vw,560px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--accent),transparent 68%);opacity:.17;animation:neon-drift 18s ease-in-out infinite alternate}
.neon-orbs span:nth-child(1){left:-12%;top:-12%}
.neon-orbs span:nth-child(2){right:-15%;top:25%;background:radial-gradient(circle,var(--neon-secondary),transparent 68%);opacity:.25;animation-duration:22s;animation-delay:-9s}
.neon-orbs span:nth-child(3){left:14%;bottom:-24%;animation-delay:-12s}
.ambient{color:var(--accent)}.ambient span{position:absolute;font-size:28px;opacity:.22;animation:float 8s infinite ease-in-out}
.ambient span:nth-child(1){left:6%;top:12%}.ambient span:nth-child(2){right:12%;top:22%;font-size:42px;animation-delay:-3s}.ambient span:nth-child(3){left:17%;bottom:18%;animation-delay:-2s}.ambient span:nth-child(4){right:5%;bottom:12%;animation-delay:-4s}.ambient span:nth-child(5){left:50%;top:7%;animation-delay:-5s}
#backdrop{position:fixed;inset:0;pointer-events:none;z-index:1;background-size:contain;background-repeat:no-repeat;background-position:center bottom;opacity:.5}
#backdrop video{width:100%;height:100%;display:block}
body[data-page-type="loading"] #backdrop{visibility:hidden}
.stage{position:relative;z-index:2;width:min(calc(100% - 40px),var(--width));margin:auto;padding:clamp(24px,4vh,48px) 0 max(30px,env(safe-area-inset-bottom))}
header{text-align:center;margin-bottom:24px}
h1{font-family:Georgia,serif;font-style:italic;color:var(--accent);font-size:clamp(36px,7.5vw,54px);letter-spacing:-.035em;line-height:1.1;overflow-wrap:anywhere;margin:0 0 14px;text-shadow:0 0 24px var(--neon-glow),0 2px 12px #0005}
header p{margin:0;line-height:1.55;font-size:16px;overflow-wrap:anywhere}
.steps{display:flex;justify-content:center;gap:7px;margin:0 0 25px;flex-wrap:wrap}
.steps i{width:24px;height:4px;background:var(--neon-line);opacity:.35;border-radius:10px}
.steps i.done{background:var(--accent);opacity:1;box-shadow:0 0 10px var(--neon-glow)}
.stack{position:relative}
.fan{position:absolute;inset:0;background:transparent;border:1px solid var(--neon-line);border-radius:var(--radius);pointer-events:none;box-shadow:0 8px 30px var(--neon-soft)}
.fan-a{transform:translate(-4px,5px)}.fan-b{transform:translate(4px,-3px)}
#card{position:relative;isolation:isolate;background:var(--card);border:1px solid var(--neon-line);border-radius:var(--radius);box-shadow:0 0 30px var(--neon-glow),0 20px 45px #0004,inset 0 1px 0 #ffffff18;min-height:360px;padding:var(--padding);display:flex;flex-direction:column;text-align:var(--align,center);gap:18px;transition:opacity .14s,transform .14s}
#card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 22px var(--neon-glow);opacity:.55;animation:neon-edge 4s ease-in-out infinite}
body[data-page-type="choice"] #card{touch-action:pan-y}
.page-title{margin:8px 0 0;color:var(--accent);font-family:Georgia,serif;font-style:italic;font-size:var(--titleSize,28px);line-height:1.25;white-space:pre-wrap;overflow-wrap:anywhere;text-shadow:0 0 20px var(--neon-glow)}
.page-body{margin:0;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--fontSize,18px)}
.page-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;min-height:150px;width:100%}
.page-content>.block-text,.page-content>.page-title,.page-content>.page-body{width:100%}
.heart{font-size:86px;line-height:1;color:var(--accent);margin:auto auto 26px;user-select:none;text-shadow:0 0 30px var(--neon-glow);animation:finale-beat 1.7s ease-in-out infinite}
.actions{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:12px;margin-top:auto;padding-top:18px}
.action,.contact-button{position:relative;isolation:isolate;border:1px solid var(--neon-line);border-radius:var(--buttonRadius);padding:17px 16px;background:var(--neon-soft);color:inherit;min-height:58px;font-weight:600;text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;overflow-wrap:anywhere;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.action.primary{background:var(--accent);color:white;border-color:var(--accent);box-shadow:0 0 20px var(--neon-glow),inset 0 1px 0 #ffffff35}
.action.primary::after{content:"";position:absolute;inset:0 auto 0 0;width:42%;background:linear-gradient(100deg,transparent,#ffffff55,transparent);transform:translateX(-180%) skewX(-20deg);pointer-events:none;animation:neon-shine 4.8s ease-in-out infinite}
.action.primary:disabled::after{animation:none;opacity:0}
@media(hover:hover){.action:hover,.contact-button:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 0 24px var(--neon-glow)}.tile:hover{border-color:var(--accent)}}
.action:active,.contact-button:active{transform:scale(.975)}
.tiles{display:grid;grid-template-columns:repeat(var(--columns,2),minmax(0,1fr));gap:12px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid var(--neon-line);border-radius:18px;min-height:130px;padding:0;overflow:hidden;background:var(--card);color:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.tile img{display:block;width:100%;height:clamp(100px,21vh,190px);object-fit:var(--imageFit,cover);object-position:var(--imagePosition,50% 20%);transition:transform .35s ease}
.tile .caption{width:100%;padding:11px 8px;font-size:15px;line-height:1.35;background:var(--neon-soft);overflow-wrap:anywhere}
.tile .check{position:absolute;right:8px;top:8px;display:grid;place-items:center;border-radius:50%;width:26px;height:26px;background:#ffffffdc;color:transparent;box-shadow:0 1px 8px #0003;border:1px solid #fff9}
.tile[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent);box-shadow:0 0 22px var(--neon-glow);transform:scale(.975)}
.tile[aria-pressed=true] img{transform:scale(1.035)}
.tile[aria-pressed=true] .check{background:var(--accent);color:white;box-shadow:0 0 12px var(--neon-glow)}
.tile .placeholder{font-size:36px;color:var(--accent);opacity:.4;margin:30px}
.block-text{white-space:pre-wrap;line-height:1.65;overflow-wrap:anywhere;margin:0}
.block-image{max-width:100%;align-self:center;display:block}
.block-button{align-self:center;min-width:min(150px,100%);max-width:100%;white-space:normal;text-align:center}
.contact-buttons{display:flex;flex-direction:column;gap:12px;margin:20px 0}
.contact-button.ws{background:#168e64;color:white;border:1px solid #ffffff24}
.contact-button.tg{background:#268fbd;color:white;border:1px solid #ffffff24}
.contact-button svg{width:24px;height:24px;fill:currentColor;flex:none}
body[data-page-type="contact"] .contact-button{animation:neon-rise .55s ease-out both}
body[data-page-type="contact"] .contact-button:nth-child(2){animation-delay:.1s}
.match-visual{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,40px);width:100%;min-height:126px;margin:2px 0 6px;pointer-events:none}
.match-avatar{display:block;flex:0 0 auto;width:clamp(76px,22vw,112px);height:clamp(76px,22vw,112px);border:2px solid var(--accent);border-radius:50%;overflow:hidden;background:var(--card);box-shadow:0 0 24px var(--neon-glow);animation:neon-avatar-left .7s cubic-bezier(.2,.8,.2,1) both}
.match-avatar:nth-of-type(2),.match-avatar:last-child{animation-name:neon-avatar-right;animation-delay:.06s}
.match-avatar:only-child{animation-name:neon-rise}
.match-avatar img{display:block;width:100%;height:100%;object-fit:var(--imageFit,cover);object-position:var(--imagePosition,50% 20%)}
.match-heart{color:var(--accent);font-size:clamp(32px,9vw,46px);line-height:1;text-shadow:0 0 20px var(--neon-glow);animation:neon-heart-pop .7s ease-out both}
.match-heart svg{display:block;width:1em;height:1em;fill:currentColor}
.foot{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-top:26px;min-height:32px;gap:12px}
.foot .language-select{position:static;top:auto;left:auto;max-width:min(180px,52vw);margin:0;flex:0 0 auto;-webkit-appearance:none;appearance:none;padding:8px 28px 8px 14px;background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 L6 8 L9.8 4.2' fill='none' stroke='%23fbeefe' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px}
.foot button{border:1px solid var(--neon-line);background:var(--card);border-radius:20px;padding:9px 20px;color:inherit}
.foot span{margin-left:auto;opacity:.65}
.error,.notice{padding:14px 16px;background:var(--neon-soft);border:1px solid var(--neon-line);border-radius:12px;font-size:15px;line-height:1.6;overflow-wrap:anywhere}
.error{border-color:#e65e76}.boot{text-align:center;margin:auto}
.restart{align-self:center;border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;color:inherit;padding:10px;font-size:14px}
.fade{opacity:0;transform:translateY(8px)}
.edit-preview [data-edit-path]{cursor:pointer}
.edit-preview [data-edit-path]:hover{outline:2px dashed var(--accent);outline-offset:4px}
.edit-preview #fx{display:none}

.music-disc{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));z-index:10;width:44px;height:44px;padding:0;border:0;background:transparent;border-radius:50%;cursor:pointer}
.record{display:grid;place-items:center;width:44px;height:44px;border:2px solid #ffffffb0;border-radius:50%;background:repeating-radial-gradient(circle,#29222a 0 3px,#473844 4px 5px);box-shadow:0 3px 12px #0003;animation:record-spin 5s linear infinite;animation-play-state:paused}
.record>span{display:grid;place-items:center;width:17px;height:17px;background:var(--accent);border-radius:50%;color:white;font-size:12px}
.music-disc.playing .record{animation-play-state:running}
.language-select{position:fixed;z-index:10;top:max(16px,env(safe-area-inset-top));left:max(12px,env(safe-area-inset-left));max-width:min(160px,calc(100vw - 84px));padding:8px 28px 8px 12px;border:1px solid var(--neon-line);border-radius:18px;background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.2 L6 8 L9.8 4.2' fill='none' stroke='%23fbeefe' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 8px center;background-size:12px 12px;-webkit-appearance:none;appearance:none;color:inherit;font-size:12px;color-scheme:dark}
.language-select:focus{outline:2px solid var(--accent)}.language-select option{background:var(--card);color:inherit}
.public-controls{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:64px;padding:max(10px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) 10px max(14px,env(safe-area-inset-left));background:var(--page-bg,#07030d);border-bottom:1px solid var(--neon-line);box-shadow:0 3px 12px #0002}
.public-controls .language-select{position:static;max-width:min(160px,calc(100vw - 84px));margin:0}
.public-controls .music-disc{position:static;flex-shrink:0;margin-left:auto}

.finale-loading{width:100%;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:18px;margin:auto;align-self:center;text-align:center}
.finale-loader{position:relative;width:132px;height:132px;--heart-svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 21s-7.5-4.6-9.6-9.3C.9 8.3 3 4.5 6.7 4.5c2.1 0 3.6 1.1 4.3 2.4h2c.7-1.3 2.2-2.4 4.3-2.4 3.7 0 5.8 3.8 4.3 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E")}
.finale-loader .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--neon-line);border-top-color:var(--accent);border-right-color:var(--neon-highlight);box-shadow:0 0 20px var(--neon-glow),inset 0 0 20px var(--neon-soft);animation:finale-spin 1.25s linear infinite}
.finale-loader::after{content:"";position:absolute;inset:14px;border:1px solid var(--neon-line);border-radius:50%;pointer-events:none}
.finale-loader .beat{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;color:var(--accent);font-size:0;background:var(--accent);-webkit-mask:var(--heart-svg) center / contain no-repeat;mask:var(--heart-svg) center / contain no-repeat;animation:finale-beat 1.1s ease-in-out infinite}
@supports not (mask:url("") center / contain no-repeat){.finale-loader .beat{background:var(--heart-svg) center / contain no-repeat}}
.finale-loading-text{margin:0;min-height:1.4em;font-size:17px;font-weight:600;color:var(--accent);overflow-wrap:anywhere}
.finale-progress{width:100%;max-width:280px;height:9px;border-radius:999px;background:var(--neon-soft);overflow:hidden;border:1px solid var(--neon-line)}
.finale-progress i{display:block;height:100%;width:0;border-radius:inherit;background:var(--accent);box-shadow:0 0 12px var(--neon-glow)}
@supports(color:color-mix(in srgb,red,transparent)){.finale-progress i{background:linear-gradient(90deg,var(--neon-highlight),var(--accent))}}
.finale-progress-num{margin:-5px 0 0;font-size:28px;font-weight:700;color:inherit;font-variant-numeric:tabular-nums;letter-spacing:-.035em}

#fx{position:fixed;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.fx-particle{position:absolute;left:var(--x,50%);top:var(--y,50%);width:var(--size,18px);height:var(--size,18px);margin:calc(var(--size,18px) / -2);font-size:var(--size,18px);line-height:1;color:var(--accent);opacity:0;animation:neon-particle var(--duration,.85s) cubic-bezier(.15,.7,.35,1) var(--delay,0s) both}
.fx-particle svg{display:block;width:100%;height:100%;fill:currentColor}
.fx-particle.confetti{border-radius:2px;width:var(--size,8px);height:calc(var(--size,8px) * .45);background:currentColor;animation-name:neon-confetti}

@keyframes float{50%{transform:translateY(-18px) rotate(8deg)}}
@keyframes neon-drift{from{transform:translate3d(0,0,0) scale(.9)}to{transform:translate3d(35px,-25px,0) scale(1.08)}}
@keyframes neon-edge{50%{opacity:1}}
@keyframes neon-shine{0%,62%{transform:translateX(-180%) skewX(-20deg)}100%{transform:translateX(380%) skewX(-20deg)}}
@keyframes record-spin{to{transform:rotate(360deg)}}
@keyframes finale-spin{to{transform:rotate(360deg)}}
@keyframes finale-beat{0%,100%{transform:scale(.9)}15%{transform:scale(1.08)}30%{transform:scale(.95)}45%{transform:scale(1.04)}}
@keyframes neon-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes neon-avatar-left{from{opacity:0;transform:translateX(-45px) rotate(-12deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes neon-avatar-right{from{opacity:0;transform:translateX(45px) rotate(12deg) scale(.8)}to{opacity:1;transform:none}}
@keyframes neon-heart-pop{0%,40%{opacity:0;transform:scale(.45)}80%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes neon-particle{0%{opacity:1;transform:translate(0,0) scale(.4)}65%{opacity:.9}100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,-90px)) rotate(var(--rotation,0deg)) scale(1)}}
@keyframes neon-confetti{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--dx,0px),var(--dy,160px)) rotate(var(--rotation,160deg))}}
body.motion-paused *,body.motion-paused *::before,body.motion-paused *::after{animation-play-state:paused!important}

@media(max-width:500px){.stage{width:calc(100% - 30px);padding-top:24px}header{margin-bottom:20px}h1{font-size:clamp(34px,10.5vw,46px)}#card{padding:min(var(--padding),24px);min-height:330px}.actions{gap:10px}.action{padding:15px 8px}.neon-orbs span{width:320px;opacity:.12}.neon-orbs span:nth-child(2){opacity:.18}.finale-loader{width:116px;height:116px}.match-visual{min-height:108px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.action.primary::after,#fx{display:none!important}.match-avatar,.match-heart,body[data-page-type="contact"] .contact-button{opacity:1;transform:none}}