@font-face{font-family:Archivo;src:url(archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--bg:#ECECEC;--surface:#FFFFFF;--ink:#000000;--soft:#5C5C5C;--line:#D2D2D2;--wave:#B9B9B9;--act:#000000;--act-ink:#FFFFFF}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.5 Archivo,system-ui,sans-serif;font-stretch:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--act);outline-offset:3px;border-radius:2px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
header.top{display:flex;align-items:center;gap:20px;padding:18px 0}
.brand{font-weight:900;font-stretch:62%;font-size:34px;letter-spacing:.01em;text-decoration:none;line-height:1}
nav.links{margin-left:auto;display:flex;gap:18px;font-size:15px}
nav.links a{text-decoration:none;color:var(--soft)}nav.links a:hover{color:var(--ink)}
.hero{display:grid;grid-template-columns:minmax(0,380px) 1fr;gap:40px;align-items:end;padding:24px 0 36px}
.hero{position:relative}.hero>*{position:relative;z-index:1}
.hero .cover{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:4px;background:var(--line);box-shadow:0 30px 60px -30px rgba(0,0,0,.45)}
.hero .t-hero{font-weight:900;font-stretch:62%;font-size:clamp(64px,11vw,156px);line-height:.86;letter-spacing:-.005em;text-transform:uppercase;overflow-wrap:anywhere}
.hero p.about{margin-top:12px;color:var(--soft);font-size:17px;max-width:40ch}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;align-items:center}
.btn{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 18px;border-radius:999px;border:0;font:600 16px Archivo,sans-serif;cursor:pointer;text-decoration:none}
.btn.play{background:var(--act);color:var(--act-ink)}
.btn.buy{background:var(--ink);color:var(--bg)}
.btn.quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn svg{width:16px;height:16px;fill:currentColor}
.wave{position:relative;height:56px;cursor:pointer;touch-action:manipulation}
.wave svg{position:absolute;inset:0;width:100%;height:100%}
.wave .base rect{fill:var(--wave)}
.wave .done{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p,0%)) 0 0)}
.wave .done rect{fill:var(--act)}
.hero .wave{height:72px;margin-top:22px}
h2.list{font-weight:800;font-stretch:75%;font-size:28px;margin:26px 0 8px}
ol.beats{list-style:none;padding:0;border-top:1.5px solid var(--line)}
.beat{display:grid;grid-template-columns:64px minmax(140px,1.1fr) minmax(160px,2fr) 232px;gap:18px;align-items:center;padding:14px 0;border-bottom:1.5px solid var(--line)}
.beat img{width:64px;height:64px;object-fit:cover;border-radius:3px;display:block;background:var(--line)}
.beat .t{min-width:0}
.beat h3{font-weight:850;font-stretch:62%;font-size:30px;line-height:1;text-transform:uppercase;letter-spacing:.005em}
.beat h3 a{text-decoration:none}.beat h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.beat .d{color:var(--soft);font-size:14px;margin-top:4px}
.beat .wave{height:44px}
.beat .b{display:flex;gap:8px;justify-content:flex-end}
.short{display:none}
.beat .btn{height:40px;padding:0 15px;font-size:15px}
.icon-only{width:40px;padding:0!important;justify-content:center}
.video{margin:12px 0 40px;max-width:820px}
.video button{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;cursor:pointer;background:#000 center/cover;border-radius:4px}
.video button span{position:absolute;left:18px;bottom:16px;background:var(--act);color:#fff;padding:9px 16px;border-radius:999px;font:600 15px Archivo,sans-serif}
.video iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:4px}
footer{margin:56px 0 120px;color:var(--soft);font-size:15px;display:flex;flex-wrap:wrap;gap:8px 24px}
footer .legal-links{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
.player{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1.5px solid var(--line);display:none;z-index:5}
.player.on{display:block}
.player .in{max-width:1180px;margin:0 auto;padding:10px 20px;display:grid;grid-template-columns:44px auto 1fr 44px;gap:14px;align-items:center}
.player img{width:44px;height:44px;border-radius:3px;object-fit:cover}
.player .name{font-weight:800;font-stretch:62%;font-size:22px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28vw}
.player .wave{height:36px}
.empty{padding:40px 0;color:var(--soft)}
@media (max-width:760px){
 .hero{grid-template-columns:1fr;gap:20px;padding-top:8px}
 .hero h1{font-size:clamp(56px,19vw,96px)}
 .beat{grid-template-columns:56px 1fr auto;gap:12px}
 .beat .long{display:none}.beat .short{display:inline}
 .beat img{width:56px;height:56px}
 .beat .wave{grid-column:1/-1;grid-row:2}
 .beat h3{font-size:26px}
 nav.links{gap:12px}
 .player .in{grid-template-columns:40px 1fr 40px}.player .name{display:none}.player img{width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
.grid{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:30px 22px;margin-top:6px}
.card .cv{position:relative}
.card .cv img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;border-radius:4px;background:var(--line)}
.card .cv .play{position:absolute;left:12px;bottom:12px;width:48px;height:48px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)}
.card .prog{position:absolute;left:0;right:0;bottom:0;height:4px;border-radius:0 0 4px 4px;overflow:hidden}
.card .prog i{display:block;height:100%;width:0;background:var(--act)}
.card h3{font-weight:850;font-stretch:62%;font-size:28px;line-height:1;text-transform:uppercase;margin-top:14px}
.card h3 a{text-decoration:none}.card h3 a:hover{text-decoration:underline;text-decoration-thickness:2px}
.card .d{color:var(--soft);font-size:14px;margin-top:5px}
.card .from{font-weight:700;font-size:14px;margin-top:6px;font-variant-numeric:tabular-nums}
.card[hidden]{display:none}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:4px 0 26px;font-size:15px}
.tabs button{background:none;border:0;padding:4px 0;font:500 15px Archivo,sans-serif;color:var(--soft);cursor:pointer;border-bottom:2px solid transparent}
.tabs button[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
h2.list.center{text-align:center;margin-top:40px}
header.logo-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 0 6px;position:relative;z-index:2}
header.logo-bar nav{display:flex;gap:20px;font-size:15px}
header.logo-bar nav.r{justify-content:flex-end}
header.logo-bar nav a{text-decoration:none;color:var(--soft)}header.logo-bar nav a:hover{color:var(--ink)}
header.logo-bar .logo img{display:block;height:96px;width:auto;-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent);mask-image:radial-gradient(closest-side,#000 72%,transparent)}
.hero .art{position:absolute;z-index:0;right:-14%;top:34%;width:min(64vw,800px);height:auto;transform:translateY(-50%) rotate(-7deg);pointer-events:none;
 -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);opacity:.5}
.grain .hero p.about{font-weight:500}
body.grain::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;mix-blend-mode:multiply;
 background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
body.grain .wrap{position:relative;z-index:1}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}.card h3{font-size:22px}}
@media (max-width:760px){header.logo-bar{grid-template-columns:1fr;justify-items:center;gap:8px}header.logo-bar .logo{order:-1}
 header.logo-bar .logo img{height:72px}header.logo-bar nav{gap:16px}.hero .art{width:120vw;right:-40%;top:30%;opacity:.35}
 .card .cv .play{width:42px;height:42px;left:8px;bottom:8px}}
