/* ==========================================================================
   yt-downloader — stylesheet
   Plain CSS, no build step. Everything is driven by the token block below;
   change a token, not a rule.
   ========================================================================== */

:root {
  /* ---- Surfaces and text ------------------------------------------------ */
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c2333;
  --surface-3: #232c3f;
  --border: #2a3342;
  --border-strong: #3a4658;
  --text: #e6edf3;
  --muted: #8b98a5;

  /* ---- Accent -------------------------------------------------------------
     Four roles. A single colour cannot serve all of them, because an accent
     light enough to read as text on --bg is too light to carry text when used
     as a fill:
       --accent        link text, borders, progress fill   reads on --bg
       --accent-solid  filled buttons / active tabs        the fill itself
       --accent-ink    text sitting on --accent-solid      dark, same hue
       --accent-hover  hover fill, still clears --accent-ink

     Filled surfaces always pair with dark ink; white on any of these light
     accents tops out near 2:1.

     The mauve accents below are the default. The three selectable palettes
     live in [data-theme] blocks further down, and every rgba shadow is
     expressed as --accent-rgb so nothing stays blue when a theme changes. */
  --accent: #92A8D1;          /* Serenity — Pantone 15-3919   7.88:1 on --bg */
  --accent-solid: #92A8D1;
  --accent-ink: #0c1931;      /* 7.29:1 on --accent-solid                   */
  --accent-hover: #a8b9da;    /* 8.85:1 with --accent-ink                   */
  --accent-rgb: 146, 168, 209;
  --ok: #3fb950;
  --warn: #d29922;

  /* ---- Semantic state -----------------------------------------------------
     Progress, alert and success surfaces. Kept apart from the accent so a
     palette switch cannot recolour a status, and flipped per mode so light mode
     does not inherit the dark surfaces. */
  --progress-done-border: #1f6b32;
  --progress-done-bg: #12261a;
  --progress-failed-border: #8a3a47;
  --progress-failed-bg: #2b1418;
  --alert-error-bg: #3a1a20;
  --alert-error-border: #8a3a47;
  --alert-error-text: #ffc9d2;
  --alert-ok-bg: #12261a;
  --alert-ok-border: #1f6b32;
  --alert-ok-text: #8ce9a3;
  --success-grad-top: #3fb950;
  --success-grad-bottom: #2ea043;
  --success-ink: #06170b;

  /* Long-form page copy: a touch lighter than --text and --muted, and
     inverted in light mode. */
  --body-text: #c3ccd6;

  /* Hairline drawn on top of a coloured swatch, so it has to read against the
     swatch rather than the page. Inverts with the mode. */
  --swatch-ring: rgba(255, 255, 255, 0.25);

  /* ---- Radii ------------------------------------------------------------ */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- Type scale --------------------------------------------------------
     Eight steps. Pick one; do not invent a size. */
  --fs-xs: 0.75rem;      /* badge, overline            */
  --fs-sm: 0.875rem;     /* meta, captions             */
  --fs-md: 0.9375rem;    /* control labels, body-sm    */
  --fs-base: 1rem;       /* body, inputs               */
  --fs-lg: 1.0625rem;    /* lead paragraph             */
  --fs-xl: 1.375rem;     /* section heading            */
  --fs-2xl: 1.875rem;    /* page heading               */
  --fs-3xl: clamp(1.95rem, 5vw, 2.6rem); /* hero — fluid */

  /* ---- Space scale --------------------------------------------------------
     Multiples of four, so vertical rhythm shares one grid. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* ---- Elevation ----------------------------------------------------------
     Depth tells the eye what sits in front of what. Flat surfaces read as a
     wireframe, which is what this UI used to look like. */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 20px -6px rgba(0, 0, 0, 0.6), 0 2px 6px rgba(0, 0, 0, 0.35);

  /* Focus ring and hero glow, both derived from the accent. */
  --ring: 0 0 0 3px rgba(var(--accent-rgb), 0.4);
  --glow: radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), 0.16), transparent 70%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.18s;
}

