@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Manrope,Arial,sans-serif}body{background:var(--bg);color:#faf5ff;min-height:100svh;display:grid;place-items:center;padding:38px 20px;overflow-x:hidden}button,input{font:inherit}button{cursor:pointer}.backdrop{position:fixed;inset:-45px;z-index:-3;background-image:url('assets/portrait.png');background-size:cover;background-position:center 42%;filter:blur(30px) brightness(.38) saturate(.7);transform:scale(1.12);pointer-events:none}.veil{position:fixed;inset:0;z-index:-2;background:linear-gradient(120deg,#0b0714b3,#080812a6 55%,#2c102466),radial-gradient(ellipse at top left,color-mix(in srgb,var(--accent) 15%,transparent),transparent 65%)}.card{width:min(100%,440px);position:relative;background:linear-gradient(145deg,#272235d9,#12121ce8);border:1px solid #ffffff25;border-radius:28px;padding:34px 28px 26px;box-shadow:0 25px 90px #0005,0 1px 0 #ffffff0c inset;backdrop-filter:blur(20px);text-align:center;overflow:hidden;animation:arrive .7s ease both}.card:before{content:'';position:absolute;top:0;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,var(--accent),var(--second),transparent)}.brand{font-size:10px;letter-spacing:2.8px;color:var(--accent);font-weight:800;text-transform:uppercase;margin:0 0 23px}.emblem{width:62px;height:62px;border:1px solid #ffffff26;border-radius:20px;margin:0 auto 23px;display:grid;place-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 23%,transparent),color-mix(in srgb,var(--second) 12%,transparent));color:#f6eaff;box-shadow:0 0 45px color-mix(in srgb,var(--accent) 10%,transparent);font-size:31px}.card h1{font-size:29px;line-height:1.2;letter-spacing:-1.1px;margin:0 0 13px;font-weight:800}.subtitle{font-size:13px;line-height:1.85;color:#bdb6cc;margin:0 auto 28px;max-width:320px}.scene{position:relative;height:174px;border-radius:21px;overflow:hidden;border:1px solid #ffffff25;background:linear-gradient(125deg,#343149aa,#26203dba);margin-bottom:17px}.scene-bg{position:absolute;inset:-20px;background:url('assets/portrait.png') center 43%/cover;filter:blur(19px) brightness(.5);opacity:.27}.scene:after{content:'✧';position:absolute;right:20px;bottom:2px;font-size:54px;color:#d6a0ff20}.start,.target{width:62px;height:62px;border-radius:16px;position:absolute;top:44px;display:grid;place-items:center;font-size:30px}.start{left:36px;background:linear-gradient(135deg,var(--accent),var(--second));color:#24132f;box-shadow:0 0 32px color-mix(in srgb,var(--accent) 25%,transparent);will-change:transform;z-index:2}.target{right:36px;border:2px dashed color-mix(in srgb,var(--accent) 70%,transparent);color:var(--accent);background:#ffffff05}.scene-label{position:absolute;bottom:16px;left:18px;font-size:8px;letter-spacing:1.8px;color:#beb0d0}.slider{position:relative;height:62px;border:1px solid #ffffff33;border-radius:40px;background:#ffffff08;box-shadow:0 3px 15px #0004 inset;touch-action:pan-y;user-select:none}.track-fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:40px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,transparent),color-mix(in srgb,var(--second) 15%,transparent));pointer-events:none}.slider-label{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:#dbd3e7;font-weight:600;pointer-events:none;padding-left:30px}.thumb{position:absolute;width:50px;height:50px;top:5px;left:5px;border-radius:50%;display:grid;place-items:center;font-size:26px;color:#24152e;background:linear-gradient(135deg,var(--accent),var(--second));box-shadow:0 0 22px color-mix(in srgb,var(--accent) 24%,transparent);pointer-events:none;will-change:transform}.range{appearance:none;-webkit-appearance:none;position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;opacity:0;cursor:grab;touch-action:pan-y}.range:active{cursor:grabbing}.slider:focus-within{outline:2px solid var(--accent);outline-offset:5px}.hint{font-size:10px;color:#a198b4;line-height:1.7;margin:17px 0 0;min-height:34px}.bottom{display:flex;justify-content:center;gap:9px;align-items:center;font-size:9px;color:#837a94;letter-spacing:.6px;margin-top:22px}.bottom .age{border:1px solid #ffffff25;padding:3px 6px;border-radius:5px}.privacy{font-size:8px;color:#746c82;position:fixed;bottom:14px;left:15px;right:15px;text-align:center;letter-spacing:.3px}.success .target{border-style:solid;box-shadow:0 0 25px #b68ce644}.success .slider-label{color:var(--accent)}.reset .thumb,.reset .start,.reset .track-fill{transition:transform .28s ease,width .28s ease}.modal{border:1px solid #ffffff30;border-radius:24px;padding:28px;background:#1b1628;color:#fff;width:calc(100% - 40px);max-width:340px;text-align:center;box-shadow:0 30px 100px #0009}.modal::backdrop{background:#080710b8;backdrop-filter:blur(14px)}.modal h2{font-size:24px;margin:0 0 12px}.modal p{font-size:13px;color:#c0b5ce;line-height:1.8}.modal button{width:100%;padding:14px;border:0;border-radius:14px;background:linear-gradient(120deg,var(--accent),var(--second));color:#251731;font-weight:800;margin-top:12px}.modal button:focus-visible{outline:2px solid #fff;outline-offset:4px}@keyframes arrive{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}@media(max-width:480px){body{padding:30px 19px 44px}.card{padding:29px 23px 24px;border-radius:26px}.card h1{font-size:27px}.subtitle{font-size:12px;margin-bottom:25px}.scene{height:164px}.start,.target{width:58px;height:58px;top:43px}.start{left:26px}.target{right:26px}.brand{font-size:9px;margin-bottom:21px}.emblem{width:58px;height:58px;margin-bottom:21px}.privacy{font-size:7px}.hint{font-size:9px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.passion .card{background:linear-gradient(150deg,#3c2028e8,#211118ed);border-color:#e8aa7838;border-radius:120px 120px 28px 28px;padding-top:44px}body.passion .emblem{border-radius:50%;background:linear-gradient(135deg,#e6ac7240,#923e6c22);font-size:34px}body.passion .scene{border-radius:80px 80px 17px 17px;background:linear-gradient(135deg,#67422d65,#4523399c)}body.passion .start,body.passion .target{border-radius:50%}body.passion .slider{border-color:#eab89550;background:#bc6e5712}body.passion .veil{background:radial-gradient(ellipse at 10% 20%,#8c42244f,transparent 60%),linear-gradient(125deg,#1f0b16ac,#110810b8)}body.passion .scene:after{content:'♡';font-size:77px;right:9px;bottom:-15px;color:#d9a16d15}body.passion h1{font-family:Georgia,serif;font-weight:500;font-size:33px;letter-spacing:-.7px}