/* OctoZip online video compressor (/video-compressor). Loaded after /octozip.css and tools.css.
   Everything here is scoped to body.page-vc, so the shared blog and tool styles stay as they are on other pages.

   The page follows the quiet system: one typeface (Archivo); weights 500 body, 700 headings, buttons and labels,
   800 the H1 only; letter-spacing 0 except the H1; one size per heading level; no containers (rows are split by
   1px hairlines, groups by whitespace); filled boxes only for fields (sunken, radius 12) and status callouts
   (tinted, radius 12); no shadows, gradients, dashed borders or stripes; one accent for links, the selected
   setting and the progress fill. Spacing is on a 4/8 base. */

/* ── tokens ── */
body.page-vc {
  --vc-ground: #E0F2F6;
  --vc-sunken: #D2E8EE;
  --vc-line: rgba(22, 49, 74, 0.14);
  --vc-ink: #16314A;
  --vc-muted: #4C6072;
  --vc-accent: #087489;
  --vc-accent-line: rgba(8, 116, 137, 0.4);
  --vc-primary: #16314A;
  --vc-primary-hover: #1F4466;
  --vc-primary-ink: #FFFFFF;
  --vc-disabled: #C3D2D9;
  --vc-disabled-ink: #5D6E7D;
  --vc-warn: #FAEBC8;
  --vc-warn-ink: #4A3300;
  --vc-bad: #F8DDD8;
  --vc-bad-ink: #7A1B16;
  --vc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2316314A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* the shared tokens, so the nav, tables and other shared parts follow the same palette on this page */
  --sub: var(--vc-muted);
  --line: var(--vc-line);
  --line-strong: var(--vc-line);
  --field: var(--vc-sunken);
  --link: var(--vc-accent);
  --link-line: var(--vc-accent-line);
  --btn-bg: var(--vc-primary);
  --btn-bg-hover: var(--vc-primary-hover);
  --btn-ink: var(--vc-primary-ink);
  --teal-bright: var(--vc-accent);

  font-weight: 500;
  background: var(--vc-ground);
  color: var(--vc-ink);
}
@media (prefers-color-scheme: dark) {
  body.page-vc {
    --vc-ground: #0B1420;
    --vc-sunken: #15233A;
    --vc-line: rgba(228, 236, 244, 0.13);
    --vc-ink: #E4ECF4;
    --vc-muted: #9DB1C4;
    --vc-accent: #45D0E4;
    --vc-accent-line: rgba(69, 208, 228, 0.45);
    --vc-primary: #E4ECF4;
    --vc-primary-hover: #FFFFFF;
    --vc-primary-ink: #0B1420;
    --vc-disabled: #25354A;
    --vc-disabled-ink: #8396AA;
    --vc-warn: #33290F;
    --vc-warn-ink: #F3D9A4;
    --vc-bad: #3B1C1F;
    --vc-bad-ink: #FFB9B0;
    --vc-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23E4ECF4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

/* letter-spacing 0 everywhere on the page; the H1 sets its own */
body.page-vc main *, body.page-vc .nav * { letter-spacing: 0; }

/* the nav pill: a hairline instead of a shadow; logo at 700, a flat Get App button */
body.page-vc .nav-pill { box-shadow: none; border: 1px solid var(--vc-line); }
body.page-vc .nav-logo { font-weight: 700; }
body.page-vc .nav-cta { transition: background-color 0.15s; }
body.page-vc .nav-cta:hover { background: var(--vc-primary-hover); transform: none; }

/* the footer: the same dark band, with 700 headings in sentence case and a 52px store button (as on the blog) */
body.page-vc .footer-logo { font-weight: 700; }
body.page-vc .footer-logo span { color: #45D0E4; }
body.page-vc .footer-cta {
  display: inline-flex; align-items: center; min-height: 52px; padding: 0 20px;
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 999px; background: #15233A;
  color: #fff; font-size: 16px; font-weight: 700; line-height: 1.25; transition: border-color 0.15s;
}
body.page-vc .footer-cta:hover { border-color: #E4ECF4; background: #15233A; }
body.page-vc .footer-h { font-size: 14px; font-weight: 700; line-height: 1.25; letter-spacing: normal; text-transform: none; }
body.page-vc .footer-h-note { margin-top: 4px; color: #8DA2B8; font-size: 13px; font-weight: 500; letter-spacing: normal; }
body.page-vc .footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }
body.page-vc .footer-note { font-size: 13px; }

/* ── layout: one article column, no card ── */
body.page-vc .blog-body { padding: 128px 24px 96px; }
body.page-vc .prose-card {
  background: none; box-shadow: none; border-radius: 0; padding: 0;
  font-size: 17px; max-width: 68ch; margin: 0 auto;
}
body.page-vc .prose-card > *, body.page-vc .prose-card .prose > * { max-width: none; }
@media (min-width: 1100px) {
  /* an empty column the width of the contents list on the right keeps the article in the middle of the page */
  body.page-vc .post-grid.has-toc { grid-template: "toc main ." / 200px minmax(0, 1fr) 200px; column-gap: 32px; }
  body.page-vc .post-grid > .toc { top: 112px; }
}
@media (min-width: 1440px) {
  body.page-vc .post-grid.has-toc { grid-template: "toc main rail" / 220px minmax(0, 1fr) 260px; }
  body.page-vc .post-grid > .rail { top: 112px; }
}
@media (max-width: 600px) {
  body.page-vc .blog-body { padding: 104px 24px 72px; }
}

/* links: the accent, underlined, body weight */
body.page-vc .prose-card :is(p, li, td, nav, caption) > a,
body.page-vc .rail-card li a {
  color: var(--vc-accent); font-weight: 500; text-decoration: underline;
  text-decoration-color: var(--vc-accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
body.page-vc .prose-card :is(p, li, td, nav, caption) > a:hover,
body.page-vc .rail-card li a:hover { text-decoration-color: currentColor; }

/* ── the title ── */
body.page-vc .vc-hero { margin: 0 0 48px; }
body.page-vc .crumbs { margin: 0 0 12px; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .vc-hero h1 {
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.25; letter-spacing: -0.018em;
  color: var(--vc-ink); text-wrap: balance;
}
body.page-vc .vc-lede { margin: 16px 0 0; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--vc-ink); text-wrap: balance; }
body.page-vc .vc-hero .inner-meta { margin: 8px 0 0; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }

/* ── headings and body copy: one size per level ── */
body.page-vc .prose-card h2 {
  font-size: 24px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--vc-ink); margin: 48px 0 12px;
}
body.page-vc .prose-card .vc > h2 { margin-top: 0; }
body.page-vc .prose-card h3 { font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: 0; margin: 32px 0 8px; }
/* no number badges on the headings */
body.page-vc .has-toc .prose-card h2[id]::before { content: none; display: none; }
body.page-vc .prose p, body.page-vc .prose li { font-size: 17px; line-height: 1.55; font-weight: 500; }
body.page-vc .prose p { margin: 0 0 16px; }
body.page-vc .prose ol, body.page-vc .prose ul { margin: 0 0 16px; }
body.page-vc .prose li { margin-bottom: 8px; }
body.page-vc .prose strong, body.page-vc .prose-card strong { font-weight: 700; }
body.page-vc .tool-sources li { font-size: 15px; }

/* tables: rows split by hairlines, no frame */
body.page-vc .prose .tool-table-wrap { margin: 16px 0 24px; background: none; border-radius: 0; box-shadow: none; }
body.page-vc .tool-table-wrap:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 4px; }
body.page-vc .prose .tool-table { font-size: 15px; line-height: 1.55; }
body.page-vc .tool-table caption { padding: 0 0 8px; font-size: 13px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .tool-table th, body.page-vc .tool-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--vc-line); }
body.page-vc .tool-table :is(th, td):last-child { padding-right: 0; }
body.page-vc .tool-table thead th {
  font-size: 13px; font-weight: 700; color: var(--vc-muted); text-transform: none; letter-spacing: 0; padding-top: 0;
}
body.page-vc .tool-table tbody th { font-weight: 700; color: var(--vc-ink); }
body.page-vc .tool-table td { font-weight: 500; color: var(--vc-ink); }

/* the app note in the copy: a hairline above and below, no box */
body.page-vc .prose-card .app-try {
  background: none; border-radius: 0; margin: 32px 0; padding: 24px 0;
  border-top: 1px solid var(--vc-line); border-bottom: 1px solid var(--vc-line);
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px 16px; align-items: start;
}
body.page-vc .app-try img { grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; }
body.page-vc .app-try .app-try-title { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--vc-ink); }
body.page-vc .app-try p { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 500; color: var(--vc-ink); }

/* questions and the related list */
body.page-vc .prose .faq h3 { margin-top: 32px; }
body.page-vc .prose-card .related { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--vc-line); }
body.page-vc .prose-card .related h2 { margin-top: 0; }

/* ── contents list (left) and rail (right, wide screens): no badges, no cards ── */
body.page-vc .toc-title { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--vc-ink); }
body.page-vc .toc ol { gap: 0; border-left: 1px solid var(--vc-line); }
body.page-vc .toc a {
  display: block; margin-left: -1px; padding: 8px 12px; border-radius: 0; border-left: 2px solid transparent;
  font-size: 15px; font-weight: 500; line-height: 1.25; color: var(--vc-muted); background: none; box-shadow: none;
}
body.page-vc .toc a::before { content: none; display: none; }
body.page-vc .toc a:hover { color: var(--vc-ink); background: none; }
body.page-vc .toc a[aria-current] { color: var(--vc-ink); background: none; box-shadow: none; border-left-color: var(--vc-accent); }
body.page-vc .rail { gap: 24px; }
body.page-vc .rail-card { background: none; box-shadow: none; border-radius: 0; padding: 0 0 24px; border-bottom: 1px solid var(--vc-line); }
body.page-vc .rail-card:last-child { border-bottom: 0; }
body.page-vc .rail-app img { width: 44px; height: 44px; }
body.page-vc .rail-name { margin: 12px 0 4px; font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--vc-ink); }
body.page-vc .rail-text { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .rail-head { margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--vc-ink); }
body.page-vc .rail-card ul { gap: 8px; }
body.page-vc .rail-card ul + .rail-head { margin-top: 24px; }
body.page-vc .rail-card li a { font-size: 15px; }