/* ==========================================================================
   Selectable accent palettes
   Three finalists, each the brand colour used unchanged. Serenity is the
   default, so :root and [data-theme="serenity"] carry the same values and the
   page is correct even if the script never runs.

   [data-theme] must sit on <html>, and set it before first paint (the inline
   pre-paint snippet in each page's <head>) so there is no flash of the wrong
   colour. Every ratio below is measured against --bg #0d1117.
   ========================================================================== */

html[data-theme="serenity"] {
  --accent: #92A8D1;        /* Pantone 15-3919 · 2016   7.88:1 */
  --accent-solid: #92A8D1;
  --accent-ink: #0c1931;    /* 7.29:1 on the fill              */
  --accent-hover: #a8b9da;  /* 8.85:1 with the ink             */
  --accent-rgb: 146, 168, 209;
}

html[data-theme="turquoise"] {
  --accent: #45B5AA;        /* Pantone 15-5519 · 2010   7.61:1 */
  --accent-solid: #45B5AA;
  --accent-ink: #08201e;    /* 6.83:1 on the fill              */
  --accent-hover: #63c6bd;  /* 8.37:1 with the ink             */
  --accent-rgb: 69, 181, 170;
}

html[data-theme="aqua-sky"] {
  --accent: #7BC4C4;        /* Pantone 14-4811 · 2003   9.49:1 */
  --accent-solid: #7BC4C4;
  --accent-ink: #07211f;    /* 8.45:1 on the fill              */
  --accent-hover: #9ad2d2;  /* 10.05:1 with the ink            */
  --accent-rgb: 123, 196, 196;
}

html[data-theme="blue-turquoise"] {
  --accent: #53B0AE;        /* Pantone 15-5217 · 2005   7.38:1 */
  --accent-solid: #53B0AE;
  --accent-ink: #072120;    /* 6.56:1 on the fill              */
  --accent-hover: #74c2c0;  /* 8.19:1 with the ink             */
  --accent-rgb: 83, 176, 174;
}

html[data-theme="tiffany"] {
  --accent: #81D8D0;        /* Tiffany & Co.           11.41:1 */
  --accent-solid: #81D8D0;
  --accent-ink: #083531;    /* 8.10:1 on the fill              */
  --accent-hover: #98dfd9;  /* 8.88:1 with the ink             */
  --accent-rgb: 129, 216, 208;
}

/* ==========================================================================
   Light mode

   Opt-in: <html data-mode="light">, set before first paint by the inline
   snippet in each page's <head>. There is no prefers-color-scheme block here on
   purpose -- the snippet reads that preference itself and writes the attribute,
   which keeps the light values in one place instead of duplicated into a media
   query that would then have to out-specify these selectors.

   Only --accent has to change per palette. The other three roles are already
   mode-independent: --accent-solid stays the exact brand colour (its fill keeps
   dark ink either way, 7.29:1 on Serenity), and --accent-hover already carries
   ink. --accent (link text) does have to darken, because it is measured against
   --bg, which is what the mode changes -- all three brand colours are only
   1.5-2.3:1 on a light page.
   ========================================================================== */
html[data-mode="light"] {
  --bg: #f6f8fa;
  --surface: #ffffff;
  --surface-2: #eef1f4;
  --surface-3: #e4e8ec;
  --border: #d0d7de;
  --border-strong: #b1b8c0;
  --text: #1f2328;
  --muted: #59636e;

  --ok: #1a7f37;
  --warn: #9a6700;

  --progress-done-border: #1a7f37;
  --progress-done-bg: #c8f0d6;
  --progress-failed-border: #cf222e;
  --progress-failed-bg: #ffe0dd;
  --alert-error-bg: #ffe0dd;
  --alert-error-border: #cf222e;
  --alert-error-text: #82071e;
  --alert-ok-bg: #c8f0d6;
  --alert-ok-border: #1a7f37;
  --alert-ok-text: #0a3622;
  --success-grad-top: #1f7a33;
  --success-grad-bottom: #156f2f;
  --success-ink: #ffffff;

  --body-text: #32383f;
  --swatch-ring: rgba(0, 0, 0, 0.25);

  --shadow-1: 0 1px 2px rgba(31, 35, 40, 0.12);
  --shadow-2: 0 6px 20px -6px rgba(31, 35, 40, 0.18),
              0 2px 6px rgba(31, 35, 40, 0.1);
}

