/* =====================================================================
   The store's one stylesheet.

   Tokens are the ones from the store brief, section 6. Headings are
   Sora rather than the brief's Space Grotesk: the site's content
   policy only allows fonts served from here, and Sora is the closest
   face already on the shelf. Body is Inter, every number is JetBrains
   Mono. Eight-pixel grid, radii between 10 and 14, no shadows, every
   button 40px tall.

   Colours live on :root and nowhere else. A page that wants to look
   different changes a token, not a rule.
   ===================================================================== */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/sora-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Sora';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/sora-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --ground:#07070F; --shell:#0C0C17; --card:#151527; --card-hover:#1E1E36; --sunken:#0F0F1D;
  --border:#2B2B4D; --indigo:#7C5CFF; --indigo-dim:#3A2F6B; --link:#A08BFF;
  --amber:#FFC933; --green:#22C55E; --danger:#FF3B5C;
  --text:#F2F0FF; --dim:#A3A6CC; --faint:#6F7099;
  --head:'Sora',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --r:12px; --r-sm:10px; --r-lg:14px;
  /* the account chip from site-auth.css reads these */
  --sa-accent:var(--indigo); --sa-fg:var(--text); --sa-bg:var(--card); --sa-line:var(--border); --sa-muted:var(--dim);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font:15px/1.55 var(--body);min-height:100vh;display:flex;flex-direction:column}
h1,h2,h3,h4{font-family:var(--head);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(28px,4vw,40px);line-height:1.1}
h2{font-size:22px;line-height:1.2}
h3{font-size:16px;line-height:1.3}
p{margin:0}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit}
.num,.price,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--dim)} .faint{color:var(--faint)}
.skip{position:absolute;left:-999px;top:8px;background:var(--indigo);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:6px}

/* ---------- shell ---------- */
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--shell) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.top .wrap{height:64px;display:flex;align-items:center;gap:24px}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);font-family:var(--head);font-weight:600;font-size:16px;white-space:nowrap}
.brand:hover{text-decoration:none}
.brand img{width:26px;height:26px}
.brand small{color:var(--faint);font-weight:400;font-size:12px;margin-left:2px}
.topnav{display:flex;gap:4px;margin-left:8px}
.topnav a{color:var(--dim);padding:8px 12px;border-radius:var(--r-sm);font-weight:500;font-size:14px}
.topnav a:hover{color:var(--text);background:var(--card);text-decoration:none}
.topnav a[aria-current]{color:var(--text);background:var(--card)}
.top .grow{flex:1}
.topsearch{display:flex;align-items:center;gap:8px;height:40px;padding:0 12px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);min-width:220px}
.topsearch:focus-within{border-color:var(--indigo)}
.topsearch svg{width:16px;height:16px;stroke:var(--faint);fill:none;stroke-width:2;stroke-linecap:round}
.topsearch input{background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:14px;width:100%}
.topsearch input::placeholder{color:var(--faint)}
.sh-auth{display:inline-flex}
.sh-login{height:40px;display:inline-flex;align-items:center;padding:0 14px;border:1px solid var(--border);border-radius:999px;color:var(--text);font-weight:600;font-size:14px}
.sh-login:hover{border-color:var(--indigo);text-decoration:none}

main{flex:1;padding:32px 0 64px}
footer.store{border-top:1px solid var(--border);padding:24px 0;color:var(--faint);font-size:13px}
footer.store .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer.store a{color:var(--dim)}

/* the ribbon that says this is not live. Remove it with the test flag. */
.testbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--amber);color:#1a1400;font-size:13px;font-weight:600;padding:8px 16px;text-align:center}
.testbar b{font-family:var(--mono);font-weight:500;margin-right:8px}
body[data-test] main{padding-bottom:96px}