/* ── buttons: 52px pills. Primary solid; secondary the sunken fill with a hairline; disabled solid grey ── */
body.page-vc .tool-btn,
body.page-vc .rail-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: start;
  min-height: 52px; margin: 0; padding: 0 20px; border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; letter-spacing: 0; text-align: center;
  background: var(--vc-primary); color: var(--vc-primary-ink); text-decoration: none; cursor: pointer;
  box-shadow: none; transition: background-color 0.15s;
}
body.page-vc .tool-btn:hover, body.page-vc .rail-btn:hover { background: var(--vc-primary-hover); color: var(--vc-primary-ink); text-decoration: none; }
body.page-vc .tool-btn.vc-btn-2 { background: var(--vc-sunken); color: var(--vc-ink); border-color: var(--vc-line); }
body.page-vc .tool-btn.vc-btn-2:hover { background: var(--vc-sunken); color: var(--vc-ink); border-color: var(--vc-ink); }
body.page-vc .tool-btn:disabled, body.page-vc .tool-btn:disabled:hover {
  background: var(--vc-disabled); color: var(--vc-disabled-ink); border-color: transparent; cursor: not-allowed;
}
body.page-vc :is(.tool-btn, .rail-btn, .vc-chip, .vc-link-btn):focus-visible,
body.page-vc :is(.tool-input, .tool-select):focus-visible {
  outline: 2px solid var(--vc-accent); outline-offset: 2px;
}
body.page-vc .rail-btn { margin-top: 16px; }
body.page-vc .rail .rail-btn { display: flex; justify-self: auto; }
body.page-vc .prose-card .app-try .rail-btn { margin-top: 8px; padding: 0 20px; }

