/* ==========================================================================
   Convertars — free image → SVG converter
   --------------------------------------------------------------------------
   1.  Design tokens (light + dark)
   2.  Reset, base typography, focus, utilities
   3.  Buttons & form primitives
   4.  Site header / hero
   5.  Tool card, dropzone, presets
   6.  Controls (fields, ranges, selects, switches, advanced)
   7.  Results, preview boxes, loader, compare slider, toolbar, stats, actions
   8.  Toasts
   9.  Content sections (how, features, donate, faq), footer, prose
   10. Responsive & motion preferences
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --brand: #6d4aff;
  --brand-2: #ff5c8a;
  --brand-deep: #4c2ce0;
  --brand-ink: #ffffff;
  --gradient-brand: linear-gradient(135deg, #6d4aff 0%, #ff5c8a 100%);
  --gradient-brand-soft: linear-gradient(135deg, rgba(109, 74, 255, 0.12), rgba(255, 92, 138, 0.14));
  --support: #ffdd00;
  --support-ink: #1b1b1b;

  /* Surfaces & ink */
  --bg: #fafaff;
  --bg-glow-a: rgba(109, 74, 255, 0.18);
  --bg-glow-b: rgba(255, 92, 138, 0.12);
  --surface: #ffffff;
  --surface-2: #f6f5fd;
  --surface-3: #efedfb;
  --surface-inset: #f2f0fd;
  --text: #14141f;
  --text-muted: #5d5d78;
  --text-subtle: #8c8ba6;
  --border: #e7e5f4;
  --border-strong: #d6d2ef;
  --brand-soft: rgba(109, 74, 255, 0.09);
  --brand-soft-strong: rgba(109, 74, 255, 0.16);
  --ring: rgba(109, 74, 255, 0.5);
  --danger: #d92d4b;
  --danger-soft: rgba(217, 45, 75, 0.1);
  --success: #10855c;
  --success-soft: rgba(16, 133, 92, 0.12);
  --checker-a: #ffffff;
  --checker-b: #e9e8f4;
  --track: #e6e3f5;
  --overlay-ink: rgba(20, 20, 31, 0.55);

  /* Radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 44px;
  --sp-8: 64px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(24, 18, 60, 0.06);
  --shadow-sm: 0 2px 6px rgba(24, 18, 60, 0.06), 0 1px 2px rgba(24, 18, 60, 0.04);
  --shadow-md: 0 10px 24px -12px rgba(24, 18, 60, 0.18), 0 2px 6px rgba(24, 18, 60, 0.05);
  --shadow-lg: 0 30px 60px -30px rgba(37, 24, 92, 0.28), 0 8px 20px -12px rgba(24, 18, 60, 0.12);
  --shadow-brand: 0 12px 26px -12px rgba(109, 74, 255, 0.55);
  --shadow-brand-hover: 0 18px 34px -14px rgba(109, 74, 255, 0.62);

  /* Layout & motion */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1120px;
  --header-h: 64px;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --t-fast: 140ms var(--ease);
  --t-base: 200ms var(--ease);
  --t-slow: 320ms var(--ease);
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --brand: #8f74ff;
    --brand-2: #ff7aa0;
    --brand-deep: #7a5cff;
    --gradient-brand: linear-gradient(135deg, #8f74ff 0%, #ff6b95 100%);
    --gradient-brand-soft: linear-gradient(135deg, rgba(143, 116, 255, 0.2), rgba(255, 107, 149, 0.2));

    --bg: #0f0f17;
    --bg-glow-a: rgba(109, 74, 255, 0.3);
    --bg-glow-b: rgba(255, 92, 138, 0.16);
    --surface: #171724;
    --surface-2: #1c1c2c;
    --surface-3: #232338;
    --surface-inset: #13131f;
    --text: #ececf4;
    --text-muted: #a6a6bd;
    --text-subtle: #80809a;
    --border: #2a2a3e;
    --border-strong: #3a3a55;
    --brand-soft: rgba(143, 116, 255, 0.14);
    --brand-soft-strong: rgba(143, 116, 255, 0.24);
    --ring: rgba(143, 116, 255, 0.65);
    --danger: #ff7b8f;
    --danger-soft: rgba(255, 92, 120, 0.16);
    --success: #5fe0a8;
    --success-soft: rgba(95, 224, 168, 0.16);
    --checker-a: #1b1b28;
    --checker-b: #232333;
    --track: #2c2c42;
    --overlay-ink: rgba(6, 6, 12, 0.6);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 34px 70px -34px rgba(0, 0, 0, 0.85), 0 10px 24px -16px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 14px 30px -14px rgba(122, 92, 255, 0.7);
    --shadow-brand-hover: 0 20px 38px -16px rgba(122, 92, 255, 0.8);
  }
}

/* ==========================================================================
   2. Reset, base typography, focus, utilities
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  background-image:
    radial-gradient(900px 420px at 50% -120px, var(--bg-glow-a), transparent 70%),
    radial-gradient(700px 360px at 88% 4%, var(--bg-glow-b), transparent 72%);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.028em;
  line-height: 1.08;
}

h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.95rem);
}

h3 {
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}

h4 {
  font-size: 1rem;
}

p {
  margin: 0 0 1em;
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 1em;
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.35em;
}

li:last-child {
  margin-bottom: 0;
}

strong,
b {
  font-weight: 650;
}

small {
  font-size: 0.875em;
}

a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast), opacity var(--t-fast);
}

a:hover {
  color: var(--brand-deep);
  text-decoration: underline;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

img {
  border-style: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button,
input,
select {
  margin: 0;
}

hr {
  height: 1px;
  margin: var(--sp-5) 0;
  border: 0;
  background: var(--border);
}

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.9em;
}

code {
  padding: 0.12em 0.36em;
  border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}

pre {
  overflow-x: auto;
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--surface-inset);
  border: 1px solid var(--border);
  line-height: 1.55;
}

pre code {
  padding: 0;
  border: 0;
  background: none;
}

blockquote {
  margin: 0 0 1em;
  padding-left: var(--sp-4);
  border-left: 3px solid var(--brand);
  color: var(--text-muted);
}

::selection {
  background: var(--brand-soft-strong);
  color: var(--text);
}

/* Focus: one visible, brand-coloured ring everywhere. */
:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Mouse users should not see the ring on buttons/links they just clicked. */
:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden,
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

