/* Page-specific styles for the Clear demo.
 * Loads on top of theme.css. Mostly: the A/B clip player + clip list.
 */

/* ─────────── Hero ─────────── */

.hero {
  padding-top: clamp(2rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 7vw, 6rem);
}
.hero .lead { margin-top: clamp(2rem, 4vw, 3rem); max-width: 42ch; }

/* ─────────── Model intro ─────────── */

.model-intro .display-sm { margin-bottom: 1rem; }
.model-intro .lead { max-width: 40ch; margin-bottom: 2rem; }

.tier-card {
  padding: 1.5rem 1.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tier-card .tier-name {
  font-size: 1.5rem;
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
}
.tier-card .tier-name .dot { color: var(--accent); }
.tier-card p { margin: 0; color: var(--ink-soft); }
.tier-card .meta { margin-top: 0.6rem; }

/* ─────────── Clip player (the centerpiece) ─────────── */

/* Grid of narrow cards: 1 col on small viewports (the `min(28rem, 100%)`
   guard stops a 28rem card from blowing out a 375 px phone), fills with
   more as width grows. */
.clip-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(28rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.clip {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
/* Vertical rhythm. */
.clip > .clip-index { margin-bottom: 1.5rem; }
.clip > .controls-row { margin-bottom: 2.5rem; }
.clip > .quote { margin-top: 0; margin-bottom: 1.5rem; }
.clip > .transport { margin-top: 0; }
/* Single-column card: header (index + quote), then transport, then controls. */
.clip header { display: flex; flex-direction: column; gap: 1.25rem; }
.clip .player-area {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  margin-top: 1.5rem;
}

/* Play button alongside the scrubber — matches the toggle-pill row height. */
.clip .play.play-lg {
  width: 1.8rem; height: 1.8rem;
}
.clip .play.play-lg svg { width: 1rem; height: 1rem; }

/* Controls row: pills + slider+labels share one line, centered vertically. */
.clip .controls-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  min-width: 0;
}
.clip .controls-row .track-pills { flex: 0 0 auto; }
.clip .controls-row .mix-row { flex: 1 1 auto; min-width: 0; }
.clip .clip-index,
.clip .section-label {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  color: var(--muted);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.clip .section-label { margin-bottom: -0.5rem; }
.clip .quote {
  /* Equal-height quote blocks: 3-line clamp keeps every card the same size. */
  display: flex;
  align-items: center;
  min-height: 5.5rem;
  font-size: clamp(1.2rem, 1.7vw, 1.5rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--ink);
}

.clip .challenge {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.clip .challenge .arrow { color: var(--accent); margin-right: 0.4em; }

/* Player */
/* Transport (play + scrubber + times) — sits under the quote in the left column. */
.transport {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-width: 0;
}
.track-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.clip .play {
  flex: 0 0 auto;
  /* Matches the height of the .track-pills row: 3px outer padding + inner pill
     (0.4rem * 2 vertical padding + 0.8rem font * ~1.2 line-height). */
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: white;
  border: 0;
  cursor: pointer;
  font-size: 0.78rem;
  transition: background 120ms ease, transform 80ms ease;
}
.clip .play:hover { background: var(--ink); }
.clip .play[data-state="playing"] { background: var(--ink); }
/* SVGs inline-default to a baseline shift; force block so flex-center actually centers them. */
.clip .play svg { display: block; }

.track-pills {
  display: inline-flex;
  border-radius: 999px;
  border: 1px solid var(--line);
  padding: 2px;
  background: var(--surface);
  gap: 2px;
}
.track-pills .pill {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  color: var(--ink);
}
.track-pills .pill.active {
  background: var(--ink);
  color: white;
}
.track-pills .pill.active.studio { background: var(--accent); border-color: var(--accent); }
.track-pills .pill.active.natural { background: var(--accent); border-color: var(--accent); }

.scrubber {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: var(--surface-soft);
  cursor: pointer;
  overflow: hidden;
}
.scrubber .progress {
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ink);
  border-radius: 999px;
}
.scrubber .progress.accent { background: var(--accent); }

.time-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.player .hint {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Raw ↔ Enhanced mix slider — 0% [slider] 100% on one line. */
.mix-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.6rem;
}
.mix-row .mix-end {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 0;
  padding: 0.25rem 0.4rem;
  margin: 0;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.mix-row .mix-end:hover { color: var(--ink); }
.mix-row .mix-end.accent { color: var(--accent); }
.mix-row .mix-end.accent:hover { color: var(--ink); }
.mix-slider {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  /* Filled portion (left of thumb) = accent; remainder = light gray. */
  background: linear-gradient(to right,
    var(--accent) 0%,
    var(--accent) var(--p, 100%),
    var(--surface-soft) var(--p, 100%),
    var(--surface-soft) 100%);
  border-radius: 999px;
  outline: none;
  margin: 0;
  cursor: pointer;
}
.mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 10, 15, 0.18);
  transition: transform 80ms ease;
}
.mix-slider::-webkit-slider-thumb:hover,
.mix-slider:active::-webkit-slider-thumb { transform: scale(1.08); cursor: grabbing; }
.mix-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 10, 15, 0.18);
}

