/* Self-hosted, Latin subsets of the app's variable fonts (OFL, see fonts/OFL.txt): the pages use Unbounded 500 and 800,
   Manrope 400, 500, 600 and 700; the whole weight axis is kept. Nothing is loaded from a third party. */
@font-face {
  font-family: "Unbounded"; src: url("/assets/fonts/unbounded-latin.woff2") format("woff2");
  font-weight: 200 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope"; src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #08040C; --ink: #FBE3F0; --ink-soft: #E8C7D8; --muted: #A98599;
  --pink: #FF2E88; --orange: #FF9E3D; --laser-l: #38BDF8;
  --line: rgba(255, 255, 255, 0.14);
  --font: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: Unbounded, "Arial Black", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink); font: 16px/1.55 var(--font);
}
a { color: var(--orange); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--laser-l); outline-offset: 3px; border-radius: 4px; }
/* one container on every page, the boards' (1240 px, 40 px sides; 16 px on phones): header, content and footer line up
   and the shared header stays put between the home, the music page and the 404 */
.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 700px) { .wrap { padding: 0 16px; } }
.beams { height: 3px; background: linear-gradient(90deg, var(--laser-l), var(--pink) 55%, var(--orange)); }

/* The header of the boards (Main.dc.html and Player.dc.html, founder 2026-10-24): the B mark and the wordmark, the
   section links, the language switch and Sign in, on one row; under 1100 px the text links go, under 700 px the wordmark.
   The mark is the app's B on black, and mix-blend-mode: screen drops its black into whatever is behind it. The header
   and its ancestors must therefore create no stacking context (no z-index, opacity, transform or isolation), or the
   mark blends with an empty layer and its black square shows; a page that draws under the header puts those layers
   before it in the document (see .hero-bg on the home). */
