:root{--bg:#141319;--card:#1f1d2a;--line:#34304a;--tx:#f3f0fa;--mu:#a9a3c2;--gold:#e6c36a;--vi:#9b7bff;--pk:#f08fc0}
*{box-sizing:border-box;margin:0;padding:0}
body{background:radial-gradient(circle at 50% -10%,#2a2150,var(--bg) 60%);color:var(--tx);font-family:Outfit,sans-serif;min-height:100vh;overflow-x:hidden}
.stars{position:fixed;inset:0;pointer-events:none}.stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.2;animation:tw 4s infinite alternate}
@keyframes tw{to{opacity:.8;transform:scale(1.6)}}
header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;position:relative;z-index:2}
.logo{color:var(--gold);font-weight:600;letter-spacing:.5px}
.music{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:30px;padding:8px 14px;font:inherit;font-size:.85rem;cursor:pointer}
.music.on{border-color:var(--gold);box-shadow:0 0 14px #e6c36a55}
.bar{height:4px;background:var(--line);margin:0 18px;border-radius:4px;overflow:hidden;position:relative;z-index:2}
.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--vi),var(--gold));transition:width .4s}
main{max-width:640px;margin:0 auto;padding:20px 18px 60px;position:relative;z-index:2}
.fade{animation:up .5s ease both}@keyframes up{from{opacity:0;transform:translateY(14px)}}
.c{text-align:center}
h1{font-size:clamp(1.8rem,7vw,2.5rem);line-height:1.2;margin:18px 0 10px}h1 b{font-family:'Playfair Display',serif;font-style:italic;color:var(--gold);font-weight:600}
h2{font-size:1.45rem;line-height:1.3;margin:22px 0 6px}h3{font-size:1.1rem;margin-bottom:6px}
.mu{color:var(--mu);font-size:.95rem}
.genders{display:flex;gap:14px;justify-content:center;margin:26px 0 14px}
.g{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 26px;color:var(--tx);font:inherit;cursor:pointer;transition:.2s;flex:1;max-width:190px}
.g:hover,.card:hover,.opt:hover{border-color:var(--gold);transform:translateY(-3px)}
.g span{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 10px;border-radius:50%;font-size:2.2rem;background:linear-gradient(135deg,var(--vi),var(--pk))}
.skip{background:none;border:0;color:var(--mu);text-decoration:underline;font:inherit;cursor:pointer;margin-top:8px}
.paths{display:grid;gap:14px;margin-top:22px}
.card{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;color:var(--tx);font:inherit;cursor:pointer;transition:.2s}
.card .ic{font-size:2rem}.card em{font-style:normal;color:var(--gold);font-size:.8rem}
.opt{display:flex;justify-content:space-between;gap:10px;align-items:center;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;color:var(--tx);font:inherit;cursor:pointer;margin-top:10px;transition:.2s}
.opt.sel{border-color:var(--gold);background:#2b2640}.opt .ck{color:var(--gold);font-weight:700;min-width:16px}
.nav{display:flex;gap:10px;margin-top:20px}
.btn{flex:1;background:linear-gradient(90deg,var(--vi),var(--pk));border:0;color:#fff;font:inherit;font-weight:600;padding:15px;border-radius:40px;cursor:pointer;text-align:center;text-decoration:none;display:block}
.btn:disabled{opacity:.35;cursor:not-allowed}.btn.ghost{background:none;border:1px solid var(--line);color:var(--tx)}
.btn.gold{background:linear-gradient(90deg,#c9a24a,var(--gold));color:#1a1500;animation:pulse 2s infinite}
@keyframes pulse{50%{box-shadow:0 0 24px #e6c36a88}}
.breath{width:140px;height:140px;margin:50px auto 24px;border-radius:50%;background:radial-gradient(circle,var(--vi),transparent 70%);animation:br 4s ease-in-out infinite}
@keyframes br{50%{transform:scale(1.5);opacity:.6}}
.panel{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;margin-top:16px}
.ring{--p:70;width:130px;height:130px;border-radius:50%;margin:14px auto;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0)}
.ring b{width:104px;height:104px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-size:1.7rem}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tags span{background:#2b2640;border:1px solid var(--line);border-radius:30px;padding:6px 12px;font-size:.82rem}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}.grid3 div{background:#2b2640;border-radius:14px;padding:12px;text-align:center;font-size:.78rem}.grid3 big{display:block;font-size:1.6rem}
.av{display:flex;gap:14px;align-items:flex-start;margin-top:22px}
.orb{flex:none;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--pk) 30%,var(--vi));display:grid;place-items:center;font-weight:700;color:#2a1a55;box-shadow:0 0 0 6px #9b7bff33,0 0 30px #9b7bff88;animation:br 5s ease-in-out infinite;overflow:hidden}
.orb img{width:100%;height:100%;object-fit:cover}
.bub{background:var(--card);border:1px solid var(--gold);border-radius:4px 20px 20px 20px;padding:14px 16px;min-height:80px;line-height:1.5}
.row{display:flex;gap:10px;margin-top:12px}
.i{width:1.2em;height:1.2em;vertical-align:-.22em}
.g span svg{width:44px;height:44px;color:#fff}.card .ic svg{width:38px;height:38px;color:var(--gold)}
.grid3 big svg{width:34px;height:34px}.opt .ck svg{width:16px;height:16px}.music .i{margin-right:6px}
.lnk{color:var(--gold);text-decoration:none}.lnk:hover{text-decoration:underline}
.orb{overflow:visible}.orb svg,.orb img{width:100%;height:100%;border-radius:50%}
.orb::before,.orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid #9b7bff99;animation:rip 3.2s ease-out infinite}.orb::after{animation-delay:1.6s}
@keyframes rip{from{transform:scale(.95);opacity:.8}to{transform:scale(1.7);opacity:0}}
.flow{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.flow i{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(90px);animation:drift 28s ease-in-out infinite alternate}
.flow i:nth-child(1){background:#7a5cff;left:-15vmax;top:-12vmax;opacity:.28}
.flow i:nth-child(2){background:#f08fc0;right:-22vmax;top:25vh;opacity:.18;animation-duration:34s;animation-delay:-9s}
.flow i:nth-child(3){background:#e6c36a;left:12vw;bottom:-32vmax;opacity:.13;animation-duration:40s;animation-delay:-15s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(12vw,8vh) scale(1.15)}100%{transform:translate(-8vw,14vh) scale(.95)}}
.wave{position:absolute;left:0;bottom:0;width:200%;height:130px;opacity:.1;animation:wv 26s linear infinite}@keyframes wv{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.flow i,.wave,.stars i,.orb::before,.orb::after{animation:none}}
/* ===== Premium layer ===== */
@property --p{syntax:"<number>";inherits:false;initial-value:0}
.g,.card,.opt,.panel,.bub{background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.1);box-shadow:0 10px 40px -12px #0009,inset 0 1px 0 rgba(255,255,255,.08)}
.bub{border-color:rgba(230,195,106,.6)}
.g:hover,.card:hover{border-color:rgba(230,195,106,.7);box-shadow:0 16px 46px -10px #e6c36a40}
.opt{transition:border-color .2s,background .2s,box-shadow .2s}.opt:hover{transform:none;border-color:rgba(230,195,106,.6)}
.opt.sel{background:linear-gradient(145deg,rgba(155,123,255,.3),rgba(240,143,192,.14));border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 12px 40px -10px #9b7bff88}
.opt .ck{width:22px;height:22px;min-width:22px;border-radius:50%;border:1px solid rgba(255,255,255,.25);display:grid;place-items:center}.opt.sel .ck{background:var(--gold);color:#1a1500;border-color:var(--gold)}
h1{letter-spacing:-.5px}h1 b{background:linear-gradient(90deg,#e6c36a,#fff3c4,#e6c36a);background-size:200%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:200%}}
.bar{height:6px}.bar i{box-shadow:0 0 12px #e6c36a99}
.btn{position:relative;overflow:hidden}.btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sw 3.8s ease-in-out infinite}
@keyframes sw{60%,100%{left:130%}}.btn:disabled::after{display:none}
.mandala{position:absolute;left:50%;top:4vh;width:min(120vmin,900px);translate:-50% 0;opacity:.08;stroke:#e6c36a;fill:none;animation:spin 140s linear infinite}
@keyframes spin{to{rotate:360deg}}
.cf{position:fixed;top:-30px;z-index:9;pointer-events:none}.cf svg{width:100%;height:100%}
.res>*{animation:up .8s cubic-bezier(.2,.7,.2,1) both}
.halo{position:relative}.halo::before{content:"";position:absolute;left:50%;top:40%;width:380px;height:380px;translate:-50% -50%;border-radius:50%;background:conic-gradient(transparent,#e6c36a55,transparent 30%,#9b7bff55,transparent 60%,#f08fc055,transparent);filter:blur(34px);animation:spin 14s linear infinite;z-index:-1}
.res h2{text-shadow:0 0 28px #e6c36a66}
.ring{animation:fill 1.8s .4s cubic-bezier(.3,.7,.2,1) both;box-shadow:0 0 40px #e6c36a33}@keyframes fill{from{--p:0}}
.grid3 div{animation:flt 4s ease-in-out infinite}.grid3 div:nth-child(2){animation-delay:-1.3s}.grid3 div:nth-child(3){animation-delay:-2.6s}
@keyframes flt{50%{transform:translateY(-6px)}}.grid3 big svg{filter:drop-shadow(0 0 8px #fff7)}
.tags span{animation:pop .6s .9s both cubic-bezier(.3,1.6,.5,1)}@keyframes pop{from{transform:scale(.6);opacity:0}}
.res .panel:nth-child(2){border-color:rgba(230,195,106,.45)}
@media(prefers-reduced-motion:reduce){.mandala,.halo::before,.btn::after,.grid3 div,h1 b{animation:none}}