/* Digger Digger: "Neon Day" theme: a bright, light page with club neon colours
   (fuchsia, electric violet, electric blue, cyan, mint green; no red, orange or yellow). See BRAND.md. */
/* Fonts, served from this site (assets/fonts, SIL Open Font License, the OFL-*.txt files there): the exact files and
   rules Google Fonts serves (DM Sans variable with its opsz axis, Space Mono 400 + 700, Rubik Puddles), one file per
   alphabet, so a page only downloads the alphabets it shows. index.html preloads the two the first screen needs. */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/dm-sans-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; }  /* latin */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/dm-sans-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; }  /* latin */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/dm-sans-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; }  /* latin */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/dm-sans-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/dm-sans-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; }  /* latin */
@font-face { font-family: 'Rubik Puddles'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rubik-puddles-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }  /* cyrillic-ext */
@font-face { font-family: 'Rubik Puddles'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rubik-puddles-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }  /* cyrillic */
@font-face { font-family: 'Rubik Puddles'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rubik-puddles-hebrew.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }  /* hebrew */
@font-face { font-family: 'Rubik Puddles'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rubik-puddles-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'Rubik Puddles'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/rubik-puddles-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; }  /* latin */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/space-mono-400-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }  /* vietnamese */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/space-mono-400-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/space-mono-400-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; }  /* latin */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }  /* vietnamese */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }  /* latin-ext */
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-mono-700-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; }  /* latin */
/* Pictures that come in smaller copies (srcset, made by tools/render.py) keep the exact shape of the full-size one,
   so every screen lays them out to the same pixel whichever copy it downloads. */
.top .logo img, .compare th.us img { aspect-ratio: 2000 / 307; }
.cordline img { aspect-ratio: 2400 / 253; }
.cta-shape.c2 { aspect-ratio: 717 / 820; }
/* The footer shows once app.js has drawn the page (startAccounts adds .ready): under the short summary the page
   opens with, it would be on screen, then jump down (a layout shift). */