/* a quiet action that reads as a link */
body.page-vc .vc-link-btn {
  justify-self: start; min-height: 48px; padding: 0; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--vc-accent);
  text-decoration: underline; text-decoration-color: var(--vc-accent-line); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
body.page-vc .vc-link-btn:hover { text-decoration-color: currentColor; }

/* ── fields: 48px, sunken fill, radius 12, no border ── */
body.page-vc .tool-label, body.page-vc .vc-label {
  display: block; margin: 0 0 8px; padding: 0; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--vc-ink);
}
body.page-vc .tool-input, body.page-vc .tool-select {
  min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background-color: var(--vc-sunken);
  font-family: inherit; font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--vc-ink);
}
body.page-vc .tool-select {
  width: auto; min-width: 280px; padding-right: 44px; appearance: none; -webkit-appearance: none;
  background-image: var(--vc-chevron); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}

/* ── status callouts: tinted fill, radius 12, padding 14 ── */
body.page-vc .vc-callout,
body.page-vc .vc-estimate.is-error,
body.page-vc .vc-headline.is-error {
  margin: 0; padding: 14px; border: 0; border-radius: 12px; background: var(--vc-warn); color: var(--vc-warn-ink);
  font-size: 15px; font-weight: 500; line-height: 1.55;
}
body.page-vc .vc-estimate.is-error,
body.page-vc .tool-result.is-error { background: var(--vc-bad); color: var(--vc-bad-ink); font-size: 15px; font-weight: 500; }