/* Gradient text helper (used for the hero accent on text pages). */
.text-gradient,
.gradient-text {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.muted {
  color: var(--text-muted);
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -60px;
  z-index: 200;
  transform: translateX(-50%);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  font-weight: 600;
  transition: top var(--t-base);
}

.skip-link:focus {
  top: var(--sp-3);
  text-decoration: none;
}

/* ==========================================================================
   3. Buttons & form primitives
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--t-fast),
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast),
    filter var(--t-fast);
}

.btn:hover {
  background: var(--surface-2);
  border-color: var(--border-strong);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0) scale(0.99);
  box-shadow: var(--shadow-xs);
}

.btn[aria-pressed="true"] {
  background: var(--brand-soft);
  border-color: transparent;
  box-shadow: inset 0 0 0 1px var(--brand-soft-strong);
  color: var(--brand);
}

.btn[aria-pressed="true"]:hover {
  background: var(--brand-soft-strong);
  color: var(--brand);
}

.btn-primary {
  border-color: transparent;
  background: var(--gradient-brand);
  color: var(--brand-ink);
  font-weight: 700;
  padding-inline: var(--sp-5);
  box-shadow: var(--shadow-brand);
}

.btn-primary:hover {
  background: var(--gradient-brand);
  color: var(--brand-ink);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand-hover);
  filter: saturate(1.06) brightness(1.03);
}

.btn-primary:active {
  filter: saturate(1) brightness(0.98);
}

.btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
}

.btn-ghost:hover {
  background: var(--surface-2);
  border-color: transparent;
  color: var(--text);
  box-shadow: none;
}

/* Yellow "support the project" pill — used standalone in the header and with
   .btn inside the donation cards. */
.btn-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 40px;
  padding: 0 var(--sp-4);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--r-pill);
  background: var(--support);
  color: var(--support-ink);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06), 0 8px 18px -10px rgba(186, 150, 0, 0.7);
  transition: transform var(--t-fast), box-shadow var(--t-fast), filter var(--t-fast);
}

.btn-support:hover,
.btn.btn-support:hover {
  background: #ffd000;
  border-color: rgba(0, 0, 0, 0.12);
  color: var(--support-ink);
  text-decoration: none;
  transform: translateY(-1px);
  filter: none;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.06), 0 14px 24px -12px rgba(186, 150, 0, 0.8);
}

.btn-support:active {
  transform: translateY(0);
}

.btn-support:focus-visible {
  outline-color: var(--support-ink);
}

/* X (Twitter) links -------------------------------------------------------- */

/* The inline logo: sized like a glyph and coloured by the link that holds it. */
.x-icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Icon + text on one line, centred, with the label still readable as text. */
.x-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Secondary "follow us" button: brand-tinted, so it never competes with the
   yellow Ko-fi pill next to it. */
.btn-follow {
  border-color: transparent;
  background: var(--brand-soft);
  color: var(--brand);
  font-weight: 700;
}

.btn-follow:hover {
  border-color: transparent;
  background: var(--brand-soft-strong);
  color: var(--brand);
}

.btn:disabled,
.btn[disabled],
.btn[aria-disabled="true"],
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  filter: none;
}

/* Form primitives ---------------------------------------------------------- */

select {
  min-height: 44px;
  max-width: 100%;
  padding: 0 38px 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238c8ba6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background-color var(--t-fast);
}

select:hover {
  border-color: var(--brand);
}

select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

select option {
  background: var(--surface);
  color: var(--text);
}

select#png-scale {
  min-width: 76px;
  min-height: 44px;
  font-weight: 600;
}

input[type="file"] {
  max-width: 100%;
}

@media (prefers-color-scheme: dark) {
  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a6a6bd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
}

/* ==========================================================================
   4. Site header & hero
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 250, 255, 0.82);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}

@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(15, 15, 23, 0.78);
  }
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(109, 74, 255, 0.28));
  transition: transform var(--t-base);
}

.brand:hover img {
  transform: rotate(-4deg) scale(1.05);
}

.brand span {
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
}

.site-nav a {
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
  padding-block: var(--sp-1);
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.site-nav a:hover {
  color: var(--text);
  text-decoration: none;
  border-bottom-color: var(--brand-soft-strong);
}

/* Donate / About / Privacy only appear in the mobile dropdown panel. */
.site-nav-extra {
  display: none;
}

/* The icon and its label sit on one line in the dropdown panel. */
.site-nav-x {
  gap: 8px;
}

/* Compact X icon link beside the support pill: 40px, 36px on phones. */
.x-header-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition: color var(--t-fast), background var(--t-fast), border-color var(--t-fast);
}

.x-header-link:hover {
  border-color: var(--brand-soft-strong);
  background: var(--surface-2);
  color: var(--brand);
  text-decoration: none;
}

/* Hamburger — hidden on desktop, where the nav links are inline. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
  transition: background var(--t-fast), border-color var(--t-fast);
}

.nav-toggle:hover {
  border-color: var(--brand-soft-strong);
  background: var(--surface-2);
}

/* Three CSS-drawn bars; the outer two fold into an X while the menu is open. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-fast), background-color var(--t-fast);
}

.nav-toggle-bars {
  position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.hero {
  padding-block: clamp(28px, 5.5vw, 58px) clamp(16px, 3vw, 26px);
  text-align: center;
}

.hero h1 {
  max-width: 20ch;
  margin: 0 auto var(--sp-3);
}

.hero .subtitle {
  max-width: 560px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

/* ==========================================================================
   5. Tool card, dropzone, presets
   ========================================================================== */

