/* Turnly: 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: #5ee6c4;   /* buttons, links, prices, highlights: Turnly mint */
  --accent-2: #b892ff; /* the "AI" in the big headline, focus rings: violet */
  --accent-3: #ff7a9c; /* 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; }
/* No grey flash over buttons and choices on tap (mobile browsers' default); a picked choice already shows it's picked. */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* not hidden: that 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;
}
/* Computers: the bar stays at the top while the page scrolls, and the page scrolls as one (no sticky hero column:
   on the AI vocals site the card sliding under a still headline looked broken, 10-30). Phones have their fixed bar. */
@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;
}
/* Japanese: no line starts with a small kana or ー ("カフ|ェ" in the hero h1, fancy-cafe-ai ja check 11-04). */
:lang(ja) { line-break: strict; }
.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; }
/* 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; }
@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: on the AI vocals site it read as crooked, on phones and then on computers (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-no { font: 600 12px/1 var(--sans); letter-spacing: .2em; color: #6e6578; }
.ticket-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.step-label { margin: 0 0 8px; font-weight: 700; font-size: 15px; }
.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 { display: inline-block; margin-top: 2px; line-height: 1.4; color: #6e6578; }
.drop-or { font-weight: 400; color: #6e6578; }
@media (hover: none) { .drop-or { display: none; } } /* touch screens have nothing to drag */
@media (min-width: 961px) { .drop { min-height: 88px; } .drop-empty { padding: 14px 18px; } }
.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; }
.drop-preview { width: 100%; max-height: 240px; object-fit: contain; background: #1c1724; }
.drop.has-photo .drop-empty { display: none; }
/* Once a photo is in, the box still says whose it is and that a tap swaps it. */
/* Wraps instead of cutting to "Makes the coffee · C…" on a phone, where two photos sit side by side (11-04 iPhone review). */
.drop-tag { display: none; position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 4px 8px; border-radius: 8px; background: rgba(13, 11, 18, .78); color: var(--cream); font: 700 12px/1.2 var(--sans); white-space: normal; overflow-wrap: anywhere; pointer-events: none; }
.drop.has-photo .drop-tag { display: block; }
/* One box per photo slot; two or three sit side by side, labels stack inside. */
.drops { display: grid; grid-template-columns: repeat(var(--slots, 1), minmax(0, 1fr)); gap: 10px; }
.drops[style*="--slots:2"] .drop-empty, .drops[style*="--slots:3"] .drop-empty { flex-direction: column; align-items: flex-start; padding: 14px; font-size: 14px; }

.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; }
.consent-line { margin: 8px 0 0; font-size: 11.5px; line-height: 1.4; color: #6e6578; text-align: center; text-wrap: balance; }
/* Under the button as on the AI vocals site and RapDuo (主人 10-30「总感觉太长了」there): the price line, then how
   checkout goes and the rights line in small print last. Before a photo the button only opens the photo picker, so
   those two wait for the photo; the first-video refund lives on the pricing page and in the FAQ, not under the button. */
.studio > .go-row { margin-top: 18px; }
.ticket:has(.drop):not(:has(.drop.has-photo)) :is(.cost-line, .consent-line) { display: none; }

.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; }
.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; }
.ticket-fine { margin: 6px 0 0; text-align: center; font-size: 12px; color: #6e6578; letter-spacing: .02em; }

/* ---------- 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; } }

/* The first real sample beside the answer and on question pages (parts.mjs phoneDemo): a straight card like the
   gallery's, the video on top and the photos it came from in a strip underneath (airaindance's example card). It sits
   level with the heading on computers rather than floating mid-column. No tilt, like the form (主人 11-03). */
.phone-figure {
  width: min(100%, 320px); margin: 0; justify-self: center; align-self: start; overflow: hidden;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
}
.phone-screen { position: relative; aspect-ratio: 9 / 16; background: #000; }
.phone-cap { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.pc-text { flex: 1; min-width: 0; display: grid; gap: 3px; }
.pc-text b { font: 800 12px/1.25 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text); }
.phone-cap .sample-note { max-width: none; margin: 0; text-align: left; font-size: 12px; }
.pc-photos { display: flex; gap: 6px; flex: none; }
.pc-photos img { display: block; width: 40px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--ink-3); }

/* ---------- 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); }
.chip-link { text-decoration: none; }
/* Past its peak (home.mjs trendsPage, measured weekly): an outline, so it reads as quieter than the filled ones. */
.chip-quiet, .eyebrow .chip-quiet { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }

/* ---------- 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); }

/* 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; }

.order-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 280px)); gap: 18px; }
@media (max-width: 560px) { .order-videos { grid-template-columns: minmax(0, 300px); justify-content: center; } }
.vid { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.vid video, .vid .vid-wait { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; background: #000; }
.vid-wait { display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #3b1d4d, #120f18 70%); }
.vid-wait b { font: 900 26px/1 var(--display); text-transform: uppercase; color: var(--accent); display: block; margin-top: 12px; }
.vid-meta { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.vid-meta a { font-weight: 700; }
.vid-ios { padding: 0 14px 14px; display: grid; gap: 8px; }
.vid-ios p { margin: 0; }
.vid-save, .vid-save:hover { background: var(--accent); color: var(--ink); }
.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); }
/* Languages: one pill under the links that opens the list upward (after the AI vocals site), not a column of names. */
.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); }
@media (max-width: 760px) { .footer-language-nav { justify-content: stretch; } .footer-language-menu { 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; }
.post-tips { margin-top: 24px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 22px; }
.post-tips h2 { font-size: 28px; margin-bottom: .3em; }
.post-tips ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
.post-tips li { margin: 6px 0; }
.form-msg.ok { color: #1f7a3a; }
.doc .form-msg.ok { color: var(--accent-text); }

/* ---------- misc ---------- */
.phone-video { display: block; width: 100%; height: 100%; object-fit: cover; }
.updated { font-size: 14px; margin: 10px 0 0; }
.origin-link { font-size: 15px; color: var(--muted); }
/* "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; }

.sample-note { max-width: 300px; text-align: center; font-size: 0.78rem; color: var(--muted); line-height: 1.4; }

.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; }

/* ---------- first-screen proof: the photo and the video it became ---------- */
.hero-demo { margin: 26px 0 0; display: flex; align-items: center; gap: 12px; }
.hd-tile { position: relative; display: block; width: 96px; flex: none; }
.hd-tile img, .hd-tile video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--ink-2); border: 1px solid var(--line); }
.hd-video video { border: 2px solid var(--accent); }
.hd-tile i { position: absolute; left: 6px; top: 6px; font: 700 10px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: rgba(13, 11, 18, .78); color: var(--cream); padding: 4px 6px; border-radius: 6px; }
.hd-video i { background: var(--accent); color: var(--ink); }
.hd-arrow { font: 900 28px/1 var(--display); color: var(--accent-text); }
.hd-cap { max-width: 24ch; 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); }
.hd-cap .hd-src { display: block; margin-top: 4px; font-size: 12px; }
/* Template pages with several samples: a row of them under the headline (parts.mjs heroStrip), three to a phone
   screen, more sideways. A tap scrolls to that sample's card below. */