@font-face{font-family:Mont;src:url(montserrat.woff2) format('woff2');font-weight:100 900;font-display:swap}
body.mono .wordmark{font-family:Mont,Archivo,sans-serif;font-weight:690;font-size:32px;letter-spacing:.032em;line-height:1;text-decoration:none;color:var(--ink);display:block;padding:10px 0}
body.mono .hero .t-hero,body.mono .card h3,body.mono .player .name,body.mono .tier .nm,body.mono .legal h1,body.mono .order h1{font-family:Mont,Archivo,sans-serif;font-stretch:100%;font-weight:700;letter-spacing:.015em}
body.mono .hero .t-hero{font-size:clamp(38px,5.6vw,84px);line-height:.98}
body.mono .card h3{font-size:18px;line-height:1.15}
body.mono .player .name{font-size:17px}
body.mono .tier .nm{font-size:20px}
body.mono .legal h1,body.mono .order h1{font-size:clamp(36px,6vw,60px)}
body.mono h2.list,body.mono .store h2{font-family:Mont,Archivo,sans-serif;font-stretch:100%;font-weight:650;letter-spacing:.01em;font-size:21px}
body.mono footer{margin-bottom:18px}
body.mono .bigmark{font-family:Mont,sans-serif;font-weight:700;font-size:clamp(64px,17.5vw,250px);letter-spacing:.03em;text-align:center;
 color:#000;opacity:.07;line-height:.82;margin:8px 0 104px;white-space:nowrap;user-select:none;overflow:hidden}
body.mono .card .cv img,body.mono .hero .cover{box-shadow:0 24px 50px -28px rgba(0,0,0,.55)}
body.mono .btn.quiet{box-shadow:inset 0 0 0 1.5px #000}
body.mono .tabs button[aria-pressed=true]{border-bottom-color:#000}
@media (max-width:760px){body.mono .wordmark{font-size:28px}}

.legal{max-width:72ch;padding:10px 0 40px}
.legal.wide{max-width:none}
.legal .lead{max-width:70ch;color:var(--soft)}
.tiers{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:26px 0 36px}
.tcard{background:var(--surface);border-radius:6px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px}
.tcard .tn{font-weight:800;font-size:17px;text-decoration:none}
.tcard .tp{font-weight:800;font-size:28px;font-variant-numeric:tabular-nums;margin-bottom:6px}
.legal .tcard ul{list-style:none;padding:0;margin:0 0 12px;flex:1}
.legal .tcard li{font-size:14px;padding:7px 0;border-top:1px solid var(--line);margin:0;color:inherit}
.tcard .tl{font-size:14px;color:var(--soft)}
.tcard.dark{background:var(--ink);color:var(--bg)}.legal .tcard.dark li{border-color:rgba(255,255,255,.18);color:var(--bg)}
.tcard.dark .btn.quiet{color:var(--bg);box-shadow:inset 0 0 0 1.5px var(--bg);align-self:flex-start}
.faq{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px 28px;max-width:none}
.faq h3{font-size:16px;font-weight:700;margin:0 0 4px}.faq p{margin:0;color:var(--soft)}
.legal h1{font-weight:900;font-stretch:62%;font-size:clamp(44px,8vw,72px);line-height:.95;text-transform:uppercase;margin:10px 0 18px}
.legal h2{font-weight:800;font-stretch:75%;font-size:22px;margin:26px 0 6px}
.legal p,.legal li{color:var(--ink);margin:8px 0}
.legal ul{padding-left:20px}
.legal .meta,.legal .sign{background:var(--surface);border-radius:4px;padding:14px 16px;line-height:1.7}
.legal table{border-collapse:collapse;width:100%;margin:14px 0;font-size:15px}
.legal th,.legal td{text-align:left;padding:10px 8px;border-bottom:1.5px solid var(--line);vertical-align:top}
.legal th{font-weight:800;font-stretch:75%;font-size:17px}
.store{margin:10px 0 44px;max-width:900px}
.store h2{font-weight:800;font-stretch:75%;font-size:28px;margin-bottom:6px}
.store .note{color:var(--soft);font-size:14px;margin-bottom:10px}
.tier{border-top:1.5px solid var(--line);padding:14px 0;display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center}
.tier:last-of-type{border-bottom:1.5px solid var(--line)}
.tier .nm{font-weight:850;font-stretch:62%;font-size:26px;text-transform:uppercase;line-height:1}
.tier .sm{color:var(--soft);font-size:14px;margin-top:4px}
.tier .pr{font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.tier .pay{grid-column:1/-1;display:none;padding-top:4px}
.tier.open .pay{display:block}
.tier .agree{display:flex;gap:10px;align-items:flex-start;font-size:15px;margin-bottom:12px}
.tier .agree input{width:20px;height:20px;margin-top:2px;accent-color:var(--act)}
.tier .ppb{max-width:420px}
.tier .msg{color:#c0392b;font-size:14px;margin-top:8px}
.order{max-width:640px;padding:20px 0 40px}
.order h1{font-weight:900;font-stretch:62%;font-size:clamp(44px,9vw,80px);line-height:.95;text-transform:uppercase}
.order .files{display:flex;flex-direction:column;gap:10px;margin:22px 0}
.order .files a{justify-content:space-between}
.order p{margin:10px 0;color:var(--soft)}
footer .legal-links a{margin-right:14px}
@media (max-width:760px){.tier{grid-template-columns:1fr auto}.tier .buy-col{grid-column:1/-1}}