.guide-prose .photo-comparison { margin:16px 0;scroll-margin-top:88px; }
.guide-prose .jpg-png-photo { margin:16px 0; }
.guide-prose .photo-comparison + h2 { margin-top:24px; }
.photo-view,.photo-format { margin:0;min-height:32px;padding:5px 10px;border:1px solid var(--border);border-radius:6px;background:var(--bg);color:var(--ink);font:inherit;font-size:.8125rem;cursor:pointer; }
.photo-view[hidden],.photo-format[hidden] { display:none; }
.photo-view:hover,.photo-view[aria-pressed="true"] { background:var(--bg-soft,#f3f3f3); }
.photo-stage { --photo-split:50%;position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:10px;background:var(--border);isolation:isolate; }
.photo-stage img { display:block;position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;border:0;border-radius:0;margin:0; }
.photo-stage[data-detail="true"] img { inset:auto;left:var(--photo-position-x,50%);top:var(--photo-position-y,50%);width:var(--photo-detail-width);height:var(--photo-detail-height);transform:translate(var(--photo-focus-x),var(--photo-focus-y)); }
.photo-stage[aria-busy="true"] { opacity:.65; }
.photo-overlay { position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--photo-split)) 0 0); }
.photo-side { position:absolute;top:12px;z-index:2;max-width:43%;padding:5px 9px;border-radius:5px;background:rgba(0,0,0,.7);color:white;font-size:.75rem;line-height:1.35;pointer-events:none; }
.photo-side-before { left:12px; }.photo-side-after { right:12px; }
.photo-divider { position:absolute;inset-block:0;left:var(--photo-split);width:2px;background:white;box-shadow:0 0 3px #333;pointer-events:none; }
.photo-stage[data-ready] .photo-divider::after { content:'‹ ›';position:absolute;top:50%;left:50%;display:grid;place-items:center;width:40px;height:40px;transform:translate(-50%,-50%);border:1px solid #ddd;border-radius:50%;background:#fff;color:#161616;font-size:24px;line-height:1;box-shadow:0 2px 10px #0003; }
.photo-stage .photo-range { position:absolute;inset:0;z-index:3;width:100%;height:100%;max-width:none;min-height:0;margin:0;padding:0;border:0;opacity:0;cursor:ew-resize;touch-action:pan-y; }
.photo-stage:has(.photo-range:focus-visible) { outline:3px solid var(--ink);outline-offset:3px; }
.photo-caption-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:8px; }
.photo-metadata { display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.8125rem; }
.photo-controls { display:flex;align-items:center;gap:8px; }
.guide-prose .photo-note { margin:6px 0 0;color:var(--ink-soft);font-size:.8125rem;line-height:1.6; }
.guide-prose .photo-status { margin:6px 0 0;font-size:.8125rem; }
.guide-prose .png-transparency-example { margin:16px 0; }
.png-alpha-grid,.png-alpha-pair { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.png-alpha-light,.png-alpha-dark { min-width:0;padding:12px;border:1px solid var(--border);border-radius:8px; }
.png-alpha-light { background:#fff;color:#161616; }.png-alpha-dark { background:#242424;color:#f7f7f7; }
.guide-prose .png-alpha-grid p { margin:0 0 8px;font-size:.8125rem;color:inherit; }
.png-alpha-pair { gap:8px;text-align:center;font-size:.75rem; }
.guide-prose .png-alpha-pair img { display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;border-radius:0;margin:0 0 4px; }
.png-transparency-example figcaption { margin-top:8px;font-size:.8125rem;color:var(--ink-soft); }
@media (max-width:480px) { .png-alpha-grid { grid-template-columns:1fr; } }
.home-partner { padding: 24px 0; scroll-margin-top: 100px; }
.home-partner[hidden] { display: none; }
.home-partner .wrap { max-width: 1040px; }
.home-partner-banner { position: relative; display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 185px); gap: 18px; align-items: center; justify-items: center; max-width: 760px; margin-inline: auto; padding: 32px 22px 22px; background: #faf7fc; border: 1px solid #e8dfed; border-radius: 16px; color: var(--ink); text-decoration: none; }
html.dark .home-partner-banner { background: #211b26; border-color: #45364e; }
.home-partner-media { display: flex; align-items: center; justify-content: center; min-width: 0; }
.home-partner-image { display: block; width: auto; max-width: 140px; max-height: 130px; height: auto; object-fit: contain; border: 0; }
.home-partner-label { position: absolute; top: 10px; right: 14px; color: var(--ink-faint); font-size: .625rem; font-weight: 500; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
.home-partner-progress { position: absolute; inset-inline: 14px; bottom: 0; height: 1px; overflow: hidden; border-radius: 999px; background: var(--border); pointer-events: none; }
.home-partner-progress > span { display: block; height: 100%; background: currentColor; opacity: .5; transform-origin: left; }
.home-partner-copy { min-width: 0; text-align: left; }
.home-partner-title { margin: 0 0 6px; font-family: var(--font-display); font-size: 1rem; font-weight: 700; line-height: 1.5; color: var(--ink); }
.home-partner-description { margin: 0; font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.home-partner-button { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; padding: 10px 18px; min-height: 44px; border-radius: 999px; background: #542350; color: #fff; font-size: .875rem; font-weight: 650; line-height: 1.5; text-align: center; transition: background-color .15s ease; }
.home-partner-banner:hover .home-partner-button { background: #71346c; }
.home-partner-banner:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.guide-prose .home-partner { margin-top: 32px; padding-top: 0; }
.guide-prose .home-partner + h2 { margin-top: 16px; }
.guide-prose .home-partner > .wrap { padding: 0; width: 100%; }
.guide-prose .home-partner-title { margin: 0 0 6px; }
.guide-prose .home-partner-description { margin: 0; }
@media (max-width: 800px) {
    .home-partner-banner { grid-template-columns: 140px minmax(0, 1fr); }
    .home-partner-media { grid-row: 1 / span 2; }
    .home-partner-button { grid-column: 2; }
}
@media (max-width: 600px) {
    .home-partner-banner { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 32px 20px 20px; }
    .home-partner-media { grid-row: auto; width: 100%; }
    .home-partner-copy { text-align: center; }
    .home-partner-button { grid-column: auto; }
    .home-partner-image { width: 192px; max-width: 100%; max-height: 120px; height: auto; }
}

.home-partner-banner--todoist { background: #fff7f6; border-color: #f0d9d5; }
html.dark .home-partner-banner--todoist { background: #291d1b; border-color: #55352f; }
.home-partner-banner--todoist .home-partner-image { width: 72px; height: 72px; }
.home-partner-banner--todoist .home-partner-button { background: #c9362b; }
.home-partner-banner--todoist:hover .home-partner-button { background: #ad2d23; }

.home-partner-banner--landbot,
html.dark .home-partner-banner--landbot { --ink: #202124; --ink-soft: #55585e; --ink-faint: #73767c; background: linear-gradient(90deg, #fff 67%, #fff1f6 100%); border-color: #e2e5ec; }
.home-partner-banner--landbot .home-partner-image { width: 72px; height: 72px; border-radius: 12px; }
.home-partner-banner--landbot .home-partner-button { background: #343f5f; }
.home-partner-banner--landbot:hover .home-partner-button { background: #25304e; }

:is(.home-partner-banner--sanebox, .home-partner-banner--monday, .home-partner-banner--moosend),
html.dark :is(.home-partner-banner--sanebox, .home-partner-banner--monday, .home-partner-banner--moosend) { --ink: #202124; --ink-soft: #55585e; --ink-faint: #73767c; background: linear-gradient(90deg, #fff 67%, var(--partner-tint) 100%); border-color: #e2e5ec; }
:is(.home-partner-banner--sanebox, .home-partner-banner--monday) .home-partner-image { width: 72px; height: 72px; mix-blend-mode: multiply; }
.home-partner-banner--sanebox { --partner-tint: #edf4ff; }
.home-partner-banner--sanebox .home-partner-button { background: #1b56ba; }
.home-partner-banner--sanebox:hover .home-partner-button { background: #164798; }
.home-partner-banner--monday { --partner-tint: #fff8e1; }
.home-partner-banner--monday .home-partner-button { background: #334acc; }
.home-partner-banner--monday:hover .home-partner-button { background: #293ba3; }
.home-partner-banner--moosend { --partner-tint: #fff4e5; }
.home-partner-banner--moosend .home-partner-image { width: 72px; height: auto; max-height: 72px; }
.home-partner-banner--moosend .home-partner-button { background: #172b7a; }
.home-partner-banner--moosend:hover .home-partner-button { background: #11215f; }

:root {
        --teal: #231E15;
        --teal-dark: #231E15;
        --teal-light: #FFF7CC;
        --green: #231E15;
        --green-dark: #231E15;
        --ink: #202124;
        --ink-soft: #55585E;
        --ink-faint: #73767C;
        --border: #E7E2DA;
        --bg: #FFFFFF;
        --bg-soft: #FFFFFF;
        --bg-soft-2: #FFFFFF;
        --ad-bg: #F5F5F5;
        --footer-bg: #000000;
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 24px rgba(15, 23, 42, .06);
        --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --font-display: var(--font);
        --font-serif: var(--font-display);
        --yellow: #FFE01B;
        --yellow-dark: #E0C800;
        /* Yellow tint palette for badges/icons on white bg */
        --yellow-bg: #FFFBE0;
        --yellow-border: #E8D84A;
        --yellow-text: #5A4A00;
    }

html.dark {
        --ink: #F5F5F5;
        --ink-soft: #D4D4D4;
        --ink-faint: #ADADAD;
        --border: #3A3A3A;
        --bg: #151515;
        --bg-soft: #1D1D1D;
        --bg-soft-2: #242424;
        --ad-bg: #242424;
        --teal-light: #242424;
        --footer-bg: #000000;
        --yellow-bg: #242424;
        --yellow-border: #505050;
        --yellow-text: #FFE01B;
    }

    * {
        box-sizing: border-box;
    }

    /* Preserve the HTML hidden state even when a component defines display. */
    [hidden] {
        display: none !important;
    }

    html {
        scroll-behavior: smooth;
    }

    h1, h2, h3, h4, h5, h6 {
        font-family: var(--font-display);
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -0.025em;
    }

    body {
        margin: 0;
        font-family: var(--font);
        color: var(--ink);
        background: var(--bg);
        -webkit-font-smoothing: antialiased;
        transition: background .2s ease, color .2s ease;
    }

    img {
        max-width: 100%;
        display: block;
    }

    a {
        color: inherit;
    }

    .wrap {
        max-width: 1180px;
        margin: 0 auto;
        padding: 0 24px;
    }

    button,
    select {
        font-family: inherit;
    }

    /* focus visibility */
    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: 2px;
    }

    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: .001ms !important;
            transition-duration: .001ms !important;
        }
    }

    html {
        color-scheme: light;
        background: var(--bg);
    }

    html.dark {
        color-scheme: dark;
        background: var(--bg);
        --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .22);
    }

    input,
    select,
    textarea,
    button {
        color: var(--ink);
        background-color: var(--bg);
    }

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

    .header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 68px;
    }

    .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: -.01em;
        text-decoration: none;
        color: var(--ink);
    }

    .brand .logo-icon {
        width: 34px;
        height: 34px;
        border-radius: 9px;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        flex-shrink: 0;
    }

    nav.main-nav {
        display: flex;
        align-items: center;
        gap: 28px;
    }

    nav.main-nav a {
        font-size: .92rem;
        color: var(--ink-soft);
        text-decoration: none;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    nav.main-nav a.active {
        color: var(--ink);
        font-weight: 600;
    }

    nav.main-nav a:hover {
        color: var(--ink);
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .theme-toggle {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 2px solid var(--ink);
        background: var(--bg-soft);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--ink-soft);
    }

    .theme-toggle:hover {
        color: var(--ink);
    }

    .theme-icon-sun,
    html.dark .theme-icon-moon {
        display: none;
    }

    html.dark .theme-icon-sun {
        display: block;
    }

    .theme-icon-moon {
        display: block;
    }

    .menu-toggle {
        display: none;
        background: none;
        border: none;
        cursor: pointer;
        color: var(--ink);
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
    }

    .icon-close {
        display: none;
    }

    .menu-toggle.open .icon-hamburger {
        display: none;
    }

    .menu-toggle.open .icon-close {
        display: block;
    }

    #mobile-nav {
        display: none;
    }

    /* ---------- Ad slots ---------- */
    .ad-slot {
        background: var(--ad-bg);
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--ink-faint);
        font-size: .8rem;
        text-align: center;
        line-height: 1.5;
    }

    .ad-728x90 {
        width: 100%;
        max-width: 728px;
        height: 90px;
        margin: 0 auto;
    }

    .ad-300x250 {
        width: 100%;
        max-width: 300px;
        height: 250px;
    }

    .ad-300x600 {
        width: 100%;
        max-width: 300px;
        height: 400px;
    }

    /* ---------- Hero ---------- */
    .hero {
        padding: 56px 0 72px;
    }

    .hero-intro {
        max-width: 640px;
        margin: 0 auto 32px;
        text-align: center;
    }

    .hero-intro .badge {
        margin-bottom: 18px;
    }

    .badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--teal-light);
        color: var(--ink);
        font-size: .82rem;
        font-weight: 600;
        padding: 7px 14px;
        border-radius: 999px;
    }

    html.dark .badge {
        color: var(--yellow);
    }

    h1.hero-title {
        font-family: var(--font-serif);
        font-size: 3rem;
        line-height: 1.08;
        letter-spacing: -.025em;
        margin: 0 0 18px;
        font-weight: 400;
        color: var(--ink);
    }

    h1.hero-title span {
        color: var(--ink);
        display: block;
    }

    .hero-desc {
        font-size: 1.08rem;
        line-height: 1.65;
        color: var(--ink-soft);
        max-width: 50ch;
        margin: 0 auto;
    }

    .feature-pills {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        max-width: 640px;
        margin: 22px auto 32px;
    }

    .feature-pills .pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: var(--bg-soft);
        border: 2px solid var(--ink);
        color: var(--ink-soft);
        font-size: .84rem;
        font-weight: 600;
        padding: 8px 15px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .feature-pills .pill svg {
        color: var(--ink);
        flex-shrink: 0;
    }

    /* Unified tool card */
    .tool-card {
        max-width: 640px;
        margin: 0 auto 18px;
        border-radius: var(--radius-lg);
        padding: 0;
        transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }

    .tool-card.is-empty {
        border: 2px dashed var(--ink);
        background: var(--teal-light);
    }

    .tool-card.is-empty.dragover {
        border-color: var(--ink);
        background: var(--yellow-bg);
    }

    html.dark .tool-card.is-empty.dragover {
        background: var(--yellow-bg);
    }

    .tool-card.has-image {
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .dropzone {
        padding: 48px 28px;
        text-align: center;
        cursor: pointer;
        background: #F1F2F3;
        border-radius: 10px;
    }

    .dropzone .cloud-ic {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #E2E4E7;
        border: 1px solid #C9CDD2;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 14px;
        color: var(--ink);
    }

    html.dark .dropzone {
        background: #2B2926;
    }

    html.dark .dropzone .cloud-ic {
        background: #3A3732;
        border-color: #5A554D;
    }

    .dropzone .dz-title {
        font-weight: 700;
        font-size: 1.1rem;
        color: var(--ink);
        margin-bottom: 6px;
    }

    .dz-mobile-text {
        display: none;
    }

    .dropzone .link {
        color: var(--ink);
        text-decoration: underline;
    }

    .dropzone .dz-sub {
        font-size: .82rem;
        color: var(--ink-faint);
    }

    .dz-example {
        margin-top: 22px;
        padding-top: 16px;
        border-top: 1px dashed rgba(35, 30, 21, .18);
        font-size: .82rem;
        color: var(--ink-faint);
    }

    .dz-example strong {
        color: var(--ink);
        font-weight: 700;
    }

    .dz-example .stat-badge {
        display: inline-block;
        background: var(--yellow-bg);
        color: var(--ink);
        font-weight: 700;
        font-size: .72rem;
        padding: 2px 9px;
        border-radius: 999px;
        margin-left: 5px;
    }

    html.dark .dz-example .stat-badge {
        background: var(--yellow-bg);
        color: var(--yellow-text);
    }

    #file-input {
        display: none;
    }

    .tool-reset {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 16px auto 0;
        background: none;
        border: none;
        color: var(--ink);
        font-weight: 600;
        font-size: .88rem;
        cursor: pointer;
        padding: 6px 4px;
    }

    .tool-result-actions {
        text-align: center;
    }

    .compare-grid {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        gap: 10px;
        align-items: center;
        margin-bottom: 16px;
    }

    .compare-col {
        position: relative;
        text-align: center;
        margin: 0 auto;
    }

    .compare-col .tag {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 2;
        font-size: .68rem;
        font-weight: 700;
        padding: 4px 9px;
        border-radius: 6px;
        color: #fff;
        text-align: left;
        line-height: 1.3;
    }

    .compare-col .tag .big {
        display: block;
        font-size: .85rem;
    }

    .tag.original {
        background: #231E15;
    }

    .tag.compressed {
        background: var(--yellow);
    }

    .compare-col .img-box {
        border-radius: 10px;
        overflow: hidden;
        border: 2px solid var(--ink);
        aspect-ratio: 1/1;
        background: var(--bg-soft-2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .compare-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .compare-arrow {
        color: var(--ink);
    }

    .quality-note {
        display: flex;
        align-items: center;
        gap: 10px;
        background: #FFFDF2;
        border: 1px solid #E9D98A;
        color: var(--ink);
        border-radius: var(--radius-md);
        padding: 11px 14px;
        font-size: .85rem;
        font-weight: 600;
    }

    html.dark .quality-note {
        background: #332F27;
        border-color: #665E4A;
        color: var(--yellow);
    }

    .quality-note.is-error {
        background: #fef2f2;
        border-color: #fecaca;
        color: #b91c1c;
    }

    .quality-note.is-error .dot {
        background: #dc2626;
    }

    html.dark .quality-note.is-error {
        background: #3f1414;
        border-color: #7f1d1d;
        color: #fca5a5;
    }

    .quality-note .dot {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--yellow);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .result-panel {
        margin-top: 14px;
    }

    .options-row {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 12px;
        font-size: .85rem;
        color: var(--ink-soft);
    }

    .options-row select {
        padding: 6px 10px;
        border-radius: var(--radius-sm);
        border: 2px solid var(--ink);
        background: var(--bg-soft);
        color: var(--ink);
    }

    .quality-control {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 14px 0;
        font-size: .85rem;
        color: var(--ink-soft);
    }

    .quality-control input[type=range] {
        flex: 1;
        accent-color: var(--ink);
    }

    .download-btn {
        width: 100%;
        padding: 12px;
        border: none;
        border-radius: var(--radius-md);
        background: var(--yellow);
        color: var(--ink);
        font-weight: 600;
        font-size: .95rem;
        cursor: pointer;
        transition: background .15s ease;
    }

    .download-btn:hover {
        background: var(--yellow-dark);
    }

    .download-btn:disabled {
        background: var(--ink-faint);
        cursor: not-allowed;
    }

    .tool-secondary {
        margin-top: 10px;
        background: var(--bg);
        border: 2px solid var(--ink);
    }

    .tool-secondary:hover {
        background: var(--bg-soft-2);
    }

    .avif-tool .avif-format-note {
        margin: 16px 0;
        color: var(--ink-soft);
    }

    /* Standalone tools share the homepage's tool-card and dropzone. */
    .image-tool .fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        margin: 20px 0;
    }

    .image-tool .fields > p {
        grid-column: 1 / -1;
        margin: 0;
        color: var(--ink-soft);
    }

    .image-tool label {
        display: grid;
        gap: 6px;
        font-weight: 600;
        min-width: 0;
    }

    .image-tool input:not([type="file"]),
    .image-tool select {
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        padding: 9px;
        border: 2px solid var(--ink);
        border-radius: 8px;
        background: var(--bg);
        color: var(--ink);
        font: inherit;
    }

    .image-tool input[type="color"] {
        height: 44px;
        padding: 4px;
    }

    .image-tool-preview img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 420px;
        object-fit: contain;
        border-radius: 10px;
        background: var(--bg-soft-2);
    }

    .image-tool #download {
        margin-top: 12px;
    }

    .image-tool #status:empty {
        display: none;
    }

    @media (max-width: 600px) {
        .image-tool .fields {
            grid-template-columns: 1fr;
        }
    }

    /* ---------- Sections generic ---------- */
    section {
        padding: 64px 0;
    }

    .section-soft {
        background: var(--bg-soft);
    }

    .section-head {
        max-width: 560px;
        margin-bottom: 44px;
    }

    h2.section-title {
        font-size: 1.9rem;
        font-weight: 400;
        letter-spacing: -.01em;
        margin: 0 0 10px;
        color: var(--ink);
    }

    .section-desc {
        color: var(--ink-soft);
        font-size: 1rem;
        line-height: 1.6;
        margin: 0;
    }

    .section-layout {
        display: grid;
        grid-template-columns: 1fr 280px;
        gap: 48px;
        align-items: start;
    }

    /* ---------- How it works ---------- */
    .how-steps-wrapper {
        position: relative;
    }

    .how-steps {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }

    .how-step {
        position: relative;
        background: var(--bg);
        border: 2px solid var(--ink);
        border-radius: var(--radius-lg);
        padding: 28px 24px 24px;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .how-step:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow);
    }

    html.dark .how-step:hover {
        box-shadow: 0 4px 20px rgba(0, 0, 0, .3);
    }

    .how-step .step-number {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: var(--yellow);
        color: var(--ink);
        font-weight: 700;
        font-size: .9rem;
        margin-bottom: 16px;
    }

    .how-step .step-icon {
        color: var(--ink);
        margin-bottom: 12px;
    }

    .how-step h3 {
        font-size: 1.05rem;
        font-weight: 700;
        margin: 0 0 8px;
        color: var(--ink);
    }

    .how-step p {
        font-size: .88rem;
        color: var(--ink-soft);
        line-height: 1.6;
        margin: 0;
    }

    /* AdSense-mainos askeleiden välissä (mobiilissa) */
    .how-mobile-ad {
        display: none;
        margin: 24px 0;
    }

    .how-mobile-ad .ad-slot {
        max-width: 300px;
        margin: 0 auto;
    }

    /* ---------- Why grid ---------- */
    .why-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 28px;
    }

    .why-item .ic-wrap {
        color: var(--ink);
        margin-bottom: 12px;
    }

    .why-item h3 {
        font-size: 1rem;
        margin: 0 0 6px;
        color: var(--ink);
    }

    .why-item p {
        font-size: .85rem;
        color: var(--ink-faint);
        line-height: 1.55;
        margin: 0;
    }

    /* ---------- Image format guide ---------- */
    .format-guide-head {
        max-width: 720px;
    }

    .format-guide-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .format-guide-card,
    .format-usecase-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: var(--bg);
        border: 2px solid var(--ink);
        border-radius: 12px;
        padding: 22px;
    }

    .format-guide-icon,
    .format-quality-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: var(--yellow);
        border: 2px solid var(--ink);
        border-radius: 10px;
        color: var(--ink);
    }

    .format-guide-card h3,
    .format-quality-tip h3,
    .format-usecases-title,
    .format-usecase-card h4 {
        color: var(--ink);
    }

    .format-guide-card h3 {
        margin: 16px 0 8px;
        font-size: 1rem;
        line-height: 1.35;
    }

    .format-guide-card p,
    .format-quality-tip p,
    .format-usecase-card p {
        margin: 0;
        color: var(--ink-soft);
        font-size: .88rem;
        line-height: 1.58;
    }

    .format-guide-link {
        margin-top: auto;
        padding-top: 16px;
        color: var(--ink);
        font-size: .84rem;
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .format-guide-link:hover {
        color: var(--ink-soft);
    }

    .format-quality-tip {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        margin-top: 18px;
        padding: 20px 22px;
        background: var(--bg-soft);
        border: 2px solid var(--ink);
        border-radius: 12px;
    }

    .format-quality-tip h3 {
        margin: 0 0 4px;
        font-size: 1rem;
    }

    .format-quality-tip .format-guide-link {
        margin-top: 0;
        padding-top: 0;
        white-space: nowrap;
    }

    .format-usecases {
        margin-top: 38px;
    }

    .format-usecases-title {
        margin: 0 0 16px;
        font-size: 1.15rem;
    }

    .format-usecase-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .format-usecase-card > i {
        margin-bottom: 14px;
        color: var(--ink);
    }

    .format-usecase-card h4 {
        margin: 0 0 8px;
        font-size: .98rem;
    }

    /* ---------- More tools - parannettu ---------- */
    .power-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 48px;
        align-items: start;
    }

    .power-content {
        display: flex;
        flex-direction: column;
        gap: 28px;
    }

    .power-content .check-list {
        margin: 0;
    }

    .power-content .cta-green {
        align-self: flex-start;
    }

    ul.check-list {
        list-style: none;
        margin: 22px 0 26px;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    ul.check-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: .95rem;
        color: var(--ink);
    }

    ul.check-list li .tick {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: var(--yellow-bg);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    html.dark ul.check-list li .tick {
        background: var(--yellow-bg);
    }

    .cta-green {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--yellow);
        color: var(--ink);
        border: 2px solid var(--ink);
        padding: 13px 22px;
        border-radius: var(--radius-md);
        font-weight: 700;
        font-size: .92rem;
        cursor: pointer;
        text-decoration: none;
    }

    .cta-green:hover {
        background: var(--yellow-dark);
    }

    /* Converter-grid (4 korttia 2x2) */
    .converter-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 0;
    }

    .converter-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        background: var(--bg);
        border: 2px solid var(--ink);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--ink);
        transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    }

    .converter-card:hover {
        border-color: var(--ink);
        box-shadow: var(--shadow);
        transform: translateY(-2px);
    }

    .converter-card .conv-ic {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        background: var(--bg-soft);
        border: 1.5px solid var(--border);
        color: var(--ink);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .converter-card .conv-label {
        font-weight: 700;
        font-size: .85rem;
        margin-bottom: 1px;
    }

    .converter-card .conv-sub {
        font-size: .75rem;
        color: var(--ink-faint);
    }

    /* Mockup - yksinkertaistettu */
    .mockup-wrap {
        position: relative;
        height: 100%;
        min-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mockup-card {
        width: 100%;
        max-width: 320px;
        background: var(--bg);
        border: 2px solid var(--ink);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        overflow: hidden;
        padding: 20px;
    }

    .mockup-card .mock-header {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 16px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border);
    }

    .mockup-card .mock-header .badge-convert {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: var(--yellow-bg);
        color: var(--yellow-text);
        font-weight: 700;
        font-size: .78rem;
        padding: 4px 10px;
        border-radius: 6px;
    }

    html.dark .mockup-card .mock-header .badge-convert {
        background: var(--yellow-bg);
        color: var(--yellow-text);
    }

    .mockup-card .mock-body {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mockup-card .mock-drop {
        border: 1.5px dashed var(--border);
        border-radius: 8px;
        padding: 20px 14px;
        text-align: center;
        font-size: .78rem;
        color: var(--ink-faint);
    }

    .mockup-card .mock-drop svg {
        margin-bottom: 6px;
        color: var(--ink-faint);
    }

    .mockup-card .mock-drop b {
        display: block;
        color: var(--ink);
        font-size: .82rem;
        margin-bottom: 4px;
    }

    .mockup-card .mock-quality {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: .78rem;
        color: var(--ink-faint);
    }

    .mockup-card .mock-slider {
        height: 4px;
        background: var(--border);
        border-radius: 2px;
        position: relative;
    }

    .mockup-card .mock-slider::after {
        content: "";
        position: absolute;
        left: 0;
        top: -3px;
        width: 70%;
        height: 10px;
        background: var(--yellow);
        border-radius: 5px;
    }

    .mockup-card .mock-btn {
        background: var(--yellow);
        color: var(--ink);
        text-align: center;
        padding: 10px;
        border-radius: 8px;
        font-size: .82rem;
        font-weight: 700;
    }

    .mockup-card .mock-stats {
        display: flex;
        justify-content: space-between;
        font-size: .78rem;
        color: var(--ink-faint);
        padding-top: 8px;
        border-top: 1px solid var(--border);
    }

    .mockup-card .mock-stats .savings {
        color: var(--ink);
        font-weight: 700;
    }

    /* FAQ accordion */
    .section-head.center {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .faq-list {
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 760px;
        margin: 0 auto 32px;
    }

    .faq-item {
        background: var(--bg);
        border: 2px solid var(--ink);
        border-radius: var(--radius-md);
        overflow: hidden;
    }

    .faq-item summary {
        list-style: none;
        cursor: pointer;
        padding: 18px 46px 18px 20px;
        position: relative;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 1rem;
        color: var(--ink);
    }

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

    .faq-item summary:hover {
        background: var(--bg-soft);
    }

    .faq-item summary:focus-visible {
        outline: 2px solid var(--ink);
        outline-offset: -2px;
    }

    .faq-item summary .chevron {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--ink-faint);
        transition: transform .2s ease, color .2s ease;
        flex-shrink: 0;
    }

    .faq-item[open] summary .chevron {
        transform: translateY(-50%) rotate(180deg);
        color: var(--ink);
    }

    .faq-item[open] summary {
        border-bottom: 1px solid var(--border);
    }

    .faq-answer {
        padding: 16px 20px 20px;
        color: var(--ink-soft);
        font-size: .92rem;
        line-height: 1.6;
    }

    .faq-answer p {
        margin: 0;
    }

    /* ---------- Footer ---------- */
    footer.site {
        background: var(--footer-bg);
        color: #D8D0C4;
        padding: 44px 0 30px;
    }

    .footer-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 20px;
    }

    .footer-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #fff;
        font-weight: 700;
    }

    .footer-brand .logo-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
    }

    .footer-tag {
        font-size: .8rem;
        color: #94a3b8;
        margin-top: 4px;
    }

    .footer-links {
        display: flex;
        gap: 26px;
        flex-wrap: wrap;
    }

    .footer-links a {
        font-size: .85rem;
        color: #D8D0C4;
        text-decoration: none;
    }

    .footer-links a:hover {
        color: #fff;
    }

    .footer-social {
        display: flex;
        gap: 14px;
    }

    .footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #1e293b;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #D8D0C4;
        text-decoration: none;
    }

    .footer-social a:hover {
        background: var(--ink);
        color: #fff;
    }

    .footer-bottom {
        border-top: 1px solid #1e293b;
        margin-top: 30px;
        padding-top: 20px;
        text-align: center;
        font-size: .78rem;
        color: #64748b;
    }

    /* ---------- Responsive ---------- */
    @media (max-width: 980px) {
        .section-layout {
            grid-template-columns: 1fr;
        }

        .how-steps {
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .how-sidebar-ad {
            display: none;
        }

        .how-mobile-ad {
            display: block;
        }

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

        .format-guide-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .format-usecase-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .power-grid {
            grid-template-columns: 1fr;
            gap: 36px;
        }

        .mockup-wrap {
            min-height: 280px;
        }

        .ad-300x250,
        .ad-300x600 {
            max-width: 100%;
            margin: 0 auto;
        }

        .ad-300x600 {
            height: 250px;
        }
    }

    @media (max-width: 760px) {
        nav.main-nav {
            display: none;
        }

        .menu-toggle {
            display: flex;
        }

        #mobile-nav.open {
            display: flex;
            flex-direction: column;
            gap: 2px;
            border-top: 1px solid var(--border);
            padding: 10px 24px 16px;
            background: var(--bg);
        }

        #mobile-nav a {
            padding: 11px 4px;
            font-size: .95rem;
            color: var(--ink-soft);
            text-decoration: none;
            border-bottom: 1px solid var(--border);
            font-weight: 500;
        }

        #mobile-nav a.active {
            color: var(--ink);
            font-weight: 700;
        }

        .hero {
            padding: 32px 0 48px;
        }

        h1.hero-title {
            font-size: 1.9rem;
        }

        .hero-desc {
            font-size: .95rem;
        }

        .how-steps {
            grid-template-columns: 1fr;
            gap: 16px;
        }

        .how-step {
            padding: 20px 18px;
        }

        .how-step .step-number {
            width: 32px;
            height: 32px;
            font-size: .82rem;
        }

        .why-grid {
            grid-template-columns: 1fr;
            gap: 24px;
        }

        .format-guide-grid,
        .format-usecase-grid {
            grid-template-columns: 1fr;
        }

        .format-guide-card,
        .format-usecase-card {
            padding: 20px 18px;
        }

        .format-quality-tip {
            grid-template-columns: auto 1fr;
            padding: 18px;
        }

        .format-quality-tip .format-guide-link {
            grid-column: 1 / -1;
        }

        .power-grid {
            grid-template-columns: 1fr;
        }

        .mockup-wrap {
            display: none;
        }

        .converter-grid {
            grid-template-columns: 1fr;
        }

        section {
            padding: 44px 0;
        }

        h2.section-title {
            font-size: 1.5rem;
        }

        .compare-grid {
            grid-template-columns: 1fr auto 1fr;
            gap: 6px;
        }

        .dropzone {
            padding: 28px 14px;
        }

        .dz-mobile-text {
            display: inline;
        }

        .dz-desktop-text {
            display: none;
        }

        .ad-728x90 {
            height: 70px;
            font-size: .72rem;
        }

        .footer-inner {
            flex-direction: column;
            align-items: flex-start;
        }

        .footer-links {
            gap: 16px 20px;
        }
    }

    @media (max-width: 420px) {
        .wrap {
            padding: 0 16px;
        }

        h1.hero-title {
            font-size: 1.65rem;
        }

        .compare-col .tag {
            font-size: .6rem;
            padding: 3px 6px;
        }

        .compare-col .tag .big {
            font-size: .72rem;
        }
    }

    .language-switcher select {
        background: var(--bg-soft);
        color: var(--ink-soft);
        border: 2px solid var(--ink);
        border-radius: 8px;
        padding: 8px 28px 8px 10px;
        font-size: .82rem;
        font-weight: 600;
        cursor: pointer;
    }

    .language-switcher select:hover {
        color: var(--ink);
    }

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

    @media (max-width:760px) {
        .language-switcher select {
            padding: 7px 24px 7px 8px;
            font-size: .78rem;
        }

        .header-right {
            gap: 8px;
        }
    }

    /* ---------- Breadcrumb (converter sub-pages) ---------- */
    .breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-wrap: wrap;
        font-size: .82rem;
        color: var(--ink-faint);
        padding: 14px 0;
    }

    .breadcrumb a {
        color: var(--ink-soft);
        text-decoration: none;
    }

    .breadcrumb a:hover {
        color: var(--ink);
        text-decoration: underline;
    }

    .breadcrumb .sep {
        color: var(--ink-faint);
    }

    .breadcrumb .current {
        color: var(--ink);
        font-weight: 600;
    }


/* Strong 2026 visual borders */
.converter-card,
.upload-area,
.dropzone,
.tool-card,
.feature-card,
.faq-item,
.compare-card,
.info-card,
.input-card,
.result-card,
.controls-card,
.mockup,
.cta-card,
.price-card,
input,
select,
textarea,
button:not(.menu-toggle):not(.theme-toggle) {
    border-width: 2px;
    border-color: var(--ink);
    color: var(--ink);
}

.upload-area,
.dropzone {
    background: var(--bg-soft-2);
    border: 2px solid var(--ink);
}

.site-footer,
footer {
    background: #000;
    color: #fff;
    border-top: 2px solid #000;
}

.site-footer a,
footer a {
    color: #fff;
}

/* ---------- Visual refinement ---------- */
:root {
    --border: #231E15;
    --bg-soft: #F7F7F7;
    --bg-soft-2: #F2F2F2;
    --ad-bg: #F5F5F5;
}

body {
    background: var(--bg);
}

header.site {
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.brand .logo-icon {
    background: var(--yellow);
    color: var(--ink);
    border: 2px solid var(--ink);
}

nav.main-nav a.active {
    position: relative;
}

nav.main-nav a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -23px;
    height: 3px;
    background: var(--yellow);
}

.hero {
    padding: 68px 0 76px;
    position: relative;
}

/* ---------- Floating hero decorations (desktop only) ---------- */
.hero-float {
    display: none;
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

@media (min-width: 1300px) {
    .hero-float {
        display: block;
    }

    .hero-float-mockup {
        top: 25%;
        left: 25%;
    }

    .hero-float-chart {
        bottom: 30%;
        right: 20%;
    }
}

.hero-float-card {
    width: 74px;
    height: 54px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 5px 5px 0 var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: hero-float-bob 5s ease-in-out infinite;
}

.hero-float-mockup .hero-float-card {
    --float-rot: -6deg;
    animation-delay: 0s;
}

.hero-float-chart .hero-float-card {
    --float-rot: 5deg;
    animation-delay: 1.4s;
}

@keyframes hero-float-bob {
    0%, 100% { transform: translateY(0) rotate(var(--float-rot, 0deg)); }
    50% { transform: translateY(-10px) rotate(var(--float-rot, 0deg)); }
}

.hero-intro {
    max-width: 760px;
    margin-bottom: 28px;
}

.hero-intro .badge {
    background: var(--yellow-bg);
    color: var(--yellow-text);
    border: 1px solid var(--yellow-border);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 600;
}

html.dark .hero-intro .badge {
    background: var(--yellow-bg);
    color: var(--yellow-text);
    border-color: var(--yellow-border);
}

h1.hero-title {
    overflow-wrap: anywhere;
    font-size: clamp(2.5rem, 4.8vw, 3.8rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.03em;
    margin-bottom: 20px;
}

.hero-desc {
    max-width: 56ch;
    font-size: 1.05rem;
}

.feature-pills {
    max-width: 760px;
    gap: 8px;
    margin: 24px auto 34px;
}

.feature-pills .pill {
    background: var(--bg-soft);
    border: 2px solid var(--ink);
    color: var(--ink-soft);
    padding: 7px 13px;
}

.tool-card {
    max-width: 760px;
    margin-bottom: 18px;
}

.tool-card.is-empty {
    border: 0;
    background: transparent;
}

.tool-card.is-empty.dragover {
    border: 0;
    background: transparent;
}

.dropzone {
    padding: 56px 32px;
    background: var(--bg-soft-2);
    border: 2px dashed var(--ink);
    border-radius: 14px;
    transition: background-color .15s ease, transform .15s ease;
}

.dropzone:hover {
    background: var(--bg-soft-2);
}

.tool-card.is-empty.dragover .dropzone {
    background: var(--bg-soft-2);
    transform: scale(1.005);
}

.dropzone .cloud-ic {
    width: 56px;
    height: 56px;
    background: var(--yellow-bg);
    border: 1.5px solid var(--yellow-border);
    color: var(--yellow-text);
}

html.dark .dropzone .cloud-ic {
    background: var(--yellow-bg);
    border-color: var(--yellow-border);
    color: var(--yellow-text);
}

.dropzone .link {
    font-weight: 700;
}

.dz-example .stat-badge {
    background: var(--yellow);
    border: 2px solid var(--ink);
    padding: 2px 8px;
}

.download-btn {
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.download-btn:disabled {
    border-color: var(--ink-faint);
}

.section-soft {
    background: var(--bg-soft);
}

section {
    padding: 72px 0;
}

.section-head {
    margin-bottom: 36px;
}

.how-step {
    background: var(--bg);
    border: 2px solid var(--ink);
    box-shadow: none;
    border-radius: 12px;
    padding: 26px 22px 24px;
}

.how-step:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--ink);
}

.how-step .step-number {
    border: 2px solid var(--ink);
}

.why-item .ic-wrap {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 10px;
    margin-bottom: 16px;
}

.power-grid {
    gap: 64px;
}

.cta-green {
    border: 2px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.cta-green:hover {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--ink);
}

.converter-card {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 10px;
    box-shadow: none;
}

.converter-card:hover {
    box-shadow: 3px 3px 0 var(--ink);
    transform: translate(-1px, -1px);
}

.converter-card .conv-ic {
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    color: var(--ink);
}

.mockup-card {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    box-shadow: 5px 5px 0 var(--ink);
}

.mockup-card .mock-header .badge-convert {
    background: var(--yellow);
    border: 2px solid var(--ink);
    border-radius: 6px;
}

.mockup-card .mock-drop {
    background: var(--bg-soft-2);
    border: 2px dashed var(--ink);
}

.mockup-card .mock-btn {
    border: 2px solid var(--ink);
}

.faq-list {
    max-width: 800px;
}

.faq-item {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 10px;
}

.faq-item summary:hover {
    background: var(--bg-soft);
}

footer.site {
    background: #000000;
    color: #FFFFFF;
    border-top: 2px solid #000000;
}

.footer-brand .logo-icon {
    background: var(--yellow);
    color: var(--ink);
    border: 2px solid var(--yellow);
}

.footer-tag,
.footer-links a,
.footer-bottom {
    color: #BDBDBD;
}

.footer-links a:hover {
    color: var(--yellow);
}

.footer-social a {
    background: #171717;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}

.footer-social a:hover {
    background: var(--yellow);
    color: var(--ink);
    border-color: var(--yellow);
}

.footer-bottom {
    border-top: 1px solid #333333;
}

@media (max-width: 700px) {
    .hero {
        padding: 48px 0 56px;
    }

    h1.hero-title {
        font-size: clamp(2.35rem, 11vw, 3.2rem);
    }

    .feature-pills {
        margin-bottom: 26px;
    }

    .feature-pills .pill {
        width: 100%;
        justify-content: center;
    }

    .dropzone {
        padding: 42px 20px;
    }

    section {
        padding: 56px 0;
    }
}

/* ---------- Tool Error Alert ---------- */
.tool-error {
    padding: 12px 16px;
    background: #fef2f2;
    color: #991b1b;
    border: 2px solid #ef4444;
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    font-size: 0.92rem;
    font-weight: 500;
    text-align: center;
}
html.dark .tool-error {
    background: #450a0a;
    color: #fca5a5;
    border-color: #dc2626;
}

/* ---------- Crop Tool Component ---------- */
.crop-result {
    margin-top: 10px;
}

.crop-editor {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.crop-file-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: var(--bg-soft-2);
    border: 2px solid var(--ink);
    border-radius: var(--radius-md);
    font-size: 0.88rem;
    color: var(--ink);
}

.crop-file-name {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70%;
}

.crop-file-size {
    color: var(--ink-soft);
    font-size: 0.84rem;
    font-weight: 500;
    flex-shrink: 0;
}

.crop-canvas-wrap {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    overflow: hidden;
    padding: 0;
    user-select: none;
    touch-action: none;
}

#crop-canvas {
    display: block;
    max-width: 100%;
    max-height: 58vh;
    height: auto;
    border-radius: 0;
    cursor: crosshair;
}

.crop-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    align-items: center;
    background: var(--bg-soft-2);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border: 2px solid var(--ink);
}

.crop-control-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.84rem;
    color: var(--ink-soft);
}

.crop-control-group label {
    font-weight: 600;
    color: var(--ink);
}

.crop-control-group select {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 2px solid var(--ink);
    background: var(--bg);
    color: var(--ink);
    font-size: 0.88rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
}

.crop-control-group select:focus-visible {
    outline: 2px solid var(--yellow);
    outline-offset: 1px;
}

.crop-control-group input[type=range] {
    accent-color: var(--ink);
    cursor: pointer;
    margin-top: 4px;
}

.crop-control-group.crop-size-info {
    justify-content: center;
}

.crop-size-info strong {
    font-size: 1rem;
    color: var(--ink);
    font-weight: 700;
}

.crop-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.crop-actions .tool-reset {
    margin: 0;
}

.crop-actions .download-btn {
    width: auto;
    min-width: 180px;
    padding: 12px 24px;
}

@media (max-width: 700px) {
    .crop-controls {
        grid-template-columns: 1fr 1fr;
    }
    .crop-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .crop-actions .download-btn {
        width: 100%;
        order: -1;
    }
    .crop-actions .tool-reset {
        justify-content: center;
    }
}
/* Crawlable language alternatives remain available without JavaScript. */
.locale-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1rem; padding: 1rem; font-size: .8rem; }
.locale-links a[aria-current="page"] { font-weight: 700; text-decoration: underline; }


