:root,[data-theme="dark-pink"]{--bg:#170b1c;--bg2:#24102c;--card:#26132e;--ink:#fbe9f4;--muted:#caa6c2;--pink:#ff5fa8;--pink-dark:#ff8cc4;--violet:#b07cff;--soft:#3a1d44;--line:#59305f;--input:#1d0e23;--on-pink:#fff;--err:#ff7a98;--shadow:rgba(255,95,168,.16)}
[data-theme="light"]{--bg:#fff4f9;--bg2:#ffe9f3;--card:#ffffff;--ink:#4a2338;--muted:#8a5a72;--pink:#e2568f;--pink-dark:#b8336f;--violet:#9a5ad8;--soft:#ffd9ea;--line:#f3bcd5;--input:#ffffff;--on-pink:#fff;--err:#a8003b;--shadow:rgba(184,51,111,.12)}
[data-theme="dark"]{--bg:#121216;--bg2:#1a1a20;--card:#1e1e25;--ink:#ececf1;--muted:#a6a6b2;--pink:#e2568f;--pink-dark:#f08ab6;--violet:#a58ad8;--soft:#2b2b34;--line:#3b3b46;--input:#17171c;--on-pink:#fff;--err:#ff7a98;--shadow:rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);background-image:radial-gradient(ellipse at top,var(--bg2),var(--bg) 60%);color:var(--ink);font:17px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--pink-dark)}
.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px;background:var(--soft)}
.brand{font-weight:700;color:var(--pink-dark);text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
nav a{color:var(--ink)}
main{max-width:1100px;margin:0 auto;padding:24px 16px 48px}
.hero{text-align:center;padding:48px 0}
h1{font-size:1.6rem;color:var(--pink-dark);margin:0 0 12px}
h2{font-size:1.15rem;margin:0 0 6px}
h3{font-size:1rem;margin:16px 0 4px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.card{background:var(--card);border-radius:16px;padding:16px;margin:0 0 14px;box-shadow:0 2px 12px var(--shadow)}
label{display:block;margin:12px 0 4px;font-weight:600}
label.check{font-weight:400}
label.check input{width:auto;margin-right:6px}
input{width:100%;padding:12px;border:1px solid var(--line);border-radius:12px;font-size:1rem;background:var(--input);color:var(--ink)}
input[readonly]{background:var(--soft)}
button,.button{display:inline-block;margin-top:16px;padding:12px 22px;border:0;border-radius:999px;background:var(--pink);color:var(--on-pink);font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer}
button.secondary{background:var(--soft);color:var(--pink-dark)}
button.link{background:none;color:var(--ink);padding:0;margin:0;text-decoration:underline;font-weight:400}
button:disabled{opacity:.5;cursor:default}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
form.inline{display:inline}
.error{color:var(--err);font-weight:600}
.error:empty{display:none}
.notice{color:var(--pink-dark);font-weight:600}
.muted,.meta{color:var(--muted)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--soft);color:var(--pink-dark);font-size:.85rem}
.name{font-weight:700}
ul.list{list-style:none;padding:0;margin:0}
footer{text-align:center;color:var(--muted);font-size:.85rem;padding:16px}
[hidden]{display:none!important}
fieldset{border:0;padding:0;margin:12px 0}
legend{font-weight:600;padding:0}
.chips label.check{display:inline-block;margin:4px 14px 4px 0}
progress{width:100%;height:12px;accent-color:var(--pink)}
.tabbar{position:sticky;top:0;z-index:5;display:flex;gap:6px;overflow-x:auto;padding:8px;margin:0 0 18px;background:var(--card);border-radius:999px;box-shadow:0 2px 12px var(--shadow)}
.tab{flex:0 0 auto;padding:9px 16px;border-radius:999px;color:var(--muted);text-decoration:none;font-weight:600;white-space:nowrap}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--pink),var(--violet));color:var(--on-pink)}
.tab-panel{display:none}
.tab-panel:target,.tab-panel:has(:target){display:block}
.tabs-root:not(.js-tabs):not(:has(:target)) .tab-panel.default{display:block}
.tabs-root.js-tabs .tab-panel{display:none}
.tabs-root.js-tabs .tab-panel.active{display:block}
.home{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;text-align:center}
.home form{width:100%;display:flex;justify-content:center}
button.big-home{width:min(420px,100%);min-height:180px;font-size:2rem;border-radius:32px;background:linear-gradient(135deg,var(--pink),var(--violet));box-shadow:0 10px 40px var(--shadow)}
.home-line{color:var(--muted);margin-top:18px}
.grid{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.grid .tile{margin:0;display:flex;flex-direction:column}
.grid .tile h3{margin-top:0}
.grid .tile form{margin-top:auto}
.player{max-width:560px;margin:0 auto 14px;text-align:center}
.player .art{position:relative;width:min(320px,80vw);aspect-ratio:1;margin:8px auto 16px;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,var(--pink),var(--violet),var(--pink-dark));background-size:300% 300%;animation:drift 18s ease-in-out infinite}
.player .art-glow{position:absolute;inset:18%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),rgba(255,255,255,0) 70%)}
.player .art-ring{position:absolute;inset:30%;border-radius:50%;border:2px solid rgba(255,255,255,.45)}
.player .art-ring.two{inset:12%;border-color:rgba(255,255,255,.25)}
.player.playing .art-glow{animation:pulse 3.2s ease-in-out infinite}
.player .now{margin:0;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em}
.track-title{font-size:1.35rem;font-weight:700;margin:2px 0}
.track-theme{margin:0 0 8px}
.seek{display:flex;align-items:center;gap:10px}
.seek .time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;min-width:3em}
.sound input[type=range]{padding:0;border:0;background:none;accent-color:var(--pink)}
.sound-controls{display:flex;justify-content:center;align-items:center;gap:12px}
.sound-controls button{margin-top:10px}
button.round.main{min-width:120px;background:linear-gradient(135deg,var(--pink),var(--violet))}
@keyframes drift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.12);opacity:1}}
@media (prefers-reduced-motion:reduce){.player .art,.player.playing .art-glow{animation:none}}
.rank-head{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.rank-head .rank-name{font-size:1.3rem;margin:0}
.rank-head .rank-level{margin:0;color:var(--muted)}
.rank-icon{color:var(--pink);flex:0 0 auto}
ol.levels{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
ol.levels li{display:flex;gap:12px;align-items:flex-start;padding:10px;border-radius:12px;background:var(--soft)}
ol.levels li p{margin:0}
ol.levels li.current{outline:2px solid var(--pink)}
.themes{display:flex;flex-wrap:wrap;gap:8px 18px}
dl.presence{margin:0;display:grid;gap:6px}
dl.presence div{display:flex;gap:10px;align-items:baseline}
dl.presence dt{min-width:5.5em;color:var(--muted);font-weight:600}
dl.presence dd{margin:0}
.player + .presence-card{max-width:560px;margin-left:auto;margin-right:auto}
.swatch{display:inline-block;width:18px;height:18px;border-radius:50%;vertical-align:middle;border:1px solid var(--line)}
.swatch-dark-pink{background:linear-gradient(135deg,#170b1c 50%,#ff5fa8 50%)}
.swatch-light{background:linear-gradient(135deg,#fff4f9 50%,#e2568f 50%)}
.swatch-dark{background:linear-gradient(135deg,#121216 50%,#e2568f 50%)}
@media (max-width:700px){main{padding:16px 16px 40px}.grid,ol.levels{grid-template-columns:1fr}button.big-home{min-height:140px;font-size:1.6rem}}