/* Light accents, one per palette. --accent-rgb tracks --accent in each mode so
   the ring, glow and every shadow tint stay in step with the text colour. The
   ring is opaque here rather than the 40% it uses on dark: a translucent tint
   of any of these is under 2:1 on a light page, well below the 3:1 that a focus
   indicator is expected to clear. */
html[data-mode="light"][data-theme="serenity"] {
  --accent: #606F8A;        /* 4.77:1 on --bg */
  --accent-rgb: 96, 111, 138;
  --ring: 0 0 0 3px var(--accent);
}
html[data-mode="light"][data-theme="turquoise"] {
  --accent: #2e7d75;        /* 4.58:1 on --bg */
  --accent-rgb: 46, 125, 117;
  --ring: 0 0 0 3px var(--accent);
}
html[data-mode="light"][data-theme="aqua-sky"] {
  --accent: #377878;        /* 4.79:1 on --bg */
  --accent-rgb: 55, 120, 120;
  --ring: 0 0 0 3px var(--accent);
}
html[data-mode="light"][data-theme="blue-turquoise"] {
  --accent: #337a78;        /* 4.70:1 on --bg */
  --accent-rgb: 51, 122, 120;
  --ring: 0 0 0 3px var(--accent);
}
html[data-mode="light"][data-theme="tiffany"] {
  --accent: #477772;        /* 4.75:1 on --bg */
  --accent-rgb: 71, 119, 114;
  --ring: 0 0 0 3px var(--accent);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  font-size: var(--fs-base);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Focus is visible everywhere, and only for keyboard users. */
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm); }

/* Icons are inline SVG drawn with currentColor, so they inherit text colour. */
.icon {
  width: 1em;
  height: 1em;
  flex: none;
  display: inline-block;
  vertical-align: -0.125em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Screen-reader-only text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 var(--sp-5); }

/* ---------- Header ---------- */
header.site {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--shadow-1);
}

header.site .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  height: 62px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--text);
  letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }

.brand .dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(140deg, var(--accent), var(--accent-solid));
  display: inline-block;
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.6);
}

nav.site { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
nav.site a {
  color: var(--muted);
  font-size: var(--fs-md);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
nav.site a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }

/* ---------- Header dark/light toggle ----------
   Sits at the top right of the header, where a display preference is
   conventionally found. Renders the mode it switches *to*. */
.mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  flex: none;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mode-toggle:hover { background: var(--surface-3); border-color: var(--accent); }
.mode-toggle .mode-icon { display: inline-flex; }
.mode-toggle .mode-icon svg { display: block; }

/* ---------- Footer accent picker ---------- */
.mood {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.mood-legend {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
/* A segmented pill holding one swatch per palette, so the colours themselves
   are the control and no reading is required to choose one. */
.mood-options {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
}
.mood-option {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mood-option:hover { background: var(--surface-3); }
.mood-option .swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1px solid var(--swatch-ring);
}
/* The chosen palette is marked with a ring rather than a tick: a tick's ink
   would have to be chosen per palette, and the ring reads on all three. */
.mood-option[aria-checked="true"] { border-color: var(--accent); }
.mood-current {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: var(--sp-9) var(--sp-4) var(--sp-7);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 5% auto;
  height: 340px;
  background: var(--glow);
  pointer-events: none;
  z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--fs-3xl);
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.03em;
  line-height: 1.1;
  font-weight: 800;
}
.hero h1 .grad {
  background: linear-gradient(100deg, var(--accent), var(--accent-solid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero p {
  color: var(--muted);
  margin: 0 auto;
  font-size: var(--fs-lg);
  max-width: 46ch;
}

/* ---------- Card ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-2);
  animation: rise 0.4s var(--ease) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Toggle ---------- */
.toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--sp-1);
  margin-bottom: var(--sp-6);
  gap: var(--sp-1);
}

.toggle button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  border: 0;
  color: var(--muted);
  padding: var(--sp-2) var(--sp-5);
  min-height: 36px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.toggle button.active {
  background: var(--accent-solid);
  color: var(--accent-ink);
  box-shadow: var(--shadow-1);
}
.toggle button:hover:not(.active) { color: var(--text); }

/* ---------- Input ---------- */
.field { margin-bottom: var(--sp-5); }

label {
  display: block;
  font-size: var(--fs-md);
  color: var(--muted);
  margin-bottom: var(--sp-2);
  font-weight: 600;
}

input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-base);
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

input[type="text"]:hover, input[type="email"]:hover, textarea:hover, select:hover {
  border-color: var(--border-strong);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-solid);
  box-shadow: var(--ring);
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b98a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-3) center;
  padding-right: var(--sp-8);
}