/* Homepage privacy reassurance beside the upload controls. */
.home-upload-privacy { margin: 14px auto 0; max-width: 52ch; color: var(--ink-soft); font-size: .8rem; line-height: 1.5; }

/* Shared mascot logo, sized without changing the navigation height. */
.brand .brand-mascot, .footer-brand .brand-mascot { display: block; width: 65px; height: 52px; object-fit: contain; flex-shrink: 0; }
html.dark .brand-mascot, .footer-brand .brand-mascot { filter: drop-shadow(0 0 1px #fff); }

/* Homepage Eyebrow Badges */
.section-eyebrow {
    display: inline-block;
    color: var(--yellow-dark);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
html.dark .section-eyebrow {
    color: var(--yellow);
}

/* Hero trust indicators below dropzone */
.hero-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 20px 32px;
    margin: 22px auto 0;
    max-width: 680px;
}
.hero-trust-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.hero-trust-item i,
.hero-trust-item svg {
    width: 16px;
    height: 16px;
    color: var(--ink);
}

/* Hero stats bar */
.hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 820px;
    margin: 44px auto 0;
    padding-top: 36px;
    border-top: 1px solid var(--border);
    text-align: center;
}
.stat-item .stat-number {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.2;
}
.stat-item .stat-label {
    font-size: 0.82rem;
    color: var(--ink-faint);
    margin-top: 6px;
    line-height: 1.4;
}
@media (max-width: 700px) {
    .hero-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 16px;
    }
}

/* How it works cards */
#how-it-works .section-head {
    text-align: center;
    margin: 0 auto 36px;
}
#how-it-works .section-head .section-desc {
    margin-left: auto;
    margin-right: auto;
}
#how-it-works .how-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
#how-it-works .how-step {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 26px 22px 24px;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
#how-it-works .how-step:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--ink);
}
.how-step-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.how-step-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}
.how-step-header .step-number {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-faint);
    margin: 0;
    background: none;
    border: none;
    width: auto;
    height: auto;
}
#how-it-works .how-step h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--ink);
}
#how-it-works .how-step p {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin: 0;
}
@media (max-width: 768px) {
    #how-it-works .how-steps {
        grid-template-columns: 1fr;
    }
}

/* Why compress section */
#why-compress.section-soft {
    background: var(--bg-soft);
}
#why-compress .section-head {
    text-align: center;
    margin: 0 auto 36px;
}
#why-compress .section-head .section-desc {
    margin-left: auto;
    margin-right: auto;
}
#why-compress .why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.why-card {
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    text-align: left;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.why-card:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--ink);
}
.why-card .ic-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    margin-bottom: 16px;
    color: var(--ink);
}
.why-card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ink);
}
.why-card p {
    font-size: 0.85rem;
    color: var(--ink-faint);
    line-height: 1.55;
    margin: 0;
}
@media (max-width: 900px) {
    #why-compress .why-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}
@media (max-width: 500px) {
    #why-compress .why-grid {
        grid-template-columns: 1fr;
    }
}

/* Format guide cards (2x2 grid) */
#image-format-guide .section-head {
    text-align: center;
    margin: 0 auto 36px;
}
#image-format-guide .section-head .section-desc {
    margin-left: auto;
    margin-right: auto;
}
#image-format-guide .format-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
#image-format-guide .format-guide-card {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    padding: 24px;
    text-align: left;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
#image-format-guide .format-guide-card:hover {
    transform: translateY(-2px);
    box-shadow: 4px 4px 0 var(--ink);
}
#image-format-guide .format-guide-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: 10px;
    color: var(--ink);
    margin: 0;
}
#image-format-guide .format-guide-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#image-format-guide .format-guide-card h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--ink);
}
#image-format-guide .format-guide-card p {
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 0.88rem;
    line-height: 1.58;
}
#image-format-guide .format-guide-card .format-guide-link {
    margin-top: 0;
    padding-top: 0;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