.hero-strip { display: flex; gap: 8px; margin: 14px 0 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hero-strip::-webkit-scrollbar { display: none; }
.hs-card { position: relative; flex: 0 0 calc((100% - 16px) / 3); max-width: 150px; scroll-snap-align: start; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); text-decoration: none; }
.hs-card video { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; }
.hs-card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(8, 7, 10, .85)); }
.hs-card b { position: absolute; left: 8px; right: 8px; bottom: 7px; z-index: 1; font: 800 12px/1.15 var(--sans); color: #fff; }
.hs-card:hover, .hs-card:focus-visible { border-color: var(--accent); }
.gallery-item[id] { scroll-margin-top: 84px; }
/* Photos, arrow and clip lay out as one row with the caption; phones turn this into a box (below). */
.hd-media { display: contents; }
.hero-trend .hero-demo { margin: 18px 0 4px; }
/* Home, computers: six playing template cards under the headline in place of the single result (home.mjs heroPicks). */
.hero-picks { display: none; }
@media (min-width: 961px) {
  .hero-copy:has(.hero-picks) > .hero-demo { display: none; }
  .hero-picks { display: grid; gap: 12px; margin: 26px 0 0; max-width: 560px; }
  .hp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 700; color: var(--text-2); }
  .hp-head a { color: var(--accent-text); text-decoration: none; white-space: nowrap; }
  .hp-head a:hover { text-decoration: underline; }
  .hp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .hp-card { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); background: var(--ink-2); transition: border-color .2s, transform .2s; }
  .hp-card:hover, .hp-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
  .hp-card video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
  .hp-card::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(8, 7, 10, .82)); }
  .hp-card b { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 1; font: 900 17px/1 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
  .hp-card .tag { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 11px; font-weight: 800; }
}
@media (max-width: 960px) {
  /* Home on phones: the clip sits beside the headline, the source photo tucked into its corner. */
  .hero:not(.hero-trend) .hero-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; }
  .hero:not(.hero-trend) .hero-copy > * { grid-column: 1 / -1; }
  .hero:not(.hero-trend) .hero-copy > h1 { grid-column: 1; grid-row: 2; align-self: center; }
  .hero:not(.hero-trend) .hero-demo { grid-column: 2; grid-row: 2; align-self: center; position: relative; display: block; width: clamp(84px, 27vw, 120px); margin: 0 0 14px; }
  .hero:not(.hero-trend) .hd-video { width: 100%; }
  .hero:not(.hero-trend) .hd-photo { position: absolute; left: -18px; bottom: -10px; width: 40%; z-index: 1; }
  .hero:not(.hero-trend) .hd-photo img { border: 2px solid var(--cream); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  .hero:not(.hero-trend) .hd-photo i, .hero:not(.hero-trend) .hd-arrow, .hero:not(.hero-trend) .hd-cap { display: none; }
  .hero-trend .hd-cap { font-size: 13px; }
}
/* The photos stack beside the video and the video is as tall as the stack: the result is the biggest thing in the proof. */
.hero-trend .hero-demo { --hd: 84px; }
.hero-trend .hd-photos { display: grid; gap: 8px; flex: none; }
.hero-trend .hd-photo { width: var(--hd); }
.hero-trend .hd-video { width: calc(var(--hd) * 2 + 4.5px); }
/* Whose photo it is, along the bottom (over the clothes, not the face). */
.hero-trend .hd-photo i { top: auto; left: 4px; right: 4px; bottom: 4px; text-align: center; line-height: 1.15; padding: 3px 4px; }
@media (max-width: 1100px) { .hero-trend .hero-demo { --hd: 72px; } }
/* Phones: the clip sits beside the headline with its photos tucked into the corner, so the upload box still makes
   the first screen (rapduo, hotellobbyvideo and airaindance all show theirs without scrolling). 11-04 (主人「体验更加
   好点」): 104px to 116px wide, the headline sized for a 20px gap (it was 5px at 375px wide, with the photo sticking
   12px out of the clip towards it; the home headline is sized by its longer line, --fit2, home.mjs), the photo
   inside the clip's corner, named "Photo", with an arrow onto the video. */
@media (max-width: 560px) {
  .hero-trend .hero-copy:has(.hero-demo) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; }
  .hero-trend .hero-copy:has(.hero-demo) > * { grid-column: 1 / -1; }
  .hero-trend .hero-copy:has(.hero-demo) > h1 { grid-column: 1; grid-row: 2; align-self: end; margin-bottom: 10px; font-size: clamp(24px, min(13vw, calc((100vw - 176px) / (var(--fit2, var(--fit, 1)) * .46))), 96px); }
  /* The caption goes under the headline, not under the narrow clip. */
  .hero-trend .hero-copy > .hero-demo { display: contents; }
  .hero-trend .hd-media { grid-column: 2; grid-row: 2 / span 2; align-self: center; display: block; position: relative; width: 116px; margin: 0 0 2px; }
  .hero-trend .hd-video { width: 100%; }
  .hero-trend .hd-photos { position: absolute; left: 6px; bottom: 6px; z-index: 1; width: 40%; gap: 4px; }
  .hero-trend .hd-photos:has(.hd-photo + .hd-photo) { width: 34%; }
  .hero-trend .hd-photo { width: 100%; }
  .hero-trend .hd-photo img { border: 2px solid var(--cream); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
  .hero-trend .hd-photo i { left: 3px; right: 3px; bottom: 3px; padding: 2px 3px; font-size: 8px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hero-trend .hd-arrow { position: absolute; z-index: 2; left: 43px; bottom: 37px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: var(--ink); font: 900 12px/1 var(--sans); box-shadow: 0 2px 8px rgba(0, 0, 0, .45); }
  .hero-trend .hd-media:has(.hd-photo + .hd-photo) .hd-arrow { left: 36px; bottom: 32px; }
  /* Two photos: their names ("The big one") don't fit 39px; the upload boxes below say them. */
  .hero-trend .hd-photos:has(.hd-photo + .hd-photo) .hd-photo i { display: none; }
  /* No "Real result" caption on phones: it pushed the upload box below the first screen (the gallery says it). */
  .hero-trend .hd-cap { display: none; }
}

.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. */

/* The source photo in the corner of a sample video. */
.result-media { position: relative; display: block; }
.photo-inset { position: absolute; left: 10px; bottom: 12px; display: block; width: 27%; max-width: 72px; }
.photo-inset img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 8px; border: 2px solid var(--cream); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.photo-inset i { position: absolute; left: 50%; bottom: -8px; transform: translateX(-50%); white-space: nowrap; font: 700 9px/1 var(--sans); font-style: normal; letter-spacing: .08em; text-transform: uppercase; background: var(--cream); color: var(--ink); padding: 3px 5px; border-radius: 5px; }
.photo-stack { display: grid; gap: 5px; width: 22%; max-width: 60px; }

.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); }
@media (max-width: 520px) { .glance div { grid-template-columns: 1fr; gap: 2px; } }
/* In brief (11-02, parts.mjs briefBlock): plain facts under the generator, for ChatGPT to quote */
.brief { width: min(860px, 100% - 40px); margin: 0 auto; padding: 56px 0 44px; border-top: 1px solid var(--line); }
.brief .glance { margin: 16px 0 0; }
.brief .glance div { grid-template-columns: 170px 1fr; }
.brief .glance dt { font-size: 15px; }
.doc .brief { width: auto; padding: 0; border-top: 0; }
.doc .gallery { width: auto; padding: 26px 0 6px; border-top: 0; }
.doc .gallery-center > h2 { text-align: left; margin-bottom: 18px; }
.doc .gallery-item { width: calc((100% - 36px) / 3); }
@media (max-width: 520px) { .brief .glance div { grid-template-columns: 1fr; } }

