/*
 * Lyric Sync — light, techno-futurist laboratory.
 * Implements DESIGN.md (Telepathic Instruments). The whole sheet is built
 * around tokens declared in :root so future tweaks are a single line.
 *
 * Aesthetic in one sentence: high-contrast monochrome on Canvas, a single
 * Amber Glow CTA, Suisse Intl + Suisse Intl Mono via the Inter / JetBrains
 * Mono substitutes loaded from Google Fonts.
 */

:root {
  /* ---- Colors -------------------------------------------------------- */
  --color-canvas: #e5e7eb;
  --color-charcoal: #000000;
  --color-snow: #ffffff;
  --color-steel: #a3a3a3;
  --color-ash: #191919;
  --color-mercury: #c2c2c2;
  --color-powder: #dddee2;
  --color-muted-sage: #d7cdb8;
  --color-amber-glow: #ff6c2f;

  /* ---- Typography ---------------------------------------------------- */
  --font-suisse-intl:
    'Inter', 'Suisse Intl', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-suisse-intl-mono:
    'JetBrains Mono', 'Suisse Intl Mono', ui-monospace, SFMono-Regular,
    Menlo, Monaco, Consolas, monospace;

  --text-caption: 12px;
  --text-body: 16px;
  --text-subheading: 18px;
  --text-heading-sm: 20px;
  --text-heading: 24px;
  --text-display: 100px; /* desktop; scaled down on narrower viewports below */

  /* ---- Spacing ------------------------------------------------------- */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --section-gap: 40px;
  --card-padding: 12px;
  --element-gap: 8px;

  /* ---- Radii --------------------------------------------------------- */
  --radius-cards: 0px;
  --radius-default: 2px;
  --radius-buttons: 24px;
  --radius-large: 32px;
  --radius-circular: 9999px;

  /* ---- Surfaces ------------------------------------------------------ */
  --surface-canvas: var(--color-canvas);
  --surface-card: var(--color-snow);
  --surface-dark: var(--color-charcoal);

  --nav-height: 56px;
}

/* ---- Reset / base ---------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-charcoal);
  font-family: var(--font-suisse-intl);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ---- Sticky nav ------------------------------------------------------ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--surface-dark);
  color: var(--color-snow);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Respect notch — left/right safe areas come into play on iOS landscape. */
  padding: 0 max(var(--spacing-24), env(safe-area-inset-left))
           0 max(var(--spacing-24), env(safe-area-inset-right));
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--color-snow);
}
.brand-zh {
  font-family: var(--font-suisse-intl);
  font-size: var(--text-body);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.brand-sep { color: var(--color-steel); }
.brand-en {
  font-family: var(--font-suisse-intl-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--color-steel);
}
.nav-status {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  letter-spacing: 0.12em;
  position: relative;
  padding-left: 14px;
}
.nav-status::before {
  /* A precise indicator dot — Amber Glow is allowed here because it signals
   * a live, operational state, the way a record-light does on a console. */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circular);
  background: var(--color-amber-glow);
  box-shadow: 0 0 0 0 rgba(255, 108, 47, 0.6);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 108, 47, 0.45); }
  70%  { box-shadow: 0 0 0 8px rgba(255, 108, 47, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 108, 47, 0); }
}