.tool {
  padding-bottom: clamp(16px, 3vw, 28px);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.tool > .container {
  padding: clamp(16px, 2.6vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

/* Dropzone ---------------------------------------------------------------- */

.dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  min-height: 220px;
  padding: var(--sp-5);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition:
    border-color var(--t-base),
    background-color var(--t-base),
    box-shadow var(--t-base),
    transform var(--t-base);
}

.dropzone::before {
  content: "↑";
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  background: var(--gradient-brand);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--shadow-brand);
  transition: transform var(--t-base);
}

.dropzone strong {
  max-width: 34ch;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.4;
}

.dropzone small {
  color: var(--text-muted);
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
}

.dropzone:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  transform: translateY(-1px);
}

.dropzone:hover::before {
  transform: translateY(-2px) scale(1.04);
}

.dropzone:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 3px;
}

.dropzone.is-dragover,
.dropzone.is-dragging {
  border-style: solid;
  border-color: var(--brand);
  background: var(--gradient-brand-soft);
  transform: scale(1.008);
  box-shadow: 0 0 0 4px var(--brand-soft), var(--shadow-md);
}

.dropzone.is-dragover::before,
.dropzone.is-dragging::before {
  transform: scale(1.08);
}

/* Once a file is loaded the dropzone shrinks to a single line. */
.dropzone.is-compact {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  min-height: 72px;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}

.dropzone.is-compact::before {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  font-size: 1rem;
  flex: 0 0 auto;
}

.dropzone.is-compact strong {
  max-width: none;
  font-size: 0.9375rem;
  line-height: 1.3;
}

.dropzone.is-compact small {
  display: none;
}

/* Workspace --------------------------------------------------------------- */

.workspace {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(16px, 2.4vw, 24px);
  animation: rise-in var(--t-slow) both;
}

/* Presets ----------------------------------------------------------------- */

.presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand);
  transform: translateY(-1px);
}

.chip:active {
  transform: translateY(0) scale(0.985);
}

.chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--gradient-brand);
  color: #fff;
  box-shadow: var(--shadow-brand);
}

.chip[aria-pressed="true"]:hover {
  color: #fff;
  filter: saturate(1.05) brightness(1.04);
}

/* ==========================================================================
   6. Controls — fields, ranges, selects, switches, advanced panel
   ========================================================================== */

.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4) var(--sp-5);
  align-items: start;
}

.field {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.field > label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}

/* Fields that show their value in an <output>: label left, badge right. */
.field:has(> output) {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-2);
}

.field:has(> output) > label {
  grid-column: 1;
  grid-row: 1;
}

.field:has(> output) > output {
  grid-column: 2;
  grid-row: 1;
}

.field:has(> output) > input {
  grid-column: 1 / -1;
}

.field output {
  justify-self: end;
  min-width: 34px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  text-align: center;
}

.field select {
  width: 100%;
}

/* Range inputs ------------------------------------------------------------ */

input[type="range"] {
  --range-track-h: 6px;
  --range-thumb: 20px;
  width: 100%;
  height: 24px;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: var(--range-track-h);
  border-radius: var(--r-pill);
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(24, 18, 60, 0.12);
}

input[type="range"]::-webkit-slider-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  margin-top: calc((var(--range-track-h) - var(--range-thumb)) / 2);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 1px 3px rgba(24, 18, 60, 0.3), 0 0 0 1px rgba(109, 74, 255, 0.28);
  cursor: grab;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
  appearance: none;
  -webkit-appearance: none;
}

input[type="range"]:hover::-webkit-slider-thumb {
  transform: scale(1.08);
}

input[type="range"]:active::-webkit-slider-thumb {
  cursor: grabbing;
  transform: scale(1.12);
}

input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 5px var(--brand-soft-strong);
}

input[type="range"]::-moz-range-track {
  height: var(--range-track-h);
  border-radius: var(--r-pill);
  background: var(--track);
  box-shadow: inset 0 1px 2px rgba(24, 18, 60, 0.12);
}

input[type="range"]::-moz-range-progress {
  height: var(--range-track-h);
  border-radius: var(--r-pill);
  background: var(--gradient-brand);
}

input[type="range"]::-moz-range-thumb {
  width: var(--range-thumb);
  height: var(--range-thumb);
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 1px 3px rgba(24, 18, 60, 0.3), 0 0 0 1px rgba(109, 74, 255, 0.28);
  cursor: grab;
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

input[type="range"]:hover::-moz-range-thumb {
  transform: scale(1.08);
}

input[type="range"]:active::-moz-range-thumb {
  cursor: grabbing;
}

input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 5px var(--brand-soft-strong);
}

input[type="range"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Switches ---------------------------------------------------------------- */

.toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  grid-column: 1 / -1;
  padding-top: var(--sp-1);
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

.switch input {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--track);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: background-color var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}

.switch input::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 20, 31, 0.35);
  transition: transform var(--t-base), background-color var(--t-base);
}

.switch input:checked {
  border-color: transparent;
  background: var(--gradient-brand);
}

.switch input:checked::before {
  transform: translateX(18px);
}

.switch:hover input {
  border-color: var(--brand);
}

.switch input:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

.switch input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Advanced disclosure ----------------------------------------------------- */

#advanced {
  grid-column: 1 / -1;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color var(--t-fast), background-color var(--t-fast);
}

#advanced[open] {
  padding-bottom: var(--sp-4);
  border-color: var(--border-strong);
}

#advanced > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  padding-block: var(--sp-2);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--text-muted);
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast);
}

#advanced > summary::-webkit-details-marker {
  display: none;
}

#advanced > summary::marker {
  content: "";
}

#advanced > summary::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--t-base);
}

#advanced[open] > summary {
  color: var(--text);
}

#advanced[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}