/* Sound toggle on sample videos. */
.sound-btn {
  position: absolute; right: 8px; bottom: 8px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; font-size: 16px; line-height: 1;
  background: rgba(13, 11, 18, .72); box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
.sound-btn[aria-pressed="true"] { background: var(--accent); }
/* A tap on the video turns its sound on too (app.js, 11-04). */
.result-media video, .hd-video video, .phone-video { cursor: pointer; }
.hd-tile .sound-btn { width: 28px; height: 28px; font-size: 13px; right: 6px; bottom: 6px; }

/* Real results (parts.mjs sampleGallery): on the home page right under the generator, centered; phones show two side by
   side, and more than two scroll sideways with the next one peeking in. */
.gallery { width: var(--wrap); margin: 0 auto; padding: 10px 0 50px; }
.wrap .gallery { width: auto; } /* the examples page is already inside the page width */
.gallery-center { padding: 64px 0 70px; border-top: 1px solid var(--line); }
.gallery-center > h2 { text-align: center; margin-bottom: 30px; }
.gallery-row { display: flex; flex-wrap: wrap; gap: 26px 18px; }
.gallery-center .gallery-row { justify-content: center; }
.gallery-note { margin: 18px auto 0; max-width: 640px; text-align: center; font-size: 13px; line-height: 1.45; color: var(--muted); }
.gallery-item { margin: 0; width: 260px; min-width: 0; }
.gallery-item video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; background: var(--ink-2); border: 1px solid var(--line); }
/* Title, then the settings on their own line under it (after the AI vocals site, 10-30): side by side, a short title
   kept them on its right and a long one pushed them under, so the cards didn't line up. */
.sample-cap { margin: 12px 0 0; 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); font-variant-numeric: tabular-nums; }
.gallery-item .sample-note { margin: 8px 0 0; text-align: left; max-width: none; }
/* What the card was made with (parts.mjs howOf): two lines at most, so the cards in a row stay one height. */
.sample-how { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* A button, not a text link (jumponthetrend's cards end in a full-width "Make yours"; the link got no taps in 8 days). */
.sample-use { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 10px; padding: 0 14px; border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent-text); font-size: 14px; font-weight: 700; text-decoration: none; }
.sample-use:hover { background: var(--accent); color: var(--ink); }
/* The source photo a third of the card wide (it was 72px of 260, 40px on phones: too small to see it is the same
   photo), and the sound as words at the top (parts.mjs soundButton labelled), clear of the photo. */
.gallery-item .photo-inset { width: 33%; max-width: 96px; }
.gallery-item .photo-stack { width: 26%; max-width: 76px; }
.result-media .sound-labelled { top: 10px; right: 10px; bottom: auto; width: auto; max-width: calc(100% - 20px); height: 34px; padding: 0 12px 0 10px; gap: 6px; border-radius: 999px; display: inline-flex; align-items: center; font: 700 13px/1 var(--sans); color: #fff; white-space: nowrap; }
.result-media .sound-labelled[aria-pressed="true"] { width: 34px; padding: 0; justify-content: center; }
/* Phones only (the cards scroll sideways there): which card is in view, and the page with all of them (after the AI vocals site). */
.sample-pager { display: none; }
@media (max-width: 560px) {
  .gallery-center { padding-top: 54px; }
  .gallery-center > h2 { text-align: left; margin-bottom: 20px; }
  .gallery-center > .gallery-note { margin-left: 0; text-align: left; }
  .gallery-row { flex-wrap: nowrap; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .gallery-row::-webkit-scrollbar { display: none; }
  .gallery-center .gallery-row { justify-content: flex-start; margin: 0 -20px; padding: 0 20px 6px; scroll-padding: 0 20px; }
  /* About one and a half cards on screen (jumponthetrend's are 228px of 390): at 42% a card was 147px wide. */
  .gallery-item { flex: 0 0 68%; width: auto; scroll-snap-align: start; }
  .gallery-row[style*="--n:1;"] .gallery-item { flex-basis: 72%; }
  .sample-cap b { font-size: 19px; }
  /* The examples page lists every card in two columns: a sideways row there sat inside the page margin, cut off in the
     middle of the third card with nothing to show it scrolls (11-03; the AI vocals site lists them all too). */
  .gallery:not(.gallery-center) .gallery-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; overflow: visible; padding-bottom: 0; }
  .gallery:not(.gallery-center) .gallery-row[style*="--n:1;"] { grid-template-columns: minmax(0, 64%); }
  /* Two to a row there: the sound as its icon only. */
  .gallery:not(.gallery-center) .sound-labelled { width: 34px; padding: 0; justify-content: center; }
  .gallery:not(.gallery-center) .sound-labelled .sb-text { display: none; }
  .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; }
}

/* ---------- 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; }
.pb { margin: 22px 0 8px; padding: 18px; border: 2px solid var(--line); border-radius: 16px; }
.pb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pb label { display: grid; gap: 6px; font-weight: 700; font-size: 15px; }
.pb select, .pb 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); width: 100%; box-sizing: border-box; }
/* WebKit (Safari on a Mac, Playwright's iPhone) ignores padding on native menus and draws them about 25 px tall; drawn by
   hand they keep the height of the other fields (same fix as photo-pattern-maker aab3deb, 11-02). */
.pb select { -webkit-appearance: none; appearance: none; min-height: 46px; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236e6578' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px; }
.pb textarea { resize: vertical; }
.pb-out { margin-top: 14px; }
.pb-btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.pb-copy { font: 800 16px/1 var(--display); text-transform: uppercase; padding: 14px 18px; border-radius: 14px; border: 2px solid var(--accent); background: transparent; color: var(--accent-text); cursor: pointer; }
@media (max-width: 560px) { .pb-grid { grid-template-columns: 1fr; } }
.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: 18px; }
.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-account { color: var(--text); font-weight: 600; white-space: nowrap; }
.site-nav .nav-account.signed-in { color: var(--accent-text); }
@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; }
}
/* Phones and tablets: the page links move into a menu, as on all three reference sites; on phones the theme switch
   goes in there too, so the header keeps the site name, language, sign-in and the menu. */
