@charset "UTF-8";

:root {
  --ink:#17212b; --text:#39434e; --muted:#68727e; --paper:#fff;
  --white:#fff; --line:#e1e6ec; --soft:#f3f6f9; --lime:#edf4ff;
  --content:1220px; --wb-accent:#1769e0; --wb-accent-dark:#1155b9;
  --coral:#ef6648; --green:#27956f; --gold:#bc8420;
  font-family:Arial,Helvetica,sans-serif; line-height:1.6;
}
body { background:#fff; }
h1,h2,.serif { font-family:Arial,Helvetica,sans-serif; font-weight:700; letter-spacing:-.035em; }
h3 { letter-spacing:-.018em; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible { outline-color:#1769e0; }
.site-header { background:#fff; border-bottom:1px solid var(--line); }
.header-inner { min-height:64px; gap:24px; }
.brand { gap:8px; font-size:1.25rem; letter-spacing:-.045em; color:var(--ink); }
.brand span { font-weight:700; color:var(--ink); }
.brand svg { width:29px; height:29px; }
.nav { gap:28px; font-size:.81rem; }
.nav a { font-weight:600; }
.nav a:hover,.nav a[aria-current=page] { color:var(--wb-accent); text-decoration:none; }
.nav .nav-feature { border:0; background:none; padding:0; border-radius:0; color:var(--muted); }
.button { padding:11px 19px; gap:10px; border-radius:4px; border-color:var(--wb-accent); background:var(--wb-accent); color:#fff; font-size:.84rem; }
.button:hover { background:var(--wb-accent-dark); border-color:var(--wb-accent-dark); }
.button.secondary { background:#fff; color:var(--ink); border-color:#cdd5de; }
.button.secondary:hover { background:#f5f8fb; border-color:#9aafc7; }
.site-footer { background:#f7f9fb; border-color:var(--line); }
.footer-brand { font-size:1.05rem; letter-spacing:-.025em; }
.footer-main p { font-size:.79rem; }
.wb-site h1,.wb-site h2,.wb-site h3 { color:var(--ink); }
.wb-site p { color:var(--muted); }
.wb-site a { text-decoration:none; }
.wb-site a:hover { color:var(--wb-accent); }
.wb-site .button { color:#fff; }
.wb-site .button.secondary { color:var(--ink); }
.wb-site input,.wb-site select,.wb-site textarea { min-width:0; max-width:100%; border:1px solid #c8d1dc; border-radius:4px; min-height:42px; font-size:.88rem; }
.wb-site input:focus,.wb-site select:focus,.wb-site textarea:focus { border-color:var(--wb-accent); }
.wb-kicker,.hero-label { display:block; margin:0 0 14px; color:#697784; font-size:.66rem; font-weight:700; letter-spacing:.1em; line-height:1.5; }
.wb-visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

/* The home page starts with useful actions and a working image compressor. */
.tool-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:72px; align-items:center; padding:44px 0 34px; }
.hero-copy,.hero-workspace { min-width:0; }
.hero-copy h1 { font-size:clamp(2.7rem,4.3vw,3.6rem); line-height:1.08; letter-spacing:-.055em; margin:0 0 20px; }
.hero-description { max-width:435px; font-size:.98rem; line-height:1.75; margin:0 0 26px; }
.hero-shortcuts { display:grid; max-width:435px; gap:0; border-top:1px solid var(--line); }
.featured-shortcut { display:grid; grid-template-columns:29px minmax(0,1fr) 20px; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink); }
.featured-shortcut>svg { width:26px; height:26px; color:var(--coral); }
.featured-shortcut:nth-child(2)>svg { color:var(--wb-accent); }
.featured-shortcut:nth-child(3)>svg { color:var(--green); }
.featured-shortcut strong { display:block; font-size:.89rem; font-weight:600; line-height:1.4; }
.featured-shortcut small { display:block; margin-top:2px; font-size:.72rem; color:var(--muted); line-height:1.5; }
.featured-shortcut>span:last-child { color:#85929f; font-size:1.05rem; }
.featured-shortcut:hover { background:#fafcff; }
.hero-workspace { border:1px solid #cbd6e3; border-radius:4px; padding:22px; background:#fff; }
.workspace-top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; color:#7a8795; font-size:.57rem; font-weight:700; letter-spacing:.08em; }
.workspace-top span:first-child { color:var(--wb-accent); }
.hero-workspace h2 { font-size:1.25rem; line-height:1.3; margin:0 0 6px; letter-spacing:-.025em; }
.hero-workspace>p { font-size:.76rem; line-height:1.65; margin-bottom:16px; }
.hero-dropzone { display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; overflow:hidden; padding:19px 15px; margin:0 0 17px; border:1px dashed #98b6dc; border-radius:3px; background:#f8fbff; cursor:pointer; }
.hero-dropzone>svg { width:29px; height:29px; color:var(--wb-accent); margin-bottom:8px; }
.hero-dropzone strong { font-size:.88rem; font-weight:600; margin-bottom:3px; color:var(--wb-accent); }
.hero-dropzone>span { font-size:.69rem; font-weight:400; color:var(--muted); }
.hero-dropzone input[type=file] { position:absolute; inset:0; width:100%; height:100%; opacity:0; padding:0; cursor:pointer; }
.hero-dropzone:hover,.hero-dropzone.dragging { background:#edf5ff; border-color:var(--wb-accent); }
.hero-dropzone:focus-within { outline:3px solid var(--wb-accent); outline-offset:2px; }
.quick-settings { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:15px; }
.quick-settings label { font-size:.72rem; color:#566270; line-height:1.5; margin-bottom:5px; }
.quick-settings select { padding:8px 10px; font-size:.76rem; min-height:39px; }
.quick-settings label:has(input[type=checkbox]) { display:flex; align-items:flex-start; gap:8px; margin:19px 0 0; font-size:.71rem; font-weight:400; }
.quick-settings input[type=checkbox] { width:15px; height:15px; min-height:15px; padding:0; margin:3px 0 0; flex:none; accent-color:var(--wb-accent); }
.hero-workspace .buttons { gap:10px; margin-top:16px; }
.hero-workspace .button { min-height:40px; font-size:.76rem; padding:9px 18px; }
.hero-workspace [role=status],.hero-workspace [role=alert] { font-size:.73rem; line-height:1.6; margin:13px 0 0; overflow-wrap:anywhere; }
.hero-workspace [role=alert] { color:#b13a30; }
.hero-workspace [role=status]:empty,.hero-workspace [role=alert]:empty { display:none; }
.hero-workspace .wb-result-status,.hero-workspace .wb-image-results { padding:0; }
.hero-workspace .wb-result-actions { margin:13px 0 0; }
.hero-workspace .wb-image-results,.hero-workspace #image-results { display:grid; gap:10px; margin-top:13px; min-width:0; }
.hero-workspace .wb-image-results:empty,.hero-workspace #image-results:empty { display:none; }
.hero-workspace>.buttons:has(>button[hidden]):not(:has(>button:not([hidden]))) { display:none; }
.hero-workspace .quick-limit { margin:13px 0 0; font-size:.63rem; line-height:1.75; color:#87939f; }
.hero-workspace .quick-limit a { color:var(--wb-accent); }
.hero-workspace .image-result { grid-template-columns:45px minmax(0,1fr); padding:10px; gap:10px; }
.hero-workspace .image-result img { width:45px; height:45px; }
.hero-workspace .image-result a { grid-column:1/-1; }
.hero-workspace .wb-workbench-footnote { background:none; padding:12px 0 0; margin:14px 0 0; text-align:left; font-size:.63rem; }
.quick-strip { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:34px; padding:17px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:30px; color:#6f7b87; font-size:.74rem; }
.quick-strip>span,.quick-strip>div { display:inline-flex; align-items:center; gap:8px; min-width:0; }
.quick-strip svg { width:17px; height:17px; flex:none; color:var(--green); }
.quick-strip p { margin:0; font-size:inherit; }

/* A compact directory, with task names carrying the hierarchy. */
.wb-directory { padding:0 0 35px; }
.wb-directory-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin-bottom:17px; }
.wb-directory-heading h2 { font-size:1.48rem; margin:0 0 5px; letter-spacing:-.035em; }
.wb-directory-heading p { font-size:.8rem; margin:0; }
.wb-search { width:290px; flex:none; position:relative; }
.wb-search svg { width:18px; height:18px; position:absolute; top:12px; left:13px; color:#7a8794; pointer-events:none; }
.wb-search input { padding:10px 12px 10px 40px; min-height:42px; font-size:.79rem; background:#fff; }
.wb-search input::placeholder { color:#87929e; }
.wb-directory-controls { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:0 0 16px; border-bottom:1px solid var(--line); }
.wb-filters { display:flex; gap:23px; min-width:0; }
.wb-filter { border:0; border-bottom:2px solid transparent; background:none; border-radius:0; padding:10px 0 12px; color:#727e8a; font-size:.76rem; font-weight:600; min-height:42px; white-space:nowrap; }
.wb-filter:hover { color:var(--wb-accent); }
.wb-filter[aria-pressed=true],.wb-filter.is-active { color:var(--wb-accent); border-bottom-color:var(--wb-accent); background:none; }
#directory-count { color:#89939e; font-size:.71rem; white-space:nowrap; margin:0 0 2px; }
.wb-tool-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.wb-tool-card { min-width:0; background:#fff; border:1px solid #e2e7ed; border-radius:4px; }
.wb-tool-card:hover { background:#fafcff; border-color:#a8c6eb; }
.wb-tool-card-link { display:grid; grid-template-columns:36px minmax(0,1fr) 15px; grid-template-rows:auto auto; column-gap:13px; row-gap:6px; align-content:center; align-items:center; min-height:108px; height:100%; padding:18px 16px; }
.wb-tool-icon { display:flex; align-items:center; justify-content:center; grid-column:1; grid-row:1/span 2; width:34px; height:34px; background:none; border-radius:0; }
.wb-tool-icon svg { width:32px; height:32px; }
.wb-icon-image { color:var(--coral); }
.wb-icon-data { color:var(--green); }
.wb-icon-number { color:var(--gold); }
.wb-tool-card:nth-child(3n+2) .wb-icon-image { color:var(--wb-accent); }
.wb-tool-card:nth-child(3n) .wb-icon-image { color:var(--green); }
.wb-tool-card h3 { grid-column:2; grid-row:1; font-size:.92rem; line-height:1.3; margin:0; min-width:0; font-weight:600; }
.wb-tool-card p { grid-column:2; grid-row:2; font-size:.71rem; line-height:1.5; margin:0; color:#7a8692; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.wb-card-copy { grid-column:2; grid-row:1/span 2; min-width:0; }
.wb-card-copy h3 { margin-bottom:6px; }
.wb-card-bottom { grid-column:3; grid-row:1/span 2; color:#93a0ad; font-size:1rem; }
.wb-card-bottom>span:first-child { display:none; }
.wb-card-arrow { grid-column:3; grid-row:1/span 2; color:#93a0ad; font-size:1rem; }
.wb-empty { padding:27px 20px; border:1px dashed #b6c7da; border-radius:3px; text-align:center; font-size:.85rem; }
.local-note { border-top:1px solid var(--line); padding:16px 0; margin:0 0 24px; font-size:.74rem; color:#7b8793; line-height:1.7; }
.local-note a { color:var(--wb-accent); }
.wb-guides { padding:25px 0 42px; border-top:1px solid var(--line); }
.wb-section-heading { display:flex; align-items:center; justify-content:space-between; gap:22px; margin-bottom:20px; }
.wb-section-heading .wb-kicker { margin-bottom:8px; }
.wb-section-heading h2 { font-size:1.45rem; margin:0; line-height:1.3; }
.wb-section-heading>a { font-size:.76rem; color:var(--wb-accent); white-space:nowrap; font-weight:600; }
.wb-guide-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:29px; }
.wb-guide-card { display:flex; flex-direction:column; align-items:start; min-width:0; border-top:2px solid #e4e9ee; padding-top:18px; }
.wb-guide-card:hover { border-color:var(--wb-accent); }
.wb-guide-card .wb-kicker { font-size:.57rem; margin-bottom:12px; letter-spacing:.07em; color:#8a949e; }
.wb-guide-card h3 { font-size:.97rem; line-height:1.4; margin:0 0 8px; }
.wb-guide-card p { font-size:.74rem; line-height:1.7; margin:0 0 15px; }
.wb-guide-read { font-size:.7rem; font-weight:600; color:var(--wb-accent); margin-top:auto; }
.wb-guide-read>span { margin-left:8px; }

/* Tool workspaces retain their controls and results without landing-page decoration. */
.wb-site .page-heading { max-width:none; padding:27px 0 26px; text-align:left; }
.wb-site .page-heading .eyebrow { color:#7c8996; font-size:.6rem; letter-spacing:.09em; margin-bottom:10px; }
.wb-site .page-heading h1 { font-size:clamp(2rem,3.5vw,2.7rem); line-height:1.12; margin:0 0 12px; }
.wb-site .page-heading .lead { max-width:780px; font-size:.94rem; line-height:1.7; margin:0; }
.wb-site .breadcrumbs { justify-content:flex-start; margin-bottom:22px; font-size:.68rem; }
.wb-workbench { max-width:980px; margin:0 0 31px; border:1px solid #d6dfe9; border-radius:4px; background:#fff; overflow:hidden; }
.wb-workbench fieldset:disabled { opacity:.6; }
.wb-dropzone { display:flex; flex-direction:column; align-items:center; text-align:center; cursor:pointer; position:relative; overflow:hidden; padding:27px 20px 23px; border-bottom:1px dashed #a7bfdd; background:#f7fbff; margin:0; }
.wb-dropzone:hover,.wb-dropzone.dragging { background:#eef6ff; border-color:var(--wb-accent); }
.wb-upload-icon { width:35px; height:35px; display:flex; align-items:center; justify-content:center; color:var(--wb-accent); margin-bottom:11px; }
.wb-upload-icon svg { width:31px; height:31px; }
.wb-dropzone strong { font-size:1.1rem; font-weight:600; line-height:1.4; margin-bottom:5px; }
.wb-dropzone>span:not(.wb-upload-icon):not(.wb-file-button) { font-size:.76rem; font-weight:400; color:var(--muted); }
.wb-file-button { background:var(--wb-accent); color:#fff; border-radius:4px; padding:9px 22px; font-size:.8rem; font-weight:600; margin:15px 0 11px; }
.wb-dropzone small { font-size:.66rem; color:#7e8c99; font-weight:400; }
.wb-dropzone input[type=file] { position:absolute; inset:0; opacity:0; width:100%; height:100%; padding:0; cursor:pointer; }
.wb-dropzone:focus-within { outline:3px solid var(--wb-accent); outline-offset:-4px; }
.wb-settings { padding:25px 27px 23px; }
.wb-settings-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:21px; }
.wb-settings-heading h2 { font-size:1rem; letter-spacing:-.015em; margin:0; }
.wb-settings-heading>span { font-size:.67rem; color:#83919e; }
.wb-field-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 24px; }
.wb-field { min-width:0; }
.wb-field label { font-size:.75rem; color:#526171; margin-bottom:7px; }
.wb-field input,.wb-field select { padding:9px 10px; font-size:.8rem; }
.wb-field input::placeholder { font-size:.72rem; color:#8d99a6; }
.wb-field input[type=range] { appearance:auto; accent-color:var(--wb-accent); padding:0; min-height:32px; cursor:pointer; }
.wb-field input[type=color] { padding:4px; height:42px; background:#fff; cursor:pointer; }
.wb-range-labels { display:flex; justify-content:space-between; gap:10px; margin-top:1px; font-size:.63rem; color:#8693a1; }
.wb-field-help { font-size:.66rem!important; line-height:1.6!important; color:#7c8997!important; margin:7px 0 0!important; }
.wb-output-format { display:flex; align-items:center; justify-content:space-between; gap:12px; align-self:start; border:1px solid var(--line); border-radius:3px; padding:12px; min-height:61px; }
.wb-output-format span { font-size:.7rem; color:var(--muted); }
.wb-output-format strong { font-size:.93rem; color:var(--wb-accent); }
.wb-checkbox { display:flex; align-items:flex-start; gap:9px; font-size:.74rem; font-weight:400; color:#677686; margin-top:21px; line-height:1.6; }
.wb-checkbox input { width:16px; height:16px; min-height:16px; margin:2px 0 0; padding:0; flex:none; accent-color:var(--wb-accent); }
.wb-actions { display:flex; flex-wrap:wrap; align-items:center; gap:11px; border-top:1px solid var(--line); padding-top:21px; margin-top:24px; }
.wb-actions .button { font-size:.8rem; min-height:42px; }
.wb-crop-preview { display:flex; align-items:center; justify-content:center; min-height:140px; margin-top:23px; padding:17px; border:1px solid var(--line); background:#f5f8fb; border-radius:3px; }
.wb-crop-preview img { max-width:100%; width:auto; max-height:340px; object-fit:contain; display:block; }
.wb-crop-preview p { max-width:430px; font-size:.77rem; text-align:center; margin:0; line-height:1.8; }
.wb-crop-preview:has(img:not([hidden])) p { display:none; }
.wb-result-status { padding:0 27px; }
.wb-result-status p:empty { display:none; }
#image-status { font-size:.79rem; color:#4f6780; margin:0 0 13px; overflow-wrap:anywhere; }
#image-error { font-size:.8rem; color:#b13a30; margin:0 0 14px; overflow-wrap:anywhere; }
.wb-result-actions { display:flex; flex-wrap:wrap; gap:11px; margin:0 0 16px; }
.wb-result-actions:has(>button[hidden]):not(:has(>button:not([hidden]))) { display:none; }
.wb-result-actions .button { font-size:.76rem; }
.wb-image-results { display:grid; gap:11px; padding:0 27px; }
.image-result { display:grid; grid-template-columns:65px minmax(0,1fr) auto; align-items:center; gap:15px; min-width:0; border:1px solid var(--line); border-radius:3px; background:#f9fbfd; padding:13px; }
.image-result img,.image-result .thumb { width:65px; height:59px; object-fit:contain; display:block; background:#eef3f7; }
.image-result>div,.image-result .info { min-width:0; }
.image-result h3,.image-result strong { font-size:.79rem; line-height:1.5; margin:0 0 4px; overflow-wrap:anywhere; }
.image-result p,.image-result small { display:block; font-size:.68rem; line-height:1.6; color:var(--muted); margin:0; overflow-wrap:anywhere; }
.image-result a,.image-result .download { font-size:.71rem; padding:7px 11px; color:var(--wb-accent); border:1px solid #c7d6e7; border-radius:3px; background:#fff; font-weight:600; text-align:center; white-space:nowrap; }
.image-result .achieved { color:#22845f; }
.image-result .not-achieved { color:#a16b1e; }
.wb-workbench-footnote { padding:16px 25px; margin:18px 0 0; border-top:1px solid var(--line); background:#fafcfe; font-size:.65rem; line-height:1.75; text-align:left; }
.wb-notice { padding:13px 16px; margin:17px 22px; border-left:3px solid #83b0ea; background:#f2f7fd; font-size:.78rem; line-height:1.7; }
.wb-how { max-width:980px; margin:0 0 38px; }
.wb-how>h2 { font-size:1.2rem; margin-bottom:21px; }
.wb-how ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:25px; list-style:none; padding:0; margin:0; }
.wb-how li { display:flex; align-items:flex-start; gap:12px; margin:0; }
.wb-step-number { display:flex; align-items:center; justify-content:center; width:24px; height:24px; flex:none; color:var(--wb-accent); border:1px solid #bad1ed; border-radius:3px; font-size:.68rem; font-weight:700; }
.wb-how p { font-size:.75rem; line-height:1.75; margin:0; }
.wb-reading-layout { display:block; max-width:860px; margin:0 auto; border-top:1px solid var(--line); padding:33px 0 40px; }
.wb-tool-article { min-width:0; }
.wb-tool-article .wb-summary { font-size:.94rem; line-height:1.85; color:#4e5f70; padding-left:18px; border-left:3px solid #abc7e9; margin-bottom:29px; }
.wb-tool-article section+section { margin-top:29px; }
.wb-tool-article h2 { font-size:1.25rem; line-height:1.4; letter-spacing:-.025em; margin:0 0 14px; }
.wb-tool-article p { font-size:.86rem; line-height:1.85; color:#627181; margin-bottom:15px; }
.wb-faq { padding:15px 0; border-top:1px solid var(--line); }
.wb-faq:last-child { border-bottom:1px solid var(--line); }
.wb-faq summary { color:#425468; font-size:.82rem; line-height:1.6; font-weight:600; cursor:pointer; }
.wb-faq p { font-size:.79rem; margin:12px 0 0; }
.wb-sources { border-top:1px solid var(--line); padding:22px 0 0; }
.wb-sources h2 { font-size:1rem; margin-bottom:12px; }
.wb-sources ul { margin:0; padding-left:18px; }
.wb-sources li { font-size:.72rem; line-height:1.8; }
.wb-sources a { color:var(--wb-accent); text-decoration:underline; overflow-wrap:anywhere; }
.wb-related { padding:26px 0 40px; border-top:1px solid var(--line); }
.wb-related .wb-section-heading h2 { font-size:1.25rem; }
.wb-utility-workbench { padding:26px; }
.wb-utility-workbench .utility-panel { border:0; padding:0; background:none; }

@media(max-width:1050px) {
  .tool-hero { gap:38px; }
  .hero-copy h1 { font-size:3rem; }
  .wb-tool-card-link { gap:6px 10px; padding:16px 13px; }
  .wb-tool-card h3 { font-size:.84rem; }
  .wb-field-grid { gap:20px; }
}
@media(max-width:800px) {
  .tool-hero { grid-template-columns:1fr 1fr; gap:28px; padding-top:33px; }
  .hero-copy h1 { font-size:2.65rem; }
  .hero-description { font-size:.86rem; }
  .hero-workspace { padding:18px; }
  .quick-settings { grid-template-columns:1fr; gap:8px; }
  .quick-settings label:has(input[type=checkbox]) { margin-top:0; }
  .featured-shortcut { gap:10px; padding:12px 0; }
  .featured-shortcut strong { font-size:.81rem; }
  .featured-shortcut small { font-size:.66rem; }
  .wb-tool-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-tool-card h3 { font-size:.9rem; }
  .wb-search { width:250px; }
  .wb-field-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wb-guide-grid { gap:22px; }
  .wb-how ol { gap:20px; }
  .wb-how li { flex-direction:column; gap:10px; }
}
@media(max-width:640px) {
  .wrap { padding:0 20px; }
  .header-inner { min-height:64px; flex-direction:row; justify-content:space-between; gap:16px; padding-top:0; padding-bottom:0; }
  .brand { font-size:1.15rem; }
  .brand svg { width:26px; height:26px; }
  .nav { width:auto; gap:17px; justify-content:flex-end; font-size:.71rem; }
  .nav a:last-child { display:none; }
  .tool-hero { grid-template-columns:1fr; gap:25px; padding:27px 0 26px; }
  .hero-label { font-size:.6rem; margin-bottom:12px; }
  .hero-copy h1 { font-size:2.8rem; line-height:1.07; margin-bottom:16px; }
  .hero-description { font-size:.87rem; max-width:none; margin-bottom:20px; }
  .hero-shortcuts { display:none; }
  .featured-shortcut { padding:11px 0; grid-template-columns:26px minmax(0,1fr) 18px; }
  .featured-shortcut>svg { width:24px; height:24px; }
  .featured-shortcut strong { font-size:.82rem; }
  .featured-shortcut small { font-size:.7rem; }
  .hero-workspace { padding:20px; }
  .hero-workspace h2 { font-size:1.21rem; }
  .hero-workspace>p { font-size:.75rem; }
  .hero-dropzone { padding:19px 15px; }
  .quick-settings { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:15px; }
  .quick-settings label:has(input[type=checkbox]) { margin-top:18px; }
  .quick-strip { gap:12px; justify-content:space-between; font-size:.64rem; padding:14px 0; margin-bottom:25px; }
  .quick-strip>span,.quick-strip>div { gap:5px; }
  .quick-strip svg { width:14px; height:14px; }
  .wb-directory { padding-bottom:29px; }
  .wb-directory-heading { flex-direction:column; align-items:flex-start; gap:17px; margin-bottom:13px; }
  .wb-directory-heading h2 { font-size:1.32rem; }
  .wb-directory-heading p { font-size:.77rem; }
  .wb-search { width:100%; }
  .wb-directory-controls { gap:10px; margin-bottom:13px; }
  .wb-filters { gap:19px; }
  .wb-filter { font-size:.68rem; padding:9px 0 11px; }
  #directory-count { font-size:.63rem; }
  .wb-tool-grid { grid-template-columns:1fr; gap:9px; }
  .wb-tool-card-link { min-height:98px; padding:18px; gap:6px 15px; }
  .wb-tool-card h3 { font-size:.92rem; }
  .wb-tool-card p { font-size:.73rem; }
  .wb-section-heading { gap:17px; margin-bottom:18px; align-items:center; }
  .wb-section-heading h2 { font-size:1.25rem; }
  .wb-section-heading>a { font-size:.68rem; }
  .wb-guide-grid { grid-template-columns:1fr; gap:24px; }
  .wb-guides { padding:24px 0 31px; }
  .wb-guide-card { padding-top:17px; }
  .wb-guide-card h3 { font-size:1rem; }
  .wb-guide-card p { font-size:.77rem; }
  .wb-guide-card .wb-kicker { margin-bottom:9px; }
  .local-note { font-size:.7rem; padding:14px 0; margin-bottom:15px; }
  .wb-site .page-heading { padding:23px 0; }
  .wb-site .page-heading h1 { font-size:2.05rem; margin-bottom:12px; }
  .wb-site .page-heading .lead { font-size:.86rem; }
  .wb-site .page-heading .eyebrow { font-size:.58rem; }
  .wb-site .breadcrumbs { font-size:.64rem; margin-bottom:19px; }
  .wb-workbench { margin-bottom:27px; }
  .wb-dropzone { padding:24px 16px 22px; }
  .wb-dropzone strong { font-size:1rem; }
  .wb-dropzone small { font-size:.62rem; }
  .wb-settings { padding:21px 18px; }
  .wb-settings-heading { align-items:flex-start; margin-bottom:18px; gap:12px; }
  .wb-settings-heading h2 { font-size:.93rem; }
  .wb-settings-heading>span { max-width:138px; text-align:right; font-size:.6rem; }
  .wb-field-grid { gap:18px 15px; }
  .wb-field label { font-size:.71rem; }
  .wb-field input,.wb-field select { font-size:16px; padding:8px; }
  .wb-field input::placeholder { font-size:.67rem; }
  .wb-field-help { font-size:.62rem!important; }
  .wb-output-format { padding:10px; min-height:59px; }
  .wb-output-format span { font-size:.66rem; }
  .wb-output-format strong { font-size:.87rem; }
  .wb-checkbox { font-size:.7rem; }
  .wb-actions { margin-top:20px; padding-top:18px; }
  .wb-actions .button { font-size:.74rem; padding:10px 15px; }
  .wb-result-status,.wb-image-results { padding:0 18px; }
  .image-result { grid-template-columns:51px minmax(0,1fr); gap:11px; padding:11px; }
  .image-result img,.image-result .thumb { width:51px; height:51px; }
  .image-result a,.image-result .download { grid-column:1/-1; }
  .image-result h3,.image-result strong { font-size:.73rem; }
  .image-result p,.image-result small { font-size:.64rem; }
  .wb-workbench-footnote { padding:14px 18px; font-size:.61rem; margin-top:16px; }
  .wb-how { margin-bottom:29px; }
  .wb-how>h2 { font-size:1.1rem; margin-bottom:18px; }
  .wb-how ol { grid-template-columns:1fr; gap:17px; }
  .wb-how li { flex-direction:row; gap:11px; }
  .wb-how p { font-size:.73rem; }
  .wb-reading-layout { padding:26px 0 29px; }
  .wb-tool-article .wb-summary { font-size:.85rem; padding-left:15px; margin-bottom:25px; }
  .wb-tool-article h2 { font-size:1.15rem; margin-bottom:12px; }
  .wb-tool-article p { font-size:.8rem; line-height:1.85; }
  .wb-tool-article section+section { margin-top:25px; }
  .wb-faq summary { font-size:.77rem; }
  .wb-faq p { font-size:.75rem; }
  .wb-sources h2 { font-size:.96rem; }
  .wb-related { padding:24px 0 32px; }
  .wb-related .wb-section-heading h2 { font-size:1.15rem; }
  .wb-utility-workbench { padding:21px 18px; }
}
@media(max-width:380px) {
  .wrap { padding:0 16px; }
  .nav { gap:12px; font-size:.68rem; }
  .hero-copy h1 { font-size:2.55rem; }
  .hero-workspace { padding:17px; }
  .quick-settings { grid-template-columns:1fr; gap:8px; }
  .quick-settings label:has(input[type=checkbox]) { margin-top:0; }
  .quick-strip { flex-wrap:wrap; justify-content:flex-start; gap:8px 20px; }
  .wb-filters { gap:14px; }
  .wb-filter { font-size:.66rem; }
  .wb-field-grid { grid-template-columns:1fr; }
  .wb-tool-card-link { padding:17px 15px; }
}
@media(prefers-reduced-motion:reduce) { .wb-site * { transition:none!important; scroll-behavior:auto!important; } }
@media print {
  .wb-workbench,.wb-how,.wb-help-card,.wb-related,.wb-directory-controls,.hero-workspace { display:none; }
  .wb-reading-layout { display:block; border:0; }
  .wb-tool-article p { color:#222; }
  .wb-site { background:white; }
}

/* Language navigation is a native disclosure: usable before scripts load. */
.header-inner { gap: 24px; }
.language-menu { position: relative; flex: 0 0 auto; font-size: 13px; }
.language-menu > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 5px; list-style: none; }
.language-menu > summary::-webkit-details-marker { display: none; }
.language-menu[open] > summary { border-color: var(--accent); }
.language-menu > nav { position: absolute; right: 0; top: calc(100% + 8px); width: 260px; max-width: calc(100vw - 32px); z-index: 30; background: #fff; border: 1px solid var(--line); box-shadow: 0 8px 24px #182d4b1a; border-radius: 6px; padding: 10px; }
.language-menu nav p { font-size: 12px; line-height: 1.5; color: var(--muted); margin: 4px 8px 10px; }
.language-menu nav a { display: block; padding: 10px; border-radius: 3px; min-height: 44px; }
.language-menu nav a:hover, .language-menu nav a[aria-current] { background: #edf4ff; color: #1254b8; }
.localized-calculator { max-width: 780px; margin: 0 auto 36px; }
.source-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 60px; }
.source-guides article { padding: 24px 0; border-top: 1px solid var(--line); }
.source-guides h2 { margin: 16px 0 10px; font-size: 24px; }
.source-guides p { color: var(--muted); }
:lang(ja) h1, :lang(zh-CN) h1, :lang(zh-TW) h1, :lang(ko) h1, :lang(th) h1 { line-height: 1.25; }
:lang(th) { line-height: 1.7; }
.wb-tool-card h3, .hero-workspace h2, .utility-title, .image-result h3, .wb-task-page h1 { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .header-inner { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; padding-top: 10px; padding-bottom: 8px; }
  .header-inner .brand { grid-column: 1; grid-row: 1; }
  .header-inner .language-menu { grid-column: 2; grid-row: 1; }
  .header-inner .nav { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; gap: 4px 24px; }
  .header-inner .nav a { min-height: 40px; display: inline-flex; align-items: center; font-size: 13px; }
  .site-header { height: auto; }
}
@media (max-width: 640px) {
  .header-inner { padding-top: 8px; }
  .header-inner .nav { gap: 2px 18px; }
  .header-inner .nav a { font-size: 12px; }
  .language-menu { font-size: 12px; }
  .language-menu > summary { min-height: 40px; padding: 0 8px; }
  .source-guides { grid-template-columns: 1fr; gap: 0; }
  .wb-filters { flex-wrap: wrap; }
  .quick-strip { flex-wrap: wrap; }
  .wb-workbench .button, .utility-panel .button { white-space: normal; }
  .wb-result-actions { flex-wrap: wrap; }
  :lang(zh-CN) .tool-hero h1, :lang(zh-TW) .tool-hero h1,
  :lang(ja) .tool-hero h1, :lang(ko) .tool-hero h1 { font-size: clamp(30px, 8.4vw, 36px); letter-spacing: -.025em; }
  :lang(ko) h1, :lang(ko) h2 { word-break: keep-all; }
}