/* ImageMunch base styles — design tokens shared with the editor mockup. */
:root {
    color-scheme: light dark;
    --editor-ink: #0b2038;
    /* #71839a measured 3.88:1 on a panel and 3.47:1 on the page background — under
       AA for the 12-13px secondary copy that uses it most. */
    --editor-muted: #5a6e82;
    --editor-line: #dce6ee;
    --editor-soft: #f5f8fb;
    --editor-panel: #ffffff;
    --editor-surface: #101e31;
    --editor-surface-2: #162941;
    --editor-accent: #0f9d8c;
    --editor-accent-bright: #19c6b1;
    --editor-blue: #4389ff;
    --editor-warn: #b4472c;
    --editor-shadow: 0 18px 55px rgba(12, 33, 57, .11);
    --img-a: linear-gradient(135deg, #ffb36b, #ff5e7e);
    /* Surfaces. Image stages deliberately stay light in both schemes. */
    --page-bg: #eef3f8;
    --panel-bg: #ffffff;
    --line-strong: #d5e1eb;
    --line-dashed: #b9cadb;
    --badge-bg: rgba(255, 255, 255, .7);
    /* Ink steps, darkest first. */
    --ink-strong: #1c2b39;
    --ink-mid: #33475c;
    --ink-soft: #3d5266;
    /* #0f9d8c is the brand fill; as 12-14px text on white it only reaches 3.38:1,
       so accent-coloured text uses these instead (8.11:1 dark). #0c7d70 was 5.02:1
       on a panel but 4.49:1 on the grey page background, and eyebrows sit there. */
    --accent-text: #0b7a6d;
    --accent-ink: #0b6d61;
    /* The wipe sits on top of the picture, not on the panel, so it cannot follow it. */
    --wipe-line: #ffffff;
    /* Filled buttons: white on #0f9d8c measured 3.38:1, which fails AA at the
       12.5-15px/800 the labels are set in. The fill darkens to #0c7d70 (5.02:1).
       In dark mode the fill goes bright and the label goes near-black instead. */
    --accent-fill: #0c7d70;
    --accent-fill-hover: #0a6b60;
    --on-accent: #ffffff;
    --on-warn: #ffffff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--page-bg);
    color: var(--editor-ink);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: var(--accent-text); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
/* Off-screen rather than hidden: hidden elements cannot receive focus. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 0 0 10px 10px; background: var(--panel-bg); color: var(--accent-text); font-size: 13px; font-weight: 800; text-decoration: none; box-shadow: var(--editor-shadow); }
.skip-link:focus { top: 0; }
#main:focus { outline: none; }
#main:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: -2px; }

/* header */
.site-header { background: var(--editor-surface); position: sticky; top: 0; z-index: 40; }
.site-header-inner { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 26px; }
.brand-lockup { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-wordmark { font-size: 16px; letter-spacing: -.02em; }
.brand-wordmark strong { color: #fff; }
.brand-wordmark span { color: var(--editor-accent-bright); }
.site-nav { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.site-nav a { color: #b8c9db; text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 11px; border-radius: 9px; }
.site-nav a:hover, .site-nav a.is-active { color: #fff; background: var(--editor-surface-2); }

/* footer */
.site-footer { margin-top: 70px; background: var(--editor-surface); color: #94a9bf; }
.site-footer-inner { max-width: 1240px; margin: 0 auto; padding: 28px 20px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; font-size: 13px; }
.footer-brand { margin: 0 0 4px; color: #d7e3ee; font-weight: 700; }
.footer-copy { margin: 0; font-size: 12px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-nav a { color: #94a9bf; text-decoration: none; }
.footer-nav a:hover { color: #fff; }
.footer-tools { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px 18px; padding-bottom: 18px; margin-bottom: 20px; border-bottom: 1px solid rgba(148, 169, 191, .22); }
.footer-tools a { color: #b8c9db; text-decoration: none; font-weight: 600; }
.footer-tools a:hover { color: #fff; }

/* home */
.home-hero, .tool-page, .static-page, .image-editor-page { max-width: 1240px; margin: 0 auto; }
.home-hero { padding: clamp(38px, 7vw, 84px) 20px 30px; text-align: center; }
.home-hero h1 { font-size: clamp(28px, 4.6vw, 48px); letter-spacing: -.045em; line-height: 1.08; margin: 12px auto 14px; max-width: 820px; }
.hero-eyebrow, .tool-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--editor-accent-bright); box-shadow: 0 0 0 4px rgba(25, 198, 177, .12); }
.hero-lead { color: var(--editor-muted); max-width: 680px; margin: 0 auto 26px; font-size: 16px; }
.hero-cta { display: inline-block; padding: 13px 26px; border-radius: 12px; background: var(--accent-fill); color: var(--on-accent) !important; font-weight: 800; text-decoration: none; font-size: 15px; }
.hero-cta:hover { background: var(--accent-fill-hover); }
.home-section { padding: 26px 20px;margin: 0 auto;max-width: 1440px; }
.home-section h2 { font-size: clamp(21px, 2.8vw, 30px); letter-spacing: -.04em; margin: 0 0 18px; }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tool-card { display: block; padding: 22px; border: 1px solid var(--editor-line); border-radius: 16px; background: var(--panel-bg); text-decoration: none; color: var(--editor-ink); transition: box-shadow .18s ease, transform .18s ease; }
.tool-card:hover { box-shadow: var(--editor-shadow); transform: translateY(-2px); }
.tool-card strong { display: block; margin: 12px 0 5px; font-size: 16px; }
.tool-card > span:last-child { display: block; color: var(--editor-muted); font-size: 13px; line-height: 1.55; }
.tool-card-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: rgba(15, 157, 140, .1); color: var(--accent-text); }
.tool-card-icon svg { width: 22px; height: 22px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin: 0; }
.hero-alt { font-size: 14.5px; font-weight: 800; color: var(--accent-text); text-decoration: none; border-bottom: 2px solid rgba(15, 157, 140, .3); padding-bottom: 1px; }
.hero-alt:hover { border-bottom-color: var(--editor-accent); }
/* The site's promise is that files stay local, so the two pages that are not
   local say so on the card instead of leaving it to the blurb. */
.tool-card-chip { display: inline-block; margin: 0 0 7px; padding: 3px 9px; border-radius: 999px; background: var(--editor-soft); color: var(--editor-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.category-card, .category-tool-card { display: flex; flex-direction: column; gap: 7px; padding: 18px 20px; border: 1px solid var(--editor-line); border-radius: 15px; background: var(--panel-bg); color: var(--editor-ink); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.category-card:hover, .category-tool-card:hover { border-color: var(--editor-accent); box-shadow: var(--editor-shadow); transform: translateY(-2px); }
.category-card strong, .category-tool-card strong { color: var(--accent-text); font-size: 15px; }
.category-card span, .category-tool-card span { color: var(--editor-muted); font-size: 13px; line-height: 1.55; }
.category-page { max-width: 1040px; margin: 0 auto; padding: 24px 20px 42px; }
.category-hero { max-width: 820px; padding: 22px 0 20px; }
.category-hero h1 { margin: 10px 0 14px; font-size: clamp(28px, 4.5vw, 46px); letter-spacing: -.045em; line-height: 1.08; }
.category-hero > p:not(.tool-eyebrow):not(.category-meta) { margin: 0; color: var(--ink-mid); font-size: 16px; line-height: 1.65; }
.category-meta { margin: 14px 0 0; color: var(--editor-muted); font-size: 12.5px; font-weight: 700; }
.category-section { margin-top: 28px; }
.category-section h2 { margin: 0 0 15px; font-size: 22px; letter-spacing: -.035em; }
.category-tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.category-next { max-width: 860px; }
.guide-page { max-width: 1040px; margin: 0 auto; padding: 24px 20px 42px; }
.guide-hero, .guide-article-head { max-width: 820px; padding: 22px 0 20px; }
.guide-hero h1, .guide-article-head h1 { margin: 10px 0 14px; font-size: clamp(28px, 4.5vw, 46px); letter-spacing: -.045em; line-height: 1.08; }
.guide-hero > p:not(.tool-eyebrow), .guide-lede { margin: 0; color: var(--ink-mid); font-size: 16px; line-height: 1.65; }
.guide-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.guide-card { display: flex; flex-direction: column; gap: 8px; min-height: 190px; padding: 20px; border: 1px solid var(--editor-line); border-radius: 16px; background: var(--panel-bg); color: var(--editor-ink); text-decoration: none; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.guide-card:hover { border-color: var(--editor-accent); box-shadow: var(--editor-shadow); transform: translateY(-2px); }
.guide-card strong { color: var(--accent-text); font-size: 16px; line-height: 1.35; }
.guide-card span { color: var(--editor-muted); font-size: 13.5px; line-height: 1.6; }
.guide-card em { margin-top: auto; color: var(--accent-text); font-size: 12.5px; font-style: normal; font-weight: 800; }
.guide-list-section { margin-top: 28px; }
.guide-list-section h2 { margin: 0 0 15px; font-size: 22px; letter-spacing: -.035em; }
.guide-updated { margin: 14px 0 0; color: var(--editor-muted); font-size: 12.5px; font-weight: 700; }
.guide-sample { max-width: 900px; margin: 14px 0 34px; padding: 10px; border: 1px solid var(--editor-line); border-radius: 16px; background: var(--panel-bg); }
.guide-sample img { display: block; width: 100%; height: auto; border-radius: 10px; }
.guide-sample figcaption { padding: 10px 6px 3px; color: var(--editor-muted); font-size: 12.5px; line-height: 1.55; }
.guide-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 900px; margin: 0 0 34px; }
.guide-compare figure { margin: 0; padding: 10px; border: 1px solid var(--editor-line); border-radius: 14px; background: var(--panel-bg); }
.guide-compare img { display: block; width: 100%; height: auto; border-radius: 8px; }
.guide-compare figcaption { padding: 9px 3px 1px; color: var(--editor-muted); font-size: 12px; font-weight: 700; }
.guide-article-body { max-width: 820px; }
.guide-article-body section { margin-top: 30px; }
.guide-article-body h2 { margin: 0 0 8px; font-size: 22px; letter-spacing: -.035em; }
.guide-article-body p { margin: 0; color: var(--ink-soft); font-size: 15px; line-height: 1.75; }
.guide-checklist { padding: 20px 22px; border: 1px solid var(--editor-line); border-radius: 16px; background: var(--editor-soft); }
.guide-checklist ul { margin: 0; padding-left: 21px; color: var(--ink-soft); font-size: 14.5px; }
.guide-checklist li + li { margin-top: 6px; }
.guide-cta { padding: 22px; border: 1px solid rgba(15, 157, 140, .25); border-radius: 16px; background: rgba(15, 157, 140, .07); }
.guide-cta .hero-cta { margin-top: 16px; }
/* Kept more specific than the shared chip-rail rule further down. */
.home-section .directory-jump { margin: 0 0 26px; }
/* Anchored headings on this page sit under the sticky header without this. */
.home-section [id] { scroll-margin-top: 84px; }
.directory-count { margin-left: 7px; color: var(--editor-muted); font-size: 12.5px; font-weight: 700; }
.promise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.promise-grid article { padding: 22px; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--editor-line); }
.promise-grid h3 { margin: 0 0 8px; font-size: 16px; }
.promise-grid p { margin: 0; color: var(--editor-muted); font-size: 13.5px; }

/* visible FAQ (plan §4: never collapsed) */
.faq-visible h3 { margin: 22px 0 6px; font-size: 15.5px; }
.faq-visible p { margin: 0; color: var(--editor-muted); font-size: 14px; max-width: 860px; }

/* tool page */
.tool-page { padding: clamp(24px, 4vw, 24px) 20px 30px; }
.tool-crumbs { max-width: 860px; margin-bottom: 6px; }
.tool-crumbs ol { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--editor-muted); }
.tool-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--editor-muted); }
.tool-crumbs a { color: var(--editor-muted); text-decoration: none; font-weight: 600; }
.tool-crumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.tool-crumbs [aria-current="page"] { color: var(--ink-mid); font-weight: 700; }
.directory-lead { max-width: 720px; margin: -6px 0 20px; color: var(--editor-muted); font-size: 14px; }
.directory-group { margin: 26px 0 10px; font-size: 15px; letter-spacing: -.02em; color: var(--ink-mid); }
.directory-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px 22px; }
.directory-list li { padding: 9px 0; border-top: 1px solid var(--editor-line); }
.directory-list a { display: block; font-weight: 700; color: var(--accent-text); text-decoration: none; font-size: 14px; }
.directory-list a:hover { text-decoration: underline; }
.directory-list span { display: block; margin-top: 3px; color: var(--editor-muted); font-size: 12.5px; line-height: 1.5; }
.tool-intro { max-width: 860px; margin-bottom: 20px; }
.tool-intro h1 { font-size: clamp(26px, 4vw, 42px); letter-spacing: -.045em; line-height: 1.08; margin: 10px 0 14px; }
/* Was clamped to three lines with overflow hidden and no expander, which cut
   the answer-first sentence mid-word for the reader. */
.tool-answer-first { max-width: 78ch; margin: 0; color: var(--ink-mid); font-size: 16px; line-height: 1.6; }
.tool-limits { display: inline-block; margin-top: 8px; padding: 8px 13px; border: 1px solid var(--editor-line); border-radius: 999px; background: var(--panel-bg); color: var(--editor-muted); font-size: 12px; font-weight: 700; }
.tool-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 10px 0 0; color: var(--editor-muted); font-size: 12.5px; }
.tool-byline > :not(:last-child)::after { content: '·'; margin-left: 10px; color: var(--editor-muted); }
.tool-byline time { font-variant-numeric: tabular-nums; }
.tool-byline a { color: var(--accent-text); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(15, 157, 140, .3); }
.tool-byline a:hover { border-bottom-color: var(--editor-accent); }
.tool-trust { max-width: 860px; margin-top: 16px; }
.tool-trust .tool-limits { margin-top: 0; }
.tool-workbench { border: 1px solid var(--line-strong); border-radius: 18px; background: var(--panel-bg); box-shadow: var(--editor-shadow); padding: 26px; }
.tool-workbench h2 { margin: 0 0 6px; font-size: 21px; letter-spacing: -.03em; }
.wb-summary { margin: 0 0 18px; color: var(--editor-muted); font-size: 14px; }
.wb-dropzone { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 40px 20px; border: 2px dashed var(--line-dashed); border-radius: 14px; background: var(--editor-soft); cursor: pointer; text-align: center; }
.wb-dropzone:hover, .wb-dropzone.is-drag { border-color: var(--editor-accent); background: rgba(15, 157, 140, .05); }
.wb-dropzone svg { width: 30px; height: 30px; color: var(--accent-text); }
.wb-dropzone strong { font-size: 15px; }
.wb-dropzone span { color: var(--editor-muted); font-size: 12.5px; }
.wb-controls { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0 6px; }
.wb-remembered { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 18px 0 0; padding: 10px 13px; border: 1px solid var(--editor-line); border-left: 3px solid var(--editor-accent); border-radius: 10px; background: var(--editor-soft); color: var(--ink-soft); font-size: 12.5px; }
.wb-remembered[hidden] { display: none; }
.wb-remembered button { padding: 0; border: 0; background: none; color: var(--accent-text); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.wb-remembered button:hover { color: var(--accent-ink); }
.wb-field { display: flex; flex-direction: column; gap: 6px; min-width: 210px; font-size: 12.5px; font-weight: 700; }
.wb-field span { display: flex; justify-content: space-between; gap: 12px; }
.wb-field output { color: var(--accent-text); }
.wb-field input[type=range] { accent-color: var(--editor-accent); }
.wb-field select { padding: 8px 10px; border: 1px solid var(--editor-line); border-radius: 9px; font: inherit; font-size: 13px; background: var(--panel-bg); }
.wb-cta { display: block; width: 100%; margin-top: 16px; padding: 14px; border: 0; border-radius: 12px; background: var(--accent-fill); color: var(--on-accent); font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; }
.wb-cta:hover { background: var(--accent-fill-hover); }
.wb-cta:disabled { opacity: .6; cursor: default; }
.wb-note { margin: 12px 0 0; color: var(--editor-muted); font-size: 12px; text-align: center; }
/* The number a size decision is made on, measured by the real engine rather than guessed. */
.wb-estimate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--editor-line); border-radius: 12px; background: rgba(15, 157, 140, .05); }
.wb-estimate-label { color: var(--editor-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.wb-estimate-value { color: var(--accent-text); font-size: 17px; font-weight: 800; }
.wb-estimate-note { color: var(--editor-muted); font-size: 12.5px; font-weight: 500; }
.wb-estimate.is-busy .wb-estimate-value { color: var(--editor-muted); font-size: 13px; font-weight: 600; }
/* The figure from the settings the visitor just left, dimmed until the new one lands. */
.wb-estimate.is-stale .wb-estimate-value, .wb-estimate.is-stale .wb-estimate-note { opacity: .45; }
.wb-example { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--editor-accent); background: rgba(15, 157, 140, .06); color: var(--accent-ink); border-radius: 0 10px 10px 0; font-size: 13px; }
.tool-section { max-width: 860px; margin-top: 40px; }
.tool-section h2 { font-size: 21px; letter-spacing: -.03em; margin: 0 0 12px; }
.uses-list { padding-left: 20px; margin: 0; color: var(--editor-muted); font-size: 14.5px; }
.uses-list li { margin-bottom: 6px; }
.tool-body-copy h2 { margin-top: 26px; }
.tool-body-copy p { color: var(--ink-soft); font-size: 14.5px; }
.tool-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 48px; padding: 20px 22px; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--editor-line); }
.tool-related strong { font-size: 13px; margin-right: 4px; }
.tool-related a { padding: 8px 14px; border: 1px solid var(--editor-line); border-radius: 999px; color: var(--accent-text); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.tool-related a:hover { border-color: var(--editor-accent); background: rgba(15, 157, 140, .06); }

/* ---- static pages: about, privacy, terms, open-source, 404 ---- */
.static-page { padding: 42px 20px 34px; max-width: 820px; }
.static-head { padding-bottom: 22px; border-bottom: 1px solid var(--line-strong); }
.static-eyebrow { margin: 0; color: var(--accent-text); font-size: 12px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.static-head h1 { margin: 10px 0 12px; font-size: clamp(28px, 4.2vw, 40px); letter-spacing: -.045em; line-height: 1.1; }
.static-lede { margin: 0; max-width: 68ch; color: var(--ink-mid); font-size: 16px; }
.static-note { margin: 14px 0 0; color: var(--editor-muted); font-size: 12.5px; }
.static-note code { padding: 3px 7px; border: 1px solid var(--editor-line); border-radius: 6px; background: var(--editor-soft); color: var(--ink-strong); font-size: 12px; overflow-wrap: anywhere; }
.static-page h2 { margin: 34px 0 8px; font-size: 20px; letter-spacing: -.03em; }
/* The header is sticky, so a bare #anchor jump buries the heading it names. */
.static-page [id] { scroll-margin-top: 84px; }
.static-page p { color: var(--ink-soft); font-size: 14.5px; max-width: 76ch; }
.static-toc, .directory-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 22px 0 0; padding: 13px 14px; border: 1px solid var(--editor-line); border-radius: 14px; background: var(--panel-bg); }
.static-toc strong, .directory-jump strong { width: 100%; color: var(--editor-muted); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.static-toc a, .directory-jump a { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--editor-line); border-radius: 999px; color: var(--accent-text); font-size: 12.5px; font-weight: 700; text-decoration: none; }
.static-toc a:hover, .directory-jump a:hover { border-color: var(--editor-accent); background: rgba(15, 157, 140, .06); }
.static-toc span, .directory-jump span { margin-left: 5px; color: var(--editor-muted); font-weight: 800; }
.static-related { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 38px; padding: 18px 20px; border: 1px solid var(--editor-line); border-radius: 16px; background: var(--panel-bg); }
.static-related strong { font-size: 13px; }
.static-related a { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid var(--editor-line); border-radius: 999px; color: var(--accent-text); font-size: 12.5px; font-weight: 800; text-decoration: none; }
.static-related a:hover { border-color: var(--editor-accent); background: rgba(15, 157, 140, .06); }

/* Licence facts read as a table: the label is scanned, the value is read. */
.oss-facts { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.oss-facts li { display: grid; grid-template-columns: minmax(120px, 27%) 1fr; gap: 12px; padding: 11px 14px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); }
.oss-facts li > span:first-child { color: var(--ink-strong); font-size: 12.5px; font-weight: 800; }
.oss-facts li > span:last-child { color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; }

.notfound-page .static-head { border-bottom: 0; padding-bottom: 4px; }
.notfound-grid { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.notfound-grid a { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); color: var(--ink-strong); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.notfound-grid a:hover { border-color: var(--editor-accent); color: var(--accent-text); }
.notfound-chip { color: var(--editor-muted); font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 28px 0 0; }
.notfound-actions a:not(.hero-cta) { font-weight: 700; }
.notfound-report { margin: 6px 0 0; color: var(--editor-muted); font-size: 13px; }

.about-engines { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.about-engines li { padding: 11px 14px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); color: var(--ink-soft); font-size: 13.5px; line-height: 1.5; }
.about-engines strong { color: var(--ink-strong); }
.about-engines span { margin-left: 6px; color: var(--editor-muted); font-size: 12px; font-weight: 700; }

/* Below this the nine links could not share a row with the wordmark, and the
   wrap left two then three ragged centred rows in a sticky header. */
@media (max-width: 880px) {
    .site-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 14px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
    .site-nav::-webkit-scrollbar { display: none; }
    .site-nav a { flex: none; }
}

@media (max-width: 720px) {
    .site-header-inner { flex-direction: column; align-items: stretch; gap: 10px; }
    /* centring a scroll container pushes the first links out of reach */
    .site-nav { margin-left: 0; justify-content: flex-start; min-width: 0; }
}

/* ---- workbench operation controls + results (M1) ---- */
.wb-hidden { display: none !important; }
.wb-dropzone.is-over { border-color: var(--editor-accent); background: rgba(15, 157, 140, .05); }
.wb-dropzone.is-focused { border-color: var(--editor-accent); box-shadow: 0 0 0 3px rgba(15, 157, 140, .22); outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.wb-dropzone:focus-within { border-color: var(--editor-accent); box-shadow: 0 0 0 3px rgba(15, 157, 140, .22); outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.wb-note.is-warn { color: var(--editor-warn); font-weight: 600; }
.wb-result-head h3:focus { outline: none; }
.wb-result-head h3:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 3px; }
.wb-hint { flex-basis: 100%; margin: 2px 0 0; color: var(--editor-muted); font-size: 12.5px; font-weight: 500; }
.wb-field-wide { flex-basis: 100%; }
.wb-field input[type=number], .wb-field input[type=text] { padding: 8px 10px; border: 1px solid var(--editor-line); border-radius: 9px; font: inherit; font-size: 13px; }
.wb-field input[type=color] { width: 64px; height: 34px; padding: 2px; border: 1px solid var(--editor-line); border-radius: 9px; background: var(--panel-bg); }
.wb-field-check { flex-direction: row; align-items: center; gap: 8px; font-weight: 600; }
.wb-field-static { justify-content: center; padding: 8px 10px; border: 1px dashed var(--editor-line); border-radius: 9px; background: rgba(15, 157, 140, .05); }
.wb-field-static strong { color: var(--accent-text); font-size: 13px; }
.wb-field-check input { width: 16px; height: 16px; accent-color: var(--editor-accent); }
.wb-chips, .wb-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wb-chips button, .wb-presets button { padding: 7px 14px; border: 1px solid var(--editor-line); border-radius: 999px; background: var(--panel-bg); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.wb-chips button.is-active, .wb-presets button.is-active { border-color: var(--accent-fill); background: var(--accent-fill); color: var(--on-accent); }
/* Unpressed chips otherwise look like static text and give no sign they take a click. */
.wb-chips button:hover:not(.is-active), .wb-presets button:hover:not(.is-active) { border-color: var(--editor-accent); background: rgba(15, 157, 140, .06); color: var(--accent-text); }
.wb-file-list { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 10px; color: var(--editor-muted); font-size: 12.5px; list-style: none; }
.wb-file-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); }
.wb-file-preview { display: grid; place-items: center; width: 52px; height: 52px; padding: 0; overflow: hidden; border: 1px solid var(--editor-line); border-radius: 9px; background: var(--editor-soft); color: var(--editor-muted); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.wb-file-preview:hover { border-color: var(--editor-accent); box-shadow: 0 0 0 3px rgba(15, 157, 140, .1); }
.wb-file-preview:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.wb-file-preview img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wb-file-preview.is-unavailable { border-style: dashed; }
.wb-file-meta { display: grid; gap: 2px; min-width: 0; }
.wb-file-name { color: var(--editor-ink); overflow-wrap: anywhere; }
.wb-file-state { overflow-wrap: anywhere; }
.wb-file-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.wb-queue-hint { margin: 8px 0 0; color: var(--editor-muted); font-size: 12px; font-weight: 600; }
.wb-queue-hint[hidden] { display: none; }
.wb-file.is-working .wb-file-name { font-weight: 700; }
.wb-file.is-working .wb-file-state { color: var(--editor-blue); }
.wb-file.is-done .wb-file-state { color: var(--accent-text); }
.wb-file.is-failed .wb-file-state { color: var(--editor-warn); }
.wb-file-retry { padding: 2px 9px; border: 1px solid var(--editor-warn); border-radius: 999px; background: var(--panel-bg); color: var(--editor-warn); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wb-file-retry:hover { background: var(--editor-warn); color: var(--on-warn); }
.wb-file-drop { padding: 2px 9px; border: 1px solid var(--editor-line); border-radius: 999px; background: var(--panel-bg); color: var(--editor-muted); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; }
.wb-file-drop:hover { border-color: var(--editor-accent); color: var(--accent-text); }
.wb-clear-queue { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--editor-muted); font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.wb-clear-queue:hover { color: var(--accent-text); }
.wb-clear-queue[hidden] { display: none; }
.wb-result { margin-top: 22px; padding: 20px; border: 1px solid var(--editor-line); border-radius: 14px; background: var(--editor-soft); }
.wb-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.wb-result-head h3 { margin: 0; font-size: 16px; }
.wb-result-stats { color: var(--editor-muted); font-size: 12.5px; font-weight: 600; }
.wb-result-preview { margin: 14px 0; max-height: 360px; overflow: hidden; border-radius: 12px; background: var(--panel-bg); display: flex; justify-content: center; }
.wb-result-preview img { max-width: 100%; max-height: 360px; object-fit: contain; }
.wb-result-preview[hidden], .wb-result-text[hidden] { display: none; }
/* ---- before / after wipe ----
   With no source behind it the stage is only a wrapper: the result renders
   exactly as it did before the comparison existed. */
.wb-compare { position: relative; display: flex; justify-content: center; min-width: 0; }
.wb-compare-base, .wb-compare-line, .wb-compare-tag, .wb-compare-slider { display: none; }
.wb-compare[data-compare="on"] .wb-compare-base { display: block; }
.wb-compare[data-compare="on"] .wb-compare-top { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(0 calc(100% - var(--wb-split, 50%)) 0 0); }
.wb-compare[data-compare="on"] .wb-compare-line { display: block; position: absolute; top: 0; bottom: 30px; left: var(--wb-split, 50%); width: 2px; margin-left: -1px; background: var(--wipe-line); box-shadow: 0 0 0 1px rgba(11, 23, 42, .4); pointer-events: none; }
.wb-compare[data-compare="on"] .wb-compare-slider { display: block; position: absolute; left: 10px; right: 10px; bottom: 2px; }
.wb-compare[data-compare="on"] .wb-compare-slider input { width: 100%; accent-color: var(--editor-accent); }
.wb-compare[data-compare="on"] .wb-compare-tag { display: block; position: absolute; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(11, 23, 42, .74); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; pointer-events: none; }
.wb-compare-tag-after { left: 8px; }
.wb-compare-tag-before { right: 8px; }
.wb-result-text { margin: 14px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wb-result-text textarea { box-sizing: border-box; width: 100%; min-height: 260px; max-height: 520px; padding: 12px 14px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); color: var(--ink-strong); font: 13px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical; }
.wb-result-text textarea:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.wb-result-list { margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; font-size: 13px; list-style: none; }
.wb-result-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; min-width: 0; padding: 10px 12px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); }
.wb-result-list .wb-result-pick { grid-column: 1; grid-row: 1 / span 2; }
.wb-result-list a { grid-column: 2; font-weight: 700; color: var(--accent-text); overflow-wrap: anywhere; }
.wb-result-list span { grid-column: 2; color: var(--editor-muted); min-width: 0; overflow-wrap: break-word; }
.wb-result-thumb { width: 56px; height: 56px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--editor-line); border-radius: 8px; background: var(--panel-bg); }
.wb-result-list li.wb-result-skipped { display: block; }
.wb-result-skipped { grid-column: 1 / -1; list-style: none; color: var(--editor-muted); font-size: 12.5px; }
.wb-result-skipped strong { font-weight: 700; }
/* The thumbnail is the control that decides which file the large preview shows,
   so it gets a pressed state rather than a hover trick. */
.wb-result-pick { flex: 0 0 auto; line-height: 0; padding: 2px; border: 2px solid transparent; border-radius: 11px; background: none; cursor: pointer; }
.wb-result-pick.is-picked { border-color: var(--editor-accent); background: var(--editor-soft); }
.wb-result-pick:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.wb-result-view { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 14px; }
.wb-result-view[hidden] { display: none; }
.wb-result-view-hint { color: var(--editor-muted); font-size: 12.5px; font-weight: 600; }
.wb-lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(12, 33, 57, .74); }
.wb-lightbox[hidden] { display: none; }
.wb-lightbox-panel { display: flex; flex-direction: column; gap: 10px; width: min(1120px, 100%); max-height: 100%; padding: 14px; border-radius: 16px; background: var(--panel-bg); }
.wb-lightbox-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.wb-lightbox-title { margin: 0; font-size: 15px; }
.wb-lightbox-meta { flex: 1; min-width: 0; color: var(--editor-muted); font-size: 12.5px; font-weight: 700; overflow-wrap: anywhere; }
.wb-lightbox-close { padding: 8px 14px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.wb-lightbox-close:hover { border-color: var(--editor-accent); color: var(--accent-text); }
.wb-lightbox-close:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
/* A checkerboard is the only way to see whether a cutout really kept its alpha. */
.wb-lightbox-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 12px; border-radius: 12px; background-color: #fff; background-image: linear-gradient(45deg, #eef3f7 25%, transparent 25%), linear-gradient(-45deg, #eef3f7 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #eef3f7 75%), linear-gradient(-45deg, transparent 75%, #eef3f7 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
/* No max-width here on purpose: capping it would repeat the preview this replaces. */
.wb-lightbox-scroll img { display: block; max-width: none; }
.wb-lightbox-hint { margin: 0; color: var(--editor-muted); font-size: 12.5px; font-weight: 600; }
.wb-lightbox-open { overflow: hidden; }
.wb-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 14px 0 0; font-size: 13px; }
.wb-next[hidden] { display: none; }
.wb-next strong { color: var(--editor-muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wb-next a { font-weight: 700; color: var(--accent-text); }
.wb-result-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.wb-secondary { padding: 10px 16px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--panel-bg); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
/* The fallback path is real but secondary: it must not read as a competing button. */
.wb-linklike { padding: 10px 4px; border: 0; background: none; color: var(--editor-muted); font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: underline; cursor: pointer; }
.wb-secondary:hover { border-color: var(--editor-accent); color: var(--accent-text); }
.wb-secondary:disabled { opacity: .55; cursor: progress; }
.wb-stage-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

.wb-stage { flex-basis: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border: 1px dashed var(--editor-line); border-radius: 14px; background: var(--editor-soft); }
.wb-stage canvas { max-width: 100%; height: auto; border-radius: 10px; background: var(--panel-bg); box-shadow: 0 8px 24px rgba(12, 33, 57, .12); cursor: crosshair; touch-action: none; }
/* Redact drags out a new box; crop moves a frame that already exists. */
.wb-stage-crop canvas { cursor: grab; }
.wb-stage-hint { margin: 0; max-width: 52ch; color: var(--editor-muted); font-size: 12.5px; font-weight: 600; text-align: center; }

/* cloud generator page */
.ai-workbench { display: flex; flex-wrap: wrap; gap: 18px 22px; align-items: flex-start; }
.ai-workbench > h2, .ai-workbench > .wb-summary { flex-basis: 100%; }
.ai-workbench textarea { box-sizing: border-box; width: 100%; min-height: 104px; padding: 12px 14px; border: 1px solid var(--editor-line); border-radius: 12px; background: var(--panel-bg); color: var(--ink-strong); font: 14px/1.6 inherit; resize: vertical; }
.ai-workbench textarea:focus-visible { outline: 2px solid var(--editor-accent); outline-offset: 2px; }
.ai-count { flex-basis: 100%; margin: -12px 0 0; color: var(--editor-muted); font-size: 12px; font-weight: 600; }
.ai-count output { color: var(--accent-text); }
.ai-examples { flex-basis: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ai-examples > span { color: var(--editor-muted); font-size: 12px; font-weight: 700; }
.ai-examples .wb-chips { margin-top: 0; }
.ai-workbench .wb-cta, .ai-workbench .wb-note, .ai-workbench .wb-result, .ai-workbench .ai-turnstile, .ai-workbench .ai-quota, .ai-workbench .wb-remembered { flex-basis: 100%; }
.ai-quota { margin: 8px 0 0; padding: 9px 12px; border: 1px solid var(--editor-line); border-radius: 10px; background: var(--editor-soft); color: var(--accent-ink); font-size: 12.5px; font-variant-numeric: tabular-nums; text-align: center; }
.ai-quota[hidden] { display: none; }
.ai-turnstile { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border: 1px dashed var(--editor-line); border-radius: 12px; background: var(--editor-soft); }
.ai-turnstile[hidden] { display: none; }

/* ---- per-page specification table ---- */
.wb-spec { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; border: 1px solid var(--editor-line); border-radius: 12px; overflow: hidden; }
.wb-spec caption { caption-side: top; text-align: left; padding: 0 0 8px; color: var(--editor-muted); font-size: 12.5px; font-weight: 600; }
.wb-spec th, .wb-spec td { padding: 10px 14px; border-bottom: 1px solid var(--editor-line); text-align: left; vertical-align: top; }
.wb-spec tr:last-child th, .wb-spec tr:last-child td { border-bottom: 0; }
.wb-spec th { width: 34%; background: var(--editor-soft); color: var(--ink-strong); font-size: 12.5px; font-weight: 800; }
.wb-spec td { color: var(--ink-soft); }
.wb-spec tr:nth-child(even) td { background: rgba(15, 157, 140, .03); }
.wb-flow { max-width: 760px; margin: 0 0 20px; padding: 14px 16px 12px; border: 1px solid var(--editor-line); border-radius: 16px; background: linear-gradient(145deg, var(--panel-bg), var(--editor-soft)); box-shadow: 0 10px 28px rgba(12, 33, 57, .06); }
.wb-flow img { display: block; width: min(100%, 640px); height: auto; margin: 0 auto; border: 0; border-radius: 10px; box-shadow: 0 6px 18px rgba(12, 33, 57, .08); }
.wb-flow figcaption { margin: 10px 2px 0; padding-top: 9px; border-top: 1px solid var(--editor-line); color: var(--editor-muted); font-size: 12.5px; font-weight: 600; }

/* ---- phones: measured at 320 and 390 CSS px ---- */
@media (max-width: 720px) {
    .wb-spec th, .wb-spec td { display: block; width: auto; padding: 8px 12px; }
    .wb-spec th { border-bottom: 0; padding-bottom: 0; }
    .wb-spec tr { border-bottom: 1px solid var(--editor-line); }
    .tool-workbench { padding: 16px; border-radius: 14px; }
    .wb-dropzone { padding: 26px 14px; }
    .wb-controls { gap: 14px; }
    .wb-field { width: 100%; min-width: 0; }
    .wb-field input[type=number], .wb-field input[type=text], .wb-field select { font-size: 16px; }
    .wb-result { padding: 14px; }
    .wb-result-list { grid-template-columns: minmax(0, 1fr); }
    .wb-file-list { grid-template-columns: minmax(0, 1fr); }
    .wb-result-preview img { max-height: 260px; }
    .wb-chips button, .wb-presets button, .wb-secondary, .tool-related a { min-height: 44px; }
    /* Dropdowns and typed boxes were the last controls under the 44 px target. */
    .wb-field select, .wb-field input[type=file], .wb-field input[type=number], .wb-field input[type=text] { min-height: 44px; }
    /* Sliders and swatches kept the browser's default 16-34px box while every
       button around them grew to 44px, so the hardest controls to hit were the
       smallest ones. */
    .wb-field input[type=range] { min-height: 44px; margin: -6px 0; }
    .wb-field input[type=color] { width: 78px; height: 44px; }
    .wb-remembered button { min-height: 44px; }
    .wb-file-drop, .wb-file-retry { min-height: 44px; }
    /* The raw checkbox is 13x16, so the row that wraps it has to carry the target. */
    .wb-field-check { min-height: 44px; align-items: center; }
    /* A whole failure sentence should not stack one queue row five lines high. */
    .wb-file-state { flex: 1 1 100%; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
    .wb-flow { max-width: 100%; padding: 10px; }
    .wb-flow img { width: 100%; max-width: 640px; }
    .guide-compare { grid-template-columns: minmax(0, 1fr); }
    .static-page { padding-top: 30px; }
    .static-page h2 { margin-top: 28px; }
    /* The value is the reason the row exists; it should not be squeezed into 73%. */
    .oss-facts li { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .static-toc a, .static-related a, .directory-jump a { min-height: 44px; }
    .directory-list a { padding: 6px 0; }
    .notfound-actions .hero-cta { width: 100%; text-align: center; }
}

/* A finished batch should not yank the page sideways for someone who asked for
   less motion; the script reads the same preference before it smooth-scrolls. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---- tablets: the band between the phone rules and a laptop ----
   721-1100px used to inherit the desktop sheet, where every .wb-field keeps a
   210px floor and nothing grows, so a control bar of three fields rendered as
   two columns plus a stub. Stretching them fills the row evenly, and tablets
   are touch devices, so the phone target sizes apply here too. */
@media (min-width: 721px) and (max-width: 1100px) {
    .site-header-inner { gap: 14px; padding: 10px 16px; }
    .site-nav a { padding: 8px 9px; font-size: 12.5px; }
    .tool-page { padding-left: 16px; padding-right: 16px; }
    .tool-workbench { padding: 20px; }
    .wb-controls { gap: 16px 18px; }
    .wb-field { flex: 1 1 220px; min-width: 0; }
    .wb-field input[type=range] { width: 100%; }
    .wb-result-preview, .wb-result-preview img { max-height: 420px; }
    .wb-chips button, .wb-presets button, .wb-secondary, .wb-lightbox-close, .tool-related a { min-height: 44px; }
    .wb-field select, .wb-field input[type=file], .wb-field input[type=number], .wb-field input[type=text] { min-height: 44px; }
    .wb-field input[type=range] { min-height: 44px; margin: -6px 0; }
    .wb-field input[type=color] { height: 44px; }
    .wb-field-check { min-height: 44px; align-items: center; }
    .wb-file-drop, .wb-file-retry { min-height: 34px; }
    .wb-lightbox { padding: 12px; }
}

/* ---- dark scheme ----
   Almost all of it is tokens, because that is the only way the palette stays
   in one place. The exceptions are the alpha tints, which were all picked
   against white and simply disappear on a dark panel. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --editor-ink: #e6eef7;
        --editor-muted: #9db2c7;
        --editor-line: #27384a;
        --editor-soft: #1a2836;
        --editor-panel: #16222e;
        --editor-surface: #0c1520;
        --editor-surface-2: #17273a;
        --editor-blue: #6ea8ff;
        --editor-warn: #e2795c;
        --editor-shadow: 0 18px 55px rgba(0, 0, 0, .5);
        --page-bg: #0e1720;
        --panel-bg: #16222e;
        --line-strong: #2b3d4f;
        --line-dashed: #40566b;
        --badge-bg: rgba(22, 34, 46, .72);
        --ink-strong: #e6eef7;
        --ink-mid: #cddae7;
        --ink-soft: #c3d2e0;
        --accent-text: #35cdb6;
        --accent-ink: #7fe3d3;
        --wipe-line: #eaf1f7;
        --accent-fill: #35cdb6;
        --accent-fill-hover: #4adbc4;
        --on-accent: #07131c;
        --on-warn: #16222e;
    }
    .tool-card-icon { background: rgba(46, 201, 180, .16); }
    .wb-field-static { background: rgba(46, 201, 180, .12); }
    .wb-dropzone:hover, .wb-dropzone.is-drag, .wb-dropzone.is-over { background: rgba(46, 201, 180, .1); }
    .wb-example { background: rgba(46, 201, 180, .12); }
    .tool-related a:hover { background: rgba(46, 201, 180, .12); }
    .wb-spec tr:nth-child(even) td { background: rgba(46, 201, 180, .07); }
    /* The full-size sheet stays light on purpose: judging edges, banding and text
       anti-aliasing needs a neutral ground, and a white PNG on near-black proves
       nothing about either. */
    .wb-lightbox-scroll { background-color: #fff; }
}