@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.psy .card{background:linear-gradient(155deg,#183b3bdc,#101f26ed);border-color:#a3e5d331;border-radius:32px 32px 75px 32px}body.psy .emblem{border-radius:50%;border:1px solid #a6e5d448;box-shadow:0 0 0 8px #a6e5d405,0 0 0 17px #a6e5d403;font-size:38px}body.psy .scene{background:radial-gradient(ellipse at center,#2d6a622e,#0c272caa);border-radius:28px 28px 60px 28px}body.psy .start,body.psy .target{border-radius:50%}body.psy .target{border-style:dotted}body.psy .scene:before{content:'';position:absolute;width:240px;height:85px;left:calc(50% - 120px);top:32px;border:1px solid #a6e5d419;border-radius:50%;transform:rotate(-19deg)}body.psy .scene:after{content:'·';font-size:90px;color:#a6e5d42e;right:30px;bottom:-15px}body.psy .veil{background:radial-gradient(ellipse at 85% 10%,#136b6266,transparent 65%),linear-gradient(120deg,#07181caa,#061316bb)}body.psy .slider{background:#8adfc50b;border-color:#b0e1d539}body.psy .thumb{box-shadow:0 0 25px #80eac42b}body.psy h1{font-weight:600;letter-spacing:-.8px}