/* ══ the compressor ══ */
body.page-vc .tool.vc { background: none; border-radius: 0; padding: 0; margin: 0; scroll-margin-top: 96px; }
body.page-vc .vc .tool-intro { margin: 0 0 24px; font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--vc-ink); }
body.page-vc .vc .tool-fallback { margin: 0; }
body.page-vc .vc-unsupported { display: grid; gap: 16px; }

/* Two columns, so that once a video is chosen its name and the Change button share one row. Everything else spans both. */
body.page-vc .vc-app { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 24px; }
body.page-vc .vc-app > * { grid-column: 1 / -1; min-width: 0; }

/* the drop field, before a video is chosen */
body.page-vc .vc-drop {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  padding: 24px; border-radius: 12px; background: var(--vc-sunken);
}
body.page-vc .vc-drop.is-over { outline: 2px solid var(--vc-accent); outline-offset: -2px; }
body.page-vc .vc-pick { position: relative; display: inline-flex; }
body.page-vc .vc-pick input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
body.page-vc .vc-pick input:focus-visible + .tool-btn { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
body.page-vc .vc-pick .tool-btn { pointer-events: none; }
body.page-vc .vc-pick input:hover + .tool-btn { background: var(--vc-primary-hover); }
body.page-vc .vc-pick-again { display: none; }
body.page-vc .vc-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.page-vc .vc-drop-or { font-size: 15px; font-weight: 500; color: var(--vc-muted); }
body.page-vc .vc-drop-hint { flex-basis: 100%; margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
@media (hover: none) { body.page-vc .vc-drop-or { display: none; } }

/* once a video is chosen: the field goes, and the name, facts and a secondary Change button make one plain row with a
   hairline under it. While it compresses the button is hidden, not dimmed. */
body.page-vc .vc:not([data-state="start"]) .vc-drop { display: contents; }
body.page-vc .vc:not([data-state="start"]) .vc-drop-or,
body.page-vc .vc:not([data-state="start"]) .vc-drop-hint { display: none; }
body.page-vc .vc:not([data-state="start"]) .vc-pick {
  grid-column: 2; grid-row: 1; align-self: stretch; align-items: center; padding: 0 0 16px 16px; border-bottom: 1px solid var(--vc-line);
}
body.page-vc .vc:not([data-state="start"]) .vc-pick .tool-btn { background: var(--vc-sunken); color: var(--vc-ink); border-color: var(--vc-line); }
body.page-vc .vc:not([data-state="start"]) .vc-pick input:hover + .tool-btn { border-color: var(--vc-ink); }
body.page-vc .vc:not([data-state="start"]) .vc-pick-first { display: none; }
body.page-vc .vc:not([data-state="start"]) .vc-pick-again { display: inline; }
body.page-vc .vc[data-state="progress"] .vc-pick { display: none; }

body.page-vc .vc-info { grid-column: 1; grid-row: 1; display: grid; gap: 4px; align-content: center; padding: 0 0 16px; border-bottom: 1px solid var(--vc-line); }
body.page-vc .vc[data-state="progress"] .vc-info { grid-column: 1 / -1; }
body.page-vc .vc-name { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.25; color: var(--vc-ink); overflow-wrap: anywhere; }
body.page-vc .vc-facts { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); font-variant-numeric: tabular-nums; }
body.page-vc .vc-reading { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }

/* settings */
body.page-vc .vc-options { display: grid; gap: 24px; }
body.page-vc .vc-options fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
body.page-vc .vc-presets { display: grid; }

/* each setting is a radio row: dot, name and one line, the estimate on the right */
body.page-vc .vc-preset {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  min-height: 64px; padding: 12px 0; cursor: pointer;
}
body.page-vc .vc-preset + .vc-preset { border-top: 1px solid var(--vc-line); }
body.page-vc .vc-preset input {
  width: 22px; height: 22px; margin: 0; padding: 3px; border: 2px solid var(--vc-muted); border-radius: 50%;
  appearance: none; -webkit-appearance: none; background: transparent; background-clip: content-box; cursor: pointer;
}
body.page-vc .vc-preset:hover input { border-color: var(--vc-ink); }
body.page-vc .vc-preset input:checked { border-color: var(--vc-accent); background-color: var(--vc-accent); }
body.page-vc .vc-preset input:focus-visible { outline: 2px solid var(--vc-accent); outline-offset: 2px; }
body.page-vc .vc-preset-text { display: grid; gap: 2px; }
body.page-vc .vc-preset strong { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: 0; color: var(--vc-ink); }
body.page-vc .vc-preset small { font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .vc-preset-est { font-size: 15px; font-weight: 500; line-height: 21px; color: var(--vc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* target size: the field, then quick sizes */
body.page-vc .vc-target { display: grid; gap: 0; }
body.page-vc .vc-target-field { display: flex; align-items: center; gap: 12px; }
body.page-vc .vc-target-field .tool-input { width: 128px; font-variant-numeric: tabular-nums; }
body.page-vc .vc-target-unit { font-size: 17px; font-weight: 700; color: var(--vc-ink); }
body.page-vc .vc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
body.page-vc .vc-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 20px;
  border: 1px solid var(--vc-line); border-radius: 999px; background: var(--vc-sunken);
  font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--vc-ink); cursor: pointer;
}
body.page-vc .vc-chip:hover { border-color: var(--vc-ink); }
body.page-vc .vc-chip span { font-weight: 500; color: var(--vc-muted); }
body.page-vc .vc-chip[aria-pressed="true"] { padding: 0 19px; border: 2px solid var(--vc-accent); }

body.page-vc .vc-res .tool-select { display: block; }

/* the estimate, any notes, and the button */
body.page-vc .vc-go-group { display: grid; gap: 16px; }
body.page-vc .vc-estimate { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--vc-ink); font-variant-numeric: tabular-nums; }
body.page-vc .vc-estimate:empty { display: none; }
body.page-vc .vc-notes { display: grid; gap: 8px; list-style: none; }
body.page-vc .vc-notes:empty { display: none; }
body.page-vc .vc-notes li { margin: 0; padding: 0; border: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-warn-ink); }