#advanced > summary:hover {
  color: var(--brand);
}

#advanced > .field {
  margin-top: var(--sp-3);
}

#advanced > .switch {
  margin-top: var(--sp-4);
}

/* ==========================================================================
   7. Results, previews, loader, compare slider, toolbar, stats, actions
   ========================================================================== */

.results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.results figure {
  display: grid;
  gap: var(--sp-2);
  min-width: 0;
  margin: 0;
}

.results figcaption {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.preview-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
  max-height: 60vh;
  padding: var(--sp-3);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  overscroll-behavior: contain;
}

.preview-box img {
  display: block;
  max-width: 100%;
  max-height: 54vh;
  width: auto;
  height: auto;
  margin: auto;
  object-fit: contain;
  border-radius: 4px;
}

/* Nothing selected yet — keep the (empty) image element invisible. */
.preview-box img:not([src]),
.preview-box img[src=""] {
  display: none;
}

/* Zoom: 100% and 200% show the artwork at its natural / doubled size. */
.preview-box.zoom-1 img,
.zoom-1 .preview-box img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}

.preview-box.zoom-2 img,
.zoom-2 .preview-box img {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  margin: 0;
  transform: scale(2);
  transform-origin: top left;
}

/* Transparency checkerboard. */
.checker {
  background-color: var(--checker-a);
  background-image: conic-gradient(
    var(--checker-b) 0 25%,
    var(--checker-a) 0 50%,
    var(--checker-b) 0 75%,
    var(--checker-a) 0
  );
  background-size: 20px 20px;
  background-position: 0 0;
}

/* Loading overlay + spinner. */
.loading {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: inherit;
  background: var(--overlay-ink);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-backdrop-filter: blur(3px) saturate(130%);
  backdrop-filter: blur(3px) saturate(130%);
  animation: fade-in var(--t-base) both;
}

.spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}

/* Shimmer for boxes that are refreshing their content. */
.preview-box.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.42) 50%, transparent 80%);
  background-size: 200% 100%;
  pointer-events: none;
  animation: shimmer 1.4s linear infinite;
}

.is-loading {
  cursor: progress;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

/* Compare slider ---------------------------------------------------------- */

.compare {
  display: block;
}

.compare-box {
  --pos: 50%;
  --compare-line: var(--gradient-brand);
  position: relative;
  width: 100%;
  height: clamp(260px, 48vh, 480px);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background-color: var(--checker-a);
  background-image: conic-gradient(
    var(--checker-b) 0 25%,
    var(--checker-a) 0 50%,
    var(--checker-b) 0 75%,
    var(--checker-a) 0
  );
  background-size: 20px 20px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.compare-box img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  pointer-events: none;
}

/* The vector sits on the right of the handle and is clipped by --pos. */
#cmp-svg {
  z-index: 2;
  clip-path: inset(0 0 0 var(--pos, 50%));
}

.compare-box::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--compare-line);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.55);
  pointer-events: none;
}

.compare-box::after {
  content: "⇆";
  position: absolute;
  top: 50%;
  left: var(--pos, 50%);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
  color: var(--brand);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(24, 18, 60, 0.3), 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#compare-range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  background: transparent;
  cursor: ew-resize;
  appearance: none;
  -webkit-appearance: none;
}

.compare-box:focus-within {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* Toolbar ----------------------------------------------------------------- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.toolbar .btn {
  min-height: 36px;
  padding: 0 var(--sp-3);
  border-color: transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.875rem;
  box-shadow: none;
}

.toolbar .btn:hover {
  border-color: transparent;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: none;
  transform: none;
}

.toolbar .btn[aria-pressed="true"] {
  background: var(--brand-soft);
  box-shadow: inset 0 0 0 1px var(--brand-soft-strong);
  color: var(--brand);
}

.toolbar .btn[aria-pressed="true"]:hover {
  background: var(--brand-soft-strong);
  color: var(--brand);
}

.toolbar .zoom {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
}

.toolbar .zoom .btn {
  min-height: 30px;
  border-radius: var(--r-pill);
  padding-inline: var(--sp-3);
}

.toolbar .zoom .btn:hover {
  background: var(--surface);
}

.toolbar .zoom .btn[aria-pressed="true"] {
  background: var(--surface);
  box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--brand-soft-strong);
  color: var(--brand);
}

/* Stats ------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-2);
  margin: 0;
}

.stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.stats dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.stats dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Status ------------------------------------------------------------------ */

.status {
  min-height: 1.3em;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

.status:empty {
  display: none;
}

.status.is-error,
.status.is-error strong {
  color: var(--danger);
}

.status.is-success {
  color: var(--success);
}

/* Actions ----------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.actions #png-scale {
  flex: 0 0 auto;
}

.actions #reset {
  margin-left: auto;
}

/* ==========================================================================
   8. Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  left: 50%;
  bottom: max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  width: max-content;
  max-width: min(92vw, 420px);
  transform: translateX(-50%);
  pointer-events: none;
}

.toast {
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-pill);
  background: #1b1b26;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  text-wrap: pretty;
  box-shadow: var(--shadow-lg);
  animation: toast-in 260ms var(--ease) both;
}

.toast.is-error {
  background: #d92d4b;
  border-color: rgba(255, 255, 255, 0.18);
}

.toast.is-success {
  background: var(--gradient-brand);
  border-color: rgba(255, 255, 255, 0.18);
}

.toast.is-leaving {
  animation: toast-out 200ms var(--ease) both;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

/* ==========================================================================
   9. Content sections, footer, prose
   ========================================================================== */

.section {
  padding-block: clamp(32px, 6vw, 64px);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.section > .container > h2 {
  margin-bottom: var(--sp-2);
  text-align: center;
}

.section-lead {
  max-width: 600px;
  margin: 0 auto clamp(20px, 3vw, 32px);
  color: var(--text-muted);
  font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
  text-align: center;
  text-wrap: pretty;
}

/* "How it works" steps ---------------------------------------------------- */

.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps li {
  counter-increment: step;
  padding: var(--sp-5);
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.steps li::before {
  content: counter(step);
  display: block;
  margin-bottom: var(--sp-2);
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}

.steps li:hover {
  border-color: var(--brand-soft-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.steps h3 {
  margin-bottom: var(--sp-1);
}

.steps p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

/* Feature cards ----------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}

.card {
  position: relative;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}

.card h3 {
  margin-bottom: var(--sp-1);
}

.card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.card:hover {
  border-color: var(--brand-soft-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

/* A whole card that is a link (the /tools hub): keep the card look, drop the
   underline and the inline-link colour the anchor would otherwise bring. */
.tool-card {
  display: block;
  color: inherit;
}

.tool-card:hover {
  color: inherit;
  text-decoration: none;
}

/* Donation card ----------------------------------------------------------- */

#donate .card-donate {
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 44px);
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--gradient-brand) border-box;
  text-align: center;
  box-shadow: var(--shadow-md);
}

#donate .card-donate::before {
  content: "";
  position: absolute;
  inset: -40% 30% auto;
  height: 220px;
  background: radial-gradient(closest-side, var(--bg-glow-a), transparent);
  pointer-events: none;
}

#donate .card-donate:hover {
  border-color: transparent;
  box-shadow: var(--shadow-lg);
  transform: none;
}