/* ─────────── Performance section ─────────── */

.perf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 900px) {
  .perf-grid { grid-template-columns: 1.2fr 1fr; }
}

.giant-stat .num {
  font-weight: var(--weight-black);
  font-size: clamp(7rem, 18vw, 14rem);
  line-height: 0.85;
  letter-spacing: -0.06em;
  color: var(--accent);
}
.giant-stat .num .unit { color: var(--ink); }
.giant-stat .caption {
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin-top: 0.5rem;
}

.device-table {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  row-gap: 0.5rem;
  column-gap: 1.5rem;
}
.device-table .row {
  display: contents;
}
.device-table .device {
  font-size: 1.15rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.device-table .row:first-child .device,
.device-table .row:first-child .num { border-top: 0; }
.device-table .num {
  font-weight: var(--weight-black);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  border-top: 1px solid var(--line);
  padding: 0.4rem 0;
  text-align: right;
}
.device-table .row.lead .num { color: var(--accent); }

/* ─────────── CTA ─────────── */

.cta { padding-top: clamp(3rem, 7vw, 6rem); }
.cta .display { margin-bottom: 2rem; }
.cta .lead { margin-bottom: 3rem; max-width: 38ch; }
.cta-apps {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .cta-apps { grid-template-columns: 1fr 1fr; }
}
.cta-links {
  font-family: var(--font-mono);
  font-size: var(--size-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2.5rem;
}
.cta-links a { color: var(--muted); }
.cta-links a:hover { color: var(--accent); }

/* ─── 03b · Try it in the browser ─── */

.try-browser { scroll-margin-top: 1.5rem; }
.try-browser-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 880px) {
  .try-browser-grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.try-browser-form {
  display: flex; flex-direction: column;
  gap: 0;
  min-width: 0;
}

/* Form rows */

.try-row {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.try-row-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-width: 4ch;
}
/* Model toggle — same segmented `track-pills` shape the curated A/B clip
   cards use, just scoped to the drawer via `.try-variant-pills`. The
   radio inputs are visually hidden; the wrapping label paints itself. */
/* Matches the curated A/B clip cards' .track-pills exactly. */
.try-variant-pills {
  border: 1px solid var(--line);
  padding: 2px;
  border-radius: 999px;
  background: var(--surface);
  display: inline-flex; gap: 2px;
  margin: 0;
}
.try-variant-pills .pill {
  position: relative;
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--ink);
  display: inline-flex; align-items: center;
}
.try-variant-pills .pill input {
  position: absolute; inset: 0;
  opacity: 0;
  cursor: pointer;
}
.try-variant-pills .pill:has(input:checked) {
  background: var(--ink); color: white;
}

.try-pill-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* Load button doubles as the download-progress indicator. Idle state is
   a black pill; while loading, the background swaps to a left-anchored
   accent fill driven by `--p`. Text uses `mix-blend-mode: difference`
   so it stays legible over both halves of the fill. */
.try-load-btn {
  position: relative;
  padding: 0.35rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--surface);
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  overflow: hidden;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.try-load-btn:hover { background: var(--accent); border-color: var(--accent); }
.try-load-btn:disabled:not(.loading) { opacity: 0.4; cursor: not-allowed; }

.try-load-btn.loading {
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--p, 0%),
    var(--surface) var(--p, 0%),
    var(--surface) 100%
  );
  border-color: var(--accent);
  color: var(--accent);
  cursor: progress;
}
.try-load-btn.loading > * {
  mix-blend-mode: difference;
  color: white;
}

/* Pick file — outlined pill on white. Subtle, not the primary accent.
   Stays visible after a file is picked so the visitor can swap files. */
.try-file-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  border: 2px solid var(--accent);
  background: var(--surface);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  line-height: 1.4;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.try-file-btn:hover {
  background: var(--accent);
  color: white;
}
.try-file-btn .icon { color: inherit; }
.try-file-btn input { display: none; }
.try-file-btn .icon { display: inline-flex; }
.try-file-btn .icon svg { width: 0.85rem; height: 0.85rem; display: block; }

.try-status {
  font-family: var(--font-mono); font-size: 0.82rem;
  color: var(--muted); letter-spacing: 0.02em;
  margin: 1rem 0; min-height: 1.2em;
}

/* Player adopts the curated `.clip` card shape (border, padding, rhythm).
   This block only adjusts what's specific to the one-off (it lives outside
   the .clip-list grid and the meta line replaces the quote). */