.nav-menu { position: relative; display: none; }
.nav-menu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 34px; height: 34px; 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, .nav-menu [data-signout] { 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, .nav-menu [data-signout]:hover { background: var(--ink-3); }
.site-nav .nav-menu li:first-child a { color: var(--accent-text); font-weight: 700; }
.nav-menu [data-signout] { background: none; cursor: pointer; }
.nav-menu [data-signout]:disabled { opacity: .6; cursor: wait; }
.menu-lang { display: none; }
.menu-theme { display: none; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
@media (max-width: 860px) { .nav-menu { display: block; } .nav-menu summary { width: 44px; height: 44px; } }
@media (max-width: 560px) { .site-nav > .theme-btn { display: none; } .menu-theme { display: block; } }
.menu-who[hidden], .menu-signin[hidden] { display: none !important; }
.menu-who { padding: 10px 12px 0; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.menu-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico-sun, :root[data-theme="light"] .ico-moon { display: none; }
:root[data-theme="light"] .ico-sun { display: block; }
/* Phones: the menu is a full-width panel under the header with the burger turning into ×, links as big rows, and the
   theme switch beside Sign in / My videos at the bottom; who is signed in, or "Not signed in" for a guest, then a
   real Sign out or Sign in button (after the AI vocals site and RapDuo, 10-27/28). */
.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); }
@media (max-width: 860px) {
  .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 > 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; }
  /* The language switch sits as an icon left of the theme one on the panel's last line (after the AI vocals site);
     the header keeps only the site name, Upload and the menu. */
  .site-header .lang-menu { display: none; }
  .site-header .nav-menu > ul > .menu-lang, .site-header .nav-menu > ul > .menu-theme, .site-header .nav-menu > ul > .menu-account { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .site-header .nav-menu > ul > .menu-lang { 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 { display: grid; place-items: center; width: 44px; height: 44px; margin-right: 6px; border-radius: 12px; 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 { width: 22px; height: 22px; }
  .site-header .menu-lang ul { position: absolute; top: auto; right: auto; bottom: calc(100% + 6px); left: 0; min-width: 0; z-index: 2; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; width: min(340px, calc(100vw - 40px)); margin: 0; padding: 6px; list-style: none; background: var(--ink-3); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .35); }
  .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-header .nav-menu .menu-theme .theme-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--text); }
  .menu-theme .menu-ico { width: 22px; height: 22px; }
  .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); }
  .site-header .menu-who { margin-top: 14px; padding: 0; font-size: 14px; }
  .site-header .menu-signout { margin: 0; padding: 8px 0 0; border: 0; }
  .site-nav .nav-menu .menu-signout [data-signout] { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 16px; font-weight: 600; text-align: center; }
  .site-header .menu-signin { padding-top: 8px; }
  .site-nav .nav-menu .menu-signin a { justify-content: center; min-height: 48px; border-radius: 12px; background: var(--accent); color: var(--ink); font-size: 16px; font-weight: 700; }
}
.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; }
/* A 44px tap target, centered on one or two lines (it was 25x24, 11-03). */
.lang-banner button { position: absolute; top: 50%; right: 0; translate: 0 -50%; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; 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; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; margin: -4px 0 14px; }
.effect-tabs a { flex: none; }
.effect-tabs a { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid rgba(13, 11, 18, .2); background: #fff; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.effect-tabs a[aria-current] { background: var(--ink); color: var(--accent); border-color: var(--ink); }
/* Over the strip where it slides: "Pick a template" and "See all N →" (parts.mjs stripHead); computers see every cell. */
.et-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: -2px 0 8px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #6e6578; }
.et-head a { color: var(--ink); white-space: nowrap; text-underline-offset: 3px; }
@media (min-width: 961px) { .et-head { display: none; } }
/* "See all N →" after the hottest ones (parts.mjs allTab): a plain link-pill, no thumbnail. */
.effect-tabs a.et-all { padding: 4px 14px; border-style: dashed; background: transparent; color: var(--ink); }
.effect-tabs a.et-all:hover { border-style: solid; }
/* A template pill: its first sample as a round thumbnail, the name, "New" for the newest three (parts.mjs effectTab). */
.et-thumb { display: grid; place-items: center; width: 34px; height: 34px; flex: none; overflow: hidden; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 18px; font-weight: 700; }
.et-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.effect-tabs a[aria-current] .et-any { background: var(--accent); color: var(--ink); }
.et-new { padding: 2px 6px; border-radius: 999px; background: var(--accent); color: var(--ink); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.2; }
/* No photo yet when the button was pressed: the box says so (studio.js flag), the alert under it says why. */
.drop.invalid { border-color: #b3261e; border-style: solid; background: #fff1f0; box-shadow: 0 0 0 3px rgba(179, 38, 30, .22); }
.studio-toast[hidden] { display: none; }
/* The pay window and the hidden deal (studio.js paywall, maybeDeal), after the AI vocals site's and RapDuo's: cream like
   the ticket, the video about to be bought on top, cards with the led one in the sticker shadow.
   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-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-text { margin: 0; font-size: 15px; line-height: 1.45; color: #4d4558; }
.gate-video { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 2px 0 0; padding: 10px 12px; border: 2px dashed rgba(13, 11, 18, .22); border-radius: 16px; background: #fff8ee; }
.gate-video img { width: 40px; height: 52px; object-fit: cover; border-radius: 8px; background: var(--ink); }
.gate-video img[hidden] { display: none; }
.gate-video-text { display: grid; gap: 2px; min-width: 0; }
.gate-video-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.gate-video-text small { font-size: 13px; line-height: 1.3; color: #6e6578; }
.gate-no { 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; }
.pay { width: min(440px, calc(100vw - 32px)); }
.pay[open] { gap: 10px; }
.pay-note { margin: -4px 0 0; font-size: 14px; line-height: 1.4; font-weight: 700; color: #1f6e3f; }
.pay-note::before { content: "✓ "; }
.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; }
.pay-name { font: 700 15px/1.3 var(--sans); }
.pay-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; }
.pay-price small { white-space: nowrap; }
.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-was { margin-left: 4px; font-weight: 600; color: #8a8295; }
.pay-cheaper { justify-self: center; min-height: 44px; padding: 6px 4px; border: 0; background: none; color: var(--ink); font: 700 14px/1.3 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pay-cheaper[hidden] { display: none; }
.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); }
/* Phones: each option on one row, the button on its right, so the whole window fits one screen (11-03, from
   firsttimeinafancycafe.com 4d87aa4: stacked with full-width buttons it was ~910px tall on an 844px iPhone, the last
   button and the links under it out of view). */
@media (max-width: 759px) {
  .pay .gate-title { font-size: 21px; }
  .pay-cards { gap: 10px; }
  .pay-card { grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center; padding: 12px 12px 12px 14px; }
  .pay-card > :not(.pay-cta, .pay-badge) { grid-column: 1; }
  .pay-cta { grid-column: 2; grid-row: 1 / span 3; width: 140px; min-height: 44px; margin: 0; padding: 4px 10px; text-align: center; }
  .pay-card.lead { margin: 8px 4px 4px 0; }
  .pay-price b { font-size: 25px; }
  .pay-card-note { font-size: 12.5px; line-height: 1.35; }
}
@media (max-width: 380px) {
  .pay-price b { font-size: 22px; }
  .pay-price small { font-size: 13px; }
  .pay-cta { width: 124px; font-size: 14px; }
}
@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; }
}
.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; box-shadow: 3px 3px 0 var(--ink); }
.deal-badge::before { content: "✦ "; }
.deal-go { display: flex; align-items: center; justify-content: center; width: 100%; 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); box-shadow: 0 5px 0 var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.deal-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.deal-price { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; }
.deal-price s { font: 700 17px/1.2 var(--sans); color: #8a8295; }
.deal-save { padding: 2px 8px; border-radius: 6px; background: #1f6e3f; color: #fff; font: 800 13px/1.3 var(--sans); letter-spacing: .03em; text-transform: uppercase; }
.deal-ends { margin: 4px 0 0; text-align: center; font-size: 14px; font-weight: 700; color: #b3261e; font-variant-numeric: tabular-nums; }
.deal-approx { color: #4d4558; font-weight: 600; }
.deal-approx:not(:empty)::before { content: "· "; }
/* The one-time offer under the button after "No thanks", with its clock (hotellobbyvideo's offer line, 11-04). */
.deal-line { margin: 8px 0 0; text-align: center; }
.deal-line[hidden] { display: none; }
.deal-line .link-btn { padding: 6px 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); color: var(--ink); font-weight: 800; font-size: 14px; text-decoration: none; font-variant-numeric: tabular-nums; }
@media (max-width: 360px) { .gate { padding: 18px 16px 12px; } }
@media (max-width: 960px) {
  .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; }
}
.drop-error { margin: 8px 2px 0; font-size: 14px; font-weight: 700; color: #b3261e; }
.drop-error:empty { display: none; }
.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; }
.seg-ver span { white-space: normal; padding: 9px 10px; }
.seg-ver b { display: block; font-size: 15px; }
.seg-ver small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.seg-ver small i { font-size: 13px; font-weight: 800; color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-opt { position: relative; cursor: pointer; }
.chip-opt input { position: absolute; opacity: 0; pointer-events: none; }
.chip-opt span { display: block; padding: 7px 12px; border-radius: 999px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); font-size: 14px; }
.chip-opt span i { font-style: normal; font-weight: 700; color: #7a5b00; }
.chip-opt input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--accent); }
.chip-opt input:checked + span i { color: var(--accent); }
.chip-opt input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.opt-grid { display: grid; gap: 10px; }
/* The video options on one line with what's picked and its credits (rapduo); a tap opens the choices. */
.opt-more { border: 2px solid rgba(13, 11, 18, .14); border-radius: 12px; background: #fff; }
.opt-more summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 8px 12px; }
.opt-more summary::-webkit-details-marker { display: none; }
.opt-more[open] summary { border-bottom: 1px solid rgba(13, 11, 18, .1); }
.opt-text { min-width: 0; display: grid; gap: 1px; }
.opt-text b { font-size: 14px; font-weight: 700; }
.opt-text small { font-size: 12px; color: #6e6578; text-decoration: underline; text-underline-offset: 2px; }
.opt-credits { flex: none; font-size: 13px; font-weight: 800; padding: 5px 9px; border-radius: 8px; background: #f1ece2; white-space: nowrap; }
.opt-credits::after { content: " ▾"; font-size: 11px; }
.opt-more[open] .opt-credits::after { content: " ▴"; }
.opt-more .opt-grid { padding: 12px; gap: 14px; }
.opt-more .seg span { min-height: 44px; display: flex; align-items: center; justify-content: center; }
/* Inside "Change model, …" (after rapduo): every row is one line of equal pills, only the choices the picked model
   makes (parts.mjs seg); the formats show the ratio over its word ("9:16" / "vertical"). */
.opt-more .seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.opt-more .seg label[hidden] { display: none; }
.opt-more .seg span { padding: 6px 8px; text-align: center; }
.seg span small { display: block; font-size: 11px; font-weight: 500; line-height: 1.2; color: #6e6578; }
.seg input:checked + span small { color: #2d3a35; }
.opt-more .seg-aspect span { flex-direction: column; white-space: normal; line-height: 1.15; }
.seg input:disabled + span { opacity: .38; cursor: not-allowed; }
/* The models as two columns of small cards (rapduo): name, maker and top resolution, credits; the picked one's full
   facts in the line under them (studio.js). */
.opt-models { grid-template-columns: minmax(0, 1fr); }
.model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.model-row { position: relative; cursor: pointer; }
.model-row input { position: absolute; opacity: 0; pointer-events: none; }
.model-row span { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: space-between; align-items: baseline; gap: 3px 6px; height: 100%; box-sizing: border-box; padding: 8px 9px; border-radius: 10px; border: 2px solid rgba(13, 11, 18, .14); background: #fff; color: var(--ink); }
.model-row b { font-size: 13.5px; line-height: 1.2; letter-spacing: -.1px; }
.model-row b { grid-column: 1 / -1; }
.model-row em { font: 400 12px/1.3 var(--sans); color: #6e6578; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.model-row i { font-style: normal; font-size: 13px; font-weight: 800; white-space: nowrap; }
.model-row input:checked + span { border-color: var(--ink); background: var(--accent); }
.model-row input:checked + span em { color: #2d3a35; }
.model-row input:focus-visible + span { outline: 3px solid var(--accent-2); outline-offset: 2px; }
/* In the open options each row's name sits above its choices at every width (rapduo), so the pills and model cards
   get the card's full width. */
.opt-more .opt { grid-template-columns: minmax(0, 1fr); gap: 6px; }
.model-facts { margin: 2px 2px 0; font-size: 12px; line-height: 1.4; color: #6e6578; }
p.opt-sum { margin: 0; font-size: 14px; font-weight: 600; }
.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 { 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; }
.drop-busy { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(13, 11, 18, .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); }
.btn-preview { border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: 14px; padding: 8px 10px; cursor: pointer; display: grid; align-content: center; gap: 2px; text-align: center; }
.btn-preview-label { font: 900 19px/1 var(--display); text-transform: uppercase; letter-spacing: .5px; }
.btn-preview small { font-size: 12px; color: #4d4558; }
.btn-preview:hover { background: var(--accent); }
/* Longer labels take two lines on narrow phones instead of an ellipsis (AI vocals site; 11-03). */
.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, .studio.busy .btn-preview { 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; }
.pack-line .link-btn { color: var(--ink); font-weight: 700; }
/* Under the button, only the pack offer when it shows, like the AI vocals site (主人 11-03「价格可以不写在 make 上，
   参考写歌站」): this video's own price comes in the payment window. Paying with credits, "This video: ⚡40" stays. */
.pack-line:has(#pack-buy:not([hidden])) #video-credits, .pack-line #pack-sep { display: none; }
.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; }
.result .vid-wait { border-radius: 14px; aspect-ratio: auto; min-height: 180px; color: var(--cream); }
.result video { width: 100%; max-height: 420px; border-radius: 14px; background: #000; }
.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 instead of the browser's white one (after the AI vocals site). */
.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; }
.cost-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.cost-table th, .cost-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cost-table thead th { background: var(--ink-2); font-weight: 700; }
.cost-table tbody tr:last-child > * { border-bottom: 0; }
.cost-table tbody th small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.cost-table td small { font-size: 12px; color: var(--muted); }
.cost-table td small.cost-own { display: block; }
/* 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-card .tag { justify-self: start; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; }

/* 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; }
.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); }

/* 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; }
.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; }
.account-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .account-grid { grid-template-columns: minmax(0, 1fr); } }
.vid-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px 0; font-size: 14px; }
.vid-actions a { font-weight: 700; }
.vid-actions .btn-go { width: auto; font-size: 16px; padding: 10px 12px; background: var(--accent); color: var(--ink); text-decoration: none; }
.vid-meta span { color: var(--muted); }
.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"] .phone-figure { box-shadow: 0 24px 56px rgba(40, 30, 10, .16); }
: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"] .site-header .menu-lang ul { background: #fff; }
:root[data-theme="light"] .footer-language-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); }

/* "Photo on your phone?" / "Get your videos on your phone" (computers): the button and the QR code dialog (app.js
   phoneQR), and /phone/, the page the code opens on the phone (phone.js). */
.phone-line { margin: 8px 0 0; }
.phone-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: #fff8ec; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; }
.phone-btn:hover { background: var(--accent); }
.post-tips .phone-btn { margin-bottom: 12px; }
.phone-dialog { width: min(360px, 100% - 32px); padding: 22px; border: 0; border-radius: 18px; background: var(--cream); color: var(--ink); text-align: center; }
.phone-dialog::backdrop { background: rgba(11, 11, 12, .72); }
.phone-title { margin: 0 0 6px; font-family: var(--display); font-size: 26px; font-weight: 800; text-transform: uppercase; line-height: 1.05; }
.phone-how { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #3d3547; }
.phone-qr { width: 220px; height: 220px; margin: 0 auto; }
.phone-qr svg { display: block; width: 100%; height: 100%; }
.phone-wait { margin: 12px 0 10px; font-size: 13px; color: #6e6578; }
.phone-wait:empty { display: none; }
.phone-dialog .phone-close { color: #3d3547; }
.phone-pick { position: relative; justify-content: center; margin-top: 8px; }
.phone-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.phone-pick.is-busy { opacity: .6; pointer-events: none; }
.phone-preview { display: block; width: 100%; max-height: 300px; object-fit: contain; margin-top: 14px; border-radius: 12px; background: #1c1724; }
.form-msg.ok { color: #3f8f2a; font-weight: 600; }

/* Phones, after the AI vocals site and RapDuo (10-28): the header stays pinned, opaque, with an Upload button that
   opens the photo picker (studio.js); sections alternate two backgrounds edge to edge, each led by a small tag; the
   template wall is two columns of small cards; long FAQs show their first questions (app.js fold). */
:root { --alt-bg: #17161b; --alt-card: #0d0d10; }
:root[data-theme="light"] { --alt-bg: #efe9dd; --alt-card: #ffffff; }
.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); }
.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; }
.fold-btn { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 860px; 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:not(.unfolded) .faq > details:nth-child(n+7) { display: none; }
.nav-cta-short { display: none; }
@media (max-width: 960px) {
  body { overflow-x: clip; padding-top: 65px; }
  html { scroll-padding-top: 76px; }
  body::before { top: 65px; }
  .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); }
  /* The language banner scrolls away with the page: sticky at top 0 it sat over this fixed bar and hid the name,
     Upload and the menu (seen on Turnly and Coffee Making AI with a Spanish browser, 11-03; AI vocals site fced058). */
  .lang-banner { position: relative; }
  .site-header .site-nav { gap: 8px; }
  .site-header .site-nav > .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; font-size: 14px; }
  .site-header .site-nav > .nav-cta:hover { color: var(--ink); background: var(--accent); } /* a tap leaves :hover stuck on phones */
  .site-nav > .nav-account { display: none; }
  .nav-cta .nav-cta-text { display: none; }
  .nav-cta .nav-cta-short { display: inline; }
  .site-nav .nav-menu > ul > li:first-child { display: none; } /* the same button is in the header */
  .hero { padding-bottom: 40px; }
  /* The headline and the photo above say it (as on the AI vocals site): no kicker or facts line, the upload box comes up. */
  .hero .eyebrow, .hero-tpl .facts { display: none; }
  /* With the kicker gone the headline and its clip take the first grid row (they were placed in row 2, under it). */
  .hero:not(.hero-trend) .hero-copy > h1, .hero:not(.hero-trend) .hero-demo { grid-row: 1; }
  .lede { font-size: 16px; line-height: 1.5; }
}
@media (max-width: 560px) {
  /* One row for headline and clip: spanning two left an empty row beside the clip under a short headline (11-01,
     the Japanese Dog Coffee Fail page: about 100px of blank before the lede). */
  .hero-trend .hero-copy:has(.hero-demo) > h1 { grid-row: 1; align-self: center; }
  .hero-trend .hd-media { grid-row: 1; }
  /* The headline already says it: drop the ticket's "Make your video" stub so the upload box makes the first screen. */
  .ticket { padding-top: 16px; }
  .ticket::before, .ticket::after, .ticket-kicker { display: none; }
  .ticket-head { padding: 0; margin: 0; border: 0; }
  /* Once there's an account, the credits chip is all that's left of the head: on the right like on computers, clear
     of the template strip under it (it sat on the strip's pills, 主人 2026-11-04 screenshot). */
  .ticket-head:has(.ticket-balance:not([hidden])) { justify-content: flex-end; margin-bottom: 12px; }
  .ticket-balance { font-size: 16px; padding: 5px 10px; }
  .hero { gap: 16px; }
  .facts { margin-top: 8px; }
  .price-card { padding: 18px 18px 16px; }
  .price-card .price-amount { font-size: 42px; margin: 6px 0 2px; }
}

/* Template cards after RapDuo's effect grid (10-28): a poster tile with the name over a dark fade, two lines below.
   3:4 tiles keep a desktop row at six cards; posters are 9:16, so the crop sits a little above center (faces). */
.effect-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 14px; }
.effect-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--text); text-decoration: none; }
.effect-card[hidden] { display: none; }
.ec-media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 16px; background: var(--ink-2); border: 1px solid var(--line); transition: border-color .2s; }
.ec-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.ec-media::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgba(8, 7, 10, .82)); }
.ec-media b { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; font: 900 21px/1 var(--display); text-transform: uppercase; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .5); }
.effect-card .tag { position: absolute; top: 10px; left: 10px; z-index: 1; }
.ec-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding: 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.effect-card i { padding: 0 2px; font-style: normal; font-size: 14px; font-weight: 700; color: var(--accent-text); }
.effect-card:hover .ec-media, .effect-card:focus-visible .ec-media { border-color: var(--accent); }
.effect-card:hover .ec-media img { transform: scale(1.04); }
/* The sample, played over the poster while the pointer is on the card (app.js), fading in once it has a frame. */
.ec-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; transition: opacity .25s; pointer-events: none; }
.ec-media video.on { opacity: 1; }
.wall-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 22px; }
.wall-filter button { min-height: 44px; padding: 8px 15px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--text); font: 600 14px/1 var(--sans); cursor: pointer; }
.wall-filter button:hover { border-color: var(--accent); }
.wall-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.tpl-head { width: var(--wrap); margin: 0 auto 26px; padding-top: 30px; }
@media (max-width: 960px) {
  .effect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 10px; }
  .ec-media { border-radius: 12px; }
  .ec-media b { left: 10px; right: 10px; bottom: 9px; font-size: 17px; }
  .ec-sum { font-size: 13px; line-height: 1.4; }
  .wall-filter { flex-wrap: nowrap; overflow-x: auto; margin: 0 -20px 16px; padding: 0 20px 4px; scrollbar-width: none; }
  .wall-filter button { flex: none; }
}
/* Desktop: the hero's two columns stay inside the page (a grid item's min-content, here the studio's long template
   chips, would otherwise widen the right column past the screen edge), and the chips wrap instead of scrolling. */
.hero > * { min-width: 0; }
/* Phones and tablets, where the strip scrolls: it runs to the card's edges and fades out on the right, so the pill at
   the edge reads as "swipe for more" (it was cut at the card's padding, "New" in half, 主人 11-04; jumponthetrend's
   category pills run off the screen edge); phones get smaller pills, two and a half on screen. */
@media (max-width: 960px) {
  .effect-tabs { margin-left: -22px; margin-right: -22px; padding-left: 22px; scroll-padding: 0 22px; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 44px), transparent); }
  .effect-tabs::-webkit-scrollbar { display: none; }
  .effect-tabs::after { content: ""; flex: 0 0 30px; }
}
@media (max-width: 560px) {
  .effect-tabs a { min-height: 36px; gap: 6px; padding: 3px 10px 3px 3px; font-size: 13px; }
  .effect-tabs a.et-all { padding: 3px 12px; }
  .effect-tabs .et-thumb { width: 28px; height: 28px; font-size: 15px; }
  .effect-tabs .et-new { padding: 2px 5px; font-size: 10px; }
}
.tpl-head + .effects-more { border-top: 0; padding-top: 6px; }
/* Computers: the strip is a grid of equal cells, every one in sight, four to a row in the 494px card (three in a
   narrower one): wrapped pills ran 3, 2, 2 and 1 to a row (主人 11-04「不整齐你看看要不要设计好」), and one sliding row
   would have hidden all but two. Names take up to three lines (First Time in a Fancy Cafe, fr N'importe quelle photo);
   "New" sits on the cell's top edge; the last cell is
   "See all N →", as jumponthetrend ends its trend row and Higgsfield its preset grid. */