#donate .card-donate h2 {
  position: relative;
  margin-bottom: var(--sp-2);
}

#donate .card-donate p {
  position: relative;
  max-width: 46ch;
  margin: 0 auto var(--sp-4);
  color: var(--text-muted);
}

#donate .card-donate .btn-support {
  position: relative;
  min-height: 44px;
  padding-inline: var(--sp-5);
}

/* FAQ accordion ----------------------------------------------------------- */

.faq-list {
  max-width: 820px;
  margin-inline: auto;
}

.faq-list details {
  margin-bottom: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}

.faq-list details:last-child {
  margin-bottom: 0;
}

.faq-list details[open] {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.faq-list summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: var(--sp-3) var(--sp-4);
  font-size: 0.9375rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--text);
  list-style: none;
  cursor: pointer;
  transition: color var(--t-fast);
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::marker {
  content: "";
}

.faq-list summary::after {
  content: "+";
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  transition: transform var(--t-base), background-color var(--t-fast), color var(--t-fast);
}

.faq-list details[open] summary::after {
  content: "−";
  background: var(--gradient-brand);
  color: #fff;
}

.faq-list summary:hover {
  color: var(--brand);
}

.faq-list summary:hover::after {
  background: var(--brand-soft-strong);
}

.faq-list details[open] summary:hover::after {
  background: var(--gradient-brand);
}

.faq-list details > p {
  margin: 0;
  padding: 0 var(--sp-4) var(--sp-4);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
  text-wrap: pretty;
  animation: fade-in var(--t-base) both;
}

/* Footer ------------------------------------------------------------------ */

.site-footer {
  margin-top: clamp(24px, 5vw, 56px);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.875rem;
}

.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.site-footer p {
  margin: 0;
}

.site-footer .tagline {
  color: var(--text);
  font-weight: 600;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin: var(--sp-1) 0;
}

.footer-nav a {
  color: var(--text-muted);
  font-weight: 550;
}

.footer-nav a:hover {
  color: var(--brand);
  text-decoration: none;
}

/* "Follow @convertars on X for new tools — or report a problem there." */
.footer-follow {
  max-width: 46ch;
  margin: var(--sp-1) 0;
  color: var(--text-muted);
  line-height: 1.6;
  text-wrap: pretty;
}

.footer-follow a {
  color: var(--brand);
  font-weight: 700;
}

.footer-follow a:hover {
  color: var(--brand-deep);
}

.site-footer .powered {
  color: var(--text-subtle);
}

.site-footer .copyright {
  color: var(--text-subtle);
  font-size: 0.8125rem;
}

/* Prose for future text pages -------------------------------------------- */

.prose {
  max-width: 720px;
  margin-inline: auto;
  line-height: 1.7;
  overflow-wrap: break-word;
}

.prose > h1 {
  margin-bottom: var(--sp-3);
}

.prose > * + * {
  margin-top: 1em;
}

.prose h2 {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
}

.prose h3 {
  margin-top: 1.7em;
  margin-bottom: 0.4em;
  font-size: 1.125rem;
}

.prose h2 + *,
.prose h3 + * {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose a {
  text-decoration: underline;
  text-decoration-color: var(--brand-soft-strong);
  text-decoration-thickness: 1.5px;
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose img {
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-sm);
}

.prose table {
  width: 100%;
  margin-block: 1.5em;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.prose caption {
  margin-bottom: var(--sp-2);
  color: var(--text-subtle);
  font-size: 0.8125rem;
  text-align: left;
}

.prose th,
.prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.prose thead th {
  border-bottom: 2px solid var(--border-strong);
  background: var(--surface-2);
  font-weight: 650;
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose tbody tr:hover {
  background: var(--surface-2);
}

/* ==========================================================================
   10. Responsive & motion preferences
   ========================================================================== */

@media (min-width: 768px) {
  .container {
    padding-inline: var(--sp-5);
  }
}

@media (min-width: 800px) {
  .results {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-5);
  }
}

/* Below 768px the nav links live in a dropdown panel under the sticky header. */
@media (max-width: 767px) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-header .container {
    gap: var(--sp-3);
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--sp-2);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a,
  .site-nav-extra {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding-inline: var(--sp-5);
    border-bottom: 0;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
  }

  .site-nav a:hover {
    border-bottom-color: transparent;
    background: var(--surface-2);
    text-decoration: none;
  }
}

@media (max-width: 639px) {
  .btn-support {
    min-height: 36px;
    padding-inline: var(--sp-3);
    font-size: 0.8125rem;
  }

  .x-header-link {
    width: 36px;
    height: 36px;
  }

  .tool > .container {
    padding: var(--sp-4);
    border-radius: var(--r-md);
  }

  .dropzone {
    min-height: 200px;
    padding: var(--sp-4);
  }

  .toolbar .zoom {
    order: 3;
  }
}

@media (max-width: 560px) {
  .actions {
    gap: var(--sp-2);
  }

  .actions .btn,
  .actions #png-scale {
    flex: 1 1 100%;
  }

  .actions #reset {
    margin-left: 0;
  }

  .toolbar {
    gap: 6px;
  }

  .toolbar .btn {
    padding-inline: var(--sp-2);
    font-size: 0.8125rem;
  }
}