.try-player.clip {
  margin-top: 0.5rem;
}
/* Try-player adopts the curated .clip .quote style for the meta line —
   bold display typeface, ink color. Single line, not multi-line. */
.try-player .controls-row {
  /* Only the Raw/Enhanced mix sits here for now (variant toggle will move
     in once we cache both outputs). Lay the mix-row across the full width. */
  display: flex;
  align-items: center;
}
.try-player .controls-row .mix-row { flex: 1 1 auto; min-width: 0; }
.try-player .mix-slider {
  -webkit-appearance: none; appearance: none; height: 6px;
  background: linear-gradient(to right,
    var(--accent) 0%, var(--accent) var(--p, 100%),
    var(--surface-soft) var(--p, 100%), var(--surface-soft) 100%);
  border-radius: 999px; outline: none; cursor: pointer;
}
.try-player .mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(10, 10, 15, 0.18);
  transition: transform 80ms ease;
}
.try-player .mix-slider::-webkit-slider-thumb:hover,
.try-player .mix-slider:active::-webkit-slider-thumb { transform: scale(1.08); }
.try-player .mix-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  cursor: pointer;
}
.try-player .mix-row {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 0.75rem;
}
.try-player .mix-end {
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; border: 0; color: var(--muted);
  cursor: pointer; padding: 0.2rem 0.4rem;
}
.try-player .mix-end:hover { color: var(--ink); }
.try-player .mix-end.accent { color: var(--accent); }
.try-player .mix-end.accent:hover { color: var(--ink); }

.try-player .play {
  flex: 0 0 auto;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--accent); color: white; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease;
}
.try-player .play:hover { background: var(--ink); }
.try-player .play svg { display: block; width: 1rem; height: 1rem; }

.try-download {
  display: flex; justify-content: flex-end;
  gap: 1.25rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
}
/* Download links — the primary "Save as .wav" / ".m4a" links read in
   accent. The "New file" button stays muted (it's a secondary action). */
.try-download a {
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--accent);
  text-decoration: none;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0; cursor: pointer;
}
.try-download a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.try-download .try-download-alt {
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0; cursor: pointer;
}
.try-download .try-download-alt:hover { color: var(--accent); border-bottom-color: var(--accent); }
.try-download .try-download-alt:disabled { opacity: 0.5; cursor: progress; }
/* m4a render link, when shown, is also a primary download — treat it accent. */
#tryDownloadM4a { color: var(--accent); border-bottom-color: var(--accent); }
#tryDownloadM4a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* Single reserved slot the three progress bars share. Toggling display
   on individual <progress> elements never moves surrounding layout. */
.try-progress-slot {
  position: relative;
  height: 6px;
  margin: 0.75rem 0 1rem;
}
.try-progress-slot progress {
  position: absolute; top: 0; left: 0; right: 0;
  width: 100%; height: 6px;
  appearance: none;
}
#tryLoadProgress::-webkit-progress-bar,
#tryDecodeProgress::-webkit-progress-bar,
#tryInferProgress::-webkit-progress-bar { background: var(--surface-soft); border-radius: 999px; }
#tryLoadProgress::-webkit-progress-value,
#tryDecodeProgress::-webkit-progress-value,
#tryInferProgress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }

/* ─── Floating Try-with-your-audio button ─── */

.try-fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2.5rem);
  bottom: clamp(1rem, 3vw, 2.5rem);
  z-index: 50;
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: white;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(91, 61, 245, 0.32), 0 2px 6px rgba(10, 10, 15, 0.08);
  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, opacity 160ms ease;
}
.try-fab:hover {
  transform: translateY(-1px);
  background: var(--ink);
  box-shadow: 0 14px 34px rgba(10, 10, 15, 0.28);
}
.try-fab .icon {
  width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex; align-items: center; justify-content: center;
}
.try-fab .icon svg { width: 0.75rem; height: 0.75rem; display: block; }

/* On narrow viewports, drop the label so the FAB stays a tap-target. */
@media (max-width: 480px) {
  .try-fab .label { display: none; }
  .try-fab { padding: 0.85rem; }
}

/* ─── Page-wide drag-and-drop hint ─── */
.drag-hint {
  position: fixed; inset: 0;
  z-index: 200;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.7);
  border: 3px dashed var(--accent);
  opacity: 0;
  transition: opacity 140ms ease;
}
body.drag-over .drag-hint { opacity: 1; }
.drag-hint .label {
  background: var(--accent); color: white;
  padding: 0.85rem 1.5rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 10px 30px rgba(91, 61, 245, 0.32);
}

.try-form-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  margin: -0.25rem 0 0.75rem;
  margin-left: calc(4ch + 1rem);  /* aligns past the AUDIO label */
}