@media (min-width: 961px) {
  .effect-tabs { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; overflow: visible; padding: 6px 0 0; margin: -6px 0 16px; }
  .effect-tabs a { position: relative; min-width: 0; min-height: 52px; padding: 4px 6px 4px 4px; gap: 6px; border-radius: 16px; font-size: 12px; line-height: 1.15; white-space: normal; }
  .effect-tabs .et-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-width: 0; overflow-wrap: anywhere; }
  .et-long { -webkit-hyphens: auto; hyphens: auto; }
  .effect-tabs .et-new { position: absolute; top: -7px; right: 7px; padding: 1px 6px; font-size: 9.5px; }
  .effect-tabs a.et-all { justify-content: center; text-align: center; padding: 4px 8px; }
  .et-thumb { width: 28px; height: 28px; font-size: 15px; }
}
/* Footer: templates get their own column so the product list stays short (four columns from 1000px). */
@media (min-width: 1000px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }

/* The pay button is only the action; under it the credits for this video (after the AI vocals site, 10-28). */
.pack-line { font-size: 13.5px; line-height: 1.5; color: #4d4558; text-wrap: balance; }
.pack-line .link-btn { font-size: inherit; text-underline-offset: 2px; }
@media (max-width: 560px) {
  /* Close under the button as on the AI vocals site, still a comfortable tap (32px; it was 20px). */
  .ticket .pack-line { margin-top: 2px; }
  .ticket .pack-line .link-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0; }
}
#go { justify-content: center; }

