:root{--bg:#fbfbf9;--ink:#161616;--mute:#6b6b66;--line:#e8e8e3;--cream:#f8f2e2;--cream-line:#eadfc2;--wa:#25a05a;--wa-soft:#e3f4e8;--r:20px;--f:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
@media(prefers-color-scheme:dark){:root:not([data-force]){--bg:#fbfbf9}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--f);background:var(--bg);color:var(--ink);line-height:1.6;min-height:100vh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(1120px,100% - 2.5rem);margin-inline:auto}
header{padding:1.4rem 0}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{font-weight:800;font-size:1.35rem;letter-spacing:-.04em;text-decoration:none}
nav{display:flex;gap:1.5rem}
nav a{text-decoration:none;color:var(--mute);font-size:.95rem;font-weight:500;transition:color .2s}
nav a:hover,nav a[aria-current]{color:var(--ink)}
main{flex:1;padding:1rem 0 4rem}
.grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:2.5rem;align-items:start}
h1{font-size:clamp(2.6rem,7vw,5.2rem);line-height:1;letter-spacing:-.05em;font-weight:800}
.lead{color:var(--mute);font-size:clamp(1rem,2vw,1.15rem);max-width:46ch;margin:1.2rem 0 2rem}
.hero-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:#ececE6;border:1px solid var(--line)}
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.wa{background:var(--cream);border:1px solid var(--cream-line);border-radius:var(--r);padding:1rem;position:sticky;top:1.5rem}
.wa img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;background:#ece4cf}
.wa h2{font-size:1.25rem;letter-spacing:-.02em;margin:1rem .4rem .2rem}
.wa p{color:var(--mute);font-size:.92rem;margin:0 .4rem 1rem}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1rem;border-radius:14px;text-decoration:none;font-weight:700;color:#14532d;background:linear-gradient(135deg,#fff 0%,var(--wa-soft) 100%);border:1px solid #cfe8d6;transition:box-shadow .25s,transform .2s}
.wa-btn:hover{box-shadow:0 4px 14px rgba(37,160,90,.15);transform:translateY(-1px)}
.wa-btn svg{width:20px;height:20px;fill:var(--wa)}
/* beats */
.chrome{border-radius:24px;padding:1.2rem;color:#1a1d21;background:linear-gradient(135deg,#f4f6f8 0%,#c3c9d0 22%,#f8fafb 40%,#9aa2ab 62%,#e7eaee 80%,#b3bac2 100%);border:1px solid #fff;box-shadow:inset 0 1px 0 #fff,0 12px 30px rgba(30,40,50,.12)}
.chrome img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px;background:#aeb5bd}
.chrome h2{font-size:1.5rem;letter-spacing:-.03em;margin:1.1rem 0 .2rem}
.chrome p{color:#3c434b;font-size:.95rem}
.beats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1.5rem;margin-top:2.5rem}
.tag{display:inline-block;margin-top:.9rem;padding:.35rem .9rem;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);font-size:.85rem;font-weight:600}
footer{border-top:1px solid var(--line);padding:1.5rem 0 calc(1.5rem + env(safe-area-inset-bottom,0));color:var(--mute);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem}
footer button{all:unset;cursor:pointer;text-decoration:underline}
footer button:focus-visible{outline:2px solid var(--ink)}
/* cookies + privacy */
.cookie{position:fixed;left:1rem;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0));max-width:520px;margin-inline:auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.1rem 1.2rem;box-shadow:0 10px 30px rgba(0,0,0,.08);z-index:50;display:none}
.cookie.show{display:block}
.cookie p{font-size:.9rem;color:var(--mute);margin-bottom:.9rem}
.cookie .row{display:flex;gap:.6rem;flex-wrap:wrap}
.cookie .btn{border:0;cursor:pointer;font:inherit;font-weight:600;font-size:.88rem;padding:.6rem 1.1rem}
.cookie .ghost{background:#f1f1ed;color:var(--ink)}
dialog{border:1px solid var(--line);border-radius:var(--r);padding:1.6rem;max-width:min(520px,calc(100% - 2rem));color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.3)}
dialog h2{margin-bottom:.6rem;letter-spacing:-.02em}
dialog p{color:var(--mute);font-size:.92rem;margin-bottom:.8rem}
dialog .btn{border:0;cursor:pointer;font:inherit;font-weight:600}
@media(max-width:820px){.grid{grid-template-columns:1fr}.wa{position:static}.cookie{margin-inline:auto}}
@media(max-width:480px){nav{gap:1rem}footer .wrap{flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media(prefers-reduced-motion:reduce){.hero-img{display:block}}


/* ---- beats: dark trap ---- */
.beats{--bg:#0a0a0b;--ink:#f1f1f2;--mute:#8a8a90;--line:#212125;--logo-filter:none;background:var(--bg);color:var(--ink)}
.beats nav a{color:var(--mute)}.beats nav a:hover,.beats nav a[aria-current]{color:#fff}
.beats .logo img{filter:var(--logo-filter)}
.beats :focus-visible{outline-color:#fff}
.beats .skip{background:#fff;color:#000}
.beats footer{border-color:var(--line)}
.beats .cookie,.beats dialog{background:#131315;border-color:#26262a;color:var(--ink)}
.beats .cookie p,.beats dialog p{color:var(--mute)}
.beats .btn{background:#f1f1f2;color:#0a0a0b}
.beats .btn.ghost{background:#26262a;color:#f1f1f2}
.beats h1{font-family:"Anton","Impact","Arial Narrow",sans-serif;font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-size:clamp(3.4rem,13vw,8.5rem);line-height:.9;background:linear-gradient(180deg,#fff 0%,#9c9ca3 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.beats .lead{color:var(--mute);margin:1rem 0 0}
.beats-layout{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:3.5rem;margin-top:3rem;align-items:start}
.player{position:sticky;top:1.5rem}
.art{aspect-ratio:1;border-radius:6px;display:grid;place-items:center;padding:18%;background:radial-gradient(circle at 50% 35%,#1c1c20 0%,#0e0e10 70%);border:1px solid var(--line)}
.art img{width:100%;height:100%;object-fit:contain;filter:var(--logo-filter)}
.np{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;margin:1.4rem 0 .1rem}
.by{color:var(--mute);font-size:.9rem}
.seek{width:100%;margin:1.3rem 0 .3rem;accent-color:#e5e5e7;cursor:pointer}
.times{display:flex;justify-content:space-between;font-size:.78rem;color:var(--mute);font-variant-numeric:tabular-nums}
.ctrls{display:flex;justify-content:center;align-items:center;gap:1.3rem;margin-top:1rem}
.ctrls button{all:unset;cursor:pointer;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;transition:background .2s}
.ctrls button:hover{background:#1a1a1d}
.ctrls button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ctrls .main{width:62px;height:62px;background:#f1f1f2}
.ctrls .main:hover{background:#fff}
.ctrls svg{width:20px;height:20px;fill:#f1f1f2}
.ctrls .main svg{fill:#0a0a0b;width:24px;height:24px}
.list{list-style:none;padding:0;border-top:1px solid var(--line)}
.list button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;gap:1rem;padding:1.15rem .8rem;border-bottom:1px solid var(--line);border-left:2px solid transparent;transition:background .2s}
.list button:hover{background:#111113}
.list button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.list .n{color:#5a5a60;font-size:.85rem;font-variant-numeric:tabular-nums}
.list .t{font-weight:600;color:#c9c9cd}
.list .s{font-size:.78rem;color:#b3202a;font-weight:600}
.list .on{border-left-color:#b3202a;background:#111113}
.list .on .t,.list .on .n{color:#fff}
@media(max-width:820px){.beats-layout{grid-template-columns:1fr;gap:2rem}.player{position:static}.art{max-width:420px;margin-inline:auto}}
.logo{display:inline-flex;align-items:center}.logo img{height:36px;width:auto;max-width:160px;object-fit:contain}@media(max-width:480px){.logo img{height:30px}}
/* navbar line + active marker */
header{position:relative;border-bottom:1px solid var(--line);padding:1.1rem 0;margin-bottom:.5rem}
header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#161616 50%,transparent);opacity:.45}
nav a{position:relative;padding:.3rem 0}
nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-1.25rem;height:2px;background:var(--ink)}
.beats header::after{background:linear-gradient(90deg,transparent,#c9c9cf 50%,transparent);opacity:.8}
.beats nav a[aria-current]::after{background:#fff}
/* logo fills the whole card */
.art{padding:0;overflow:hidden;background:#0e0e10}
.art img{width:100%;height:100%;object-fit:cover;display:block}