@media (max-width: 420px) {
  /* Brand, X icon, support pill and hamburger all share one 360px row. */
  .site-header .container {
    gap: var(--sp-2);
  }

  .x-header-link {
    width: 34px;
    height: 34px;
  }

  .hero {
    padding-top: var(--sp-5);
  }

  .hero h1 {
    max-width: none;
  }

  .hero .subtitle {
    font-size: 0.9375rem;
  }

  .preview-box {
    min-height: 220px;
    padding: var(--sp-2);
  }

  .preview-box img {
    max-height: 46vh;
  }

  .compare-box {
    height: clamp(220px, 42vh, 380px);
  }

  .steps li,
  .card {
    padding: var(--sp-4);
  }

  .chip {
    padding-inline: var(--sp-3);
    font-size: 0.8125rem;
  }

  .toggles {
    gap: var(--sp-2) var(--sp-4);
  }

  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .brand {
    font-size: 1rem;
  }

  .brand img {
    width: 28px;
    height: 28px;
  }

  .dropzone strong {
    font-size: 0.9375rem;
  }

  .dropzone.is-compact {
    padding-inline: var(--sp-3);
  }

  .faq-list summary {
    padding-inline: var(--sp-3);
  }

  .faq-list details > p {
    padding-inline: var(--sp-3);
  }
}

/* Long words and wide children must never cause a sideways scrollbar. */
h1,
h2,
h3,
p,
summary,
dd,
.toast {
  overflow-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation: none;
    border-top-color: rgba(255, 255, 255, 0.3);
    border-right-color: #fff;
  }

  .preview-box.is-loading::after {
    animation: none;
    background: transparent;
  }
}


/* ==========================================================================
   11. Converter link lists, credits table, prose buttons
   ========================================================================== */

/* Footer "Converters" block: one link per tool page, filled at build time. */
.footer-converters {
  width: 100%;
  max-width: 640px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

.footer-converters-title {
  margin: 0 0 var(--sp-2);
  color: var(--text-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer-converters-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-converters-list li {
  margin: 0;
}

.footer-converters-list a {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 550;
}

.footer-converters-list a:hover {
  color: var(--brand);
  text-decoration: none;
}

/* "Other converters" row at the bottom of every tool page. */
.other-converters {
  margin-top: clamp(16px, 2.4vw, 24px);
  padding-top: clamp(14px, 2vw, 20px);
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

.other-converters-title {
  margin: 0 0 var(--sp-2);
  color: var(--text-subtle);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.other-converters-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.other-converters-list li {
  margin: 0;
}

.other-converters-list a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--t-fast), background-color var(--t-fast), border-color var(--t-fast);
}

.other-converters-list a:hover {
  border-color: var(--brand-soft-strong);
  background: var(--brand-soft);
  color: var(--brand);
  text-decoration: none;
}

/* Open-source credits table on /about. */
.prose .credits-table {
  font-size: 0.875rem;
}

.prose .credits-table th:nth-child(3),
.prose .credits-table td:nth-child(3) {
  white-space: nowrap;
}

.prose .credits-table td small {
  display: block;
  margin-top: 2px;
  color: var(--text-subtle);
  font-size: 0.75rem;
  line-height: 1.4;
}

.prose .credits-table code {
  padding: 0.05em 0.3em;
  font-size: 0.75rem;
  white-space: nowrap;
}

@media (max-width: 620px) {
  .prose .credits-table {
    display: block;
    overflow-x: auto;
  }
}

/* Buttons keep their own look inside a prose block. */
.prose a.btn,
.prose a.btn-support {
  text-decoration: none;
}

.prose a.btn-support {
  color: var(--support-ink);
}

/* ==========================================================================
   Donate page (/donate): Ko-fi card + one tile per crypto coin
   ========================================================================== */

.donate-intro {
  max-width: 62ch;
  margin: 0 auto var(--sp-6);
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-align: center;
  text-wrap: pretty;
}

.donate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-5);
  align-items: start;
}

.donate-card {
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
}

.donate-card:hover {
  transform: none;
  box-shadow: var(--shadow-lg);
}

.donate-card > p {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-size: 0.9375rem;
  text-wrap: pretty;
}

.donate-card > h2 {
  margin-bottom: var(--sp-2);
}

.donate-action {
  margin-bottom: var(--sp-2);
}

.donate-note {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.8125rem;
}

/* "Can't donate? Following @convertars on X helps too." under the donate cards. */
.donate-follow {
  max-width: 62ch;
  margin: var(--sp-6) auto 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-align: center;
  text-wrap: pretty;
}

.donate-follow a {
  color: var(--brand);
  font-weight: 700;
}

.donate-follow a:hover {
  color: var(--brand-deep);
}

.btn-support-lg {
  min-height: 52px;
  padding-inline: var(--sp-6);
  font-size: 1.0625rem;
}

/* Ko-fi's own donation panel, embedded under the fallback button. */
.kofi-embed {
  display: block;
  width: 100%;
  margin-bottom: var(--sp-3);
  padding: 4px;
  border: none;
  border-radius: 12px;
  background: #f9f9f9;
}

/* Coin tiles --------------------------------------------------------------- */

.coin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: 0;
  list-style: none;
}