/* Empty-state styling for the player card — placeholder content visible
   before any file has been processed. Mute interactive bits so they read
   as "this will fill in once you pick a file" without looking broken. */
.try-player.is-empty .quote {
  /* Plain readable copy for the placeholder; we override the meta-line
     mono style so the empty-state prompt reads as an instruction. */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: var(--ink-soft);
  letter-spacing: -0.005em;
  text-transform: none;
}
.try-player.is-empty .quote strong { color: var(--accent); font-weight: 700; }
.try-player.is-empty .mix-slider,
.try-player.is-empty .play {
  opacity: 0.5;
}
.try-player.is-empty .try-download {
  visibility: hidden;
}

/* ── Card layout: controls-row has variant toggle + raw/enhanced slider ── */
.try-player .controls-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; min-width: 0;
}
.try-player .controls-row .try-variant-pills { flex: 0 0 auto; }
.try-player .controls-row .mix-row { flex: 1 1 auto; min-width: 0; }

/* Picker — sits in the same slot as transport. Shown when card is empty;
   hidden once a file's been enhanced (transport takes over). */
.try-player .try-player-pick {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  min-height: 2.2rem;
}
.try-pick-hint {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.try-player:not(.is-empty) .try-player-pick { display: none; }

/* Status / meta line — small mono base font for every state (empty
   placeholder, processing, done), so the typography stays consistent
   instead of jumping between big bold and small as the card progresses.
   Overrides the inherited `.clip .quote` display/bold styling. */
.try-player .try-player-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  min-height: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-transform: none;
  line-height: 1.5;
}
.try-player .try-player-meta #tryPlayerMetaText {
  white-space: pre-line;
}
.try-player .try-meta-actions { display: block; }
.try-player .try-meta-link {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.try-player .try-meta-link:hover { color: var(--ink); }
.try-player.is-empty .try-meta-actions { display: none; }

/* Empty state keeps the controls-row (variant toggle + mix slider) visible
   so the card reads as a preview-card shape; transport + download links
   stay out until enhance has produced something to play. */
.try-player.is-empty .transport,
.try-player.is-empty .try-download { display: none; }
.try-player.is-empty .mix-slider { opacity: 0.5; }

/* Filename inside the card eyebrow — single line, ellipsis-truncate
   so long names (voice memo IDs, asset hashes, etc.) don't wrap. */
.try-player .clip-index {
  display: flex; align-items: center;
  min-width: 0;
  overflow: hidden;
}
.try-player .clip-index #tryPlayerFilename {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

/* Card rhythm — transport gets explicit breathing room before the m4a
   row when shown. Meta uses the inherited 1.5rem bottom margin. */
.try-player.clip > .transport { margin-bottom: 1.75rem; }

/* While enhancement is running, both file affordances (the empty-state
   `Select a file` pill and the inline `select another` link in the meta)
   are muted + click-blocked so the visitor can't kick off a second pass. */
.try-player.is-processing .try-file-btn,
.try-player.is-processing #tryPlayerNewInline {
  opacity: 0.45;
  pointer-events: none;
}

/* Smooth scrolling for hash anchors — `huggingface.co/.../#try` glides
   to the try-it section on initial load, and so does the FAB click. */
html { scroll-behavior: smooth; }

/* Mobile overflow guards — no element can push the page wider than the
   viewport, and the mix-row's slider gets `min-width: 0` so the grid
   middle column actually shrinks (otherwise the slider's intrinsic
   min-content width keeps the row wider than the card). */
html, body { overflow-x: hidden; max-width: 100%; }
.mix-row .mix-slider { min-width: 0; }
.clip .controls-row { flex-wrap: wrap; }

/* Tighten left/right padding on mobile so the content uses more of the
   viewport. Overrides theme.css's shared defaults just for this demo. */
@media (max-width: 600px) {
  :root { --pad-page: 0.5rem; }
  .card { padding: clamp(1.75rem, 5vw, 2.25rem) clamp(0.75rem, 3vw, 1.25rem); }
}

/* ─────────── Standalone /web/ page ─────────── */

.web-page { background: var(--surface); }
.web-page .page.web-only {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
.web-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.web-back {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted);
  text-decoration: none;
}
.web-back svg { width: 0.85rem; height: 0.85rem; }
.web-back:hover { color: var(--accent); }
.web-brand .eyebrow {
  /* Drop the dot before the brand on this page — it'd repeat next to the
     back-link's dot otherwise. */
  margin: 0;
}
.web-brand .eyebrow::before { display: none; }

.web-stage {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 6vw, 4rem) 0;
}
.web-stage .try-player {
  width: 100%;
  max-width: 38rem;
}
@media (max-width: 600px) {
  .web-head { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .web-stage { padding: 1.5rem 0; }
}