/* ---------- buttons ---------- */
.btn{height:40px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--indigo);color:#fff;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{background:#6a4aef;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text)}
.btn.ghost:hover{border-color:var(--link);background:var(--card)}
.btn.quiet{background:var(--card);color:var(--text)}
.btn.quiet:hover{background:var(--card-hover)}
.btn.sm{height:32px;padding:0 12px;font-size:13px;border-radius:8px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;padding:16px 0 32px}
.hero .lead{font-size:17px;color:var(--dim);max-width:52ch;margin-top:12px}
.hero .cta{display:flex;gap:12px;margin-top:24px;flex-wrap:wrap}
.hero .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hero .stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.hero .stat b{display:block;font:500 24px var(--mono);margin-bottom:2px}
.hero .stat span{color:var(--dim);font-size:13px}

/* ---------- lanes ---------- */
.lanes{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 24px}
.lane{--c:var(--indigo);height:32px;display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 10px;border-radius:999px;border:1px solid var(--border);
  background:var(--card);color:var(--dim);font-size:13px;font-weight:500;cursor:pointer}
.lane i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.lane:hover{color:var(--text);border-color:color-mix(in srgb,var(--c) 60%,var(--border));text-decoration:none}
.lane[aria-pressed="true"]{color:var(--text);border-color:var(--c);background:color-mix(in srgb,var(--c) 12%,var(--card))}
.lane-pill{--c:var(--indigo);display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--dim)}
.lane-pill i{width:7px;height:7px;border-radius:50%;background:var(--c)}

