/* Cantoro: dark stage, one accent color.
   Per site, change --accent and --accent-2 below (and site/static/og.png, favicon.svg) so it doesn't look like the other sites. */
/* Fonts are self-hosted (SIL OFL, from Google Fonts; latin + latin-ext subsets) so text paints without waiting on another origin. */
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-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; }
@font-face { font-family: "Big Shoulders Display"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("/static/fonts/big-shoulders-display-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/familjen-grotesk-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; }
@font-face { font-family: "Familjen Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/static/fonts/familjen-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-italic-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; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-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; }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #0b0b0c;
  --ink-2: #141416;
  --ink-3: #1e1e22;
  --line: #2c2c33;
  --cream: #f4f1ea;
  --muted: #a4a1aa;
  --text-2: #e6dff0; /* body text on dark panels */
  /* Page colors that flip in the light theme (bottom of this file). --ink and --cream stay fixed: they are the dark
     and light of buttons, the ticket and text on the accent color. */
  --bg: var(--ink);
  --text: var(--cream);
  --accent-text: var(--accent); /* accent-colored text on the page */
  --accent: #ff6b9a;   /* buttons, links, prices, highlights */
  --accent-2: #ffc857; /* the "AI" in the big headline, focus rings */
  --accent-3: #7cd4ff; /* small marks */
  --sky: #8fd3ff;
  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Familjen Grotesk", "Helvetica Neue", sans-serif;
  --r: 18px;
  --wrap: min(1180px, 100% - 40px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* clip, not hidden: hidden makes <body> a scroll container and breaks the sticky header */
}
body::before { /* film grain */
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 100; opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--text); }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.05; margin: 0 0 .5em; }
h2 { font: 900 clamp(34px, 5vw, 60px)/.95 var(--display); text-transform: uppercase; letter-spacing: .5px; }
h3 { font: 600 20px/1.2 var(--sans); }
em { font-family: var(--serif); font-style: italic; font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 200; background: var(--accent); color: var(--ink); padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---------- header ---------- */
.site-header {
  width: var(--wrap); margin: 0 auto; padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  position: relative; z-index: 5;
}
/* Laptops and up: the bar stays at the top while the page scrolls (phones have their own fixed bar below). */
@media (min-width: 961px) {
  html { scroll-padding-top: 80px; }
  .site-header { position: sticky; top: 0; z-index: 45; width: auto; padding: 12px max(20px, (100% - 1480px) / 2); background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
  .lang-banner { position: relative; }
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); text-decoration: none; }
.brand-mark { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 35%, transparent)); }
/* A long site name gives way (…) before the button does. */
.brand-word { font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand-word em { color: var(--accent-text); text-transform: none; font-size: 26px; margin-left: 2px; }
.site-nav { display: flex; flex: none; align-items: center; gap: 22px; font-size: 15px; }
.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--text); }
.site-nav .nav-cta { color: var(--ink); background: var(--accent); padding: 9px 16px; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.site-nav .nav-cta:hover { color: var(--ink); background: var(--cream); }
@media (max-width: 860px) { .site-nav .nav-link { display: none; } }
@media (max-width: 480px) {
  .site-header { gap: 10px; }
  .brand-word { font-size: 20px; } .brand-word em { font-size: 22px; }
  .site-nav .nav-cta { padding: 8px 12px; font-size: 14px; }
}

/* ---------- hero ---------- */
.hero {
  width: var(--wrap); margin: 0 auto; padding: 36px 0 70px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: start;
  position: relative;
}
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text);
  margin: 6px 0 18px;
}
.hero h1 {
  font: 900 clamp(64px, 10.5vw, 148px)/.84 var(--display);
  text-transform: uppercase; letter-spacing: -.5px; margin: 0 0 22px;
}
.hero h1 em { display: block; text-transform: none; font-size: .5em; line-height: 1; color: var(--accent-2); margin-top: 6px; letter-spacing: 0; }
/* --fit is the longest word's length (set in the template), so names like "Rumpelstiltskin" still fit the column. */
.hero-trend h1 { font-size: clamp(40px, min(8vw, calc(min(1180px, 100vw - 40px) / var(--fit, 1))), 110px); }
/* Chinese headings break at spaces and punctuation, not inside words (影片), unless a word can't fit. */
h1:lang(zh) { word-break: keep-all; overflow-wrap: anywhere; }
/* Korean breaks at spaces like English (부르는 stays whole); Japanese has no spaces, so headings break at phrase edges where the browser can (Chrome). */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }
h1:lang(ja), h2:lang(ja) { word-break: auto-phrase; }
/* The display font only has Latin; Chinese, Japanese, Korean and Thai fall back to system fonts whose glyphs fill the
   whole em box (Thai adds marks above and below), so the .84–1 Latin leading made wrapped lines touch and the first
   line hit the header. These headings get real leading in those languages; Latin pages keep the tight look. */
html:is(:lang(zh), :lang(ja), :lang(ko)) :is(h1, h2, .doc.guide h1, .doc h2, .sub-h, .how-grid b, .effect-card b, .sample-cap b, .hd-cap b) { line-height: 1.15; }
html:lang(th) :is(h1, h2, .doc.guide h1, .doc h2, .sub-h, .how-grid b, .effect-card b, .sample-cap b, .hd-cap b) { line-height: 1.25; }
.lede { font-size: 20px; max-width: 34ch; color: var(--text-2); }
.lede em { color: var(--accent-text); font-size: 1.15em; }
.facts { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--text-2); }

.hero-copy > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .08s; }
.hero-copy > *:nth-child(3) { animation-delay: .16s; }
.hero-copy > *:nth-child(4) { animation-delay: .24s; }
.hero-tool { animation: rise .8s .2s cubic-bezier(.2, .7, .2, 1) both; }
/* Mobile-first content must paint immediately: opacity entrance animations can delay LCP.
   Keep desktop motion; respect OS reduced-motion preference on every viewport. */
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-tool { animation: none !important; }
}

/* Kept as a no-CSS fallback link only: on phones the upload box itself is on the first screen (10-27 mobile layout). */
.hero-start { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 10px; }
  .lede { max-width: none; font-size: 18px; margin-bottom: 0; }
  .hero h1 { font-size: clamp(52px, 15vw, 96px); margin-bottom: 14px; }
  .hero-trend h1 { font-size: clamp(30px, min(15vw, calc((100vw - 40px) / (var(--fit, 1) * .46))), 96px); }
}

/* ---------- ticket (maker form) ---------- */
.ticket {
  background: var(--cream); color: var(--ink);
  border-radius: 22px; padding: 22px 22px 18px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06);
}
/* No tilt: it read as crooked, on phones (10-27 主人「手机页面生成部分歪了」) and on desktop (10-30「电脑版怎么会歪的」). */
.ticket::before, .ticket::after { /* perforation notches */
  content: ""; position: absolute; top: 56px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
}
.ticket::before { left: -11px; }
.ticket::after { right: -11px; }
.ticket-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 2px dashed rgba(13, 11, 18, .25);
}
.ticket-kicker { font: 900 22px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }

.ticket-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.ticket-steps-side { margin-top: 16px; }
.step-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.step-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.step-head .step-label { margin: 0; }
.step-head .play-hear { flex: none; padding: 6px 12px 6px 9px; font-size: 13px; }
.step-label span { display: inline-block; font: 900 15px/1 var(--display); background: var(--ink); color: var(--accent); padding: 4px 6px; border-radius: 6px; margin-right: 6px; }

.drop {
  display: block; position: relative; cursor: pointer;
  border: 2px dashed rgba(13, 11, 18, .3); border-radius: 14px;
  min-height: 108px; overflow: hidden; background: #fff8ec;
  transition: border-color .2s, background .2s;
}
.drop:hover, .drop.drag { border-color: var(--accent-2); background: #fff2df; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-empty { display: flex; align-items: center; gap: 14px; padding: 18px; font-size: 15px; }
.drop-empty small { color: #6e6578; }
/* "or drop it here": only where dragging a file is a thing (a mouse, a wide screen). */
.drop-or { font-weight: 400; color: #6e6578; }
@media (max-width: 960px), (pointer: coarse) { .drop-or { display: none; } }
.drop-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--ink); color: var(--accent); font-size: 26px; flex: none; }

/* Once a file is in: its name and length, a "Change" tag (a tap swaps it), and a bar while it uploads. */
.drop-audio { min-height: 84px; }
.drop-file { display: flex; align-items: center; gap: 14px; padding: 16px 142px 16px 18px; font-size: 15px; min-width: 0; }
.drop-file-text { display: grid; gap: 2px; min-width: 0; }
.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: #6e6578; font-variant-numeric: tabular-nums; }
.drop-tag { display: none; position: absolute; right: 12px; top: 50%; translate: 0 -50%; padding: 5px 10px; border-radius: 8px; background: rgba(13, 11, 18, .78); color: var(--cream); font: 700 12px/1.2 var(--sans); white-space: nowrap; pointer-events: none; }
.drop.has-file .drop-tag { display: block; right: 58px; }
.drop-remove { position: absolute; right: 10px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgba(13, 11, 18, .08); color: var(--ink); font: 400 24px/1 var(--sans); cursor: pointer; }
.drop-remove:hover { background: rgba(13, 11, 18, .16); }
/* Narrow phones: the file name needs the room; × (then pick again) or tapping the card changes the file. */
@media (max-width: 420px) { .drop.has-file .drop-tag { display: none; } .drop-file { padding-right: 60px; } }
.file-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(13, 11, 18, .1); }
.file-bar i { display: block; width: 0; height: 100%; background: var(--ink); transition: width .2s; }
.file-player { display: block; width: 100%; height: 40px; margin-top: 8px; }