/* ---- Hero ------------------------------------------------------------ *
 * The hero stacks three layers, bottom to top:
 *   1. The Canvas background colour (var(--surface-canvas))
 *   2. The WebGL "Fluid Amber" shader (canvas#hero-shader), softened by
 *      `opacity` so it never fights the headline contrast.
 *   3. The text content (.hero-inner), positioned above on its own layer.
 * `isolation: isolate` keeps any blend-modes scoped to the section.
 */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--surface-canvas);
  padding-top: var(--spacing-56);
  padding-bottom: var(--spacing-56);
}
#hero-shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Normal blend (no multiply) — multiply against light Canvas was darkening
   * the warm tones into a gray haze. Opacity carries the subtlety on its own. */
  opacity: 1;
  pointer-events: none;
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 max(var(--spacing-24), env(safe-area-inset-left))
           0 max(var(--spacing-24), env(safe-area-inset-right));
}
/* Soft fade where the hero meets the Snow work surface — prevents a hard
 * tonal cliff between the warm amber field and the white card area. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(
    to bottom,
    rgba(229, 231, 235, 0) 0%,
    var(--surface-canvas) 100%
  );
  pointer-events: none;
  z-index: 0;
}
.eyebrow {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Charcoal here (not Steel) so the eyebrow holds up against the vivid
   * amber shader. The smaller font size keeps it visually subordinate to
   * the display headline. */
  color: var(--color-charcoal);
  margin: 0 0 var(--spacing-24);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-charcoal);
  display: inline-block;
}
.display {
  font-family: var(--font-suisse-intl);
  font-weight: 500;
  font-size: 56px;          /* mobile baseline; scaled up below */
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--color-charcoal);
  position: relative;
  /* Multi-layer Canvas halo so the Charcoal headline reads sharp against any
   * pixel of the amber shader. Three nested radii build a Snow card just
   * around each glyph — wider than a simple shadow, never visible as a box. */
  text-shadow:
    0 0 38px rgba(255, 255, 255, 0.95),
    0 0 22px rgba(255, 255, 255, 0.85),
    0 0 10px rgba(255, 255, 255, 0.7),
    0 0 3px rgba(255, 255, 255, 0.55);
}
.eyebrow,
.hero-caption {
  /* Same halo for the eyebrow + caption so the whole vertical text column
   * holds together visually against the shader. */
  text-shadow:
    0 0 16px rgba(255, 255, 255, 0.9),
    0 0 6px rgba(255, 255, 255, 0.6);
}
.hero-inner {
  /* Gentle radial wash anchored on the text column. Centered behind the
   * headline, it dims the shader where reading happens and lets the lively
   * amber stay at the edges. Pure CSS — no extra DOM. */
  /* Painted with a ::before pseudo so it sits beneath the text but above
   * the shader, scoped to the section. */
}
.hero-inner::before {
  content: "";
  position: absolute;
  inset: -10% -20%;
  background: radial-gradient(
    ellipse 60% 70% at 30% 50%,
    rgba(229, 231, 235, 0.78) 0%,
    rgba(229, 231, 235, 0.55) 30%,
    rgba(229, 231, 235, 0.15) 60%,
    rgba(229, 231, 235, 0) 85%
  );
  pointer-events: none;
  z-index: -1;
}
.hero-inner > * { position: relative; }
.hero-caption {
  margin: var(--spacing-24) 0 0;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-charcoal);
  letter-spacing: 0.12em;
}

@media (min-width: 720px) {
  .display { font-size: 80px; }
  .hero { padding-top: var(--spacing-80); padding-bottom: var(--spacing-80); }
}
@media (min-width: 1080px) {
  .display { font-size: var(--text-display); line-height: 0.85; }
}

/* ---- Work area (Snow surface) --------------------------------------- */
.work {
  background: var(--surface-card);
  /* Hairline divider where Canvas meets Snow — defines the surface change
   * without a heavy border. */
  border-top: 1px solid var(--color-mercury);
  padding-top: var(--spacing-56);
  padding-bottom: var(--spacing-96);
}
.work-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 max(var(--spacing-24), env(safe-area-inset-left))
           0 max(var(--spacing-24), env(safe-area-inset-right));
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ---- Panel (flat card) ---------------------------------------------- */
.panel {
  background: transparent;
  border-radius: var(--radius-cards); /* 0 — flat as specified */
  padding: 0;
  /* The card itself is transparent; structure comes from the panel-head
   * hairline + the form fields inside. */
}
.panel-head {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: var(--spacing-16);
  align-items: baseline;
  padding-bottom: var(--spacing-16);
  margin-bottom: var(--spacing-24);
  border-bottom: 1px solid var(--color-mercury);
}
.panel-index {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  letter-spacing: 0.12em;
}
.panel-title {
  margin: 0;
  font-family: var(--font-suisse-intl);
  font-weight: 400;
  font-size: var(--text-heading);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.panel-hint {
  grid-column: 2 / -1;
  margin: 4px 0 0;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.panel-meta {
  grid-column: 2 / -1;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 10px 0 0;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  line-height: 1.5;
  letter-spacing: 0.04em;
}
.panel-meta-key {
  letter-spacing: 0.18em;
  color: var(--color-charcoal);
  flex: none;
}
.panel-meta-val { color: var(--color-steel); }

/* ---- Fields ---------------------------------------------------------- */
.field {
  display: block;
  margin-bottom: var(--spacing-24);
}
.field-label {
  display: block;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--spacing-8);
}
.field-help {
  display: block;
  margin-top: 6px;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* Inputs: transparent + Steel underline only.
 * Textarea/select get a full hairline border so they read as enclosed regions. */
input[type="text"],
input[type="password"],
input[type="url"],
select,
textarea {
  width: 100%;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body); /* 16px keeps iOS Safari from auto-zooming */
  font-weight: 400;
  color: var(--color-charcoal);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--color-steel);
  border-radius: var(--radius-cards);
  padding: 12px 0;
  outline: none;
  transition: border-color 0.15s ease;
}
input::placeholder,
textarea::placeholder { color: var(--color-steel); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--color-charcoal);
}