#image-format-guide .format-guide-card .format-guide-link:hover {
    text-decoration: underline;
}
.format-quality-tip {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 0;
    padding: 20px 24px;
    background: var(--bg-soft);
    border: 2px solid var(--ink);
    border-radius: 12px;
}
.format-quality-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--yellow-bg);
    border: 1.5px solid var(--yellow-border);
    border-radius: 10px;
    color: var(--yellow-text);
}
html.dark .format-quality-icon {
    background: var(--yellow-bg);
    border-color: var(--yellow-border);
    color: var(--yellow-text);
}
.format-quality-text :is(h2, h3) {
    margin: 0 0 4px;
    font-size: 1rem;
}
.format-quality-text p {
    margin: 0;
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.55;
}
@media (max-width: 768px) {
    #image-format-guide .format-guide-grid {
        grid-template-columns: 1fr;
    }
    .format-quality-tip {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* More tools 3-column clean grid */
#tools.section-soft {
    background: var(--bg-soft);
}
#tools .section-head {
    text-align: center;
    margin: 0 auto 36px;
}
#tools .section-head .section-desc {
    margin-left: auto;
    margin-right: auto;
}
.tools-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 1000px;
    margin: 0 auto;
}
.tool-card-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: var(--bg);
    border: 2px solid var(--ink);
    border-radius: 12px;
    text-decoration: none;
    color: var(--ink);
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease;
}
.tool-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 3px 3px 0 var(--ink);
}
.tool-card-item .tool-card-ic {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-card-item .tool-card-info {
    min-width: 0;
}
.tool-card-item .tool-card-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 2px;
    color: var(--ink);
}
.tool-card-item .tool-card-desc {
    font-size: 0.78rem;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 860px) {
    .tools-grid-clean {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 560px) {
    .tools-grid-clean {
        grid-template-columns: 1fr;
    }
}

/* Call to action banner */
.cta-banner-section {
    padding: 40px 0 72px;
}
.cta-banner-card {
    background: #1C1917;
    color: #FFFFFF;
    border-radius: 16px;
    border: 2px solid var(--ink);
    padding: 56px 28px;
    text-align: center;
    max-width: 820px;
    margin: 0 auto;
}
.cta-banner-card h2 {
    color: #FFFFFF;
    font-size: clamp(1.8rem, 4vw, 2.3rem);
    margin: 0 0 12px;
    font-family: var(--font-serif);
    font-weight: 400;
}
.cta-banner-card p {
    color: #A8A29E;
    font-size: 0.96rem;
    max-width: 50ch;
    margin: 0 auto 26px;
    line-height: 1.6;
}
.cta-banner-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.92rem;
    font-weight: 700;
    padding: 12px 26px;
    border-radius: 999px;
    border: 2px solid var(--ink);
    text-decoration: none;
    box-shadow: 3px 3px 0 var(--ink);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cta-banner-btn:hover {
    background: var(--yellow-dark);
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Site-wide polish ---------- */
:root {
    --border: #E3E5E8;
    --surface-shadow: 0 8px 24px rgba(20, 24, 32, .06);
}

html.dark {
    --border: #3A3A3A;
    --surface-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

/* Google Auto Ads will create its own placements. Development placeholders
   are kept in the markup for later integration but should not be visible. */
.ad-slot,
.how-sidebar-ad,
.how-mobile-ad {
    display: none !important;
}

/* Keep strong borders for actions and upload areas; use quieter surfaces for
   explanatory content so the primary tool remains the visual focus. */
#how-it-works .how-step,
.why-card,
#image-format-guide .format-guide-card,
.converter-card,
.tool-card-item,
.faq-item {
    border: 1px solid var(--border);
    box-shadow: none;
}

#how-it-works .how-step:hover,
.why-card:hover,
#image-format-guide .format-guide-card:hover,
.converter-card:hover,
.tool-card-item:hover {
    transform: translateY(-2px);
    box-shadow: var(--surface-shadow);
}

.format-quality-tip {
    border: 1px solid var(--yellow-border);
    background: var(--yellow-bg);
}

.how-step-icon,
.why-card .ic-wrap,
#image-format-guide .format-guide-icon,
.converter-card .conv-ic,
.tool-card-item .tool-card-ic {
    border-color: var(--border);
}

.tool-card-item .tool-card-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.45;
}

/* Tool pages retain the homepage hierarchy while bringing the upload control
   into view sooner, particularly on phones. */
.tool-page > .wrap:first-child .breadcrumb {
    padding: 14px 0 2px;
}

.tool-page > .hero {
    padding: 38px 0 56px;
}

.tool-page > .hero .hero-intro {
    margin-bottom: 24px;
}

.tool-page > .hero .hero-desc {
    max-width: 52ch;
}

/* Editorial pages use the same spacing, surfaces and yellow accent language
   as the homepage rather than appearing as unstyled documents. */
.info-page {
    padding-bottom: 80px;
}

.info-page > .wrap > .breadcrumb {
    padding: 18px 0 10px;
}

.legal-content {
    max-width: 900px;
    margin: 26px auto 0;
    padding: 56px 64px 64px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-soft);
    box-shadow: var(--surface-shadow);
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1.75;
}

.legal-page-header {
    margin-bottom: 42px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--border);
}

.legal-page-header h1 {
    margin: 0;
    font-size: clamp(2.4rem, 6vw, 3.8rem);
    line-height: 1.05;
    letter-spacing: -.04em;
}

.legal-page-header .section-eyebrow {
    margin-bottom: 14px;
}

.legal-updated {
    margin: 14px 0 0;
    color: var(--ink-faint);
    font-size: .88rem;
}

.legal-content h2 {
    margin: 40px 0 12px;
    font-size: clamp(1.3rem, 3vw, 1.65rem);
    line-height: 1.25;
}

.legal-content p,
.legal-content ul {
    margin-top: 0;
    margin-bottom: 18px;
}

.legal-content li + li {
    margin-top: 8px;
}

.legal-content a {
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 760px) {
    .tool-page > .hero {
        padding: 28px 0 46px;
    }

    .tool-page > .hero h1.hero-title {
        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .tool-page > .hero .dropzone {
        padding: 38px 18px;
    }

    .info-page {
        padding-bottom: 56px;
    }

    .legal-content {
        margin-top: 14px;
        padding: 36px 28px 44px;
        border-radius: 16px;
    }

}

@media (max-width: 520px) {
    .brand > span {
        display: none;
    }

    .brand .brand-mascot {
        width: 52px;
        height: 42px;
    }

    .header-right {
        gap: 6px;
    }

    .language-switcher select {
        max-width: 112px;
    }

    .legal-content {
        padding: 32px 22px 40px;
    }
}

/* ---------- Motion and tool-state polish ---------- */
/* Motion classes are added only when JavaScript and IntersectionObserver are
   available, so content stays visible in crawlers and no-script browsing. */
.motion-hero .hero-intro .badge,
.motion-hero .hero-intro .hero-title,
.motion-hero .hero-intro .hero-desc,
.motion-hero .tool-card,
.motion-hero .hero-trust-row {
    opacity: 0;
    transform: translateY(12px);
}

.motion-hero.is-ready .hero-intro .badge,
.motion-hero.is-ready .hero-intro .hero-title,
.motion-hero.is-ready .hero-intro .hero-desc,
.motion-hero.is-ready .tool-card,
.motion-hero.is-ready .hero-trust-row {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .52s ease, transform .52s cubic-bezier(.22, 1, .36, 1);
}

.motion-hero.is-ready .hero-intro .hero-title { transition-delay: 55ms; }
.motion-hero.is-ready .hero-intro .hero-desc { transition-delay: 105ms; }
.motion-hero.is-ready .tool-card { transition-delay: 155ms; }
.motion-hero.is-ready .hero-trust-row { transition-delay: 205ms; }

.motion-item {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .48s ease var(--motion-delay, 0ms),
                transform .48s cubic-bezier(.22, 1, .36, 1) var(--motion-delay, 0ms);
}

.motion-item.is-visible {
    opacity: 1;
    transform: translateY(0);
}

#how-it-works .how-step.motion-item.is-visible:hover,
.why-card.motion-item.is-visible:hover,
#image-format-guide .format-guide-card.motion-item.is-visible:hover,
.converter-card.motion-item.is-visible:hover,
.tool-card-item.motion-item.is-visible:hover {
    transform: translateY(-2px);
}

@keyframes upload-icon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.tool-card.is-empty .dropzone .cloud-ic {
    animation: upload-icon-float 3.6s ease-in-out infinite;
}

.dropzone {
    transition: background-color .18s ease, border-color .18s ease,
                transform .18s ease, box-shadow .18s ease;
}

.dropzone:hover,
.tool-card.is-empty.dragover .dropzone {
    border-color: var(--yellow-dark);
    box-shadow: 0 10px 26px rgba(35, 30, 21, .07);
}

.tool-card.is-empty.dragover .dropzone {
    transform: scale(1.008);
}

@keyframes tool-result-in {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: translateY(0); }
}

.tool-card.has-image .result-panel {
    animation: tool-result-in .38s cubic-bezier(.22, 1, .36, 1) both;
}

.image-tool input:not([type="file"]),
.image-tool select,
.options-row select {
    min-height: 44px;
    border: 1px solid var(--border);
    background: var(--bg);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.image-tool input:not([type="file"]):focus,
.image-tool select:focus,
.options-row select:focus {
    outline: none;
    border-color: var(--ink-soft);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink), transparent 90%);
}

.image-tool-preview img,
.heic-preview .img-box {
    border: 1px solid var(--border);
}

.heic-status,
.heic-meta-item {
    border: 1px solid var(--border) !important;
}

.heic-meta-item {
    background: var(--bg-soft);
}

.download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 50px;
    padding: 13px 20px;
    border: 2px solid #231E15;
    border-radius: 10px;
    background: var(--yellow);
    color: #231E15;
    font-weight: 700;
    box-shadow: 3px 3px 0 #231E15;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.download-btn:not(:disabled):hover {
    background: var(--yellow-dark);
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #231E15;
}

.download-btn:not(:disabled):active {
    transform: translate(3px, 3px);
    box-shadow: none;
}

.download-btn:disabled {
    border-color: var(--border);
    background: var(--bg-soft-2);
    color: var(--ink-faint);
    box-shadow: none;
    opacity: 1;
    transform: none;
}

/* Compact result views keep the primary action close to the preview. */
.tool-card .compare-grid { grid-template-columns: minmax(0, 320px) auto minmax(0, 320px); justify-content: center; }
.tool-card .compare-col { width: 100%; min-width: 0; margin-inline: auto; }
.tool-card .compare-col .img-box { aspect-ratio: 4 / 3; max-height: 240px; }
.tool-card .compare-col img { object-fit: contain; }
.tool-card .image-tool-preview img { max-height: 280px; }
.tool-card .heic-preview { max-width: 400px; margin-block: 12px; }
.tool-card .heic-preview .img-box { aspect-ratio: 16 / 10; max-height: 250px; }
.tool-card #crop-canvas { max-height: 38vh; }
.download-btn.is-processing::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: processing-spin .8s linear infinite; }
@keyframes processing-spin { to { transform: rotate(360deg); } }
@media (min-width: 900px) {
    .tool-card.has-image { max-width: 920px; }
    .image-tool #tool-result { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, 1fr); gap: 14px 28px; align-items: start; }
    .image-tool #tool-result > * { grid-column: 2; }
    .image-tool #tool-result > .image-tool-preview { grid-column: 1; grid-row: 1 / span 4; }
    .image-tool #tool-result .fields { margin: 0; }
    .image-tool #tool-result .tool-result-actions { order: 5; }
    .image-tool #tool-result .tool-reset { margin-top: 0; }
}
@media (max-width: 600px) {
    .tool-card .compare-grid { grid-template-columns: minmax(0, 320px); gap: 18px; }
    .tool-card .compare-arrow { display: none; }
    .tool-card .compare-col .img-box { height: auto; aspect-ratio: 4 / 3; }
    .tool-card .image-tool-preview img { max-height: 200px; }
    .tool-card .heic-preview .img-box { max-height: 190px; }
    .tool-card #crop-canvas { max-height: 30vh; }
}
@media (prefers-reduced-motion: reduce) { .download-btn.is-processing::before { animation: none; } }

/* Yellow is the shared action colour in both themes. Keep its foreground and
   hard interaction border dark instead of inheriting the dark theme's ink. */
.download-btn,
.cta-green,
.cta-banner-btn {
    color: #231E15;
    border-color: #231E15;
    box-shadow: 3px 3px 0 #231E15;
}

.download-btn:not(:disabled):hover,
.cta-green:hover,
.cta-banner-btn:hover {
    color: #231E15;
    box-shadow: 1px 1px 0 #231E15;
}

.tag.compressed,
.quality-note .dot,
.dz-example .stat-badge,
.mockup-card .mock-btn,
.mockup-card .mock-header .badge-convert,
.footer-social a:hover {
    color: #231E15;
}

.download-btn:disabled {
    color: var(--ink-faint);
    border-color: var(--border);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .motion-hero .hero-intro .badge,
    .motion-hero .hero-intro .hero-title,
    .motion-hero .hero-intro .hero-desc,
    .motion-hero .tool-card,
    .motion-hero .hero-trust-row,
    .motion-item,
    .motion-item.is-visible {
        opacity: 1;
        transform: none;
    }

    .tool-card.is-empty .dropzone .cloud-ic,
    .tool-card.has-image .result-panel {
        animation: none;
    }
}

/* Shared visual hierarchy: upload first, quiet editorial rows, compact cards. */
.section-eyebrow { color:#666666; }
html.dark .section-eyebrow { color:#bdbdbd; }
.hero { padding-top: 40px; }
.tool-page > .hero { padding-top: 24px; }
.hero-intro { margin-bottom: 22px; }
.tool-page > .hero h1.hero-title { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.12; }
.dropzone { padding: 32px 24px; }
html.dark .dropzone { background: linear-gradient(145deg, var(--bg-soft), var(--bg-soft-2)); }
.dropzone .link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    margin: 12px 0;
    padding: 11px 24px;
    border: 1px solid #171717;
    border-radius: 10px;
    background: var(--yellow);
    color: #171717;
    font-size: .95rem;
    text-decoration: none;
    transition: background-color .15s ease;
}
.dropzone:hover .link { background: #f3d300; }
.dropzone [data-i18n="dzOr"] { display: none; }
.dropzone:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.tool-card.is-empty .dropzone .cloud-ic { animation: none; }
.tool-format-note {
    max-width: 720px;
    margin: 12px auto 0;
    color: var(--ink-soft);
    text-align: center;
    font-size: .8rem;
    line-height: 1.6;
}
#how-it-works .how-steps { grid-template-columns: 1fr; gap: 0; max-width: 880px; margin: 0 auto; }
#how-it-works .how-step {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 24px;
    padding: 26px 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
}
#how-it-works .how-step:last-child { border-bottom: 1px solid var(--border); }
#how-it-works .how-step-header { grid-row: 1 / 3; margin: 0; align-self: start; padding-top: 3px; }
#how-it-works .how-step-icon { display: none; }
#how-it-works .how-step .step-number { position: static; color: var(--ink-soft); }
#how-it-works .how-step h3, #how-it-works .how-step p { grid-column: 2; }
#how-it-works .how-step:hover,
#image-format-guide .format-guide-card:hover { transform: none; box-shadow: none; }
#image-format-guide .format-guide-grid { grid-template-columns: 1fr; gap: 0; }
#image-format-guide .format-guide-card {
    padding: 24px 0;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    background: transparent;
    align-items: center;
}
#image-format-guide .format-guide-card:last-child { border-bottom: 1px solid var(--border); }
#image-format-guide .format-guide-content {
    display: grid;
    grid-template-columns: minmax(170px, .9fr) minmax(0, 1.5fr) minmax(170px, .9fr);
    gap: 24px;
    align-items: center;
    min-width: 0;
}
#image-format-guide .format-guide-card h3,
#image-format-guide .format-guide-card p { margin: 0; }
#image-format-guide .format-guide-card .format-guide-link { justify-self: end; }
.why-card { box-shadow: none; }
@media (max-width: 760px) {
    .hero, .tool-page > .hero { padding-top: 24px; }
    h1.hero-title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
    .hero-desc { font-size: .96rem; line-height: 1.65; }
    .dropzone { padding: 24px 18px; }
    .dropzone .dz-title { display: none; }
    #how-it-works .how-step { column-gap: 12px; grid-template-columns: 30px minmax(0, 1fr); }
    #image-format-guide .format-guide-card { gap: 14px; align-items: flex-start; }
    #image-format-guide .format-guide-content { grid-template-columns: 1fr; gap: 10px; }
    #image-format-guide .format-guide-card .format-guide-link { justify-self: start; }
}



/* Homepage layout: shared alignment, compact tool entry and useful guide previews. */
.home-page > section { padding-block: 56px; }
.home-page > section > .wrap { max-width: 1040px; }
.home-page > .hero { padding: 32px 0 28px; }
.home-page .hero-intro { max-width: 760px; margin-bottom: 24px; }
.home-page h1.hero-title { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; margin-bottom: 16px; }
.home-page .hero-desc { max-width: 60ch; font-size: 1rem; line-height: 1.65; }
:is(.home-page, .tool-page) .dropzone {
    padding: 28px 24px;
    border: 1px dashed color-mix(in srgb, var(--ink) 25%, var(--bg));
    background: linear-gradient(145deg, var(--bg), var(--bg-soft-2));
    border-radius: 20px;
    box-shadow: 0 3px 14px color-mix(in srgb, var(--ink) 4%, transparent);
}
:is(.home-page, .tool-page) .dropzone:hover,
:is(.home-page, .tool-page) .dragover .dropzone {
    border-color: var(--yellow-dark);
    background: linear-gradient(145deg, var(--bg), var(--yellow-bg));
    box-shadow: var(--surface-shadow);
}
:is(.home-page, .tool-page) .dropzone .cloud-ic,
html.dark :is(.home-page, .tool-page) .dropzone .cloud-ic {
    border: 0;
    border-radius: 14px;
    background: var(--yellow);
    color: #171717;
}
.home-page .dropzone .cloud-ic { width: 48px; height: 48px; margin-bottom: 12px; }
.home-page .home-format-note { display: grid; gap: 4px; max-width: 680px; margin-top: 14px; padding-inline: 12px; }
.home-page .home-format-note span:first-child { color: var(--ink); font-weight: 600; }
.home-page .section-head { margin-bottom: 28px; }
.home-page #how-it-works .how-steps, .home-page .tools-grid-clean, .home-page .faq-list { max-width: none; }
.home-page #how-it-works .how-step { padding-block: 20px; }
.home-page .home-guides { background: var(--bg-soft); border-block: 1px solid var(--border); }
.home-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.home-guide-card { overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); color: var(--ink); text-decoration: none; display: flex; flex-direction: column; }
.home-guide-card:hover { border-color: var(--ink-soft); }
.home-guide-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.home-guide-card > img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.home-guide-copy { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.home-guide-copy h3 { font-size: 1.2rem; line-height: 1.4; margin: 10px 0; }
.home-guide-copy p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 20px; }
.home-guide-copy .guide-read { margin-top: auto; }
@media (max-width: 760px) {
    .home-page > section { padding-block: 36px; }
    .home-page > .hero { padding-block: 24px; }
    .home-page .dropzone { padding: 24px 16px; }
    .home-page .hero-desc { font-size: .95rem; }
    .home-page .home-format-note { font-size: .8rem; }
    .home-guide-grid { grid-template-columns: 1fr; gap: 20px; }
    .home-guide-copy { padding: 20px; }
}

