:root{--ink-950: #0b0c0e;--ink-900: #101216;--ink-800: #16191f;--ink-700: #21252d;--ink-400: #6b7280;--ink-200: #b3b8c2;--ink-050: #f2f3f5;--gold-400: #d4a843;--gold-300: #e2bd66;--bg: var(--ink-950);--surface: var(--ink-900);--surface-2: var(--ink-800);--line: var(--ink-700);--text: var(--ink-050);--text-dim: var(--ink-200);--text-mute: var(--ink-400);--accent: var(--gold-400);--accent-hover: var(--gold-300);--fs-100: .8rem;--fs-200: .9rem;--fs-300: 1rem;--fs-500: clamp(1.15rem, 1rem + .6vw, 1.4rem);--fs-700: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem);--fs-900: clamp(2rem, 1.5rem + 2.5vw, 3.2rem);--r: 10px;--pad: 16px}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh}body{background:var(--bg);color:var(--text);font:400 var(--fs-300)/1.55 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.shell{display:grid;grid-template-rows:auto 1fr auto;min-height:100vh}.nav{display:flex;align-items:center;gap:28px;padding:14px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:20}.nav__brand{font-size:var(--fs-500);font-weight:700;letter-spacing:.02em}.nav__brand em{color:var(--accent);font-style:normal}.nav__links{display:flex;gap:20px;font-size:var(--fs-200);color:var(--text-dim)}.nav__links a:hover,.nav__links a.active{color:var(--text)}.main{padding:28px;max-width:1200px;width:100%;margin:0 auto}.hero{border-radius:var(--r);overflow:hidden;position:relative;background:linear-gradient(160deg,var(--ink-800),var(--ink-950));border:1px solid var(--line);padding:clamp(32px,6vw,72px) clamp(24px,5vw,56px);margin-bottom:36px}.hero h1{font-size:var(--fs-900);margin:0 0 8px;font-weight:800}.hero p{color:var(--text-dim);font-size:var(--fs-500);margin:0}.section{margin:36px 0}.section__head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}.section__head h2{font-size:var(--fs-700);margin:0;font-weight:700}.section__head a{color:var(--text-mute);font-size:var(--fs-200)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s,transform .15s}.card:hover{border-color:var(--accent);transform:translateY(-2px)}.card__art{aspect-ratio:1;background:linear-gradient(135deg,var(--ink-700),var(--ink-900));display:grid;place-items:center;color:var(--text-mute);font-size:var(--fs-700)}.card__art img{width:100%;height:100%;object-fit:cover}.card__body{padding:12px 14px}.card__title{font-weight:600;font-size:var(--fs-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card__sub{color:var(--text-mute);font-size:var(--fs-100);margin-top:2px}.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--text-dim);font-size:var(--fs-200)}.chip:hover,.chip.active{border-color:var(--accent);color:var(--text)}.tracks{display:flex;flex-direction:column}.trow{display:grid;grid-template-columns:40px 1fr auto auto;gap:14px;align-items:center;padding:10px 12px;border-radius:8px}.trow:hover{background:var(--surface-2)}.trow__num{color:var(--text-mute);font-variant-numeric:tabular-nums}.trow__play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text);display:grid;place-items:center}.trow__play:hover{background:var(--accent);color:var(--ink-950);border-color:var(--accent)}.trow__title{font-weight:600;font-size:var(--fs-200)}.trow__artist{color:var(--text-mute);font-size:var(--fs-100)}.trow__meta{color:var(--text-mute);font-size:var(--fs-100);font-variant-numeric:tabular-nums}.trow__dl{color:var(--text-mute);font-size:var(--fs-100);padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:none}.trow__dl:hover{color:var(--text);border-color:var(--accent)}.player{position:sticky;bottom:0;border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 94%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:10px 28px;display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;min-height:64px;z-index:30}.player__info{min-width:140px}.player__title{font-weight:600;font-size:var(--fs-200)}.player__artist{color:var(--text-mute);font-size:var(--fs-100)}.player__wave{height:44px}.player__btn{width:42px;height:42px;border-radius:50%;border:none;background:var(--accent);color:var(--ink-950);font-size:1rem;font-weight:700}.player__btn:hover{background:var(--accent-hover)}.player__time{color:var(--text-mute);font-size:var(--fs-100);font-variant-numeric:tabular-nums}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.field label{font-size:var(--fs-100);color:var(--text-dim)}.field input,.field select,.field textarea{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit}.btn{background:var(--accent);color:var(--ink-950);border:none;border-radius:8px;padding:10px 18px;font-weight:700}.btn:hover{background:var(--accent-hover)}.btn--ghost{background:none;border:1px solid var(--line);color:var(--text-dim);font-weight:500}.btn--ghost:hover{border-color:var(--accent);color:var(--text)}.empty{color:var(--text-mute);padding:40px 0;text-align:center}.lock{max-width:360px;margin:10vh auto;text-align:center}@media (max-width: 640px){.nav{gap:14px;padding:12px 16px;overflow-x:auto}.main{padding:16px}.player{padding:10px 14px;grid-template-columns:auto 1fr auto}.player__info{min-width:90px}}@media (prefers-reduced-motion: reduce){*{transition:none!important}}