/* Section polish after the AI vocals site (10-28 主人「对比写歌站整体优化」): how it works sits in the answer, three
   steps with an icon and a faint number, an upload button, the details folded under them; FAQ beside its heading on
   computers; prices and real results scroll sideways on phones; the last call to action glows; the footer is two
   columns on phones. */
.sec-alt { border-top: 0; }
.sec-alt + section, .sec-alt + .final { border-top: 0; }
.gallery-center > .sec-tag { display: table; margin-inline: auto; }
.sec-lead { margin: -16px auto 28px; max-width: 56ch; color: var(--muted); font-size: 16px; line-height: 1.5; text-align: center; }
.answer-solo { align-items: start; gap: 0; }
.answer .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, .answer-more li { color: var(--text-2); font-size: 15px; }
.answer-more p { margin: 0 0 12px; }
.answer-more > ul, .answer-more > ol { margin: 0 0 14px; }
.answer-more .changes { margin: 0 0 16px; font-size: 14px; }
@media (min-width: 961px) {
  .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 > .fold-btn { grid-row: 4; }
}
@media (max-width: 960px) {
  .gallery-center > .sec-tag { display: inline-block; margin-inline: 0; }
  .sec-lead { margin: -8px 0 20px; text-align: left; font-size: 15px; }
  .answer .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 { justify-content: center; }
  .sec-go .guide-cta, .final-go .guide-cta { width: 100%; text-align: center; }
  .answer-more { padding: 0 16px; }
  .answer-lead { font-size: 17px; }
  body:has(#studio) .pricing .price-grid { display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px); grid-template-columns: none; justify-content: start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin: 0 -20px; padding: 14px 20px 4px; scroll-padding: 0 20px; }
  body:has(#studio) .pricing .price-grid::-webkit-scrollbar { display: none; }
  .pricing .price-card { scroll-snap-align: start; }
  .pricing .section-head { margin-bottom: 8px; }
  .price-more { margin-top: 16px; }
  .price-more .guide-cta { display: block; text-align: center; }
  .how, .pricing, .faq-wrap, .more, .effects-more, .answer { padding: 48px 0; }
  .final { padding-bottom: 56px; background-image: 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; }
}
@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; }
}
/* The template wall: phones show six cards, then "Show N more" (home.mjs WALL_SHOWN); computers twelve, two rows
   (WALL_DESK), once there are more. The rest of a long list is on /templates/ (.wall-all). */