/* progress: one line, a thin bar, then Cancel */
body.page-vc .vc-progress { display: grid; gap: 12px; }
body.page-vc .vc-progress-row { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.55; color: var(--vc-ink); font-variant-numeric: tabular-nums; }
body.page-vc .vc-pct { font-size: inherit; font-weight: 700; color: var(--vc-ink); }
body.page-vc .vc-eta { font-size: inherit; font-weight: 500; color: var(--vc-muted); }
body.page-vc .vc-eta:not(:empty)::before { content: " · "; }
body.page-vc .vc-bar { height: 6px; border-radius: 3px; background: var(--vc-sunken); box-shadow: none; overflow: hidden; }
body.page-vc .vc-bar-fill {
  display: block; height: 100%; width: 0; border-radius: 3px; background: var(--vc-accent);
  background-image: none; animation: none; transition: width 0.3s ease;
}
@media (prefers-reduced-motion: reduce) { body.page-vc .vc-bar-fill { transition: none; } }
body.page-vc .vc-keep { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .vc-progress .tool-btn { margin-top: 4px; }

/* result: the headline, the details, the preview, then the actions */
body.page-vc .vc-result { display: grid; gap: 16px; }
body.page-vc .vc-headline {
  margin: 0; padding: 0; border: 0; background: none; outline: none;
  font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--vc-ink); font-variant-numeric: tabular-nums;
}
body.page-vc .vc-details { margin: -8px 0 0; font-size: 15px; font-weight: 500; line-height: 1.55; color: var(--vc-muted); }
body.page-vc .vc-preview { display: block; width: 100%; max-height: 62vh; border-radius: 12px; background: #000; }
body.page-vc .vc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* errors */
body.page-vc .vc-error { display: grid; gap: 16px; }
body.page-vc .tool-result.is-error { margin: 0; }

@media (max-width: 600px) {
  body.page-vc .vc-drop { padding: 24px 16px; }
  body.page-vc .tool-select { width: 100%; min-width: 0; }
  body.page-vc .vc-actions .tool-btn { flex: 1 1 auto; }
  body.page-vc .vc-actions #vc-download { flex-basis: 100%; }
  body.page-vc .vc-go-group .tool-btn,
  body.page-vc .vc-unsupported .tool-btn,
  body.page-vc .prose-card .app-try .rail-btn { justify-self: stretch; }
  body.page-vc .prose-card .app-try { grid-template-columns: minmax(0, 1fr); }
  body.page-vc .app-try img { grid-row: auto; margin-bottom: 4px; }
}