textarea {
  border: 1px solid var(--color-steel);
  padding: 12px;
  min-height: 156px;
  resize: vertical;
  line-height: 1.55;
}

select {
  /* Reset OS chrome and draw our own caret so light theme + mono font stay
   * consistent across browsers. */
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid var(--color-steel);
  padding: 12px 36px 12px 12px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-charcoal) 50%),
    linear-gradient(135deg, var(--color-charcoal) 50%, transparent 50%);
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* File input — flat, mono, with a styled trigger button. */
input[type="file"] {
  width: 100%;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  background: transparent;
  border: 1px solid var(--color-steel);
  border-radius: var(--radius-cards);
  padding: 10px;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-cards);
  background: var(--color-charcoal);
  color: var(--color-snow);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--color-amber-glow);
  border-color: var(--color-amber-glow);
}
input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-cards);
  background: var(--color-charcoal);
  color: var(--color-snow);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
  background: var(--color-amber-glow);
  border-color: var(--color-amber-glow);
}

/* Autofill — kill the browser's yellow that breaks the light palette. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--color-snow) inset;
  -webkit-text-fill-color: var(--color-charcoal);
  caret-color: var(--color-charcoal);
}

/* ---- Row (grid of small inputs) ------------------------------------- */
.row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-24);
  margin-bottom: var(--spacing-24);
}
.row .field { margin-bottom: 0; }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr 1fr; gap: var(--spacing-16); }
}
@media (max-width: 460px) {
  .row { grid-template-columns: 1fr; gap: var(--spacing-16); }
}

/* ---- Segmented control ---------------------------------------------- */
.seg-control {
  display: inline-flex;
  width: 100%;
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-buttons);
  padding: 4px;
  gap: 4px;
}
.seg-btn {
  flex: 1 1 0;
  background: transparent;
  border: 0;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-charcoal);
  padding: 10px 12px;
  min-height: 40px;
  border-radius: calc(var(--radius-buttons) - 4px);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.seg-btn:hover {
  /* DESIGN.md restricts Amber Glow to primary CTAs. For an inactive segment
   * hover, just darken the track underneath — Charcoal stays the text colour. */
  background: rgba(0, 0, 0, 0.04);
}
.seg-btn.is-active {
  background: var(--color-charcoal);
  color: var(--color-snow);
}
.seg-btn.is-active:hover {
  background: var(--color-ash);
  color: var(--color-snow);
}
.seg-btn:focus-visible {
  outline: 2px solid var(--color-amber-glow);
  outline-offset: 2px;
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-suisse-intl);
  font-weight: 400;
  font-size: var(--text-body);
  padding: 14px 20px;
  min-height: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius-buttons);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease,
              transform 0.18s ease;
  letter-spacing: -0.01em;
}
.btn:disabled { opacity: 0.55; cursor: progress; }

/* Primary CTA — the one Amber Glow moment per page. */
.btn-amber {
  background: var(--color-amber-glow);
  color: var(--color-snow);
  width: 100%;
  font-size: var(--text-subheading);
}
.btn-amber:not(:disabled):hover { background: #ff5a14; }
.btn-amber:not(:disabled):active { transform: translateY(1px); }
.btn-arrow {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body);
  transition: transform 0.18s ease;
}
.btn-amber:not(:disabled):hover .btn-arrow { transform: translateX(3px); }

/* Solid dark button — for "Copy to yoursong". */
.btn-dark {
  background: var(--color-charcoal);
  color: var(--color-snow);
}
.btn-dark:hover { background: var(--color-ash); }