.effects-more > .fold-btn { display: none; }
@media (max-width: 960px) {
  .effects-more.fold:not(.unfolded) .effect-card:nth-child(n+7) { display: none; }
  .effects-more.fold:not(.unfolded) > .fold-phone { display: flex; margin-top: 16px; }
}
@media (min-width: 961px) {
  .effects-more.fold:not(.unfolded):has(> .fold-desk) .effect-card:nth-child(n+13) { display: none; }
  .effects-more.fold:not(.unfolded) > .fold-desk { display: flex; margin-top: 16px; }
}
.wall-all { margin: 18px 0 0; }
.more > .fold-btn { display: none; }
@media (max-width: 560px) {
  .more.fold:not(.unfolded) .more-list > li:nth-child(n+5) { display: none; }
  .more.fold:not(.unfolded) > .fold-btn { display: flex; }
}
/* A page that lists the guides already doesn't repeat them in the footer. */
body:has(main .more-list) .footer-guides { display: none; }

/* "How did you find us?" under the spinner while a paid video is made (studio.js askFound) */
.found { margin-top: 18px; }
.found-opts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.found-opts button { font: 600 13px/1.2 var(--sans); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line, rgba(127,127,127,.35)); background: transparent; color: inherit; cursor: pointer; }
.found-opts button:hover { border-color: currentColor; }
/* "Make it a card to send" under a finished video (studio.js cardForm) */
.card-form { margin-top: 14px; text-align: left; }
.card-form summary { cursor: pointer; font-weight: 700; }
.card-form form { display: grid; gap: 10px; margin-top: 10px; }
.card-form label { display: grid; gap: 4px; font-size: 13px; }
.card-form input, .card-form select, .card-form textarea { font: inherit; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: transparent; color: inherit; }
.card-done { margin-top: 10px; display: grid; gap: 8px; }
.card-preview { margin: 0; display: grid; gap: 4px; }
.card-preview img { width: 100%; max-width: 420px; border-radius: 10px; border: 1px solid var(--line); }
.found-panel { text-align: center; margin-top: 12px; }
.found-panel .found { margin-top: 0; }