/* Homepage: one clear action, with supporting information below it. */
.home-page { --ink-soft:#5F5F5A; --ink-faint:#5F5F5A; }
html.dark .home-page { --ink-soft:#c5c5bf; --ink-faint:#b5b5af; }
.home-page > section > .wrap { max-width:1168px; }
.home-page > .hero { padding-block:64px 48px; }
.home-page .home-hero-layout { display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center; }
.home-page .hero-intro { width:100%;max-width:900px;margin:0; }
.home-page h1.hero-title { font-size:clamp(3.5rem,5vw,4.5rem);line-height:1.08;letter-spacing:-.045em;margin:20px 0; }
.home-page h1.hero-title mark { background:linear-gradient(transparent 52%,var(--yellow) 52%,var(--yellow) 94%,transparent 94%);color:inherit;padding-inline:.06em; }
html.dark .home-page h1.hero-title mark { background-image:linear-gradient(var(--ink) 52%,#171717 52%,#171717 94%,var(--ink) 94%),linear-gradient(transparent 52%,var(--yellow) 52%,var(--yellow) 94%,transparent 94%);background-clip:text,border-box;color:transparent; }
.home-page .hero-desc { max-width:660px;margin:0 auto;font-size:18px;line-height:1.65; }
.home-page .home-hero-layout > #tool-card { width:100%;max-width:720px;margin:4px 0 0;min-width:0; }
.home-page .home-upload-mascot { width:84px;height:auto;margin:0 auto 12px;pointer-events:none; }
/* The upload area covers the mascot's lower half so it peeks from the corner. */
.tool-page #tool-card { position:relative;isolation:isolate; }
.tool-page #tool-card > .dropzone { position:relative;z-index:1; }
.tool-page #tool-card > .home-upload-mascot { position:absolute;top:-63px;right:-16px;width:93px;height:93px;z-index:0;transform:rotate(12deg);pointer-events:none; }
.tool-page #tool-card > .dropzone[hidden] + .home-upload-mascot { display:none; }
@media(max-width:900px) {
 .tool-page #tool-card > .home-upload-mascot { display:none; }
}
.home-page #tool-card .dropzone { min-height:280px;box-sizing:border-box;padding:28px 24px;background:var(--bg);border:2px dashed var(--border);border-radius:20px;box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.home-page #tool-card .dropzone:is(:hover,.is-dragover),.home-page .dragover #dropzone { background:var(--yellow-bg);border-color:var(--yellow-dark); }
.home-page #tool-card .dz-title { display:block;font-size:20px;margin-bottom:14px; }
.home-page #tool-card .dz-sub .link { display:inline-flex;align-items:center;min-height:48px;padding:12px 28px;border-radius:999px;background:var(--yellow);color:#171717;font-size:16px;font-weight:600;text-decoration:none; }
.home-page #tool-card .batch-hint { margin:12px 0 0;font-size:14px;color:var(--ink-soft); }
.home-trust-row { display:flex;flex-wrap:wrap;justify-content:center;gap:16px 28px;list-style:none;padding:0;margin:20px 0 0;font-size:14px;color:var(--ink-soft); }
.home-trust-row li { display:flex;align-items:center;gap:8px; }
.home-trust-row svg { width:18px;height:18px; }
.tool-page .hero .home-trust-row { margin:48px auto 0; }
.home-page .home-hero-layout > .batch-results { width:100%;max-width:960px;margin:0; }
@media(max-width:700px) {
 .home-page > .hero { padding-block:36px; }
 .home-page h1.hero-title { font-size:clamp(2.25rem,8vw,3.5rem); }
 .home-page .hero-desc { font-size:16px; }
 .home-page #tool-card .dropzone { min-height:280px;padding:24px 16px; }
 .home-trust-row { gap:10px 20px; }
}

/* Tool pages share the homepage scale without changing their workflows. */
.tool-page { --ink-soft:#5F5F5A; --ink-faint:#5F5F5A; }
html.dark .tool-page { --ink-soft:#c5c5bf; --ink-faint:#b5b5af; }
.tool-page > section { padding-block:96px;background:var(--bg); }
.tool-page > .wrap,.tool-page > section > .wrap { max-width:1168px; }
.tool-page > .hero { padding:40px 0 48px; }
.tool-page > .hero .hero-intro { max-width:900px;margin:0 auto 32px;text-align:center; }
.tool-page > .hero h1.hero-title { font-size:clamp(2.5rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.045em;margin:20px 0; }
.tool-page > .hero .hero-desc { max-width:660px;margin:0 auto;font-size:18px;line-height:1.65; }
.tool-page #tool-card { width:100%;max-width:720px;margin-inline:auto; }
.tool-page #tool-card:has(.workspace-result:not([hidden])) { max-width:1000px; }
.tool-page #tool-card .dropzone { min-height:280px;box-sizing:border-box;padding:28px 24px;border:2px dashed var(--border);border-radius:20px;background:var(--bg);box-shadow:none;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.tool-page #tool-card .dropzone[hidden] { display:none; }
.tool-page #tool-card .dropzone:hover,.tool-page #tool-card.dragover .dropzone { background:var(--yellow-bg);border-color:var(--yellow-dark); }
.tool-page #tool-card .dropzone .cloud-ic { width:56px;height:56px;border:0;border-radius:14px;background:var(--yellow);color:#171717;margin-bottom:20px; }
.tool-page #tool-card .dropzone .cloud-ic svg { width:28px;height:28px; }
.tool-page #tool-card .dz-title { display:block;font-size:20px;margin-bottom:14px; }
.tool-page #tool-card .dz-sub .link { display:inline-flex;align-items:center;min-height:48px;padding:12px 28px;border-radius:999px;background:var(--yellow);color:#171717;font-size:16px;font-weight:600;text-decoration:none; }
.tool-page #tool-card .batch-hint,.tool-page #tool-card .dz-sub { font-size:14px;color:var(--ink-soft); }
.tool-page .section-head { text-align:left;max-width:720px;margin:0 0 36px; }
.tool-page .section-title { font-size:clamp(1.8rem,3vw,2.5rem);font-weight:600;line-height:1.2; }
.tool-page .section-desc { margin-inline:0;font-size:16px;line-height:1.65;color:var(--ink-soft); }
.tool-page #how-it-works .section-eyebrow { display:none; }
.tool-page #how-it-works .how-steps,.tool-page .faq-list,.tool-page .converter-grid { max-width:none; }
.tool-page > .tool-info { padding-block:48px 0; }
.tool-page .tool-info .format-quality-tip { max-width:none;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--bg-soft);box-shadow:none; }
.tool-page .tool-info .format-quality-tip .section-title { margin:0 0 6px;font-size:16px;line-height:1.4; }
.tool-page .tool-info .format-quality-tip p { margin:0;font-size:14px;line-height:1.65; }
.tool-page .tool-guides { background:var(--bg);border:0; }
.tool-guides .home-guide-grid:has(> :only-child) { grid-template-columns:minmax(0,1fr);max-width:640px;margin-inline:auto; }
.tool-page .image-tool .fields label { min-width:0; }
.tool-page .image-tool .fields input,.tool-page .image-tool .fields select { max-width:100%; }
@media(max-width:700px) {
 .tool-page > section { padding-block:48px; }
 .tool-page > .hero { padding:24px 0 36px; }
 .tool-page > .hero h1.hero-title { font-size:clamp(2.25rem,8vw,3.5rem); }
 .tool-page > .hero .hero-desc { font-size:16px; }
 .tool-page #tool-card .dropzone { padding:24px 16px; }
 .tool-page > .tool-info { padding-block:32px 0; }
}

/* Guides share the tools' typography, surfaces and yellow action color. */
.guide-index, .guide-page { padding-bottom: 64px; }
.guide-heading { max-width: 820px; margin: 28px 0 42px; overflow-wrap: anywhere; }
.guide-heading h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); font-weight: 600; line-height: 1.14; margin: 14px 0 20px; text-wrap: balance; }
.guide-lead { color: var(--ink-soft); font-size: 1.1rem; line-height: 1.7; }
.guide-meta { font-size: .82rem; color: var(--ink-soft); }
.guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.guide-card { display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft-2); text-decoration: none; }
.guide-card:hover { border-color: var(--ink-soft); }
.guide-category { color: var(--ink-soft); font-size: .78rem; font-weight: 700; }
.guide-card h2 { font-size: 1.2rem; line-height: 1.4; margin: 14px 0 10px; }
.guide-card p { font-size: .92rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 24px; }
.guide-read { font-weight: 700; font-size: .86rem; margin-top: auto; }
.guide-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.guide-toc { position: sticky; top: 100px; font-size: .86rem; padding: 20px 0; border-top: 1px solid var(--border); }
.guide-toc ol { list-style: none; padding: 0; margin: 14px 0 0; }
.guide-toc li { margin: 0 0 12px; line-height: 1.5; }
.guide-toc a { color: var(--ink-soft); text-decoration: none; }
.guide-toc a:hover { color: var(--ink); text-decoration: underline; }
.guide-prose { min-width: 0; max-width: 780px; font-size: 1rem; line-height: 1.8; color: var(--ink-soft); }
.guide-prose > h2 { margin: 38px 0 14px; font-size: 1.55rem; font-weight: 600; line-height: 1.35; scroll-margin-top: 100px; }
.guide-prose p { margin: 0 0 18px; }
.guide-prose :not(pre) > code { overflow-wrap: anywhere; }
.guide-prose li { margin-bottom: 12px; }
.guide-prose a, .tool-learning a { text-underline-offset: 3px; }
.guide-prose .format-quality-tip h2 { font-size: 1rem; }
.guide-prose .format-quality-tip {
    margin-bottom: 24px;
    border-color: color-mix(in srgb, var(--yellow) 30%, var(--border));
    background: color-mix(in srgb, var(--yellow-bg) 55%, var(--bg));
    border-radius: 16px;
}
.guide-prose .format-quality-tip[role="note"] .format-quality-text h3 { margin-bottom: 14px; }
.guide-prose .format-quality-tip[role="note"] .format-quality-text p + p { margin-top: 14px; }
.guide-table-wrap { overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); border-radius: 10px; }
.guide-table-wrap table { width: 100%; border-collapse: collapse; font-size: .88rem; line-height: 1.55; }
.guide-table-wrap caption { text-align: left; padding: 16px; color: var(--ink); font-weight: 700; background: var(--bg-soft-2); }
.guide-table-wrap th, .guide-table-wrap td { padding: 14px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.guide-table-wrap th { color: var(--ink); }
.guide-table-wrap pre {
    margin: 0;
    padding: 22px 24px;
    background: color-mix(in srgb, var(--ink) 4%, var(--bg-soft-2));
    color: var(--ink);
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    font-size: .875rem;
    line-height: 1.75;
    tab-size: 2;
    white-space: pre;
}
.guide-table-wrap pre code { font: inherit; color: inherit; background: none; padding: 0; }
.guide-table-wrap:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.guide-action { margin: 36px 0; padding: 26px; border: 1px solid var(--yellow-border); border-radius: 12px; background: var(--yellow-bg); }
.guide-action h2 { font-size: 1.25rem; margin: 0 0 10px; }
.guide-action p { color: var(--ink-soft); line-height: 1.65; }
.guide-action a { display: inline-flex; margin: 8px 18px 0 0; }
.guide-action .cta-green { color: #171717; background: var(--yellow); }
.guide-related { margin-top: 60px; border-top: 1px solid var(--border); padding-top: 24px; }
.guide-preferred-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); scroll-margin-top: 100px; }
.guide-preferred-source > div { min-width: 0; }
.guide-ai { margin: 20px 0 32px; font-size: .8125rem; color: var(--ink); scroll-margin-top: 100px; }
.guide-ai-services { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.guide-ai-label { display: inline-flex; align-items: center; min-height: 44px; margin-right: 4px; color: var(--ink-soft); font-size: .875rem; font-weight: 400; }
.guide-ai-services a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--ink); font: inherit; font-weight: 600; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.guide-ai-logo { flex: none; width: 18px; height: 18px; object-fit: contain; }
html.dark .guide-ai-logo-mono { filter: invert(1); }
.guide-ai a:hover { background: var(--bg-soft-2); border-color: var(--ink-faint); }
.guide-ai a:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 600px) { .guide-ai-label { flex-basis: 100%; min-height: auto; margin: 0 0 2px; } .guide-ai-services a { padding-inline: 12px; } }
@media (prefers-reduced-motion: reduce) { .guide-ai-services a { transition: none; } }
.guide-preferred-source h2 { margin: 0 0 6px; font-size: 1.125rem; font-weight: 600; line-height: 1.4; }
.guide-preferred-source p { margin: 0; font-size: .9rem; line-height: 1.6; }
.guide-preferred-link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); background: var(--bg); font-size: .875rem; font-weight: 600; line-height: 1.5; text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.guide-preferred-link img { flex: none; width: 18px; height: 18px; object-fit: contain; }
.guide-preferred-link:hover { border-color: var(--ink-faint); background: var(--bg-soft-2); }
.guide-preferred-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
@media (max-width: 760px) { .guide-preferred-source { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; } .guide-preferred-link { justify-self: start; border-radius: 16px; padding: 10px 14px; } }
@media (prefers-reduced-motion: reduce) { .guide-preferred-link { transition: none; } }
.guide-related .guide-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.tool-learning { padding-top: 32px; padding-bottom: 32px; }
.tool-learning > h2 { font-size: 1.65rem; margin-bottom: 28px; }
.tool-learning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 40px; }
.tool-learning-grid section { padding: 20px 0 0; border-top: 1px solid var(--border); }
.tool-learning-grid h3 { font-size: 1.05rem; margin: 0 0 12px; }
.tool-learning-grid p { color: var(--ink-soft); font-size: .94rem; line-height: 1.75; margin: 0; }
@media (max-width: 900px) {
    .guide-grid { grid-template-columns: 1fr; }
    .guide-layout { grid-template-columns: 1fr; gap: 24px; }
    .guide-toc { position: static; padding: 20px; background: var(--bg-soft-2); border-radius: 10px; }
    .guide-toc ol { columns: 2; column-gap: 24px; }
    .guide-toc li { break-inside: avoid; }
}
@media (max-width: 600px) {
    .guide-related .guide-grid, .tool-learning-grid { grid-template-columns: 1fr; }
    .guide-heading { margin: 18px 0 28px; }
    .guide-toc ol { columns: 1; }
    .guide-card, .guide-action { padding: 20px; }
    .guide-table-wrap th, .guide-table-wrap td { padding: 10px; overflow-wrap: anywhere; }
    .guide-table-wrap pre { padding: 18px 16px; font-size: .8125rem; }
}

.guide-cover { display: block; width: 100%; height: auto; margin: 0 0 28px; border-radius: 12px; }
.guide-figure { margin: 28px 0; }
.guide-figure .guide-cover { margin: 0; }
.guide-figure figcaption { margin-top: 10px; font-size: .875rem; line-height: 1.6; color: var(--ink-soft); }
.guide-export-preview { margin: 24px 0; }
.guide-export-preview .tool-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: min(100%, 360px); min-width: 0; margin: 0; padding: 0; border: 0; }
.guide-export-preview .tool-choices legend { color: var(--ink); font-weight: 600; }
.guide-export-preview .tool-choices label { display: block; position: relative; min-width: 0; cursor: pointer; }
.guide-export-preview .tool-choices strong { font-size: .875rem; font-weight: 600; }
.guide-export-preview .tool-choices small { font-size: .75rem; }
.guide-export-preview .guide-figure { max-width: 600px; margin: 16px 0 0; }
.guide-export-preview img { display: block; width: 100%; height: auto; image-rendering: auto; }
@supports selector(:has(input:checked)) {
    .guide-export-preview [data-export="2400"],
    .guide-export-preview:has(input[value="2400"]:checked) [data-export="1200"] { display: none; }
    .guide-export-preview:has(input[value="2400"]:checked) [data-export="2400"] { display: block; }
}

/* Shared capsule actions across tools, guides and homepage. */
html body :is(.download-btn, .cta-green, .cta-banner-btn, .dropzone .link) {
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    background: var(--yellow);
    color: #171717;
    min-height: 46px;
    padding: 12px 24px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    transform: none;
    transition: background-color .15s ease;
}
html body :is(.download-btn, .cta-green, .cta-banner-btn):not(:disabled):is(:hover, :active),
html body .dropzone:hover .link {
    border: 0;
    background: var(--yellow-dark);
    color: #171717;
    box-shadow: none;
    transform: none;
}
html body :is(.download-btn, .cta-green, .cta-banner-btn):focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 3px;
}
html body .download-btn:disabled {
    background: var(--bg-soft-2);
    color: var(--ink-faint);
    box-shadow: none;
    cursor: not-allowed;
}
html.dark .tool-page .download-btn:not(:disabled) { border:0; box-shadow:none; }
html body :is(.tool-reset, .tool-secondary) {
    border: 0;
    border-radius: 999px;
    box-shadow: none;
    min-height: 44px;
    padding: 8px 18px;
    background: transparent;
    color: var(--ink-soft);
    text-decoration: none;
    transform: none;
}
html body :is(.tool-reset, .tool-secondary):hover { background:var(--bg-soft-2); color:var(--ink); }
html body :is(.tool-reset, .tool-secondary):focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
html body .cta-green:is([data-i18n="toolBack"], [data-i18n="convBackHome"]) {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: var(--ink-soft);
    padding: 8px 14px;
    min-height: 44px;
    font-weight: 600;
}
html body .cta-green:is([data-i18n="toolBack"], [data-i18n="convBackHome"]):hover { background:var(--bg-soft-2); color:var(--ink); }

/* Editorial and information pages share the same outer alignment as the tools. */
.guide-index.wrap, .guide-page.wrap, .info-page > .wrap { max-width: 1040px; }
.guide-index, .guide-page, .info-page { padding-bottom: 56px; }
.guide-heading { margin: 24px 0 32px; }
.guide-heading h1, .legal-page-header h1 { font-size: clamp(2rem, 4vw, 3.15rem); line-height: 1.12; }
.guide-lead { font-size: 1rem; line-height: 1.7; }
.guide-index .guide-heading { max-width: 760px; margin-inline: auto; text-align: center; }
.guide-index .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.guide-card { border-radius: 14px; background: var(--bg); padding: 24px; }
.guide-card:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
.guide-index .guide-card { padding:0;overflow:hidden; }
.guide-index .guide-card > img { display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--bg-soft); }
.guide-index .guide-card-copy { display:flex;flex-direction:column;flex:1;padding:24px; }
@media (max-width:760px) {
    .guide-index .guide-card-copy { padding:20px; }
}
.guide-layout { gap: 36px; }
.guide-prose { max-width: 720px; }
.guide-related { margin-top: 48px; padding-block: 32px 0; }
.legal-content { max-width: 100%; margin: 24px auto 0; padding: 40px; border-radius: 16px; box-shadow: none; }
.legal-page-header { margin-bottom: 28px; padding-bottom: 24px; }
.legal-content > p, .legal-content > ul, .legal-content > ol { max-width: 72ch; }
/* Information pages: a quiet reading column and direct links to each topic. */
.editorial-page .legal-content { padding: 0; border: 0; border-radius: 0; background: transparent; }
.editorial-page .legal-page-header { margin-bottom: 32px; padding-bottom: 32px; }
.editorial-page .section-eyebrow { color: var(--yellow-text); }
.editorial-page .legal-lead { max-width: 62ch; margin: 18px 0 14px; font-size: 1.05rem; line-height: 1.7; }
.editorial-page .legal-page-header h1 { overflow-wrap:anywhere;hyphens:auto; }
@media(max-width:600px) { .editorial-page .legal-page-header h1 { font-size:clamp(1.75rem,8vw,2.4rem); } }
.editorial-page .legal-updated { margin-bottom: 0; font-size: .85rem; }
.legal-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; align-items: start; }
.legal-toc { position: sticky; top: 100px; font-size: .85rem; line-height: 1.5; }
.legal-toc summary { color: var(--ink); font-weight: 600; }
.legal-toc ol { list-style: none; padding: 0; margin: 18px 0 0; }
.legal-toc li + li { margin-top: 14px; }
.legal-toc a { display: block; color: var(--ink-soft); text-decoration: none; }
.legal-toc a:hover { color: var(--ink); text-decoration: underline; }
.legal-body { min-width: 0; max-width: 68ch; }
.legal-body h2 { margin: 32px 0 14px; padding-top: 28px; border-top: 1px solid var(--border); font-size: 1.25rem; font-weight: 600; line-height: 1.4; scroll-margin-top: 100px; }
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body p { margin: 0 0 16px; }
.legal-body > p:last-child { margin-bottom: 0; }
@media (max-width: 760px) {
    .legal-layout { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .legal-toc { position: static; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
    .legal-toc a { padding-block: 6px; }
    .legal-toc li + li { margin-top: 2px; }
    .editorial-page .legal-page-header { margin-bottom: 24px; padding-bottom: 24px; }
    .editorial-page .legal-content { padding: 0; }
}
@media (max-width: 760px) {
    .guide-index, .guide-page, .info-page { padding-bottom: 36px; }
    .guide-index .guide-grid { grid-template-columns: 1fr; gap: 20px; }
    .guide-heading { margin-block: 20px 28px; }
    .guide-card, .legal-content { padding: 20px; }
    .guide-layout { gap: 24px; }
    .guide-related { margin-top: 36px; }
}
/* Loaded-image workspaces: shared hierarchy with tool-specific controls. */
.guide-prose .format-test { padding: 0; margin-top: 40px; }
.guide-prose .format-test > h2 { margin: 38px 0 14px; font-size: 1.55rem; font-weight: 600; line-height: 1.35; scroll-margin-top: 100px; }
.format-test-source { margin: 20px 0; }
.format-test-source img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 12px; }
.format-test-details { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; margin: 20px 0; }
.format-test-details figure { min-width: 0; margin: 0; }
.format-test-details img { display: block; width: 100%; max-width: 440px; height: auto; border: 1px solid var(--border); border-radius: 8px; }
.format-test-details figcaption { margin-top: 6px; font-size: .85rem; color: var(--ink-soft); }
.format-test-downloads { font-size: .9rem; }
#upload-error { box-sizing:border-box;width:100%;max-width:720px;margin:0 auto 16px;text-align:left;border-width:1px;overflow-wrap:anywhere; }
#upload-error:empty { display:none; }
#upload-error:has(+ #tool-card .workspace-result:not([hidden])), #upload-error:has(+ #tool-card.markup-tool.has-image) { max-width:1000px; }
.home-page .home-hero-layout > #upload-error { margin-bottom:0; }
.tool-card .workspace-header { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px; }
.workspace-file,.workspace-header .crop-file-info { display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;margin:0; }
.workspace-file strong,.workspace-header .crop-file-name { overflow-wrap:anywhere;font-size:.95rem; }
.workspace-file span,.workspace-output-size { color:var(--ink-faint);font-size:.82rem; }
.workspace-header .tool-reset { flex-shrink:0;margin:0; }
.tool-card #tool-result.workspace-result { display:block; }
.tool-card .workspace-grid { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(240px,1fr);align-items:start;gap:28px; }
.workspace-settings { display:flex;flex-direction:column;gap:16px;min-width:0; }
.workspace-settings .fields,.workspace-settings .quality-control,.workspace-settings .quality-note { margin:0; }
.workspace-settings .fields { display:flex;flex-direction:column;gap:16px; }
.workspace-settings .fields label { display:flex;flex-direction:column;gap:8px; }
.workspace-settings input:not([type=range]):not([type=color]),.workspace-settings select { width:100%;min-width:0; }
.workspace-settings #custom-size { display:flex;flex-direction:column;gap:16px; }
.workspace-settings .quality-control { flex-wrap:wrap; }
.workspace-settings .quality-control input { flex:1;min-width:100px; }
.workspace-settings .quality-note { background:transparent;border:0;padding:0;text-align:left;font-size:.85rem;line-height:1.6; }
.workspace-settings #status { margin:0;color:var(--ink-soft);font-size:.85rem;line-height:1.6; }
.workspace-output-size { margin:0;order:2; }
.workspace-settings #download,.workspace-settings #download-btn { order:3;width:100%; }
.tool-card .workspace-grid .image-tool-preview { margin:0;min-height:240px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:16px;padding:16px; }
.tool-card .workspace-grid .image-tool-preview img { width:100%;max-height:320px;object-fit:contain;border-radius:8px; }
.tool-card .workspace-grid .image-tool-preview.is-batch { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px; }
.workspace-grid:has(.image-tool-preview.is-batch) { grid-template-areas:"preview settings"; }
.workspace-grid:has(.image-tool-preview.is-batch) .workspace-settings { grid-area:settings; }
.workspace-grid:has(.image-tool-preview.is-batch) .tool-preview-column { grid-area:preview; }
.image-preview-item { min-width:0;margin:0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg); }
.image-preview-item figcaption { display:flex;flex-direction:column;gap:6px;margin-top:10px;font-size:13px;line-height:1.5;overflow-wrap:anywhere; }
.image-preview-item figcaption strong { font-weight:600; }
.image-preview-item figcaption span { color:var(--ink-soft); }
.image-preview-item figcaption a { display:inline-flex;align-items:center;min-height:44px;align-self:flex-start;font-weight:600;text-underline-offset:3px; }
@media(max-width:760px) {
 .tool-card .workspace-grid .image-tool-preview.is-batch { grid-template-columns:minmax(0,1fr); }
 .workspace-grid:has(.image-tool-preview.is-batch) { grid-template-areas:"settings" "preview"; }
}
.tool-card .workspace-comparison .compare-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;margin:0; }
.workspace-comparison .compare-arrow { display:none; }
.tool-card .workspace-comparison .compare-col .img-box { max-height:220px; }
.workspace-settings .crop-controls { display:flex;flex-direction:column;gap:16px;margin:0; }
.workspace-settings .crop-actions { display:flex;flex-direction:column;gap:8px;margin:0; }
.workspace-settings #crop-download { order:-1;width:100%; }
@media(max-width:760px) {
 .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr);gap:22px; }
 .tool-card .workspace-header { align-items:flex-start;gap:8px;margin-bottom:18px; }
 .workspace-header .tool-reset { font-size:.8rem;padding:8px 18px;max-width:45%; }
 .tool-card .workspace-grid .image-tool-preview { min-height:0; }
 .tool-card .workspace-grid .image-tool-preview img { max-height:210px; }
 .tool-card .workspace-comparison .compare-col .img-box { max-height:150px; }
 .workspace-settings .fields { gap:12px; }
}
.workspace-header .tool-result-actions { margin:0;flex-shrink:0; }
.workspace-header .tool-result-actions .tool-reset { max-width:none; }
.workspace-settings .crop-controls { background:transparent;border:0;padding:0; }
.tool-card .workspace-grid .image-tool-preview { background:var(--bg-soft-2); }
.workspace-header .crop-file-info { background:transparent;border:0;padding:0;box-shadow:none;flex:1; }
.workspace-header .crop-file-name { max-width:100%;white-space:normal; }
.workspace-settings .crop-controls { align-items:stretch;text-align:left; }
.workspace-settings .crop-control-group { align-items:stretch; }
.workspace-settings .crop-control-group select { width:100%; }
/* Dimension fields use readable regular text instead of inheriting bold labels. */
.image-tool .workspace-settings :is(#width, #height) {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}
.image-tool .workspace-settings :is(#width, #height)::placeholder {
    font-weight: 400;
    color: var(--ink-faint);
    opacity: 1;
}
.image-tool .workspace-settings #preset {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}
/* Keep comparison previews framed without a heavy outline. */
.tool-card .compare-col .img-box {
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
}
/* Dark tool notes remain plain text, including error messages. */
html.dark .tool-card .quality-note,
html.dark .tool-card #quality-note-text {
    background: transparent;
}
.conversion-limit { max-width: 520px; margin: 12px auto 0; font-size: 13px; line-height: 1.6; color: var(--ink-soft); }
.related-all-tools { margin: 24px 0 0; text-align: center; }
.related-all-tools a { color: var(--ink); text-underline-offset: 4px; }

