:root { --bg:#11131b; --panel:#191c27; --panel-hover:#202431; --text:#f5f3ee; --muted:#9499a8; --accent:#d7f36b; --purple:#a99cff; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--text); background:var(--bg); font-family:'DM Sans',sans-serif; overflow-x:hidden; }
.ambient { position:fixed; width:42rem; height:42rem; border-radius:50%; filter:blur(110px); opacity:.14; pointer-events:none; }
.ambient-one { background:#7665ff; top:-24rem; right:-15rem; }.ambient-two { background:#c9ed59; bottom:-30rem; left:-15rem; }
.shell { width:min(1160px,calc(100% - 48px)); margin:auto; padding-bottom:80px; position:relative; z-index:1; }
.topbar { height:104px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid #292c37; }
.brand { display:flex; align-items:center; gap:12px; color:var(--text); font:700 20px 'Space Grotesk'; letter-spacing:-.8px; text-decoration:none; white-space:nowrap; }.brand-dot { color:var(--accent); }
.top-search { max-width:390px; margin:0 auto; padding:11px 15px; background:#191c27; border:1px solid #2a2e3c; border-radius:10px; }
.top-tools { display:flex; align-items:center; flex:1; gap:24px; }.mobile-tools-toggle { display:none; }
.brand-mark { display:flex; align-items:end; gap:3px; width:23px; height:24px; }.brand-mark span { width:5px; border-radius:3px; background:var(--accent); }.brand-mark span:nth-child(1){height:12px}.brand-mark span:nth-child(2){height:22px}.brand-mark span:nth-child(3){height:16px}
.live-pill { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; }.live-pill i { width:7px; height:7px; display:inline-block; background:var(--accent); border-radius:50%; margin-right:8px; box-shadow:0 0 13px var(--accent); }
.hero { padding:82px 0 70px; max-width:720px; }.eyebrow { color:var(--accent); font-size:10px; font-weight:700; letter-spacing:2px; margin:0 0 18px; }.hero h1 { margin:0; font:600 clamp(44px,7vw,76px)/.99 'Space Grotesk'; letter-spacing:-4px; }.hero h1 em { color:var(--purple); font-style:normal; }.intro { color:var(--muted); font-size:17px; line-height:1.6; max-width:510px; margin:26px 0 0; }
.toolbar { display:flex; justify-content:flex-end; align-items:center; gap:24px; padding:18px; background:rgba(25,28,39,.8); border:1px solid #2a2e3c; border-radius:16px; margin:38px 0 72px; }.search { display:flex; align-items:center; gap:12px; color:#7d8290; flex:1; }.search span { font-size:29px; line-height:0; transform:rotate(-20deg); }.search input { color:var(--text); background:none; border:0; outline:0; width:100%; font:500 15px 'DM Sans'; }.search input::placeholder { color:#737887; }.filters { display:flex; gap:7px; }.filter { background:transparent; color:var(--muted); border:1px solid transparent; border-radius:9px; padding:10px 14px; font:600 13px 'DM Sans'; cursor:pointer; }.filter:hover,.filter.active { color:var(--text); background:#2b2f3c; }.filter b { color:var(--accent); font-size:11px; margin-left:5px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; margin-bottom:24px; }.section-heading h2 { font:600 28px 'Space Grotesk'; letter-spacing:-1px; margin:0; }.result-count { color:var(--muted); font-size:13px; margin-bottom:3px; }.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.card { min-width:0; background:var(--panel); border:1px solid #282c39; border-radius:15px; overflow:hidden; cursor:pointer; transition:transform .2s,border-color .2s,background .2s; }.card:hover { transform:translateY(-5px); background:var(--panel-hover); border-color:#4a4e62; }.cover { height:190px; position:relative; background-size:cover; background-position:center; }.cover::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.38)); }.tag { position:absolute; z-index:1; left:14px; top:14px; background:rgba(17,19,27,.75); border:1px solid rgba(255,255,255,.2); border-radius:5px; color:#fff; padding:5px 8px; font-size:9px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }.short-title { position:absolute; z-index:1; right:14px; bottom:12px; color:#fff; font:700 clamp(34px,4.5vw,50px)/.9 'Space Grotesk'; letter-spacing:-2px; text-shadow:0 2px 10px rgba(0,0,0,.7); }.card-body { padding:17px 17px 16px; }.card h3 { font:600 19px 'Space Grotesk'; letter-spacing:-.5px; margin:0 0 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.meta { display:flex; justify-content:space-between; color:var(--muted); font-size:12px; }.meta .size { color:#c6c9d1; }.play-hint { color:var(--accent); opacity:0; transition:opacity .2s; font-size:11px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }.card:hover .play-hint { opacity:1; }.empty { text-align:center; color:var(--muted); padding:60px 0; }footer { display:flex; align-items:center; gap:12px; color:#777c8a; font-size:9px; font-weight:700; letter-spacing:1.5px; padding:70px 0 120px; }.footer-signal { color:var(--accent); font-size:15px; }.footer-line { width:42px; height:1px; background:#3a3d48; }
.player { position:fixed; z-index:10; right:24px; bottom:22px; left:24px; display:flex; align-items:center; gap:15px; width:min(760px,calc(100% - 48px)); margin:auto; padding:12px 16px 12px 12px; background:rgba(29,32,44,.95); border:1px solid #464b5e; border-radius:14px; box-shadow:0 14px 45px rgba(0,0,0,.45); backdrop-filter:blur(18px); }.player[hidden] { display:none; }.player-art { flex:0 0 48px; height:48px; border-radius:8px; background:center/cover url('https://images.unsplash.com/photo-1521337581100-8ca9a73a5f79?auto=format&fit=crop&w=200&q=80'); }.player-info { min-width:150px; display:flex; flex-direction:column; gap:3px; }.player-label { color:var(--accent); font-size:8px; font-weight:700; letter-spacing:1.4px; }.player-info strong { font:600 14px 'Space Grotesk'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.player-info span:last-child { color:var(--muted); font-size:11px; }.player audio { flex:1; min-width:180px; height:38px; }.close-player { color:var(--muted); background:none; border:0; cursor:pointer; font-size:25px; line-height:1; padding:5px; }.close-player:hover { color:var(--text); }
@media (max-width:760px) { .shell{width:min(100% - 32px,560px);padding-bottom:88px} .topbar{height:auto;min-height:82px;flex-wrap:wrap;gap:16px;padding:16px 0}.mobile-tools-toggle{display:block;margin-left:auto;padding:10px 12px;color:var(--text);background:#191c27;border:1px solid #343847;border-radius:9px;font:600 12px 'DM Sans';cursor:pointer}.top-tools{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:stretch;gap:12px;padding-top:2px}.top-tools.open{display:flex}.top-search{max-width:none;width:100%;margin:0}.filters{overflow:auto}.filter{white-space:nowrap}.grid{grid-template-columns:1fr}.cover{height:210px}.section-heading h2{font-size:24px}.player{right:16px;bottom:16px;left:16px;width:calc(100% - 32px);flex-wrap:wrap}.player-info{max-width:calc(100% - 90px);}.player audio{order:3;flex-basis:100%;min-width:0;width:100%;}.close-player{margin-left:auto} }