.coin-tile {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-align: center;
}

.coin-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: 1rem;
}

.network-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.coin-qr {
  display: block;
  width: min(160px, 60vw);
  height: auto;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.coin-address {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface-inset);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: left;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.btn-copy {
  min-height: 36px;
  padding: 0 var(--sp-4);
  font-size: 0.8125rem;
}

.btn-copy.is-copied {
  border-color: transparent;
  background: var(--success-soft);
  color: var(--success);
}

/* Amber warning: wrong-network transfers are unrecoverable. */
.coin-warning {
  margin: 0;
  color: #8a5a00;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  text-wrap: pretty;
}

@media (prefers-color-scheme: dark) {
  .coin-warning {
    color: #ffc766;
  }
}

@media (max-width: 520px) {
  .donate-grid,
  .coin-grid {
    grid-template-columns: 1fr;
  }

  .btn-support-lg {
    width: 100%;
    font-size: 1rem;
  }
}

/* ==========================================================================
   Support dialog — the warm ask shown once a download has started
   ========================================================================== */

.support-dialog {
  position: fixed;
  inset: 0;
  width: min(480px, calc(100vw - 24px));
  max-width: 480px;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  margin: auto;
  padding: clamp(20px, 4vw, 28px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border);
  border-radius: 20px;
  /* Brand-gradient rule along the top plus a soft glow behind the card. */
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, var(--brand), var(--brand-2)),
    radial-gradient(120% 80% at 50% -20%, var(--brand-soft-strong), transparent 70%);
  background-repeat: no-repeat;
  background-size: 100% 4px, 100% 100%;
  background-position: top left, top left;
  color: var(--text);
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.support-dialog[open] {
  animation: support-card-in var(--t-slow);
}

/* The dimmed, blurred page behind the card. */
.support-dialog::backdrop {
  background: var(--overlay-ink);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.support-emoji {
  margin: 0 0 var(--sp-2);
  font-size: 3.25rem;
  line-height: 1;
  animation: support-pop 460ms var(--ease) both;
}

.support-title {
  margin: 0 0 var(--sp-1);
  font-size: 1.375rem;
  line-height: 1.22;
}

.support-again {
  margin: 0 0 var(--sp-4);
  color: var(--text-subtle);
  font-size: 0.8125rem;
}

.support-lead {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Link-styled button: "Download again" must not look like a second CTA. */
.support-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  cursor: pointer;
}

.support-link:hover {
  color: var(--brand-deep);
}

.support-cta {
  margin: var(--sp-4) 0 var(--sp-3);
}

.support-cta .btn-support {
  width: 100%;
}

/* Compact crypto list — monospace, one row per coin. */
.support-crypto {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  text-align: left;
}

.support-crypto-title {
  margin: 0 0 var(--sp-2);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.support-coin-list {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding: 0;
  list-style: none;
}

.support-coin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.support-coin-name {
  font-size: 0.8125rem;
  font-weight: 700;
}

.support-coin-address {
  flex: 1 1 6em;
  min-width: 0;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  user-select: all;
  -webkit-user-select: all;
}

.support-copy.btn-copy {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 var(--sp-2);
  font-size: 0.75rem;
}

.support-qr-link {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
}

/* "Can't donate right now?" — the follow alternative, under the crypto rows. */
.support-follow {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.support-follow-text {
  margin: 0 0 var(--sp-2);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.support-follow-cta {
  margin: 0;
}

.support-follow-cta .btn {
  width: 100%;
  min-height: 40px;
  font-size: 0.875rem;
}

.support-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.support-thanks {
  margin: 0;
  color: var(--text-subtle);
  font-size: 0.75rem;
}

@keyframes support-pop {
  0% {
    opacity: 0;
    transform: scale(0.4) rotate(-12deg);
  }

  60% {
    opacity: 1;
    transform: scale(1.12) rotate(4deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes support-card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* Almost full width on phones, and always scrollable instead of clipped. */
@media (max-width: 520px) {
  .support-dialog {
    width: calc(100vw - 24px);
    max-width: none;
    padding: var(--sp-4);
  }

  .support-emoji {
    font-size: 2.75rem;
  }

  .support-title {
    font-size: 1.25rem;
  }
}

@media (prefers-color-scheme: dark) {
  .support-dialog {
    border-color: var(--border-strong);
  }

  .support-dialog::backdrop {
    background: rgba(4, 4, 10, 0.68);
  }
}

/* The pop is decoration only: drop it when motion is unwelcome. */
@media (prefers-reduced-motion: reduce) {
  .support-dialog[open] {
    animation: none;
  }

  .support-emoji {
    animation: none;
  }
}

/* Upload notice under the dropzone ------------------------------------------ */

/* Deliberately small and unobtrusive: the retention notice, not a warning. */
.upload-note {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.upload-note a {
  color: inherit;
  text-decoration: underline;
}

/* ==========================================================================
   Utility tools (SVG → PNG and friends)
   ========================================================================== */

/* Form, option grid, picked file, result card ------------------------------- */

/* One column on phones, two from tablet width up: no sideways scroll at 375px. */
.utility-form {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
  margin-top: clamp(16px, 2.4vw, 24px);
  min-width: 0;
}

.utility-form .controls {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-4);
}

@media (min-width: 720px) {
  .utility-form .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-5);
  }
}

/* Hint under an option control. */
.field-help {
  color: var(--text-subtle);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* The picked file: thumbnail, name, size. */
.file-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.file-thumb {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--checker-a);
  background-image: conic-gradient(
    var(--checker-b) 0 25%,
    var(--checker-a) 0 50%,
    var(--checker-b) 0 75%,
    var(--checker-a) 0
  );
  background-size: 12px 12px;
  object-fit: contain;
}

.file-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-meta strong {
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-meta small {
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* The picked files of a multi-file tool: one reorderable row each ------------- */

.file-list {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
}

.file-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
  padding: var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

/* 40px thumbnail; HEIC cannot be drawn, so it gets its extension instead. */
.file-row-thumb {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background-color: var(--checker-a);
  background-image: conic-gradient(
    var(--checker-b) 0 25%,
    var(--checker-a) 0 50%,
    var(--checker-b) 0 75%,
    var(--checker-a) 0
  );
  background-size: 10px 10px;
  object-fit: contain;
  color: var(--text-subtle);
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.file-row-thumb.is-text {
  background-image: none;
  background-color: var(--brand-soft);
}

.file-row-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-row-name {
  font-size: 0.8125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-row-size {
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.file-row-actions {
  display: flex;
  gap: var(--sp-1);
}

.file-row-btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}

.file-row-btn:hover:not(:disabled) {
  border-color: var(--brand);
  color: var(--text);
}

.file-row-btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.file-row-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.file-add {
  justify-self: start;
  margin-top: var(--sp-2);
}

/* "N pages" of a multi-page result, under the file name. */
.file-card-pages {
  color: var(--text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* Result card -------------------------------------------------------------- */

.utility-result {
  display: grid;
  gap: var(--sp-4);
  min-width: 0;
  margin-top: clamp(16px, 2.4vw, 24px);
  padding: clamp(12px, 2vw, 16px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  animation: rise-in var(--t-slow) both;
}

/* The result no longer matches the chosen file or options. */
.utility-result.is-stale {
  opacity: 0.72;
}

.utility-result .preview-box {
  min-height: 200px;
  max-height: 48vh;
}

.utility-result .preview-box img {
  max-height: 42vh;
}

/* A run in flight: the button itself carries aria-busy. */
.btn[aria-busy="true"] {
  cursor: progress;
}

.tool.is-busy .dropzone {
  cursor: progress;
}

/* File card for results that are not images (archives, documents, CAD) ----- */

.file-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}

.file-card-ext {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: var(--r-xs);
  background: var(--gradient-brand);
  color: var(--brand-ink);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.file-card-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-card-name {
  font-size: 0.875rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.file-card-size {
  color: var(--text-subtle);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

/* "Already well optimized" and similar one-liners. */
.result-note {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand);
  border-radius: var(--r-xs);
  background: var(--brand-soft);
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Warnings the tool reported (missing fonts, ignored filters…). */
.warnings {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding-inline-start: 20px;
  color: var(--text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.warnings li {
  list-style: disc;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   Navigation — footer tool columns (Popular / More / All tools)
   ========================================================================== */

/* Three columns: the two link lists from src/popular.js and the hub link. */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4) clamp(24px, 6vw, 64px);
  width: 100%;
  max-width: 720px;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  text-align: left;
}

.footer-column {
  min-width: 150px;
}

.footer-column .footer-converters-list {
  display: grid;
  gap: 4px;
  justify-content: start;
}

/* The hub link sits on the baseline of the two lists. */
.footer-column-hub {
  display: flex;
  align-items: center;
}

.footer-all-tools {
  color: var(--text);
  font-size: 0.8125rem;
  font-weight: 650;
  white-space: nowrap;
}

.footer-all-tools:hover {
  color: var(--brand);
  text-decoration: none;
}

@media (max-width: 620px) {
  .footer-links {
    justify-content: center;
    text-align: center;
  }

  .footer-column-hub {
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .file-summary,
  .file-card {
    padding: var(--sp-2);
  }

  .file-thumb,
  .file-card-ext {
    width: 44px;
    height: 44px;
  }

  /* Narrow phones: smaller thumbnail and buttons, so the name keeps its room. */
  .file-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: var(--sp-2);
  }

  .file-row-thumb {
    width: 36px;
    height: 36px;
  }

  .file-row-btn {
    width: 30px;
    height: 30px;
  }

  .utility-result {
    padding: var(--sp-3);
  }
}

/* ==========================================================================
   Universal converter — the target chips of the home page
   (#universal-target-list, built by public/assets/js/home.js)
   ========================================================================== */

/* The chips own their row of the "Convert to" fieldset, so they can wrap
   freely even when the legend and the buttons share one line on desktop. */
#universal-target-list {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  min-width: 0;
  margin-top: var(--sp-1);
}

/* A target chip is a button, not a preset: 44px tall so it is a comfortable
   touch target, with the same pill shape as the rest of the site. */
.target-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    box-shadow var(--t-fast),
    transform var(--t-fast);
}

.target-chip:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
}

.target-chip:active {
  transform: translateY(0) scale(0.985);
}

/* The selected target: the accent gradient, like the primary button. */
.target-chip[aria-pressed="true"] {
  border-color: transparent;
  background: var(--gradient-brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow-brand);
}

.target-chip[aria-pressed="true"]:hover {
  color: var(--brand-ink);
  filter: saturate(1.05) brightness(1.04);
}

.target-chip:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Narrow phones: tighter padding, same 44px target, and never a side scroll. */
@media (max-width: 420px) {
  .target-chip {
    padding: 0 var(--sp-3);
    font-size: 0.875rem;
  }
}

/* Swap link ---------------------------------------------------------------- */

/* "⇄ Swap: PNG to JPG" under the hero subtitle: a small pill, centred with the
   hero text, that keeps a 40px touch target and wraps instead of overflowing
   on a 375px phone. Colours come from the tokens, so it reads on the dark hero
   too. */
.swap-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  max-width: 100%;
  min-height: 40px;
  margin-top: var(--sp-4);
  padding: 0 var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  transition:
    background-color var(--t-fast),
    border-color var(--t-fast),
    color var(--t-fast),
    transform var(--t-fast);
}

.swap-link:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  color: var(--brand-deep);
  transform: translateY(-1px);
}

.swap-link:active {
  transform: translateY(0);
}

.swap-link:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .swap-link {
    padding-inline: var(--sp-3);
    font-size: 0.8125rem;
  }
}