/* ---------- sections + grid ---------- */
.sec{margin:32px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.sec-head p{color:var(--dim);font-size:14px}
.sec-head a{font-size:14px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.grid.wide{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}

/* card: cover, then three lines. The whole thing is one link. */
.card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;color:var(--text);transition:background .15s,border-color .15s,transform .15s}
.card:hover{background:var(--card-hover);border-color:#3a3a66;text-decoration:none;transform:translateY(-2px)}
.cover{aspect-ratio:1/1;background:var(--sunken);position:relative}
.cover svg{width:100%;height:100%}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px}
.card h3{font-size:15px;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .by{display:flex;align-items:center;gap:8px;color:var(--dim);font-size:13px;min-width:0}
.card .by span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.card .price{font-size:15px;font-weight:500}
.card .price.free{color:var(--green)}
.card .owned{color:var(--green);font-size:12px;font-weight:600}

/* people */
.av{width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;font:500 10px var(--mono);color:#0b0a14;background:var(--indigo);letter-spacing:.03em}
.av.lg{width:64px;height:64px;font-size:22px}
.av.xl{width:96px;height:96px;font-size:32px}
.person{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px;color:var(--text)}
.person:hover{background:var(--card-hover);text-decoration:none}
.person .who b{display:block;font-family:var(--head);font-weight:600;font-size:15px}
.person .who span{color:var(--dim);font-size:13px}
.person .n{margin-left:auto;color:var(--faint);font:400 12px var(--mono);white-space:nowrap}

/* ---------- item page ---------- */
.item{display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start}
.item .cover{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--border)}
.item .head h1{margin:8px 0 6px}
.item .meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;color:var(--dim);font-size:14px;margin-top:8px}
.item .meta .by{display:flex;align-items:center;gap:8px}
.item .buy{display:flex;align-items:center;gap:16px;margin:24px 0;padding:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.item .buy .price{font-size:28px;font-weight:500}
.item .buy .price s{color:var(--faint);font-size:16px;margin-left:8px}
.item .buy .note{color:var(--dim);font-size:13px;margin-left:auto;text-align:right}
.item .desc{color:var(--dim);font-size:15px;max-width:62ch}
.item h2{margin:32px 0 12px;font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.tag{font-size:12px;color:var(--dim);background:var(--sunken);border:1px solid var(--border);border-radius:6px;padding:3px 8px}
.contents{list-style:none;margin:0;padding:0;border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.contents li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--border);font-size:14px}
.contents li:first-child{border-top:0}
.contents .k{font:400 11px var(--mono);color:var(--faint);text-transform:uppercase;width:52px;flex:none}
.contents .l{margin-left:auto;color:var(--faint);font:400 12px var(--mono)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.fact{background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);padding:12px}
.fact b{display:block;font:500 18px var(--mono)}
.fact span{color:var(--faint);font-size:12px}

/* preview player */
.player{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);margin-top:16px}
.player button{width:40px;height:40px;border-radius:50%;border:0;background:var(--indigo);color:#fff;display:grid;place-items:center;cursor:pointer;flex:none}
.player button svg{width:16px;height:16px;fill:currentColor}
.player .bars{flex:1;height:32px;display:flex;align-items:center;gap:2px}
.player .bars i{flex:1;background:var(--indigo-dim);border-radius:1px;min-height:3px;transition:background .1s}
.player .bars i.on{background:var(--link)}
.player .t{font:400 12px var(--mono);color:var(--faint);width:84px;text-align:right}
.player small{color:var(--faint);font-size:11px}

/* ---------- creator page ---------- */
.profile{display:flex;gap:24px;align-items:center;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:32px;flex-wrap:wrap}
.profile .who h1{font-size:28px}
.profile .who .line{color:var(--dim);margin-top:4px;font-size:14px}
.profile .who .bio{color:var(--dim);margin-top:12px;max-width:60ch}
.profile .links{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.profile .stats{margin-left:auto;display:flex;gap:24px}
.profile .stats b{display:block;font:500 22px var(--mono)}
.profile .stats span{color:var(--faint);font-size:12px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:var(--green);background:color-mix(in srgb,var(--green) 12%,transparent);border-radius:6px;padding:2px 7px;vertical-align:middle}
.badge.kind{color:var(--link);background:color-mix(in srgb,var(--indigo) 18%,transparent)}

/* ---------- forms ---------- */
.form{display:grid;gap:16px;max-width:640px}
.form label{display:block;font-size:13px;font-weight:600;color:var(--dim)}
.form label[hidden]{display:none}
.form label>input,.form label>textarea,.form label>select,.form label>.checks{display:block;width:100%;margin-top:6px}
.form input,.form textarea,.form select{height:40px;padding:0 12px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font:inherit;font-size:14px;outline:0}
.form textarea{height:auto;min-height:120px;padding:10px 12px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{border-color:var(--indigo)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form .checks{display:flex;flex-wrap:wrap;gap:8px}
.form .checks label{flex-direction:row;display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--border);border-radius:999px;cursor:pointer;font-weight:500}
.form .checks input{width:auto;height:auto;accent-color:var(--indigo)}
.form .checks label:has(:checked){border-color:var(--indigo);color:var(--text);background:color-mix(in srgb,var(--indigo) 12%,transparent)}
.form .hint{color:var(--faint);font-size:12px;font-weight:400;margin-left:4px}
.form .req{color:var(--danger)}
.msg{padding:12px 14px;border-radius:var(--r-sm);font-size:14px;border:1px solid var(--border);background:var(--card)}
.msg.ok{border-color:color-mix(in srgb,var(--green) 40%,var(--border));color:var(--text)}
.msg.warn{border-color:color-mix(in srgb,var(--amber) 40%,var(--border))}
.msg.bad{border-color:color-mix(in srgb,var(--danger) 40%,var(--border))}

/* ---------- pitch (creators page) ---------- */
.pitch{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}
.pitch .p{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px}
.pitch .p b{font-family:var(--head);font-size:15px;display:block;margin-bottom:6px}
.pitch .p span{color:var(--dim);font-size:14px}
.pitch .p .big{font:500 32px var(--mono);display:block;margin-bottom:4px}
.steps{counter-reset:s;display:grid;gap:12px;margin:24px 0;max-width:640px}
.steps > div{display:flex;gap:14px;align-items:flex-start;color:var(--dim);font-size:14px}
.steps > div::before{counter-increment:s;content:counter(s);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--indigo-dim);color:var(--text);font:500 13px var(--mono)}
.steps b{color:var(--text);display:block;font-weight:600}

/* ---------- library + dashboard ---------- */
.rows{display:grid;gap:8px}
.row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--card);border:1px solid var(--border);border-radius:var(--r)}
.row .cover{width:56px;height:56px;aspect-ratio:auto;border-radius:8px;overflow:hidden;flex:none}
.row .t{min-width:0;flex:1}
.row .t b{display:block;font-family:var(--head);font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .t span{color:var(--dim);font-size:13px}
.row .acts{display:flex;gap:8px;flex:none}
.empty{padding:40px 24px;text-align:center;border:1px dashed var(--border);border-radius:var(--r);color:var(--dim)}
.empty .btn{margin-top:16px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px}
.kpi b{display:block;font:500 26px var(--mono)}
.kpi span{color:var(--dim);font-size:13px}
.kpi small{display:block;color:var(--faint);font-size:12px;margin-top:4px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-weight:600;color:var(--faint);font-size:12px;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-bottom:1px solid var(--border)}
.tbl td{padding:10px 12px;border-bottom:1px solid var(--border)}
.tbl td.num,.tbl th.num{text-align:right}
.tbl .ok{color:var(--green)}

/* ---------- result pages ---------- */
.result{max-width:560px;margin:48px auto;text-align:center}
.result .ic{width:64px;height:64px;border-radius:50%;margin:0 auto 20px;display:grid;place-items:center;background:color-mix(in srgb,var(--green) 15%,transparent);color:var(--green)}
.result .ic.no{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.result .ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.result p{color:var(--dim);margin-top:10px}
.result .cta{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.result .rows{text-align:left;margin-top:24px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:40;display:none;place-items:center;background:rgba(3,3,10,.7);padding:16px}
.modal[open]{display:grid}
.modal .box{width:min(460px,100%);background:var(--shell);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px}
.modal h2{font-size:18px;margin-bottom:8px}
.modal p{color:var(--dim);font-size:14px}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.modal code{font:400 12px var(--mono);color:var(--link);background:var(--sunken);padding:2px 6px;border-radius:5px}

/* ---------- phone ---------- */
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .hero h1 br{display:none}
  .item{grid-template-columns:1fr}
  .item .cover{max-width:380px}
  .pitch{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile .stats{margin-left:0;width:100%}
}
@media (max-width:640px){
  .top .wrap{gap:12px}
  .topnav{display:none}
  .topsearch{min-width:0;flex:1}
  .brand small{display:none}
  .form .row{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .row{flex-wrap:wrap}
  .row .acts{width:100%}
  .row .acts .btn{flex:1}
  .item .buy{flex-wrap:wrap}
  .item .buy .note{margin-left:0;text-align:left;width:100%}
}

/* ---------- discovery shelf ----------
   Rows that scroll sideways, six across on a desktop, album art with a
   title and a name under it. Nothing else on the card. */
.shelf{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * 16px) / 6);gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.shelf::-webkit-scrollbar{display:none}
.shelf .card{scroll-snap-align:start}
.card .body{gap:2px;padding:10px 12px 12px}
.card h3{font-size:14px}
.card .by{display:block;font-size:12.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card .price{font-size:13px;color:var(--faint);margin-top:2px}
.sec{margin:24px 0 8px}
.sec-head{margin-bottom:12px}
.sec-head h2{font-size:19px}
.lanes{margin:0 0 8px}
main{padding-top:24px}

/* song page */
.item .artist{font-size:17px;margin-top:6px}
.item .artist a{color:var(--text)}
.item .facts-line{color:var(--dim);font-size:14px;margin-top:8px}
.buy.products{display:grid;gap:0;padding:0;overflow:hidden}
.prod{display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer}
.prod:hover{background:var(--card-hover)}
.prod input{accent-color:var(--indigo);margin:0;grid-row:span 2}
.prod .pn{font-weight:600}
.prod .pnote{grid-column:2;color:var(--faint);font-size:12.5px}
.prod .price{grid-column:3;grid-row:1/span 2;font-size:16px}
.buy.products .btn{margin:12px 16px 16px;justify-self:start}
@media (max-width:1100px){ .shelf{grid-auto-columns:calc((100% - 4 * 16px) / 5)} }
@media (max-width:860px){ .shelf{grid-auto-columns:calc((100% - 3 * 14px) / 4);gap:14px} }
@media (max-width:640px){ .shelf{grid-auto-columns:calc((100% - 12px) / 2.3);gap:12px} .lanes{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-left:-16px;margin-right:-16px;padding:0 16px} .lanes::-webkit-scrollbar{display:none} }

/* the video under the art, and the two ways to have a song */
.video{margin-top:16px;aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--border);background:var(--sunken)}
.video iframe{width:100%;height:100%;border:0;display:block}
.video.none{display:grid;place-items:center;color:var(--faint);font-size:13px}
.tracks{margin-top:12px;color:var(--faint);font-size:12.5px;line-height:1.6}
.tracks b{color:var(--dim);font-weight:600;margin-right:4px}
.price.soon{color:var(--amber)}
.prod.off{cursor:default;color:var(--dim)}
.prod.off:hover{background:none}
.buy.soonbox{display:grid;gap:4px}
.buy.soonbox .pn{font-family:var(--head);font-weight:600;font-size:18px;color:var(--amber)}
.buy.soonbox .pnote{color:var(--dim);font-size:14px}

/* ---------- the creator's upload page ---------- */
.wizard section{margin:24px 0;padding:24px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg)}
.wizard section.locked{opacity:.45;pointer-events:none}
.wizard h2{display:flex;align-items:center;gap:12px;font-size:18px;margin-bottom:16px}
.wizard h2 .n{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--indigo-dim);font:500 13px var(--mono)}
.wizard .form{max-width:none}
.coverpick{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.coverpick .cover{border-radius:var(--r-sm);overflow:hidden;aspect-ratio:1}
.bar{height:6px;background:var(--sunken);border-radius:3px;overflow:hidden;margin-top:10px}
.bar i{display:block;height:100%;width:0;background:var(--indigo);transition:width .2s}
.slots{display:grid;gap:8px;margin-top:12px}
.slotrow{display:grid;grid-template-columns:110px 1fr auto auto;gap:8px 14px;align-items:center;padding:10px 14px;background:var(--sunken);border:1px solid var(--border);border-radius:var(--r-sm)}
.slotrow b{font-family:var(--head);font-weight:600;font-size:14px}
.slotrow .st{color:var(--dim);font-size:13px}
.slotrow .bar{grid-column:2;margin:0}
.slotrow .msg{grid-column:1/-1;padding:8px 10px;font-size:13px}
.slotrow .msg[hidden],.bar[hidden]{display:none}
.taps{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.sections input{height:32px;padding:0 8px;background:var(--sunken);border:1px solid var(--border);border-radius:6px;color:var(--text);font:inherit;font-size:13px;width:100%;max-width:140px}
.msg[hidden]{display:none}
span.msg{display:inline-block;padding:6px 10px;font-size:13px;margin-left:8px}
.ok{color:var(--green)} .bad{color:var(--danger)}
@media (max-width:640px){ .coverpick{grid-template-columns:1fr} .slotrow{grid-template-columns:1fr 1fr} .slotrow .bar{grid-column:1/-1} }

/* an artist's card: four of their covers in a square */
.mosaic{width:64px;height:64px;flex:none;border-radius:12px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;background:var(--sunken)}
.mosaic img{width:100%;height:100%;object-fit:cover}
.mosaic.n1{grid-template-columns:1fr;grid-template-rows:1fr}
.mosaic.n2{grid-template-rows:1fr} .mosaic.n2 img{height:64px}
.mosaic.n3 img:first-child{grid-row:span 2}
.lanes.countries{margin:0 0 14px}
.item .links{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.card .cover img{width:100%;height:100%;object-fit:cover}

/* ---- the front, laid out like the PerformLive store ---- */
.storehead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:12px 0 14px;flex-wrap:wrap}
.storehead h1{font-size:32px;line-height:1.1}
.storehead p{color:var(--dim);margin-top:6px;font-size:14px}
.songlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px}
@media (max-width:900px){.songlist{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.songlist{grid-template-columns:1fr}}
.songrow{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border);color:inherit;border-radius:8px}
.songrow:hover{text-decoration:none;background:var(--card)}
.songrow .thumb{width:48px;height:48px;border-radius:8px;overflow:hidden;flex:none;background:var(--sunken);display:block}
.songrow .thumb img,.songrow .thumb svg{width:100%;height:100%;object-fit:cover;display:block}
.songrow .t{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.songrow .t b{display:block;font-family:var(--head);font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.songrow .t span{color:var(--dim);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.songrow .plus{color:var(--faint);font-size:20px;flex:none;width:24px;text-align:center}
.circles{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(124px,1fr);gap:16px;overflow-x:auto;padding:4px 0 10px;scroll-snap-type:x proximity}
.circle{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;color:inherit;scroll-snap-align:start}
.circle:hover{text-decoration:none}
.circle .disc{width:120px;height:120px;border-radius:50%;overflow:hidden;border:3px solid var(--border);display:grid;place-items:center;font:600 34px var(--head);color:#fff;transition:transform .25s,border-color .25s}
.circle:hover .disc{transform:translateY(-2px);border-color:var(--indigo)}
.circle .disc img{width:100%;height:100%;object-fit:cover;display:block}
.circle b{font-family:var(--head);font-weight:600;font-size:14px}
.circle span{color:var(--dim);font-size:12.5px}
.makers{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.maker{display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 14px 16px;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);text-align:center;color:inherit}
.maker:hover{text-decoration:none;background:var(--card-hover);border-color:#3a3a66}
.maker b{font-family:var(--head);font-weight:600;font-size:15px}
.maker .badge{font:600 10px var(--mono);letter-spacing:.08em;background:color-mix(in srgb,var(--indigo) 35%,transparent);color:#d5cbff;border-radius:999px;padding:4px 10px}
.maker .what{color:var(--dim);font-size:13px}
.maker .n{color:var(--faint);font-size:12px}
.maker .btn{margin-top:6px;width:100%}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:900px){.tiles{grid-template-columns:1fr 1fr}}
.tile{--a:#6b5a1f;--b:#2a2410;display:flex;align-items:center;min-height:88px;padding:18px 20px;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-family:var(--head);font-weight:600;font-size:16px;transition:filter .2s,transform .2s}
.tile:hover{text-decoration:none;filter:brightness(1.15);transform:translateY(-2px)}
.preview-note{color:var(--faint);font-size:12.5px;text-align:center;margin:44px auto 20px;max-width:80ch}

/* ---- the Studio Bundle ---- */
.eyebrow{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--link);margin-bottom:10px}
.pkg-hero{align-items:start}
.pkg-price{background:linear-gradient(160deg,color-mix(in srgb,var(--indigo) 35%,var(--card)),var(--card));border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;text-align:center}
.pkg-price b{display:block;font:600 56px/1 var(--head);letter-spacing:-.03em}
.pkg-price span{display:block;color:var(--dim);margin-top:10px;font-size:14px}
.pkg-price small{display:block;color:var(--faint);margin-top:14px;font-size:12.5px;line-height:1.5}
.pkg-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.pkg-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.pkg-grid,.pkg-grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.pkg-grid,.pkg-grid.three{grid-template-columns:1fr}}
.pkg-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;flex-direction:column;gap:8px}
.pkg-item.pick{border-color:color-mix(in srgb,var(--indigo) 60%,var(--border));background:color-mix(in srgb,var(--indigo) 10%,var(--card))}
.pkg-item.wide{grid-column:1/-1;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px 24px}
.pkg-item.wide h3{flex:0 0 auto} .pkg-item.wide p{flex:1 1 320px}
.pkg-item h3{font-size:16px} .pkg-item p{color:var(--dim);font-size:14px;line-height:1.6;margin:0}
.pkg-item a{font-size:13px;margin-top:auto}
.pkg-item .tag{font:500 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:0;padding:0;align-self:flex-start;background:none}
.pkg-item.pick .tag{color:var(--link)}
/* the banner on the store front */
.bundle{display:grid;grid-template-columns:1fr auto;gap:16px 28px;align-items:center;margin:4px 0 8px;padding:22px 26px;border-radius:var(--r-lg);color:var(--text);
  background:linear-gradient(120deg,color-mix(in srgb,var(--indigo) 38%,var(--card)),var(--card) 70%);border:1px solid color-mix(in srgb,var(--indigo) 50%,var(--border))}
.bundle:hover{text-decoration:none;border-color:var(--indigo)}
.bundle .eyebrow{margin-bottom:6px}
.bundle h2{font-size:20px;margin:0 0 4px}
.bundle p{color:var(--dim);font-size:14px;margin:0;max-width:70ch}
.bundle .price{text-align:right}
.bundle .price b{display:block;font:600 34px/1 var(--head);letter-spacing:-.03em}
.bundle .price span{display:block;color:var(--dim);font-size:12.5px;margin-top:4px}
@media (max-width:640px){.bundle{grid-template-columns:1fr}.bundle .price{text-align:left}}

/* ---- how to pay ---- */
.pay-ways{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media (max-width:900px){.pay-ways{grid-template-columns:1fr}}
.pay-way{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px}
.pay-way.momo{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;border-color:color-mix(in srgb,#FFCC00 45%,var(--border));background:color-mix(in srgb,#FFCC00 6%,var(--card))}
@media (max-width:640px){.pay-way.momo{grid-template-columns:1fr}.pay-way.momo img{justify-self:center}}
.pay-way h3{font-size:17px;margin:0 0 8px}
.pay-way p{color:var(--dim);font-size:14px;line-height:1.6;margin:0}
.pay-way ol{margin:0 0 14px;padding-left:20px;color:var(--dim);font-size:14px;line-height:1.7}
.pay-way ol b{color:var(--text)}
.pay-way img{width:220px;height:220px;border-radius:12px;background:#fff;padding:6px;display:block}
.pay-way .btn{margin-top:4px}

/* the call for creators, fixed at the top of the store front */
.collab{padding:18px 0 0}
.collab-in{display:grid;grid-template-columns:1fr auto;gap:18px 32px;align-items:center;padding:24px 28px;border-radius:var(--r-lg);
  background:linear-gradient(120deg,color-mix(in srgb,#25D366 22%,var(--card)),var(--card) 72%);border:1px solid color-mix(in srgb,#25D366 40%,var(--border))}
.collab .eyebrow{margin-bottom:6px}
.collab h2{font-size:clamp(20px,2.4vw,26px);line-height:1.2;margin:0 0 8px}
.collab p{color:var(--dim);font-size:14.5px;line-height:1.6;margin:0;max-width:68ch}
.collab .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.collab figure{margin:0;text-align:center}
.collab figure img{width:150px;height:150px;border-radius:12px;background:#fff;display:block}
.collab figcaption{font-size:12px;color:var(--dim);margin-top:8px}
@media (max-width:640px){.collab-in{grid-template-columns:1fr;padding:20px}.collab figure{justify-self:start}}