/* ---------- Quality grid ---------- */
.quality-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: var(--sp-2);
}

.quality-grid button {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: var(--sp-3) var(--sp-2);
  min-height: 44px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.quality-grid button:hover { border-color: var(--accent); background: var(--surface-3); }
.quality-grid button:active { transform: translateY(1px); }
.quality-grid button.active {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-solid), 0 4px 14px -4px rgba(var(--accent-rgb), 0.55);
}

/* ---------- Primary button ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  width: 100%;
  background: linear-gradient(180deg, var(--accent-solid), var(--accent-hover));
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  min-height: 48px;
  font-size: var(--fs-lg);
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  margin-top: var(--sp-2);
  box-shadow: 0 6px 18px -6px rgba(var(--accent-rgb), 0.6);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.btn-primary:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 8px 22px -6px rgba(var(--accent-rgb), 0.7); }
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; box-shadow: none; }

/* ---------- Progress ----------
   The bar used to float loose inside the card, which read as an orphaned
   element. It is now a bounded panel with its own header, so the percentage,
   the track and the transfer stats share one visual unit. */
.progress-wrap {
  display: none;
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  animation: rise 0.25s var(--ease) both;
}
.progress-wrap.visible { display: block; }
.progress-wrap.done {
  border-color: var(--progress-done-border);
  background: var(--progress-done-bg);
}
.progress-wrap.failed {
  border-color: var(--progress-failed-border);
  background: var(--progress-failed-bg);
}

.progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.progress-status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.progress-pct {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.bar {
  height: 10px;
  background: var(--bg);
  border-radius: var(--radius-pill);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5);
}

.bar .fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent-solid), var(--accent));
  transition: width 0.3s var(--ease);
  overflow: hidden;
}

/* A slow sheen so an in-flight bar reads as active, not stuck. It is only
   attached while the transfer is running; a finished bar holds still. */
.progress-wrap:not(.done):not(.failed) .bar .fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: translateX(-100%);
  animation: sheen 1.6s linear infinite;
}

@keyframes sheen {
  to { transform: translateX(100%); }
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--sp-2);
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}
.progress-meta:empty, .progress-meta span:empty { display: none; }

.progress-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--text);
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.progress-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-title:empty { display: none; }

/* ---------- Alerts ---------- */
.alert {
  display: none;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  margin-top: var(--sp-5);
  animation: rise 0.25s var(--ease) both;
}

.alert.visible { display: flex; }
.alert .icon { margin-top: 2px; }

