@font-face {
  font-family:"Bricolage Grotesque";
  /* Partial instance: wdth 96-100, wght 600-800, latin glyphs only - the
     only ranges this stylesheet uses (.h1 760/96 ... .q-a p 600). 116KB
     instead of 204KB; opsz is kept so every size renders as before. */
  src:url("../fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight:600 800; font-stretch:96% 100%; font-style:normal; font-display:swap;
}
@font-face {
  font-family:"DM Sans";
  src:url("../fonts/DMSans-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:"Geist Mono";
  src:url("../fonts/GeistMono-latin.woff2") format("woff2");
  font-weight:400 700; font-style:normal; font-display:swap;
  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;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg:#FFFFFF;
  --surface:#F5F5F2;
  --surface-2:#ECECE7;
  --line:rgba(12,12,14,.08);
  --line-strong:rgba(12,12,14,.14);
  --ink:#0C0C0E;
  --ink-2:#4F4F56;
  --ink-3:#6A6A72;       /* 5.3:1 on white */
  --dark:#0C0C0E;
  /* The app's five screen palettes (DesignTokens.Palettes) — used as
     accents only, never as text on white. */
  --lime:#D8F24B; --blue:#2F45FF; --orange:#F2542D; --purple:#7A5AF8; --green:#0F3B33;
  --radius:28px;
  --radius-sm:18px;
  --navH:72px;
  --shadow-sm:0 1px 2px rgba(12,12,14,.04), 0 4px 14px rgba(12,12,14,.05);
  --shadow-md:0 2px 6px rgba(12,12,14,.04), 0 18px 48px rgba(12,12,14,.10);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);   /* long, soft settle — the apple.com feel */
  --display:"Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
  --text:"DM Sans", system-ui, -apple-system, sans-serif;
  --mono:"Geist Mono", ui-monospace, Menlo, monospace;
}

*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--navH) + 12px); }
main { overflow-x:clip; }
body {
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--text); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font:inherit; }
:focus-visible { outline:2.5px solid var(--ink); outline-offset:3px; border-radius:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:20px; top:14px; z-index:80; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-weight:600; }

.wrap { width:100%; max-width:1200px; margin:0 auto; padding:0 24px; }
.sec { padding:clamp(80px,10vw,140px) 0; }
.sec--surface { background:var(--surface); }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1,h2,h3 { font-family:var(--display); font-weight:700; margin:0; text-wrap:balance; }
.h1 { font-size:clamp(46px,6.6vw,92px); line-height:.98; letter-spacing:-.04em;
      font-variation-settings:"wdth" 96, "wght" 760; }
.h2 { font-size:clamp(36px,4.6vw,62px); line-height:1.02; letter-spacing:-.035em;
      font-variation-settings:"wdth" 96, "wght" 740; }
.h3 { font-size:clamp(22px,1.9vw,27px); line-height:1.15; letter-spacing:-.022em;
      font-variation-settings:"wdth" 100, "wght" 700; }