/* A template card's cost and photos under its name (home.mjs cardMeta). */
.card-meta { display: block; margin-top: 5px; font: 700 12px/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .86); }
.hp-card .card-meta { font-size: 11px; margin-top: 4px; }

/* The first-screen sample's sound button says "Play with sound" (parts.mjs soundButton labelled); once on, just 🔊. */
.hd-tile .sound-labelled { width: auto; height: 28px; padding: 0 10px 0 8px; gap: 5px; border-radius: 999px; display: inline-flex; align-items: center; left: 6px; right: 6px; justify-content: center; font: 700 12px/1 var(--sans); color: #fff; white-space: nowrap; }
.hd-tile .sound-labelled[aria-pressed="true"] { left: auto; width: 28px; padding: 0; }
.sound-labelled .sb-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sound-labelled[aria-pressed="true"] .sb-text { display: none; }
@media (max-width: 560px) {
  .hd-tile .sound-labelled { left: auto; width: 28px; padding: 0; }
  .hd-tile .sound-labelled .sb-text { display: none; }
}

/* Template pages on a computer: the sample is in the first screen (MakeViral and ViralVideoAI show it there; the
   four-line 110px name pushed it to 730px, 主人 10-31). A smaller name, and the clip bigger. */
@media (min-width: 961px) {
  .hero-tpl h1 { font-size: clamp(40px, min(5.4vw, calc(560px / var(--fit, 1) * 1.9)), 80px); margin-bottom: 16px; }
  .hero-tpl .lede { font-size: 18px; }
  .hero-tpl .hero-demo { --hd: 96px; }
}

/* /ai-video-trends/ (home.mjs trendsPage): one row a trend, poster on the left. */
.trend-group { margin: 40px 0 0; }
.trend-group h2 { margin: 0 0 4px; }
.trend-list { display: grid; gap: 20px; margin-top: 18px; }
.trend-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: start; padding-top: 20px; border-top: 1px solid var(--line); }
.trend-media img { display: block; width: 96px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 12px; }
.trend-item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 6px; }
.trend-item p { margin: 6px 0; max-width: 70ch; }
.trend-meta { font-size: 14px; }
.trend-all { margin: 44px 0 0; }
@media (max-width: 560px) {
  .trend-item { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; }
  .trend-media img { width: 64px; border-radius: 9px; }
}

/* The two-step generator (studio.js): your photo next to the free preview still, both 9:16. */
.studio2 .s2-stage { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.studio2 .s2-stage:has(.s2-still:not([hidden])) { grid-template-columns: 1fr 1.4fr; }
.studio2 .s2-drop { min-height: 240px; }
.studio2 .s2-drop.has-photo { padding: 0; overflow: hidden; }
.studio2 .s2-drop.has-photo .drop-preview { width: 100%; height: 100%; max-height: none; object-fit: cover; }
.s2-still { position: relative; display: grid; place-items: center; aspect-ratio: 9 / 16; max-height: 520px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-3); overflow: hidden; }
.s2-still img { width: 100%; height: 100%; object-fit: cover; }
.s2-wait { display: grid; gap: 8px; justify-items: center; padding: 16px; text-align: center; }
.s2-wait[hidden] { display: none; }
.s2-wait small { color: var(--muted); font-variant-numeric: tabular-nums; }
.s2-selfie { margin: 8px 0 0; text-align: center; }
.s2-selfie-btn { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .s2-selfie { display: none; } }
.s2-carry { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; }
.s2-edit { display: grid; gap: 10px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; }
.s2-edit[hidden] { display: none; }
.s2-edit legend { padding: 0 6px; font-weight: 700; }
.s2-edit .text-opt input { width: 100%; }
.studio2 .go-row { margin-top: 14px; }
.studio2 .go-row[hidden] { display: none; }
.studio-pick .pick-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; margin: 12px 0; padding: 0; list-style: none; }
.studio-pick .pick-list a { display: grid; gap: 6px; color: var(--text); font-size: 13px; font-weight: 600; text-decoration: none; }
.studio-pick .pick-list img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--ink-3); }
@media (max-width: 560px) { .studio2 .s2-stage:has(.s2-still:not([hidden])) { grid-template-columns: 1fr 1.6fr; } .studio2 .s2-drop { min-height: 180px; } }

/* ---------- trend grid: home, /trends/, categories, "more trends" (home.mjs trendGrid, trends.js) ---------- */
section.page-head { width: var(--wrap); margin: 0 auto; padding: 30px 0 0; }
.hero-home { padding-bottom: 10px; }
.trends-wall { width: var(--wrap); margin: 0 auto; padding: 10px 0 50px; }
.trends-wall > h2 { margin: 0 0 16px; }
.trends-wall + .sec-go, main > .sec-go { width: var(--wrap); margin: -20px auto 40px; }
.tf { display: grid; gap: 12px; margin-bottom: 18px; }
.tf-q { width: 100%; max-width: 420px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-2); color: var(--text); font: inherit; }
.tf-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.tf-cats::-webkit-scrollbar { display: none; }
.tf-cat { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; }
.tf-cat[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.tgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.tc a { position: relative; display: block; color: var(--text); text-decoration: none; }
.tc img { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 14px; background: var(--ink-3); }
.tc a:hover img { outline: 2px solid var(--accent); outline-offset: 2px; }
.tc-new { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--accent-3); color: var(--ink); font-size: 12px; font-weight: 700; }
.tc-name { display: block; margin-top: 8px; font-weight: 700; line-height: 1.25; }
.tc-meta { display: block; font-size: 13px; color: var(--muted); }
.tf-none { margin-top: 14px; }
@media (max-width: 560px) { .tgrid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.orig { margin: 16px 0 0; max-width: 260px; }
.orig video { width: 100%; aspect-ratio: 9 / 16; border-radius: 14px; background: var(--ink-3); }
.orig figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.cat-list, .week-list { padding-left: 1.2em; }
.cat-list li, .week-list li { margin-bottom: 12px; }
/* Phones: the original clip as a small thumbnail beside its credit, so the generator stays near the first screen. */
@media (max-width: 560px) {
  .orig { display: flex; gap: 12px; align-items: center; max-width: none; margin-top: 12px; }
  .orig video { width: 96px; flex: none; border-radius: 10px; }
  .orig figcaption { margin: 0; }
}
.orig img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 14px; background: var(--ink-3); }
@media (max-width: 560px) { .orig img { width: 96px; flex: none; border-radius: 10px; } }