.alert.error {
  background: var(--alert-error-bg);
  border: 1px solid var(--alert-error-border);
  color: var(--alert-error-text);
}
.alert.ok {
  background: var(--alert-ok-bg);
  border: 1px solid var(--alert-ok-border);
  color: var(--alert-ok-text);
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  background: linear-gradient(180deg, var(--success-grad-top), var(--success-grad-bottom));
  color: var(--success-ink);
  padding: var(--sp-3) var(--sp-6);
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(63, 185, 80, 0.8);
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.download-link:hover { text-decoration: none; filter: brightness(1.06); }
.download-link:active { transform: translateY(1px); }

/* ---------- Empty state ---------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface-2);
}
.empty-state .icon { width: 28px; height: 28px; color: var(--accent); opacity: 0.85; }
.empty-state p { margin: 0; font-size: var(--fs-md); }

/* ---------- Content pages ---------- */
.page { padding: var(--sp-8) 0 var(--sp-9); }
.page h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-2); letter-spacing: -0.02em; }
.page h2 { font-size: var(--fs-xl); margin: var(--sp-7) 0 var(--sp-3); }
.page h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-2); }
.page p, .page li { color: var(--body-text); }
.page .updated { color: var(--muted); font-size: var(--fs-sm); margin-bottom: var(--sp-6); }

.note {
  background: var(--surface-2);
  border-left: 3px solid var(--warn);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: var(--sp-6) 0;
  font-size: var(--fs-md);
  color: var(--muted);
}

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--border);
  padding: var(--sp-7) 0;
  margin-top: var(--sp-9);
  font-size: var(--fs-sm);
  color: var(--muted);
}

footer.site .links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}

footer.site .links a { color: var(--muted); }
footer.site .links a:hover { color: var(--text); text-decoration: none; }

/* ---------- Multi-platform additions ---------- */

.badge {
  display: none;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px var(--sp-2);
  border-radius: var(--radius-pill);
  border: 1px solid var(--accent);
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.08);
  vertical-align: middle;
  margin-left: var(--sp-2);
  text-transform: none;
}

.badge.visible { display: inline-flex; }

.platform-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-5);
}
.platform-strip:empty { display: none; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--radius-pill);
  padding: var(--sp-2) var(--sp-3);
  min-height: 34px;
  font-size: var(--fs-sm);
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease),
    background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip .icon { opacity: 0.9; }
.chip:hover { border-color: var(--accent); color: var(--text); background: var(--surface-2); transform: translateY(-1px); }
.chip:active { transform: none; }

.notice {
  display: none;
  align-items: flex-start;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}
.notice.visible { display: flex; }
.notice.warn { border-left-color: var(--warn); }

.extras {
  display: none;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.extras.visible { display: flex; }

.extras label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  margin: 0;
  min-height: 32px;
}
.extras input[type="checkbox"] { accent-color: var(--accent-solid); width: 16px; height: 16px; }

.select-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.select-field { display: flex; flex-direction: column; gap: var(--sp-2); flex: 1 1 160px; }
.select-field label {
  font-size: var(--fs-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.hint { color: var(--muted); font-size: var(--fs-md); margin: 0; }

/* ---------- Motion preference ---------------------------------------------
   Everything above degrades to instant when the user asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .bar .fill::after { display: none; }
}

/* ---------- Responsive ---------- */

/* Tablet: let the container fill the width it is given. */
@media (max-width: 1024px) {
  .container { max-width: 100%; }
}

@media (max-width: 640px) {
  .hero { padding: var(--sp-8) var(--sp-3) var(--sp-6); }
  header.site .inner { height: auto; padding: var(--sp-3) var(--sp-4); flex-direction: column; align-items: flex-start; }
  nav.site { gap: var(--sp-1); }
  nav.site a { padding: var(--sp-1) var(--sp-2); }
  .card { padding: var(--sp-4); border-radius: var(--radius); }

  /* Two columns, so eight quality options do not shrink to unreadable. */
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
  .toggle { width: 100%; }
  .toggle button { flex: 1 1 0; justify-content: center; }
  .btn-primary { font-size: var(--fs-base); }
}