.guide-index .guide-heading { margin-bottom:36px; }
.guide-index .guide-toolbar { display:grid;grid-template-columns:minmax(180px,232px) 1fr minmax(240px,320px);align-items:center;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border); }
.guide-index .guide-search { grid-column:3;grid-row:1;min-width:0;margin:0;text-align:left; }
.guide-index .guide-search-label, .guide-index .guide-topic-label { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.guide-index .guide-search-field { position:relative;display:flex;align-items:center;height:44px;border:1px solid transparent;border-radius:999px;background:var(--bg-soft);transition:border-color .15s,box-shadow .15s; }
.guide-index .guide-search-field:hover { border-color:var(--border); }
.guide-index .guide-search-field:focus-within { border-color:var(--border);box-shadow:0 0 0 2px var(--yellow);background:var(--bg); }
.guide-index .guide-search-icon { position:absolute;left:15px;width:18px;height:18px;color:var(--ink-faint);pointer-events:none; }
html body .guide-index #guide-search-input { width:100%;height:100%;min-height:0;margin:0;padding:0 44px 0 42px;border:0;border-radius:999px;box-shadow:none;outline:none;background:transparent;color:var(--ink);font:inherit;font-size:16px;line-height:1.4;appearance:none; }
.guide-index #guide-search-input::placeholder { color:var(--ink-faint);opacity:1; }
.guide-index #guide-search-input::-webkit-search-cancel-button { display:none; }
html body .guide-index .guide-search-clear { position:absolute;right:0;display:flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:var(--ink-soft);cursor:pointer; }
.guide-index .guide-search-clear[hidden] { display:none; }
.guide-index .guide-search-clear:hover { background:var(--bg-soft);color:var(--ink); }
.guide-index .guide-search-clear:focus-visible { outline:2px solid var(--ink);outline-offset:-4px; }
.guide-index .guide-filters { grid-column:1;grid-row:1;margin:0;min-width:0; }
html body .guide-index #guide-topic-select { display:block;width:100%;max-width:232px;min-width:0;min-height:44px;margin:0;padding:8px 24px 8px 0;border:0;border-radius:6px;box-shadow:none;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;line-height:1.4;cursor:pointer; }
html body .guide-index #guide-topic-select:focus-visible { outline:2px solid var(--yellow);outline-offset:4px; }
.guide-index .guide-result-summary { grid-column:2;grid-row:1;display:flex;align-items:center;gap:16px;min-height:44px;margin:0;font-size:13px;color:var(--ink-soft); }
.guide-index .guide-result-count { margin:0;white-space:nowrap; }
html body .guide-index .guide-result-reset { border:0;box-shadow:none;border-radius:6px;min-height:44px;padding:4px 0;background:transparent;color:var(--ink-soft);font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer; }
.guide-index .guide-result-reset[hidden] { display:none; }
.guide-index .guide-result-reset:hover { color:var(--ink); }
.guide-index .guide-result-reset:focus-visible { outline:2px solid var(--yellow);outline-offset:4px; }
.guide-index .guide-empty { margin:0 0 32px;padding:48px 16px 56px;text-align:center;border-top:1px solid var(--border); }
.guide-index .guide-empty h2 { margin:0 0 10px;font-size:22px;line-height:1.35;font-weight:600; }
.guide-index .guide-empty p { margin:0 auto;max-width:460px;color:var(--ink-soft);font-size:16px;line-height:1.65; }
@media(max-width:600px) {
 .guide-index .guide-heading { margin-bottom:28px; }
 .guide-index .guide-toolbar { grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;padding-bottom:10px;margin-bottom:20px; }
 .guide-index .guide-search { grid-column:1 / -1;grid-row:1; }
 .guide-index .guide-search-field { height:48px; }
 .guide-index .guide-filters { grid-column:1;grid-row:2; }
 html body .guide-index #guide-topic-select { min-height:44px;font-size:14px; }
 .guide-index .guide-result-summary { grid-column:2;grid-row:2;justify-content:flex-end;gap:12px; }
 .guide-index .guide-empty { padding:32px 8px 40px; }
}
@media(min-width:601px) and (max-width:800px) {
 .guide-index .guide-toolbar { grid-template-columns:minmax(0,1fr) auto;gap:10px 16px; }
 .guide-index .guide-search { grid-column:1 / -1;grid-row:1; }
 .guide-index .guide-filters { grid-column:1;grid-row:2; }
 .guide-index .guide-result-summary { grid-column:2;grid-row:2; }
}

.guide-index .guide-toolbar[hidden], .guide-index .guide-empty[hidden] { display:none; }
.guide-index #guide-list { scroll-margin-top: 110px; }
.guide-index #guide-list:focus { outline: none; }
.guide-pagination { margin-top: 32px; padding-top: 24px; text-align: center; }
.guide-page-status { margin: 0 0 12px; color: var(--ink-soft); font-size: .8125rem; }
.guide-page-controls, .guide-page-numbers { display: flex; justify-content: center; align-items: center; gap: 8px; }
.guide-page-controls { flex-wrap: wrap; }
html body .guide-index .guide-pagination button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 10px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .875rem; cursor: pointer; }
html body .guide-index .guide-pagination button[data-guide-page] { width: 44px; padding: 0; }
html body .guide-index .guide-pagination button svg { flex-shrink: 0; }
html body .guide-index .guide-pagination button:hover:not(:disabled) { background: var(--bg-soft-2); }
html body .guide-index .guide-pagination button[aria-current="page"] { background: var(--yellow); border-color: var(--yellow); color: #171717; }
html body .guide-index .guide-pagination button:disabled { opacity: .4; cursor: default; }
html body .guide-index .guide-pagination button:focus-visible { outline: none; background: var(--yellow-bg); color: var(--ink); }
html body .guide-index .guide-pagination button[aria-current="page"]:focus-visible { background: var(--yellow); color: #171717; }
@media (max-width:480px) {
    .guide-page-controls, .guide-page-numbers { gap: 4px; }
    html body .guide-index .guide-pagination button[data-page-step] { padding-inline: 6px; font-size: .8125rem; }
    html body .guide-index .guide-pagination button svg { display: none; }
}
@media (min-width:761px) and (max-width:1000px) { .guide-index .guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* Shared navigation: light surfaces and rounded controls. */
header.site .header-inner { min-height: 76px; height: auto; gap: 24px; padding: 10px 0; }
header.site .brand { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; gap: 8px; }
header.site nav.main-nav { gap: 4px; }
header.site nav.main-nav a { padding: 12px 20px; border-radius: 999px; font-size: .9375rem; transition: background-color .16s, color .16s; white-space: nowrap; }
header.site nav.main-nav a:hover { background: var(--bg-soft-2); }
header.site nav.main-nav a.active { background: var(--yellow); color: #171717; }
header.site nav.main-nav a.active::after { display: none; }
header.site .header-right { gap: 8px; }
header.site .theme-toggle, header.site .menu-toggle { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--bg); color: var(--ink); transition: background-color .16s, border-color .16s; }
header.site .theme-toggle:hover, header.site .menu-toggle:hover { background: var(--bg-soft-2); border-color: var(--ink-faint); }
header.site .menu-toggle.open { background: var(--yellow); border-color: var(--yellow); color: #171717; }
header.site .language-switcher { position: relative; display: flex; align-items: center; border-radius: 10px; color: var(--ink-soft); }
header.site .language-switcher:hover { background: var(--bg-soft-2); color: var(--ink); }
header.site .language-switcher > svg { position: absolute; left: 10px; width: 18px; height: 18px; pointer-events: none; }
header.site .language-switcher select { appearance: none; min-height: 44px; max-width: none; border: 0; border-radius: 10px; padding: 8px 30px 8px 36px; font-size: .875rem; font-weight: 500; color: inherit; background: transparent; }
header.site .language-switcher select:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
header.site .language-switcher select option { color: var(--ink); background: var(--bg); }
.language-chevron { position: absolute; right: 12px; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); pointer-events: none; }
.recommended-menu { position: relative; }
.recommended-menu > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 12px 16px; border-radius: 999px; color: var(--ink-soft); font-size: .9375rem; font-weight: 500; white-space: nowrap; list-style: none; cursor: pointer; }
.recommended-menu > summary::-webkit-details-marker { display: none; }
.recommended-menu > summary:hover, .recommended-menu[open] > summary { background: var(--bg-soft-2); color: var(--ink); }
.recommended-menu > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.recommended-chevron { width: 6px; height: 6px; margin: -3px 2px 0 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .16s; }
.recommended-menu[open] .recommended-chevron { margin-top: 3px; transform: rotate(225deg); }
.recommended-panel { position: absolute; top: 100%; right: 0; width: 368px; padding-top: 10px; z-index: 60; }
/* A light, isolated surface lets white-backed partner logos blend into every row. */
.recommended-list { --ink: #202124; --ink-soft: #66676b; margin: 0; padding: 8px; border: 1px solid #e7e2da; border-radius: 20px; background: #fff; box-shadow: 0 16px 48px #00000018, 0 2px 8px #00000008; list-style: none; isolation: isolate; }
header.site nav.main-nav .recommended-link, header.site #mobile-nav .recommended-link { display: flex; align-items: center; gap: 14px; min-height: 78px; padding: 12px; border: 1px solid transparent; border-radius: 12px; color: var(--ink); text-decoration: none; white-space: normal; }
header.site nav.main-nav .recommended-link:is(:hover,:focus-visible), header.site #mobile-nav .recommended-link:is(:hover,:focus-visible) { background: #fff8e5; border-color: #f1e3bb; color: var(--ink); }
.recommended-link:focus-visible { outline: 2px solid #202124; outline-offset: -2px; }
.recommended-external { margin-left:auto;flex-shrink:0;width:16px;height:16px;color:#93938e; }
.recommended-link:is(:hover,:focus-visible) .recommended-external { color:#202124; }
.recommended-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; height: 52px; mix-blend-mode: multiply; }
.recommended-logo img { width: 56px; height: auto; max-height: 52px; object-fit: contain; filter: grayscale(1); transition: filter .16s; }
.recommended-logo .recommended-symbol { width: 42px; }
.recommended-logo .recommended-symbol[src*="todoist"] { width: 32px; }
.recommended-logo .recommended-sanebox { width: 56px; }
.recommended-elementor { display: block; width: 34px; height: 34px; overflow: hidden; }
.recommended-logo .recommended-elementor img { width: auto; max-width: none; height: 34px; max-height: none; }
.recommended-link:is(:hover,:focus-visible) img { filter: none; }
.recommended-copy { display: grid; gap: 3px; min-width: 0; }
.recommended-name { font-size: .9375rem; font-weight: 650; line-height: 1.4; }
.recommended-description { font-size: .8125rem; font-weight: 400; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
@media (max-width: 1100px) {
    header.site nav.main-nav { display: none; }
    header.site .menu-toggle { display: flex; }
    header.site #mobile-nav.open { display: flex; flex-direction: column; gap: 4px; margin: 0 0 14px; padding: 10px; border: 1px solid var(--border); border-radius: 16px; background: var(--bg); max-height: calc(100dvh - 100px); overflow-y: auto; }
    header.site #mobile-nav a { display: flex; align-items: center; min-height: 48px; padding: 12px 16px; border: 0; border-radius: 10px; color: var(--ink-soft); font-size: .9375rem; font-weight: 500; text-decoration: none; transition: background-color .16s, color .16s; }
    header.site #mobile-nav a:hover { background: var(--bg-soft-2); color: var(--ink); }
    header.site #mobile-nav a.active { background: color-mix(in srgb, var(--yellow) 16%, var(--bg)); color: var(--ink); font-weight: 600; }
    #language-mobile-slot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    header.site #language-mobile-slot select { width: 100%; min-height: 48px; padding-left: 42px; font-size: .9375rem; }
    header.site #language-mobile-slot .language-switcher > svg { left: 16px; }
    #recommended-mobile-slot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
    #recommended-mobile-slot summary { border-radius: 10px; white-space: normal; }
    #recommended-mobile-slot .recommended-panel { position: static; width: auto; padding-top: 4px; }
    #recommended-mobile-slot .recommended-list { padding: 4px; border-radius: 14px; box-shadow: none; }
    header.site #mobile-nav .recommended-link { gap: 10px; padding: 10px 8px; }
    #recommended-mobile-slot .recommended-logo { flex-basis: 44px; }
}
@media (max-width: 520px) {
    header.site .header-inner { min-height: 68px; gap: 12px; padding: 8px 0; }
    header.site .header-right { gap: 6px; }
}

.workspace-settings .tool-check { display:flex;align-items:flex-start;gap:10px;font-size:.875rem;font-weight:500;line-height:1.5;margin:16px 0 8px;color:var(--ink); }
.image-tool .workspace-settings .tool-check input[type=checkbox] { width:18px;height:18px;min-height:18px;flex:0 0 18px;margin:2px 0 0;accent-color:var(--ink); }
.workspace-settings .tool-field-help { font-size:.8125rem;line-height:1.6;color:var(--ink-soft);margin:0 0 18px; }

/* One-page preview of compact, tool-specific instructions. */
.home-page .tool-filters { display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:24px; }
.home-page .tool-filters[hidden], .home-page .tool-card-item[hidden] { display:none; }
html body .home-page .tool-filter { border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--ink-soft);font:inherit;font-size:.85rem;line-height:1.4;min-height:44px;padding:10px 16px;cursor:pointer; }
html body .home-page .tool-filter:hover { background:var(--bg-soft-2);color:var(--ink); }
html body .home-page .tool-filter[aria-pressed=true] { background:var(--yellow);color:#171717;border-color:var(--yellow); }
html body .home-page .tool-filter:focus-visible { outline:3px solid var(--ink);outline-offset:3px; }
.home-page #home-tool-list .tool-card-item { border:1px solid var(--border);box-shadow:none;gap:12px;padding:20px 18px;align-items:flex-start; }
.home-page #home-tool-list .tool-card-item:hover { background:var(--yellow-bg);border-color:var(--yellow-border);transform:none;box-shadow:none; }
.home-page #home-tool-list .tool-card-ic { width:24px;height:24px;background:transparent;border:0;border-radius:0; }
.home-page #home-tool-list .tool-card-title { font-size:.9rem; }
.home-page #home-tool-list .tool-card-desc { color:var(--ink-soft); }
.home-page .section-title { font-weight:600;font-size:clamp(1.8rem,3vw,2.5rem);line-height:1.2; }

.home-page #home-tool-list { display:block; }
.home-page .tool-group-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;margin:32px 0 16px;padding-bottom:12px;border-bottom:1px solid var(--border);font-size:18px;font-weight:600; }
.home-page .tool-group-heading:first-child { margin-top:0; }
.tool-group-count { font-size:13px;font-weight:400;color:var(--ink-soft); }
.compression-tools,.conversion-tools,.editing-tools { display:grid;gap:12px; }
.compression-tools { grid-template-columns:repeat(2,minmax(0,1fr)); }
.conversion-tools { grid-template-columns:repeat(5,minmax(0,1fr)); }
.editing-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-page #home-tool-list.tools-grid-clean .tool-card-item { position:relative;display:flex;flex-direction:row;gap:12px;padding:16px;border-radius:16px;min-height:92px;min-width:0;background:var(--bg);border:1px solid var(--border);box-shadow:none;transition:border-color .18s; }
.home-page #home-tool-list.tools-grid-clean .tool-card-item:is(:hover,:focus-visible) { border-color:var(--ink-soft);background:var(--bg);box-shadow:none;transform:none; }
.home-page #home-tool-list.tools-grid-clean .tool-card-featured { border-color:var(--yellow-dark); }
.home-page #home-tool-list.tools-grid-clean .tool-card-ic { width:32px;height:32px;flex:0 0 32px;background:var(--bg-soft-2);color:var(--ink);border-radius:8px; }
.home-page #home-tool-list.tools-grid-clean .tool-card-title { font-size:16px;font-weight:600;line-height:1.4;margin:0 0 6px; }
.home-page #home-tool-list.tools-grid-clean .tool-card-desc { font-size:14px;line-height:1.5;color:var(--ink-soft);overflow-wrap:anywhere; }
.home-page #home-tool-list.tools-grid-clean .conversion-tool { flex-direction:row;gap:10px; }
.home-page #home-tool-list .conversion-tool .tool-card-info { min-width:0; }
.home-page #home-tool-list .conversion-tool .format-pair { margin-bottom:8px; }
.format-pair { display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px;font-weight:600; }
.format-source,.format-target { display:inline-flex;align-items:center;min-height:28px;padding:3px 8px;border-radius:999px; }
.format-source { border:1px solid var(--border); }
.format-target { background:var(--yellow);color:#171717;border:1px solid var(--yellow); }
.format-source-tabs[hidden],.format-panel[hidden] { display:none; }
.format-picker-prompt { margin:0 0 12px;font-size:14px;color:var(--ink-soft); }
.format-source-tabs { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px; }
.home-page .format-source-tabs button { display:grid;grid-template-columns:22px minmax(0,1fr) 14px;align-items:center;gap:12px;min-width:0;min-height:64px;padding:16px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);font:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer; }
.home-page .format-source-tabs button:hover { border-color:var(--ink-soft);background:var(--bg-soft); }
.home-page .format-source-tabs button[aria-expanded="true"] { background:color-mix(in srgb,var(--yellow) 14%,var(--bg));border-color:var(--yellow-dark);color:var(--ink); }
.format-source-tabs .format-file-icon { width:22px;height:22px;stroke-width:1.7; }
.format-source-tabs .format-chevron { width:14px;height:14px;color:var(--ink-soft); }
.format-source-tabs button[aria-expanded="true"] .format-chevron { transform:rotate(180deg); }
.format-source-tabs button:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.format-panel { margin-top:20px;padding:18px 0 0;border-top:1px solid var(--border); }
.format-panel h4 { display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:0 0 12px;font-size:14px;font-weight:600; }
.format-panel h4::before { content:'\2192';order:1;color:var(--ink-soft); }
.format-panel h4 span { order:2;font-size:14px;font-weight:400;color:var(--ink-soft); }
.format-panel .conversion-tools { grid-template-columns:repeat(3,minmax(0,1fr)); }
.home-page #home-tool-list.tools-grid-clean .format-panel .tool-card-item { align-items:center;gap:16px;min-height:84px;padding:16px 18px;border-color:var(--border);border-radius:10px;background:var(--bg); }
.home-page #home-tool-list.tools-grid-clean .format-panel .tool-card-item:is(:hover,:focus-visible) { background:var(--yellow-bg);border-color:var(--ink-soft); }
.home-page #home-tool-list .format-panel .tool-card-item::after { content:'';width:7px;height:7px;flex:0 0 7px;margin-left:auto;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg); }
.home-page #home-tool-list .format-panel .tool-card-ic,.format-panel .format-source,.format-panel .format-pair > [aria-hidden] { display:none; }
.home-page #home-tool-list .format-panel .format-pair { margin-bottom:4px; }
.format-panel .format-target { min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:var(--ink);font-size:17px;line-height:1.4; }
@media(max-width:900px) { .format-source-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .format-source-tabs { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; } .home-page .format-source-tabs button { min-height:60px;padding:14px;gap:10px; } }
@media(max-width:600px) { .format-panel .conversion-tools { grid-template-columns:1fr;gap:8px; } .home-page #home-tool-list.tools-grid-clean .format-panel .tool-card-item { min-height:0;padding:14px 16px; } }
@media(max-width:1000px) { .conversion-tools { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media(max-width:600px) {
 .editing-tools { grid-template-columns:1fr; }
 .home-page #home-tool-list.tools-grid-clean .tool-card-item { gap:8px;padding:14px; }
 .format-pair { gap:4px;font-size:12px; }
 .format-source,.format-target { padding-inline:6px; }
}
.home-page #image-format-guide .format-guide-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;border:0;background:transparent;overflow:visible; }
.home-page #image-format-guide .format-guide-card { display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:24px;border:1px solid var(--border);border-radius:18px;background:var(--bg); }
.home-page #image-format-guide .format-guide-celebration { position:relative;isolation:isolate;display:flex;min-width:0; }
.home-page #image-format-guide .format-guide-celebration .format-guide-card { position:relative;z-index:1;width:100%; }
.home-page #image-format-guide .format-guide-mascot { position:absolute;z-index:0;top:-106px;right:8px;width:150px;height:auto;transform:rotate(10deg);pointer-events:none; }
@media(max-width:900px) {
 .home-page #image-format-guide .format-guide-celebration { margin-top:60px; }
 .home-page #image-format-guide .format-guide-mascot { top:-90px;width:120px; }
}
.home-page #image-format-guide .format-guide-icon { display:inline-flex;width:auto;height:auto;flex:none;padding:7px 12px;border:0;border-radius:8px;background:var(--yellow);color:#171717;font-size:14px;font-weight:700; }
.home-page #image-format-guide .format-guide-content { display:flex;flex-direction:column;align-items:flex-start;gap:16px;flex:1;width:100%; }
.home-page #image-format-guide .format-guide-card h3 { font-size:18px;line-height:1.4; }
.home-page #image-format-guide .format-guide-card p { font-size:16px;line-height:1.65;color:var(--ink-soft); }
.home-page #image-format-guide .format-guide-card .format-guide-link { width:100%;min-height:3em;font-size:14px;line-height:1.5;margin-top:auto;align-items:flex-start;text-align:left; }
.home-page #image-format-guide .format-quality-tip { margin-top:24px;padding:20px 24px;border:0;border-radius:0;background:transparent;box-shadow:none; }
.home-page #image-format-guide .format-quality-tip h3 { font-size:16px; }
.home-page #image-format-guide .format-quality-tip p { font-size:16px; }
:is(.home-page,.tool-page) .home-guide-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:24px; }
:is(.home-page,.tool-page) .home-guide-card { display:flex;flex-direction:column;gap:0;padding:0;border:1px solid var(--border);border-radius:18px;background:var(--bg); }
:is(.home-page,.tool-page) .home-guide-card:hover { border-color:var(--yellow-dark);box-shadow:0 5px 20px #00000008; }
:is(.home-page,.tool-page) .home-guide-card > img { width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:0;background:var(--bg-soft); }
:is(.home-page,.tool-page) .home-guide-card .home-guide-copy { padding:28px; }
:is(.home-page,.tool-page) .home-guide-copy h3 { font-size:24px;font-weight:600;margin-bottom:24px; }
:is(.home-page,.tool-page) .home-guide-copy .guide-read { font-size:16px; }
.tool-page #faq .faq-list { margin:0; }
.tool-page #faq .faq-item { border:0;border-bottom:1px solid var(--border);border-radius:0;margin:0;background:transparent; }
.tool-page #faq .faq-item:first-child { border-top:1px solid var(--border); }
.tool-page #faq .faq-item summary { padding-left:0;font-size:16px; }
.tool-page #faq .faq-item[open] summary { border-bottom:0; }
.tool-page #faq .faq-answer { padding-left:0;font-size:16px; }
.tool-page #faq .faq-answer p { font-size:16px;color:var(--ink-soft); }
@media(min-width:900px) {
 .tool-page #faq > .wrap { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:start; }
 .tool-page #faq .section-head { position:sticky;top:100px;margin:0; }
}
@media(max-width:900px) {
 .home-page .home-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-page #image-format-guide .format-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .home-page #home-tool-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .home-page #image-format-guide .format-guide-mascot { display:none; }
 .home-page #image-format-guide .format-guide-celebration { margin-top:0; }
 .home-page #home-tool-list,.home-page #image-format-guide .format-guide-grid,:is(.home-page,.tool-page) .home-guide-grid { grid-template-columns:1fr; }
 :is(.home-page,.tool-page) .home-guide-copy h3 { font-size:20px; }
}
[data-tool-group][hidden] { display:none; }

.target-size-page .workspace-settings .target-limit-fields { display:grid;grid-template-columns:minmax(0,1fr) 90px;align-items:end;gap:12px; }
.target-size-page .workspace-settings #target-size { line-height:1.4; }
.target-size-page #status:empty { display:none; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example { padding:28px 0 40px;background:var(--bg); }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .wrap { max-width:968px; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .section-head { text-align:center;margin:0 0 20px;padding-top:0;border:0; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .section-title { font-size:1.25rem;line-height:1.4;margin:0; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .how-steps { grid-template-columns:repeat(3,minmax(0,1fr));gap:28px; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .how-step { display:grid;grid-template-columns:28px minmax(0,1fr);gap:6px 12px;border:0;padding:0;align-content:start; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .how-step h3 { font-size:1rem;line-height:1.5;margin:0; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .how-step p { font-size:.875rem;line-height:1.65;margin:0; }
:is(.tool-page, .home-page) #how-it-works.how-compact-example .step-number { font-size:.8125rem;font-weight:600; }
@media(max-width:700px) {
 :is(.tool-page, .home-page) #how-it-works.how-compact-example .how-steps { grid-template-columns:1fr;gap:20px; }
}

/* Shared lightweight instructions on the homepage and tool pages. */
:is(.home-page,.tool-page) #how-it-works.how-compact-example { padding-block:32px; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .wrap { max-width:1168px; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-steps { padding:0;background:transparent;border:0;gap:36px; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-step { grid-template-columns:32px minmax(0,1fr);gap:8px 12px;padding:0;border:0;border-radius:0;background:transparent; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-step-header { grid-column:1;grid-row:1;align-self:center;padding:0; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .step-number { display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--yellow);color:#171717;font-size:12px; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-step h3 { grid-column:2;grid-row:1;align-self:center;font-size:18px; }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-step p { grid-column:2;grid-row:2;font-size:15px;line-height:1.6;color:var(--ink-soft); }
:is(.home-page,.tool-page) #how-it-works.how-compact-example .how-step:hover { transform:none;box-shadow:none; }

/* Shared tool links: identical spacing, icons and readable descriptions. */
:is(.tool-page .converter-card, .home-page #home-tool-list .tool-card-item) {
    align-items: flex-start;
    gap: 12px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
:is(.tool-page .converter-card, .home-page #home-tool-list .tool-card-item):hover {
    background: var(--yellow-bg);
    border-color: var(--yellow-border);
    transform: none;
    box-shadow: none;
}
:is(.tool-page .converter-card .conv-ic, .home-page #home-tool-list .tool-card-ic) {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    background: transparent;
    border: 0;
    border-radius: 0;
}
:is(.tool-page .converter-card .conv-ic, .home-page #home-tool-list .tool-card-ic) svg { width: 22px; height: 22px; }
:is(.tool-page .converter-card .conv-label, .home-page #home-tool-list .tool-card-title) { font-size: .9375rem; line-height: 1.5; margin: 0 0 2px; }
:is(.tool-page .converter-card .conv-sub, .home-page #home-tool-list .tool-card-desc) { font-size: .875rem; line-height: 1.55; color: var(--ink-soft); }
.why-card p { color: var(--ink-soft); font-size: .9375rem; line-height: 1.65; }

/* Native disclosure retains guide links and keyboard access without JavaScript. */
.guide-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.guide-toc summary::-webkit-details-marker { display: none; }
.guide-toc summary svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .15s ease; }
.guide-toc details[open] summary svg { transform: rotate(180deg); }
.guide-toc summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 4px; }
.guide-toc li:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
    .guide-toc { padding: 16px 20px; border: 1px solid var(--border); }
    .guide-toc summary { min-height: 24px; }
    .guide-toc ol { margin-top: 18px; }
}
@media (prefers-reduced-motion: reduce) { .guide-toc summary svg { transition: none; } }

/* A calm, shared footer with explicit navigation groups. */
footer.site { background:var(--bg);color:var(--ink);border-top:1px solid var(--border);padding:64px 0 24px; }
footer.site > .wrap { max-width:1168px; }
footer.site .footer-inner { display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;align-items:start;text-align:left; }
footer.site .footer-brand { color:var(--ink);text-decoration:none;font-size:22px; }
footer.site .footer-tag { max-width:28ch;margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-soft); }
footer.site .footer-column h2 { margin:0 0 20px;font-size:16px;font-weight:600; }
footer.site .footer-links { display:flex;flex-direction:column;align-items:flex-start;gap:4px; }
footer.site .footer-links :is(a,.cookie-settings-link) { display:inline-flex;align-items:center;max-width:100%;min-height:36px;padding:6px 8px;margin-left:-8px;border-radius:8px;font-size:15px;line-height:1.5;color:#666666;text-decoration:none;transition:color .16s,background-color .16s; }
html.dark footer.site .footer-links :is(a,.cookie-settings-link) { color:#bdbdbd; }
footer.site .footer-links :is(a,.cookie-settings-link):is(:hover,:focus-visible) { color:var(--ink);background:var(--bg-soft-2);text-decoration:none; }
footer.site .footer-bottom { display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:48px;padding-top:24px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-soft);text-align:left; }
footer.site .locale-links { display:flex;flex-wrap:wrap;justify-content:flex-start;border:0;margin:0;padding:0;gap:8px 14px; }
footer.site .locale-links a { display:inline-flex;align-items:center;min-height:32px;padding:4px 7px;border-radius:6px;color:var(--ink-soft);font-size:13px;text-decoration:none; }
footer.site .locale-links a:is(:hover,:focus-visible),footer.site .locale-links a[aria-current="page"] { color:var(--ink);background:var(--bg-soft-2);text-decoration:none; }
footer.site a:focus-visible { outline:2px solid var(--ink);outline-offset:4px; }
@media(max-width:900px) { footer.site .footer-inner { grid-template-columns:repeat(2,minmax(0,1fr));gap:32px; } footer.site .footer-bottom { flex-direction:column;align-items:flex-start; } }
@media(max-width:500px) {
 footer.site { padding-top:40px; }
 footer.site .footer-identity,footer.site .footer-company { grid-column:1/-1; }
 footer.site .footer-company .footer-links { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 20px; }
 footer.site .footer-links :is(a,.cookie-settings-link),footer.site .locale-links a { min-height:44px; }
}

/* Conversion controls stay above a compact, consistent file list. */
.tool-card.batch-tool { max-width: 760px; }
.batch-tool .dropzone { padding: 32px 24px; }
.batch-tool .cloud-ic { margin-bottom: 14px; }
.batch-hint { max-width: 540px; margin: 12px auto 8px; color: var(--ink-faint); font-size: .88rem; line-height: 1.6; }
.batch-controls { display: flex; scroll-margin-top:96px; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 20px 24px; border-top: 1px solid var(--line, #e6e6e6); }
.batch-controls[hidden] { display: none; }
.batch-controls .quality-control { margin: 0; flex: 1 1 260px; max-width: 380px; }
.batch-controls .avif-format-note { margin: 0; flex: 1 1 300px; text-align: left; }
.batch-controls button, .batch-result-actions button { font-size: .87rem; padding: 11px 18px; min-height: 44px; }
.batch-status { margin: 0; padding: 16px 24px 16px; text-align: center; color: var(--ink-faint); font-size: .88rem; }
.batch-status:empty { padding: 0; }
.is-auto-compressor .batch-status:not(:empty) { padding-top: 16px; }
.batch-results { container-type: inline-size; scroll-margin-top:96px; max-width: 960px; margin: 24px auto 0; padding: 0; text-align: left; }
.batch-controls button:disabled, .batch-result-actions button:disabled { opacity: .5; cursor: default; }
.batch-results-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; background: var(--bg-soft, #f7f7f7); }
.batch-results-header h2 { font-size: 1.1rem; font-weight: 700; margin: 0; }
.batch-result-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.batch-results-header:has(#batch-download[hidden]) { flex-direction:row;align-items:center; }
.batch-results-header:has(#batch-download[hidden]) .batch-result-actions { width:auto; }
.batch-result-actions .tool-reset, .batch-controls .tool-reset { margin: 0; }
.batch-list { list-style: none; margin: 0; padding: 0; }
.batch-row { display: grid; grid-template-columns: 56px minmax(120px, 1fr) minmax(80px, .55fr) minmax(130px, .65fr) auto; align-items: center; gap: 16px; padding: 18px 24px; border-top: 1px solid var(--line, #e6e6e6); font-size: .87rem; }
.batch-thumbnail { width: 56px; height: 48px; object-fit: contain; border-radius: 6px; }
.batch-thumbnail[hidden] { display: block !important; visibility: hidden; }
.batch-preview-button { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 56px; min-height: 48px; padding: 0; border: 0; border-radius: 6px; background: transparent; cursor: zoom-in; }
.batch-preview-hint { position: absolute; bottom: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); color: var(--ink); box-shadow: 0 0 0 1px var(--border); }
.batch-preview-button:disabled .batch-preview-hint { display: none; }
.batch-preview-button[hidden] { display: block !important; visibility: hidden; }
.batch-preview-button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.batch-preview-dialog { width: min(1000px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--bg); color: var(--ink); overflow: auto; }
.batch-preview-dialog::backdrop { background: rgba(0,0,0,.65); }
.batch-preview-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.batch-preview-header h2 { margin: 0; font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; }
.batch-preview-close { flex: 0 0 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bg-soft-2); color: var(--ink); font-size: 24px; cursor: pointer; }
.batch-preview-info { margin: 6px 0; font-size: .85rem; color: var(--ink-faint); }
.batch-preview-dialog .tool-reset { margin: 8px 0 14px; }
.batch-preview-viewport { max-height: 65dvh; overflow: auto; display: flex; align-items: flex-start; justify-content: center; border-radius: 8px; background-color: var(--bg-soft-2); background-image: repeating-conic-gradient(rgba(128,128,128,.12) 0% 25%, transparent 0% 50%); background-size: 20px 20px; }
.batch-preview-viewport img { display: block; max-width: 100%; max-height: 65dvh; width: auto; height: auto; object-fit: contain; }
.batch-preview-viewport img[hidden] { display: none; }
.batch-preview-viewport.is-actual-size { display: block; }
.batch-preview-viewport.is-actual-size img { max-width: none; max-height: none; flex-shrink: 0; }
.batch-preview-error { padding: 20px; }
.batch-file { min-width: 0; }
.batch-file strong { display: block; overflow-wrap: anywhere; font-weight: 600; line-height: 1.45; }
.batch-file span { display: block; margin-top: 4px; color: var(--ink-faint); font-size: .78rem; }
.batch-state, .batch-output { color: var(--ink-faint); line-height: 1.5; overflow-wrap: anywhere; }
.batch-output-size { display: block; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.batch-output-detail { display: block; margin-top: 2px; font-size: .78rem; }
.batch-output-source, .batch-output-ready { display: none; }
.batch-row[data-state="error"] .batch-state { color: var(--danger, #b42318); }
.batch-row[data-state="processing"] .batch-state { font-weight: 600; color: var(--ink); }
.batch-save { border-radius: 999px; gap: 6px; padding: 8px 12px; background: var(--bg-soft-2, #f4f4f4); color: var(--ink) !important; font-size: .8125rem; line-height: 1.3; font-weight: 600; white-space: nowrap; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
#batch-download { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; gap: 6px; font-size: .8125rem; line-height: 1.3; padding: 10px 14px; min-height: 44px; height: auto; }
#batch-download svg, .batch-save svg { flex: 0 0 14px; width: 14px; height: 14px; }
.batch-save:hover { filter: brightness(.96); }
.batch-save[hidden] { display: none; }
.batch-row-actions { display: flex; align-items: center; gap: 4px; }
.tool-download-actions { display:flex;align-items:stretch;gap:8px;margin:14px 0;width:100%; }
.tool-download-actions > .download-btn { flex:1;min-width:0;width:auto;margin:0; }
.crop-actions .tool-download-actions { order:-1;flex-direction:column;gap:4px;margin:0; }
.crop-actions .tool-download-actions > .download-btn { flex:none; }
.crop-actions .tool-flow-control { align-self:stretch;justify-content:center; }
.tool-flow-control { flex:none;display:flex;align-items:stretch; }
.tool-flow-control > button.tool-flow-trigger { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 12px;margin:0 8px 0 0;border:0;border-radius:10px;background:transparent;color:var(--ink);font-size:.8125rem;line-height:1.3;font-weight:600;cursor:pointer; }
.crop-actions .tool-flow-control > button.tool-flow-trigger { flex:1;margin:0; }
.tool-flow-control > button.tool-flow-trigger[hidden] { display:none; }
.tool-flow-trigger::after { content:'';width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg); }
.tool-flow-trigger[aria-expanded="true"]::after { transform:rotate(225deg);margin-top:3px; }
.tool-flow-trigger:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.tool-flow { position:fixed;inset:auto;margin:0;width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;box-sizing:border-box;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--ink);box-shadow:0 8px 28px rgba(0,0,0,.14);text-align:left; }
.tool-flow-header { display:flex;align-items:center;gap:12px; }
.tool-flow-header > :first-child { flex:1;min-width:0;margin:0;font-size:.8125rem;font-weight:600;line-height:1.5; }
.tool-flow-format { flex:none;padding:3px 9px;border:1px solid var(--border);border-radius:999px;background:var(--bg);font-size:.75rem;font-weight:600; }
.tool-flow-body { margin-top:8px; }
.tool-flow-group + .tool-flow-group { margin-top:8px;padding-top:8px;border-top:1px solid var(--border); }
.tool-flow-convert-only .tool-flow-group:last-child { margin-top:0;padding-top:0;border:0; }
.tool-flow-group h3 { margin:0 8px 4px;font-size:.75rem;font-weight:400;line-height:1.5;color:var(--ink-soft); }
.tool-flow-group:first-child h3 { display:none; }
.tool-flow-actions { display:grid;gap:2px; }
.tool-flow .tool-flow-actions > button,#tool-card .tool-flow .tool-flow-actions > button { display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-height:44px;padding:10px 8px;margin:0;border:0;border-radius:7px;background:transparent;box-shadow:none;color:var(--ink);font-size:.875rem;font-weight:400;line-height:1.4;white-space:normal;overflow-wrap:anywhere;cursor:pointer; }
.tool-flow-actions button svg { flex:none;width:18px;height:18px; }
.tool-flow .tool-flow-actions > button:hover,#tool-card .tool-flow .tool-flow-actions > button:hover { background:var(--bg-soft-2); }
.tool-flow-actions button:focus-visible { outline:2px solid var(--ink);outline-offset:-2px; }
.tool-flow-actions button:disabled { opacity:.5;cursor:default; }
.tool-flow-trigger:disabled { opacity:.5;cursor:default; }
.batch-remove { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); cursor: pointer; }
.batch-remove:hover:not(:disabled) { background: var(--bg-soft-2); color: var(--ink); }
.batch-remove:disabled { opacity: .4; cursor: default; }
.batch-remove:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.batch-state { display: flex; align-items: center; gap: 7px; }
.batch-state-icon { flex: 0 0 14px; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.batch-row[data-state="processing"] .batch-state-icon { box-sizing: border-box; border: 2px solid var(--border); border-top-color: var(--ink); border-radius: 50%; animation: batch-processing-spin .8s linear infinite; }
@keyframes batch-processing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .batch-row[data-state="processing"] .batch-state-icon { animation: none; } }
html.dark .batch-controls, html.dark .batch-row { border-color: #333; }
@container (max-width: 900px) {
    .batch-results-header { align-items: flex-start; flex-direction: column; padding: 18px; }
    .batch-row { position: relative; grid-template-columns: 56px minmax(0, 1fr); align-items: start; gap: 12px; padding: 16px 18px; }
    .batch-thumbnail { width: 56px; height: 56px; }
    .batch-preview-button { width: 56px; height: 56px; grid-column: 1; grid-row: 1; }
    .batch-file { grid-column: 2; grid-row: 1; align-self: center; padding-right: 36px; }
    .batch-state { grid-column: 1 / -1; grid-row: 2; font-size: .8rem; }
    .batch-output { grid-column: 1 / -1; grid-row: 3; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 6px; font-size: .8rem; }
    .batch-output-source, .batch-output-ready { display: inline; }
    .batch-output-detail { margin: 0; }
    .batch-output-detail::before { content: '· '; }
    .batch-output-size, .batch-output-source { white-space: nowrap; }
    .batch-row[data-state="done"]:not([data-original-kept]) .batch-file > span { display: none; }
    .batch-row[data-state="done"]:not([data-original-kept]) .batch-state { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .batch-row[data-state="done"]:not([data-original-kept]) .batch-output { grid-row: 2; }
    .batch-row[data-state="done"]:not([data-original-kept]) .batch-row-actions { grid-row: 3; }
    .batch-row:not([data-state="done"]) .batch-output { display: none; }
    .batch-row[data-original-kept] .batch-output-ready { display: none; }
    .batch-row-actions { grid-column: 1 / -1; grid-row: 4; flex-direction: row; gap: 12px; padding-top: 4px; }
    .batch-row:not([data-state="done"]) .batch-row-actions { grid-row: 3; }
    .batch-row-actions > .batch-remove { position: absolute; top: 12px; right: 10px; }
    .batch-save { flex: 1; font-size: .8rem; padding: 10px 12px; }
    .batch-result-actions { width: 100%; }
}
@media (max-width: 900px) {
    .batch-controls { padding: 18px; }
}

/* Related tools use the homepage card design. */
.tool-page #tool-card.markup-tool.has-image { max-width:1000px; }
.markup-tool #markup-canvas { display:block;width:auto;height:auto;max-width:100%;max-height:480px; }
#compose-canvas { display:block;width:auto;height:auto;max-width:100%;max-height:480px; }
.compose-rotation { display:flex;flex-wrap:wrap;gap:8px; }
.compose-rotation .tool-secondary { flex:1; }
.compose-order h2 { margin:0 0 8px;font-size:14px; }
.compose-order ol { list-style:none;margin:0;padding:0;display:grid;gap:8px; }
.compose-order li { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.compose-order li > span { min-width:0;overflow-wrap:anywhere;font-size:13px; }
.compose-order li > div { display:flex;gap:4px;flex-shrink:0; }
.compose-order .tool-secondary { min-width:36px;min-height:44px;padding:6px;margin:0; }
.markup-tool #markup-canvas[tabindex] { cursor:crosshair;touch-action:none; }
.markup-tool #markup-canvas:focus-visible { outline:3px solid var(--ink);outline-offset:4px; }
.markup-tool .markup-coordinates { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.markup-tool .fields [hidden] { display:none; }
/* A shared, compact settings panel for the image editors. */
.edit-tool-page .workspace-grid { gap:32px; }
.edit-tool-page .workspace-header :is(.workspace-file strong,.crop-file-name),.edit-tool-page .favicon-source { font-size:14px;font-weight:600; }
.edit-tool-page :is(.workspace-settings,.workspace-settings .fields,.workspace-settings .crop-controls) { gap:20px; }
.edit-tool-page :is(.workspace-settings,.favicon-options) label,.edit-tool-page .markup-effects legend { font-size:14px;font-weight:500;line-height:1.5; }
.edit-tool-page :is(.workspace-settings,.favicon-options) :is(input[type=number],input[type=text],select) { height:44px;min-height:44px;padding:10px 12px;font-size:14px;font-weight:400;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink); }
.edit-tool-page :is(.workspace-settings,.favicon-options) input[type=file] { font-size:13px;min-height:44px;padding:6px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--ink-soft); }
.edit-tool-page :is(.workspace-settings,.favicon-options) input[type=file]::file-selector-button { margin-right:10px;padding:7px 10px;border:0;border-radius:5px;background:var(--bg-soft-2);color:var(--ink);font:inherit;cursor:pointer; }
.edit-tool-page :is(.workspace-settings,.favicon-options) input[type=checkbox] { width:16px;height:16px;min-height:0;flex:0 0 16px; }
.edit-tool-page :is(.workspace-settings .fields > p,.tool-field-help,.workspace-settings #status,.workspace-output-size,.crop-size-info) { margin:0;font-size:13px;font-weight:400;line-height:1.6;color:var(--ink-soft); }
.edit-tool-page .workspace-settings .tool-check { margin:0;font-size:14px;font-weight:500; }
.edit-tool-page .workspace-settings :is(#run,#download,#crop-download) { min-height:48px;font-size:14px;margin:0; }
.edit-tool-page .workspace-settings #custom-size { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.edit-tool-page .workspace-settings .edit-dimensions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.edit-tool-page .workspace-settings .crop-size-info strong { font-size:13px;font-weight:600; }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range] { appearance:none;width:100%;height:28px;min-height:28px;padding:0;border:0;box-shadow:none;background:transparent;accent-color:var(--ink);cursor:pointer; }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]::-webkit-slider-runnable-track { height:4px;border-radius:4px;background:linear-gradient(to right,var(--ink) var(--range-progress),var(--border) var(--range-progress)); }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]::-webkit-slider-thumb { appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--ink); }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]::-moz-range-track { height:4px;border-radius:4px;background:var(--border); }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]::-moz-range-progress { height:4px;background:var(--ink); }
.edit-tool-page :is(.workspace-settings,.favicon-options,#product-position-controls) input[type=range]::-moz-range-thumb { width:16px;height:16px;border:0;border-radius:50%;background:var(--ink); }
.edit-tool-page #favicon-results h2 { font-size:16px;font-weight:600; }
.markup-tool .markup-preview-column { min-width:0; }
.markup-tool .markup-preview-hint { margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft); }
.pixelate-page .markup-effects { min-width:0;border:0;padding:0;margin:0; }
.pixelate-page .markup-effects legend { padding:0;margin-bottom:10px; }
.pixelate-page .markup-effect-options { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.pixelate-page .markup-effect-options label { position:relative;cursor:pointer; }
.pixelate-page .markup-effect-options input { position:absolute;opacity:0;width:1px;height:1px; }
.pixelate-page .markup-effect-options label > span { display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;text-align:center;background:var(--bg); }
.pixelate-page .markup-effect-options input:checked + span { background:var(--bg-soft-2);border-color:var(--ink-soft);color:var(--ink);font-weight:600; }
.pixelate-page .markup-effect-options input:focus-visible + span { outline:2px solid var(--ink);outline-offset:3px; }
.pixelate-page .markup-range-heading { display:flex;justify-content:space-between;align-items:baseline;gap:12px; }
.pixelate-page .markup-range-heading output { font-size:13px;white-space:nowrap;color:var(--ink-soft);font-variant-numeric:tabular-nums; }
.pixelate-page #block-size { appearance:none;width:100%;height:28px;min-height:28px;padding:0;border:0;box-shadow:none;background:transparent;accent-color:var(--ink);cursor:pointer; }
.pixelate-page #block-size:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.pixelate-page #block-size::-webkit-slider-runnable-track { height:4px;border-radius:4px;background:linear-gradient(to right,var(--ink) var(--range-progress),var(--border) var(--range-progress)); }
.pixelate-page #block-size::-webkit-slider-thumb { appearance:none;width:16px;height:16px;margin-top:-6px;border:0;border-radius:50%;background:var(--ink); }
.pixelate-page #block-size::-moz-range-track { height:4px;border-radius:4px;background:var(--border); }
.pixelate-page #block-size::-moz-range-progress { height:4px;background:var(--ink); }
.pixelate-page #block-size::-moz-range-thumb { width:16px;height:16px;border:0;border-radius:50%;background:var(--ink); }
.pixelate-page .markup-precise { border-top:1px solid var(--border);padding-top:18px; }
.pixelate-page .markup-precise summary { cursor:pointer;font-size:14px;font-weight:500;color:var(--ink-soft); }
.pixelate-page .markup-precise .markup-coordinates { margin-top:16px; }
.pixelate-page .workspace-settings #download { order:0;min-height:48px;margin:0; }
.pixelate-page .workspace-output-size { font-size:12px; }
@media(max-width:760px) {
 .edit-tool-page .workspace-grid { gap:24px; }
 .edit-tool-page .workspace-settings .fields.edit-dimensions { grid-template-columns:1fr; }
}
.tool-page > .section-soft:has(.converter-grid) { padding-block:48px;background:var(--bg); }
.tool-page .section-soft:has(.converter-grid) .section-head { margin-bottom:24px; }
.tool-page .converter-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.tool-page .converter-grid .converter-card { display:flex;flex-direction:row;align-items:flex-start;gap:12px;padding:16px;border:1px solid var(--border);border-radius:16px;background:var(--bg);box-shadow:none; }
.tool-page .converter-grid .converter-card:hover { border-color:var(--ink-soft);background:var(--bg);box-shadow:none;transform:none; }
.tool-page .converter-grid .converter-card:focus-visible { outline:3px solid var(--ink);outline-offset:3px; }
.tool-page .converter-grid .converter-card > div:last-child { min-width:0; }
.tool-page .converter-grid .conv-ic { width:32px;height:32px;flex:0 0 32px;color:var(--ink); }
.tool-page .converter-grid .conv-label { font-size:16px;font-weight:600;line-height:1.4;margin-bottom:4px; }
.tool-page .converter-grid .conv-sub { font-size:14px;line-height:1.5;color:var(--ink-soft); }
@media(max-width:900px) { .tool-page .converter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .tool-page > .section-soft:has(.converter-grid) { padding-block:24px; } .tool-page .converter-grid { grid-template-columns:1fr; } .tool-page .converter-grid .converter-card { gap:8px;padding:14px; } }

@media(max-width:600px) { :is(.home-page,.tool-page) #how-it-works.how-compact-example { padding-bottom:24px; } }

.guide-example-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin:20px 0; }
.guide-example-pair figure { margin:0; min-width:0; }
.guide-example-pair img { display:block; width:100%; height:auto; border:1px solid var(--border); background:repeating-conic-gradient(#eee 0% 25%,#fff 0% 50%) 50% / 20px 20px; }
.guide-example-pair figcaption { margin-top:8px; font-size:.85rem; line-height:1.6; }
.guide-example-pair.product-crop-example img { height:240px;object-fit:contain;background:var(--bg);border:0; }
@media(max-width:600px) { .guide-example-pair { grid-template-columns:1fr; } }
@media(max-width:600px) { .guide-example-pair.product-crop-example img { height:auto; } }

.guide-example img { display:block; width:100%; height:auto; border:1px solid var(--border); border-radius:12px; }

/* Composition options use native radio buttons and the existing editor controls. */
.combine-page .merge-section { min-width:0;margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:12px; }
.combine-page .merge-section[hidden] { display:none; }
.combine-page .merge-section legend { padding:0;margin-bottom:12px;font-size:14px;font-weight:600; }
.combine-page .merge-layout-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.combine-page .merge-layout-options label { position:relative;cursor:pointer; }
.combine-page .merge-layout-options input[type=radio] { position:absolute;opacity:0;width:1px;height:1px;min-width:0;margin:0;padding:0;border:0; }
.combine-page .merge-layout-options label > span { display:flex;align-items:center;gap:10px;min-height:64px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:13px;line-height:1.4;overflow-wrap:anywhere; }
.combine-page .merge-layout-options input:checked + span { border-color:var(--ink-soft);background:var(--bg);font-weight:600; }
.combine-page .merge-layout-options input:focus-visible + span { outline:2px solid var(--ink);outline-offset:3px; }
.combine-page .merge-layout-options input:disabled + span { opacity:.45;cursor:default; }
.merge-layout-icon { display:grid;width:36px;height:30px;gap:3px;flex:0 0 36px; }
.merge-layout-icon i { background:currentColor;border-radius:2px;opacity:.7; }
.merge-layout-icon.layout-row { grid-template-columns:repeat(3,1fr); }
.merge-layout-icon.layout-column { grid-template-rows:repeat(3,1fr); }
.merge-layout-icon.layout-grid { grid-template:repeat(2,1fr)/repeat(2,1fr); }
.merge-layout-icon.layout-featured { grid-template:repeat(2,1fr)/2fr 1fr; }
.merge-layout-icon.layout-featured i:first-child { grid-row:span 2; }
.combine-page .compose-preview-column { min-width:0;display:flex;flex-direction:column;gap:20px; }
.combine-page .workspace-header .tool-result-actions { display:flex;flex-wrap:wrap;align-items:center;gap:8px; }
.combine-page .workspace-header .tool-secondary { margin:0;min-height:44px;padding:8px 14px; }
.combine-page .compose-order { padding:3px; }
.combine-page .compose-order ol { grid-template-columns:repeat(3,minmax(0,1fr));gap:10px; }
.combine-page .compose-order li { display:block;min-width:0; }
.combine-page .merge-thumb-select { display:block;width:100%;min-width:0;padding:8px;border:1px solid var(--border);border-radius:10px;color:var(--ink);background:var(--bg);text-align:left;cursor:pointer; }
.combine-page .merge-thumb-select[aria-pressed=true] { border-color:var(--ink-soft);background:var(--bg-soft); }
.combine-page .merge-thumb-select:focus-visible { outline:2px solid var(--ink);outline-offset:2px; }
.combine-page .merge-thumb-select canvas { display:block;width:100%;height:64px;object-fit:contain;border-radius:5px; }
.combine-page .merge-thumb-select span { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:6px;font-size:12px; }
.combine-page .compose-order li > div { justify-content:center;gap:2px;margin-top:2px; }
.combine-page .compose-order .tool-secondary { min-width:32px;padding:4px; }
.combine-page #merge-crop-name { margin:0;font-size:13px;overflow-wrap:anywhere; }
.combine-page #merge-crop label { display:flex;flex-direction:column;gap:8px; }
.combine-page #merge-crop label > span { display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px; }
.combine-page #merge-crop output { color:var(--ink-soft);font-variant-numeric:tabular-nums; }
.combine-page #merge-crop input:disabled { opacity:.4; }
.combine-page .workspace-settings #download { order:0; }
.combine-page .workspace-output-size { order:0; }
@media(min-width:761px) {
 .combine-page .compose-preview-column { position:sticky;top:96px;max-height:calc(100vh - 116px); }
 .combine-page #compose-canvas { max-height:38vh; }
 .combine-page .compose-order { min-height:0;overflow:auto;padding:3px; }
}
@media(max-width:760px) {
 .combine-page .workspace-header { flex-direction:column; }
 .combine-page .workspace-header .tool-result-actions { max-width:100%; }
 .combine-page #compose-canvas { max-height:320px; }
 .combine-page .compose-order ol { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .combine-page .workspace-settings .fields.edit-dimensions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:380px) { .combine-page .compose-order ol { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.section-title,.footer-links a,.home-page .tool-card-title { overflow-wrap:anywhere; }
.social-page .social-preview-column { min-width:0; }
.social-page .social-preview-column > p { margin:14px 0 0; }
.social-page .social-crop { min-width:0;margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:12px; }
.social-page .social-crop[hidden] { display:none; }
.social-page .social-crop legend { padding:0;margin-bottom:12px;font-size:14px;font-weight:600; }
.social-page .social-crop label { display:flex;flex-direction:column;gap:8px; }
.social-page .social-crop label > span { display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 8px; }
.social-page .social-crop output { color:var(--ink-soft);font-variant-numeric:tabular-nums; }
.social-page .social-crop input:disabled { opacity:.4; }
.social-page .workspace-settings #download,.social-page .workspace-output-size { order:0; }
.social-page #preset { text-overflow:ellipsis; }
.social-page .social-settings-group { display:flex;flex-direction:column;gap:20px;min-width:0;margin:0;padding:0;border:0; }
.social-page .social-settings-group + .social-settings-group { padding-top:20px;border-top:1px solid var(--border); }
.social-page .social-settings-group > legend { padding:0;margin-bottom:16px;font-size:14px;font-weight:600; }
.tool-preview-column { min-width:0; }
.tool-preview-toolbar,.tool-preview-header,.tool-preview-actions { display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.tool-preview-toolbar { justify-content:flex-end;margin:12px 0;font-size:13px; }
.tool-preview-toolbar[hidden] { display:none; }
.tool-preview-label { margin-right:auto;font-weight:500;color:var(--ink-soft); }
.tool-preview-dialog { width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg);color:var(--ink); }
.tool-preview-dialog::backdrop { background:rgba(0,0,0,.55); }
.tool-preview-header { flex-wrap:nowrap;align-items:flex-start; }
.tool-preview-header h2 { flex:1;min-width:0;margin:0;font-size:16px;line-height:1.5; }
.tool-preview-close { flex-shrink:0;width:44px;height:44px;border:0;border-radius:50%;background:var(--bg-soft);color:var(--ink);font-size:24px;cursor:pointer; }
.tool-preview-actions { justify-content:flex-start;margin:16px 0; }
.tool-preview-actions [aria-pressed="true"] { background:var(--yellow-bg);border-color:var(--yellow-border); }
.tool-preview-viewport { max-height:65dvh;overflow:auto;background:var(--bg); }
.tool-preview-viewport :is(img,canvas) { display:block;max-width:100%;max-height:65dvh;width:auto;height:auto;margin:auto; }
.editor-page .image-tool-preview :is(img,canvas),.editor-page #crop-canvas,.tool-preview-viewport :is(img,canvas),.combine-page .merge-thumb-select canvas { background:repeating-conic-gradient(var(--bg) 0% 25%,var(--border) 0% 50%) 50%/16px 16px; }
.tool-preview-viewport.is-actual-size :is(img,canvas) { max-width:none;max-height:none;margin:0; }
.tool-auto-preview-hint { margin:0;font-size:13px;line-height:1.6;color:var(--ink-soft); }
.tool-usage-guide { margin:0 0 16px;font-size:13px;line-height:1.6;color:var(--ink-soft); }
.tool-usage-guide summary { cursor:pointer;min-height:44px;align-content:center;color:var(--ink);font-weight:500; }
.tool-usage-guide p { margin:8px 0 0; }
.tool-usage-guide summary:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.tool-color-control input::-webkit-color-swatch-wrapper { padding:0; }
.tool-color-control input::-webkit-color-swatch { border:0;border-radius:4px; }
.tool-color-control input::-moz-color-swatch { border:0;border-radius:4px; }
.tool-color-control:has(input:disabled) { opacity:.6; }
.pixel-regions { display:flex;flex-direction:column;gap:12px;min-width:0;margin:0;padding:0;border:0; }
.pixel-regions legend { margin-bottom:12px;font-size:14px;font-weight:600; }
.pixel-region-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
html body .pixel-region-actions :is(#pixel-add,#pixel-remove) { display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;margin:0;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-size:13px;line-height:1.5;overflow-wrap:anywhere; }
html body .pixel-region-actions :is(#pixel-add,#pixel-remove):hover:not(:disabled) { background:var(--bg-soft-2); }
html body .pixel-region-actions #pixel-clear { grid-column:1 / -1;justify-self:start;min-height:36px;margin:0;padding:6px 10px;font-size:13px; }
.pixel-region-actions button:disabled { opacity:.45;cursor:default; }
.tool-field-error { margin:6px 0 0;font-size:13px;color:var(--ink); }
.workspace-settings [aria-invalid="true"] { border-color:var(--ink);outline:1px solid var(--ink); }
.combine-page .compose-order .tool-secondary { min-width:44px;min-height:44px; }
@media(max-width:760px) {
 .edit-tool-page .workspace-settings .tool-preview-at-actions { display:block;width:100%;min-height:44px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:14px;font-weight:500;cursor:pointer; }
 .workspace-settings .crop-actions .tool-preview-at-actions { order:-2; }
 .edit-tool-page .workspace-settings .tool-preview-at-actions:hover { background:var(--bg-soft); }
 .tool-preview-dialog { padding:16px; }
 .combine-page .compose-order ol { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:761px) { .social-page .social-preview-column { position:sticky;top:96px; } .social-page #compose-canvas { max-height:calc(100vh - 220px); } }
@media(max-width:760px) { .social-page #compose-canvas { max-height:320px; } .social-page .workspace-settings .fields.edit-dimensions { grid-template-columns:repeat(2,minmax(0,1fr)); } }
/* Open workspaces share preview/control alignment; file pickers keep their boundaries. */
.editor-page #tool-card:has(.workspace-result:not([hidden])) { max-width:1080px; }
.editor-page #upload-error:has(+ #tool-card .workspace-result:not([hidden])) { max-width:1080px; }
.editor-page .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr) 330px;gap:48px; }
.editor-page .workspace-settings,.editor-page .workspace-settings .fields,.editor-page .workspace-settings .crop-controls { gap:16px; }
.editor-page .workspace-settings .fields.edit-dimensions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.editor-page .workspace-settings input[readonly] { color:var(--ink-soft);background:var(--ad-bg); }
.editor-page .editor-group-title { margin:0;font-size:15px;line-height:1.5;font-weight:600; }
.editor-page .editor-group-separated { padding-top:18px;border-top:1px solid var(--border); }
.editor-settings-group { display:flex;flex-direction:column;gap:16px;min-width:0;margin:4px 0 0;padding:18px 0 0;border:0;border-top:1px solid var(--border); }
.editor-settings-group > legend { float:left;width:100%;margin:0 0 16px;padding:0;font-size:15px;font-weight:600; }
.editor-page .editor-size-summary { margin:0;font-size:14px;line-height:1.6;font-weight:600;font-variant-numeric:tabular-nums; }
.editor-page .tool-card .workspace-grid .image-tool-preview { padding:0;background:transparent;border-radius:8px;min-height:220px; }
.editor-page .image-tool-preview :is(img,canvas) { display:block;max-width:100%;max-height:480px;width:auto;height:auto;margin:auto;border-radius:0; }
.editor-page .tool-preview-toolbar { margin:0 0 10px;min-height:36px; }
.editor-page button.tool-preview-trigger { display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:36px;margin:0;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);font-size:13px; }
.editor-page .workspace-settings .tool-download-actions { order:2;margin:8px 0 0; }
.editor-page .workspace-output-size { order:1;font-variant-numeric:tabular-nums; }
.editor-page .workspace-settings > #run { order:2; }
.editor-page .workspace-settings #status { order:3; }
.editor-page .workspace-settings #status:empty { display:none; }
.editor-page .compose-rotation { display:flex;flex-wrap:wrap;gap:10px; }
.editor-page .compose-rotation .tool-secondary { display:flex;flex:1 1 max-content;align-items:center;justify-content:flex-start;gap:10px;min-width:0;min-height:48px;margin:0;padding:12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);font-size:13px;line-height:1.4;text-align:left; }
.editor-page .compose-rotation svg,.editor-page .editor-toggle svg { flex:none;width:20px;height:20px; }
.editor-page .compose-rotation .tool-secondary:hover,.editor-page .editor-toggle:hover { border-color:var(--ink-faint); }
.editor-page .workspace-settings .editor-toggle { position:relative;display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;cursor:pointer; }
.editor-page .workspace-settings .editor-toggle input[type=checkbox] { position:absolute;inset:0;width:100%;height:100%;min-height:100%;margin:0;opacity:0;cursor:pointer; }
.editor-page .editor-toggle { background:var(--bg); }
.editor-page .editor-toggle:has(input:checked) { background:var(--bg);border-color:var(--ink-soft); }
.editor-page .editor-toggle:has(input:focus-visible) { outline:2px solid var(--ink);outline-offset:3px; }
.editor-page .workspace-settings #rotate-reset,.editor-page .workspace-settings #crop-reset { align-self:flex-start;margin:0;padding:6px 18px;min-height:36px;font-size:13px; }
.editor-page .editor-effect-scope { margin:0 0 10px; }
.editor-page #pixel-add { display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg); }
.editor-page #pixel-add svg { width:16px;height:16px; }
.editor-page .workspace-grid:has(.image-tool-preview.is-batch) { grid-template-areas:"preview settings"; }
.editor-page .tool-card .workspace-grid .image-tool-preview.is-batch { display:flex;flex-direction:column;align-items:stretch;gap:0;max-height:360px;min-height:0;overflow:auto; }
.editor-page .image-preview-item { display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px;margin:0;padding:12px 0;border:0;border-bottom:1px solid var(--border);border-radius:0; }
.editor-page .tool-card .image-preview-item img { width:auto;height:auto;max-width:64px;max-height:64px;justify-self:center; }
.editor-page .image-preview-item figcaption { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;margin:0; }
.editor-page .image-preview-item figcaption :is(strong,span,a) { grid-column:1; }
.editor-page .image-preview-item figcaption .tool-secondary { grid-column:2;grid-row:1 / span 3;align-self:center;min-height:44px;padding:6px;font-size:12px; }
@media(max-width:760px) {
 .editor-page .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr);gap:32px; }
 .editor-page .workspace-grid:has(.image-tool-preview.is-batch) { grid-template-areas:"preview" "settings"; }
 .editor-page .tool-card .workspace-grid .image-tool-preview { min-height:0; }
 .editor-page .image-tool-preview :is(img,canvas) { max-height:280px; }
 .editor-page button.tool-preview-trigger { min-height:44px; }
 .editor-page .tool-card .workspace-grid .image-tool-preview.is-batch { max-height:250px; }
 .editor-page .workspace-settings .tool-download-actions { flex-direction:column;gap:4px; }
 .editor-page .workspace-settings .tool-download-actions > :is(#download,#crop-download) { order:0;flex:none;width:100%; }
 .editor-page .tool-download-actions > .tool-flow-control { order:1;justify-content:center; }
 .editor-page .tool-flow-control > button.tool-flow-trigger { margin:0; }
}
/* Shared metadata inspection and before/after comparison. */
.metadata-report { margin-top:28px;padding:24px 0 0;border-top:1px solid var(--border);text-align:left;min-width:0; }
.metadata-report-header { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px;margin-bottom:16px; }
.metadata-report-intro { flex:1 1 240px;min-width:0; }
.metadata-report h2 { font-size:18px;line-height:1.45;margin:0; }
.metadata-tool-page .workspace-settings .metadata-report { margin:0;padding:0;border:0; }
.metadata-tool-page .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr); }
.metadata-file-overview { display:flex;align-items:center;gap:16px;min-width:0;flex:1; }
.metadata-tool-page #preview { display:flex;align-items:center;justify-content:center;flex:0 0 72px;min-width:0;min-height:0;height:64px;margin:0;padding:0;background:transparent; }
.metadata-tool-page #preview img { display:block;width:auto;height:auto;max-width:72px;max-height:64px;margin:0;border:0;border-radius:4px; }
.metadata-tool-page .workspace-header .tool-result-actions { display:flex;align-items:center;flex-wrap:wrap;gap:4px 16px; }
.metadata-tool-page .tool-preview-toolbar { margin:0; }
.metadata-tool-page .tool-preview-trigger { min-height:44px;margin:0;padding:8px 18px; }
.metadata-tool-page .metadata-group-heading { gap:12px;min-height:52px;padding:10px 0; }
.metadata-tool-page .metadata-group-title { display:flex;align-items:baseline;gap:20px; }
.metadata-tool-page .metadata-group-title strong { flex:0 0 200px; }
.metadata-tool-page .metadata-group-preview { min-width:0;margin:0; }
.metadata-tool-page .metadata-group-count { min-width:28px;padding:2px 7px;border-radius:6px;background:var(--ad-bg);font-variant-numeric:tabular-nums;text-align:center; }
.metadata-tool-page .metadata-comparison-count { grid-template-columns:auto 16px auto;min-width:0;max-width:none;padding:0;background:transparent;gap:4px;align-items:center; }
.metadata-tool-page .metadata-comparison-count > span:not(.metadata-count-arrow) { min-width:28px;max-width:96px;padding:4px 7px;border-radius:6px;background:var(--ad-bg); }
.metadata-tool-page .metadata-count-arrow { color:var(--ink-faint); }
.metadata-tool-page .metadata-comparison-count strong { margin:0; }
.metadata-tool-page div.metadata-group .metadata-group-heading { color:var(--ink-faint); }
.metadata-tool-page .metadata-table-wrap { max-height:340px; }
.metadata-tool-page .workspace-settings > .fields { padding-top:4px; }
.metadata-tool-page .workspace-settings > .fields p { margin:0;max-width:75ch;font-size:13px;line-height:1.65;color:var(--ink-soft); }
.metadata-viewer-page .tool-download-actions,.metadata-tool-page #status:empty { display:none; }
.metadata-tool-page #metadata-next { align-self:flex-end;width:auto;max-width:100%;min-width:240px;margin:0; }
.metadata-remover-page .tool-download-actions:has(> #download[hidden]) { display:none; }
.metadata-remover-page .workspace-settings > #run { order:2;align-self:flex-end;width:auto;min-width:240px;margin:0; }
.metadata-remover-page .workspace-settings .tool-download-actions { order:2;align-self:flex-end;width:auto;min-width:320px;margin:0; }
.metadata-remover-page #workspace-output-size { order:1;align-self:flex-end;margin:0; }
.metadata-remover-page #metadata-next { order:3; }
.metadata-remover-page #status { order:4; }
@media(max-width:760px) {
 .metadata-tool-page .tool-card .workspace-header { flex-wrap:wrap; }
 .metadata-file-overview { flex-basis:100%;gap:12px; }
 .metadata-tool-page .workspace-header .tool-result-actions { width:100%;justify-content:flex-end; }
 .metadata-tool-page .metadata-group-title { display:block; }
 .metadata-tool-page .metadata-group-title strong { display:block; }
 .metadata-tool-page .metadata-group-preview { margin-top:3px; }
 .metadata-tool-page #metadata-next { width:100%;min-width:0; }
 .metadata-tool-page .metadata-is-comparison .metadata-group-heading { grid-template-columns:16px minmax(0,1fr) auto; }
 .metadata-tool-page .metadata-is-comparison .metadata-group-count { grid-column:auto;text-align:center; }
 .metadata-tool-page .metadata-is-comparison :is(table,thead,tbody) { display:block; }
 .metadata-tool-page .metadata-is-comparison thead { position:sticky;top:0;z-index:1;background:var(--bg); }
 .metadata-tool-page .metadata-is-comparison tr { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); }
 .metadata-tool-page .metadata-is-comparison thead th:first-child { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%); }
 .metadata-tool-page .metadata-is-comparison tbody tr { border-bottom:1px solid var(--border); }
 .metadata-tool-page .metadata-is-comparison tbody th { grid-column:1 / -1;padding-bottom:4px;border:0; }
 .metadata-tool-page .metadata-is-comparison tbody td { padding-top:4px;border:0; }
 .metadata-remover-page .workspace-settings > #run,.metadata-remover-page .workspace-settings .tool-download-actions { width:100%;min-width:0; }
 .metadata-remover-page .workspace-settings .tool-download-actions { flex-direction:column;gap:4px; }
 .metadata-remover-page .workspace-settings .tool-download-actions > #download { order:0;flex:none;width:100%; }
 .metadata-remover-page .tool-download-actions > .tool-flow-control { order:1;justify-content:center; }
 .metadata-remover-page .tool-flow-control > button.tool-flow-trigger { margin:0; }
}
.metadata-summary { margin:6px 0 0;font-size:13px;color:var(--ink-soft); }
.metadata-totals { display:flex;flex-wrap:wrap;gap:8px 20px; }
.metadata-total { display:inline-flex;align-items:baseline;gap:8px; }
.metadata-total strong { font-size:15px;font-weight:600;color:var(--ink); }
.metadata-scope, .metadata-warning { max-width:75ch;font-size:13px;line-height:1.65;margin:0 0 18px;color:var(--ink-soft); }
.metadata-warning { font-weight: 600; }
.metadata-report .metadata-search-control { display:flex;align-items:center;flex:1 1 240px;gap:0;min-width:0;max-width:340px;border:1px solid var(--border);border-radius:10px;background:var(--bg); }
.metadata-search-icon { display:flex;flex:0 0 18px;margin-left:14px;color:var(--ink-soft); }
.metadata-report input.metadata-search { box-sizing:border-box;width:100%;min-width:0;min-height:44px;margin:0;padding:10px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:400;box-shadow:none; }
.metadata-report input.metadata-search:focus { outline:none;box-shadow:none; }
.metadata-search-control:focus-within { outline:2px solid var(--ink);outline-offset:3px; }
.metadata-search-status { font-size: 14px; margin: 0 0 12px; }
.metadata-group { border-bottom: 1px solid var(--border); }
.metadata-group-heading { display: grid; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 18px 0; list-style: none; font-size: 14px; line-height: 1.5; }
summary.metadata-group-heading { cursor: pointer; }
.metadata-group-heading::-webkit-details-marker { display: none; }
.metadata-group-title { min-width: 0; }
.metadata-group-title strong { font-weight: 600; }
.metadata-group-preview { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); margin-top: 4px; }
.metadata-chevron { font-size: 24px; line-height: 1; text-align: center; }
.metadata-group[open] > summary .metadata-chevron { transform: rotate(90deg); }
.metadata-group-count { font-size: 12px; color: var(--ink-soft); text-align: right; max-width: 240px; }
.metadata-group-count > span, .metadata-report th small { display: block; }
.metadata-comparison-count { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.metadata-comparison-count small { display:block;font-size:11px;font-weight:400;line-height:1.4; }
.metadata-comparison-count strong { display:block;margin-top:3px;font-size:14px;font-weight:600;color:var(--ink); }
.metadata-value-preview { display: block; }
.metadata-value summary { cursor: pointer; font-weight: 600; padding: 8px 0; }
.metadata-value-preview:has(+ .metadata-value[open]) { display: none; }
.metadata-value div { margin-top: 6px; }
.metadata-table-wrap { overflow: auto; max-height: 420px; margin-bottom: 20px; }
.metadata-group-heading:focus-visible, .metadata-value summary:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.metadata-table-wrap:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.metadata-report table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; text-align: left; }
.metadata-report th, .metadata-report td { vertical-align: top; padding: 12px; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; white-space: pre-wrap; }
.metadata-report th { font-weight: 600; }
.metadata-report thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); }
.metadata-report th small { font-weight: 400; margin-top: 4px; }
@media (max-width: 760px) {
    .metadata-group-heading { gap: 8px; }
    .metadata-group-count { max-width: 120px; }
    .metadata-is-comparison .metadata-group-heading { grid-template-columns:16px minmax(0,1fr); }
    .metadata-is-comparison .metadata-group-count { grid-column:2;max-width:none;text-align:left; }
    .metadata-table-wrap { max-height: 55vh; }
    .metadata-report th, .metadata-report td { padding: 10px 6px; }
}
.consent-banner[hidden] { display: none; }
.consent-banner { position: fixed; z-index: 1500; left: 50%; bottom: 16px; transform: translateX(-50%); box-sizing: border-box; width: min(1120px,calc(100% - 32px)); max-height: 60dvh; overflow-y: auto; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; padding: 24px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--ink); box-shadow: 0 4px 16px rgba(0,0,0,.05); text-align: left; }
.consent-copy { min-width: 0; }
.consent-banner h2 { margin: 0 0 8px; font-size: 18px; line-height: 1.4; font-weight: 600; }
.consent-banner p { margin: 0 0 10px; font-size: 14px; line-height: 1.6; }
.consent-policy { display: inline-block; padding-block: 6px; font-size: 13px; line-height: 1.6; color: var(--ink); text-decoration: underline; }
.consent-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; max-width: 410px; }
.consent-banner .consent-actions button { box-sizing: border-box; min-height: 44px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; line-height: 1.4; cursor: pointer; }
.consent-actions #consent-reject:hover { background: var(--bg-soft); }
.consent-actions #consent-accept { background: var(--action); border-color: var(--action); color: var(--action-text); }
.consent-actions #consent-accept:hover { background: color-mix(in srgb,var(--action),var(--bg) 15%); border-color: color-mix(in srgb,var(--action),var(--bg) 15%); }
.consent-banner :is(button,a):focus-visible, .cookie-settings-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.consent-banner h2:focus { outline: none; }
.cookie-settings-link { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 8px; margin-left: -8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 15px; line-height: 1.5; text-align: left; cursor: pointer; }
.cookie-settings-link:hover { color: var(--ink); background: var(--bg-soft-2); }
.privacy-consent[hidden] { display: none; }
.privacy-consent { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 20px; margin: 20px 0; padding: 16px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-soft); }
.privacy-consent .privacy-consent-status { margin: 0; font-size: 14px; font-weight: 500; }
.privacy-consent button.cookie-settings-link { min-height: 44px; margin: 0; padding: 10px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--ink); font-size: 14px; }
.privacy-consent button.cookie-settings-link:hover { background: var(--bg-soft-2); }
body.has-consent-banner { padding-bottom: var(--consent-height,300px); }
@media (max-width: 900px) {
    .consent-banner { display: block; padding: 20px; }
    .consent-actions { margin-top: 14px; max-width: none; }
}
@media (max-width: 420px) {
    .consent-banner { width: calc(100% - 24px); bottom: 12px; padding: 16px; }
    .consent-actions { gap: 8px; }
    .consent-banner .consent-actions button { padding: 10px; font-size: 13px; }
}
/* Tool workspace: compact entry, visible results, shared controls. */
.home-page .home-hero-layout { gap:20px; }
.home-page .home-hero-layout .hero-intro { margin:0; }
.home-page .home-hero-layout > #tool-card.has-image { max-width:960px; }
.home-page:has(.batch-tool.has-image) > .hero .hero-intro,.tool-page:not(.favicon-page):has(.batch-tool.has-image) > .hero .hero-intro { max-width:960px; }
#tool-card.batch-tool.has-image .dropzone[hidden] { display:none; }
:is(.home-page,.tool-page) > .hero { padding-top:28px; }
:is(.home-page,.tool-page) > .hero .hero-intro { margin-bottom:24px;max-width:850px; }
:is(.home-page,.tool-page) > .hero .hero-intro .badge { margin-bottom:14px; }
:is(.home-page,.tool-page) > .hero h1.hero-title { font-size:42px;line-height:1.15;margin-bottom:14px; }
:is(.home-page,.tool-page) > .hero .hero-desc { font-size:16px;max-width:70ch; }
:is(.home-page,.tool-page) #tool-card .dropzone { padding:30px 24px; }
:is(.home-page,.tool-page):has(.tool-card.has-image) .hero-intro { max-width:1080px;margin:0 auto 32px;text-align:center; }
.home-page:has(.batch-tool.has-image) .home-hero-layout { gap:32px; }
:is(.home-page,.tool-page):has(.tool-card.has-image) .hero-intro :is(.badge,.hero-desc) { display:none; }
:is(.home-page,.tool-page):has(.tool-card.has-image) h1.hero-title { font-size:34px;margin:0;text-wrap:balance; }
:is(.home-page,.tool-page):has(.tool-card.has-image) h1.hero-title span { display:inline; }
.tool-card.has-image .home-upload-mascot { display:none; }
.tool-card.batch-tool.has-image:not(:has(#favicon-settings)) { max-width:960px; }
#tool-card.batch-tool.has-image .dropzone { display:flex;justify-content:center;align-items:center;min-height:56px;padding:6px 20px;border:0;border-radius:16px;background:var(--bg-soft); }
#tool-card.batch-tool.has-image .dropzone :is(.cloud-ic,.dz-title,.batch-hint,.home-upload-mascot) { display:none; }
#tool-card.batch-tool.has-image .dropzone .dz-sub { margin:0; }
#tool-card.batch-tool.has-image .dropzone .link { min-height:44px;padding:8px 18px;background:transparent;color:var(--ink);border:0;box-shadow:none; }
.batch-resize-option { display:flex;align-items:center;justify-content:center;gap:10px;padding:14px 18px;font-size:13px;color:var(--ink-soft); }
.batch-resize-option input { width:17px;height:17px;accent-color:var(--ink); }
.batch-results-header { padding:16px 24px; }
.batch-results.one-download .batch-save { background:var(--yellow);color:#171717!important; }
.batch-output-dimensions { display:block;font-size:12px;margin-top:4px; }
.batch-growth-note { display:block;margin-top:8px;font-size:12px;color:var(--ink-soft);max-width:32ch; }
@media(min-width:761px) {
 .editor-page .workspace-grid > :is(.tool-preview-column,.markup-preview-column,.compose-preview-column,.social-preview-column) { position:sticky;top:100px;align-self:start; }
}
/* Compression stays in one compact panel, with the same hierarchy for one or many images. */
.home-page > .hero { padding-top:40px; }
.home-page > .hero .hero-intro { max-width:820px;margin:0; }
.home-page > .hero h1.hero-title { max-width:25ch;margin:0 auto 16px;font-size:56px;line-height:1.2;letter-spacing:-.035em;text-wrap:balance; }
.home-page > .hero h1.hero-title span { display:inline; }
.home-page:has(.batch-tool.has-image) > .hero .hero-intro { max-width:880px;text-align:center;margin:0; }
.home-page:has(.batch-tool.has-image) > .hero h1.hero-title { margin:0 auto;font-size:34px; }
.home-page:has(.batch-tool.has-image) h1.hero-title mark { background:none;color:var(--ink); }
:is(.home-page,.tool-page) #tool-card.batch-tool.has-image:has(+ .batch-results) { display:contents; }
.home-page .home-hero-layout > .batch-results,.batch-results { max-width:880px; }
.tool-page #tool-card.has-image + .batch-results { margin-top:0; }
.tool-page:not(.favicon-page):has(.batch-results:not([hidden])) > .hero .hero-intro { max-width:880px;text-align:center; }
#upload-error:has(+ .batch-tool.has-image + .batch-results) { max-width:880px; }
.batch-results .batch-results-header { flex-direction:row;align-items:center;padding:0 0 16px;background:transparent; }
.batch-results-header h2 { font-size:15px;font-weight:600; }
.batch-results .batch-result-actions { width:auto;justify-content:flex-end;gap:8px; }
.batch-results.is-single #batch-clear { display:none; }
:is(.home-page,.tool-page) .batch-results .dropzone { display:flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--bg);box-shadow:none; }
.batch-results .dropzone:is(:hover,.is-dragover) { background:var(--bg-soft);border-color:var(--ink-soft); }
.batch-results .dropzone :is(.cloud-ic,.home-upload-mascot,.dz-title,.batch-hint) { display:none; }
.batch-results .dropzone .dz-sub { margin:0; }
:is(.home-page,.tool-page) .batch-results .dropzone .dz-sub .link { display:flex;align-items:center;gap:8px;min-height:0;padding:0;border:0;background:transparent;box-shadow:none;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none; }
.batch-results .dropzone .link::before { content:'+';font-size:20px;font-weight:400;line-height:1; }
.batch-results .dropzone[aria-disabled="true"] { opacity:.5;cursor:default; }
.batch-results .batch-controls { border-top:1px solid var(--border);padding:14px 0; }
.batch-results .batch-resize-option { justify-content:flex-start;margin:0;padding-inline:0; }
.batch-results .batch-status { position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.batch-results .batch-row { position:relative;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:20px 0; }
.batch-results .batch-preview-button { grid-column:1;grid-row:1 / span 3;width:80px;height:72px;background:var(--bg-soft); }
.batch-results .batch-thumbnail { width:80px;height:72px; }
.batch-results .batch-file { grid-column:2;grid-row:1;align-self:end;padding:0; }
.batch-results .batch-file strong { font-size:14px; }
.batch-results .batch-state { grid-column:2;grid-row:2; }
.batch-results .batch-output { grid-column:2;grid-row:2;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 6px;font-size:13px; }
.batch-results .batch-row[data-original-kept] .batch-output { grid-row:3; }
.batch-results .batch-row[data-state="done"]:not([data-original-kept]) .batch-file > span { display:none; }
.batch-results .batch-row[data-state="done"]:not([data-original-kept]) .batch-state { position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap; }
.batch-results .batch-row:not([data-state="done"]) .batch-output { display:none; }
.batch-results .batch-output-size { font-size:14px; }
.batch-results .batch-output-source { display:inline;white-space:nowrap; }
.batch-results .batch-output-ready { display:none; }
.batch-results .batch-output-detail { margin:0; }
.batch-results .batch-output-detail::before,.batch-results .batch-output-dimensions::before { content:'· '; }
.batch-results .batch-output-dimensions { margin:0; }
.batch-results .batch-row-actions,.batch-results .batch-row[data-state] .batch-row-actions { grid-column:3;grid-row:1 / span 3;padding:0;justify-content:flex-end;gap:4px; }
.batch-results .batch-row-actions > .batch-remove { position:static; }
.batch-results .batch-save { flex:none;min-width:100px; }
.tool-source-actions { display:none; }
html body .choice-native { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap; }
html body .workspace-settings .tool-choices { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;margin:0;padding:0;border:0; }
.tool-choices legend { grid-column:1 / -1;width:100%;float:left;margin:0 0 8px;font-size:14px;font-weight:500; }
html body .workspace-settings .tool-choices label { display:block;position:relative;min-width:0;cursor:pointer; }
html body .tool-choices input[type=radio] { position:absolute;opacity:0;width:100%;height:100%;margin:0; }
.tool-choices label > span { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:44px;height:100%;padding:10px;border:1px solid var(--border);border-radius:10px;text-align:center;line-height:1.45;font-size:13px; }
.tool-choices label:has(input:checked) > span { background:var(--bg);border-color:var(--ink-soft);font-weight:600; }
.tool-choices label:has(input:disabled) > span { opacity:.5;cursor:default; }
.tool-choices label:has(input:focus-visible) > span { outline:2px solid var(--ink);outline-offset:2px; }
.tool-choices small { font-size:11px;color:var(--ink-soft); }
.choice-picture { display:block;flex:none;border:1.5px solid currentColor;border-radius:3px;background:var(--bg-soft); }
.tool-choices .sr-only { float:none;width:1px; }
/* Every tool uses the pixelation editor's color square, HEX field and quick colors. */
.tool-card .tool-color-control { display:flex;align-items:center;gap:8px;min-width:0; }
.tool-card .workspace-settings .tool-color-control input[type=color] { flex:0 0 44px;width:44px;min-width:0;height:44px;min-height:44px;padding:4px;border:1px solid var(--border);border-radius:8px;background:var(--bg);cursor:pointer; }
.tool-card .workspace-settings .tool-color-control .tool-color-hex { flex:1;min-width:0;width:100%;height:44px;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font:400 14px ui-monospace,monospace; }
.tool-card .tool-color-control .tool-color-swatch { flex:0 0 44px;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:1px solid var(--border);border-radius:8px;cursor:pointer; }
.tool-color-control :disabled { cursor:default; }
.tool-color-swatch:focus-visible { outline:2px solid var(--ink);outline-offset:3px; }
.opacity-inputs { display:flex;align-items:center;gap:8px;min-width:0; }
html body .workspace-settings .opacity-inputs input[type=range] { flex:1;min-width:30px;width:0; }
html body .workspace-settings .opacity-inputs input[type=number] { flex:0 0 60px;width:60px;padding-inline:8px; }
.quick-presets { display:flex;flex-wrap:wrap;gap:6px; }
html body .tool-card .quick-presets button { min-height:36px;margin:0;padding:6px 12px;border:1px solid var(--border);border-radius:999px;background:var(--bg);color:var(--ink-soft);font:inherit;font-size:12px;cursor:pointer; }
html body .tool-card .quick-presets button:hover { background:var(--bg-soft); }
html body .tool-card .quick-presets button[aria-pressed="true"] { background:var(--bg-soft-2);color:var(--ink);font-weight:600; }
.tool-advanced { padding:12px 0;border-block:1px solid var(--border); }
.tool-advanced > summary { min-height:32px;font-size:14px;cursor:pointer;font-weight:500; }
.tool-advanced[open] > :not(summary) { margin-top:16px; }
.tool-advanced .merge-section { border:0;padding:0; }
.metadata-privacy-summary { margin:0 0 20px; }
.metadata-privacy-summary h3 { margin:0 0 12px;font-size:14px;font-weight:600; }
.metadata-privacy-summary dl { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0; }
.metadata-privacy-summary dl > div { padding:14px;border:1px solid var(--border);border-radius:10px; }
.metadata-privacy-summary dt { margin-bottom:6px;font-size:13px;font-weight:600; }
.metadata-privacy-summary dd { margin:0;font-size:12px;line-height:1.6;color:var(--ink-soft); }
html body .favicon-page #tool-card.has-image { max-width:1080px; }
html body .favicon-page #favicon-settings { padding:0; }
html body .favicon-page #favicon-results { max-width:none;margin:0; }
html body .favicon-page :is(#favicon-settings,#favicon-results)[hidden] { display:none; }
html body .favicon-page .favicon-options { grid-template-columns:minmax(0,1fr);gap:20px; }
html body .favicon-page .favicon-preview { padding:0;border:0; }
html body .favicon-page .favicon-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
html body .favicon-page .favicon-sample { min-height:96px; }
html body .favicon-page .favicon-preview-grid figure:last-child { grid-column:1 / -1; }
html body .favicon-page .favicon-preview-grid figure:last-child .favicon-sample { min-height:204px; }
html body .favicon-page .favicon-color { display:flex;flex-direction:column;align-items:stretch;gap:8px; }
html body .workspace-settings .crop-ratio-choices { grid-template-columns:repeat(3,minmax(0,1fr)); }
.favicon-package > summary,.favicon-install > summary { padding:16px;font-size:14px;font-weight:500;cursor:pointer; }
.favicon-install > summary { padding:0; }
.favicon-package { border-top:1px solid var(--border); }
html body .favicon-page #favicon-zip { max-width:100%;white-space:normal; }
.tool-mobile-actions { display:none; }
@media(max-width:760px) {
 :is(.home-page,.tool-page) > .hero { padding-top:22px; }
 :is(.home-page,.tool-page) #tool-card .dropzone { min-height:200px; }
 :is(.home-page,.tool-page) #tool-card .dropzone .dz-title { display:none; }
 :is(.home-page,.tool-page) #tool-card .dropzone .cloud-ic { width:40px;height:40px;margin-bottom:12px; }
 .home-page .home-upload-mascot { width:56px; }
 :is(.home-page,.tool-page) > .hero h1.hero-title { font-size:30px;line-height:1.2; }
 :is(.home-page,.tool-page) > .hero .hero-desc { font-size:15px;line-height:1.6; }
 :is(.home-page,.tool-page) > .hero .hero-intro { margin-bottom:20px; }
 :is(.home-page,.tool-page) #tool-card .dropzone { padding:24px 16px; }
 :is(.home-page,.tool-page):has(.tool-card.has-image) h1.hero-title { font-size:28px; }
 .batch-row-actions { gap:6px;flex-wrap:wrap; }
 .batch-output-dimensions,.batch-growth-note { flex-basis:100%; }
 .batch-row-actions .tool-flow-control > .tool-flow-trigger { padding:8px 4px;margin:0;font-size:12px; }
 .batch-resize-option { justify-content:flex-start;font-size:12px; }
 #tool-card.batch-tool.has-image .dropzone { padding:4px 12px; }
 .metadata-privacy-summary dl { grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
 html body .favicon-page .favicon-preview-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
 html body .favicon-page .favicon-sample { min-height:72px; }
 html body .favicon-page .favicon-preview-grid figure:last-child { grid-column:1 / -1; }
 html body .favicon-page .favicon-preview-grid figure:last-child .favicon-sample { min-height:204px; }
 .tool-mobile-actions:not([hidden]) { position:fixed;inset:auto 0 0;z-index:45;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--border);background:var(--bg);box-shadow:0 -4px 18px #00000008; }
 html body .tool-mobile-actions button { min-height:48px;margin:0;padding:10px 12px;font:inherit;font-size:14px;border-radius:999px; }
 html body .tool-mobile-actions .tool-secondary { border:1px solid var(--border);background:var(--bg);color:var(--ink); }
 .has-consent-banner .tool-mobile-actions { display:none; }
 html body .workspace-settings :is(input[type=text],input[type=number],select) { font-size:16px; }
 .tool-card .workspace-settings .tool-color-control .tool-color-hex { font-size:16px; }
}
@media(max-width:600px) {
 .home-page > .hero h1.hero-title { font-size:30px; }
 .home-page:has(.batch-tool.has-image) > .hero h1.hero-title { font-size:28px; }
 .batch-results .batch-results-header { flex-wrap:wrap;gap:8px;padding:0 0 12px; }
 .batch-results-header h2 { flex:1; }
 .batch-results .batch-result-actions { flex-wrap:wrap; }
 .batch-results-header:has(#batch-download:not([hidden])) { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px; }
 .batch-results-header:has(#batch-download:not([hidden])) .batch-result-actions { display:contents; }
 .batch-results-header:has(#batch-download:not([hidden])) #batch-clear { grid-column:2;grid-row:1; }
 .batch-results-header #batch-download:not([hidden]) { grid-column:1 / -1;grid-row:2;width:100%; }
 .batch-results-header #batch-clear { order:1;margin-left:auto;padding-inline:8px;font-size:12px; }
 :is(.home-page,.tool-page) .batch-results > .dropzone { box-sizing:border-box;width:100%;min-height:52px;justify-content:center;margin-top:16px;padding:12px 16px;border:1px dashed var(--border);border-radius:10px;background:var(--bg-soft); }
 :is(.home-page,.tool-page) .batch-results > .dropzone .dz-sub .link { font-size:14px; }
 .batch-results .batch-row { grid-template-columns:56px minmax(0,1fr);gap:8px 12px;padding:16px 0; }
 .batch-results .batch-preview-button,.batch-results .batch-thumbnail { width:56px;height:56px; }
 .batch-results .batch-preview-button { grid-row:1 / span 2; }
 .batch-results .batch-file { padding-right:28px; }
 .batch-results .batch-row-actions,.batch-results .batch-row[data-state] .batch-row-actions { grid-column:1 / -1;grid-row:4;justify-content:space-between;padding-top:4px; }
 .batch-results .batch-row-actions > .batch-remove { position:absolute;top:10px;right:6px; }
 .batch-results .batch-save { margin-left:auto;min-width:112px; }
 .batch-results .batch-output-dimensions { flex-basis:100%; }
 .batch-results .batch-output-dimensions::before { content:none; }
}
@media(max-width:760px) {
 .workspace-header .tool-result-actions:empty { display:none; }
 .tool-source-actions:has(> button:not([hidden])) { display:grid;min-width:0;margin-top:16px;border:1px dashed var(--border);border-radius:10px;overflow:hidden;background:var(--bg-soft); }
 html body .tool-source-actions > :is(.tool-reset,.tool-secondary) { display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:none;min-height:52px;margin:0;padding:12px 16px;border:0;border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:500;line-height:1.5;white-space:normal;text-align:center;text-decoration:none;overflow-wrap:anywhere;cursor:pointer; }
 html body .tool-source-actions > button[hidden] { display:none; }
 .tool-source-actions > button:hover:not(:disabled) { background:var(--bg-soft-2); }
 .tool-source-actions > button:focus-visible { outline:2px solid var(--ink);outline-offset:-3px; }
 .tool-source-actions > button:disabled { opacity:.5;cursor:default; }
 .tool-source-actions > #merge-add::before { content:'+';font-size:20px;font-weight:400;line-height:1; }
 html body .tool-source-actions:has(:is(#merge-add,#product-add)) > #choose-another { border-top:1px solid var(--border);background:var(--bg);font-size:12px;font-weight:400;min-height:44px; }
}

/* Image editors: one source toolbar beside a clearly grouped settings column. */
.tool-page.editor-layout:has(.tool-card.has-image) > .hero .hero-intro { margin-bottom:48px; }
.editor-layout .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr) 360px; }
.editor-layout .tool-card .workspace-header { flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;margin:0 0 20px; }
.editor-layout .compose-preview-column .workspace-header { margin-bottom:0; }
.editor-layout .workspace-header :is(.workspace-file,.crop-file-info) { flex:1 1 180px; }
.editor-layout .workspace-header :is(.workspace-file strong,.crop-file-name) { font-size:14px;line-height:1.5; }
.editor-layout .workspace-header :is(.workspace-file span,.crop-file-size) { font-size:12px;line-height:1.5; }
.editor-layout #tool-card .workspace-header .tool-result-actions { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-left:auto;order:0; }
.editor-layout .workspace-header .tool-preview-toolbar { flex-shrink:0;min-height:0;margin:0; }
.editor-layout .workspace-header .tool-preview-toolbar:not([hidden]) { display:flex;align-items:center; }
.editor-layout #tool-card button.tool-preview-trigger { min-height:44px;padding:8px 18px;border:0;border-radius:999px;background:transparent; }
.editor-layout #tool-card button.tool-preview-trigger:hover { background:var(--bg-soft-2); }
.editor-layout .tool-preview-trigger svg { flex:none;width:16px;height:16px; }
.editor-layout .workspace-settings { padding:24px;border-radius:16px;background:var(--bg-soft); }
.editor-layout .workspace-settings .editor-group-title,
.editor-layout .workspace-settings > fieldset > legend { font-size:16px;line-height:1.5;font-weight:600; }
.editor-layout .workspace-settings .editor-group-separated { margin-top:8px;padding-top:24px; }
.editor-layout .workspace-settings .tool-download-actions { margin-top:4px; }
.editor-layout #tool-card :is(.download-btn,.tool-reset,.tool-preview-trigger,.compose-rotation .tool-secondary) { min-width:0;max-width:100%;height:auto;white-space:normal;text-wrap:balance;overflow-wrap:anywhere; }
.editor-layout .workspace-header :is(.tool-result-actions,.tool-preview-toolbar) { max-width:100%; }
body:has(.editor-layout) .tool-mobile-actions button { min-width:0;height:auto;line-height:1.4;white-space:normal;text-wrap:balance;overflow-wrap:anywhere; }
@media(max-width:360px) {
 .tool-card .workspace-settings .tool-color-control .tool-color-hex { padding-inline:6px; }
}
@media(min-width:761px) {
 .editor-layout #crop-canvas { max-height:min(560px,calc(100dvh - 320px)); }
}
@media(min-width:761px) and (max-width:1024px) {
 .editor-layout .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr) 330px;gap:28px; }
}
@media(max-width:760px) {
 .tool-page.editor-layout:has(.tool-card.has-image) > .hero .hero-intro { margin-bottom:40px; }
 .editor-layout .tool-card .workspace-grid { grid-template-columns:minmax(0,1fr);gap:28px; }
 .editor-layout .workspace-settings { padding:16px; }
 .editor-layout .tool-card .workspace-header { gap:8px;margin-bottom:16px; }
 .editor-layout #tool-card .workspace-header .tool-result-actions:empty { display:none; }
 .editor-layout .workspace-header .tool-preview-toolbar { margin-left:auto; }
}