.sub { font-size:clamp(18px,1.5vw,21px); line-height:1.55; color:var(--ink-2); max-width:56ch; margin:20px 0 0; text-wrap:pretty; }
.muted { color:var(--ink-3); }
.kicker {
  display:inline-flex; align-items:center; gap:8px; margin:0 0 20px;
  font-size:14px; font-weight:600; letter-spacing:-.005em; color:var(--ink-2);
}
.kicker::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 3px rgba(216,242,75,.35); }
.sec-head { max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.sec-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.sec-head--center .sub { margin-left:auto; margin-right:auto; }
.sec-head--row { max-width:none; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.sec-head--row > div { max-width:720px; }
/* Lime marker behind a phrase — the one bit of colour in a headline. */
.hl { background:linear-gradient(transparent 58%, var(--lime) 58%, var(--lime) 92%, transparent 92%) no-repeat left / 100% 100%;
      padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--text); font-weight:600; font-size:16.5px; letter-spacing:-.01em; line-height:1.2;
  padding:16px 26px; border-radius:999px; border:1px solid transparent; cursor:pointer;
  transition:transform .18s var(--ease), background-color .18s, border-color .18s, box-shadow .18s;
  white-space:nowrap;
}
.btn svg { width:18px; height:18px; flex:none; }
.btn--primary { background:var(--ink); color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 22px rgba(12,12,14,.18); }
.btn--primary:hover { transform:translateY(-1px); box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 12px 30px rgba(12,12,14,.26); }
.btn--ghost { background:#fff; color:var(--ink); border-color:var(--line-strong); }
.btn--ghost:hover { background:var(--surface); transform:translateY(-1px); }
.btn--lime { background:var(--lime); color:var(--ink); }
.btn--lime:hover { transform:translateY(-1px); box-shadow:0 12px 30px rgba(216,242,75,.35); }
.btn--sm { padding:11px 18px; font-size:15px; }
.btn--wide { width:100%; }

/* Official Apple badge, native aspect ratio, never restyled. */
.badge-link { display:inline-flex; border-radius:12px; transition:transform .18s var(--ease); }
.badge-link:hover { transform:translateY(-1px); }
.appstore-badge { display:block; width:180px; height:60px; }

.grp { border:0; margin:0; padding:0; min-width:0; }
.grp-name { display:block; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin-bottom:12px; }
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.chips input { position:absolute; opacity:0; pointer-events:none; }
.chip { display:inline-flex; align-items:center; padding:10px 16px; border-radius:999px; font-size:15px; font-weight:500; cursor:pointer;
  background:#fff; border:1px solid var(--line-strong); color:var(--ink); user-select:none;
  transition:background .15s, color .15s, border-color .15s, transform .15s; }
.chip:hover { border-color:var(--ink); }
.chips input:checked + .chip { background:var(--ink); color:#fff; border-color:var(--ink); }
.chips input:focus-visible + .chip { outline:2.5px solid var(--ink); outline-offset:2px; }
.name-in { width:100%; max-width:420px; font:inherit; font-size:20px; font-weight:500; padding:16px 20px; border-radius:16px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.name-in::placeholder { color:var(--ink-3); }
.name-in:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(12,12,14,.08); }
/* Buttons: arrow nudges on hover. */
.btn svg { transition:transform .25s var(--ease-out); }
.btn:hover svg { transform:translateX(3px); }

/* ── Song maker ─────────────────────────────────────────────────────────── */
/* `hidden` is how the page shows one state at a time. Several of the rules
   below set display on things that are sometimes hidden (.chips is a flex
   row), and an author rule beats the browser's own [hidden] rule — so say
   it once, last word. */
[hidden] { display:none !important; }
main:focus { outline:none; }
h1:focus, h2:focus { outline:none; }
.top { padding:18px 0; }
.top .wrap, main > .wrap { max-width:808px; }
.top-row { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.top-logo { display:inline-flex; }
.top-logo img { height:34px; width:auto; }
main > .wrap { padding-top:clamp(20px,4vw,44px); padding-bottom:clamp(56px,8vw,96px); }

/* Without JavaScript: the App Store block. With it: the flow. The `js` class
   is set by the one inline script, before first paint. */
.nojs-cta { margin:28px 0 0; }
.app { display:none; }
html.js .app { display:block; }
html.js .nojs { display:none; }

/* The one live region: heard, not seen. What a wait says is also written
   into the visible wait state. */
#app-status { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* ── The form ───────────────────────────────────────────────────────────── */
.deal { margin-top:14px; }
.form-back { margin:18px 0 0; }
.form { margin-top:clamp(28px,5vw,44px); }
.step { border:0; margin:0; padding:0; min-width:0; }
/* A fieldset draws its legend ON its top border, so the rule between two
   steps runs out from the end of the step's own name. */
.step + .step { margin-top:clamp(32px,6vw,48px); border-top:1px solid var(--line); }
.step-name { display:flex; align-items:center; gap:12px; padding:0 16px 0 0; margin:0 0 20px;
  font-family:var(--display); font-size:clamp(22px,2.4vw,27px); line-height:1.15; letter-spacing:-.022em;
  font-variation-settings:"wdth" 100, "wght" 700; }
.step-n { flex:none; display:inline-grid; place-items:center; width:32px; height:32px; border-radius:50%;
  background:var(--lime); font-family:var(--mono); font-size:14px; font-weight:600; letter-spacing:0; }
.field { margin:0 0 22px; }
.field:last-child { margin-bottom:0; }
.lbl { display:block; font-size:15px; font-weight:600; margin:0 0 8px; }
.opt { margin-left:6px; font-size:13px; font-weight:500; color:var(--ink-3); }
.in { display:block; width:100%; font:inherit; font-size:17px; line-height:1.45; padding:14px 16px; border-radius:14px;
  border:1px solid var(--line-strong); background:#fff; color:var(--ink); transition:border-color .15s, box-shadow .15s; }
.in::placeholder { color:var(--ink-3); }
.in:focus { outline:none; border-color:var(--ink); box-shadow:0 0 0 4px rgba(12,12,14,.08); }
.ta { resize:vertical; min-height:76px; }
.name-in { max-width:none; }
.in[aria-invalid="true"], .name-in[aria-invalid="true"] { border-color:#B42318; box-shadow:0 0 0 4px rgba(180,35,24,.10); }
.hint, .fine, .count { margin:8px 0 0; font-size:14.5px; line-height:1.5; color:var(--ink-3); }
.count { font-family:var(--mono); font-size:12.5px; letter-spacing:-.01em; text-align:right; }
.err { margin:8px 0 0; font-size:14.5px; line-height:1.5; font-weight:500; color:#B42318; }
.err:focus { outline:none; }
.notice { margin:14px 0 18px; padding:12px 16px; border-radius:14px; background:var(--surface); font-size:14.5px; line-height:1.5; color:var(--ink-2); }
.picks { margin-top:12px; }
.picks .chip { padding:8px 14px; font-size:14px; font-family:inherit; }
.chip[aria-pressed="true"] { background:var(--ink); color:#fff; border-color:var(--ink); }
.hl-list { list-style:none; margin:0; padding:0; }
.hl-row + .hl-row { margin-top:16px; }
#hl-add { margin-top:16px; }
.grp + .grp { margin-top:26px; }
.form-foot { margin-top:clamp(32px,6vw,48px); }
.form-foot .fine { text-align:center; }
.form-foot .err { margin:0 0 14px; }
.btn[disabled] { opacity:.45; cursor:not-allowed; box-shadow:none; }
.btn[disabled]:hover { transform:none; }

/* ── Waiting ────────────────────────────────────────────────────────────── */
.state > .h3:first-child, .state > .kicker:first-child { margin-top:clamp(20px,4vw,36px); }
.bars { display:flex; align-items:center; gap:6px; height:56px; margin-top:28px; }
.bars i { display:block; width:6px; height:100%; border-radius:99px; background:var(--ink); transform:scaleY(.3); transform-origin:center; }
/* `go` is added by the script, and only when the visitor has not asked for
   reduced motion — the second of the two guards every animation here has. */
.bars.go i { animation:bar 1.1s var(--ease) infinite; }
.bars.go i:nth-child(2) { animation-delay:.12s; }
.bars.go i:nth-child(3) { animation-delay:.24s; }
.bars.go i:nth-child(4) { animation-delay:.36s; }
.bars.go i:nth-child(5) { animation-delay:.48s; }
.bars.go i:nth-child(6) { animation-delay:.60s; }
.bars.go i:nth-child(7) { animation-delay:.72s; }
@keyframes bar { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }

/* ── The lyrics ─────────────────────────────────────────────────────────── */
.song-title { font-size:clamp(28px,3.6vw,40px); }
.song-for { margin:8px 0 0; font-size:17px; color:var(--ink-2); }
.lyrics { margin-top:24px; padding:clamp(20px,4vw,36px); border-radius:var(--radius); background:var(--surface); }
.ly + .ly { margin-top:24px; }
.ly-kind { margin:0 0 6px; font-family:var(--mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
/* Lines arrive as text with line breaks; pre-line shows them without the
   script ever writing a <br>. Hindi, Japanese and Korean fall back to the
   system font — the self-hosted ones are Latin only. */
.ly-text { margin:0; white-space:pre-line; overflow-wrap:anywhere; font-size:18px; line-height:1.6; color:var(--ink); }
.review-next { margin-top:28px; }
.soon { margin-top:18px; padding:18px 20px; border-radius:var(--radius-sm); background:var(--surface); }
.soon:focus { outline:none; }
.soon-text { margin:0 0 14px; font-weight:600; }
.rewrite { margin-top:clamp(32px,6vw,48px); padding-top:clamp(28px,5vw,40px); border-top:1px solid var(--line); }
.rewrite-h { margin:0 0 16px; font-size:clamp(20px,2vw,24px); letter-spacing:-.02em; }
#rewrite-go { margin-top:14px; }
.rewrite[aria-busy="true"] .in { opacity:.6; }
.start-over { margin:32px 0 0; }
.linkish { padding:0; border:0; background:none; cursor:pointer; color:var(--ink-2); font-size:15px; font-weight:500;
  text-decoration:underline; text-underline-offset:3px; }
.linkish:hover { color:var(--ink); }

/* ── A message ──────────────────────────────────────────────────────────── */
.stop-more { margin:16px 0 0; padding:14px 18px; border-radius:var(--radius-sm); background:var(--surface); color:var(--ink-2); max-width:56ch; }
.stop-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.stop-badge { margin:28px 0 0; }

/* ── Account ────────────────────────────────────────────────────────────── */
.acct { position:relative; }
.acct-sum { list-style:none; cursor:pointer; padding:9px 16px; border-radius:999px; border:1px solid var(--line-strong);
  font-size:15px; font-weight:600; user-select:none; }
.acct-sum::-webkit-details-marker { display:none; }
.acct-sum:hover { background:var(--surface); }
.acct-panel { position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:min(300px, calc(100vw - 48px)); padding:18px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:#fff; box-shadow:var(--shadow-md); }
.acct-label { margin:0; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.acct-id { margin:4px 0 0; font-weight:600; overflow-wrap:anywhere; }
.acct-panel .btn { margin-top:14px; }

/* ── Sign-in dialog ─────────────────────────────────────────────────────── */
.dlg { width:min(440px, calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto;
  margin:auto; padding:clamp(22px,5vw,32px); border:0; border-radius:var(--radius); background:#fff; color:var(--ink); box-shadow:var(--shadow-md); }
.dlg::backdrop { background:rgba(12,12,14,.5); }
.dlg .h3 { padding-right:44px; }
.dlg .h3:focus { outline:none; }
.dlg-x { position:absolute; top:14px; right:14px; display:grid; place-items:center; width:40px; height:40px; padding:0;
  border:0; border-radius:50%; background:var(--surface); color:var(--ink); cursor:pointer; }
.dlg-x:hover { background:var(--surface-2); }
.dlg-sub { margin:10px 0 0; color:var(--ink-2); font-size:16px; }
.idps { display:grid; gap:10px; margin-top:22px; }
.idp { width:100%; background:#fff; color:var(--ink); border-color:var(--line-strong); }
.idp:hover { background:var(--surface); }
.idp--apple { background:#000; color:#fff; border-color:#000; }
.idp--apple:hover { background:#1c1c1e; }
/* The arrow nudge in the base stylesheet is for arrows, not for a logo. */
.idp svg, .idp:hover svg { width:20px; height:20px; transform:none; transition:none; }
.check { display:flex; align-items:center; gap:10px; margin-top:22px; font-size:15.5px; font-weight:500; cursor:pointer; }
.check input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--ink); }
.dlg .fine a { color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.dlg .err:focus { outline:none; }
#signin-redirect { margin-top:12px; }
.inapp { margin-top:20px; padding:16px 18px; border-radius:var(--radius-sm); background:var(--surface); }
.inapp-h { margin:0; font-weight:700; }
.inapp .btn { margin-top:12px; }
.dlg-app { margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.dlg-app .badge-link { margin-top:12px; }

/* ── Stage 2 (2026-10-11): paying, the song, My songs ───────────────────── */
/* Nothing below moves: no transition and no animation is added here, so the
   reduced-motion block at the bottom has nothing new to switch off. (The
   wait while a song is made is the .bars above, which already has both
   guards.) */

/* The account menu's balance and its other two ways out. */
.acct-songs { margin:10px 0 0; font-weight:600; }
.acct-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.acct-panel .acct-actions .btn { margin-top:0; }
.acct-end { margin:14px 0 0; padding-top:12px; border-top:1px solid var(--line); }

/* Back from the checkout. Above whichever state is showing. */
.paid { margin:clamp(18px,3vw,26px) 0 0; padding:16px 20px; border-radius:var(--radius-sm); background:var(--lime); color:var(--ink); }
.paid:focus { outline:none; }
.paid-text { margin:0; font-weight:600; }
.paid .fine { color:var(--ink); }
.paid a { text-decoration:underline; text-underline-offset:3px; }
/* A payment reference is read out to support, letter by letter. */
.ref { font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }

/* "1 song ready" — beside the button that uses it, and after a song that
   could not be made. */
.ready { margin:0 0 14px; font-weight:600; }
.ready::before { content:""; display:inline-block; width:8px; height:8px; margin-right:10px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 0 3px rgba(216,242,75,.35); vertical-align:middle; }
#stop-credit { margin:18px 0 0; }
.review-next .err:focus { outline:none; }

/* ── The song ───────────────────────────────────────────────────────────── */
.player { display:flex; align-items:center; gap:clamp(16px,3vw,28px); margin-top:24px; padding:clamp(16px,3vw,24px);
  border-radius:var(--radius); background:var(--surface); }
/* The cover arrives after the song, by a signed URL the script sets. */
.art { flex:none; width:clamp(104px,22vw,160px); height:auto; aspect-ratio:1; object-fit:cover; border-radius:var(--radius-sm);
  background:var(--surface-2); }
.player-main { flex:1; min-width:0; }
.audio { display:block; width:100%; }
.player-main .btn { margin-top:12px; }
.song-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
/* What Share and Download say back — once in a while a link to copy by hand. */
.said { margin-top:14px; overflow-wrap:anywhere; }
.words { margin-top:28px; }
.words .lyrics { margin-top:16px; }
.start-over .linkish + .linkish { margin-left:22px; }

/* ── My songs ───────────────────────────────────────────────────────────── */
.songs { list-style:none; margin:24px 0 0; padding:0; }
.songs li + li { margin-top:10px; }
.song-row { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:16px 20px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
.song-row:hover { background:var(--surface); }
.song-row-t { font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.song-row-s { font-size:14.5px; color:var(--ink-3); }

/* ── The paywall ────────────────────────────────────────────────────────── */
.dlg--wide { width:min(560px, calc(100vw - 32px)); }
.dlg .grp { margin-top:22px; }
/* Radios, drawn as cards: the same trick as .chips — the input is taken out
   of the flow and its label is what is seen, so arrow keys, Space and a
   screen reader all still meet a real radio group. */
.packs { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.packs input { position:absolute; opacity:0; pointer-events:none; }
.pack { display:flex; flex-direction:column; align-items:flex-start; gap:2px; height:100%; padding:16px 14px;
  border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:#fff; cursor:pointer; }
.pack:hover { border-color:var(--ink); }
.packs input:checked + .pack { border-color:var(--ink); box-shadow:0 0 0 2px var(--ink) inset; }
.packs input:focus-visible + .pack { outline:2.5px solid var(--ink); outline-offset:2px; }
.pack-n { font-weight:600; }
.pack-p { font-family:var(--display); font-size:24px; font-weight:700; line-height:1.2; letter-spacing:-.02em; }
.pack-u { font-size:13.5px; color:var(--ink-3); }
.pack-best { margin-top:6px; padding:3px 9px; border-radius:999px; background:var(--lime); font-size:12px; font-weight:600; }
.pay-acct { margin-top:18px; overflow-wrap:anywhere; }
.pay-acct b { color:var(--ink); font-weight:600; }
#paywall-go { margin-top:16px; }
.pay-terms { margin-top:18px; }

/* ── The two "are you sure" dialogs ─────────────────────────────────────── */
.dlg-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.btn--danger { background:#B42318; color:#fff; }
.btn--danger:hover { background:#912018; }

@media (max-width:520px) {
  .wrap { padding:0 18px; }
  .chip { padding:9px 14px; }
  .stop-actions .btn, .review-next .btn, #rewrite-go { width:100%; }
  .song-actions .btn, .dlg-actions .btn { width:100%; }
  .player { flex-direction:column; align-items:stretch; }
  .art { width:min(100%, 220px); }
  /* One pack to a row: name and price on a line, the rest under them. */
  .packs { grid-template-columns:1fr; }
  .pack { flex-direction:row; flex-wrap:wrap; align-items:baseline; gap:4px 12px; }
  .pack-best { margin-top:0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .btn, .btn svg, .badge-link, .chip, .name-in, .in { transition:none !important; }
  .btn:hover, .btn:hover svg, .badge-link:hover { transform:none !important; }
  .bars i, .bars.go i { animation:none !important; transform:scaleY(.6) !important; }
}