:root{--bg:#07051a;--tx:#ecebff;--mu:#a9a6d6;--ac:#a5b4fc;--vi:#7c3aed;--in:#4f46e5;--gl:rgba(255,255,255,.07);--gb:rgba(180,170,255,.18);--serif:'Cormorant Garamond',Georgia,serif;--sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--tx);font:400 16px/1.5 var(--sans);min-height:100vh;padding-top:env(safe-area-inset-top,0);-webkit-tap-highlight-color:transparent;
background:radial-gradient(60% 50% at 12% 8%,rgba(124,58,237,.45),transparent 70%),radial-gradient(55% 45% at 92% 30%,rgba(37,99,235,.38),transparent 70%),radial-gradient(60% 50% at 40% 100%,rgba(192,38,211,.28),transparent 70%),var(--bg);background-attachment:fixed}
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.7;background-image:radial-gradient(1.2px 1.2px at 12% 20%,#fff,transparent),radial-gradient(1px 1px at 28% 70%,#cfd0ff,transparent),radial-gradient(1.4px 1.4px at 46% 38%,#fff,transparent),radial-gradient(1px 1px at 63% 82%,#d6ccff,transparent),radial-gradient(1.2px 1.2px at 77% 14%,#fff,transparent),radial-gradient(1px 1px at 90% 58%,#cfe0ff,transparent),radial-gradient(1px 1px at 5% 90%,#fff,transparent),radial-gradient(1.3px 1.3px at 55% 6%,#fff,transparent);animation:tw 6s ease-in-out infinite alternate}
@keyframes tw{to{opacity:.4}}
a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer}
:focus-visible{outline:2px solid var(--ac);outline-offset:3px;border-radius:8px}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;line-height:1.1}h1{font-size:clamp(34px,8vw,50px)}h2{font-size:26px;margin:32px 0 12px}
.glass,.row,.hero,.stat,nav{background:var(--gl);border:1px solid var(--gb);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 8px 32px rgba(8,4,40,.45),inset 0 1px 0 rgba(255,255,255,.12)}
@supports not (backdrop-filter:blur(1px)){.glass,.row,.hero,nav{background:rgba(30,22,70,.88)}}
nav{position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0));z-index:5;display:flex;justify-content:space-around;border-radius:24px;padding:6px 4px}
nav a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;color:var(--mu);font-size:12px;border-radius:16px;min-width:58px}
nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
nav a[aria-current=page]{color:#fff;background:linear-gradient(135deg,rgba(124,58,237,.55),rgba(59,130,246,.4))}
main{max-width:760px;margin:0 auto;padding:26px 22px 130px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.brand{color:#c4b5fd;font:600 22px var(--serif)}
.logo{object-fit:contain;filter:drop-shadow(0 4px 14px rgba(124,58,237,.5))}
.dev{display:flex;align-items:center;gap:16px;border-radius:24px;padding:16px 18px;margin-top:34px}
.dev b{display:block;font-weight:600}.dev .s{display:block;color:var(--mu);font-size:14px}.lead{color:var(--mu);margin:10px 0 0;max-width:44ch}
.hero{margin-top:24px;border-radius:28px;padding:26px 24px;background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(37,99,235,.2))}
.hero small{color:var(--ac)}.hero h3{font-size:32px;margin:6px 0 4px}.hero p{margin:0 0 18px;color:var(--mu)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--vi),var(--in));color:#fff;border:0;border-radius:999px;padding:12px 22px;font-weight:600;min-height:44px;box-shadow:0 6px 22px rgba(99,70,240,.45)}
.btn.g{background:var(--gl);border:1px solid var(--gb);box-shadow:none}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--gb);background:var(--gl);border-radius:999px;padding:8px 16px;color:var(--mu);min-height:40px}
.chip[aria-pressed=true]{background:linear-gradient(135deg,var(--vi),var(--in));border-color:transparent;color:#fff;font-weight:600}
.row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:20px;min-height:68px;margin-bottom:10px}
.row .dot{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,rgba(124,58,237,.6),rgba(59,130,246,.5));color:#fff}
.row .dot svg{width:16px;height:16px;fill:currentColor}.row b{display:block;font-weight:500}.row .s{color:var(--mu);font-size:14px}
.tag{margin-left:8px;color:#86efac;font-size:12px}
.row .x{margin-left:auto;background:var(--gl);border:1px solid var(--gb);border-radius:999px;padding:6px 14px;color:var(--mu);min-height:40px;white-space:nowrap}
.pl{display:flex;flex-direction:column;align-items:center;text-align:center;border-radius:28px;padding:18px 20px 26px}
.back{align-self:flex-start;color:var(--mu);padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.stage{position:relative;width:min(68vw,270px);aspect-ratio:1;margin:14px 0}
.stage svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}.stage circle{fill:none;stroke-width:3}
.stage .t{stroke:rgba(255,255,255,.12)}.stage .p{stroke:#a78bfa;stroke-linecap:round}
.orb{position:absolute;inset:19%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#e0d4ff,#8b5cf6 45%,#1e3a8a);box-shadow:0 0 70px rgba(139,92,246,.55);transform:scale(.8)}
.on .orb{animation:b 8s ease-in-out infinite}@keyframes b{50%{transform:scale(1)}}
.tm{font:600 22px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ac)}
.ctl{display:flex;align-items:center;gap:14px;margin:14px 0}
.play{width:72px;height:72px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--vi),var(--in));color:#fff;display:grid;place-items:center;box-shadow:0 8px 28px rgba(99,70,240,.55)}
.play svg,.ic svg{width:24px;height:24px;fill:currentColor}
.ic{width:48px;height:48px;border-radius:50%;border:1px solid var(--gb);background:var(--gl);display:grid;place-items:center;color:var(--mu)}
.ic[aria-pressed=true]{color:#f0abfc;border-color:#c084fc}
.rg{width:100%;max-width:420px;accent-color:#a78bfa}.vol{display:flex;align-items:center;gap:10px;width:100%;max-width:420px;color:var(--mu);font-size:14px}
.f{display:grid;gap:14px;margin-top:18px}.f label{display:grid;gap:6px;font-size:14px;color:var(--mu)}
.f input,.f select,.sel select{width:100%;min-height:44px;background:rgba(10,6,40,.55);color:var(--tx);border:1px solid var(--gb);border-radius:14px;padding:10px 14px}
.panel{border-radius:24px;padding:6px 20px 22px;margin-top:18px}
.msg{min-height:24px;margin:0;color:#c4b5fd}.note{font-size:14px;color:var(--mu);margin:0}.empty{color:var(--mu);padding:24px 0}
.or{color:var(--mu);text-align:center;font-size:14px}.soc{display:grid;gap:10px;justify-items:center}
.sel{display:flex;gap:8px;width:100%;max-width:420px;margin-top:14px}.sel select{flex:1}
.lnk{color:var(--ac);text-decoration:underline;background:0;border:0;padding:6px 0;min-height:40px}
@media(min-width:900px){nav{top:14px;bottom:14px;left:14px;right:auto;width:92px;flex-direction:column;justify-content:flex-start;gap:6px;padding:20px 6px}main{margin-left:max(112px,calc(50vw - 380px + 56px));padding-bottom:60px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}