.bar { display: flex; align-items: center; gap: 28px; height: 84px; }
.brand { flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand:hover { color: #FFFFFF; }
.brand img { display: block; width: 44px; height: 44px; mix-blend-mode: screen; }
.brand-w { font: 800 16px var(--display); letter-spacing: 0.16em; text-transform: uppercase; }
.links { display: flex; gap: 26px; margin-left: 12px; }
.links a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; /* 44 px targets */
  color: var(--ink-soft); text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap;
}
.links a:hover, .links a[aria-current] { color: #FFFFFF; }
.end { margin-left: auto; display: flex; align-items: center; gap: 14px; }

.langs { display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.langs a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border-radius: 999px;
  font: 700 12px var(--display); letter-spacing: 0.08em; text-decoration: none; color: var(--muted);
}
.langs a:hover { color: var(--ink); }
.langs a[aria-current] { background: var(--ink); color: #1B0716; }

/* Sign in: shown, dimmed, not a link and does nothing until accounts exist (founder, 2026-10-24) */
.signin {
  display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 18px; white-space: nowrap;
  font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); background: transparent;
  border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 999px; cursor: not-allowed;
}
.signin span { opacity: 0.6; }
.signin small { color: var(--muted); font-size: 12px; font-weight: 500; }
.langs a:focus-visible, .signin:focus-visible { border-radius: 999px; }

@media (max-width: 1100px) { .links { display: none; } }
@media (max-width: 700px) {
  .bar { height: 68px; gap: 10px; }
  .brand img { width: 40px; height: 40px; }
  .brand { padding: 2px; margin: -2px; } /* a 44 px target around the 40 px mark, which stays where it was */
  /* the wordmark leaves the row but stays the link's name */
  .brand-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .end { gap: 8px; }
  .langs a { font-size: 11px; }
  /* Sign in over Coming soon, so the row fits a phone */
  .signin { flex-direction: column; justify-content: center; gap: 1px; padding: 0 14px; font-size: 13px; line-height: 1.1; }
  .signin small { font-size: 10px; }
}
@media (max-width: 359px) { .langs a { min-width: 38px; } .signin { padding: 0 10px; } }

main { flex: 1; }
.page { padding-top: 64px; padding-bottom: 64px; }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(2rem, 7vw, 3.5rem); line-height: 1.1; margin: 0 0 12px; }
h2 { font-family: var(--display); font-weight: 500; font-size: 1.25rem; margin: 28px 0 6px; }
.lede { color: var(--ink-soft); font-size: 1.15rem; max-width: 36rem; margin: 0 0 24px; }

/* Home A "Highway" (founder, 2026-10-24), ported from the board Main.dc.html (BeamLane,
   docs/superpowers/specs/site-reference/boards/). Every rule is scoped to body.home so the other pages keep their look,
   and the keyframes carry a home- prefix. The highway is drawn by highway.js on the two canvases; .hero-fb is the static
   background left in place without WebGL (home.js sets data-highway="off" and the canvases go).
   The hero's decorative layers (.hero-bg: static background, canvases, scrim) come before the header in the document and
   cover the box of the hero section (3 px down, under the beams line, and as tall): positioned without z-index, they
   paint under the header, which stays free of any stacking context so its mark blends with the highway. */
.home { -webkit-font-smoothing: antialiased; }
/* clip, not hidden: a scroll container here would take the reveals' view() timeline away from the page */
.home main { line-height: normal; overflow-x: hidden; overflow-x: clip; }
.home .top { position: absolute; top: 3px; left: 0; right: 0; }

.home .hero-bg {
  position: absolute; top: 3px; left: 0; right: 0; height: 900px; overflow: hidden;
  background: radial-gradient(120% 70% at 64% 30%, #3D0C30 0%, #15061B 38%, #08040C 70%);
}
.home .hero { position: relative; height: 900px; overflow: hidden; }
/* the section's box comes after the header and covers it: it lets the pointer through to the header's links, only
   its own copy and chip take it (a z-index on the header would do it too, but would break the mark's blend) */
.home .hero { pointer-events: none; }
.home .hero-copy, .home .hud { pointer-events: auto; }
.home .hero-gl, .home .hero-fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home .hero-bg[data-highway="off"] .hero-gl, .home .hero-bg[data-highway="off"] .hero-fx { display: none; }
/* until the chart is in, the opaque WebGL canvas would cover the static background with black */
.home .hero-bg:not([data-highway="on"]) .hero-gl, .home .hero-bg:not([data-highway="on"]) .hero-fx { visibility: hidden; }
.home .hero-fb { position: absolute; left: 40%; right: -12%; bottom: 0; height: 78%; perspective: 600px; perspective-origin: 50% 0%; }
.home .hero-fb i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: rotateX(58deg); transform-origin: 50% 100%;
  background:
    linear-gradient(to top, rgba(8, 4, 12, 0) 0%, rgba(8, 4, 12, 0) 35%, #08040C 96%),
    linear-gradient(90deg, #FF2E88 0 3px, rgba(46, 10, 38, 0.55) 3px 25%, rgba(255, 255, 255, 0.25) 25% calc(25% + 2px),
      rgba(46, 10, 38, 0.45) calc(25% + 2px) 50%, rgba(255, 255, 255, 0.25) 50% calc(50% + 2px),
      rgba(46, 10, 38, 0.55) calc(50% + 2px) 75%, rgba(255, 255, 255, 0.25) 75% calc(75% + 2px),
      rgba(46, 10, 38, 0.45) calc(75% + 2px) calc(100% - 3px), #FF2E88 calc(100% - 3px));
}
.home .hero-fb b {
  position: absolute; left: 0; right: 0; bottom: 22%; height: 6px; border-radius: 3px;
  background: linear-gradient(90deg, #FF2E88, #FF9E3D); box-shadow: 0 0 24px #FF2E88, 0 0 60px rgba(255, 46, 136, 0.6);
}
.home .hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 4, 12, 0.88) 0%, rgba(8, 4, 12, 0.55) 32%, rgba(8, 4, 12, 0) 52%),
    linear-gradient(to bottom, rgba(8, 4, 12, 0) 97%, #08040C 100%);
}
.home .hero-copy { position: absolute; z-index: 4; left: 0; right: 0; top: 200px; }
.home .hero-copy .wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.home .eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #FFB870;
}
.home .eyebrow i { flex: none; display: block; width: 28px; height: 2px; background: linear-gradient(90deg, var(--pink), var(--orange)); }
.home .h1 {
  margin: 0; max-width: 620px; font-family: var(--display); font-weight: 800; font-size: 68px; line-height: 1.02;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.home .h1 > span { display: block; }
.home .h1 .hot { background: linear-gradient(90deg, var(--pink), var(--orange)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home .lede { margin: 0; max-width: 500px; font-size: 18px; line-height: 1.6; color: var(--ink-soft); }
.home .ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.home .btn {
  display: inline-flex; align-items: center; gap: 12px; height: 56px; margin: 0; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none;
}
/* "Coming soon on Google Play" is a label, not a link (founder): drawn in the disabled idiom of Sign in, a dashed outline
   and dimmed text, with no gradient, no glow, no pointer and no hover; a plain paragraph, so it cannot take the focus */
.home .store {
  display: inline-flex; align-items: center; height: 56px; margin: 0; padding: 0 26px; border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.22); background: none; box-shadow: none; color: var(--muted);
  font-weight: 700; font-size: 16px; cursor: default;
}
.home .btn-s { border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ink); }
.home .btn-s:hover { color: #FFFFFF; border-color: #FF8FC0; }
.home .hud { position: absolute; z-index: 4; left: 0; right: 0; bottom: 40px; }
.home .hud .wrap { display: flex; }
.home .hud-chip {
  display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 12px; border-radius: 14px;
  background: rgba(18, 6, 26, 0.72); border: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.home .live { display: inline-flex; align-items: center; gap: 7px; font: 700 11px var(--display); letter-spacing: 0.12em; color: #FF8FC0; }
.home .live b { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 12px var(--pink); animation: home-pulse 1.2s ease-in-out infinite; }
@keyframes home-pulse { 50% { opacity: 0.35; } }
.home .hud-t { display: flex; flex-direction: column; gap: 2px; }
.home .hud-t strong { font-size: 15px; }
.home .hud-t > span { font-size: 12px; color: var(--muted); }
.home .hud-lv { font: 800 12px var(--display); letter-spacing: 0.1em; color: var(--pink); }

.home .sec { position: relative; padding: 130px 0; }
.home #your-music, .home #survival, .home #free { padding-top: 40px; }
.home #packs, .home #judges { padding-top: 60px; }
.home .label {
  display: flex; align-items: center; gap: 14px; margin: 0 0 26px;
  font: 700 12px var(--display); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
.home .label em { font-style: normal; color: var(--pink); }
.home .h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 52px; line-height: 1.05; letter-spacing: -0.005em; text-transform: uppercase; }
.home .body { margin: 26px 0 0; font-size: 18px; line-height: 1.7; color: var(--ink-soft); }
.home .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 72px; align-items: center; }
.home .pts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
.home .pts li { display: flex; gap: 14px; align-items: flex-start; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.home .pts li b {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px;
  background: linear-gradient(135deg, var(--pink), var(--orange)); box-shadow: 0 0 18px rgba(255, 46, 136, 0.45);
}
.home .stage { position: relative; padding: 20px 0 60px; }
.home .dev {
  position: relative; border-radius: 34px; padding: 11px; background: linear-gradient(160deg, #2A1530, #0D0812 60%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 120px rgba(255, 46, 136, 0.22), 0 20px 60px rgba(0, 0, 0, 0.6);
}
.home .dev img { display: block; width: 100%; height: auto; border-radius: 24px; }
.home .dev-p { position: absolute; width: 30%; left: -7%; bottom: 0; border-radius: 28px; padding: 8px; }
.home .dev-p img { border-radius: 21px; }
.home .glowline {
  position: absolute; left: 8%; right: 8%; bottom: 28px; height: 2px; filter: blur(1px);
  background: linear-gradient(90deg, transparent, var(--pink), var(--orange), transparent);
}
.home .steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.home .step {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 170px; padding: 26px 24px 24px; border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); border: 1px solid rgba(255, 255, 255, 0.08);
}
.home .step .n { font: 800 13px var(--display); letter-spacing: 0.1em; color: var(--pink); }
.home .step strong { font-size: 19px; line-height: 1.3; }
.home .step .tag { margin-top: auto; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); }
.home .diffs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.home .diffs i { font: 800 11px var(--display); font-style: normal; letter-spacing: 0.08em; padding: 6px 10px; border-radius: 8px; color: #1B0716; }
.home .d-easy { background: #4ADE80; }
.home .d-normal { background: #FFB33D; }
.home .d-hard { background: var(--pink); }

.home .pack-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; }
.home #packs .body { margin-top: 22px; max-width: 640px; }
.home .btn-listen { padding: 0 26px 0 8px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04); color: var(--ink); }
.home .btn-listen:hover { color: #FFFFFF; border-color: #FF8FC0; }
.home .btn-listen i {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--orange)); box-shadow: 0 0 24px rgba(255, 46, 136, 0.45);
}
.home .btn-listen i::after { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 11px solid #1B0716; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.home .packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); gap: 16px; margin-top: 54px; }
.home .pack {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; min-height: 330px; padding: 24px 22px 22px;
  border-radius: 24px; background: #12061A; border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink); text-decoration: none;
  transition: translate 0.35s ease, border-color 0.35s ease;
}
/* translate, not transform: the reveal animates transform, and an animation wins over a hover */
.home .pack:hover { translate: 0 -6px; border-color: rgba(255, 255, 255, 0.2); color: var(--ink); }
.home .pack-play {
  position: absolute; top: 20px; right: 20px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); transition: background 0.3s ease;
}
.home .pack-play i { width: 0; height: 0; margin-left: 3px; border-left: 12px solid var(--ink); border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.home .pack:hover .pack-play { background: linear-gradient(135deg, var(--pink), var(--orange)); border-color: transparent; }
.home .pack-glow { position: absolute; inset: auto -30% -45% -30%; height: 70%; border-radius: 50%; filter: blur(40px); opacity: 0.55; background: var(--glow); }
.home .pack-num { position: relative; font: 800 92px/0.9 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(251, 227, 240, 0.55); }
.home .pack-name { position: relative; font: 800 13px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.home .pack-count { position: relative; font-size: 13px; font-weight: 700; color: #FFB870; }
.home .pack ul { position: relative; list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 6px; }
.home .pack li { font-size: 14px; line-height: 1.35; color: var(--ink-soft); }
.home .pack li.more { color: var(--muted); }
.home .marq {
  margin-top: 64px; padding: 22px 0; overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* the titles twice and one gap after the last, so -50% lands exactly on the start of the second run */
.home .marq-in { display: flex; gap: 44px; width: max-content; padding-right: 44px; animation: home-marq 230s linear infinite; }
.home .marq-in > span { font: 800 26px var(--display); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(251, 227, 240, 0.5); }
.home .marq-in > span:nth-child(3n) { color: var(--ink); -webkit-text-stroke: 0; }
@keyframes home-marq { to { transform: translateX(-50%); } }
.home .credit { max-width: 760px; margin: 22px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }

.home #judges .body { margin-top: 22px; max-width: 700px; }
.home .judges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 16px; margin-top: 50px; }
.home .jt { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: 22px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.home .jt strong { font: 800 30px var(--display); letter-spacing: 0.02em; }
.home .jt > span { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.home .j-prism strong { background: linear-gradient(90deg, #FF4D6D, #FFB33D, #4ADE80, #38BDF8, #A78BFA); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home .j-sync strong { color: #FFD1E6; }
.home .j-drift strong { color: #FFB870; }
.home .j-lost strong { color: var(--muted); }
.home .tbar { position: relative; height: 64px; margin-top: 44px; overflow: hidden; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.home .tb { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); }
.home .tb-d { width: 100%; background: rgba(255, 184, 112, 0.16); }
.home .tb-s { width: 50%; background: rgba(255, 209, 230, 0.2); }
.home .tb-p { width: 22.2%; background: linear-gradient(90deg, rgba(255, 77, 109, 0.5), rgba(255, 179, 61, 0.5), rgba(74, 222, 128, 0.5), rgba(56, 189, 248, 0.5), rgba(167, 139, 250, 0.5)); }
.home .tb-0 { width: 2px; background: #FFFFFF; }
/* the marker sweeps from 3% to 97% of the bar on the compositor: the track moves by its own width */
.home .tsweep { position: absolute; top: 10px; bottom: 10px; left: 3%; right: 3%; animation: home-sweep 3.6s cubic-bezier(0.6, 0, 0.4, 1) infinite alternate; }
.home .tmark { width: 4px; height: 100%; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 16px #FFFFFF; }
@keyframes home-sweep { to { transform: translateX(100%); } }
.home .tlab { display: flex; justify-content: space-between; margin-top: 12px; font: 700 12px var(--display); letter-spacing: 0.1em; color: var(--muted); }
.home .tlab .f { color: var(--laser-l); }
.home .tlab .s { color: var(--orange); }

.home .surv {
  position: relative; overflow: hidden; padding: 72px 64px; border-radius: 36px; border: 1px solid rgba(255, 255, 255, 0.08);
  background: radial-gradient(90% 120% at 100% 0%, #3D0C30 0%, #12061A 55%, #08040C 100%);
}
.home .surv-word {
  margin: 0; font: 800 144px/0.92 var(--display); letter-spacing: -0.02em;
  background: linear-gradient(180deg, #FFFFFF 0%, #FF8FC0 55%, var(--pink) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.home .surv-split { gap: 56px; margin-top: 30px; align-items: end; }
.home .surv-sub { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 500; color: #FFB870; }
.home .surv .body { margin-top: 20px; }
.home .ladder { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.home .rung {
  display: flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 10px; box-shadow: 0 0 30px rgba(255, 46, 136, 0.18);
  font: 800 12px var(--display); letter-spacing: 0.08em; color: #1B0716;
}
.home .r-hc3 { width: 100%; background: linear-gradient(90deg, var(--pink), #FFFFFF); }
.home .r-hc2 { width: 88%; background: linear-gradient(90deg, var(--pink), #FFB870); }
.home .r-hc1 { width: 76%; background: linear-gradient(90deg, var(--pink), #FF4FA3); }
.home .r-n2 { width: 62%; background: #FFB33D; }
.home .r-n1 { width: 50%; background: #FFB33D; }
.home .r-e { width: 36%; background: #4ADE80; }

.home .frees { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 16px; margin-top: 50px; }
.home .free { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; border-radius: 22px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); }
.home .free svg { width: 30px; height: 30px; fill: none; stroke: #FF8FC0; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.home .free strong { font-size: 19px; }
.home .free > span { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.home .note { margin: 26px 0 0; font-size: 14px; color: var(--muted); }

.home .cta { position: relative; overflow: hidden; padding: 150px 0 140px; text-align: center; }
.home .cta-glow {
  position: absolute; left: 50%; top: 44%; width: 900px; height: 900px; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 46, 136, 0.28) 0%, rgba(150, 90, 255, 0.1) 40%, rgba(8, 4, 12, 0) 70%);
}
.home .cta .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.home .cta-logo { display: block; width: min(620px, 100%); height: auto; margin-bottom: -10px; mix-blend-mode: screen; }
.home .cta .h2 { max-width: 820px; }
.home .cta .body { margin: 0; max-width: 620px; }

/* reveals: scroll-driven where the browser has them, otherwise the content is simply there */
@supports (animation-timeline: view()) {
  .home .rv { animation: home-rv linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
  @keyframes home-rv { from { opacity: 0; transform: translateY(46px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1100px) {
  .home .h1 { font-size: 56px; }
  .home .surv-word { font-size: 92px; }
}
@media (max-width: 860px) { .home .surv-word { font-size: 64px; } }
@media (max-width: 700px) {
  .home .hero-bg, .home .hero { height: 760px; }
  .home .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(8, 4, 12, 0.94) 0%, rgba(8, 4, 12, 0.82) 46%, rgba(8, 4, 12, 0.5) 60%, rgba(8, 4, 12, 0) 74%),
      linear-gradient(to bottom, rgba(8, 4, 12, 0) 97%, #08040C 100%);
  }
  .home .hero-fb { left: -8%; right: -8%; height: 42%; }
  .home .hero-copy { top: 92px; }
  .home .hero-copy .wrap { gap: 14px; }
  .home .h1 { font-size: 34px; }
  .home .lede { font-size: 15px; }
  .home .btn, .home .store { height: 52px; padding: 0 22px; font-size: 15px; }
  .home .btn-listen { padding: 0 22px 0 8px; }
  .home .hide-sm, .home .hud { display: none; }
  .home .pack-head { gap: 24px; }
  .home .sec { padding: 84px 0; }
  .home .h2 { font-size: 34px; }
  .home .body { font-size: 16px; }
  .home .split { gap: 44px; }
  .home .dev-p { display: none; }
  .home .stage { padding: 0 0 30px; }
  .home .surv { padding: 44px 24px; border-radius: 26px; }
  .home .surv-word { font-size: 40px; }
  .home .rung { height: 34px; font-size: 11px; }
  .home .cta { padding: 100px 0; }
  /* smaller, so the glow fades out before the top of the section clips it (a hard edge on phones at 900 px) */
  .home .cta-glow { width: 600px; height: 600px; }
}
@media (max-width: 380px) { .home .h2 { font-size: 29px; } }
@media (prefers-reduced-motion: reduce) {
  .home .marq-in, .home .tsweep, .home .live b, .home .rv { animation: none; }
  .home .pack, .home .pack-play { transition: none; }
}

section[lang] p { color: var(--ink-soft); margin: 0 0 8px; }

.bottom { border-top: 1px solid var(--line); padding: 22px 0 36px; color: var(--muted); font-size: 0.92rem; }
.bottom p { margin: 0 0 6px; }
.bottom a { color: var(--ink-soft); }
.bottom a:hover { color: var(--ink); }

/* ---- Music page: the excerpt player (Player.dc.html of BeamLane's site-reference boards). Every class starts with pl-,
   so the page's styles stay apart from the home's. ---- */
.pl { --pl-panel: rgba(18, 6, 26, 0.78); --pl-dim: #7D6070; --pl-dark: #1B0716; --pl-hot: linear-gradient(90deg, #FF2E88, #FF9E3D); }
.pl button { font-family: inherit; }
.pl-stage {
  position: relative; min-height: 720px; overflow: hidden;
  background: radial-gradient(120% 70% at 66% 30%, #3D0C30 0%, #15061B 38%, var(--bg) 70%);
}
.pl-gl, .pl-fx { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
/* the static floor, shown instead of the highway without WebGL */
.pl-fb { display: none; position: absolute; left: 44%; right: -12%; bottom: 0; height: 78%; perspective: 600px; perspective-origin: 50% 0%; }
.pl-fb i {
  position: absolute; left: 0; right: 0; bottom: 0; height: 100%; transform: rotateX(58deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 96%); mask-image: linear-gradient(to top, #000 35%, transparent 96%);
  background: linear-gradient(90deg, #FF2E88 0 3px, rgba(46, 10, 38, 0.55) 3px 25%, rgba(255, 255, 255, 0.25) 25% calc(25% + 2px),
      rgba(46, 10, 38, 0.45) calc(25% + 2px) 50%, rgba(255, 255, 255, 0.25) 50% calc(50% + 2px),
      rgba(46, 10, 38, 0.55) calc(50% + 2px) 75%, rgba(255, 255, 255, 0.25) 75% calc(75% + 2px),
      rgba(46, 10, 38, 0.45) calc(75% + 2px) calc(100% - 3px), #FF2E88 calc(100% - 3px));
}
.pl-fb b {
  position: absolute; left: 0; right: 0; bottom: 22%; height: 6px; border-radius: 3px; background: var(--pl-hot);
  box-shadow: 0 0 24px #FF2E88, 0 0 60px rgba(255, 46, 136, 0.6);
}
.pl-nogl .pl-gl, .pl-nogl .pl-fx { display: none; }
.pl-nogl .pl-fb { display: block; }
.pl-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 4, 12, 0.9) 0%, rgba(8, 4, 12, 0.62) 30%, rgba(8, 4, 12, 0) 50%),
    linear-gradient(to bottom, rgba(8, 4, 12, 0) 93%, var(--bg) 100%);
}
.pl-copy { position: relative; z-index: 2; padding-top: 48px; padding-bottom: 60px; pointer-events: none; }
.pl-col { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 560px; pointer-events: auto; }
.pl-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #FFB870;
}
.pl-eyebrow i { width: 28px; height: 2px; background: var(--pl-hot); display: block; }
/* The title keeps one line per phrase in every language: its widest line, in em, measured with the font (EN "Five
   packs." 7.66, IT "Cinque pack." 8.88, ES "46 canciones." 9.95), sets the size that fits the column, never above the
   board's 64, 54, 38 and 33 px. */
.pl { --pl-fit: 7.9; }
html[lang="it"] .pl { --pl-fit: 9.1; }
html[lang="es"] .pl { --pl-fit: 10.2; }
.pl-h1 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: min(64px, 560px / var(--pl-fit)); line-height: 1.02;
  letter-spacing: -0.01em; text-transform: uppercase;
}
.pl-h1 > b { display: block; font-weight: 800; }
.pl-hot { background: var(--pl-hot); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pl-lede { margin: 0; max-width: 500px; font-size: 17px; line-height: 1.6; color: var(--ink-soft); }

.pl-np {
  width: 100%; max-width: 500px; margin-top: 8px; padding: 20px 22px 22px; border-radius: 22px; background: var(--pl-panel);
  border: 1px solid rgba(255, 255, 255, 0.09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: flex; flex-direction: column; gap: 12px;
}
.pl-np-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 11px var(--display); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
}
.pl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-dim); }
.pl-playing .pl-dot { background: var(--pink); box-shadow: 0 0 12px var(--pink); animation: pl-pulse 1.2s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: 0.35; } }
.pl-tag {
  margin-left: auto; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(255, 184, 112, 0.35); color: #FFB870;
  letter-spacing: 0.08em; font-size: 10px;
}
.pl-np-title { margin: 0; font: 800 26px/1.15 var(--display); letter-spacing: -0.005em; min-height: 1.15em; }
.pl-np-meta { font-size: 14px; color: var(--muted); min-height: 1.5em; }
.pl-np-lab { font-size: 12px; color: var(--muted); }
.pl-diffs { display: flex; gap: 8px; flex-wrap: wrap; }
.pl-df {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); color: var(--ink-soft);
  font: 800 11px var(--display); letter-spacing: 0.08em; cursor: pointer;
}
.pl-df:hover { border-color: rgba(255, 255, 255, 0.3); }
.pl-df i {
  font-style: normal; min-width: 24px; height: 22px; padding: 0 6px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; color: var(--pl-dark); font-size: 11px;
}
.pl-df-e i { background: #4ADE80; }
.pl-df-n i { background: #FFB33D; }
.pl-df-h i { background: var(--pink); }
.pl-df[aria-pressed="true"] { background: var(--ink); color: var(--pl-dark); border-color: var(--ink); }

.pl-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pl-ctas-c { justify-content: center; }
.pl-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 26px; border-radius: 999px;
  font-weight: 700; font-size: 16px; text-decoration: none; border: 0; cursor: pointer;
}
.pl-btn svg { width: 18px; height: 18px; flex: none; }
.pl-btn-p { background: var(--pl-hot); color: var(--pl-dark); box-shadow: 0 10px 40px rgba(255, 46, 136, 0.35); }
.pl-btn-p:hover { color: var(--pl-dark); box-shadow: 0 12px 50px rgba(255, 46, 136, 0.55); }
.pl-btn-s { border: 1px solid rgba(255, 255, 255, 0.22); color: var(--ink); background: transparent; }
.pl-btn-s:hover { color: #FFFFFF; border-color: #FF8FC0; }
/* "Coming soon on Google Play" is a label, not a link: a paragraph in the disabled idiom of Sign in, as on the home */
.pl-store {
  display: inline-flex; align-items: center; min-height: 56px; margin: 0; padding: 0 26px; border-radius: 999px;
  border: 1px dashed rgba(255, 255, 255, 0.22); color: var(--muted); font-weight: 700; font-size: 16px; cursor: default;
}
.pl-ico-pause, .pl-busy .pl-ico-play { display: none; }
.pl-busy .pl-ico-pause { display: block; }
.pl-credit { margin: 0; font-size: 13px; line-height: 1.6; color: var(--muted); max-width: 500px; }

.pl-list { position: relative; padding: 40px 0 80px; }
/* The keyboard's way past the 46 rows to the sticky player bar, which comes after them in the document: the list's first
   stop, hidden until it has the focus, then a pill over the top of the list that moves nothing. Its target is the bar. */
.pl-list > .wrap { position: relative; }
.pl-skip {
  position: absolute; left: 40px; top: -50px; z-index: 7; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 20px; border-radius: 999px; background: var(--ink); color: var(--pl-dark); font-weight: 700; font-size: 15px;
  text-decoration: none; white-space: nowrap;
}
.pl-skip:not(:focus) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); }
.pl-skip:focus-visible { border-radius: 999px; }
.pl-bar:focus { outline: none; }
.pl-bar:focus-visible { outline: 2px solid var(--laser-l); outline-offset: 3px; }
.pl-volnav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.pl-volnav a {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12); color: var(--ink-soft); text-decoration: none; font: 800 12px var(--display);
  letter-spacing: 0.06em;
}
.pl-volnav a:hover { border-color: rgba(255, 255, 255, 0.32); color: #FFFFFF; }
.pl-volnav a b { width: 10px; height: 10px; border-radius: 3px; display: block; }
.pl-note, .pl-msg { margin: 0; font-size: 14px; color: var(--muted); max-width: 44rem; }
.pl-msg { margin-top: 30px; color: var(--ink-soft); }
.pl-vol { scroll-margin-top: 20px; margin-top: 46px; }
.pl-vol-h { display: flex; align-items: flex-end; gap: 18px; padding: 0 6px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.pl-vol-num { font: 800 64px/0.85 var(--display); color: transparent; -webkit-text-stroke: 1.5px rgba(251, 227, 240, 0.55); }
.pl-vol-t { display: flex; flex-direction: column; gap: 6px; padding-bottom: 4px; }
.pl-vol-name { margin: 0; font: 800 15px var(--display); letter-spacing: 0.06em; text-transform: uppercase; }
.pl-vol-count { font-size: 13px; font-weight: 700; color: #FFB870; }
.pl-vol-bar { flex: 1; height: 3px; border-radius: 2px; margin-bottom: 10px; opacity: 0.8; }
.pl-cols, .pl-trk { display: grid; grid-template-columns: 52px minmax(0, 1fr) 70px 64px 168px; gap: 14px; }
.pl-cols {
  padding: 14px 16px 6px; font: 700 11px var(--display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pl-dim);
}
.pl-cols .r { text-align: right; }
.pl-trk {
  width: 100%; align-items: center; min-height: 58px; padding: 8px 16px; border: 0; border-radius: 14px;
  background: transparent; color: var(--ink); text-align: left; cursor: pointer; transition: background 0.2s ease; font-size: inherit;
}
.pl-trk:hover { background: rgba(255, 255, 255, 0.045); }
.pl-trk.pl-cur { background: linear-gradient(90deg, rgba(255, 46, 136, 0.16), rgba(255, 158, 61, 0.06) 60%, rgba(255, 255, 255, 0.02)); }
.pl-tn { position: relative; display: flex; align-items: center; font: 700 14px var(--display); color: var(--pl-dim); font-variant-numeric: tabular-nums; }
.pl-tn-p {
  display: none; width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
  background: var(--ink); color: var(--pl-dark);
}
.pl-tn-p svg { width: 14px; height: 14px; }
.pl-eq { display: none; align-items: flex-end; gap: 3px; height: 18px; }
.pl-eq i {
  width: 4px; border-radius: 2px; background: linear-gradient(180deg, #FF9E3D, #FF2E88); transform-origin: 50% 100%;
  animation: pl-eq 0.9s ease-in-out infinite alternate; animation-play-state: paused;
}
.pl-eq i:nth-child(1) { height: 60%; animation-delay: -0.3s; }
.pl-eq i:nth-child(2) { height: 100%; animation-delay: -0.6s; }
.pl-eq i:nth-child(3) { height: 40%; }
.pl-playing .pl-eq i { animation-play-state: running; }
@keyframes pl-eq { 0% { transform: scaleY(0.3); } 100% { transform: scaleY(1); } }
.pl-trk:hover .pl-tn-n, .pl-trk:focus-visible .pl-tn-n, .pl-trk.pl-cur .pl-tn-n { display: none; }
.pl-trk:hover .pl-tn-p, .pl-trk:focus-visible .pl-tn-p { display: inline-flex; }
.pl-trk.pl-cur .pl-eq { display: inline-flex; }
.pl-trk.pl-cur:hover .pl-eq, .pl-trk.pl-cur:focus-visible .pl-eq { display: none; }
/* the glyph says what a click does, as the row's name does: pause on the row whose song plays or loads, play elsewhere */
.pl-tn-pause, .pl-busy .pl-trk.pl-cur .pl-tn-play { display: none; }
.pl-busy .pl-trk.pl-cur .pl-tn-pause { display: block; }
/* the catalogue did not come: the rows stay as the page's list, dimmed and without a play glyph, under the message */
.pl-nolist .pl-trk { opacity: 0.55; cursor: default; }
.pl-nolist .pl-trk:hover { background: transparent; }
.pl-nolist .pl-trk .pl-tn-n { display: inline; }
.pl-nolist .pl-trk .pl-tn-p { display: none; }
.pl-tt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-tt-n { font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-trk.pl-cur .pl-tt-n { color: #FFFFFF; }
.pl-tt-m { display: none; font-style: normal; font-size: 12px; color: var(--muted); }
.pl-tt-e { font-style: normal; font-size: 13px; font-weight: 600; color: #FF8FC0; }
.pl-tt-e[hidden] { display: none; }
.pl-tb { font-size: 14px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pl-lv { display: flex; gap: 6px; justify-content: flex-end; }
.pl-lv i {
  font-style: normal; min-width: 44px; height: 24px; padding: 0 6px; border-radius: 7px; display: inline-flex;
  align-items: center; justify-content: center; gap: 4px; font: 800 10px var(--display); color: var(--pl-dark);
}
.pl-lv .e { background: #4ADE80; }
.pl-lv .n { background: #FFB33D; }
.pl-lv .h { background: var(--pink); }

.pl-bar-shell { position: sticky; bottom: 14px; z-index: 6; padding: 0 16px; margin-top: 10px; }
.pl-bar {
  max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.6fr) auto;
  align-items: center; gap: 22px; padding: 14px 20px; border-radius: 22px; background: rgba(18, 6, 26, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 46, 136, 0.08);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.pl-ctl { display: flex; align-items: center; gap: 8px; }
.pl-ib {
  width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
}
.pl-ib:hover { background: rgba(255, 255, 255, 0.07); color: #FFFFFF; }
.pl-ib svg { width: 20px; height: 20px; }
.pl-ib-p { width: 52px; height: 52px; background: linear-gradient(135deg, #FF2E88, #FF9E3D); color: var(--pl-dark); box-shadow: 0 8px 28px rgba(255, 46, 136, 0.4); }
.pl-ib-p:hover { background: linear-gradient(135deg, #FF4D9A, #FFB05A); color: var(--pl-dark); }
.pl-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pl-bar-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 1.4em; }
.pl-bar-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-seek { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-tm { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 40px; }
.pl-left { text-align: right; }
.pl-track { position: relative; flex: 1; height: 44px; display: flex; align-items: center; }
.pl-track-bg {
  position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.12); overflow: hidden;
}
.pl-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: var(--pl-hot); transition: transform 0.25s linear;
}
.pl-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pl-track:focus-within .pl-track-bg { outline: 2px solid var(--laser-l); outline-offset: 4px; }
.pl-volw { display: flex; align-items: center; gap: 8px; width: 150px; }
.pl-volw svg { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pl-vol-range { width: 100%; accent-color: var(--pink); height: 44px; margin: 0; cursor: pointer; }

.pl-band { position: relative; overflow: hidden; text-align: center; padding: 120px 0; }
/* the glow fades out before the band's edges, so the band has no visible border */
.pl-band-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 450px 50% at 50% 50%, rgba(255, 46, 136, 0.24) 0%, rgba(150, 90, 255, 0.08) 55%, rgba(8, 4, 12, 0) 100%);
}
.pl-band .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.pl-h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 46px; line-height: 1.05; text-transform: uppercase; }
.pl-body { font-size: 17px; line-height: 1.7; color: var(--ink-soft); margin: 0; max-width: 640px; }

@media (max-width: 1100px) {
  .pl-h1 { font-size: min(54px, min(560px, 48vw) / var(--pl-fit)); }
  .pl-cols, .pl-trk { grid-template-columns: 44px minmax(0, 1fr) 64px 60px 150px; }
}
/* from 701 to 1099 px the engine frames the highway at 72% of the width: the copy keeps to the left half */
@media (min-width: 701px) and (max-width: 1099px) { .pl-col { max-width: min(560px, 48vw); } }
@media (max-width: 900px) {
  .pl-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; }
  .pl-seek { grid-column: 1 / -1; order: 3; }
  .pl-volw { display: none; }
}
@media (max-width: 700px) {
  .pl-stage { min-height: 0; }
  .pl-gl, .pl-fx { top: auto; bottom: 0; height: 430px; }
  .pl-fb { left: -8%; right: -8%; height: 42%; }
  .pl-scrim {
    background: linear-gradient(to bottom, rgba(8, 4, 12, 0.96) 0%, rgba(8, 4, 12, 0.9) 52%, rgba(8, 4, 12, 0) 64%),
      linear-gradient(to bottom, rgba(8, 4, 12, 0) 95%, var(--bg) 100%);
  }
  .pl-copy { padding-top: 28px; padding-bottom: 440px; }
  .pl-col { gap: 16px; }
  .pl-h1 { font-size: min(38px, (100vw - 32px) / var(--pl-fit)); }
  .pl-lede { font-size: 16px; }
  .pl-np { padding: 16px 16px 18px; }
  .pl-np-title { font-size: 21px; }
  .pl-tag { margin-left: 0; }
  .pl-diffs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pl-df { justify-content: center; padding: 0 4px; gap: 5px; font-size: 10px; letter-spacing: 0.03em; }
  .pl-df i { min-width: 20px; padding: 0 4px; }
  .pl-btn, .pl-store { min-height: 52px; padding: 0 22px; font-size: 15px; }
  .pl-list { padding: 24px 0 60px; }
  .pl-skip { left: 16px; }
  .pl-cols { display: none; }
  .pl-trk { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; padding: 8px; }
  .pl-tb { display: none; }
  .pl-tt-n { white-space: normal; overflow: visible; line-height: 1.3; }
  .pl-tt-m { display: block; }
  .pl-lv i { min-width: 30px; height: 22px; font-size: 9px; }
  .pl-lv i b { display: none; }
  .pl-vol-num { font-size: 46px; }
  .pl-bar-shell { bottom: 8px; padding: 0 8px; }
  .pl-bar { padding: 10px 12px 6px; border-radius: 18px; gap: 6px 10px; }
  /* the pack and the Lyria credit wrap onto a second line rather than lose the credit's end to an ellipsis */
  .pl-bar-sub { white-space: normal; overflow: visible; line-height: 1.35; }
  .pl-ctl { gap: 2px; }
  .pl-ib-p { width: 48px; height: 48px; }
  .pl-h2 { font-size: 30px; }
  .pl-band { padding: 84px 0; }
}
@media (max-width: 380px) { .pl-h1 { font-size: min(33px, (100vw - 32px) / var(--pl-fit)); } .pl-lv i { min-width: 26px; } }
@media (prefers-reduced-motion: reduce) { .pl-playing .pl-dot, .pl-eq i { animation: none; } .pl-fill { transition: none; } }