/* Ghost — sharp corners, mono caps, Steel border. */
.btn-ghost {
  background: transparent;
  color: var(--color-charcoal);
  border-color: var(--color-steel);
  border-radius: var(--radius-cards);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 16px;
  min-height: 44px;
}
.btn-ghost:hover {
  border-color: var(--color-charcoal);
  color: var(--color-charcoal);
}
.btn:focus-visible {
  outline: 2px solid var(--color-amber-glow);
  outline-offset: 2px;
}

/* Submit-button spinner — only visible while .loading. */
.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--color-snow);
  border-radius: var(--radius-circular);
  animation: spin 0.7s linear infinite;
}
#submit-btn.loading .btn-spinner { display: inline-block; }
#submit-btn.loading .btn-arrow { display: none; }

/* ---- Progress -------------------------------------------------------- */
.stage-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--spacing-16);
}
.stage-label {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-body);
  color: var(--color-charcoal);
  letter-spacing: 0.02em;
}
.spinner {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-mercury);
  border-top-color: var(--color-charcoal);
  border-radius: var(--radius-circular);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.bar {
  position: relative;
  height: 4px;
  background: var(--color-powder);
  overflow: hidden;
}
#bar-fill {
  height: 100%;
  width: 0%;
  background: var(--color-charcoal);
  transition: width 0.4s ease;
}
.bar.indeterminate #bar-fill {
  width: 100% !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--color-charcoal) 50%,
    transparent 100%
  );
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: sweep 1.1s ease-in-out infinite;
}
@keyframes sweep {
  0%   { background-position: -40% 0; }
  100% { background-position: 140% 0; }
}

/* ---- Player --------------------------------------------------------- */
#audio-el {
  width: 100%;
  margin-bottom: var(--spacing-16);
}
.player-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-24);
}
.player-actions .btn { flex: 1 1 auto; }
.player-actions .btn-dark { flex: 2 1 auto; }

.lyrics-view {
  max-height: min(56vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 0;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  border-top: 1px solid var(--color-mercury);
  border-bottom: 1px solid var(--color-mercury);
}
.lyric-row {
  position: relative;
  padding: 12px 16px 12px 56px;
  font-family: var(--font-suisse-intl);
  font-size: var(--text-body);
  color: var(--color-steel);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}
.lyric-row::before {
  /* Line-number gutter in mono — turns the lyric list into a code listing
   * and reinforces the "laboratory" register. */
  counter-increment: lyric;
  content: counter(lyric, decimal-leading-zero);
  position: absolute;
  left: 16px;
  top: 12px;
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-mercury);
  letter-spacing: 0.04em;
}
.lyrics-view { counter-reset: lyric; }
.lyric-row:hover { color: var(--color-charcoal); }
.lyric-row:focus-visible {
  outline: 2px solid var(--color-amber-glow);
  outline-offset: -2px;
  color: var(--color-charcoal);
}
.lyric-row.active {
  color: var(--color-snow);
  background: var(--color-charcoal);
  font-weight: 500;
}
.lyric-row.active::before { color: var(--color-amber-glow); }

/* ---- Error ---------------------------------------------------------- */
.error {
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--color-charcoal);
  border-left: 4px solid var(--color-amber-glow);
  background: var(--color-snow);
  color: var(--color-charcoal);
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* ---- Footer --------------------------------------------------------- */
.foot {
  background: var(--surface-canvas);
  border-top: 1px solid var(--color-mercury);
  padding: var(--spacing-24)
           max(var(--spacing-24), env(safe-area-inset-right))
           calc(var(--spacing-24) + env(safe-area-inset-bottom))
           max(var(--spacing-24), env(safe-area-inset-left));
}
.foot-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}
.foot-cell {
  font-family: var(--font-suisse-intl-mono);
  font-size: var(--text-caption);
  color: var(--color-steel);
  letter-spacing: 0.08em;
}

/* ---- Utilities ------------------------------------------------------ */
.hidden { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .spinner,
  .btn-spinner,
  .nav-status::before,
  .bar.indeterminate #bar-fill { animation: none; }
  .lyrics-view,
  .lyric-row,
  #bar-fill,
  .btn,
  .seg-btn,
  .btn-arrow { transition: none; scroll-behavior: auto; }
}