.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; margin: 16px 0 12px; color: #3d3547; }
.consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }
/* Right under the button in small print, like RapDuo (10-28); tapping the button is the consent. */
.consent-line { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: #6e6578; text-align: center; text-wrap: balance; }
/* A real result above the button once a file is picked (studio.js). */
.proof { margin: 4px 0 14px; padding: 12px; border-radius: 14px; background: rgba(13, 11, 18, .05); text-align: center; }
.proof-cap { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: #4d4558; text-wrap: balance; }
.proof-cap b { color: var(--ink); }
.proof .hd-tracks { justify-content: center; flex-wrap: wrap; }
.proof .hd-arrow { color: var(--ink); }
.proof small { display: block; margin-top: 8px; font-size: 12px; color: #6e6578; }

.btn-go {
  width: 100%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px; border-radius: 14px;
  background: var(--ink); color: var(--cream);
  font: 900 24px/1 var(--display); text-transform: uppercase; letter-spacing: .5px;
  transition: transform .15s, background .15s;
}
.btn-go:hover { background: #241d30; transform: translateY(-1px); }
.btn-go:disabled { opacity: .6; cursor: progress; transform: none; }
.btn-go-price { background: var(--accent); color: var(--ink); padding: 6px 10px; border-radius: 8px; font-size: 20px; }
/* The Generate button says what it does, no price (RapDuo, 10-28): the price is the line under it. */
.go-row .btn-go { justify-content: center; }
.btn-small { font-size: 18px; padding: 12px 16px; justify-content: center; }
.form-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 14px; color: #b3261e; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.retry-line { margin: 6px 0 0; text-align: center; }
.retry-line .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #8f2541; border-radius: 10px; background: #fff0f4; color: #5b1730; font-weight: 700; text-decoration: none; }
.retry-line .link-btn:hover { background: #ffe0e9; color: #431024; }
.retry-line[hidden], .checkout-recovery[hidden] { display: none !important; }

/* ---------- answer block ---------- */
.answer {
  width: var(--wrap); margin: 0 auto; padding: 70px 0;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 60px; align-items: center;
  border-top: 1px solid var(--line);
}
.answer-inner h2 { margin-bottom: .4em; }
.answer-lead { font-size: 21px; color: var(--text-2); }
.answer-inner h3 { margin-top: 1.6em; }
.plain-steps, .beats { padding-left: 1.2em; }
.plain-steps li, .beats li { margin: 6px 0; }
.beats li::marker { color: var(--accent-text); font-weight: 700; }
@media (max-width: 860px) { .answer { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .answer-lead { font-size: 18px; } }

/* ---------- sections ---------- */
.how, .pricing, .faq-wrap, .more, .effects-more { width: var(--wrap); margin: 0 auto; padding: 70px 0; border-top: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.section-head h2 { margin: 0; }

.chip { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; align-self: flex-start; }
.chip-hot { background: var(--ink); color: var(--accent); }
.chip-cooling { background: rgba(13, 11, 18, .78); color: var(--sky); }
.chip-evergreen { background: rgba(13, 11, 18, .78); color: var(--cream); }
.eyebrow .chip-hot { background: var(--accent); color: var(--ink); }
.eyebrow .chip-cooling { background: var(--sky); color: var(--ink); }
.eyebrow .chip-evergreen { background: var(--cream); color: var(--ink); }

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 800px) { .price-grid { grid-template-columns: 1fr; } }
.price-card { position: relative; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; }
.price-pop { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px color-mix(in srgb, var(--accent) 8%, transparent); }
.price-flag { position: absolute; top: -12px; left: 24px; background: var(--accent); color: var(--ink); font: 700 12px/1 var(--sans); padding: 6px 10px; border-radius: 999px; letter-spacing: .08em; text-transform: uppercase; }
.price-name { font: 900 26px/1 var(--display); text-transform: uppercase; margin: 0; }
.price-amount { font: 900 64px/1 var(--display); margin: 10px 0 4px; color: var(--accent-text); }
.price-per { color: var(--muted); margin: 0 0 14px; font-size: 14px; }
.price-list { margin: 0; padding-left: 1.1em; font-size: 15px; }
.price-list li { margin: 4px 0; }

/* ---------- faq ---------- */
.faq { display: grid; gap: 10px; max-width: 860px; }
.faq details { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px 18px; }
.faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent-text); font: 900 24px/1 var(--display); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--text-2); }
/* Desktop: the heading on the left, the questions on the right, instead of a list that stops at 860px. */
@media (min-width: 1100px) {
  .faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr auto; column-gap: 56px; align-items: start; }
  .faq-wrap > .sec-tag { grid-column: 1; grid-row: 1; justify-self: start; }
  .faq-wrap > h2 { grid-column: 1; grid-row: 2; margin-top: 0; }
  .faq-wrap > .faq, .faq-wrap > .fold-btn { grid-column: 2; max-width: none; }
  .faq-wrap > .faq { grid-row: 1 / 4; }
  .faq-wrap:not(:has(> .sec-tag)) > h2 { grid-row: 1; }
  .faq-wrap > .fold-btn { grid-row: 4; }
}

/* Task pages: keep the accurate demo caveat alongside its playable result. */
.landing-sample-note { width: auto; margin: 12px 0 0; padding: 14px 18px; color: var(--text-2); background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.5; }
.landing-page .landing-intro .answer-inner { max-width: 80ch; }
.landing-page .landing-how h2 { margin-bottom: 22px; }

/* Links to the question pages as cards with an arrow, two or three to a row (rapduo's guide cards): big enough to tap. */
.more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
ul.more-list > li { margin: 0; }
.more-list a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; min-height: 54px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); color: var(--text); font-weight: 600; line-height: 1.3; text-decoration: none; transition: border-color .15s; }
.more-list a::after { content: "→"; flex: none; font-weight: 700; color: var(--accent-text); }
.more-list a:hover { border-color: var(--accent); color: var(--text); }
.crumbs { width: var(--wrap); margin: 0 auto; font-size: 14px; color: var(--muted); padding-top: 4px; }
.crumbs a { color: var(--muted); }

/* ---------- docs ---------- */
.doc { width: min(760px, 100% - 40px); margin: 0 auto; padding: 40px 0 80px; }
.doc h1 { font: 900 clamp(44px, 7vw, 76px)/.95 var(--display); text-transform: uppercase; }
.doc h2 { font: 900 30px/1 var(--display); margin-top: 1.6em; }
.doc li { margin: 6px 0; }

.spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .15); border-top-color: var(--accent); animation: spin 1s linear infinite; margin: 0 auto; }
/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); margin-top: 20px; padding: 46px 0 30px; }
.footer-grid { width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { font: 900 30px/1 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.footer-brand em { color: var(--accent-text); text-transform: none; }
.footer-h { font-weight: 700; margin: 0 0 8px; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-guides { grid-column: 1 / -1; }
.footer-guides .footer-links { columns: 280px 2; column-gap: 30px; }
.footer-guides .footer-links li { break-inside: avoid; margin: 0 0 12px; }
.footer-links li { margin: 6px 0; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.footer-language-nav { position: relative; display: flex; justify-content: flex-end; width: var(--wrap); margin: 28px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.footer-language-menu { position: relative; width: max-content; max-width: 100%; }
.footer-language-menu summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); background: transparent; font-size: 14px; line-height: 1.25; list-style: none; cursor: pointer; }
.footer-language-menu summary::-webkit-details-marker { display: none; }
.footer-language-menu summary svg { width: 16px; height: 16px; flex: none; }
.footer-language-menu summary span { flex: 1; }
.footer-language-menu summary:hover, .footer-language-menu[open] summary { border-color: var(--accent); background: var(--ink-2); }
.footer-language-menu summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.footer-language-menu[open] summary svg:last-child { rotate: 180deg; }
.footer-language-menu ul { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; min-width: 100%; max-height: min(60vh, 360px); overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.footer-language-menu li a { display: block; min-height: 44px; padding: 12px 14px; border-radius: 8px; color: var(--text); text-decoration: none; white-space: nowrap; }
.footer-language-menu li a:hover, .footer-language-menu li a[aria-current] { background: var(--ink-3); }
.footer-language-menu li a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 560px) {
  .footer-language-menu { width: 100%; }
  .footer-language-menu summary { width: 100%; }
}
.footer-fine { width: var(--wrap); margin: 30px auto 0; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- account additions ---------- */
.btn-inline { display: inline-flex; width: auto; text-decoration: none; margin-top: 4px; }

.form-msg.ok { color: #1f7a3a; }
.doc .form-msg.ok { color: var(--accent-text); }

/* ---------- misc ---------- */

.updated { font-size: 14px; margin: 10px 0 0; }

/* "What's new on this page" (catalog.js / guides.mjs changes) */
.changes { list-style: none; padding: 0; margin: .4em 0 0; }
.changes li { margin: 6px 0; }
.changes time { display: inline-block; min-width: 6.4em; color: var(--muted); font-variant-numeric: tabular-nums; }


.answer-solo { grid-template-columns: 1fr; }
.answer-solo .answer-inner { max-width: 820px; }

/* The hero floor is wider than the screen on purpose (perspective). Clipping on <html> keeps the page
   exactly screen-wide, which body overflow alone does not guarantee on iOS Safari. */
html { overflow-x: clip; }

/* ---------- play buttons (parts.mjs playBtn, app.js): one file each, filling up as it plays ---------- */
.play { --p: 0%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 11px; border-radius: 999px; border: 1px solid var(--line); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent) var(--p), var(--ink-2) var(--p)); color: var(--text); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.play:hover { border-color: var(--accent); }
.play:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.play i { flex: none; width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent currentColor; }
.play.playing i { width: 10px; height: 12px; border-width: 0 3px; border-color: currentColor; }
.play-main { border-color: var(--accent); background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, #fff) var(--p), var(--accent) var(--p)); color: var(--ink); }
.play-small { padding: 7px 12px 7px 10px; font-size: 13px; color: var(--muted); }

/* ---------- first-screen proof: the uploaded file and the song it became ---------- */
.hero-demo { margin: 18px 0 4px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 18px; }
.hd-tracks { display: flex; align-items: center; gap: 10px; }
.hd-arrow { font: 900 24px/1 var(--display); color: var(--accent-text); }
.hd-cap { max-width: 30ch; margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.hd-cap b { display: block; margin-bottom: 4px; font: 900 19px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--text); }
@media (max-width: 560px) {
  .hero-demo { margin-top: 12px; }
  .hd-cap { font-size: 12px; }
  .hd-cap b { font-size: 15px; margin-bottom: 2px; }
}

.drop-note { margin: 8px 2px 0; font-size: 12px; line-height: 1.4; color: #6e6578; }
.drop-note b { color: #3d3547; }

/* What you get + the refund promise, right above the fine print: small print, not another box. */

.link-btn { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--muted); text-decoration: underline; cursor: pointer; }
.link-btn:hover { color: #ff8a80; }
.link-btn:disabled { opacity: .6; cursor: progress; }
.form-msg.hint { color: #7a5b00; }

/* At-a-glance facts on effect pages. */
.glance { margin: 18px 0 30px; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.glance div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 10px 14px; background: var(--ink-2); }
.glance dt { font: 900 16px/1.4 var(--display); text-transform: uppercase; letter-spacing: .5px; color: var(--accent-text); }
.glance dd { margin: 0; font-size: 15px; color: var(--text-2); }
.glance-wide div { grid-template-columns: 180px 1fr; }
.glance-wide dt { font-size: 14px; }
@media (max-width: 520px) { .glance div { grid-template-columns: 1fr; gap: 2px; } }
.more-all { margin: 14px 0 0; font-weight: 600; }

/* Real results (parts.mjs sampleGallery): on the home page right under the generator. */
.gallery { width: var(--wrap); margin: 0 auto; padding: 10px 0 50px; }
.gallery-center { padding: 64px 0 70px; border-top: 1px solid var(--line); }
.gallery-center > h2 { text-align: center; margin-bottom: 30px; }
.gallery-center .sample-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 400px)); justify-content: center; }
/* Desktop: three cards a row, the last row centred (five results used to leave one card alone on the left). */
@media (min-width: 961px) {
  .gallery-center .sample-grid { display: flex; flex-wrap: wrap; justify-content: center; }
  .gallery-center .sample { flex: 0 1 calc((100% - 36px) / 3); min-width: 0; }
}
.sample-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.sample { margin: 0; padding: 18px; display: grid; gap: 12px; align-content: start; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
/* Title, then the settings and take on their own line: the same place in every card, however long the title. */
.sample-cap { display: grid; gap: 4px; }
.sample-cap b { font: 900 22px/1.05 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.sample-cap span { font-size: 13px; color: var(--muted); }
.sample-tracks { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sample-arrow { font: 900 20px/1 var(--display); color: var(--accent-text); }
.sample-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
/* The lyrics under a song (sample cards, a result, My songs): sung line by line, so the line breaks stay. */
/* Text colors are inherited: a result sits on the cream generator card, sample cards and My songs on dark panels. */
.sample-words summary { cursor: pointer; font-size: 14px; font-weight: 700; }
.sample-words pre { margin: 8px 0 0; max-height: 360px; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.55 var(--sans); }
@media (max-width: 960px), (pointer: coarse) { .sample-words summary { display: flex; align-items: center; min-height: 44px; } }
/* "Name sung wrong? Sing it again free" under a song (a result, My songs): colors inherited like the lyrics above. */
.resing { margin-top: 10px; }
.resing summary { cursor: pointer; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.resing[open] summary { text-decoration: none; }
.resing form { display: grid; gap: 10px; margin-top: 8px; }
/* var(--muted) is pale on the cream generator card: the panel's own text color, a little softer, reads on both. */
.resing p { margin: 0; }
.resing p.muted { color: inherit; opacity: .8; }
.resing label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
.resing input { width: 100%; max-width: 360px; box-sizing: border-box; font: inherit; font-size: 16px; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .2); background: #fff; color: var(--ink); }
.resing button { justify-self: start; min-height: 44px; }
.resing .form-msg:empty { display: none; }
/* On My songs' dark cards the button takes the accent, like the other buttons on dark panels. */
.song .resing .btn-go { background: var(--accent); color: var(--ink); }
.song .resing .btn-go:hover { background: var(--cream); color: var(--ink); }
@media (max-width: 960px), (pointer: coarse) { .resing summary { display: flex; align-items: center; min-height: 44px; } }
/* The AI track alone is the quiet third choice: a text button, its progress still filling behind it. */
.sample .play-small { border-color: transparent; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 24%, transparent) var(--p), transparent var(--p)); padding-inline: 6px; }
.sample .play-small span { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line); }
.sample .play-small:hover span { text-decoration-color: currentColor; }
/* Under each real result: its sound into the generator, then on to the upload (studio.js, app.js). */
.sample-use { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; margin-top: -4px; color: var(--accent-text); font-weight: 700; font-size: 14px; text-decoration: none; }
.sample-use:hover { text-decoration: underline; text-underline-offset: 3px; }
/* While a card plays: where it is, how long it is, and a bar to jump to any moment (app.js). */
.sample-seek { display: flex; align-items: center; gap: 10px; }
.sample-seek[hidden] { display: none; }
.sample-seek input { flex: 1; min-width: 0; height: 28px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sample-clock { flex: none; font: 600 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--muted); }
/* Phones only (the cards scroll sideways there): which card is in view, and the page with all of them. */
.sample-pager { display: none; }
.sample-foot { margin: 16px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.gallery-center .sample-foot { text-align: center; max-width: 760px; margin-inline: auto; }
@media (max-width: 560px) {
  .gallery-center { padding-top: 54px; }
  .gallery-center > h2 { text-align: left; margin-bottom: 20px; }
  .sample-cap b { font-size: 19px; }
}

/* ---------- question pages ---------- */
.doc.guide h1 { font-size: clamp(34px, 5.4vw, 54px); line-height: 1; }
.doc.guide .answer-lead { margin: 18px 0 16px; }
.guide-demo { margin: 34px 0 10px; display: flex; justify-content: center; }
.guide-studio { margin: 24px 0 36px; }
.guide-cta { display: inline-block; background: var(--accent); color: var(--ink); padding: 14px 20px; border-radius: 14px; font: 900 20px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; text-decoration: none; }
.guide-cta:hover { background: var(--cream); color: var(--ink); }

/* ---------- header: language, theme, account ---------- */
.site-nav { gap: 16px; }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--muted); }
.lang-menu summary:hover, .lang-menu[open] summary { color: var(--text); background: var(--ink-2); }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 150px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.lang-menu li a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--text); }
.lang-menu li a:hover, .lang-menu li a[aria-current] { background: var(--ink-3); }
.theme-btn { border: 0; background: none; color: var(--muted); width: 36px; height: 36px; border-radius: 10px; cursor: pointer; padding: 0; display: grid; place-items: center; flex: none; }
.theme-btn:hover { color: var(--text); background: var(--ink-2); }
.site-nav > .lang-menu .menu-ico, .site-nav > .theme-btn .menu-ico { width: 20px; height: 20px; }
.site-nav > .nav-link[aria-current] { color: var(--text); font-weight: 600; }
.site-nav .nav-account { color: var(--text); font-weight: 600; white-space: nowrap; }
.site-nav .nav-account.signed-in { color: var(--accent-text); }
.site-nav .nav-signout { border: 1px solid var(--line); border-radius: 999px; padding: 7px 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.site-nav .nav-signout:hover { color: var(--text); background: var(--ink-2); }
.site-nav .nav-signout:disabled, .site-nav .nav-menu [data-signout]:disabled { opacity: .6; cursor: wait; }
.nav-signout-status, .menu-signout-status { color: var(--muted); font-size: 12px; line-height: 1.35; }
.nav-signout-status { max-width: 180px; }
.nav-signout-status[hidden], .menu-signout-status[hidden] { display: none !important; }
.site-nav .nav-signout[hidden], .site-nav .nav-menu [data-signout][hidden] { display: none !important; }
.site-nav .nav-signin { border: 1px solid var(--accent); border-radius: 999px; padding: 7px 12px; color: var(--accent-text); font-size: 14px; font-weight: 700; white-space: nowrap; text-decoration: none; }
.site-nav .nav-signin[hidden], .menu-signin[hidden] { display: none !important; }
@media (max-width: 560px) {
  .site-nav { gap: 10px; }
  .site-nav .nav-cta { display: none; }
  .theme-btn { width: 28px; height: 28px; font-size: 14px; }
  .lang-menu summary { padding: 5px 7px; font-size: 13px; }
}
/* Tablets and phones use one menu for page links, the account action and sign-out; on phones the theme switch
   moves in too, leaving the site name, language and menu controls in the header. */
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; color: var(--text); font-size: 18px; line-height: 1; }
.nav-menu summary::-webkit-details-marker { display: none; }
.nav-menu[open] summary { background: var(--ink-3); }
.nav-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; list-style: none; margin: 0; padding: 6px; min-width: 220px; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
.site-nav .nav-menu a, .nav-menu .menu-theme .theme-btn { display: block; width: 100%; height: auto; padding: 10px 12px; border: 0; border-radius: 8px; color: var(--text); font: inherit; font-size: 16px; text-align: left; text-decoration: none; }
.site-nav .nav-menu a:hover, .nav-menu .menu-theme .theme-btn:hover { background: var(--ink-3); }
.site-nav .nav-menu button[data-signout] { display: block; width: 100%; height: auto; padding: 10px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.site-nav .nav-menu button[data-signout]:hover { background: var(--ink-3); }
.menu-signout { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.menu-who { padding: 10px 12px 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.menu-who + .menu-signout { margin-top: 0; border-top: 0; }
.menu-signin { padding-top: 4px; }
.site-nav .nav-menu .menu-signin a { background: var(--accent); color: var(--ink); font-weight: 700; text-align: center; }
.menu-signout-status { display: block; padding: 0 12px 8px; }
.site-nav .nav-menu > ul > li:first-child a { color: var(--accent-text); font-weight: 700; }
.menu-theme { display: none; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
/* app.js fitHeader() */
.site-header.nav-tools-out .site-nav > .nav-tool, .site-header.nav-links-out .site-nav > .nav-link { display: none; }
.site-header.nav-tools-out .nav-menu { display: block; }
/* Small laptops and tablets in landscape (961–1040px): only the page links move into the menu; sign-in and the upload button stay in the bar. */
@media (max-width: 1040px) {
  .site-nav > .nav-link { display: none; }
  .nav-menu { display: block; }
}
@media (max-width: 960px) {
  .site-nav > .nav-account, .site-nav > .nav-signout, .site-nav > .nav-signout-status, .site-nav > .nav-signin, .site-nav > .nav-cta, .site-nav > .theme-btn { display: none; }
  .menu-account, .menu-theme { display: block; }
}
/* Tablets and phones use one menu for the page links, account and sign-out. */
@media (max-width: 360px) { .brand-word { font-size: 18px; } .brand-word em { font-size: 20px; } }
@media (max-width: 340px) {
  .brand { gap: 8px; }
  .brand-mark { width: 30px; height: 30px; }
  .brand-word { font-size: 15px; }
  .brand-word em { font-size: 17px; }
}
.lang-banner {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 44px 10px 16px; background: var(--accent); color: var(--ink); font-size: 15px; font-weight: 600;
}
.lang-banner a { color: var(--ink); text-decoration: underline; }
.lang-banner button { position: absolute; right: 10px; background: none; border: 0; font-size: 22px; line-height: 1; cursor: pointer; color: var(--ink); }

/* ---------- studio (generator) ---------- */
.ticket-balance { font: 900 18px/1 var(--display); color: var(--ink); text-decoration: none; background: var(--accent); padding: 6px 10px; border-radius: 999px; }
.ticket-balance:hover { color: var(--ink); background: #fff; }
.effect-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: -4px 0 14px; }
.effect-tabs a { padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(13, 11, 18, .2); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.effect-tabs a[aria-current] { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; white-space: nowrap; transition: border-color .15s, background .15s; }
.seg span i { font-style: normal; font-size: 12px; color: #1f7a3a; }
.seg input:checked + span { border-color: var(--ink); background: var(--accent); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.seg-wide { margin-bottom: 10px; }
.seg-wide label { flex: 1; } .seg-wide span { text-align: center; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.style-chips { margin-top: 8px; }
.chip-opt { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.chip-opt span { display: block; padding: 6px 11px; border-radius: 999px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; }
.chip-opt[aria-pressed="true"] span { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.chip-opt:focus-visible { outline: none; }
.chip-opt:focus-visible span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.opt-grid { display: grid; gap: 10px; }
.opt { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: 70px minmax(0, 1fr); align-items: center; gap: 8px; }
.opt legend { float: left; padding: 0; font-size: 13px; font-weight: 700; color: #4d4558; }
.text-opt { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; font-weight: 700; color: #4d4558; }
.text-opt input, .text-opt textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 10px 12px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .2); background: #fff; color: var(--ink); }
.text-opt small { font-weight: 400; color: #6e6578; }
.text-opt textarea { resize: vertical; min-height: 120px; line-height: 1.45; }

.go-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 8px; }
.go-row.go-solo { grid-template-columns: minmax(0, 1fr); }

/* Longer labels (GESANG HINZUFÜGEN, ボーカルを付ける) take two lines on narrow phones instead of an ellipsis. */
.btn-go-label { min-width: 0; line-height: 1.05; text-wrap: balance; overflow-wrap: break-word; font-size: min(1em, 6.2vw); }
.btn-go-label:lang(ja) { word-break: auto-phrase; }
.studio.busy .btn-go { opacity: .6; cursor: progress; }
.cost-line { margin: 8px 0 0; font-size: 12px; line-height: 1.45; color: #6e6578; text-align: center; text-wrap: balance; }
.pack-line { margin: 10px 0 0; text-align: center; }
/* The refund promise right under the price button, where the decision to pay is made (10-27). */
/* Like RapDuo under its button (10-30 主人「总感觉太长了」): one line with the pack offer (the button already shows
   this song's price), then the small print. How Waffo checkout goes and the rights line come with the file, when the
   next click is the payment; the song generator has no file, so they show there from the start. The first-song refund
   stays in the refund policy, pricing and FAQ: no competitor promises it under the button. */
.pack-line:has(#pack-buy:not([hidden])) #song-credits, .pack-line #pack-sep { display: none; }
.ticket:has(.step-file:not([hidden])):not(:has(.drop-audio.has-file)) :is(.cost-line, .consent-line) { display: none; }
/* A pay button in the header once a file is in (studio.js syncHeader): no plus sign. */
.nav-cta.nav-cta-pay > [aria-hidden] { display: none; }
.site-header .site-nav > .nav-cta.nav-cta-tight { padding: 8px 10px; font-size: 12.5px; letter-spacing: -.01em; }
/* RapDuo's line under the button: what this song is in credits, then the bigger offer, one sentence (10-28). */
.pack-line { font-size: 13.5px; line-height: 1.5; color: #4d4558; text-wrap: balance; }
.pack-link { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
/* The site-wide a:hover is light text for the dark page; on the light card it made the link vanish. */
.pack-link:hover { color: var(--ink); text-decoration-thickness: 2px; }
.ticket .go-row { margin-top: 18px; }
.made-line { margin: 6px 0 0; font-size: 12px; color: #4d4558; text-align: center; }
.made-line::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #1f9d55; vertical-align: 1px; }
.need { margin-top: 10px; padding: 12px; border-radius: 12px; background: #fff2df; border: 1px solid rgba(13, 11, 18, .12); display: grid; gap: 8px; text-align: center; }
.need-text { margin: 0; font-weight: 700; font-size: 14px; }
.need .btn-go { justify-content: space-between; }
.need-packs { color: var(--ink); font-size: 14px; }
.result { margin-top: 12px; display: grid; gap: 10px; }

.song-wait { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 14px; background: var(--ink); color: var(--cream); }
.song-wait .spinner { flex: none; width: 34px; height: 34px; margin: 0; }
.song-wait b { font: 900 20px/1.1 var(--display); text-transform: uppercase; color: var(--accent); }
.song-wait p { margin: 2px 0 0; }
.result-h { margin: 0; font: 900 22px/1 var(--display); text-transform: uppercase; }
.result-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-actions .btn-go { width: auto; text-decoration: none; }
.result-actions a:not(.btn-go) { color: var(--ink); }
@media (max-width: 400px) { .go-row { grid-template-columns: minmax(0, 1fr); } .opt { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inner pages ---------- */
.wrap { width: var(--wrap); margin: 0 auto; padding: 30px 0 80px; }
.wrap.narrow { width: min(720px, 100% - 32px); }
.center { text-align: center; }
.page-head { margin-bottom: 26px; }
.page-head h1, .wrap > h1, .signin h1 { font: 900 clamp(44px, 7vw, 84px)/.92 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.page-head .lede, .signin .lede { max-width: 60ch; }
.sub-h { font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; margin: 40px 0 10px; }
.panel .sub-h { margin-top: 0; font-size: 24px; }
.wrap .form-msg { color: #ff8a80; }
.panel { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; margin-bottom: 18px; }
.btn-inline { display: inline-flex; width: auto; text-decoration: none; }

/* pricing */
.price-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }
.price-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .price-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid-2, .price-grid-4 { grid-template-columns: minmax(0, 1fr); } }
.price-card { display: flex; flex-direction: column; }
.express { margin-top: 8px; }
.express-note { margin: 6px 0 0; text-align: center; font-size: 12px; line-height: 1.4; opacity: .7; }
.go-row > .express { grid-column: -2 / -1; margin-top: 0; }
.price-card .price-amount { font-size: 54px; }
.price-amount small { font: 600 15px/1 var(--sans); color: var(--muted); margin-left: 4px; }
.price-credits { margin: 0 0 4px; font-weight: 700; }
.price-about { margin: 0 0 16px; font-size: 14px; color: var(--muted); }
.price-card .btn-go { margin-top: auto; background: var(--accent); color: var(--ink); }
.price-card .btn-go:hover { background: var(--text); color: var(--bg); }
.price-card .price-list { margin-bottom: 16px; }
.price-flag-save { background: var(--accent-2); }
.price-more { margin-top: 22px; }
/* "Just one video" above the packs (hotellobbyvideo's "Start with one video"), and the checkout promises under them. */
.one-video { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin: 4px 0 8px; padding: 22px 24px; border: 1px solid var(--accent); border-radius: var(--r); background: var(--ink-2); }
.one-video .price-name { margin-bottom: 8px; }
.one-video p.muted { margin: 0; max-width: 62ch; }
.trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; color: var(--muted); }
.trust li::before { content: "✓ "; color: var(--accent-text); font-weight: 700; }

/* The last call on effect pages, as on all three reference sites. */
.final { width: var(--wrap); margin: 0 auto; padding: 70px 0 60px; border-top: 1px solid var(--line); text-align: center; }
.final p { max-width: 46ch; margin: 0 auto 22px; font-size: 18px; color: var(--text-2); }
.final .final-go { display: flex; justify-content: center; align-items: center; gap: 14px 22px; flex-wrap: wrap; margin: 0 auto; max-width: none; }
.period-switch { margin: 6px 0 22px; }
.period-switch span { background: var(--ink-2); color: var(--text); border-color: var(--line); }
.period-switch span i { color: var(--accent-text); }
.period-switch input:checked + span { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.period-switch input:checked + span i { color: var(--ink); }
.gift-toggle { color: var(--text-2); font-size: 15px; margin-top: 18px; }
/* The site's own checkbox, not the browser's white square on the dark page. */
.gift-toggle input { appearance: none; display: grid; place-items: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--text-2); border-radius: 6px; background: transparent; cursor: pointer; }
.gift-toggle input:checked { background: var(--accent); border-color: var(--accent); }
.gift-toggle input:checked::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--ink); border-width: 0 2.5px 2.5px 0; rotate: 45deg; }
.gift-toggle input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pricing page, wide screens: heading on the left, cards or questions on the right (the home page FAQ's layout),
   so two plan cards and the FAQ don't sit against the left edge with a third of the row empty. */
@media (min-width: 1100px) {
  .split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-auto-rows: min-content; column-gap: 56px; align-items: start; margin-top: 40px; }
  .split > * { grid-column: 1; }
  .split > .sub-h { margin-top: 0; }
  .split > .price-grid, .split > .faq { grid-column: 2; grid-row: 1 / span 4; max-width: none; }
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; max-width: 620px; }

/* Guide tables (the apps compared page): wide, scrolls sideways on phones inside .table-wrap */
.table-wide { max-width: none; margin: 14px 0; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 8.5em; }
.data-table thead th { background: var(--ink-2); font-weight: 700; white-space: nowrap; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
/* Phones: one card per row, each value under its column name (guide.mjs sets data-label) */
@media (max-width: 560px) {
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; min-width: 0; }
  .data-table tr { padding: 6px 0; border-bottom: 1px solid var(--line); }
  .data-table tbody tr:last-child { border-bottom: 0; }
  .data-table th, .data-table td { padding: 4px 14px; border-bottom: 0; }
  .data-table th[scope="row"] { padding-top: 10px; font-size: 15px; }
  .data-table td { display: grid; grid-template-columns: 6.5em minmax(0, 1fr); gap: 10px; }
  .data-table td::before { content: attr(data-label); color: var(--muted); }
}

/* how it works + other effects on the home page */
.how-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: how; }
.how-grid li { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 22px; counter-increment: how; }
.how-grid li::before { content: "0" counter(how); display: block; font: 900 34px/1 var(--display); color: var(--accent-text); margin-bottom: 10px; }
.how-grid b { font: 900 24px/1.05 var(--display); text-transform: uppercase; }
.how-grid p { margin: 8px 0 0; color: var(--text-2); font-size: 15px; }
@media (max-width: 800px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.effect-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.effect-card { display: grid; gap: 6px; padding: 16px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.effect-card img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; }
.effect-card b { font: 900 22px/1 var(--display); text-transform: uppercase; }
.effect-card { position: relative; align-content: start; }
.effect-link { display: grid; gap: 8px; color: inherit; text-decoration: none; }
.effect-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* the whole card is the link */
.effect-card:has(.effect-link:hover) { border-color: var(--accent); }
.effect-icon { font-size: 22px; line-height: 1; }
.effect-card > span { font-size: 14px; color: var(--muted); }
.effect-card > .play { position: relative; z-index: 1; justify-self: start; margin-top: 4px; }
.effect-card > i { font-style: normal; font-weight: 700; color: var(--accent-text); }
.opt-sum, .nav-cta-short { display: none; }

/* sign-in */
.signin { max-width: 460px; margin: 20px auto; }
.signin form { display: grid; gap: 10px; }
.signin label { font-weight: 700; font-size: 14px; }
.signin input, .gift-form input { font: inherit; font-size: 17px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 16px; border-radius: 12px; background: #fff; color: #1f1f1f; font-weight: 700; text-decoration: none; border: 1px solid #dadce0; }
.btn-google:hover { color: #1f1f1f; background: #f4f4f4; }
.btn-google span { font: 900 20px/1 var(--sans); color: #4285f4; }
/* Before a guest's checkout: Google first (email filled in at checkout), or go on as a guest (studio.js gate). */
/* Guest about to pay (10-28, after RapDuo's): the song they're about to buy on top, one bold Google button in the
   accent, email and guest below. Cream like the ticket; opens with focus on the box, not on the close button. */
/* height: fit-content: iPhone Safari otherwise stretches a modal dialog to the full screen and spreads its rows apart. */
.gate { width: min(420px, calc(100vw - 32px)); height: fit-content; max-height: calc(100dvh - 24px); overflow-y: auto; align-content: start; padding: 22px 20px 16px; border: 0; border-radius: 22px; background: var(--cream); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .55); outline: none; }
/* Taller than the screen: iPhone Safari leaves the strip under its toolbar uncovered otherwise. */
.gate::backdrop { inset: -25vh 0; background: rgba(8, 6, 12, .65); backdrop-filter: blur(4px); }
.gate[open] { display: grid; gap: 12px; }
.gate-close { position: absolute; top: 6px; right: 8px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; font-size: 26px; line-height: 1; color: #5c5566; cursor: pointer; }
.gate-close:hover { background: rgba(13, 11, 18, .07); }
.gate-song { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 30px 0 4px; padding: 12px; border: 2px dashed rgba(13, 11, 18, .22); border-radius: 16px; background: #fff8ee; }
.gate-song-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); color: var(--accent); font-size: 22px; }
.gate-song-text { display: grid; gap: 2px; min-width: 0; }
.gate-song-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.gate-song-text small { font-size: 13px; line-height: 1.3; color: #6e6578; }
.gate-song-text .gate-wait { font-weight: 700; color: #1f6e3f; }
.gate.waiting :is(.gate-google, .gate-guest, .gate-pw-go) { opacity: .6; cursor: progress; }
.gate-song-price { padding: 6px 9px; border-radius: 8px; background: var(--ink); color: var(--accent); font: 800 15px/1 var(--sans); }
.gate-title { margin: 4px 0 0; padding-right: 40px; font: 700 24px/1.15 var(--sans); letter-spacing: -.01em; text-transform: none; color: var(--ink); }
.gate-song:not([hidden]) ~ .gate-title { padding-right: 0; }
.gate-text { margin: 0; font-size: 15px; line-height: 1.45; color: #4d4558; }
.gate-google { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; margin-top: 6px; padding: 10px 16px; border: 2px solid var(--ink); border-radius: 16px; background: var(--accent); color: var(--ink); font: 800 17px/1.1 var(--sans); text-decoration: none; box-shadow: 0 5px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.gate-google:hover { color: var(--ink); transform: translateY(-1px); box-shadow: 0 6px 0 var(--ink); }
.gate-google:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.gate-g { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; flex: none; }
.gate-email { justify-self: center; min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--ink); font: 700 15px/1.2 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* Email right in the box, like RapDuo: email, password, create account (or sign in). 16px so iPhone doesn't zoom. */
.gate-pw[hidden] { display: none; }
.gate-pw { display: grid; gap: 10px; }
.gate-pw input { width: 100%; min-height: 50px; padding: 12px 16px; border: 1.5px solid rgba(13, 11, 18, .25); border-radius: 14px; background: #fff; color: var(--ink); font: 16px/1.2 var(--sans); }
.gate-pw input:focus { border-color: var(--ink); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.gate-pw-msg { margin: 0; font-size: 14px; line-height: 1.4; color: #b4235a; }
.gate-pw-msg:empty { display: none; }
.gate-pw-go { min-height: 50px; border: 1.5px solid var(--ink); border-radius: 14px; background: var(--ink); color: var(--cream); font: 800 16px/1 var(--sans); cursor: pointer; }
.gate-pw-go:disabled { opacity: .6; cursor: progress; }
.gate-pw-more { margin: 0; text-align: center; font-size: 14px; color: #4d4558; }
.gate-pw-more a, .gate-link { color: var(--ink); font-weight: 700; }
.gate-link { padding: 6px 2px; border: 0; background: none; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate-guest { justify-self: center; min-height: 44px; padding: 8px 4px; border: 0; background: none; font: inherit; font-size: 14px; color: #6e6578; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.gate-email:not([hidden]) + .gate-pw[hidden] + .gate-guest { margin-top: -10px; }
@media (max-width: 360px) { .gate { padding: 18px 16px 12px; } .gate-song { gap: 10px; padding: 10px; } }
/* The pay window (studio.js paywall): RapDuo's cards, the led one with the sticker shadow and a filled button. */
.pay { width: min(440px, calc(100vw - 32px)); }
.pay[open] { gap: 10px; }
.pay .gate-title { padding-right: 40px; }
.pay-note { margin: -4px 0 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: #1f6e3f; }
.pay-note::before { content: "✓ "; }
.pay .gate-song, .deal .gate-song { grid-template-columns: auto minmax(0, 1fr); margin: 2px 0 0; padding: 10px 12px; }
.pay .gate-song-icon, .deal .gate-song-icon { width: 38px; height: 38px; font-size: 19px; }
.pay-starts { margin: -2px 0 2px; font-size: 13px; line-height: 1.4; color: #6e6578; }
.pay-cards { display: grid; gap: 12px; }
.pay-card { position: relative; display: grid; gap: 2px; padding: 14px 16px 16px; border: 2px solid rgba(13, 11, 18, .2); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .12s, transform .12s; }
.pay-card:hover { border-color: var(--ink); }
.pay-card.lead { margin: 6px 4px 6px 0; border-color: var(--ink); box-shadow: 4px 5px 0 var(--ink); }
.pay-card.lead:hover { transform: translateY(-1px); }
.pay-badge { position: absolute; top: -12px; right: 12px; padding: 3px 9px; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); color: var(--ink); font: 800 12px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.pay-name { font: 700 15px/1.3 var(--sans); }
.pay-price { display: flex; align-items: baseline; gap: 6px; }
.pay-price b { font: 800 30px/1.1 var(--sans); letter-spacing: -.01em; }
.pay-price small { font-size: 14px; color: #6e6578; }
.pay-card-note { font-size: 13px; line-height: 1.4; color: #6e6578; }
.pay-cta { display: grid; place-items: center; width: 100%; min-height: 46px; margin-top: 10px; border: 2px solid var(--ink); border-radius: 12px; background: none; color: var(--ink); font: 800 15px/1.1 var(--sans); cursor: pointer; }
.pay-card.lead .pay-cta { background: var(--accent); }
.pay-fine { margin: 2px 0 0; text-align: center; font-size: 12px; line-height: 1.4; color: #6e6578; }
.pay-all { justify-self: center; padding: 4px 2px 6px; color: var(--ink); font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.pay-all:hover { color: var(--ink); }
@media (min-width: 760px) {
  .pay { width: min(760px, calc(100vw - 48px)); padding: 24px 24px 18px; }
  .pay-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .pay-card { align-content: start; }
  .pay-cta { align-self: end; }
  .pay-card.lead { margin: 6px 4px 6px 0; }
}
/* The hidden deal: one sticker, the price in the title, one button. */
.deal-badge { justify-self: start; margin: 4px 0 0; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 8px; background: var(--accent); color: var(--ink); font: 800 13px/1.2 var(--sans); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); }
.deal-badge::before { content: "✦ "; }
.deal-go { width: 100%; font-family: var(--sans); cursor: pointer; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; margin: 16px 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.signin .btn-go, .gift-form .btn-go, .panel .btn-go { background: var(--accent); color: var(--ink); }

/* ---------- mixer (mixer.js): the uploaded file and one AI take together; dark on the ticket and on the page ---------- */
.mixer { display: grid; gap: 12px; padding: 16px; border-radius: 14px; background: var(--ink); color: var(--cream); container-name: mixer; container-type: inline-size; }
.mixer .muted, .mx-time { color: #a4a1aa; }
.mx-status, .mx-note { margin: 0; }
.mixer .seg span { background: transparent; color: var(--cream); border-color: #3a3a44; }
.mixer .seg input:checked + span { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.mx-transport { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mx-play { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--ink); font-size: 17px; cursor: pointer; }
.mx-play:disabled { opacity: .5; cursor: progress; }
.mx-time { font-size: 13px; font-variant-numeric: tabular-nums; }
.mixer input[type="range"] { width: 100%; margin: 0; accent-color: var(--accent); }
.mx-track { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; }
.mx-shift { display: grid; grid-template-columns: 96px auto minmax(0, 1fr) auto; align-items: center; gap: 6px; font-size: 14px; }
.mx-shift-controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mx-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-mute, .mx-nudge { min-width: 36px; height: 32px; border-radius: 8px; border: 1px solid #3a3a44; background: transparent; color: var(--cream); font: 700 14px/1 var(--sans); cursor: pointer; }
.mx-mute[aria-pressed="true"] { background: var(--accent-3); border-color: var(--accent-3); color: var(--ink); }
.mx-offset { text-align: center; font-size: 13px; font-variant-numeric: tabular-nums; }
.mixer .link-btn { color: var(--cream); }
.mx-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
.mx-actions .btn-go { width: auto; background: var(--accent); color: var(--ink); text-decoration: none; }
.mx-actions .btn-go:hover, .song-actions .btn-go:hover { background: var(--cream); color: var(--ink); }
@media (max-width: 600px) {
  .mx-track { grid-template-columns: 76px minmax(0, 1fr) auto; }
}
@container mixer (max-width: 560px) {
  .mx-shift { grid-template-columns: minmax(0, 1fr); }
  .mx-shift .mx-name, .mx-shift-controls, .mx-offset, .mx-shift .mx-reset { grid-column: 1 / -1; }
  .mx-shift-controls { width: 100%; justify-content: space-between; }
  .mx-offset { min-width: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .mx-shift .mx-reset { justify-self: end; }
}

@media (max-width: 960px), (pointer: coarse) {
  .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 0; }
  .play { min-height: 44px; }
  .lang-menu summary { display: inline-flex; align-items: center; min-height: 40px; }
  .seg span { display: flex; align-items: center; min-height: 44px; }
  .chip-opt span { display: flex; align-items: center; min-height: 44px; padding: 8px 11px; }
  .mixer input[type="range"] { min-height: 44px; }
  .mx-mute, .mx-nudge { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; height: auto; }
  .mx-wav { min-height: 44px; }
  .rec-start, .rec-stop { min-height: 44px; }
  .ai-words { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
}

/* account */
.account-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.account-head h1 { font: 900 clamp(44px, 7vw, 84px)/.92 var(--display); text-transform: uppercase; margin: 0 0 6px; }
.account-head p { margin: 0; }
.account-head .account-signout { margin-top: 10px; }
#who .account-guest-signin { display: table; margin-top: 10px; padding: 10px 18px; border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 700; text-decoration: none; }
.account-signout [data-signout] { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 14px/1 var(--sans); cursor: pointer; }
.account-signout [data-signout]:hover { background: var(--ink-2); }
.account-signout [data-signout][hidden] { display: none; }
.account-signout [data-signout]:disabled { opacity: .6; cursor: wait; }
.balance-card { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: var(--r); background: var(--ink-2); border: 1px solid var(--line); }
.balance-label { margin: 0; font-size: 13px; color: var(--muted); }
.balance-n { margin: 0; font: 900 40px/1 var(--display); color: var(--accent-text); white-space: nowrap; }
.balance-card .btn-go { width: auto; margin-left: auto; background: var(--accent); color: var(--ink); text-decoration: none; }
.notice { padding: 12px 16px; border-radius: 12px; background: var(--accent); color: var(--ink); font-weight: 600; }
.order-recovery[hidden] { display: none !important; }
.order-recovery > p { margin: 0 0 10px; }
.order-recovery .btn-go { width: auto; }
.order-recovery .link-btn { color: var(--ink); font-weight: 700; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.account-grid[hidden] { display: none !important; }
@media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }

.songs { display: grid; gap: 14px; }
.song { display: grid; gap: 6px; padding: 16px 18px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); }
.song p { margin: 0; }
.song-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.song-head b { font: 900 22px/1.1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.song-words { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.song-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 6px; font-size: 14px; }
.song-actions a { font-weight: 700; }
.song-actions .btn-go { width: auto; padding: 10px 14px; font-size: 16px; background: var(--accent); color: var(--ink); }
.song-mixer { margin-top: 8px; }
.song .song-wait { margin-top: 6px; }
.empty { padding: 30px; border: 1px dashed var(--line); border-radius: var(--r); text-align: center; }
.ledger, .gift-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; }
.ledger .plus { color: #4ccf7a; } .ledger .minus { color: var(--muted); }
.gift-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.gift-link { width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--text); }
.sub-actions { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; margin: 0; }
.account-side .panel p { margin: 0 0 10px; }

/* gift */
.gift-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.gift-form label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; }
.gift-form input { width: 140px; }
.gift-form .btn-go { width: auto; }
.gift-new { margin-top: 14px; display: grid; gap: 8px; }
.gift-new p { margin: 0; font-weight: 700; }
.gift-new .btn-go { width: auto; justify-self: start; }
.gift-badge { font-size: 64px; margin: 10px 0 0; }
#redeem .btn-go { background: var(--accent); color: var(--ink); }

/* mock checkout */
.mock .btn-go { max-width: 360px; background: var(--accent); color: var(--ink); }

/* ---------- light theme ---------- */
:root[data-theme="light"] {
  --bg: #f7f4ee;
  --text: #17151c;
  --ink-2: #ffffff;
  --ink-3: #efeae0;
  --line: #ddd6c8;
  --muted: #625d69;
  --text-2: #2f2b36;
  --accent-text: color-mix(in srgb, var(--accent) 40%, #1b1a10);
  color-scheme: light;
}
:root[data-theme="light"] body::before { opacity: .025; }
:root[data-theme="light"] .ticket { box-shadow: 0 24px 60px rgba(40, 30, 10, .16), 0 0 0 1px rgba(13, 11, 18, .08); }

:root[data-theme="light"] .lang-menu ul, :root[data-theme="light"] .nav-menu ul { box-shadow: 0 16px 40px rgba(40, 30, 10, .15); }
:root[data-theme="light"] .ledger .plus { color: #1f7a3a; }
:root[data-theme="light"] .wrap .form-msg { color: #b3261e; }
:root[data-theme="light"] .price-pop { box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(40, 30, 10, .1); }

/* "No lyrics? Let AI write them" under the lyrics box (studio.js). */
.ai-words { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--ink); font-weight: 700; }
.ai-words:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
@media (max-width: 960px) {
  /* What is said under the file scrolls into view above the bar, not under it (studio.js fileSay). */
  .file-msg, .retry-line { scroll-margin-bottom: 110px; }
}

/* Record instead of upload (the acapella tool, studio.js): a button, then the time, a level bar and Stop. */
.rec { display: grid; gap: 6px; margin-top: 10px; }
.rec-start { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 8px 16px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); font: 700 16px/1.2 var(--sans); cursor: pointer; }
.rec-start:hover { background: #fff2df; }
.rec-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e0245e; color: #fff; }
/* Recording: a big timer, level and Stop in the upload box's place (below); one thing on screen, like Vocuno. */
.rec-live:not([hidden]) { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--ink); color: var(--cream); }
.rec-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: #ff4d6d; animation: rec-blink 1s steps(2) infinite; }
@keyframes rec-blink { 50% { opacity: .25; } }
.rec-time { min-width: 3.2em; font: 700 26px/1 var(--sans); font-variant-numeric: tabular-nums; }
.rec-meter { flex: 1; min-width: 0; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .2); overflow: hidden; }
.rec-meter i { display: block; width: 0; height: 100%; background: var(--accent); transition: width .08s linear; }
.rec-meter.hot i { background: #ff4d6d; }
.rec-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.rec-stop, .rec-use { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 10px 16px; border: 0; border-radius: 12px; font: 700 17px/1.2 var(--sans); cursor: pointer; }
.rec-stop { background: #ff4d6d; color: #fff; }
.rec-stop::before { content: ""; width: 14px; height: 14px; border-radius: 3px; background: currentColor; }
.rec-use { background: var(--ink); color: var(--cream); }
.rec-discard { flex: none; min-height: 50px; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: 700 15px/1.2 var(--sans); text-decoration: underline; cursor: pointer; }
.rec-pending:not([hidden]) { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.rec-pending-hint { margin: 0; font-size: 14px; line-height: 1.45; }
.rec-preview { display: block; width: 100%; }
/* While recording or holding a take, the upload box and its notes make room; the take is what's on screen. */
.step:has(.rec-live:not([hidden]), .rec-pending:not([hidden])) > :is(.drop, .file-player, .retry-line, .drop-note) { display: none; }
.rec:has(.rec-pending:not([hidden])) .rec-hint { display: none; }
/* With a file in, Record again is a second choice: a lighter button than the first-time Record. */
.drop-audio.has-file ~ .rec .rec-start { justify-self: start; display: inline-flex; width: auto; min-height: 44px; padding: 4px 0; border: 0; background: transparent; font-size: 14px; text-decoration: underline; }
.drop-audio.has-file ~ .rec .rec-icon { width: 24px; height: 24px; }
.rec-hint { color: #6e6578; font-size: 13px; line-height: 1.45; }
.file-msg { margin: 8px 0 0; font-size: 14px; color: #b3261e; }
.file-msg + .retry-line { margin-top: 4px; text-align: left; }
.file-msg.hint { color: #7a5b00; }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* ---------- phones and tablets: one column, the upload box on the first screen (主人 10-27 approved sketch) ----------
   Before a file: the hero is short, the generator shows only the upload box and the record button, with the price
   under them; the tool tabs go to the bottom of the card. With a file: the other steps and the button appear. */
.prefile-line { display: none; }
.more-opt summary { list-style: none; cursor: pointer; margin-top: 10px; font-size: 13px; font-weight: 700; color: #4d4558; }
.more-opt[open] summary { display: none; }
.more-opt summary::-webkit-details-marker { display: none; }
.more-opt summary::before { content: "＋ "; }
.idea-chips { margin-bottom: 2px; }
@media (max-width: 960px) {
  .hero .eyebrow, .hero .facts { display: none; }
  .hero { gap: 16px; }
  .hero-trend h1 { font-size: clamp(30px, min(12vw, calc((100vw - 40px) / (var(--fit, 1) * .46))), 80px); margin-bottom: 10px; }
  .lede { font-size: 16px; line-height: 1.45; }
  .hero-demo { margin: 12px 0 0; gap: 8px 14px; }
  .hd-cap { max-width: none; }
  .hd-cap .hd-what { display: none; }
  .hero .updated { margin: 8px 0 0; font-size: 12px; }
  .ticket { display: flex; flex-direction: column; padding: 16px 16px 14px; }
  .ticket-head { padding-bottom: 10px; margin-bottom: 12px; }
  .ticket::before, .ticket::after { top: 44px; }
  /* The three tools as one segmented row at the top of the card: pick what kind of song before uploading. */
  .effect-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: 0 0 14px; padding: 4px; border-radius: 14px; background: rgba(13, 11, 18, .07); }
  .effect-tabs a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 6px 4px; border: 0; border-radius: 10px; text-align: center; font-size: 13px; line-height: 1.2; }
  .effect-tabs a[aria-current] { background: var(--ink); }
  .ticket-steps { gap: 14px; }
  /* The real result above the button plays what is chosen here; a second button for it was one too many. */
  .step-head .play-hear { display: none; }
  /* Every step and the pay button show before a file too, like RapDuo and Hotel Lobby (10-28 主人「我看哥飞默认不隐藏的」); the button opens the picker until there is one. */
  /* The recording advice shows while recording, when it's acted on; the tile stays short before. */
  .ticket:not(:has(.drop-audio.has-file)) .rec:not(:has(.rec-live:not([hidden]))) .rec-hint { display: none; }
  .ticket:not(:has(.drop-audio.has-file)) .drop-empty { gap: 14px; min-height: 100%; padding: 16px; }
  .ticket:not(:has(.drop-audio.has-file)) .drop-empty b { font-size: 17px; }
  .ticket:not(:has(.drop-audio.has-file)) .drop-empty small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; }
  .ticket:not(:has(.drop-audio.has-file)) .drop-empty .drop-icon { width: 46px; height: 46px; font-size: 24px; }
  .ticket:not(:has(.drop-audio.has-file)) .drop-empty br { display: none; }
  .ticket:not(:has(.drop-audio.has-file)) .step > .drop-note:not(.ios-files) { display: none; }
  /* With a file: the record advice folds away so the words start higher. */
  .ticket:has(.drop-audio.has-file) .rec-hint { display: none; }
  .ticket:has(.drop-audio.has-file) .rec { margin-top: 8px; }
  .text-opt textarea[name="lyrics"] { min-height: 0; height: 7.2em; }
  .ai-words { display: none !important; }
  .opt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .opt { grid-template-columns: minmax(0, 1fr); }
  .opt legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .opt .seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .opt .seg span { padding: 10px 4px; text-align: center; overflow: hidden; text-overflow: ellipsis; }
  .style-chips, .idea-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .style-chips::-webkit-scrollbar, .idea-chips::-webkit-scrollbar { display: none; }
  .style-chips .chip-opt, .idea-chips .chip-opt { flex: none; }
  /* AI words are the default (10-28): topics in one sideways row and no hint line, so the pay button comes up sooner. */
  .text-opt[data-words="idea"] small { display: none; }
  /* Below the generator: real results and prices scroll sideways. */
  .gallery-center .sample-grid, body:has(#studio) .price-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 360px); grid-template-columns: none !important; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; padding-bottom: 4px; }
  .gallery-center .sample-grid::-webkit-scrollbar, body:has(#studio) .price-grid::-webkit-scrollbar { display: none; }
  .sample, .price-card { scroll-snap-align: start; }
  .sample-pager { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--muted); }
  .sample-count { flex: none; font-variant-numeric: tabular-nums; }
  .sample-dots { display: flex; gap: 5px; flex: 1; min-width: 0; }
  .sample-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
  .sample-dots i.on { background: var(--accent); }
  .sample-pager a { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--accent-text); font-weight: 700; text-decoration: none; }
  .gallery-center { padding: 40px 0 44px; }
  .how, .pricing, .faq-wrap, .more, .effects-more { padding: 44px 0; }
  .more-list { gap: 6px; }
  .more-list a { min-height: 46px; padding: 10px 14px; font-size: 15px; }
  /* The home page lists the guides already; the footer doesn't repeat them there. */
  body:has(main .more-list) .footer-guides { display: none; }
}

/* Phones, after RapDuo (10-27): the header stays pinned with the tool's upload button; a step that needs a change
   before paying is outlined and named at the top of the screen; the voice step folds into one line; other tools in
   two columns with a real result to play. */
@media (max-width: 960px) {
  body { overflow-x: clip; } /* hidden would make body the scroller and the header wouldn't stick */
  html { scroll-padding-top: 76px; }
  /* Fixed, not sticky, and opaque: Safari 26 on iPhone paints the status bar from a fixed element's background at the
     top of the page (it no longer reads theme-color); with a sticky header the page showed through up there. */
  body { padding-top: 65px; }
  body::before { top: 65px; } /* the full-screen grain layer is fixed too; over the header it hid the header from Safari */
  .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 45; width: auto; height: 65px; padding: 10px max(20px, (100% - 1180px) / 2); background: var(--alt-bg); border-bottom: 1px solid var(--line); }
  .site-header .site-nav { gap: 8px; }
  .site-header .site-nav > .nav-cta { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 8px 12px; font-size: 14px; }
  .site-nav .nav-menu > ul > li:first-child { display: none; } /* the same button is in the header now */
  .lang-banner { position: relative; }
  .site-header .brand-word { white-space: normal; font-size: 18px; line-height: .95; }
  .site-header .brand-word em { font-size: 20px; }
  .nav-cta .nav-cta-text { display: none; }
  .nav-cta .nav-cta-short { display: inline; }
  .site-header .site-nav > .nav-cta:hover { color: var(--ink); background: var(--accent); } /* a tap leaves :hover stuck on phones */
  .step.step-flag { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 12px; }
  .studio-toast { position: fixed; top: 72px; left: 12px; right: 12px; z-index: 60; margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff1f0; color: #b42318; border: 1px solid #f4b4ae; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); font-size: 15px; font-weight: 600; line-height: 1.35; }
  .opt-sum { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 12px; border: 2px solid rgba(13, 11, 18, .14); border-radius: 12px; background: #fff; color: var(--ink); font: 600 15px/1.3 var(--sans); text-align: left; cursor: pointer; }
  .opt-sum-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .opt-sum-change { flex: none; color: #b0185a; font-size: 13px; font-weight: 700; }
  .opt-sum-change::after { content: " ▾"; }
  .step.opts-open .opt-sum-change::after { content: " ▴"; }
  .step:not(.opts-open) > .opt-body { display: none; }
  .step.opts-open > .opt-body { margin-top: 10px; }
  .effect-tabs a { gap: 4px; }
  .effect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .effect-card { gap: 6px; padding: 12px; }
  .effect-card b { font-size: 18px; }
  .effect-card > span { font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}
/* Phones: the button's word alone (アップロード is long), so the site name keeps its two lines. */
@media (max-width: 400px) {
  .site-header .site-nav > .nav-cta { padding: 8px 10px; }
  .site-header .site-nav > .nav-cta > span[aria-hidden] { display: none; }
}
/* The smallest phones: a smaller site name, so the button keeps its room. */
@media (max-width: 360px) {
  .site-header .brand-word { font-size: 15px; }
}

/* Phones (10-27 review): the hero's dated change note folds to the date, so the upload box comes up; price cards
   are shorter (the four plan perks are the same on every plan, listed once); the sign-in text keeps off the button. */
.signin .lede { margin-bottom: 16px; }
.site-nav .nav-menu a[aria-current] { color: var(--accent-text); }
@media (max-width: 560px) {
  .price-grid-2, .price-grid-4 { gap: 14px; }
  .price-card { padding: 18px 18px 16px; }
  .price-card .price-amount { font-size: 42px; margin: 6px 0 2px; }
  .price-about { margin-bottom: 10px; }
  .price-per { margin-bottom: 12px; }
  body:not(:has(#studio)) .price-grid .price-card:not(:first-child) .price-list { display: none; }
}

/* Tool pages (10-27 polish, after RapDuo): sections alternate two backgrounds edge to edge, each led by a small tag;
   how it works is three steps with the details folded under them; long lists show their first items (app.js fold). */
:root { --alt-bg: #1a191e; --alt-card: #0d0d10; }
:root[data-theme="light"] { --alt-bg: #efe9dd; --alt-card: #ffffff; }
.sec { border-top: 0; }
.sec-alt { --ink-2: var(--alt-card); background: var(--alt-bg); box-shadow: 0 0 0 100vmax var(--alt-bg); clip-path: inset(0 -100vmax); }
.hero-trend + .gallery-center { border-top: 0; }
.sec-tag { display: inline-block; margin: 0 0 14px; padding: 6px 11px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-text); font: 700 11.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.gallery-center > .sec-tag { display: table; margin-inline: auto; }
.sec-lead { margin: -14px auto 28px; max-width: 56ch; color: var(--muted); font-size: 16px; line-height: 1.5; text-align: center; }
.answer.sec, .sec .section-head { display: block; }
.sec .section-head h2 { margin-bottom: 12px; }
.answer.sec .how-grid { margin-top: 30px; }
.how-grid li { position: relative; display: grid; gap: 8px; align-content: start; }
.how-grid li::before { position: absolute; top: 16px; right: 20px; margin: 0; font-size: 48px; color: color-mix(in srgb, var(--text) 11%, transparent); }
.how-grid b { padding-right: 56px; }
.how-grid p { margin: 0; }
.how-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 12px; background: var(--accent); color: var(--ink); }
.sec-go { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 22px; margin: 26px 0 0; }
.sec-link, .final-go a:not(.guide-cta) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }
.answer-more { margin-top: 22px; max-width: 820px; padding: 0 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-2); }
.answer-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; font-weight: 700; list-style: none; cursor: pointer; }
.answer-more > summary::-webkit-details-marker { display: none; }
.answer-more > summary::after { content: "+"; color: var(--accent-text); font: 900 24px/1 var(--display); }
.answer-more[open] > summary::after { content: "–"; }
.answer-more .glance { margin: 4px 0 6px; }
.answer-more h3 { margin: 18px 0 6px; font-size: 17px; }
.answer-more p { margin: 0 0 12px; color: var(--text-2); font-size: 15px; }
.answer-more .changes { margin: 0 0 16px; font-size: 14px; }
.fold-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 48px; margin-top: 10px; padding: 10px 16px; border: 1px dashed color-mix(in srgb, var(--text) 28%, transparent); border-radius: 14px; background: transparent; color: var(--text); font: 700 15px/1.2 var(--sans); cursor: pointer; }
.fold-btn:hover { border-color: var(--accent); }
.faq-wrap .fold-btn { max-width: 860px; }
/* home.mjs FAQ_SHOWN = 6 */
.faq-wrap.fold:not(.unfolded) .faq > details:nth-child(n+7) { display: none; }
.more .fold-btn { display: none; }
.sec-links > .more { border-top: 0; }
.sec-links > .more + .more { padding-top: 0; }

@media (max-width: 960px) {
  /* Hero: the summary a size down, "Real result" as a small label above its two buttons, less room before the results. */
  .hero { padding-bottom: 20px; }
  .lede { font-size: 15px; color: color-mix(in srgb, var(--text-2) 85%, var(--bg)); }
  .hero-demo { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
  .hero-demo .hd-cap { order: -1; }
  .hero-demo .hd-cap b { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 11.5px/1 var(--sans); letter-spacing: .14em; color: var(--accent-text); }
  .hero-demo .hd-cap b::before { content: ""; width: 18px; height: 2px; background: currentColor; }
  /* Tool tabs: the icon above the name, the same in all three. */
  .effect-tabs a { flex-direction: column; gap: 3px; min-height: 54px; padding: 6px 4px; font-size: 12.5px; line-height: 1.15; }
  .tab-ico { font-size: 18px; line-height: 1; }
  .tab-name { text-wrap: balance; }
  /* Before a file: the upload box takes the width, Record is a second, lighter button under it. */
  .ticket:not(:has(.drop-audio.has-file)) .rec { margin-top: 8px; }
  .ticket:not(:has(.drop-audio.has-file)) .rec-start { min-height: 50px; border: 1.5px solid rgba(13, 11, 18, .2); font-size: 15px; font-weight: 700; }
  .ticket:not(:has(.drop-audio.has-file)) .rec-icon { width: 28px; height: 28px; }
  .form-msg:empty { min-height: 0; margin: 0; }
  .proof { margin-bottom: 4px; }
  .ticket .pack-line { margin-top: 2px; }
  .ticket .cost-line { margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
  /* Sections: one rhythm, tags and headings on the left. */
  .sec, .gallery-center { padding: 48px 0; }
  .gallery-center > .sec-tag { display: inline-block; margin-inline: 0; }
  .gallery-center > h2 { text-align: left; margin-bottom: 16px; }
  .gallery-center .sample-foot { text-align: left; margin-inline: 0; }
  .sec-lead { margin: -4px 0 20px; text-align: left; font-size: 15px; }
  .answer.sec .how-grid { margin-top: 24px; gap: 10px; }
  .how-grid li { padding: 18px; }
  .how-grid li::before { top: 14px; right: 16px; font-size: 40px; }
  .how-grid b { font-size: 21px; }
  .sec-go .guide-cta, .final-go .guide-cta { width: 100%; text-align: center; }
  .sec-go { justify-content: center; }
  .answer-more { padding: 0 16px; }
  /* Real results: the beat and the song side by side, "AI vocal only" under them. */
  .gallery-center .sample-grid { grid-auto-columns: min(86%, 360px); }
  .sample { padding: 16px 14px; gap: 10px; }
  .sample-tracks { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; }
  .sample-tracks .play { justify-content: center; gap: 6px; padding-inline: 8px; font-size: 13.5px; line-height: 1.15; white-space: normal; text-align: center; }
  /* Japanese labels would break inside a word (あなたのビー/ト): one line, a size down. */
  .sample-tracks .play:lang(ja) { white-space: nowrap; padding-inline: 6px; font-size: 12.5px; }
  .sample-tracks .play-small { grid-column: 1 / -1; justify-self: start; }
  .sample-arrow { font-size: 16px; }
  .sample-note { font-size: 12.5px; }
  /* Prices: room for the "Popular" flag above the sideways row; the link to all prices as a button. */
  body:has(#studio) .price-grid { padding-top: 14px; }
  .pricing .section-head { margin-bottom: 8px; }
  .price-more { margin-top: 16px; }
  .price-more .guide-cta { display: block; text-align: center; }
  .more.fold:not(.unfolded) .more-list > li:nth-child(n+5) { display: none; }
  .more.fold .fold-btn { display: flex; }
  .sec-links > .more { padding: 48px 0; }
  .final { padding-bottom: 56px; background: radial-gradient(ellipse 80% 70% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%); }
  .final p { font-size: 16px; }
  .final .final-go { flex-direction: column; gap: 6px; }
}
/* The smallest phones: the two sample buttons take the arrow's room so "Your beat" stays on one line. */
@media (max-width: 360px) {
  .sample-arrow { display: none; }
  .sample-tracks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
/* Footer on phones: the brand across, the two link lists side by side, links tall enough to tap. */
@media (max-width: 760px) {
  .site-footer { padding-top: 36px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 18px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-links li { margin: 0; }
  .footer-links a { display: block; min-height: 40px; padding: 10px 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
}

/* Phones, after RapDuo's header (10-27): one band of one colour (the alternate section tone, frosted) whatever
   scrolls under it; the menu opens as a full-width panel joined to it, the ☰ turns into ✕, and the language and
   light/dark switches sit as icons on the panel's last line with the account on the right, not in the header. */
.menu-lang { display: none; }
.menu-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav-menu summary .menu-ico path { transition: transform .2s ease, opacity .2s ease; transform-box: fill-box; transform-origin: center; }
.nav-menu[open] > summary .menu-ico path:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-menu[open] > summary .menu-ico path:nth-child(2) { opacity: 0; }
.nav-menu[open] > summary .menu-ico path:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.ico-sun, :root[data-theme="light"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: block; }
@media (max-width: 960px) {
  .site-header:has(.nav-menu[open]) { background: var(--alt-bg); }
  .site-header .lang-menu { display: none; }
  .site-header .nav-menu { position: static; }
  .site-header .nav-menu > summary { width: 44px; height: 44px; margin-right: -8px; border: 0; border-radius: 12px; background: none; }
  .site-header .nav-menu[open] > summary { background: none; }
  .site-header .nav-menu > ul { position: absolute; top: calc(100% + 1px); left: 0; right: 0; display: grid; grid-template-columns: auto auto 1fr; align-items: center; min-width: 0; max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; padding: 6px max(20px, (100% - 1180px) / 2) 14px; background: var(--alt-bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: 0 24px 40px rgba(0, 0, 0, .35); }
  .site-header .nav-menu > ul > li { grid-column: 1 / -1; }
  .site-nav .nav-menu > ul > li > a { display: flex; align-items: center; min-height: 50px; padding: 0; border-radius: 0; font-size: 17px; }
  .site-nav .nav-menu > ul > li > a:hover { background: none; }
  .menu-lang, .menu-theme, .site-header .menu-account { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .site-header .nav-menu > ul > .menu-lang { display: block; grid-column: 1; position: relative; }
  .site-header .nav-menu > ul > .menu-theme { grid-column: 2; }
  .site-header .nav-menu > ul > .menu-account { grid-column: 3; text-align: right; }
  .site-header .menu-lang summary, .site-header .nav-menu .menu-theme .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 6px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text); list-style: none; cursor: pointer; }
  .menu-lang summary::-webkit-details-marker { display: none; }
  .site-header .menu-lang details[open] summary { background: var(--ink-3); }
  .menu-lang .menu-ico, .menu-theme .menu-ico { width: 22px; height: 22px; }
  .site-header .menu-lang ul { position: absolute; top: auto; right: auto; bottom: calc(100% + 6px); left: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: min(340px, calc(100vw - 40px)); min-width: 0; padding: 6px; background: var(--ink-3); }
  .site-nav .nav-menu .menu-lang a { padding: 11px 10px; border-radius: 9px; font-size: 15px; }
  .site-nav .nav-menu .menu-lang a[aria-current] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); font-weight: 700; }
  .site-nav .nav-menu .menu-account a { display: inline-flex; align-items: center; width: auto; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; font-weight: 600; }
  .site-nav .nav-menu .menu-account a.signed-in { color: var(--accent-text); }
  /* Signed in: who, then a real Sign out button across the menu (it was a small grey line nobody found). */
  .site-header .menu-who { margin-top: 14px; padding: 0; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
  .site-header .menu-signout { margin: 0; padding: 8px 0 0; border: 0; }
  .site-nav .nav-menu .menu-signout button[data-signout] { display: block; width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); font-size: 16px; font-weight: 600; text-align: center; }
  .site-header .menu-signout-status { padding: 0 0 6px; }
  .site-header .menu-signin { padding-top: 8px; }
  .site-nav .nav-menu .menu-signin a { justify-content: center; min-height: 48px; border-radius: 12px; font-size: 16px; }
}
:root[data-theme="light"] .site-header .menu-lang ul { background: #fff; }

/* Free BPM and key finder (tools.mjs, bpm-tool.js) */
/* The free tool's page: one centred column under the header (not a narrow column against the left edge), and the
   same display heading as every other page. */
.bk-hero { border-top: 0; }
.bk-hero h1 { font: 900 clamp(40px, 6vw, 72px)/.95 var(--display); text-transform: uppercase; }
@media (min-width: 961px) { body:has(.bk-hero) .answer-solo .answer-inner { width: 100%; max-width: 900px; justify-self: center; } }
.bk-tool { margin: 22px 0 6px; }
.bk-drop { position: relative; display: grid; place-items: center; gap: 4px; min-height: 150px; padding: 22px; border: 2px dashed var(--line); border-radius: 18px; background: var(--ink-2); text-align: center; cursor: pointer; transition: border-color .15s; }
.bk-drop:hover, .bk-drop.drag { border-color: var(--accent); }
.bk-drop.busy { opacity: .6; pointer-events: none; }
.bk-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.bk-drop-h { font-weight: 800; font-size: 18px; color: var(--text); }
.bk-drop-sub, .bk-sub { font-size: 14px; color: var(--text-2); }
.bk-status { min-height: 1.4em; margin: 10px 0 0; color: var(--text-2); }
.bk-status.bad { color: var(--danger, #e5484d); }
.bk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 6px 0 10px; }
.bk-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.bk-label { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-text); }
.bk-value { margin: 4px 0; font: 900 40px/1.1 var(--display); color: var(--text); }
.bk-value small { font-size: 18px; }
.bk-result .bk-use { margin: 8px 0 6px; }
.studio-sec { max-width: 760px; margin: 0 auto; padding: 0 16px; }
.sec-h-center { text-align: center; }
.bk-use { border: 0; cursor: pointer; }
.sy-tool { margin: 22px 0 6px; }
.sy-label { display: block; margin: 0 0 6px; font-weight: 700; color: var(--text); }
.sy-text { display: block; width: 100%; min-height: 200px; padding: 14px 16px; border: 2px solid var(--line); border-radius: 16px; background: var(--ink-2); color: var(--text); font: 17px/1.6 var(--body, inherit); resize: vertical; }
.sy-text:focus { outline: none; border-color: var(--accent); }
.sy-cards { margin-top: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sy-cards .bk-card { padding: 12px 14px; }
.sy-cards .bk-value { font-size: clamp(26px, 6vw, 40px); }
.sy-haiku { margin: 0 0 10px; }
.sy-list { list-style: none; margin: 4px 0 16px; padding: 0; display: grid; gap: 6px; }
.sy-list li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 12px; align-items: start; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.sy-list li.sy-tag { display: block; padding: 4px 2px 0; border: 0; background: none; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-text); }
.sy-n { font: 900 22px/1.2 var(--display); color: var(--text); text-align: center; }
.sy-line { display: grid; gap: 2px; overflow-wrap: anywhere; color: var(--text); }
.sy-line small { color: var(--text-2); font-size: 13px; }
.sy-use { border: 0; cursor: pointer; }
.pg-tool { margin: 22px 0 6px; }
.pg-form { display: grid; gap: 14px; }
.pg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.pg-field { display: grid; gap: 6px; font-weight: 700; color: var(--text); font-size: 14px; }
.pg-field select, .pg-field input { width: 100%; min-height: 46px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--ink-2); color: var(--text); font: 16px var(--body, inherit); }
.pg-wide { grid-column: span 2; }
@media (max-width: 560px) { .pg-wide { grid-column: auto; } }
.pg-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.pg-set legend { margin-bottom: 8px; font-weight: 700; font-size: 14px; color: var(--text); }
.pg-set legend small { font-weight: 400; color: var(--text-2); }
.pg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip { position: relative; }
.pg-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.pg-chip span { display: inline-block; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--ink-2); color: var(--text); font-size: 15px; }
.pg-chip input:checked + span { border-color: var(--accent); background: var(--accent); color: var(--ink); font-weight: 700; }
.pg-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.pg-out { margin: 18px 0 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-2); }
.pg-style { margin: 6px 0 10px; font-size: 18px; line-height: 1.5; color: var(--text); overflow-wrap: anywhere; }
.pg-structure { margin: 6px 0 10px; padding: 0; white-space: pre-wrap; font: 15px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text); }
.pg-copy { margin: 0 0 14px; padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font-weight: 700; cursor: pointer; }
.pg-copy:hover { border-color: var(--accent); }
.pg-use { border: 0; cursor: pointer; }

/* Desktop (10-30): the headline on the left, the generator card on the right (主人 tried a wide two-column card the same
   day and preferred this: 「还不如左右的」). The card reads top to bottom like on phones; it is made shorter so the
   button comes up near the first screen: the four tools in one row (they wrapped 3 + 1), the voice and delivery side by
   side, a quieter record button and its advice only while recording, and no second sample player above the button. */
@media (min-width: 961px) {
  .effect-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; margin: -2px 0 16px; padding: 4px; border-radius: 14px; background: rgba(13, 11, 18, .07); }
  .effect-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 50px; padding: 5px 4px; border: 0; border-radius: 10px; text-align: center; font-size: 13px; line-height: 1.2; }
  .effect-tabs a:not([aria-current]):hover { background: rgba(13, 11, 18, .06); }
  .effect-tabs a[aria-current] { background: var(--ink); }
  .ticket-steps { gap: 14px; }
  .ticket-steps-side { margin-top: 14px; }
  /* Upload is the way in on a computer; recording stays one click away but no longer as loud as the upload box. */
  .ticket:not(:has(.drop-audio.has-file)) .rec-start { min-height: 46px; border: 1.5px solid rgba(13, 11, 18, .2); font-size: 15px; font-weight: 700; }
  .ticket .rec:not(:has(.rec-live:not([hidden]), .rec-pending:not([hidden]))) .rec-hint { display: none; }
  /* As on phones: the privacy note comes with the file, and the one-line hint under the idea box goes. */
  .ticket:not(:has(.drop-audio.has-file)) .step > .drop-note:not(.ios-files) { display: none; }
  .text-opt[data-words="idea"] small { display: none; }
  .opt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .opt { grid-template-columns: minmax(0, 1fr); }
  .opt legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .opt .seg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
  .opt .seg span { padding: 10px 4px; text-align: center; }
  /* "Hear it" beside the voice step plays the same closest sample, so the second player above the button (for phones,
     where "Hear it" is hidden) would only push the button down. */
  .ticket .proof { display: none !important; }
}