#foot:not(.ready) { visibility: hidden; }
:root {
  --bg: #FFFFFF; --bg-2: #F6F4FF; --panel: #FFFFFF; --tint: #F2EEFF;
  --ink: #14093A; --ink-2: #1F1250; --text: #241A4D; --muted: #625A86;
  --line: #E7E3F8; --row: #F1EEFC;
  --pink: #FF2BD6; --violet: #7B3CFF; --blue: #2F5BFF; --cyan: #00C2FF; --green: #00D68F;
  --pink-text: #B10C93; --violet-text: #6A2BFF; --blue-text: #1F49E0; --green-text: #00804F;
  --accent: var(--violet-text); --accent-soft: #C414C8;
  --neon: linear-gradient(120deg, #FF2BD6 0%, #7B3CFF 40%, #2F5BFF 70%, #00C2FF 100%);
  --cta: linear-gradient(135deg, #DE12BE, #7B3CFF);  /* #DE12BE (was #E414C2): white button text stays at 4.5:1 or more */
  --mono: 'Space Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bar-h: 0px;    /* height of the player bar while it shows (iPhone home bar included) */
  --sel-h: 0px;    /* height of the "tracks selected" bar while it shows */
  --top-h: 72px;   /* header height: the phone menu opens right under it */
  --safe-b: env(safe-area-inset-bottom, 0px);  /* iPhone home bar */
  --gutter: 24px;  /* side margin of the page content, smaller on phones (below) */
  --sec-y: 90px;   /* space above and below a section */
}
@media (max-width: 760px) { :root { --gutter: 20px; --sec-y: 64px; --top-h: 60px; } }
@media (max-width: 380px) { :root { --gutter: 16px; --sec-y: 56px; } }
@media (max-height: 500px) and (max-width: 1000px) { :root { --top-h: 56px; } }  /* phones on their side: keep the bars thin */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* the padding keeps the page clear of the notch (iPhone on its side), the home bar and the player/selection bars */
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--sans); padding: 0 env(safe-area-inset-right, 0px) max(var(--bar-h) + var(--sel-h), var(--safe-b)) env(safe-area-inset-left, 0px);
  -webkit-font-smoothing: antialiased;
}
body.playing { --bar-h: calc(96px + var(--safe-b)); }
::selection { background: var(--pink); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--mono); font-weight: 700; color: var(--ink); letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 62px); line-height: 1.08; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
/* phones: smaller base headings that grow with the screen up to the tablet sizes */
@media (max-width: 760px) {
  h1 { font-size: clamp(30px, 8.2vw, 38px); }
  h2 { font-size: clamp(24px, 6.6vw, 30px); }
  h3 { font-size: clamp(19px, 5.4vw, 22px); }
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.center { text-align: center; }
.empty { padding: 60px 20px; color: var(--muted); text-align: center; }
.eyebrow { font: 400 12px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-soft); }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text); max-width: 720px; }
.lead.center { margin-left: auto; margin-right: auto; }
mark { background: linear-gradient(transparent 60%, rgba(0, 214, 143, .5) 60%); color: inherit; padding: 0 .1em; }
em { font-style: italic; }
.neon { background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* buttons */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px;
  border-radius: 0; font: 500 15px/1 var(--sans); border: 1px solid #D9D0FF;
  background: var(--tint); color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .2s;
}
.pill:hover { background: #E8E1FF; }
@media (hover: hover) { .pill:hover { transform: translateY(-1px); } }  /* no lift that sticks after a tap */
@media (pointer: coarse) { .pill { min-height: 44px; } }  /* finger-sized buttons on touch screens */
.pill.primary {
  background: var(--cta); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: 0 8px 24px rgba(196, 20, 200, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.pill.primary:hover { box-shadow: 0 10px 32px rgba(196, 20, 200, .5), 0 0 0 4px rgba(255, 43, 214, .14), inset 0 1px 0 rgba(255, 255, 255, .3); }
.pill.ghost { background: #fff; }
.pill.outline { background: #fff; border: 1.5px solid var(--violet); color: var(--violet-text); font-weight: 500; }
.pill.outline:hover { background: var(--tint); box-shadow: 0 0 0 4px rgba(123, 60, 255, .12); }
.pill.lg { padding: 15px 30px; font-size: 16px; }
.pill b { color: var(--pink-text); font-weight: 700; }
.linklike { background: none; border: none; padding: 0; color: var(--accent); cursor: pointer; text-align: left; }
.linklike:hover { text-decoration: underline; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions.center { justify-content: center; }

/* header: Beatportal style, flat white bar, logo left, plain-text menu centred, "My crate" right */
.top {
  position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--top-h); padding: 0 40px; background: #FFFFFF;
}
.logo { display: flex; align-items: center; justify-self: start; }
.top .logo { min-height: 44px; }  /* taller to tap than the picture (header only: the rows' store links are a.logo too) */
.logo img { height: 34px; width: auto; display: block; }
.nav { display: flex; align-items: center; gap: 44px; }
.navlink {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 0; background: none; border: none;
  color: #111; font: 400 17px/1 var(--sans); text-decoration: none; cursor: pointer;
  text-decoration-thickness: 2px; text-underline-offset: 9px;
}
.navlink:hover, .navlink.active { text-decoration-line: underline; }
.navlink svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dd { position: relative; }
.dd-menu {
  position: absolute; left: 50%; transform: translateX(-50%); top: calc(100% + 14px); width: 800px; padding: 12px; display: none;
  grid-template-columns: minmax(0, 1fr) 250px; gap: 0 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 60px rgba(20, 9, 58, .14);
}
.dd-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start; }
.dd-lists { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; background: var(--bg-2); }
.dd-label { padding: 4px 14px 8px; font: 400 11px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); }
.dd-lists small { display: block; margin-top: 3px; font: 400 12px/1.3 var(--sans); color: var(--muted); }
.dd.open .dd-menu { display: grid; }
/* the Product menu: two pages, one narrow column (the phone rules below apply to it as to the Styles menu) */
@media (min-width: 1001px) {
  .dd-small .dd-menu { width: 360px; grid-template-columns: 1fr; padding: 8px; }
  .dd-small .dd-lists { padding: 0; background: #fff; }
}
.dd-menu a, .dd-menu span {
  display: block; padding: 11px 14px; border-radius: 0; color: var(--ink); text-decoration: none;
  font: 500 15px/1.3 var(--sans); transition: background .15s, color .15s, box-shadow .15s;
}
.dd-menu a:hover, .dd-menu a:focus-visible { background: var(--tint); color: var(--violet-text); box-shadow: inset 3px 0 0 var(--pink); outline: none; }
.dd-menu span { color: var(--muted); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
/* account button and menu */
.acct { position: relative; }
.acct-icon { display: inline-flex; }
.toplink.signin { background: var(--ink); color: #fff; padding: 11px 20px; font-size: 15px; transition: background .15s; }
.toplink.signin:hover { background: var(--violet); }
.toplink.signin:hover .label { text-decoration: none; }
.toplink.signin .acct-icon { display: none; }
.acct-icon img { width: 26px; height: 26px; border-radius: 0; object-fit: cover; display: block; }
.acct-menu {
  position: absolute; right: 0; top: calc(100% + 14px); min-width: 250px; width: max-content; max-width: 380px; padding: 16px; z-index: 40;
  background: #fff; border: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 60px rgba(20, 9, 58, .14);
}
.acct-who b { display: block; color: var(--ink); font-weight: 600; }
.acct-who small { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; overflow-wrap: anywhere; }
.acct-menu .pill { margin-top: 14px; width: 100%; justify-content: center; }
.toplink {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 0; background: none; border: none;
  color: #111; font: 400 17px/1 var(--sans); cursor: pointer;
}
.toplink svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.toplink:hover .label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 9px; }
.toplink .count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 0; background: #111; color: #fff; font: 600 12px/20px var(--sans); text-align: center; }
.menu { display: none; width: 44px; height: 44px; padding: 0; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.menu span { width: 22px; height: 2px; background: #111; border-radius: 0; transition: transform .2s, opacity .2s; }
/* open: the three lines turn into a cross */
body.nav-open .menu span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .menu span:nth-child(2) { opacity: 0; }
body.nav-open .menu span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* touch screens: 44px to tap; "Sign in" keeps its look (the extra height is a see-through border) */
@media (pointer: coarse) {
  .top-actions .toplink { min-height: 44px; }
  .toplink.signin { border-block: 3px solid transparent; background-clip: padding-box; }
}
/* small laptops and tablets on their side (1001-1279px): the same header, tighter, with the Styles menu
   centred under the header so it can't run off the left edge */
@media (min-width: 1001px) and (max-width: 1279px) {
  .top { padding: 0 24px; }
  .nav { gap: 30px; }
  .navlink, .toplink { font-size: 16px; }
  .dd { position: static; }
  .dd-menu { top: calc(100% - 6px); }
}
@media (min-width: 1001px) and (pointer: coarse) { .navlink { min-width: 44px; justify-content: center; padding: 14px 0; } }
/* tablets and phones: logo, My crate, Sign in and the menu button. The menu opens as a panel under the
   header (it scrolls inside, the page behind stays put); Styles unfolds inside it. */
@media (max-width: 1000px) {
  .top { grid-template-columns: minmax(0, 1fr) auto; padding: 0 var(--gutter); }
  .top-actions { gap: 10px; }
  .menu { display: flex; margin-right: -10px; }  /* the lines end on the page edge */
  .nav {
    position: fixed; top: var(--top-h); left: 0; right: 0; z-index: 1; display: none;
    flex-direction: column; align-items: stretch; gap: 0;
    max-height: calc(100vh - var(--top-h)); max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 4px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(24px + var(--safe-b)) max(var(--gutter), env(safe-area-inset-left, 0px));
    background: #fff; border-top: 1px solid var(--line); box-shadow: 0 30px 60px rgba(20, 9, 58, .2);
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { display: flex; }
  body.nav-open .top { z-index: 39; }  /* over the player and the selection bar, under the pop-ups */
  body.nav-open::before { content: ''; position: fixed; inset: 0; z-index: 38; background: rgba(20, 9, 58, .45); }
  .navlink {
    justify-content: space-between; width: 100%; min-height: 58px; padding: 12px 0; border-bottom: 1px solid var(--line);
    font: 500 19px/1.3 var(--sans); color: var(--ink); text-underline-offset: 6px;
  }
  .navlink svg { width: 22px; height: 22px; transition: transform .2s; }
  .dd.open .navlink svg { transform: rotate(180deg); }
  .dd-menu {
    position: static; transform: none; width: auto; padding: 8px 0 16px; grid-template-columns: 1fr; gap: 12px;
    border: 0; border-bottom: 1px solid var(--line); box-shadow: none;
  }
  .dd-styles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 8px; }
  .dd-lists { display: grid; grid-template-columns: 1fr; gap: 0 8px; padding: 6px 0; }
  .dd-label { grid-column: 1 / -1; padding: 8px 12px 6px; }
  .dd-menu a, .dd-menu span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding: 10px 12px; font-size: 16px; }
  .dd-lists a { justify-content: flex-start; }  /* side by side (tablets), the five names share a top line */
  .dd-lists small { font-size: 13px; }
}
@media (min-width: 561px) and (max-width: 1000px) { .dd-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 761px) and (max-width: 1000px) { .dd-lists { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dd-lists.dd-product { grid-template-columns: repeat(2, minmax(0, 1fr)); } }  /* the five lists across every style side by side; the two product pages too */
/* phones: icon buttons, "Sign in" stays a word, the count sits on the crate icon */
@media (max-width: 760px) {
  .logo img { height: 26px; }
  .top-actions { gap: 4px; }
  .top-actions .toplink { min-width: 44px; min-height: 44px; justify-content: center; }
  .toplink .label { display: none; }
  .toplink.signin { padding: 0 14px; font-size: 15px; }
  .toplink.signin .label { display: inline; }
  #crateBtn { position: relative; }
  #crateBtn .count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; font-size: 11px; line-height: 18px; }
  .acct-menu { position: fixed; top: var(--top-h); left: 0; right: 0; width: auto; min-width: 0; max-width: none; padding: 18px var(--gutter) 20px; border-width: 1px 0; }
}
@media (max-width: 380px) { .logo img { height: 24px; } }
/* the smallest phones (320px): "Sign in" becomes a dark square with the person icon, so the header stays on one line */
@media (max-width: 359px) {
  .logo img { height: 22px; }
  .toplink.signin { width: 44px; padding: 0; }
  .toplink.signin .label { display: none; }
  .toplink.signin .acct-icon { display: inline-flex; }
}
@media (max-height: 500px) and (max-width: 1000px) { .logo img { height: 26px; } }
@media (prefers-reduced-motion: reduce) { .menu span, .navlink svg { transition: none; } }

/* hero: centered text, DJ portrait collage on both sides */
.hero {
  position: relative; overflow: hidden; display: grid; place-items: center; text-align: center;
  min-height: 720px; padding: 70px var(--gutter); isolation: isolate;
  background: #fff;
}
.hero-text { max-width: 620px; position: relative; z-index: 1; }
/* 2 columns x 3 rows per side, sized to the hero's height so nothing gets cut */
.hero-djs {
  position: absolute; top: 40px; bottom: 40px; width: calc(50% - 350px); max-width: 440px;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr);
}
.djs-left { left: 0; }
.djs-right { right: 0; }
.djs-left .dj:nth-child(even), .djs-right .dj:nth-child(odd) { translate: 0 14%; }
.hero-djs::before, .hero-djs::after { content: ""; position: absolute; z-index: -1; width: 50%; height: 30%; }
.djs-left::before { right: 0; top: -40px; background: var(--violet); }
.djs-left::after { left: 0; bottom: -40px; background: var(--pink); }
.djs-right::before { left: 0; top: -40px; background: var(--cyan); }
.djs-right::after { right: 0; bottom: -40px; background: var(--green); }
.dj { position: relative; display: block; overflow: hidden; background: var(--c); }
.dj img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .5s cubic-bezier(.2, .7, .3, 1); }
@media (hover: hover) { .dj:hover img { scale: 1.06; } }
.dj span {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 5px 8px; border-radius: 0;
  background: #fff; color: var(--ink); font: 700 10px/1.25 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-align: left;
}
/* tablets: a band of six portraits right under the header, the text, six more closing the hero */
@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; padding: 0 var(--gutter); }
  .hero-djs {
    position: static; justify-self: stretch; width: auto; max-width: none; margin-inline: calc(-1 * var(--gutter));
    grid-template-columns: repeat(6, 1fr); grid-template-rows: none;
  }
  .hero-djs .dj { aspect-ratio: 4 / 5; }
  .djs-left .dj:nth-child(n), .djs-right .dj:nth-child(n) { translate: none; }
  .hero-djs::before, .hero-djs::after { display: none; }
  .dj span { font-size: 11px; }  /* name labels: the smallest size for touch screens */
}
/* landscape tablets are short: square tiles (the photos' own shape) keep the buttons on the first screen */
@media (min-width: 761px) and (max-width: 1100px) and (orientation: landscape) {
  .hero { gap: 28px; }
  .hero-djs .dj { aspect-ratio: 1; }
  .hero .checks { margin-block: 22px 28px; }
}
/* phones: all twelve portraits as one wall (two rows of six) under the header, then the text */
@media (max-width: 760px) {
  .hero { gap: 0; padding-bottom: 30px; }
  .hero-text { order: 1; margin-top: 26px; }
  .dj span { display: none; }
}
.hero h1 { margin: 16px 0 24px; text-wrap: balance; }
.hero .lead { text-wrap: pretty; }
.checks { list-style: none; margin: 28px 0 36px; padding: 0; display: grid; gap: 14px; font-size: 20px; color: var(--text); }
.checks li { display: flex; align-items: center; gap: 14px; text-align: left; }  /* a wrapped item stays left-aligned like the others */
.hero .checks { width: fit-content; margin-inline: auto; }
.checks svg, .tag svg { width: 24px; height: 24px; fill: none; stroke: var(--violet); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 760px) {
  .hero h1 { font-size: clamp(30px, 9.6vw, 38px); margin: 12px 0 16px; }  /* "Dig tracks that" stays on one line down to 320px */
  .hero .checks { margin: 22px auto 26px; gap: 10px; }
  .hero .checks li { align-items: flex-start; }  /* the icon sits on the first line of a wrapped item */
  .hero .checks svg { margin-top: 1px; }
  /* the two buttons share the width, or each takes the full width when they don't fit side by side */
  .hero .actions { max-width: 420px; margin-inline: auto; }
  .hero .actions > * { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) { .hero .eyebrow { letter-spacing: .15em; } }  /* keeps "What the best DJs really play" on one line */
.shapes { position: relative; height: 600px; --px: 0; --py: 0; }
.shape {
  position: absolute; will-change: transform; transition: transform .35s cubic-bezier(.2, .7, .3, 1);
  transform: translate3d(calc(var(--px) * var(--d) * -1px), calc(var(--py) * var(--d) * -1px), 0);
}
.shape img {
  display: block; width: 100%; height: auto; user-select: none; pointer-events: none;
  filter: drop-shadow(0 26px 34px rgba(123, 60, 255, .22));
  animation: bob 6s ease-in-out infinite alternate;
}
.sh-bubbles { left: 8%; top: 6%; width: 44%; z-index: 3; }
.sh-vinyl { right: -8%; top: -2%; width: 46%; z-index: 2; }
.sh-vinyl img { animation: drift 8s ease-in-out -2s infinite alternate; }
.sh-ring { left: 46%; top: 52%; width: 25%; z-index: 4; }
.sh-ring img { animation-duration: 5s; animation-delay: -3s; }
.sh-coil { left: 0; bottom: 0; width: 28%; z-index: 4; }
.sh-coil img { animation: drift 6.5s ease-in-out -1s infinite alternate; filter: drop-shadow(0 22px 34px rgba(255, 43, 214, .3)); }
.sh-drop { right: 2%; bottom: 2%; width: 27%; z-index: 3; }
.sh-drop img { animation-duration: 7.5s; animation-delay: -5s; filter: drop-shadow(0 26px 34px rgba(0, 194, 255, .28)); }
@keyframes bob { from { translate: 0 -18px; rotate: -5deg; scale: 1; } to { translate: 0 20px; rotate: 5deg; scale: 1.04; } }
@keyframes drift { from { translate: -14px -16px; rotate: 6deg; } to { translate: 14px 18px; rotate: -6deg; } }
@keyframes floaty { from { translate: 0 -7px; rotate: -4deg; } to { translate: 0 8px; rotate: 4deg; } }
@media (prefers-reduced-motion: reduce) {
  .shape img, .cordline img, .card-shape, .cta-shape { animation: none !important; }
  .shape { transition: none; }
}

/* tape band: two big crossing tapes, Rubik Puddles text scrolling in opposite directions */
.tapes { position: relative; height: 330px; overflow: hidden; }
.tape {
  position: absolute; left: -10vw; top: 50%; width: 120vw; height: 112px; margin-top: -56px;
  display: flex; align-items: center; overflow: hidden; box-shadow: 0 14px 40px rgba(20, 9, 58, .14);
}
.tape.t1 { rotate: -6deg; background: #3DF2B0; }
.tape.t2 { rotate: 5deg; background: var(--pink); }
.tape-track { display: flex; flex: none; animation: tape 48s linear infinite; }
.tape.t2 .tape-track { animation-direction: reverse; }
.tape-wait .tape-track { visibility: hidden; }  /* until Rubik Puddles has loaded (app.js), so the words never jump sideways */
.tape-half {
  display: flex; flex: none; align-items: center; gap: 30px; padding-right: 30px; white-space: nowrap;
  font: 400 66px/1 'Rubik Puddles', var(--sans); color: var(--ink); text-transform: uppercase;
}
.tape-half b { font: 700 38px/1 var(--sans); }
/* the repeated words and the stars come from CSS (app.js tapeHalf): in the page's text only once */
.tape-half [data-t]::before { content: attr(data-t); }
.tape-half b:empty::before { content: '✦'; }  /* (empty only: tools/render.py writes its stars as text) */
.tapes.flip .tape.t1 { rotate: 6deg; }  /* mirrored pair, under the About page's support box */
.tapes.flip .tape.t2 { rotate: -5deg; }
@keyframes tape { to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .tape-track { animation: none; } }
@media (max-width: 760px) {
  .tapes { height: 210px; }
  .tape { height: 72px; margin-top: -36px; }
  .tape-half { font-size: 42px; gap: 20px; padding-right: 20px; }
  .tape-half b { font-size: 26px; }
}
/* single tape (top of the blog page): a gentle tilt, so it needs less height; longer text, longer loop */
.tapes.one { height: 190px; overflow-x: clip; overflow-y: visible; }  /* clip sideways only, so the shadow fades out instead of being cut */
.tapes.one .tape { rotate: -2deg; }
.tapes.one .tape-track { animation-duration: 82s; }
@media (max-width: 760px) { .tapes.one { height: 120px; } }
/* a tape instead of a page's eyebrow (Famous IDs): the title comes up close under it */
.tapes.one + .page-head.col-head { padding-top: 0; }
@media (min-width: 761px) { .tapes.one + .page-head.col-head { margin-top: -24px; } }

/* sources strip */
.strip { padding: 34px var(--gutter) 6px; text-align: center; }
.strip .logos { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px 54px; margin-top: 20px; }
.strip .src { min-height: 24px; }  /* small logos (1001Tracklists) still get a 24px target; the row looks the same */
.src { display: inline-flex; align-items: center; gap: 10px; color: var(--violet-text); text-decoration: none; transition: color .2s, translate .2s; }
@media (hover: hover) { .src:hover { color: var(--pink-text); translate: 0 -2px; } }
.src i {
  display: block; height: var(--h); aspect-ratio: var(--r); background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.src b { font: 700 26px/1 var(--sans); letter-spacing: -.02em; }
@media (min-width: 761px) and (max-width: 1279px) { .strip .logos { max-width: 720px; margin-inline: auto; } }  /* three and three, not five and one */
@media (max-width: 760px) {
  .strip .logos { gap: 16px 30px; }
  .src i { height: calc(var(--h) * .78); }
  .src b { font-size: 20px; }
}
/* touch screens: each logo gets a full-size tap area (taller box, no extra row gap, so it looks the same) */
@media (pointer: coarse) {
  .strip .logos { row-gap: 0; }
  .strip .src { min-height: 44px; }
}

/* sections */
.meet { text-align: center; padding: 0 0 var(--sec-y); overflow: hidden; }
.meet .wrap { padding: 0 var(--gutter); }
.cordband { overflow-x: clip; }  /* clip sideways only, so the glow under the cord fades out instead of being cut */
.cordline { margin: 0 0 0 -40px; width: 100%; }  /* comes in from the left edge, plug fully visible on the right */
.cordline img { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 18px rgba(196, 20, 200, .22)); animation: sway 6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: translateY(-4px); } to { transform: translateY(5px); } }
.meet h2 { margin: 14px 0 20px; }
.question { font: 700 clamp(24px, 2.8vw, 36px)/1.3 var(--mono); color: var(--ink); margin: 40px 0 28px; text-wrap: balance; }
.meet .lead { text-wrap: pretty; }

.styles { padding: var(--sec-y) 0; background: #fff; }
@media (max-width: 760px) { .styles { scroll-margin-top: 24px; } }  /* /#/styles: the title lands clear of the sticky header */
.styles h2 { text-wrap: balance; }  /* on two lines, one star on each */
.styles h2 .star { color: var(--pink); margin: 0 10px; font-size: .8em; }
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.scard {
  --c: #FF2BD6;
  display: flex; flex-direction: column; padding: 12px 12px 18px; border-radius: 0; background: #fff;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 10px 40px rgba(20, 9, 58, .06);
  transition: box-shadow .25s;
}
.scard:hover { box-shadow: 0 22px 60px rgba(20, 9, 58, .1), 0 0 0 4px color-mix(in srgb, var(--c) 14%, transparent); }
.scard.c1 { --c: #FF2BD6; } .scard.c2 { --c: #00D68F; } .scard.c3 { --c: #7B3CFF; } .scard.c4 { --c: #00C2FF; }
.scard.soon { opacity: .85; }
/* poster: giant white word + black & white portraits of the style's big names on a neon block */
.poster {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 0; background: var(--c);
  container-type: inline-size; isolation: isolate;
}
/* the style name fills the width (--fit and --lines from fitTitle in app.js), sits in front; the people move down below it */
.poster-word {
  position: absolute; top: 3%; left: 4%; z-index: 2; color: #fff; white-space: nowrap; text-transform: uppercase;
  font: 700 96px/.82 var(--sans); font-size: calc(var(--fit, 30) * 1cqw); letter-spacing: -.05em;
  text-shadow: 0 2px 18px rgba(20, 9, 58, .18);
  font-variation-settings: 'opsz' 40;  /* DM Sans widens its letters below 40px: keep the display cut so small posters fit like big ones */
}
.montage {
  position: absolute; left: 0; top: max(0%, calc(var(--fit, 30) * var(--lines, 1) * .656% - 7%)); z-index: 1;
  width: 100%; height: 100%; object-fit: cover;
}
.poster-btn {
  position: absolute; left: 16px; bottom: 16px; z-index: 3; border: 0; background: #fff; color: var(--ink);
  box-shadow: 0 10px 30px rgba(20, 9, 58, .3);
  display: block; min-height: 0;  /* plain text flow keeps "Explore" and the name one space apart; a label, the whole poster is the tap target */
}
.scard.soon .poster-btn { color: var(--muted); }
.scard > h3 { padding: 16px 8px 2px; font-size: clamp(20px, 1.8vw, 26px); }
/* small posters (tablets, phones): a compact button that just says "Explore", the giant name says the rest */
@container (max-width: 320px) {
  .poster-btn { left: 8px; bottom: 8px; padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 18px rgba(20, 9, 58, .3); }
  .pb-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* still read out: "Explore Afro House" */
}
/* tablets: three columns; phones: two, so a visitor scans all sixteen styles in a few screens */
@media (max-width: 1000px) {
  .style-grid { gap: 16px; margin-top: 36px; }
  .style-grid .scard { padding: 8px 8px 12px; }
  .style-grid .scard > h3 { padding: 12px 4px 0; font-size: 17px; }
}
@media (max-width: 760px) {
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
  .style-grid .scard { padding: 6px 6px 10px; }
  .style-grid .scard > h3 { padding: 10px 2px 0; font-size: 15px; }
}
/* All styles (/styles/): the home page's cards with each style's tagline and size, then one tile per list across every style */
.tapes.one + .all-styles { padding-top: 0; }
@media (min-width: 761px) { .tapes.one + .all-styles { margin-top: -24px; } }
.all-styles h1 .star { color: var(--pink); margin: 0 10px; font-size: .8em; }
.all-styles .lead { margin-top: 14px; }
.all-meta { margin: 14px 0 0; text-align: center; font: 400 13px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.sc-tag { margin: 6px 8px 0; color: var(--text); font-size: 15px; line-height: 1.45; text-wrap: pretty; }
.sc-count { margin: auto 8px 0; padding-top: 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 1000px) { .sc-tag { margin: 6px 4px 0; font-size: 14px; } .sc-count { margin: auto 4px 0; padding-top: 10px; } }
@media (max-width: 760px) { .sc-tag { display: none; } .sc-count { margin: auto 2px 0; padding-top: 4px; letter-spacing: .1em; } }  /* phones: two cards a row, the names say enough */
.all-lists { padding: 0 0 var(--sec-y); background: #fff; }
.all-lists h2 { margin-top: 10px; }
.all-lists .lead { margin-top: 14px; }
.list-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.list-tile {
  --c: #FF2BD6; display: flex; flex-direction: column; min-height: 230px; padding: 22px;
  background: var(--c); color: var(--ink); text-decoration: none; transition: box-shadow .25s;
}
.list-tile.c1 { --c: #FF2BD6; } .list-tile.c2 { --c: #00D68F; } .list-tile.c3 { --c: #7B3CFF; } .list-tile.c4 { --c: #00C2FF; }
.list-tile:hover { box-shadow: 0 22px 60px rgba(20, 9, 58, .14), 0 0 0 4px color-mix(in srgb, var(--c) 18%, transparent); }
/* like the posters: the big word in white on pink and violet, in ink on mint and cyan; the small line in ink, white on violet */
.lt-word {
  color: #fff; text-transform: uppercase; font: 700 clamp(26px, 2.6vw, 38px)/.86 var(--sans); letter-spacing: -.05em;
  text-shadow: 0 2px 18px rgba(20, 9, 58, .2);
}
.list-tile.c2 .lt-word, .list-tile.c4 .lt-word { color: var(--ink); text-shadow: none; }
.lt-sub { margin: 12px 0 20px; font: 500 15px/1.35 var(--sans); }
.list-tile.c3 .lt-sub { color: #fff; }
.lt-btn {
  align-self: flex-start; margin-top: auto; padding: 10px 16px; background: #fff; color: var(--ink);
  font: 500 15px/1.2 var(--sans); transition: background .15s, color .15s;
}
.list-tile:hover .lt-btn { background: var(--ink); color: #fff; }
@media (max-width: 1000px) { .list-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; } .list-tile { min-height: 190px; } }
@media (max-width: 760px) {
  .list-tiles { gap: 12px; margin-top: 28px; }
  .list-tile { min-height: 170px; padding: 14px; }
  .lt-word { font-size: 22px; }
  .lt-sub { margin: 10px 0 16px; font-size: 14px; }
  .lt-btn { padding: 8px 12px; font-size: 13px; }
}
@media (max-width: 380px) { .list-tiles { grid-template-columns: 1fr; } .list-tile { min-height: 0; } }  /* "Downloads" needs the width */
/* Openers & closers: an ink tile across the whole row, its words on one line where there is room */
.list-tile.c5 { --c: var(--ink); }
.list-tile.c5 .lt-word, .list-tile.c5 .lt-sub { color: #fff; }
.list-tile.c5:hover .lt-btn { background: var(--pink); color: var(--ink); }
.list-tile.wide { grid-column: 1 / -1; min-height: 0; flex-flow: row wrap; align-items: center; gap: 12px 28px; }
.list-tile.wide .lt-sub { margin: 0; }
.list-tile.wide .lt-btn { margin: 0 0 0 auto; }
@media (max-width: 560px) { .list-tile.wide { flex-direction: column; align-items: flex-start; } .list-tile.wide .lt-btn { margin: 4px 0 0; } }
/* the Styles menu: its last line, under the sixteen names, opens the All styles page */
.dd-styles .dd-all { grid-column: 1 / -1; margin-top: 6px; border-top: 1px solid var(--line); font-weight: 700; color: var(--violet-text); }
.dd-styles .dd-all::after { content: '›' / ''; margin-left: 6px; }
@media (max-width: 1000px) { .dd-styles .dd-all { flex-direction: row; justify-content: flex-start; align-items: center; } }

/* the end of a style page: three styles to dig next, one row of the home page's cards at every width */
.more-styles { padding: 8px 0 0; }
.more-styles .blog-head { margin-bottom: 28px; }
.more-styles .style-grid { margin-top: 0; }
@media (max-width: 760px) {
  .more-styles .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .more-styles .scard { padding: 4px 4px 8px; }
  .more-styles .scard > h3 { padding: 8px 2px 0; font-size: 13px; }
}
/* posters this small: the "Explore" label hides (screen readers still hear "Explore Afro House"), the whole poster is the link */
@container (max-width: 140px) {
  .more-styles .poster-btn { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }
}
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--pink-text); }
.tag::before { content: ''; width: 9px; height: 9px; border-radius: 0; background: currentColor; box-shadow: 0 0 0 2.5px #fff, 0 0 0 4px currentColor; margin-right: 3px; }
.tag.t2 { color: var(--green-text); } .tag.t3 { color: var(--violet-text); } .tag.t4 { color: var(--blue-text); }
.tag.icon { color: var(--violet-text); }
.tag.icon::before { display: none; }

.features { padding: var(--sec-y) 0; background: var(--bg-2); }
.features .lead { margin: 18px 0 44px; max-width: 900px; }
.features .lead.center { margin-left: auto; margin-right: auto; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr 1.9fr; gap: 24px; }
.fcard { background: #fff; border-radius: 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(20, 9, 58, .06); }
.fcard.wide { flex-direction: row; }
.ftop { background: var(--ink); min-height: 230px; padding: 26px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mini {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 0;
  background: rgba(255, 255, 255, .08); color: #EDE8FF; font-size: 13px;
}
.mini span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini b { font: 400 11px var(--mono); color: #3DF2B0; white-space: nowrap; }
.mini.id b { color: #C9A7FF; }
.fbody { padding: 30px 34px 34px; display: grid; gap: 14px; align-content: start; }
.fbody p { color: var(--text); font-size: 17px; line-height: 1.55; }
.more-link { font-weight: 600; text-decoration: none; }
@media (pointer: coarse) { .more-link { display: flex; align-items: center; justify-self: start; min-height: 44px; margin: -10px 0; } }  /* finger-sized, text stays in place */
.venn { background: var(--ink); flex: 0 0 46%; display: grid; place-items: center; padding: 24px; }
.venn svg { width: 100%; max-width: 320px; height: auto; overflow: visible; }
/* tablets: two cards side by side and the Crate Intelligence card across the full width (three squeezed the rows) */
@media (max-width: 1100px) {
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .fcard.wide { grid-column: 1 / -1; }
  .mini b { font-size: 12px; }  /* touch screens are read closer up: one size up from desktop */
}
@media (max-width: 760px) {
  .feature-grid { grid-template-columns: 1fr; }
  .fcard.wide { flex-direction: column; }
  .venn { flex: none; }
  .ftop { min-height: 0; padding: 22px 20px; }
  .fbody { padding: 24px 22px 28px; }
}

.compare-sec { padding: var(--sec-y) 0; }
.compare-sec .lead { margin: 18px auto 48px; }
.compare { width: 100%; border-collapse: collapse; }
.compare th { text-align: left; font: 600 18px var(--sans); color: var(--ink); padding: 0 18px 18px; vertical-align: bottom; }
.compare th.us { text-align: center; }
.compare th.us img { height: 32px; width: auto; }
.compare td { padding: 26px 18px; border-top: 1px solid #D9D0FF; vertical-align: middle; font-size: 17px; }
.compare td:first-child { color: var(--ink); width: 26%; }
.compare td.us { background: #EEF9FF; font-weight: 600; color: var(--ink); text-align: center; width: 40%; }
.compare tr:last-child td { border-bottom: 1px solid #D9D0FF; }
.compare .yes, .compare .no { display: inline-flex; align-items: center; gap: 12px; text-align: left; }
.compare .yes svg { width: 22px; height: 22px; fill: none; stroke: var(--violet); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.compare .no { color: var(--muted); }
.compare-apps { margin-top: 48px; text-align: center; }
.compare-apps .eyebrow { margin-bottom: 22px; }
.compare-apps .logo-row { justify-content: center; gap: 24px 40px; }
.compare-apps .src { min-height: 24px; }  /* small logos (Traktor) still get a 24px target; the row looks the same */
/* touch screens: 44px tap areas, rows touching, same as the logo rows on How it works */
@media (pointer: coarse) {
  .compare-apps .logo-row { row-gap: 0; }
  .compare-apps .logo-row .src { min-height: 44px; min-width: 44px; justify-content: center; }
}
.compare .no svg { width: 18px; height: 18px; fill: none; stroke: #A9A2C8; stroke-width: 2.6; stroke-linecap: round; flex: none; }
/* phones: each row's label becomes a small title over its two answers (Digger Digger | generic), so no column is lost */
@media (max-width: 760px) {
  .compare-sec h2 { font-size: clamp(20px, 6.6vw, 30px); }  /* the phone h2 size, a bit smaller below 365px so "Designed for diggers," keeps its line */
  .compare, .compare thead, .compare tbody { display: block; }
  .compare tr { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .compare th { padding: 0 10px 14px; font-size: 15px; }
  .compare th:first-child { display: none; }
  .compare th.us { text-align: left; }
  .compare th.us img { height: 26px; }
  .compare td { padding: 14px 10px; border-top: 0; font-size: 15px; }
  .compare td:first-child {
    grid-column: 1 / -1; width: auto; padding: 20px 0 10px; border-top: 1px solid #D9D0FF;
    font: 700 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  }
  .compare td.us { width: auto; text-align: left; }
  .compare tr:last-child td { border-bottom: 0; }
  .compare tbody tr:last-child { border-bottom: 1px solid #D9D0FF; }
  .compare .yes, .compare .no { align-items: flex-start; gap: 8px; }
  .compare .no svg { margin-top: 2px; }
}

/* blog: photo cards with a "pixel" corner (two white squares step into the top-left corner) */
.blog-sec { --cut-bg: var(--ink); padding: calc(var(--sec-y) + 6px) 0; background: var(--ink); color: #fff; }
.blog-sec h1, .blog-sec h2, .blog-sec .post h3 { color: #fff; }
.blog-sec .eyebrow, .blog-sec .post-tag { color: #FF7BE9; }
.blog-sec .post p { color: #D9D2F5; }
.blog-sec .post-meta { color: #A99FD0; }
.blog-sec .pill.outline { color: #fff; border-color: rgba(255, 255, 255, .55); background: transparent; }
.blog-sec .pill.outline:hover { border-color: #fff; }
.blog-sec:not(.light) :focus-visible { outline-color: #fff; }  /* the violet ring is too faint on the dark block */
/* the blog page itself is light; the home page's blog block and "Keep reading" under articles stay dark */
.blog-sec.light { --cut-bg: var(--bg); padding: 56px 0 0; background: var(--bg); color: var(--text); }
.blog-sec.light h1, .blog-sec.light .post h3 { color: var(--ink); }
.blog-sec.light .eyebrow { color: var(--accent-soft); }
.blog-sec.light .post-tag { color: var(--pink-text); }
.blog-sec.light .post p { color: var(--text); }
.blog-sec.light .post-meta { color: var(--muted); }
.blog-sec.light .chip { background: #fff; border-color: #D9D0FF; color: var(--ink); }
.blog-sec.light .chip:hover { background: var(--bg-2); }
.blog-sec.light .chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 56px; }
.pager .chip { min-width: 44px; padding: 10px 14px; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.blog-sec .chip { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.blog-sec .chip:hover { background: rgba(255, 255, 255, .1); }
.blog-sec .chip.on { background: #fff; color: var(--ink); border-color: #fff; }
.blog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.blog-head h1, .blog-head h2 { margin-top: 10px; }
@media (max-width: 760px) { .blog-sec.light { padding-top: 40px; } .blog-head { margin-bottom: 32px; } }
@media (pointer: coarse) { .blog-tags .chip, .pager .chip, .blog-head .pill { min-height: 44px; } }  /* touch: 44px tall */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.post { display: flex; flex-direction: column; gap: 14px; color: inherit; text-decoration: none; }
.post h3 { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.25; text-wrap: balance; }
.post p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.55; text-wrap: pretty; }
.post:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 12px; font: 400 13px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.post-tag { color: var(--pink-text); }
.post-img { --cut: 13%; --ratio: .75; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }
.post-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.post-img::before, .post-img::after { content: ""; position: absolute; z-index: 1; width: var(--cut); aspect-ratio: 1; background: var(--cut-bg, #fff); }
.post-img::before { left: var(--cut); top: 0; }
.post-img::after { left: 0; top: calc(var(--cut) / var(--ratio)); }
/* post grids: 3 columns; 2 on tablets, where an odd last card takes the whole row (photo left, text right);
   1 on phones, where the home page's three posts and "Keep reading" become a row that swipes sideways */
@media (max-width: 1000px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 561px) and (max-width: 1000px) {
  .post-grid > .post:last-child:nth-child(odd) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; gap: 14px 32px; }
  .post-grid > .post:last-child:nth-child(odd) .post-img { grid-row: 1 / span 3; align-self: start; }
}
@media (max-width: 560px) {
  .post-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .blog-sec:not(.light) .post-grid {
    display: flex; gap: 14px; margin: -4px calc(var(--gutter) * -1); padding: 4px var(--gutter);  /* 4px: room for the focus ring */
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .blog-sec:not(.light) .post-grid::-webkit-scrollbar { display: none; }
  .blog-sec:not(.light) .post { flex: 0 0 calc(100% - 36px); scroll-snap-align: start; }  /* the next post peeks in at the edge */
}
.article { max-width: 760px; margin: 0 auto; padding: 56px var(--gutter) 96px; }
.article h1 { margin: 14px 0 16px; font-size: clamp(32px, 4vw, 48px); line-height: 1.12; text-wrap: balance; }
.article .post-img { --cut: 8%; --ratio: .5625; aspect-ratio: 16 / 9; margin-top: 32px; }
.back { display: inline-block; margin-bottom: 26px; font-size: 15px; color: var(--violet-text); text-decoration: none; }
.back:hover { text-decoration: underline; }
.credit { margin: 10px 0 34px; font-size: 13px; color: var(--muted); }
.credit a, .article-body figcaption a { color: inherit; text-underline-offset: 2px; }
.article-body h3, .article-body h2 { margin: 38px 0 10px; font-size: 22px; line-height: 1.2; }  /* sections: h2 under the title */
.article-body p, .article-body li { font-size: 18px; line-height: 1.7; color: var(--text); text-wrap: pretty; }
.article-body p { margin: 0 0 .85em; }  /* space between paragraphs (the global p reset had removed it) */
.article-body li + li { margin-top: 6px; }
.article-body ul { padding-left: 22px; }
.article-body a { color: var(--violet-text); text-underline-offset: 3px; }
/* a photo inside a news post (tools/blogimg.py): the column's width, its own shape, caption and credit under it */
.article-body figure { margin: 30px 0 34px; }
.article-body figure img { display: block; width: 100%; height: auto; background: var(--ink); }
.article-body figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
/* a YouTube video in a post: its picture with a play button; pressed, the player takes its place (app.js renderPost) */
.article-body .video .yt, .article-body .video iframe { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--ink); }
.article-body .video .yt img { height: 100%; object-fit: cover; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 54px; translate: -50% -50%; background: var(--pink); transition: background .15s; }
.yt-play::after { content: ""; position: absolute; left: 50%; top: 50%; translate: -35% -50%; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-play, .yt:focus-visible .yt-play { background: var(--violet); }
@media (max-width: 560px) { .yt-play { width: 60px; height: 44px; } }
.article-body ol { padding-left: 22px; }
.article-body .table-wrap {
  overflow-x: auto; margin: 18px 0 28px;
  /* a table wider than its box scrolls inside it: a soft shadow shows on the side that has more */
  background:
    linear-gradient(90deg, var(--bg) 40%, rgba(255, 255, 255, 0)) left / 36px 100% no-repeat local,
    linear-gradient(270deg, var(--bg) 40%, rgba(255, 255, 255, 0)) right / 36px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(20, 9, 58, .18), transparent) left / 14px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(20, 9, 58, .18), transparent) right / 14px 100% no-repeat;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.article-body th, .article-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { font: 500 12px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.article-body p.note { font-size: 14px; color: var(--muted); }
@media (max-width: 560px) {
  .article-body th { white-space: normal; }
  .article-body th, .article-body td { padding: 9px 8px; }
  .article-body th:first-child, .article-body td:first-child { padding-left: 0; }
  /* wide tables (marked .stack by renderPost): one card per row, each value next to its column name */
  .article-body .stack, .article-body .stack tbody, .article-body .stack tr { display: block; }
  .article-body .stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .article-body .stack tr { padding: 14px 0 12px; border-top: 1px solid var(--line); }
  .article-body .stack tr:last-child { border-bottom: 1px solid var(--line); }
  .article-body .stack td { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; padding: 4px 0; border: 0; }
  .article-body .stack td::before { content: attr(data-label); content: attr(data-label) / ""; font: 500 12px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .article-body .stack td:first-child { display: block; padding: 0 0 6px; font-size: 17px; font-weight: 700; color: var(--ink); }
  .article-body .stack td:first-child::before { content: none; }
}

/* article page: contents left, article centre, share + styles + account right. Both sides stay in view
   while the article scrolls (wide screens); the contents fold into the article below 1280px, the right
   column moves under the article below 1000px. */
.post-layout {
  display: grid; grid-template-columns: 200px minmax(0, 720px) 260px; justify-content: center; gap: 0 44px;
  max-width: 1340px; margin: 0 auto; padding: 0 var(--gutter) 72px;
}
.post-layout .article { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding: 56px 0 24px; }
.post-toc { grid-column: 1; grid-row: 1; padding-top: 56px; }
.post-side { grid-column: 3; grid-row: 1; padding-top: 56px; }
/* 100px from the top; a column taller than the screen (--side-h, measured by renderPost) first scrolls with the
   page until its end shows, then stays: nothing is cut off on short laptop screens. Its end stays 76px up,
   clear of the back-to-top button. */
.side-sticky {
  position: sticky; top: min(100px, calc(100vh - var(--side-h, 0px) - var(--bar-h) - 76px));
  top: min(100px, calc(100svh - var(--side-h, 0px) - var(--bar-h) - 76px));
}
.side-label { margin-bottom: 14px; font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.article-body h3, .article-body h2 { scroll-margin-top: 96px; }
.toc-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc-list a {
  display: block; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent;
  color: var(--muted); font-size: 14px; line-height: 1.35; text-decoration: none; transition: color .15s, border-color .15s;
}
.toc-list a:hover { color: var(--violet-text); }
.toc-list a.on { color: var(--ink); font-weight: 600; border-left-color: var(--pink); }
.toc-inline { display: none; margin: 0 0 30px; border: 1px solid var(--line); background: var(--bg-2); }
.toc-inline summary {
  display: flex; justify-content: space-between; align-items: center; padding: 15px 16px; cursor: pointer; list-style: none;
  font: 400 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; font: 400 20px/1 var(--sans); color: var(--violet-text); transition: transform .2s; }
.toc-inline[open] summary::after { transform: rotate(45deg); }
.toc-inline .toc-list { margin: 0 16px 16px; }
.share-row { display: flex; flex-wrap: wrap; gap: 6px; }  /* 6px: all 7 icons fit the 260px column on one line */
.share-btn {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0;
  background: var(--tint); color: var(--violet-text); cursor: pointer; text-decoration: none; transition: background .15s, color .15s;
}
.share-btn:hover, .share-btn:focus-visible { background: var(--violet); color: #fff; }
.share-btn .si { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.share-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share-native { width: 100%; justify-content: center; margin-bottom: 10px; }
.share-native svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share-msg { min-height: 1.3em; margin: 8px 0 0; font: 400 12px/1.3 var(--mono); color: var(--green-text); overflow-wrap: anywhere; }
.side-box { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--line); }
.mini-styles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.mini-style { --c: #FF2BD6; display: block; color: var(--ink); text-decoration: none; }
.mini-style.c2 { --c: #00D68F; } .mini-style.c3 { --c: #7B3CFF; } .mini-style.c4 { --c: #00C2FF; }
.mini-poster { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c); }
.mini-poster img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .3s; }
@media (hover: hover) { .mini-style:hover .mini-poster img { transform: scale(1.06); } }  /* no zoom left behind after a tap */
.mini-name { display: block; margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.25; }
.mini-style:hover .mini-name { color: var(--violet-text); }
.side-more { display: inline-block; margin-top: 14px; font-size: 14px; color: var(--violet-text); text-decoration: none; }
.side-more:hover { text-decoration: underline; }
.join h4, .join h3 { margin: 0 0 8px; font: 700 18px/1.25 var(--mono); color: var(--ink); letter-spacing: normal; }
.join p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.join .linklike { margin-top: 12px; font-size: 14px; }
.join .pill { width: 100%; justify-content: center; }
@media (max-width: 1279px) {
  .post-layout { grid-template-columns: minmax(0, 720px) 250px; gap: 0 40px; }
  .post-layout .article { grid-column: 1; }
  .post-side { grid-column: 2; }
  .post-toc { display: none; }
  .toc-inline { display: block; }
  .share-row { gap: 4px; }  /* all 7 icons on one line in the 250px column */
}
/* touch: 44px targets; the small text links keep their look and get a taller hit area */
@media (pointer: coarse) {
  .share-btn { width: 44px; height: 44px; }
  .share-row { gap: 8px; }
  .share-native { min-height: 44px; }
  .article .back { padding: 12px 0; margin: -12px 0 14px; }
  .side-more { padding: 12px 0; margin: 2px 0 -12px; }
  .join .linklike { padding: 12px 0; margin: 0 0 -12px; }
  .toc-inline .toc-list a { padding-top: 12px; padding-bottom: 12px; font-size: 15px; }
}
@media (max-width: 999px) {
  .post-layout { display: block; max-width: 768px; padding-bottom: 64px; }
  .post-side { margin-top: 16px; padding-top: 28px; border-top: 1px solid var(--line); }  /* a line closes the article */
  .side-sticky { position: static; max-height: none; overflow: visible; }
  .share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }  /* the Share button and the icons on one line */
  .share .side-label { flex: 0 0 100%; margin-bottom: 6px; }
  .share-native { width: auto; margin: 0; padding: 0 26px; min-height: 44px; }
  .share-msg { flex: 0 0 100%; margin: 0; }
  .share-btn { width: 44px; height: 44px; }
  .share-row { gap: 8px; }
  .mini-styles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .join { max-width: 420px; }
}
@media (max-width: 560px) {
  .post-layout .article { padding-top: 32px; }
  .article h1 { font-size: clamp(24px, 6.7vw, 30px); line-height: 1.15; }  /* long titles in 3 or 4 lines */
  .article-body p, .article-body li { line-height: 1.65; }
  .mini-styles { grid-template-columns: 1fr 1fr; }
  .share-native { flex: 1 0 100%; }
  .share-row { flex: 1 0 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }  /* the 7 icons fill the width */
  .share-btn { width: auto; }
}

.cta-wrap { padding: var(--sec-y) var(--gutter) 20px; }
.cta {
  position: relative; border-radius: 0; padding: 80px var(--gutter); text-align: center;
  background:
    radial-gradient(50% 120% at 0% 0%, rgba(255, 43, 214, .16) 0, transparent 70%),
    radial-gradient(50% 120% at 100% 100%, rgba(0, 194, 255, .18) 0, transparent 70%), var(--tint);
}
.cta-shape { position: absolute; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(123, 60, 255, .25)); animation: floaty 6s ease-in-out infinite alternate; }
.cta-shape.c2 { animation-delay: -3s; }
.cta-shape.c1 { width: 170px; left: -50px; top: -60px; transform: rotate(-12deg); }
.cta-shape.c2 { width: 150px; right: -30px; bottom: -50px; }
.cta h2 { font-size: clamp(28px, 3.4vw, 42px); }
.cta p { font-size: 20px; color: var(--text); margin: 14px 0 34px; }
/* below 1280px the banner reaches the page margin: the shapes move in so the screen edge doesn't cut them */
@media (max-width: 1279px) {
  .cta-shape.c1 { width: 150px; left: -18px; top: -56px; }
  .cta-shape.c2 { width: 130px; right: -18px; bottom: -46px; }
}
@media (max-width: 760px) {
  .cta { padding: 64px var(--gutter); }
  .cta-shape.c1 { width: 100px; left: -12px; top: -42px; }
  .cta-shape.c2 { width: 90px; right: -12px; bottom: -34px; }
  .cta p { font-size: 17px; margin: 12px 0 28px; }
}

.footer { padding: 70px var(--gutter) 36px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; }
.footer .flogo { font: 400 36px/1.05 'Rubik Puddles', var(--sans); color: var(--ink); text-transform: uppercase; text-decoration: none; }  /* same font as the tapes */
.footer .flogo:hover { color: var(--pink-text); }
.footer .brand p { color: var(--muted); margin-top: 14px; font-size: 15px; }
.footer .fsoc { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 0 -10px; }  /* Instagram, Reddit: logos in a row, the first lined up with the text */
.footer .fsoc a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; color: var(--violet-text); }
.footer .fsoc a:hover { color: var(--pink-text); }
.footer .fsoc i { display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.fcol h2 { margin: 8px 0 18px; font: 500 18px var(--sans); color: var(--ink); letter-spacing: normal; }
.fcol a, .fcol button { display: block; color: var(--violet-text); text-decoration: none; font-size: 16px; margin-bottom: 12px; }
.fcol a:hover { text-decoration: underline; }
.fbottom { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px 30px; align-items: center; margin-top: 50px; color: var(--muted); font-size: 14px; }
/* tablets: the name on top, the three link columns side by side */
@media (max-width: 1000px) {
  .footer { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; padding-top: 56px; }
  .footer .brand { grid-column: 1 / -1; }
  .fbottom { margin-top: 30px; padding-right: 56px; }  /* the last line never runs under "Back to top" */
}
/* touch screens: each link is a 44px row */
@media (pointer: coarse) {
  .fcol h2 { margin: 8px 0 6px; }
  .fcol a, .fcol button { padding: 10px 0; margin: 0; line-height: 1.5; }
}
/* phones: Product on the left, Explore and Support on the right */
@media (max-width: 560px) {
  .footer { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; padding-top: 48px; padding-bottom: 28px; }
  .footer .fcol:nth-child(2) { grid-row: span 2; }
  .footer .flogo { font-size: 32px; }
  .fbottom { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 18px; font-size: 13px; }
}

/* list pages (styles, free downloads, IDs) */
.page-head { padding: 34px var(--gutter) 10px; }
.back { color: var(--muted); text-decoration: none; font-size: 14px; }
.back:hover { color: var(--ink); }
.page-head .eyebrow { margin-top: 24px; }
.page-head h1 { margin: 10px 0 8px; }
.page-head h1.style-title { margin-top: 30px; }
/* touch: "← All styles" gets a finger-sized hit area; the title moves up by the same amount */
@media (pointer: coarse) {
  .page-head .back { display: inline-flex; align-items: center; min-height: 44px; }
  .page-head h1.style-title { margin-top: 19px; }
}
/* phones: no empty band above "All styles" and the title, so the buttons and first tracks reach the first screen */
@media (max-width: 760px) {
  .page-head { padding-top: 8px; }
  .page-head .back { display: inline-flex; align-items: center; min-height: 44px; }
  .page-head h1.style-title { margin-top: 2px; text-wrap: balance; }
}
/* hero of the lists across every style (Must-have...): like a style card, full width */
.col-hero { position: relative; overflow: hidden; background: var(--c, #FF2BD6); min-height: clamp(300px, 24vw, 380px); }
.col-hero-text { position: relative; z-index: 2; padding-top: clamp(28px, 3vw, 44px); padding-bottom: 32px; }
.col-eyebrow { font: 400 13px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(20, 9, 58, .25); }
.col-title {
  width: fit-content; max-width: min(42vw, 620px); margin: 14px 0 0; color: #fff; text-transform: uppercase;
  font: 700 clamp(56px, 7.4vw, 124px)/.82 var(--sans); letter-spacing: -.05em; text-shadow: 0 2px 18px rgba(20, 9, 58, .18);
}
.col-title.long { font-size: clamp(48px, 6.2vw, 100px); }  /* long names (Free downloads) stay clear of the artists */
.col-lead { margin: 20px 0 0; max-width: min(440px, 42vw); color: #fff; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; text-shadow: 0 1px 10px rgba(20, 9, 58, .25); }
/* the artists fill the right side, top to bottom; the text stays on the left */
.col-art { position: absolute; right: 0; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: 50%; object-fit: contain; object-position: right bottom; }
.col-jump { max-width: min(540px, 42vw); margin-top: 22px; }
.col-jump button { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .45); color: #fff; font-weight: 500; transition: background .15s, color .15s; }
.col-jump button:hover { background: #fff; border-color: #fff; color: var(--ink); }
.col-hero.dark .col-eyebrow, .col-hero.dark .col-title, .col-hero.dark .col-lead { color: var(--ink); text-shadow: none; }
.col-hero.dark .col-jump button { background: rgba(255, 255, 255, .35); border-color: rgba(20, 9, 58, .3); color: var(--ink); }
.col-hero.dark .col-jump button:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-head.after-hero { padding-top: 26px; }
.page-head.after-hero .toolbar { margin-top: 0; }
@media (max-width: 760px) { .page-head:empty { display: none; } }  /* signed out, the head under a hero has no toolbar: no empty white band on phones */
@media (max-width: 760px) {
  .col-hero { min-height: 0; display: flex; flex-direction: column; }
  .col-hero-text { padding-bottom: 8px; }
  .col-lead, .col-jump { max-width: none; }
  .col-title { white-space: normal; font-size: clamp(56px, 17vw, 90px); }
  .col-art { position: relative; width: 100%; max-width: none; height: auto; margin-top: -10px; }
}
/* style pages: "All styles", the name and the numbers on a full-width band in the style's colour, the one of its
   home card (app.js renderListPage; tools/pages.py writes the same band). Text in white, except where white is too
   faint: everything in ink on mint and cyan, and the small lines in ink on pink (the big white title is fine there). */
.style-band { --c: #FF2BD6; background: var(--c); }
.style-band.c1 { --c: #FF2BD6; } .style-band.c2 { --c: #00D68F; } .style-band.c3 { --c: #7B3CFF; } .style-band.c4 { --c: #00C2FF; }
.style-band > .page-head { padding-top: 34px; padding-bottom: 30px; }
.style-band .back, .style-band .meta, .style-band .style-title { color: #fff; }
.style-band .back:hover { text-decoration: underline; }
.style-band .style-title { text-shadow: 0 2px 18px rgba(20, 9, 58, .18); }
.style-band.c2 .style-title, .style-band.c4 .style-title { color: var(--ink); text-shadow: none; }
.style-band.c1 .back, .style-band.c1 .meta, .style-band.c2 .back, .style-band.c2 .meta, .style-band.c4 .back, .style-band.c4 .meta { color: var(--ink); }
.style-band :focus-visible { outline-color: var(--ink); }
@media (max-width: 760px) { .style-band > .page-head { padding-top: 12px; padding-bottom: 22px; } }
.crate-about { padding: 10px var(--gutter) 60px; }
.crate-about h2 { font-size: clamp(20px, 2vw, 24px); margin: 0 0 12px; }
.crate-about p { color: var(--text); font-size: 16px; line-height: 1.6; margin: 0 0 12px; max-width: 760px; }
.crate-about a { font-size: 15px; }
@media (pointer: coarse) { .crate-about a { display: inline-flex; align-items: center; min-height: 44px; } }  /* finger-sized link */
/* readable summary written into the HTML by tools/pages.py; the app replaces it as soon as it runs */
.seo-static { padding: 50px var(--gutter) 40px; }
.seo-static ol, .seo-static ul { padding-left: 22px; line-height: 1.7; }
.page-head .meta { margin-top: 12px; font: 400 13px var(--mono); color: var(--violet-text); }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 26px; }
.chip {
  background: #fff; border: 1px solid #D9D0FF; color: var(--ink); padding: 7px 14px;
  border-radius: 0; cursor: pointer; font-size: 14px; font-weight: 500;
}
.chip:hover { background: var(--bg-2); }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.toolbar #q {
  margin-left: auto; width: 260px; padding: 10px 16px; border-radius: 0; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--text); font: inherit;
}
.toolbar #q:focus { outline: 2px solid rgba(123, 60, 255, .4); }
.jump { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.jump button { background: var(--bg-2); border: 1px solid var(--row); color: var(--muted); font-size: 13px; padding: 5px 11px; border-radius: 0; cursor: pointer; }
.jump button:hover { color: var(--ink); border-color: #D9D0FF; }
/* list pages without a hero (Free downloads, Famous IDs): centred head, styles and buttons on one line */
.page-head.col-head { text-align: center; }
.page-head.col-head .lead { margin-left: auto; margin-right: auto; }
.head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 26px; text-align: left; }
.head-row .jump, .head-row .toolbar { margin-top: 0; }
.head-row .toolbar { margin-left: auto; }
.toolbar .filters { display: contents; }  /* the four filter chips sit in the toolbar like any button; phones: their own row (below) */
/* BPM and key (style pages): their own line under the toolbar, "Any key" then the tempo ranges; phones: a row that scrolls */
.toolbar .tempo { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tempo .bpms { display: contents; }
.tempo .chip { font: 500 13px var(--mono); }
.keysel {
  -webkit-appearance: none; appearance: none; border: 1px solid #D9D0FF; border-radius: 0; padding: 7px 32px 7px 12px; cursor: pointer;
  font: 500 13px var(--mono); color: var(--ink); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314093A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 7px;
}
.keysel:hover { background-color: var(--bg-2); }
.keysel.on { color: #fff; border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E"); }
.keysel option { color: var(--ink); background: #fff; }
@media (pointer: coarse) { .keysel { min-height: 44px; } }
/* touch screens: finger-sized chips. The 16 style chips in the hero of Must-have and Classics keep their size on
   tablets (a compact list in a narrow column, well above the 24px minimum); on phones they scroll sideways (below) */
@media (pointer: coarse) { .toolbar .chip, .jump:not(.col-jump) button { min-height: 44px; } }
@media (pointer: coarse) { .toolbar #q { padding-top: 9px; padding-bottom: 9px; } }  /* 44px, the height of the chips and buttons beside it */
/* tablets: the filters and a wider search fill the first line, so Play all and Send always share the second
   (at 820-1000px "Send" used to wrap alone) */
@media (min-width: 761px) and (max-width: 1000px) { .toolbar .filters + #q { flex: 1 1 calc(100% - 400px); width: auto; } }
/* phones: Play all + Send share the first line, the search the second, then the filters and the sections as rows
   that scroll sideways (the chip cut at the edge and the fade say there is more), instead of a screen of chips */
@media (max-width: 760px) {
  .page-head .meta { margin-top: 8px; line-height: 1.5; }
  .toolbar { margin-top: 18px; }
  .toolbar .pill { order: 1; flex: 1 1 auto; min-height: 46px; padding: 10px 12px; }
  .toolbar #q { order: 2; width: 100%; margin-left: 0; }
  .toolbar .filters { order: 3; display: flex; flex: 1 1 100%; gap: 8px; }
  .toolbar .tempo { order: 4; }
  .toolbar .filters, .toolbar .tempo, .jump {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
    contain: inline-size;  /* the long row must not widen the text around it (it scrolls instead) */
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter) 32px; scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to left, transparent, #000 32px); mask-image: linear-gradient(to left, transparent, #000 32px);
  }
  .toolbar .filters::-webkit-scrollbar, .toolbar .tempo::-webkit-scrollbar, .jump::-webkit-scrollbar { display: none; }
  .toolbar .chip, .jump button, .toolbar .keysel { flex: none; min-height: 44px; white-space: nowrap; scroll-snap-align: start; }
  .jump button { max-width: 80vw; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
  .head-row { flex-direction: column; align-items: stretch; gap: 14px; }  /* Famous IDs: buttons first, like the style pages */
  .head-row .toolbar { order: -1; margin-left: 0; }
}
/* phones held sideways (short screens): the same tight head, so the tracks are not a full screen away */
@media (orientation: landscape) and (max-height: 500px) {
  .page-head { padding-top: 8px; }
  .page-head h1.style-title { margin-top: 2px; }
  .toolbar { margin-top: 16px; }
}

.list { padding: 0 var(--gutter) 50px; }
/* sign-in panel over the preview rows of a locked list */
.gate {
  position: relative; text-align: center; margin-top: -120px; padding: 120px var(--gutter) 40px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 120px);
}
.gate h2 { font-size: clamp(26px, 3vw, 36px); margin: 12px 0; }
.gate p { color: var(--text); max-width: 560px; margin: 0 auto 26px; font-size: 17px; line-height: 1.55; }
.gbtn {
  display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; cursor: pointer;
  background: #fff; border: 1px solid #DADCE0; border-radius: 0; color: #1F1F1F; font: 500 16px var(--sans);
  box-shadow: 0 6px 20px rgba(20, 9, 58, .08); transition: border-color .15s, box-shadow .15s;
}
.gbtn.wide { width: 100%; justify-content: center; }
.gbtn.dark { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 8px 24px rgba(20, 9, 58, .25); }
.gbtn.dark:hover { background: var(--violet); border-color: var(--violet); }
.hero-msg { min-height: 1.4em; margin: 14px 0 0; font: 400 13px/1.4 var(--mono); color: var(--pink-text); text-align: center; }
.hero-msg.ok { color: var(--green-text); }
.gate-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.gate-actions .pill { padding-top: 0; padding-bottom: 0; align-self: stretch; }
.gbtn:hover { border-color: var(--violet); box-shadow: 0 8px 28px rgba(123, 60, 255, .18); }
.gbtn svg { width: 20px; height: 20px; display: block; }
.gate .gate-msg { min-height: 1.4em; margin: 16px auto 0; font: 400 13px var(--mono); color: var(--pink-text); }
@media (max-width: 760px) {
  .gate { margin-inline: calc(-1 * var(--gutter)); }  /* full width, like the rows it fades out */
  .list.locked { padding-bottom: 24px; }
}
@media (max-width: 560px) {  /* phones: the two sign-in buttons stack at full width (the email one no longer shrinks to a thin line) */
  .gate { margin-top: -96px; padding-top: 96px; padding-bottom: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #fff 96px); }
  .gate h2 { text-wrap: balance; }
  .gate p { font-size: 16px; text-wrap: pretty; }
  .gate-actions { flex-direction: column; align-items: stretch; max-width: 360px; margin: 0 auto; }
  .gate-actions .gbtn, .gate-actions .pill { justify-content: center; min-height: 52px; padding: 12px 20px; }
}
.list h3, .list .sec-title {  /* section titles (h2 for screen readers' outline, same small label look) */
  margin: 34px 0 4px; font: 400 12px/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-soft);
  scroll-margin-top: 100px; display: flex; align-items: center; gap: 14px;
}
.list h3 a { font: 500 13px var(--sans); letter-spacing: 0; text-transform: none; text-decoration: none; }
.more-rows {
  display: block; width: 100%; margin: 6px 0 4px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 0;
  background: var(--bg-2); color: var(--violet-text); font: 500 14px var(--sans); cursor: pointer; transition: background .15s, border-color .15s;
}
.more-rows:hover { background: var(--tint); border-color: #D9D0FF; }
.list .about { color: var(--muted); font-size: 14px; margin: 2px 0 10px; }
/* section title with its own buttons */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 34px 0 4px; }
.sec-head h3, .sec-head .sec-title { margin: 0; }
/* style banner on the lists across every style (like the style card, wide and short) */
.style-banner {
  position: relative; display: block; overflow: hidden; height: clamp(150px, 15vw, 210px); margin: 48px 0 0;
  background: var(--c, #FF2BD6); text-decoration: none; scroll-margin-top: 100px;
}
.sb-word {
  position: absolute; top: 18px; left: 22px; z-index: 2; max-width: 42%; color: #fff; text-transform: uppercase;
  font: 700 clamp(28px, 4.2vw, 58px)/.86 var(--sans); letter-spacing: -.05em; text-shadow: 0 2px 18px rgba(20, 9, 58, .2);
}
.sb-art { position: absolute; right: 0; bottom: 0; z-index: 1; height: 100%; width: auto; max-width: none; }
.sb-btn {
  position: absolute; left: 22px; bottom: 18px; z-index: 2; padding: 10px 16px; background: #fff; color: var(--ink);
  font: 500 15px/1.2 var(--sans); transition: background .15s, color .15s;
}
.style-banner:hover .sb-btn { background: var(--ink); color: #fff; }
.sec-head.under-banner { justify-content: flex-end; margin: 10px 0 4px; }
/* Openers & closers: under each style's banner, its two lists, each with its own small title and buttons */
.sec-head.pair-head { align-items: center; margin: 30px 0 4px; }
.style-banner + .sec-head.pair-head, .style-banner + .visually-hidden + .sec-head.pair-head { margin-top: 14px; }
@media (max-width: 560px) {
  .sb-word { max-width: 60%; top: 14px; left: 14px; }
  .sb-btn { left: 14px; bottom: 14px; font-size: 13px; padding: 8px 12px; }
}
.sec-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sec-btn {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--violet-text);
  font: 500 13px var(--sans); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.sec-btn:hover { background: var(--tint); border-color: #D9D0FF; }
.sec-btn.in { background: var(--green); border-color: var(--green); color: var(--ink); }
.sec-btn.on, .pill.outline.on { background: var(--violet); border-color: var(--violet); color: #fff; }
@media (pointer: coarse) { .sec-btn { min-height: 44px; } }  /* finger-sized on touch screens */
@media (max-width: 760px) {  /* phones: "+ Select all" and "Add all to my crate" share the width under the section title */
  .sec-actions { flex: 1 1 100%; flex-wrap: nowrap; }
  .sec-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 7px 8px; white-space: normal; line-height: 1.25; }
  .sec-btn.crate-btn { justify-content: center; }
}
/* row buttons: + picks a track for the next send, the crate button saves it to My crate */
.crate-add {
  width: 32px; height: 32px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--muted);
}
.crate-add svg, .sec-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.crate-add:hover { color: var(--ink); border-color: #D9D0FF; }
.crate-add.in { background: var(--green); border-color: var(--green); color: var(--ink); box-shadow: 0 4px 14px rgba(0, 214, 143, .4); }
.add.on { background: var(--violet); border-color: var(--violet); color: #fff; font-weight: 800; box-shadow: 0 4px 14px rgba(123, 60, 255, .35); }
.row .right [data-tip] { position: relative; }
@media (hover: hover) {  /* mouse only: on a touch screen the tip would stay stuck on the last tapped button */
  .row .right [data-tip]:hover::after {
    content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 5; pointer-events: none;
    white-space: nowrap; padding: 6px 9px; background: var(--ink); color: #fff; font: 500 12px/1.2 var(--sans);
  }
}
.sec-btn.crate-btn { display: inline-flex; align-items: center; gap: 6px; }
.sec-btn.crate-btn svg { width: 16px; height: 16px; }
.sel-bar {
  position: fixed; left: 0; right: 0; bottom: var(--bar-h); z-index: 36; display: flex; align-items: center;
  justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; background: var(--ink); color: #fff; box-shadow: 0 -10px 30px rgba(20, 9, 58, .2);
  padding: 12px max(var(--gutter), env(safe-area-inset-right, 0px)) calc(12px + var(--sel-pad)) max(var(--gutter), env(safe-area-inset-left, 0px));
}
.sel-n { font: 500 15px var(--sans); }
.sel-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sel-bar .pill.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.sel-bar .pill:disabled { opacity: .45; cursor: default; }
.sel-bar :focus-visible { outline-color: #fff; }
/* --sel-h: the room the page and "Back to top" keep for the bar. With no player under it, the bar clears the iPhone home bar itself. */
body { --sel-pad: var(--safe-b); }
body.playing { --sel-pad: 0px; }
body.selecting { --sel-h: calc(64px + var(--sel-pad)); }
@media (pointer: coarse) { body.selecting { --sel-h: calc(68px + var(--sel-pad)); } }
/* phones: the count on top, the two buttons full width under it */
@media (max-width: 760px) {
  .sel-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-top: 10px; padding-bottom: calc(10px + var(--sel-pad)); }
  .sel-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sel-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  body.selecting { --sel-h: calc(94px + var(--sel-pad)); }
}
/* phones on their side: back to one thin row */
@media (max-height: 500px) and (min-width: 561px) {
  .sel-bar { display: flex; padding-top: 8px; padding-bottom: calc(8px + var(--sel-pad)); }
  .sel-actions { display: flex; }
  body.selecting { --sel-h: calc(60px + var(--sel-pad)); }
}
.send-what { margin: 6px 0 0; font: 400 13px/1.4 var(--mono); color: var(--violet-text); }
/* back to top, bottom right, above the player and the selection bar when they show */
.to-top {
  position: fixed; right: calc(20px + env(safe-area-inset-right, 0px)); bottom: calc(max(var(--bar-h) + var(--sel-h), var(--safe-b)) + 20px);
  z-index: 35; width: 48px; height: 48px;
  display: grid; place-items: center; border: 0; border-radius: 0; background: var(--ink); color: #fff; cursor: pointer;
  box-shadow: 0 10px 30px rgba(20, 9, 58, .25); opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .2s, transform .2s, background .15s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
/* touch screens: only while scrolling back up (or at the end of the page), so it doesn't cover the track buttons */
@media (hover: none) { .to-top.show:not(.up) { opacity: 0; transform: translateY(10px); pointer-events: none; } }
.to-top:hover { background: var(--violet); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .to-top { right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(max(var(--bar-h) + var(--sel-h), var(--safe-b)) + 12px); width: 44px; height: 44px; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
.row {
  display: grid; grid-template-columns: 30px 46px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 9px 12px; border-bottom: 1px solid var(--row); border-radius: 0; transition: background .15s;
}
.row.playable { cursor: pointer; }
@media (hover: hover) { .row:hover { background: var(--bg-2); } }  /* touch screens: no colour stuck on the last tapped row */
.row.now { background: #FDEBFB; box-shadow: inset 3px 0 0 var(--pink); }
.row.now .title { color: var(--pink-text); }
.num { color: var(--muted); text-align: right; font: 400 12px var(--mono); }
.num.star { color: var(--pink); font-size: 26px; line-height: 1; text-align: center; }
@media (max-width: 760px) { .num.star { font-size: 22px; } }
.thumb { width: 46px; height: 46px; border-radius: 0; object-fit: cover; display: block; background: linear-gradient(135deg, #FFD6F6, #D3EEFF); }
.row .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }  /* a row's cover is a box with the picture inside */
/* a row's title is a link to the track's page (the rest of the row plays): only as wide as its words */
a.title { display: block; width: fit-content; max-width: 100%; text-decoration: none; }
a.title:hover { color: var(--violet-text); text-decoration: underline; text-underline-offset: 3px; }
.title, .sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title { font-weight: 600; color: var(--ink); }
.sub { color: var(--muted); font-size: 13px; }
.tks { margin-right: 4px; }  /* BPM and key, before the note */
/* on a row they are a button: "Mixes well with" (the mix arrows say so), with a target a little bigger than the tags */
button.tks { position: relative; display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
button.tks::after { content: ""; position: absolute; inset: -6px -2px; }
button.tks .tk { transition: border-color .15s; }
button.tks:hover .tk, button.tks:focus-visible .tk { border-color: var(--violet); }
.tk.mix { padding: 0 3px; color: var(--violet-text); border-color: #D9C8FF; background: #F4EEFF; }
.tk.mix svg { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tk { display: inline-block; margin-right: 4px; padding: 0 5px; vertical-align: 1px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); font: 400 11px/1.45 var(--mono); white-space: nowrap; }
.right { display: flex; align-items: center; gap: 8px; }
.links { display: flex; gap: 6px; }
.links a {
  font-size: 12px; color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--line); padding: 3px 9px; border-radius: 0; background: #fff;
}
.links a:hover { color: var(--ink); border-color: #D9D0FF; background: var(--bg-2); }
.links a.free { color: var(--green-text); border-color: #A6F0D2; background: #E9FFF6; font-weight: 600; }
.links { align-items: center; }
.links .badge { margin-right: 8px; }
.links a.logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; }
.links a.logo:hover { color: var(--violet-text); }
.links a.logo i, .key.icons i {
  display: block; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
@media (min-width: 1001px) { .more { display: none; } }  /* ⋯ opens the folded store links (tablets and phones) */
.badge { font: 400 11px var(--mono); padding: 3px 8px; border-radius: 0; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.badge.prev { color: var(--blue-text); border-color: #B9C8FF; background: #EEF2FF; }
.badge.id { color: var(--violet-text); border-color: #D9C8FF; background: #F4EEFF; }
.add, .more {
  width: 32px; height: 32px; border-radius: 0; border: 1px solid var(--line); background: #fff;
  color: var(--muted); cursor: pointer; font-size: 17px; line-height: 1;
}
.add:hover, .more:hover { color: var(--ink); border-color: #D9D0FF; }
.add.in { background: var(--green); border-color: var(--green); color: var(--ink); font-weight: 800; box-shadow: 0 4px 14px rgba(0, 214, 143, .4); }
.row.open .more { background: var(--tint); color: var(--ink); }
/* below 1280px a long title takes two lines instead of being cut; landscape tablets get finger-sized buttons */
@media (max-width: 1279px) {
  .row .title { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.3; }
  .row .sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; }
  .badge, .tk { font-size: 12px; }
}
@media (max-width: 1279px) and (pointer: coarse) { .add, .crate-add { width: 44px; height: 44px; } }
@media (min-width: 1001px) and (max-width: 1279px) and (pointer: coarse) { .more { display: block; } }  /* iPads on their side fold the links too (below) */
/* tablets and phones (touch screens up to 1279px): the store links fold behind ⋯ (they open on a line under the track)
   so the title keeps its room, the three buttons are finger-sized, and an ID shows its "unreleased" mark in the text */
@media (max-width: 1000px), (max-width: 1279px) and (pointer: coarse) {
  .row { grid-template-columns: 30px 46px minmax(0, 1fr) auto; grid-template-areas: "num thumb info right" ". . links links"; row-gap: 0; }
  .row .num { grid-area: num; }
  .row .thumb { grid-area: thumb; }
  .row .info { grid-area: info; }
  .row .right { grid-area: right; gap: 4px; }
  .row .links { grid-area: links; display: none; }
  .row.open .links { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px 0 2px; }
  .row.open .links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 13px; }
  .row.open .links a.logo { width: 44px; height: 44px; padding: 0; }
  .row.open .links a.logo i { width: 18px; height: 18px; }
  .row.open .links .badge { margin-right: 4px; }
  .row.open .title, .row.open .sub { display: block; white-space: normal; }  /* open: the whole title and note */
  .row.open:not(.now) { background: var(--bg-2); }  /* the opened links read as part of their track */
  .add, .more, .crate-add { width: 44px; height: 44px; }
  .row.is-id .sub::before {
    content: "unreleased"; display: inline-block; margin-right: 6px; padding: 1px 6px; vertical-align: 1px;
    border: 1px solid #D9C8FF; background: #F4EEFF; color: var(--violet-text); font: 400 12px/1.3 var(--mono);
  }
}
/* phones: the title gets the whole width on top (two lines at most); the plays and note share the line under it with
   the three buttons. In a list the rows run to the screen edges, like an app. */
@media (max-width: 760px) {
  .row {
    grid-template-columns: 22px 48px minmax(0, 1fr) auto; column-gap: 10px; padding: 10px 12px;
    grid-template-areas: "num thumb title title" "num thumb wave wave" "num thumb sub right" ". links links links";  /* wave: a made set's waveform (empty row otherwise) */
  }
  .list .row { margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter) 4px; }  /* the buttons' own space closes the row */
  .list .row.open { padding-bottom: 12px; }
  .row .info { display: contents; }
  .row .wave { grid-area: wave; max-width: none; }
  .row .num { align-self: start; height: 48px; display: grid; place-items: center; }
  .row .thumb { align-self: start; width: 48px; height: 48px; }
  .row .title { grid-area: title; }
  .row .sub {
    grid-area: sub; align-self: start; margin-top: 3px; line-height: 1.35;
    white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  }
  .row.open .sub { display: -webkit-box; }  /* the note keeps two lines: its cell next to the buttons is narrow */
  /* light icon buttons (a picked or saved track stays filled), with a tint while pressed */
  .row .right button { border-color: transparent; background: transparent; }
  .row .right button:active, .row.open .more { background: var(--tint); }
  .row .right .add.on { background: var(--violet); }
  .row .right .crate-add.in { background: var(--green); }
  .row .right .add, .row .right .more { font-size: 21px; }
  .row .right { gap: 2px; }  /* the 44px buttons already space their icons */
}
@media (max-width: 380px) {  /* small phones: a slimmer left side leaves the note more room */
  .row { grid-template-columns: 18px 44px minmax(0, 1fr) auto; column-gap: 8px; }
  .row .num { height: 44px; }
  .row .thumb { width: 44px; height: 44px; }
}

/* about page */
.about-page { padding: 50px var(--gutter) 20px; }
@media (max-width: 760px) { .about-page { padding-top: 36px; } }
.about-page h1 { margin: 12px 0 16px; text-wrap: balance; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 44px 0 70px; }
.step { background: var(--bg-2); border-radius: 0; padding: 30px; }
.step .n { font: 700 40px var(--mono); background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.step h3 { margin: 10px 0 10px; font-size: 22px; }
.step p { color: var(--text); }
.about-page h2 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 18px; scroll-margin-top: 100px; text-wrap: balance; }
.about-page .lead, .about-page .prose p, .about-page dd, .sec-lead, .step p, .src-card p, .legend p, .dream p { text-wrap: pretty; }  /* no lone last word */
.about-page .prose { max-width: 820px; margin-bottom: 60px; }
.about-page .prose p, .about-page .prose li { font-size: 17px; line-height: 1.6; color: var(--text); margin-bottom: 10px; }
.about-page dl { max-width: 820px; margin: 0 0 40px; }
.about-page dl.center { margin-left: auto; margin-right: auto; }
.about-page dt { font: 700 18px var(--mono); color: var(--ink); margin-top: 22px; text-wrap: balance; }
/* how it works */
.about-page .how-head { display: block; min-height: 0; padding-right: 0; }  /* the Send pop-up's .how-head (further down) is a flex row: keep the page head stacked */
.steps.five { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-bottom: 80px; }
.steps.five .step { padding: 24px 22px; }
.steps.five .step h3 { font-size: 20px; }
.how-sec { margin-bottom: 84px; }
.how-head h1 { margin-top: 40px; }
@media (max-width: 760px) { .about-page .how-head h1 { margin-top: 16px; } }
.sec-lead { font-size: 17px; line-height: 1.6; color: var(--text); max-width: 760px; margin: 0 0 28px; }
.sec-lead.center { margin-left: auto; margin-right: auto; }
.demo { border: 1px solid var(--line); background: #fff; }
.demo .row { border-bottom: 0; }
.demo-from { font: 400 12px/1.4 var(--mono); color: var(--muted); margin: 10px 0 0; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 44px; margin: 34px 0 44px; }
.legend > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.legend p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.legend b { color: var(--ink); }
.key { justify-self: start; font: 400 12px/1 var(--mono); padding: 6px 9px; border: 1px solid var(--line); background: #fff; color: var(--muted); white-space: nowrap; }
.key.star { color: var(--pink); font-size: 26px; line-height: 1; border-color: transparent; background: none; padding: 1px 0; }
.key.prev { color: var(--blue-text); border-color: #B9C8FF; background: #EEF2FF; }
.key.free { color: var(--green-text); border-color: #A6F0D2; background: #E9FFF6; font-weight: 700; }
.key.icons { display: inline-flex; gap: 10px; padding: 5px 9px; }
.key.id { color: var(--violet-text); border-color: #D9C8FF; background: #F4EEFF; }
.key.crate { padding: 5px 9px; }  /* the row's crate button, drawn like the + key */
.key.crate svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.buy-listen { text-align: center; border-top: 1px solid var(--line); padding-top: 36px; }
.buy-listen h3 { font-size: 22px; margin: 0 0 22px; }
.buy-listen .logo-row { justify-content: center; }
.how-sec.before-cord { margin-bottom: 10px; }
.how-cord { margin-top: 10px; }
.cordband.flip .cordline { margin: 0 0 0 40px; transform: scaleX(-1); }  /* mirrored: comes in from the right edge, plug on the left */
.how-rest { padding-top: 40px; }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }
.logo-row .src b { font-size: 18px; }
.src-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.src-card { background: var(--bg-2); padding: 28px; display: flex; flex-direction: column; }
.src-card.wide { grid-column: span 2; }
.src-card h3 { font-size: 20px; margin: 0 0 8px; }
.src-card p { margin: 0 0 24px; color: var(--text); font-size: 16px; line-height: 1.55; }
.src-card .logo-row { margin-top: auto; }
.how-note { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
.app-logos { background: var(--ink); padding: 40px 32px; margin-bottom: 28px; }
.app-logos .logo-row { justify-content: center; gap: 28px 34px; }
.app-logos .src { color: #fff; }
.app-logos .src:hover { color: var(--pink); }
.how .actions { margin-top: 36px; }
.how .logo-row .src { min-height: 24px; }  /* small logos (Traktor, 1001Tracklists) still get a 24px target */
/* tablets: five step columns get too narrow, so 3 + 2 with the last two centred */
@media (min-width: 761px) and (max-width: 1100px) {
  .steps.five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .steps.five .step { grid-column: span 2; }
  .steps.five .step:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 761px) and (max-width: 1180px) {  /* the six DJ apps in two rows of three, not five and one */
  .app-logos .logo-row { max-width: 640px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 1000px) {
  .src-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .src-card.wide { grid-column: auto; }
  .src-grid > .src-card:last-child:nth-child(odd) { grid-column: 1 / -1; }  /* odd count: the last card takes the full row, no empty cell */
}
@media (max-width: 760px) {
  .steps, .steps.five, .src-grid, .legend { grid-template-columns: 1fr; }
  /* phones: one step per row, the number beside the title, so the five steps take half the scrolling */
  .steps.five { gap: 12px; margin: 32px 0 var(--sec-y); }
  .steps.five .step { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 18px 20px 20px; }
  .steps.five .step .n { font-size: 34px; line-height: 1; }
  .steps.five .step h3 { margin: 0; font-size: 19px; }
  .steps.five .step p { grid-column: 1 / -1; margin-top: 8px; }
  .legend > div { grid-template-columns: 92px minmax(0, 1fr); }
  .demo-from { font-size: 13px; }
  .logo-row { gap: 14px 24px; }
  .logo-row .src b { font-size: 16px; }
  .app-logos { padding: 30px 20px; }
  .app-logos .logo-row { gap: 22px 28px; }
  .how-sec { margin-bottom: 64px; }
  .src-card { padding: 24px 22px; }
}
@media (max-width: 560px) { .how .actions .pill { flex: 1 1 auto; } }  /* the two buttons share the row, or each takes a full row when they wrap */
@media (max-width: 380px) {
  .legend > div { grid-template-columns: 1fr; gap: 8px; }  /* small phones: the key above its line, so the text keeps the full width */
  /* the six DJ apps stay in pairs: slightly smaller logos, tighter band */
  .how .app-logos { padding: 26px 16px; }
  .how .app-logos .logo-row { column-gap: 18px; }
  .how .app-logos .src i { height: calc(var(--h) * .7); }
}
/* touch: every logo link gets a 44px tall hit area; the rows touch instead of leaving a gap */
@media (pointer: coarse) {
  .how .logo-row { row-gap: 0; }
  .how .app-logos .logo-row { row-gap: 10px; }  /* the big DJ app logos keep some air between their rows */
  .how .logo-row .src { min-height: 44px; min-width: 44px; justify-content: center; }
}
/* about page: the styles in one row that scrolls sideways */
.strip-wrap { position: relative; margin: 30px 0 56px; text-align: left; }
.style-strip {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 16px;
  scrollbar-width: thin; scrollbar-color: var(--violet) var(--line);
}
.style-strip::-webkit-scrollbar { height: 6px; }
.style-strip::-webkit-scrollbar-track { background: var(--line); }
.style-strip::-webkit-scrollbar-thumb { background: var(--violet); }
.style-strip .scard { flex: 0 0 210px; scroll-snap-align: start; padding: 8px 8px 12px; box-shadow: none; }
.style-strip .scard:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); }
.style-strip .poster-btn { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }  /* hidden, still the link's name */
.style-strip .scard > h3 { padding: 10px 4px 0; font-size: 16px; text-align: center; }
.strip-arrow {
  position: absolute; top: calc(50% - 32px); z-index: 2; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 10px 30px rgba(20, 9, 58, .18);
}
.strip-arrow.prev { left: -10px; }
.strip-arrow.next { right: -10px; }
.strip-arrow:hover { color: var(--violet-text); }
.strip-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.strip-arrow[hidden] { display: none; }
@media (hover: none) { .strip-arrow { display: none; } }
@media (max-width: 560px) {  /* phones: the strip runs to the screen edges and the third card is cut there, a clear cue to swipe */
  .strip-wrap { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); }
  .style-strip { gap: 12px; padding: 4px var(--gutter) 16px; scroll-padding: 0 var(--gutter); }
  .style-strip .scard { flex-basis: calc((100% - 24px) / 2.3); }
  .style-strip .scard > h3 { font-size: 15px; }
}
/* about page: one centred column */
.about-center { text-align: center; }
.about-center .lead, .about-center .prose { margin-left: auto; margin-right: auto; }
.about-center .prose { max-width: 680px; }
.about-center .prose ul { list-style: none; padding: 0; margin: 0; }
.about-center .prose li { margin-bottom: 14px; }
.dream-wrap { padding-bottom: 0; }
.dream { background: var(--bg-2); padding: 40px 34px; max-width: 720px; margin: 0 auto; scroll-margin-top: 100px; }
.dream p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 0 auto 26px; max-width: 600px; }
.signoff { font: 700 20px var(--mono); color: #fff; background: var(--ink); padding: 50px var(--gutter); margin: 0; text-align: center; }  /* full-width dark band */
.signoff span { display: block; margin-top: 10px; font: 400 17px/1.5 var(--sans); color: #D9D2F5; }
.signoff a { font: 700 17px var(--mono); color: var(--pink); text-decoration: none; }
.signoff a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .dream { padding: 30px 18px; }
  .signoff { padding: 40px 16px; }
}
@media (max-width: 760px) { .tapes.flip + .about-page { padding-top: 12px; } }  /* the tape band already leaves air under the tapes */
.about-page dd { margin: 8px 0 0; color: var(--text); font-size: 17px; line-height: 1.6; }
.about-page dd .linklike { padding: 10px 0; margin: -10px 0; }  /* "Don't count me": a taller hit area, same line height */
@media (hover: none) { .about-page dd .linklike { text-decoration: underline; text-underline-offset: 3px; } }  /* no hover on touch: show it is a button */
@media (max-width: 560px) {
  .about-page dl.center { text-align: left; }  /* phones: the longer answers read better from a straight left edge */
  .about-page dt { font-size: 17px; }
  .about-page dd { font-size: 16px; }
}

/* contact page (footer link only) */
.contact-form { display: grid; gap: 16px; max-width: 680px; margin: 34px auto 70px; text-align: left; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
.contact-form label small { font-size: 13px; font-weight: 400; color: var(--muted); }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background-color: var(--bg-2);
  font: 400 16px/1.5 var(--sans); color: var(--text); -webkit-appearance: none; appearance: none;
}
.contact-form select {
  padding-right: 40px; cursor: pointer;
  background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2314093A' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.contact-form textarea { resize: vertical; min-height: 170px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: 2px solid rgba(123, 60, 255, .35); border-color: var(--violet); background-color: #fff;
}
.contact-form .pill { width: 100%; margin-top: 4px; }
.contact-form .pill:disabled { opacity: .5; cursor: default; }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }  /* hidden from people, bots fill it */
.cf-msg { min-height: 1.4em; margin: 0; font-size: 14px; line-height: 1.5; color: var(--pink-text); }
.cf-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cf-done { background: var(--bg-2); padding: 40px 34px; max-width: 680px; margin: 34px auto 70px; scroll-margin-top: 100px; }
.cf-done p { font-size: 17px; line-height: 1.6; color: var(--text); margin: 14px auto 0; max-width: 560px; overflow-wrap: anywhere; text-wrap: pretty; }
/* The newsletter box (nlHTML in app.js): home page, blog, under every article and on every style page. White in a
   neon frame (square corners), the words on the left and the form on the right; one column on tablets and phones. */
.nl-sec { padding-top: var(--sec-y); }
.nl {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: 22px 56px;
  padding: 44px 48px; background: #fff; border: 2px solid; border-image: var(--neon) 1;
  box-shadow: 0 18px 50px rgba(123, 60, 255, .12);
}
.nl h2 { margin: 10px 0 12px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.2; }
.nl-copy p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--text); text-wrap: pretty; }
.nl-copy b { overflow-wrap: anywhere; }
.nl-form { display: grid; gap: 10px; }
.nl-row { display: flex; gap: 10px; }
.nl-row input {
  flex: 1; min-width: 0; padding: 13px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-2);
  font: 400 16px/1.4 var(--sans); color: var(--text); -webkit-appearance: none; appearance: none;
}
.nl-row input:focus { outline: 2px solid rgba(123, 60, 255, .35); border-color: var(--violet); background: #fff; }
.nl-row .pill { flex: none; }
.nl-row .pill:disabled { opacity: .5; cursor: default; }
.nl-msg { min-height: 1.4em; margin: 0; font-size: 14px; line-height: 1.5; color: var(--pink-text); }
.nl-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.nl-note a { color: inherit; text-underline-offset: 2px; }
.article .nl-sec { padding-top: 48px; }  /* under an article: the article column's width, in one column */
.article .nl { grid-template-columns: minmax(0, 1fr); padding: 34px 32px; }
@media (max-width: 1000px) { .nl { grid-template-columns: minmax(0, 1fr); padding: 36px 32px; } }
@media (max-width: 560px) {
  .nl, .article .nl { padding: 28px 20px; }
  .nl-row { flex-direction: column; }
  .nl-row .pill { width: 100%; }
}
@media (max-width: 560px) {
  .cf-row { grid-template-columns: 1fr; }
  .contact-form textarea { height: 150px; min-height: 120px; }  /* phones: the Send button stays closer to the first screen */
  .cf-done { padding: 30px 18px; }
}

/* crate drawer */
#crate, #send, #signin, #mixes, #swap { position: fixed; inset: 0; z-index: 40; background: rgba(20, 9, 58, .45); backdrop-filter: blur(2px); }
.drawer {
  position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: #fff;
  padding: 22px max(24px, env(safe-area-inset-right, 0px)) calc(22px + var(--safe-b)) 24px;  /* clear of the notch and the home bar */
  display: flex; flex-direction: column; box-shadow: -20px 0 60px rgba(20, 9, 58, .18);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer h2 { font-size: 24px; }
.hint { color: var(--muted); font-size: 14px; margin: 8px 0 14px; }
#crateList { flex: 1; overflow: auto; }
.crate-item { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--row); }
.crate-item .t { flex: 1; min-width: 0; }
.crate-item .t div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--ink); }
.crate-item .t small { color: var(--muted); }
.crate-item a { font-size: 12px; white-space: nowrap; text-decoration: none; border: 1px solid var(--line); padding: 3px 9px; border-radius: 0; }
.crate-item button { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 16px; }
.drawer-actions { display: flex; gap: 8px; padding-top: 14px; flex-wrap: wrap; }
/* Mixes well with: a drawer like My crate. The track on top, then 5 that mix with it (tap to hear, its BPM and key to dig on) */
#mixesBody { flex: 1; overflow: auto; }
.mix-back { margin: 10px 0 0; font-size: 14px; }
.mix-from { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.mix-from > div { min-width: 0; }
.mix-from b { display: block; color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-from small, .mix-sub { color: var(--muted); font-size: 13px; }
.mix-list { list-style: none; margin: 0; padding: 0; }
.mix-item { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 0 -8px; padding: 10px 8px; border-bottom: 1px solid var(--row); }
.mix-item.playable { cursor: pointer; }
@media (hover: hover) { .mix-item.playable:hover { background: var(--bg-2); } }
.mix-item.now { background: #FDEBFB; box-shadow: inset 3px 0 0 var(--pink); }
.mix-item.now .mix-title { color: var(--pink-text); }
.mix-play { position: relative; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 0; cursor: pointer; background: linear-gradient(135deg, #FFD6F6, #D3EEFF); }
.mix-play:disabled { cursor: default; }
.mix-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mix-play span { position: absolute; left: 0; bottom: 0; width: 18px; height: 18px; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: 9px; }
.mix-info { min-width: 0; }
.mix-title { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mix-sub { margin-top: 2px; }
.mix-why { margin-top: 3px; font-size: 13px; color: var(--green-text); }
.mix-note { margin: 12px 0 0; font-size: 13px; color: var(--muted); }
@media (pointer: coarse) { .mix-back { min-height: 44px; } }
/* Order my set: the bar above the list (the button, or the set's summary and Undo), and each track's place */
.set-bar { margin: 0 0 12px; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 0; }
.set-sum { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text); text-wrap: pretty; }
.set-sum b { color: var(--ink); }
.set-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.set-actions .pill { padding: 8px 16px; font-size: 14px; }
.set-actions .linklike { font-size: 14px; }
.set-new { font-size: 13px; color: var(--muted); }
.set-actions .pill.on { background: var(--tint); border-color: var(--violet); }
/* Share my set: the box under the set's buttons (its name, your name, the link) */
.set-share { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.set-share label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.set-share input + label { margin-top: 10px; }
.set-share input { width: 100%; padding: 9px 12px; border: 1px solid #8E86B5; border-radius: 0; background: #fff; color: var(--text); font: inherit; font-size: 15px; }
.set-share input:focus { outline: 2px solid var(--violet); outline-offset: 0; }
.set-share .set-link { margin-top: 10px; font: 400 12px var(--mono); }
.set-share-note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
/* a shared set's page: "Make your own set" under the list */
.set-outro { margin: 10px auto 60px; padding: 28px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; }
.set-outro h2 { font-size: 22px; margin: 0 0 8px; }
.set-outro p { margin: 0 auto 18px; max-width: 520px; color: var(--text); text-wrap: pretty; }
@media (max-width: 760px) { .set-outro { margin: 6px var(--gutter) 40px; padding: 22px 18px; } }
/* My account (renderAccountPage): the photo and name, four numbers, then one section per subject, forms 560px wide */
.me-head { display: flex; align-items: center; gap: 28px; padding-top: 56px; }
.me-head.me-solo { display: block; padding-bottom: 60px; }
.me-who h1 { margin: 8px 0 6px; overflow-wrap: anywhere; }
.me-who .lead { margin: 0 0 22px; }
.me-sub { margin: 0; font: 400 14px var(--mono); color: var(--violet-text); }
.me-photo { width: 112px; height: 112px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--tint); border: 1px solid var(--line); }
.me-photo.sm { width: 64px; height: 64px; }
.me-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.me-photo span { font: 700 46px/1 var(--mono); color: var(--violet-text); }
.me-photo.sm span { font-size: 26px; }
.me-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.me-tile { padding: 18px 20px; background: var(--bg-2); border: 1px solid var(--line); }
.me-tile b { display: block; font: 700 32px/1.1 var(--mono); color: var(--ink); }
.me-tile span { font-size: 14px; color: var(--muted); }
.me-sec { margin-top: 44px; }
.me-sec h2 { margin: 0 0 18px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 22px; }
.me-field { max-width: 560px; margin-bottom: 24px; }
.me-field label, .me-label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); }
.me-field .me-sub-label { margin-top: 10px; font-weight: 400; color: var(--text); }
.me-field input, .me-field select {
  width: 100%; padding: 10px 12px; border: 1px solid #8E86B5; border-radius: 0; background: #fff; color: var(--text); font: inherit; font-size: 16px;
}
.me-field select { -webkit-appearance: none; appearance: none; padding-right: 36px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314093A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 12px center / 11px 7px; }
.me-field input:focus, .me-field select:focus { outline: 2px solid var(--violet); outline-offset: 0; }
.me-row { display: flex; align-items: center; gap: 8px; }
.me-row input { flex: 1; min-width: 0; }
.me-actions { flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.me-at { font: 400 18px var(--mono); color: var(--muted); }
.me-help { margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.me-msg { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; color: var(--pink-text); }
.me-msg.ok { color: var(--green-text); }
.me-msg:empty { min-height: 0; }
.me-photo-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.me-sets { max-width: 760px; margin: 0; padding: 0; list-style: none; }
.me-sets li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--row); }
.me-sets a { font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.me-sets a:hover { color: var(--violet-text); text-decoration: underline; }
.me-sets small { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.me-sets .pill { padding: 7px 14px; font-size: 14px; }
.me-x { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--muted); cursor: pointer; }
.me-x:hover { color: var(--ink); border-color: #D9D0FF; }
.me-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 22px; max-width: 560px; margin: 0 0 22px; }
.me-facts dt { color: var(--muted); }
.me-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.me-danger h2 { color: var(--pink-text); }
.me-danger { margin-bottom: 70px; }
.pill.danger { background: #fff; border-color: var(--pink); color: var(--pink-text); }
.pill.danger:hover { background: #FDEBFB; }
@media (pointer: coarse) { .me-field input, .me-field select, .me-x { min-height: 44px; } .me-x { width: 44px; } }
@media (max-width: 760px) {
  .me-head { flex-direction: column; align-items: flex-start; gap: 18px; padding-top: 30px; }
  .me-photo { width: 88px; height: 88px; }
  .me-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .me-tile { padding: 14px 16px; }
  .me-tile b { font-size: 26px; }
  .me-sets li { grid-template-columns: minmax(0, 1fr) auto; }
  .me-sets li > div { grid-column: 1 / -1; }
}
.crate-item .n { min-width: 20px; text-align: right; font: 400 12px var(--mono); color: var(--muted); }
.crate-item .t small .tks { margin-right: 6px; }
@media (pointer: coarse) { .set-actions .linklike { min-height: 44px; padding: 0 4px; } }
/* touch screens: a big close button and finger-sized links in the list */
@media (pointer: coarse), (max-width: 1000px) {
  .drawer-head .ic { width: 44px; height: 44px; margin-right: -10px; font-size: 20px; color: var(--ink); }
  .crate-item a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; font-size: 13px; }
  .crate-item button { width: 44px; height: 44px; margin-right: -10px; color: var(--ink); }
}
/* tablets and phones: the main button on its own line, the three small ones side by side */
@media (max-width: 1000px) {
  .drawer-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drawer-actions .pill { padding-left: 8px; padding-right: 8px; }
  .drawer-actions .primary { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .drawer { padding: 14px var(--gutter) calc(16px + var(--safe-b)); } }
@media (max-width: 380px) { .drawer-actions .pill:not(.primary) { font-size: 14px; } }

/* sign-in panel */
#signinBody { flex: 1; overflow: auto; }
#signinBody .hint { margin: 10px 0 22px; font-size: 15px; line-height: 1.5; }
#signinBody .send-warn { margin: 0 0 22px; }
.or { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--muted); font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
#siForm { display: grid; gap: 14px; }
#siForm label { display: grid; gap: 6px; font-size: 14px; font-weight: 500; color: var(--ink); }
#siForm label small { font-weight: 400; color: var(--muted); }
#siForm input {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-2);
  font: 400 16px var(--sans); color: var(--text);
}
#siForm input:focus { outline: 2px solid rgba(123, 60, 255, .35); border-color: var(--violet); background: #fff; }
.si-go { width: 100%; margin-top: 6px; }
.si-go:disabled { opacity: .5; cursor: default; }
.si-msg { min-height: 1.4em; margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--pink-text); }
.si-msg.ok, .gate-msg.ok { color: var(--green-text); }
.si-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 16px; }
.si-links .linklike { color: var(--violet-text); font-size: 14px; }
@media (pointer: coarse) {  /* the small text buttons of the pop-ups get a finger-sized strip */
  .si-links { gap: 0; margin-top: 4px; }
  .si-links .linklike { padding: 12px 0; }
  .how-links .linklike, .send-extras .linklike { padding: 12px 2px; }
}

/* send to my DJ app: two choices, one button */
#sendBody { flex: 1; overflow: auto; }
/* the send panel opens as a pop-up in the middle of the screen */
.drawer.modal {
  top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%);
  width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); padding: 26px 30px 30px;
  box-shadow: 0 30px 90px rgba(20, 9, 58, .35);
}
.drawer.modal #sendBody { overflow: auto; }
.send-step { margin-top: 6px; }
/* "Download my file" stays in view: it sticks to the bottom of the pop-up when the list is taller than the screen */
.send-step + .send-go { position: sticky; bottom: 0; z-index: 2; margin-top: 0; }
/* the how-to screen after "Download my file" (#send: the How it works page has its own .how-head) */
.drawer.modal.howto .drawer-head { position: absolute; top: 29px; right: 24px; z-index: 3; }  /* same line as "Your file is downloaded" */
#send .how-head { display: flex; align-items: center; justify-content: flex-start; gap: 12px; min-height: 42px; margin-top: 0; padding-right: 52px; }
.how-ok { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: var(--green); color: var(--ink); font: 700 17px/1 var(--sans); }
#send .how-head b { display: block; font: 600 16px/1.3 var(--sans); color: var(--ink); }
#send .how-head small { display: block; margin-top: 2px; font: 400 13px var(--mono); color: var(--muted); word-break: break-all; }
@media (pointer: coarse), (max-width: 1000px) { .drawer.modal.howto .drawer-head { top: 25px; right: 20px; } }  /* the 44px close button */
.drawer.modal.howto .drawer-head .ic { background: rgba(255, 255, 255, .92); }  /* stays readable over the dark step pictures */
.how-intro { margin: 16px 0 0; text-align: center; font: 700 clamp(22px, 3.2vw, 32px)/1.2 var(--mono); letter-spacing: -.02em; color: var(--ink); }
.how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.how-card { border: 1px solid var(--line); background: #fff; }
.how-screen { height: 100px; padding: 11px; display: grid; place-items: center; overflow: hidden; background: #16112E; color: #fff; }
.how-cap { padding: 10px 12px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.how-cap b { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 15px; color: var(--ink); }
.how-cap i { flex: none; width: 22px; height: 22px; display: grid; place-items: center; background: var(--ink); color: #fff; font: 700 12px/1 var(--mono); font-style: normal; }
.mini-tiles { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.mini-tiles.svc { grid-template-columns: repeat(2, 1fr); }
.mini-tile { height: 36px; display: grid; place-items: center; background: #2B2548; color: rgba(255, 255, 255, .55); }
.mini-tile.hl { background: #3A3170; color: #fff; outline: 2px solid var(--pink); outline-offset: -2px; }
.mini-tile svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-tile em { font: 500 9px/1 var(--sans); font-style: normal; margin-top: -8px; }
.mini-tile .tile-logo { max-width: 80%; }
.mini-drop { width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 8px; border: 1.5px dashed rgba(255, 255, 255, .5); text-align: center; }
.mini-drop em { font: 500 12px var(--sans); font-style: normal; color: rgba(255, 255, 255, .75); }
.mini-file { max-width: 90%; padding: 6px 9px; background: #fff; color: var(--ink); font: 400 11px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.mini-drop svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; justify-self: center; }
.mini-start { width: 100%; display: grid; gap: 12px; justify-items: center; }
.mini-btn { padding: 8px 16px; background: var(--pink); color: #fff; font: 600 12px/1 var(--sans); }
.mini-bar { width: 80%; height: 6px; background: #2B2548; }
.mini-bar i { display: block; width: 65%; height: 100%; background: var(--green); }
.mini-app { width: 100%; display: grid; gap: 5px; justify-items: start; }
.mini-app .tile-logo { margin-bottom: 4px; }
.mini-app > b { font: 600 14px var(--sans); }
.mini-app span { width: 100%; padding: 4px 8px; background: #2B2548; font: 400 10px/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .85); }
/* the big button stays in view: it sticks to the bottom of the pop-up when the content is taller than the window */
.how-go { position: sticky; bottom: 0; z-index: 2; width: 100%; margin-top: 16px; padding: 18px 30px; font-size: 18px; justify-content: center; }
.how-alt { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.how-links { margin: 6px 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.how-links .linklike { color: var(--violet-text); font-size: 14px; text-decoration: underline; }
@media (max-width: 560px) { .how-grid { grid-template-columns: 1fr; } }
.send-extras { margin-top: 14px; }
.send-extras p { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.send-extras .linklike, .send-extras a { color: var(--violet-text); font-size: 14px; text-decoration: underline; }
.send-list { list-style: none; margin: 0; padding: 0; max-height: 236px; overflow: auto; border: 1px solid var(--line); }
.send-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 28px; gap: 12px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--row); }
.send-list li:last-child { border-bottom: 0; }
.send-list img { width: 36px; height: 36px; object-fit: cover; display: block; background: var(--bg-2); }
.send-list b, .send-list small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.send-list b { font: 500 14px/1.3 var(--sans); color: var(--ink); }
.send-list small { font-size: 12px; color: var(--muted); }
.send-list button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 4px; }
.send-list button:hover { color: var(--pink-text); }
@media (pointer: coarse) {  /* the "leave out" cross, big enough for a finger */
  .send-list li { grid-template-columns: 36px minmax(0, 1fr) 44px; padding: 2px 0 2px 10px; }
  .send-list button { width: 44px; height: 44px; padding: 0; }
}
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile {
  min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font: 500 15px var(--sans); transition: background .15s, border-color .15s;
}
.tile:hover { background: var(--bg-2); border-color: #D9D0FF; }
.tile.on { background: var(--tint); border-color: var(--violet); box-shadow: inset 0 0 0 1px var(--violet); color: var(--violet-text); }
.tile b { font-weight: 500; }
.tile-logo {
  display: block; flex: none; height: var(--h); aspect-ratio: var(--r); background: currentColor;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
}
.tiles.apps .tile-logo { max-width: 100%; }
/* phones: the pop-up fills the screen (its content scrolls, the main button stays at the bottom) */
@media (max-width: 560px) {
  .drawer.modal {
    inset: 0; transform: none; width: auto; max-height: none; box-shadow: none;
    padding: 14px var(--gutter) calc(16px + var(--safe-b));
  }
  .drawer.modal.howto .drawer-head { top: 13px; right: max(10px, var(--gutter) - 10px); }  /* the 44px button ends on the screen edge, not past it */
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones on their side: the pop-up uses the full height */
@media (max-height: 500px) and (min-width: 561px) {
  .drawer.modal { top: 0; bottom: 0; transform: translateX(-50%); max-height: none; padding: 16px 24px calc(16px + var(--safe-b)); }
  .drawer.modal.howto .drawer-head { top: 15px; }
}
#sendBody .label { margin: 24px 0 10px; font: 400 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
#sendBody .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.send-go { width: 100%; margin-top: 30px; justify-content: center; }
.send-go:disabled { opacity: .45; cursor: default; }
.send-warn, .send-done { margin: 16px 0 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--text); }
.send-warn { border-left: 3px solid var(--pink); color: var(--pink-text); }
.send-done { border-left: 3px solid var(--green); }
.send-hint { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* player bar */
#bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; height: var(--bar-h);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 520px) minmax(0, 1fr);
  gap: 20px; align-items: center; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
  padding: 10px max(30px, env(safe-area-inset-right, 0px)) calc(10px + var(--safe-b)) max(30px, env(safe-area-inset-left, 0px));
  border-top: 1px solid var(--line); box-shadow: 0 -10px 40px rgba(20, 9, 58, .08);
}
#bar .now { display: flex; gap: 12px; align-items: center; min-width: 0; }  /* player bar only: rows also get .now while playing */
#cover { width: 58px; height: 58px; border-radius: 0; object-fit: cover; background: linear-gradient(135deg, #FFD6F6, #D3EEFF); flex: none; }
.nowtext { min-width: 0; overflow: hidden; }
#nowTitle { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#nowSub { color: var(--muted); }
#nowSub a { text-decoration: none; }
#bar .center { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.controls { display: flex; justify-content: center; align-items: center; gap: 14px; }
.ic {
  position: relative; background: none; border: none; cursor: pointer; color: var(--muted);
  width: 36px; height: 36px; border-radius: 0; display: grid; place-items: center;
}
.ic:hover { color: var(--ink); background: var(--bg-2); }
.ic.on { color: var(--violet-text); }
.ic svg { width: 20px; height: 20px; fill: currentColor; }
.ic.big { width: 46px; height: 46px; background: var(--cta); color: #fff; box-shadow: 0 6px 20px rgba(196, 20, 200, .4); }
.ic.big:hover { box-shadow: 0 8px 28px rgba(196, 20, 200, .6); }
.ic.big svg { width: 24px; height: 24px; }
#repeat[data-one="1"]::after {
  content: "1"; position: absolute; right: 3px; top: 3px; font-size: 9px; font-weight: 800;
  background: var(--green); color: var(--ink); border-radius: 0; width: 13px; height: 13px; line-height: 13px; text-align: center;
}
.progress { display: flex; align-items: center; gap: 10px; font: 400 11px var(--mono); color: var(--muted); }
input[type=range] { accent-color: var(--violet); }
#seek { flex: 1; }
.side { display: flex; justify-content: flex-end; }
.vol { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.vol svg { width: 18px; height: 18px; fill: currentColor; }
/* touch screens: finger-sized buttons; no volume slider (phones and tablets use their own volume buttons,
   and iPhones and iPads ignore a page's volume anyway) */
@media (pointer: coarse) {
  #bar { grid-template-columns: minmax(0, 1fr) minmax(280px, 460px) auto; padding-top: 8px; padding-bottom: calc(8px + var(--safe-b)); }  /* no volume column: the track name gets its room */
  .controls .ic { width: 44px; height: 44px; }
  #seek { height: 32px; margin: 0; }  /* the same thin line, a taller strip to grab */
  .progress { font-size: 12px; }
  .side { display: none; }
}
/* tablets: a narrower middle so the track name keeps its room */
@media (max-width: 1000px) {
  #bar { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px) auto; gap: 16px; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
  .controls { gap: 8px; }
  .vol input { width: 96px; }
}
/* phones: two rows. Top: cover, track and time. Bottom: the five buttons and the seek bar. */
@media (max-width: 760px) {
  body.playing { --bar-h: calc(108px + var(--safe-b)); }
  #bar {
    grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "now now cur dur" "ctrl seek seek seek";
    gap: 4px 10px; align-content: center; padding-top: 8px; padding-bottom: calc(8px + var(--safe-b));
  }
  #bar .center, #bar .progress { display: contents; }
  #bar .now { grid-area: now; gap: 10px; }
  #cover { width: 44px; height: 44px; }
  .controls { grid-area: ctrl; gap: 0; margin-left: -10px; }
  .controls .ic { width: 44px; height: 44px; }
  #cur { grid-area: cur; margin-right: -6px; }
  #dur { grid-area: dur; }
  #cur, #dur { white-space: nowrap; }
  #dur::before { content: '/ '; }
  #seek { grid-area: seek; min-width: 0; height: 44px; margin: 0; }
  .side { display: none; }
}
/* the smallest phones: slimmer side buttons, and only the elapsed time (previews are always 30 seconds and the
   line under the title says so), so the Deezer credit stays readable */
@media (max-width: 359px) {
  #bar { column-gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "now now cur" "ctrl seek seek"; }
  .controls .ic:not(.big) { width: 38px; }
  #cur { margin-right: 0; }
  #dur { display: none; }
}
/* phones on their side (short screens): one thin row, the list keeps the room */
@media (max-height: 500px) and (min-width: 561px) {
  body.playing { --bar-h: calc(64px + var(--safe-b)); }
  #bar {
    grid-template-columns: minmax(0, 1fr) auto minmax(110px, .8fr); grid-template-areas: none;
    gap: 16px; padding-top: 6px; padding-bottom: calc(6px + var(--safe-b));
  }
  #bar .center { display: contents; }
  #bar .progress { display: flex; }
  #bar .now, .controls, #cur, #dur, #seek { grid-area: auto; }
  .controls { margin-left: 0; gap: 4px; }
  #cur { margin-right: 0; }
  #dur::before { content: none; }
  #cover { width: 44px; height: 44px; }
  .side { display: none; }
}

/* responsive */
@media (max-width: 1000px) {
  .shapes { height: 460px; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 760px) {
  .shapes { height: 340px; }
  .checks { font-size: 17px; }
  .scard { padding: 10px 10px 16px; }
}

/* ---------- accessibility ---------- */
/* text for screen readers only (!important: it may sit in a box whose own rules style every span, like .dj span) */
.visually-hidden {
  position: absolute !important; display: block !important; width: 1px !important; height: 1px !important; margin: -1px !important;
  padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important;
  text-transform: none !important;  /* read as written ("opens in a new tab"), not in the capitals of the link around it */
}
/* "Skip to content": the first Tab on every page, shown in the top left corner while it has the focus */
.skip {
  position: fixed; left: 12px; top: 12px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px;
  background: var(--ink); color: #fff; font: 600 15px/1 var(--sans); text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }
/* where the focus lands after a page change or a jump (the page, a title): no ring, it is not a control */
[tabindex="-1"]:focus { outline: none; }

/* cookie banner (stats.js shows it on a first visit): bottom left on big screens, across the bottom on phones, above the
   player and the selection bar, under the menus and pop-ups. Accept and Decline look the same, so neither is pushed. */
.cookies {
  position: fixed; left: calc(20px + env(safe-area-inset-left, 0px)); bottom: calc(max(var(--bar-h) + var(--sel-h), var(--safe-b)) + 20px);
  z-index: 37; width: min(440px, calc(100vw - 40px)); padding: 20px 22px; background: var(--ink); color: rgba(255, 255, 255, .85);
  box-shadow: 0 16px 40px rgba(20, 9, 58, .35);
}
.cookies p { margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.cookies b { display: block; margin-bottom: 4px; font: 700 16px/1.3 var(--mono); color: #fff; }
.cookies a { color: #fff; text-underline-offset: 3px; }
.cookies-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cookies .pill { background: #fff; border-color: #fff; color: var(--ink); font-weight: 600; }
.cookies .pill:hover { background: var(--tint); }
.cookies :focus-visible { outline-color: #fff; }
@media (max-width: 760px) {
  .cookies {
    left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); width: auto;
    bottom: calc(max(var(--bar-h) + var(--sel-h), var(--safe-b)) + 12px); padding: 16px 18px;
  }
  .cookies p { margin-bottom: 12px; }
}

/* ---------- accessibility: focus, fields, contrast, motion ---------- */
/* the Styles menu: the ring sits inside the item (the phone panel scrolls and would cut a ring outside it) */
.dd-menu a:focus-visible { outline: 2px solid var(--violet); outline-offset: -2px; }
/* on the coloured heroes an ink ring (violet on pink or violet would not show) */
.col-hero :focus-visible { outline-color: var(--ink); }
/* "Back to top" shows while it has the keyboard focus (it otherwise waits for scrolling) */
#toTop:focus-visible { opacity: 1; transform: none; pointer-events: auto; }
/* the keyboard focus never hides under the sticky header or the bars at the bottom of the screen */
#view :focus, #foot :focus { scroll-margin-top: calc(var(--top-h) + 12px); scroll-margin-bottom: calc(var(--bar-h) + var(--sel-h) + var(--cookie-h, 0px) + 12px); }
body:has(> #cookie-banner) { --cookie-h: 240px; }  /* the cookie banner (first visit) sits above the bars */
/* form fields: a border you can see (3:1 on white) and the full violet ring while typing */
.toolbar #q, .contact-form input, .contact-form select, .contact-form textarea, #siForm input, .nl-row input { border-color: #8E86B5; }
.toolbar #q::placeholder, .nl-row input::placeholder { color: var(--muted); opacity: 1; }
.toolbar #q:focus, #siForm input:focus { outline: 2px solid var(--violet); outline-offset: 0; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus, .nl-row input:focus { outline: 2px solid var(--violet); outline-offset: 0; }
/* contrast: white on the mint and cyan posters and banners is too faint (2:1), so those names are in ink, like the
   Free downloads hero. On the Must-have pink the small lines are ink too (the giant white title is big enough). */
.scard.c2 .poster-word, .scard.c4 .poster-word, .style-banner.c2 .sb-word, .style-banner.c4 .sb-word { color: var(--ink); text-shadow: none; }
.col-hero.ink-small .col-eyebrow, .col-hero.ink-small .col-lead { color: var(--ink); text-shadow: none; }
.mini-btn { background: var(--accent-soft); }  /* the drawn "Start transfer" button in the Send how-to */
/* a card holds its screen-reader note (the DJs' names): in the About page's sideways row it must stay inside the row */
.scard { position: relative; }
/* the pause button in the tapes' corner: stops the tapes and every other moving decoration (html.still, app.js) */
.still-btn {
  position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 36px; height: 36px; padding: 0; display: grid; place-items: center;
  border: 0; background: var(--ink); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(20, 9, 58, .25);
}
.still-btn:hover { background: var(--violet); }
.still-btn svg { width: 16px; height: 16px; fill: currentColor; }
.still-btn .i-play, .still .still-btn .i-pause { display: none; }
.still .still-btn .i-play { display: inline; }
@media (pointer: coarse) { .still-btn { width: 44px; height: 44px; } }
.still .tape-track, .still .cta-shape, .still .cordline img, .still .shape img { animation-play-state: paused; }
/* less motion when the device asks for it: no smooth scrolling, nothing that slides, floats or zooms (and no pause button) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .still-btn { display: none; }
}

/* "How this <style> list was made" at the bottom of a style page: the numbers and sources, one line each */
.crate-about .method { margin: 0 0 14px; padding-left: 20px; max-width: 760px; color: var(--text); font-size: 15px; line-height: 1.6; }
.crate-about .method li { margin-bottom: 6px; }
.crate-about .method-fix { font-size: 15px; color: var(--muted); }
/* page not found (404.html): a big neon 404, the message and two ways back, then the home page's crossing tapes */
.nf-msg { padding-block: clamp(48px, 8vw, 96px) clamp(28px, 5vw, 56px); }
.nf-code { margin: 0; font: 700 clamp(112px, 22vw, 240px)/.9 var(--mono); letter-spacing: -.05em;
  background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-msg h1 { margin: 10px 0 14px; font-size: clamp(28px, 4vw, 46px); }
.nf-msg .lead { margin-left: auto; margin-right: auto; }
.nf-msg .actions { margin-top: 28px; }
/* track pages (/track/<slug>/, written by tools/tracks.py; app.js renderTrack makes the rows live). The band is the
   style page's band in the same colour: cover on the left, title and artist, then the facts as white tiles. */
.track-band > .page-head { padding-bottom: 40px; }
.track-hero {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); grid-template-areas: "cover id" "cover facts";
  grid-template-rows: 1fr auto; column-gap: 40px; margin-top: 26px;
}
.track-cover { grid-area: cover; width: 300px; height: 300px; object-fit: cover; display: block; background: linear-gradient(135deg, #FFD6F6, #D3EEFF); box-shadow: 0 22px 60px rgba(20, 9, 58, .28); }
.track-id { grid-area: id; align-self: end; min-width: 0; }
.track-eyebrow { font: 400 13px/1.4 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: #fff; }
.track-title { margin: 10px 0 6px; color: #fff; font-size: clamp(40px, 5.4vw, 72px); line-height: 1.02; overflow-wrap: anywhere; text-shadow: 0 2px 18px rgba(20, 9, 58, .18); }
.track-artist { font-size: clamp(18px, 1.8vw, 24px); font-weight: 600; color: #fff; }
.track-facts { grid-area: facts; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; }
.track-facts .fact { min-width: 108px; padding: 10px 16px 12px; background: #fff; }
.track-facts dt { font: 400 11px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.track-facts dd { margin: 5px 0 0; font: 700 30px/1 var(--mono); color: var(--ink); }
.track-facts dd small { display: block; margin-top: 6px; font: 500 13px/1.2 var(--sans); color: var(--muted); }
/* white is too faint on mint and cyan: ink there, and the small line in ink on pink (as the style band) */
.style-band.c2 .track-title, .style-band.c4 .track-title, .style-band.c2 .track-artist, .style-band.c4 .track-artist { color: var(--ink); text-shadow: none; }
.style-band.c1 .track-eyebrow, .style-band.c2 .track-eyebrow, .style-band.c4 .track-eyebrow { color: var(--ink); }
@media (max-width: 760px) {
  .track-band > .page-head { padding-bottom: 24px; }
  .track-hero { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: "cover id" "facts facts"; grid-template-rows: auto auto; column-gap: 16px; margin-top: 6px; }
  .track-cover { width: 112px; height: 112px; box-shadow: 0 12px 30px rgba(20, 9, 58, .25); }
  .track-eyebrow { font-size: 11px; letter-spacing: .16em; }
  .track-title { margin-top: 6px; font-size: clamp(26px, 7.4vw, 34px); }
  .track-title.long { font-size: clamp(20px, 5.6vw, 24px); }  /* a long title (a remix's name) stays within four lines */
  .track-artist { font-size: 16px; }
  .track-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
  .track-facts .fact { min-width: 0; padding: 9px 12px 10px; }
  .track-facts dd { font-size: 24px; }
}
/* the page under the band: a blog post's three columns (.post-layout: contents, the track, share + styles + account) */
.track-lead { max-width: 820px; color: var(--ink); font-size: clamp(18px, 1.5vw, 21px); line-height: 1.6; }
.track-small { max-width: 820px; margin-top: 10px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
/* the style list's own note about the track, under the opening sentence */
.track-note { max-width: 820px; margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--pink); color: var(--text); font-size: 16px; line-height: 1.6; }
.track-note b { display: block; margin-bottom: 2px; font: 400 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.track-col .list { padding: 0; }  /* already inside the column */
.track-main { margin-top: 28px; border: 1px solid var(--line); }
.track-main .row { border-bottom: 0; }
@media (max-width: 760px) { .list.track-main .row { margin: 0; padding: 10px 12px 4px; } }  /* inside its frame (the other lists run to the edges) */
/* computers: the column is narrower than a style page, so the store logos fold behind ⋯ (as on tablets) and the
   title keeps its room; the preview badge stays. Opened, the logos show on a line under the track. */
@media (min-width: 1001px) {
  .track-col .row .links a { display: none; }
  .track-col .row .links a.free { display: inline-block; }
  .track-col .more { display: block; }
  .track-col .row.open { grid-template-columns: 30px 46px minmax(0, 1fr) auto; grid-template-areas: "num thumb info right" ". . links links"; row-gap: 0; }
  .track-col .row.open .num { grid-area: num; } .track-col .row.open .thumb { grid-area: thumb; }
  .track-col .row.open .info { grid-area: info; } .track-col .row.open .right { grid-area: right; }
  .track-col .row.open .links { grid-area: links; flex-wrap: wrap; padding: 8px 0 2px; }
  .track-col .row.open .links a { display: inline-flex; }
  .track-col .row.open:not(.now) { background: var(--bg-2); }
}
.track-col .toc-inline { margin: 34px 0 0; }
/* where to buy: big named buttons, the store logos as in the rows */
.buy { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 18px; }
.buy-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.buy-label { margin-right: 4px; font: 400 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.store { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 500 14px var(--sans); text-decoration: none; transition: background .15s, border-color .15s; }
.store:hover { border-color: var(--violet); background: var(--tint); }
.store i { width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.store.free { border-color: var(--green); background: var(--green); font-weight: 700; }
@media (pointer: coarse) { .store { min-height: 44px; } }
@media (max-width: 760px) { .buy { display: grid; gap: 14px; } }
/* the parts of the page */
.tsec { margin-top: 64px; scroll-margin-top: calc(var(--top-h) + 20px); }
.tsec h2 { margin-bottom: 14px; font-size: clamp(24px, 2.6vw, 34px); }
.tsec-lead { max-width: 760px; margin-bottom: 18px; color: var(--text); font-size: 17px; line-height: 1.6; }
.tsec-lead b { color: var(--pink-text); }
.tsec-note { max-width: 760px; margin-top: 12px; font: 400 12px/1.5 var(--mono); color: var(--muted); }
@media (max-width: 760px) { .tsec { margin-top: 48px; } }
/* who plays it: one line per DJ, with their sets */
.djs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--row); }
.djs li { display: grid; grid-template-columns: 170px 64px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--row); }
.dj { font-weight: 700; color: var(--ink); }
.dj-n { font: 400 12px var(--mono); color: var(--violet-text); }
.dj-sets { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .djs li { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; } .dj-sets { grid-column: 1 / -1; } }
/* the story: the blog's article text and video */
.tsec .article-body .video { margin: 26px 0 18px; }
.tsec .article-body p.sources { font-size: 14px; line-height: 1.6; color: var(--muted); }
/* credits: label and value */
.credits { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; border-top: 1px solid var(--row); }
.credits div { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--row); }
.credits dt { font: 400 12px/1.7 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.credits dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 760px) { .credits div { grid-template-columns: 100px minmax(0, 1fr); } }

/* ---------- Create my set (/create-my-set/: renderMaker in app.js, the engine in setmaker.js) ---------- */
.maker-page { padding-bottom: 0; }
.maker { margin: 40px auto 0; max-width: 980px; background: var(--bg-2); padding: 28px 30px 30px; display: grid; gap: 22px; }
.maker-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 24px; align-items: start; }
.maker-label b { display: block; font: 700 15px var(--mono); color: var(--ink); padding-top: 7px; }
.maker-label small { display: block; margin-top: 4px; font-size: 13px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.style-pick, .opts { display: flex; flex-wrap: wrap; gap: 8px; }
.pick, .opt { background: #fff; border: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.3; padding: 8px 14px; border-radius: 0; cursor: pointer; }
.pick:hover, .opt:hover { border-color: var(--violet); color: var(--ink); }
.pick.on, .opt.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.pick.on::before { content: attr(data-order); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; background: var(--pink); color: #fff; font: 700 11px/1 var(--mono); vertical-align: 1px; }  /* 1, 2, 3: the order of the journey */
.maker-go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.maker-go .hint { margin: 0; color: var(--muted); font-size: 14px; }
/* /record-my-set/: the recorder box (a .maker panel), its deep indigo band (status, glowing timer, waveform, meter), the
   saved recording with its tracklist, and what an earlier visit left in the browser. Neon on light, square corners. */
.rec-input { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.rec-input .rec-note { flex-basis: 100%; }
.rec-note { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-wrap: pretty; }
.rec select {
  padding: 8px 30px 8px 12px; font: 500 13px var(--mono); color: var(--ink); border: 1px solid var(--line); border-radius: 0; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314093A' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 11px center / 11px 7px;
}
.rec-band { background: var(--ink); color: #fff; padding: 18px 22px 16px; display: grid; gap: 10px; }
.rec-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rec-status { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #A99FD0; }
.rec-dot { display: inline-block; width: 10px; height: 10px; flex: none; }
.rec.waiting .rec-status { color: var(--cyan); }
.rec.waiting .rec-dot { background: var(--cyan); animation: rec-blink 1s steps(2) infinite; }
.rec.recording .rec-status { color: var(--pink); }
.rec.recording .rec-dot { background: var(--pink); animation: rec-blink 1s steps(2) infinite; }
.rec.idle.has-take .rec-status { color: #3DF2B0; }
.rec.idle.has-take .rec-dot { background: #3DF2B0; }
@keyframes rec-blink { 50% { opacity: 0; } }
.rec-timer { font: 700 clamp(30px, 4.6vw, 44px)/1 var(--mono); letter-spacing: -.02em; color: #A99FD0; font-variant-numeric: tabular-nums; }
.rec.recording .rec-timer { color: var(--pink); text-shadow: 0 0 18px rgba(255, 43, 214, .55), 0 0 2px rgba(255, 43, 214, .8); }
.rec.waiting .rec-timer { color: var(--cyan); text-shadow: 0 0 18px rgba(0, 194, 255, .5); }
.rec.idle.has-take .rec-timer { color: #3DF2B0; text-shadow: 0 0 18px rgba(61, 242, 176, .5); }
.rec-wave { display: block; width: 100%; height: 96px; }
.rec-meter-row { display: flex; align-items: center; gap: 12px; }
.rec-meter { display: block; flex: 1; min-width: 0; height: 12px; }
.rec-db { font: 400 12px var(--mono); color: #A99FD0; min-width: 7ch; text-align: right; }
.rec-go { align-items: center; }
.rec-auto-wrap { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.rec-hint { margin: 0; padding: 12px 14px; background: #fff; border: 1px solid var(--line); color: var(--text); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.rec-hint.bad { color: var(--pink-text); }
.rec-hint.good { color: var(--green-text); }
.rec-saved, .rec-left { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.rec-name { font-size: clamp(20px, 2.2vw, 26px); margin-top: 6px; overflow-wrap: anywhere; }
.rec-meta { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.rec-saved-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rec-left .linklike { font-size: 13px; }
.rec-left ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rec-left li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 14px; }
.rec-left li b { font-weight: 600; overflow-wrap: anywhere; }
.rec-left li span { color: var(--muted); }
@media (max-width: 760px) {
  .rec-band { padding: 14px 14px 12px; }
  .rec-wave { height: 72px; }
}
.made { padding: var(--sec-y) 0 24px; }
.made-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; }
.made-text h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 8px 0 10px; }
.made-text .set-sum { margin: 0; color: var(--text); font-size: 16px; line-height: 1.5; max-width: 720px; }
.curve { width: 240px; height: 56px; flex: none; overflow: visible; }
.curve polyline { fill: none; stroke: var(--violet); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.curve text { font: 400 10px var(--mono); fill: var(--muted); }
.made-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; align-items: center; }
.made-lock { color: var(--muted); font-size: 14px; }
.made .list { margin-top: 18px; }
.list.timed .row { grid-template-columns: 46px 46px minmax(0, 1fr) auto auto; }  /* the start time (57:00) needs more than a row number */
.made-note { margin: 18px auto 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.made .set-link { display: block; width: 100%; max-width: 1180px; margin: 10px auto 0; padding: 10px 12px; border: 1px solid var(--line); font: 400 13px var(--mono); }
.maker-more { padding-top: var(--sec-y); }  /* air above "How it works" on the maker pages, with or without a result on the page */
.steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.steps.four .step { padding: 24px 22px; }
.steps.four .step h3 { font-size: 20px; }
@media (max-width: 1000px) { .steps.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .maker { margin-top: 28px; padding: 20px 18px 22px; gap: 18px; }
  .maker-row { grid-template-columns: 1fr; gap: 8px; }
  .maker-label b { padding-top: 0; }
  .pick, .opt { padding: 8px 12px; font-size: 13px; }
  .steps.four { grid-template-columns: 1fr; }
  .list.timed .row { grid-template-columns: 46px 46px minmax(0, 1fr) auto; }
  .curve { width: 100%; max-width: 320px; }
  .made-head { align-items: flex-start; }
}
/* Change this track (a made set): the button on the row, and the drawer's lists (the Mixes well with look) */
.row .swap { width: 32px; height: 32px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; display: grid; place-items: center; border-radius: 0; padding: 0; }
.row .swap svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.row .swap:hover { color: var(--ink); border-color: #D9D0FF; }
#swapBody { flex: 1; overflow: auto; }
.swap-sec { font-size: 15px; margin: 18px 0 4px; }
.swap-use { padding: 7px 12px; font-size: 13px; white-space: nowrap; }
.mix-why.off { color: var(--muted); }
/* the home hero without its check lines: air between the paragraph and the two buttons */
.hero .lead + .hero-actions { margin-top: 34px; }
@media (max-width: 760px) { .hero .lead + .hero-actions { margin-top: 26px; } }
/* home: the DJ apps band under the hero ("Works with your DJ app"), the How it works band with its label */
.home-apps { padding: 6px var(--gutter) 0; text-align: center; }
.home-apps .app-logos { margin: 16px 0 0; padding: 30px 32px; }
.home-apps .app-logos .src { min-height: 30px; }
@media (max-width: 760px) {
  .home-apps .app-logos { padding: 24px 16px; }
  .home-apps .app-logos .logo-row { column-gap: 18px; row-gap: 12px; }
  .home-apps .app-logos .src i { height: calc(var(--h) * .7); }
  .home-apps .app-logos .src { min-height: 44px; min-width: 44px; justify-content: center; }
}
/* home: the style cards in one row that scrolls sideways (the About page's strip, bigger cards), then "See all N styles" */
.styles .home-strip { margin: 36px 0 22px; }
.styles .home-strip .scard { flex-basis: 250px; }
.styles .styles-all { margin-top: 4px; }
@media (max-width: 760px) {
  .styles .home-strip { margin: 26px 0 18px; }
  .styles .home-strip .scard { flex-basis: 200px; }
}
/* How it works: "Everything you can do here", feature cards in groups */
.feat-group { margin-top: 34px; }
.feat-group h3 { font: 400 13px/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 14px; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { background: var(--bg-2); padding: 22px 22px 20px; display: flex; flex-direction: column; }
.feat-ic { display: inline-flex; width: 28px; height: 28px; margin-bottom: 10px; color: var(--violet); }
.feat-ic svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feat h4 { font: 700 18px var(--mono); color: var(--ink); margin: 0 0 6px; text-wrap: balance; }
.feat p { margin: 0 0 12px; color: var(--text); font-size: 15px; line-height: 1.5; text-wrap: pretty; }
.feat .more-link, .feat .linklike { margin-top: auto; align-self: flex-start; font-size: 14px; font-weight: 600; }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; gap: 12px; } .feat { padding: 18px; } .feat-group { margin-top: 26px; } }
/* a made set's rows: the preview's waveform under the title, the played part in pink while it plays */
.row .wave { position: relative; display: block; width: 100%; max-width: 420px; height: 20px; margin: 3px 0 1px; --p: 0; }
.row .wave svg { display: block; width: 100%; height: 100%; }
.row .wave rect { fill: #D9D0FF; }
.row .wave .wave-on { position: absolute; inset: 0; clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0); }
.row .wave .wave-on rect { fill: var(--pink); }
.row.now .wave rect { fill: #C9BCFF; }
@media (max-width: 760px) { .row .wave { height: 16px; max-width: none; } }
/* the streaming apps of "Put it on my streaming app" (Create my playlist): an icon and the name */
.tiles.streams { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.tiles.streams .tile { justify-content: flex-start; }
/* Create my playlist: a shorter top, the result's head (name left, energy curve right at every width), the play and
   make-another buttons centred under it, the app buttons under the list */
.pl-page { padding-top: 22px; }
.pl-page .how-head h1 { margin-top: 0; }
.made-head.pl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px 24px; }
.made-head.pl-head .curve { width: clamp(130px, 28vw, 240px); max-width: none; }
.made-actions.pl-top { justify-content: flex-start; margin-top: 22px; }
.pl-export { margin-top: 14px; text-align: center; }
.pl-export-label { margin: 0 0 12px; color: var(--muted); font-size: 15px; }
.pl-export-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pl-app { display: inline-flex; align-items: center; gap: 10px; }
.pl-app .tile-logo { color: currentColor; }
.pl-export-lock { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
/* Create my playlist: the energy picker (a shape, or five points to drag) */
.curve-pick { display: grid; gap: 10px; }
.curve-draw { display: block; width: 100%; max-width: 420px; height: auto; background: #fff; border: 1px solid var(--line); touch-action: none; }
.curve-draw:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.curve-draw .band { fill: #F4EEFF; }
.curve-draw polyline { fill: none; stroke: var(--violet); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.curve-draw circle { fill: #fff; stroke: var(--violet); stroke-width: 2.5; cursor: grab; }
.curve-draw circle.at { stroke: var(--pink); }
.curve-draw circle:active { cursor: grabbing; fill: var(--pink); stroke: var(--pink); }
.curve-draw text { font: 400 10px var(--mono); fill: var(--muted); }
/* Record my set, the Mac app's page: price and request form left, the app's window right (the 3D vinyl behind it);
   a dark band of numbers; the features as picture and text rows; the comparison and the cards of How it works.
   The request form uses the newsletter box's row (.nl-row, .nl-msg, .nl-note). */
.rms-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 64px; padding-top: 64px; padding-bottom: var(--sec-y); }
.rms-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rms-badge { font: 700 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: #3DF2B0; padding: 8px 10px; }
.rms-hero h1 { margin: 16px 0 18px; }
.rms-hero .lead { text-wrap: pretty; }
.rms-price { display: flex; align-items: center; gap: 18px; margin: 30px 0 24px; }
.rms-price b { font: 700 clamp(46px, 5.2vw, 68px)/1 var(--mono); letter-spacing: -.03em; background: var(--neon); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: 4px; }
.rms-price span { color: var(--text); font-size: 16px; line-height: 1.45; }
.rms-req, .rms-done { display: grid; gap: 10px; max-width: 540px; scroll-margin-top: calc(var(--top-h) + 24px); }
.rms-demo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 4px; }
.rms-demo-row span { flex: 1 1 220px; color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.rms-app-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 14px; color: var(--text); }
.rms-app-pick small { color: var(--muted); font-size: 13px; }
.rms-app-pick select { padding: 9px 12px; border: 1px solid #8E86B5; border-radius: 0; background: var(--bg-2); font: 400 16px var(--sans); color: var(--text); }
@media (pointer: coarse) { .rms-app-pick select { min-height: 44px; } }
.rms-app-pick select:focus { outline: 2px solid var(--violet); outline-offset: 0; }
.rms-done { padding: 24px 26px; background: var(--bg-2); border-left: 4px solid #3DF2B0; }
.rms-done h2 { font-size: 26px; margin: 0; }
.rms-done p { margin: 0; color: var(--text); }
.rms-done b { overflow-wrap: anywhere; }
.rms-art { position: relative; }
.rms-vinyl { position: absolute; z-index: 0; width: 42%; height: auto; right: -2%; top: -21%; pointer-events: none; filter: drop-shadow(0 18px 24px rgba(123, 60, 255, .25)); animation: floaty 7s ease-in-out infinite alternate; }
.rms-window { position: relative; z-index: 1; margin: 0; box-shadow: 0 30px 80px rgba(20, 9, 58, .24), 0 0 0 1px rgba(20, 9, 58, .1); }
.rms-window img, .rms-pic img { display: block; width: 100%; height: auto; }
.still .rms-vinyl { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .rms-vinyl { animation: none; } }
.rms-stats { background: var(--ink); padding: 60px 0; }
.rms-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; text-align: center; }
.rms-stats b { display: block; font: 700 clamp(40px, 4.6vw, 60px)/1 var(--mono); letter-spacing: -.02em; color: var(--c); text-shadow: 0 0 26px var(--c); }
.rms-stats span { display: block; margin-top: 14px; color: #D9D2F5; font-size: 16px; line-height: 1.45; text-wrap: balance; }
.rms-stats .c1 { --c: #FF2BD6; } .rms-stats .c2 { --c: #00C2FF; } .rms-stats .c3 { --c: #3DF2B0; } .rms-stats .c4 { --c: #C9A7FF; }
.rms-features { padding: var(--sec-y) 0; background: var(--bg-2); }
.rms-features .lead { margin: 18px auto 64px; }
.rms-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 60px; margin-bottom: 76px; }
.rms-row.flip .rms-pic { order: 2; }
.rms-pic { margin: 0; padding: 24px; background: #fff; box-shadow: 0 10px 40px rgba(20, 9, 58, .08); }
.rms-pic.dark { padding: 0; background: var(--ink); }
.rms-text h3 { margin: 14px 0 12px; }
.rms-text p { margin: 0; color: var(--text); font-size: 17px; line-height: 1.6; text-wrap: pretty; }
.rms-safe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rms-safe article { padding: 28px; background: #fff; border-top: 4px solid; border-image: var(--neon) 1; }
.rms-safe h3 { font-size: 20px; margin: 0 0 10px; }
.rms-safe p { margin: 0; color: var(--text); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.rms-compare .compare th.us { font: 700 20px var(--mono); }
.rms-more { padding-top: var(--sec-y); }
.rms-more .app-logos { margin-top: 36px; }
.rms-more .app-logos .logo-row { justify-content: center; }
.src-card .rms-cost { margin: 0 0 12px; font: 700 13px/1.4 var(--mono); letter-spacing: .06em; color: var(--pink-text); }
@media (max-width: 1000px) {
  .rms-hero { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 44px; }
  .rms-art { max-width: 680px; }
  .rms-vinyl { width: 30%; right: 0; top: -12%; }
  .rms-stats-grid { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .rms-row { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-bottom: 56px; }
  .rms-row.flip .rms-pic { order: 0; }
  .rms-safe { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .rms-hero { padding-top: 32px; }
  .rms-price { gap: 14px; margin: 24px 0 20px; }
  .rms-price span { font-size: 15px; }
  .rms-vinyl { width: 32%; right: 0; top: -14%; }
  .rms-stats { padding: 48px 0; }
  .rms-stats span { font-size: 14px; }
  .rms-features .lead { margin-bottom: 40px; }
  .rms-pic { padding: 14px; }
  .rms-text p { font-size: 16px; }
  .rms-safe article { padding: 22px 20px; }
  .rms-compare .compare th.us { font-size: 16px; }
}