:root{--bg:#0b0b0e;--panel:#19191f;--line:#2b2b33;--text:#f7f6fa;--muted:#9694a0;--red:#ff4656;--violet:#8d19ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse 90% 30% at 45% -5%,#31104f65,transparent),var(--bg);color:var(--text);font-family:Inter,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}header{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid #ffffff0d;background:#0b0b0ed9;backdrop-filter:blur(16px);position:sticky;top:0;z-index:5}.brand{font-weight:900;letter-spacing:-2px;font-size:21px;color:white;text-decoration:none}.brand span,.eyebrow{color:var(--red)}nav{display:flex;align-items:center;gap:24px}nav a{font-size:14px;color:#d7d5dd;text-decoration:none}.account,.primary{border:0;border-radius:10px;background:var(--red);color:#fff;padding:11px 16px;font-weight:800}.account{font-size:13px}.hero,section{max-width:1120px;margin:auto;padding-left:24px;padding-right:24px}.hero{padding-top:105px;padding-bottom:92px;min-height:550px;background:linear-gradient(105deg,transparent 45%,#1f0a2c40)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.8px;margin:0 0 12px}.hero h1{font-size:clamp(64px,11vw,135px);line-height:.82;letter-spacing:-.085em;margin:0;font-weight:950}.hero h1 em{font-style:normal;color:transparent;background:linear-gradient(90deg,#fff,#a948ff);background-clip:text}.intro{max-width:500px;color:var(--muted);line-height:1.65;margin:30px 0}.primary{display:inline-flex;gap:18px;text-decoration:none;align-items:center}.primary b{font-size:20px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:20px}.section-head h2,.studio h2{font-size:30px;letter-spacing:-1.5px;margin:0}.section-head span,.muted{color:var(--muted);font-size:13px}.featured{padding-bottom:60px}.card-grid{display:grid;grid-template-columns:repeat(4,minmax(170px,1fr));gap:13px;overflow-x:auto}.beat-card{background:var(--panel);border:1px solid #ffffff08;border-radius:14px;padding:11px;min-width:170px;transition:.2s}.beat-card:hover{transform:translateY(-4px);border-color:#ffffff20}.cover{display:block;position:relative;background:linear-gradient(135deg,var(--accent),#17171f 72%);width:100%;aspect-ratio:1;border-radius:9px;overflow:hidden}.cover img{width:100%;height:100%;object-fit:cover}.fallback{position:absolute;inset:0;display:grid;place-items:center;font-size:34px;color:#fff8}.tag{position:absolute;right:8px;top:8px;background:#08080dde;border:1px solid #ffffff22;border-radius:16px;padding:5px 8px;font-size:10px;font-weight:bold}.beat-card h3{font-size:15px;margin:12px 0 5px}.beat-card small{color:var(--muted);font-size:12px}.chip{display:inline-block;margin-top:10px;border:1px solid #ff465655;color:#ff6e7a;padding:4px 9px;border-radius:14px;font-size:10px;font-weight:bold}.filters{display:flex;gap:8px}.filters input,.filters select,.form input,.form select{background:#15151b;border:1px solid var(--line);border-radius:9px;color:white;padding:11px 12px;outline:none}.filters input{width:160px}.track-list{display:grid;gap:8px}.track-row{display:grid;grid-template-columns:28px 50px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 14px;background:var(--panel);border:1px solid var(--line);border-radius:12px}.track-row:hover{border-color:#484852}.row-cover{width:46px;height:46px;border-radius:8px;object-fit:cover;background:linear-gradient(135deg,var(--accent),#222)}.track-row h3{font-size:14px;margin:0}.track-row small{display:block;margin-top:5px;color:var(--muted);font-size:12px}.number{color:#908f9b;font-size:13px;text-align:center}.play,.download,.delete{border:0;border-radius:8px;padding:9px 12px;font-size:12px;font-weight:800}.play{background:#fff;color:#111}.download{background:#272730;color:#fff}.delete{background:#501b25;color:#ff97a0}.studio{padding-top:100px;padding-bottom:180px}.studio-grid{margin-top:25px}.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:18px;border:1px solid var(--line);background:var(--panel);border-radius:15px}.form h3,.form p,.form .wide{grid-column:1/-1;margin:0}.form label{color:var(--muted);font-size:12px;padding:10px;border:1px dashed #45454e;border-radius:9px}.form label input{display:block;width:100%;padding:6px 0;border:0;background:transparent}.form button{border:0;border-radius:9px;padding:12px;background:var(--violet);color:#fff;font-weight:800}.studio-track{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.studio-track span{flex:1}.player{position:fixed;z-index:8;bottom:0;left:0;right:0;display:flex;align-items:center;gap:13px;padding:10px max(5vw,24px);background:#111117ed;border-top:1px solid var(--line);backdrop-filter:blur(16px)}.player button{background:#fff;color:#111;border:0;border-radius:50%;width:38px;height:38px}.player img{width:40px;height:40px;object-fit:cover;border-radius:7px}.now{flex:1;max-width:700px}.now b,.now small{display:block}.now small{color:var(--muted);font-size:11px;margin:2px 0}.now input{width:100%;accent-color:var(--red)}.player>input{width:90px;accent-color:var(--red)}dialog{color:var(--text);background:#19191f;border:1px solid #363640;border-radius:16px;width:min(440px,calc(100% - 30px));padding:28px}dialog::backdrop{background:#000a}.close{position:absolute;right:12px;top:8px;background:none;border:0;color:#fff;font-size:28px}.auth-tabs{display:flex;gap:10px;margin:17px 0}.auth-tabs button{border:0;background:#292932;color:#fff;padding:8px 10px;border-radius:7px}.toast{position:fixed;right:20px;bottom:90px;z-index:20;background:#2a1431;border:1px solid #a64cff;color:white;padding:12px 15px;border-radius:9px}.hidden{display:none!important}@media(max-width:700px){nav a{display:none}.card-grid{grid-template-columns:repeat(4,185px)}.hero{padding-top:75px;min-height:460px}.track-row{grid-template-columns:24px 44px minmax(0,1fr) auto}.track-row .download{display:none}.filters{width:100%}.filters input{flex:1}.section-head{align-items:start;flex-direction:column}.form{grid-template-columns:1fr}.player>input,.player>#time{display:none}}
