/* LighterPics design tokens (2026-11 design pass).
   Character: calm, exact, plain-spoken. World: a paper form with a photo box, in green ink.
   One neutral ramp tinted toward sage paper, one accent (the brand green), system fonts only. */
:root {
  --bg: #f8f9f6; --card: #ffffff; --raised: #eef1eb; --well: #eceee9; --tint: #e5ede2;
  --line: #dce1d9; --line-2: #c5ccc2; --line-3: #a9b2a6; --field: #7a857d;
  --ink: #1a201c; --ink-2: #46504a; --muted: #5f6963;
  --accent: #315940; --accent-strong: #274832; --accent-ink: #2b5038;
  --error: #a12d26; --error-bg: #fcefeb; --error-line: #ecc6bc;
  --notice-ink: #6b4318; --notice-bg: #f7efdf;
  --check-a: #e1e5de; --check-b: #f8f9f6;
  --r-sm: 6px; --r-control: 8px; --r-card: 12px; --r-panel: 16px;
  --ease: cubic-bezier(.22, 1, .36, 1); --fast: .16s;
  --sans: "Avenir Next", Avenir, "Segoe UI Variable Text", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-family: var(--sans);
  color: var(--ink); background: var(--bg); font-synthesis: none;
  line-height: 1.5; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* CJK: keep the Latin face, then the platform's best Japanese or Korean face. */
:lang(ja) { font-family: "Avenir Next", Avenir, "Segoe UI", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif; line-break: strict; }
:lang(ko) { font-family: "Avenir Next", Avenir, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Noto Sans CJK KR", sans-serif; }
:lang(ko) :is(p, li, dd, dt, h2, h3, summary, th, td, figcaption, label, .tool-nav a) { word-break: keep-all; overflow-wrap: anywhere; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }
:is(main, footer) a:not(.primary, .tool-choice) { text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); transition: text-decoration-color var(--fast) var(--ease); }
:is(main, footer) a:not(.primary, .tool-choice):hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
button, input, select { font: inherit; }
button, .primary { cursor: pointer; touch-action: manipulation; }
button, .primary, summary { -webkit-tap-highlight-color: transparent; }
button { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-control); color: var(--ink); padding: 10px 16px; min-height: 44px; line-height: 1.35; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
button:hover { background: var(--raised); border-color: var(--line-3); }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; background: var(--accent); color: #ffffff; border: 1px solid var(--accent); border-radius: var(--r-control); font-weight: 500; text-decoration: none; text-align: center; line-height: 1.35; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease), transform .12s var(--ease); }
.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.primary:active:not(:disabled) { transform: scale(.98); }
header, main, footer { width: min(100% - 48px, 880px); margin-inline: auto; }
header { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; line-height: 1; }
.brand svg { width: 24px; height: 24px; flex: 0 0 24px; fill: none; stroke: var(--accent); stroke-width: 2.25; stroke-linejoin: round; }
.language { position: relative; font-size: .875rem; color: var(--ink-2); }
.language summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 44px; list-style: none; border-radius: var(--r-control); }
.language summary::-webkit-details-marker { display: none; }
.language summary > span { font-size: 1rem; line-height: 1; color: var(--muted); margin-top: -.35em; }
.language summary:hover { color: var(--ink); }
.language nav { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; width: 160px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 8px 24px rgba(26, 32, 28, .08); }
.language a { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; border-radius: var(--r-control); text-decoration: none; color: var(--ink); }
.language a:hover { background: var(--raised); }
.language a[aria-current] { background: var(--tint); color: var(--accent-ink); font-weight: 500; }
.intro { text-align: center; padding-top: 48px; }
h1 { margin: 0; font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: anywhere; }
:lang(ko) h1, :lang(ja) h1 { letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere; line-height: 1.3; }
.subtitle { color: var(--ink-2); font-size: 1.0625rem; margin: 12px auto 32px; max-width: 36rem; line-height: 1.55; text-wrap: balance; }
/* The drop zone is the photo box of a paper form: four corner marks taken from the logo. */
.drop-zone { position: relative; border: 1px solid var(--line); background: var(--card); border-radius: var(--r-card); padding: 40px 24px 32px; text-align: center; transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.drop-zone::before { content: ""; position: absolute; inset: 12px; pointer-events: none; --arm: 20px; --w: 2px;
  background:
    linear-gradient(var(--accent) 0 0) left top / var(--arm) var(--w), linear-gradient(var(--accent) 0 0) left top / var(--w) var(--arm),
    linear-gradient(var(--accent) 0 0) right top / var(--arm) var(--w), linear-gradient(var(--accent) 0 0) right top / var(--w) var(--arm),
    linear-gradient(var(--accent) 0 0) left bottom / var(--arm) var(--w), linear-gradient(var(--accent) 0 0) left bottom / var(--w) var(--arm),
    linear-gradient(var(--accent) 0 0) right bottom / var(--arm) var(--w), linear-gradient(var(--accent) 0 0) right bottom / var(--w) var(--arm);
  background-repeat: no-repeat; }
.drop-zone.dragging { background: var(--tint); border-color: var(--accent); }
.drop-zone > svg { width: 40px; height: 40px; stroke: var(--muted); stroke-width: 1.5; fill: none; }
.drop-zone h2 { margin: 12px 0 20px; font-size: 1.125rem; font-weight: 500; line-height: 1.45; }
.formats { font-size: .8125rem; color: var(--muted); margin: 16px 0 0; line-height: 1.55; }
.privacy { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--muted); font-size: .8125rem; margin: 20px 0 0; line-height: 1.5; }
.privacy svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.file-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: 0 0 16px; margin-bottom: 24px; }
#filename { font-weight: 500; margin: 0; overflow-wrap: anywhere; flex: 1 1 180px; min-width: 0; }
.file-actions { display: flex; gap: 4px 16px; flex-wrap: wrap; }
.file-actions button { border: 0; background: transparent; text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; font-size: .875rem; color: var(--ink-2); padding: 4px 0; }
.file-actions button:hover { background: transparent; color: var(--ink); text-decoration-color: var(--accent); }
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
figure { margin: 0; min-width: 0; }
.preview { background: var(--well); display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-card); height: 240px; overflow: hidden; }
.preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Preview only: never paint this pattern into the exported image. */
.resizer .preview img { background: repeating-conic-gradient(var(--check-a) 0% 25%, var(--check-b) 0% 50%) 50% / 16px 16px; }
figcaption { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; font-size: .875rem; color: var(--ink-2); }
figcaption strong { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
figcaption small { grid-column: 1 / -1; color: var(--muted); font-size: .8125rem; font-variant-numeric: tabular-nums; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.target-label { font-weight: 500; display: block; font-size: .9375rem; margin-bottom: 8px; }
.target-input { display: flex; align-items: center; border: 1px solid var(--field); border-radius: var(--r-control); overflow: hidden; background: var(--card); }
.target-input:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.target-input input { width: 100%; min-width: 0; font-size: 1.75rem; font-weight: 500; font-variant-numeric: tabular-nums; padding: 8px 16px; border: 0; outline: none; color: var(--ink); background: transparent; }
.target-input span { padding-right: 16px; color: var(--muted); }
.hint { font-size: .875rem; color: var(--muted); line-height: 1.55; margin: 8px 0 0; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 24px; }
.presets button { padding: 8px 14px; font-size: .875rem; min-height: 40px; font-variant-numeric: tabular-nums; }
.presets button[aria-pressed=true] { border-color: var(--accent); background: var(--tint); color: var(--accent-ink); font-weight: 500; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; line-height: 1.55; cursor: pointer; padding-block: 8px; color: var(--ink-2); }
.check input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.output-note { font-size: .8125rem; line-height: 1.55; color: var(--muted); margin: 8px 0 16px; }
#compress { width: 100%; }
#error { color: var(--error); background: var(--error-bg); border: 1px solid var(--error-line); padding: 12px 16px; border-radius: var(--r-control); line-height: 1.55; margin: 20px 0; }
.status-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .875rem; color: var(--ink-2); }
#status { line-height: 1.55; }
#status:empty { margin: 0; }
#result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin-top: 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.result-details { min-width: 0; }
.savings { display: inline-block; background: var(--tint); color: var(--accent-ink); padding: 4px 10px; border-radius: var(--r-sm); font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums; margin: 0 0 12px; }
.savings:empty { display: none; }
.result-details h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 0 0 8px; }
#result-message { margin: 0 0 16px; color: var(--ink-2); line-height: 1.6; font-size: .9375rem; }
.notice { color: var(--notice-ink); background: var(--notice-bg); padding: 12px 16px; border-radius: var(--r-control); font-size: .875rem; line-height: 1.55; }
#download { width: 100%; margin-top: 4px; }
#photo-share { width: 100%; margin-bottom: 8px; overflow-wrap: anywhere; }
#download.share-download { background: var(--card); color: var(--ink); border-color: var(--line-2); }
#download.share-download:hover { background: var(--raised); border-color: var(--line-3); }
#photo-share-status:empty { margin: 0; }
.help { border-top: 1px solid var(--line); margin: 56px auto 0; padding: 32px 0 40px; }
.batch-panel + .help { border-top: 0; margin-top: 0; }
.help h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 0 0 12px; }
.help > p { color: var(--ink-2); line-height: 1.65; max-width: 68ch; margin: 0 0 24px; }
.help details { border-top: 1px solid var(--line); padding: 0; }
.help summary { cursor: pointer; min-height: 48px; padding: 12px 0; font-weight: 500; }
.help details p { line-height: 1.65; color: var(--ink-2); margin: 0 0 20px; max-width: 68ch; }
footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0 24px; border-top: 1px solid var(--line); font-size: .8125rem; padding: 12px 0 24px; color: var(--muted); line-height: 1.55; }
footer > p { margin: 0; }
footer nav a { color: var(--ink-2); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -100px; background: var(--ink); color: var(--bg); padding: 12px 16px; border-radius: var(--r-control); z-index: 5; }
.skip:focus { top: 8px; }
@media (max-width: 600px) {
  header, main, footer { width: calc(100% - 32px); }
  header { min-height: 56px; }
  .intro { padding-top: 32px; }
  .subtitle { font-size: 1rem; margin: 8px auto 24px; }
  .drop-zone { padding: 32px 16px 28px; }
  .workspace, #result { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .original .preview { height: 180px; }
  .file-heading { gap: 0; }
  .file-actions { width: 100%; margin-top: 4px; }
  .help { margin-top: 40px; }
  .help h2 { font-size: 1.25rem; }
  .result-details { padding-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

.guide { border-top: 1px solid var(--line); padding: 40px 0 48px; line-height: 1.65; }
.guide h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 40px 0 12px; }
.guide h2:first-child { margin-top: 0; }
.guide h3 { font-size: 1.0625rem; font-weight: 600; line-height: 1.4; margin: 28px 0 8px; }
.guide p, .guide li { max-width: 68ch; color: var(--ink-2); }
.guide li { margin-block: 8px; padding-left: 4px; }
.guide ol, .guide ul { padding-left: 24px; }
.guide li::marker { color: var(--muted); font-variant-numeric: tabular-nums; }
.example-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(192px,100%),1fr)); gap: 16px; }
.example { border: 1px solid var(--line); background: var(--card); padding: 20px; border-radius: var(--r-card); min-width: 0; font-variant-numeric: tabular-nums; }
.example h3 { margin-top: 0; }
.document { padding: 32px 0 64px; line-height: 1.65; overflow-wrap: anywhere; }
.document h1 { margin: 24px 0; font-size: clamp(1.875rem, 1.25rem + 2.2vw, 2.5rem); }
.document h2 { font-size: 1.375rem; font-weight: 600; margin: 40px 0 12px; line-height: 1.3; }
.document p, .document li { max-width: 68ch; color: var(--ink-2); }
.document li { margin-block: 8px; }
.document > p:first-child { margin: 0; font-size: .875rem; }
.support-email { font-weight: 600; overflow-wrap: anywhere; color: var(--ink); }
footer nav { display: flex; flex-wrap: wrap; gap: 4px 24px; }
footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 360px) { .brand { font-size: 1.125rem; gap: 8px; } header { gap: 8px; } }

.tool-nav { width: min(100% - 48px, 880px); margin: 0 auto; display: flex; gap: 0 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tool-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 0; margin-bottom: -1px; text-decoration: none; font-size: .875rem; color: var(--ink-2); border-bottom: 2px solid transparent; transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.tool-nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.tool-nav a:hover { color: var(--ink); border-bottom-color: var(--line-3); }
.tool-nav a[aria-current]:hover { border-bottom-color: var(--accent); }
.resize-modes { display: flex; flex-wrap: wrap; gap: 4px 24px; border-bottom: 1px solid var(--line); margin-bottom: 20px; padding-bottom: 8px; }
.resize-modes label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.resize-modes input { accent-color: var(--accent); width: 18px; height: 18px; }
.dimension-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.dimension-fields > label { font-size: .9375rem; font-weight: 500; }
.dimension-input { display: flex; align-items: center; gap: 8px; border: 1px solid var(--field); border-radius: var(--r-control); background: var(--card); margin-top: 8px; }
.dimension-input:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.dimension-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ink); font-size: 1.375rem; font-variant-numeric: tabular-nums; padding: 12px; outline: none; }
.dimension-input > span { padding-right: 12px; font-weight: 400; color: var(--muted); }
.size-plan { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin: 16px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .875rem; color: var(--ink-2); }
.size-plan strong { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
#apply-resize { width: 100%; }
.resize-guide { margin-top: 48px; }
.related-tool { padding: 32px 0 40px; border-top: 1px solid var(--line); }
.related-tool h2 { font-size: 1.25rem; font-weight: 600; line-height: 1.3; margin-top: 0; }
.related-tool p { color: var(--ink-2); line-height: 1.65; max-width: 68ch; }
.related-tool a { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-weight: 500; text-underline-offset: 4px; }
@media (max-width:600px) { .tool-nav { width: calc(100% - 32px); gap: 0 16px; } .tool-nav a { font-size: .8125rem; } }

.home-page { min-height: 100svh; display: flex; flex-direction: column; }
.home-page header { min-height: 64px; border-bottom: 0; flex-wrap: wrap; }
.home-page .language { margin-left: auto; max-width: 100%; }
.home-page .language nav { width: min(14rem, calc(100vw - 32px)); overflow-wrap: anywhere; }
.home-page .language summary { overflow-wrap: anywhere; }
.home-page .language summary { gap: 8px; }
.home-page .home { width: min(100% - 48px, 800px); flex: 1; padding-bottom: 48px; }
.home-page .home-intro { text-align: center; padding: 48px 0 40px; }
.home-page .home-intro h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.75rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.15; }
:lang(ko).home-page .home-intro h1, :lang(ja).home-page .home-intro h1 { letter-spacing: -.01em; line-height: 1.3; }
.home-page .home-intro .subtitle { font-size: 1.0625rem; margin: 12px auto 0; max-width: 34rem; line-height: 1.55; }
.home-page .tool-picker { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.home-page .tool-choice { display: flex; flex-direction: column; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--card); text-decoration: none; transition: border-color var(--fast) var(--ease), background-color var(--fast) var(--ease); }
.home-page .tool-choice:hover { border-color: var(--line-3); }
.home-page .tool-choice:focus-visible { outline-offset: 3px; }
.home-page .tool-icon { display: block; color: var(--accent); margin-bottom: 20px; }
.home-page .tool-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-page .tool-choice h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.3; }
.home-page .tool-choice > p { margin: 8px 0 24px; color: var(--ink-2); font-size: .9375rem; line-height: 1.55; }
.home-page .tool-bottom { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: auto; }
.home-page .tool-bottom small { color: var(--muted); font-size: .8125rem; line-height: 1.5; }
.home-page .tool-arrow { flex: 0 0 auto; color: var(--accent); font-size: 1.25rem; line-height: 1; transition: transform var(--fast) var(--ease); }
.home-page .tool-choice:hover .tool-arrow { transform: translateX(2px); }
.home-page .home-assurance { text-align: center; padding: 28px 0 24px; }
.home-page .home-assurance > p:first-child { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0; color: var(--accent-ink); font-size: .875rem; font-weight: 500; line-height: 1.5; }
.home-page .home-assurance svg { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.home-page .home-assurance .hint { font-size: .875rem; margin-top: 8px; font-variant-numeric: tabular-nums; text-wrap: balance; }
.home-page .guide-discovery { padding-bottom: 32px; }
.home-page .home-guide { border-top: 1px solid var(--line); }
.home-page .home-guide > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; cursor: pointer; list-style: none; color: var(--ink-2); font-size: .9375rem; line-height: 1.5; }
.home-page .home-guide > summary:hover { color: var(--ink); }
.home-page .home-guide > summary::-webkit-details-marker { display: none; }
.home-page .home-guide > summary > span { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; flex: 0 0 1em; margin-inline: .22em; line-height: 1; font-size: 1.25rem; font-weight: 400; color: var(--muted); transition: transform var(--fast) var(--ease); }
.home-page .home-guide[open] > summary > span { transform: rotate(45deg); }
.home-page .home-guide-content { font-size: .9375rem; line-height: 1.65; padding-bottom: 12px; }
.home-page .home-guide dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin: 12px 0 20px; }
.home-page .home-guide dt { font-weight: 600; }
.home-page .home-guide dd { margin: 8px 0 0; color: var(--ink-2); }
.home-page .home-guide-content > p { color: var(--ink-2); }
.home-page footer { display: flex; align-items: center; justify-content: space-between; gap: 0 24px; flex-wrap: wrap; padding: 12px 0; }
.home-page footer > p { margin: 0; }
.home-page .home :is(h1,h3,p,dt,dd,small,summary) { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .home-page header { min-height: 56px; }
  .home-page .home { width: calc(100% - 32px); padding-bottom: 24px; }
  .home-page .home-intro { padding: 16px 0 20px; }
  .home-page .home-intro h1 { font-size: 1.75rem; line-height: 1.2; }
  .home-page .home-intro .subtitle { font-size: .9375rem; max-width: 340px; margin-top: 8px; }
  .home-page .tool-picker { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .home-page .tool-choice { display: grid; grid-template-columns: 24px minmax(0,1fr); column-gap: 12px; padding: 12px 16px; border-radius: var(--r-card); }
  .home-page .tool-icon { grid-row: 1 / 3; margin: 0; padding-top: 2px; }
  .home-page .tool-icon svg { width: 24px; height: 24px; }
  .home-page .tool-choice h3 { font-size: 1.0625rem; }
  .home-page .tool-choice > p { grid-column: 2; font-size: .875rem; line-height: 1.5; margin: 4px 0 8px; }
  .home-page .tool-bottom { grid-column: 2; }
  .home-page .tool-bottom small { font-size: .75rem; }
  .home-page .home-assurance { padding: 20px 0; }
  .home-page .home-guide dl { grid-template-columns: minmax(0,1fr); }
  .home-page footer { font-size: .75rem; }
  .home-page footer nav { gap: 4px 16px; }
}
@media (max-width: 360px) { .home-page .brand { font-size: 1.125rem; gap: 8px; } .home-page .language { font-size: .8125rem; } }
@media (prefers-reduced-motion: reduce) { .home-page .tool-choice { transition: none; } .home-page .tool-choice:hover .tool-arrow { transform: none; } }

/* Crop shares the calm tool layout, with one larger direct-manipulation canvas. */
.crop-workspace { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(250px,1fr); gap: 32px; align-items: start; }
.crop-mat { display: flex; justify-content: center; align-items: center; min-height: 180px; padding: 16px; background: var(--well); border: 1px solid var(--line); border-radius: var(--r-card); }
.crop-stage { position: relative; max-width: 100%; line-height: 0; }
#crop-preview { display: block; max-width: 100%; height: auto; background: repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 50% / 16px 16px; }
#crop-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; touch-action: none; user-select: none; cursor: crosshair; }
#crop-shade { fill: #101d16; fill-opacity: .58; pointer-events: none; }
#selection { fill: transparent; stroke: #ffffff; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
#crop-grid { fill: none; stroke: #ffffff; stroke-width: 1; stroke-opacity: .7; vector-effect: non-scaling-stroke; pointer-events: none; }
#crop-overlay [data-corner] { fill: #ffffff; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
#crop-overlay [data-corner=nw], #crop-overlay [data-corner=se] { cursor: nwse-resize; }
#crop-overlay [data-corner=ne], #crop-overlay [data-corner=sw] { cursor: nesw-resize; }
#crop-overlay :focus-visible { outline: 3px solid #e2edb8; outline-offset: 3px; }
#editor[aria-busy=true] #crop-overlay { cursor: wait; }
.crop-ratios legend { font-weight: 500; font-size: .9375rem; }
.crop-ratios .presets { margin: 8px 0 20px; }
.crop-ratios button { min-height: 44px; }
#reset-selection { margin-top: 16px; font-size: .875rem; }
#apply-crop { width: 100%; }
.cropper :is(p,legend,label,button,a,strong,figcaption,h2) { overflow-wrap: anywhere; }
header { flex-wrap: wrap; }
.language { max-width: 100%; margin-left: auto; }
.language nav { width: min(14rem,calc(100vw - 32px)); overflow-wrap: anywhere; }
.language summary { overflow-wrap: anywhere; }
@media (max-width:700px) { .crop-workspace { grid-template-columns: minmax(0,1fr); gap: 24px; } }

.cropper .dimension-input > span { flex-shrink: 0; white-space: nowrap; }

/* Format conversion uses native radios and the shared tool layout. */
.format-options { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 20px; }
.format-options label { display:flex; align-items:center; gap:8px; min-height:48px; padding:8px 16px; background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-control); cursor:pointer; transition:background-color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.format-options label:hover { border-color:var(--line-3); }
.format-options label:has(:checked) { border-color:var(--accent); background:var(--tint); color:var(--accent-ink); font-weight:500; }
.format-options input { accent-color:var(--accent); width:18px; height:18px; margin:0; }
#apply-convert { width:100%; }
.converter :is(p,legend,label,button,a,strong,figcaption,h2) { overflow-wrap:anywhere; }
.converter .preview { background:repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 50% / 16px 16px; }

/* Local rotation and watermark editors, scoped to the new tools. */
.image-editor .edit-stage { min-height: 180px; display:flex; align-items:center; justify-content:center; background:repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 0 0/20px 20px; border:1px solid var(--line); border-radius:var(--r-control); padding:0; }
#edit-canvas { display:block; max-width:100%; }
[data-edit="watermark"] #edit-canvas { touch-action:none; cursor:move; }
.image-editor .edit-preview { min-width:0; }
.image-editor .rotate-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.image-editor .rotate-buttons button { padding:12px 8px; overflow-wrap:anywhere; }
.image-editor .rotate-buttons button[data-operation="half"] { grid-column:1/-1; }
.image-editor .edit-field { display:flex; flex-direction:column; gap:8px; margin-top:16px; font-size:.875rem; font-weight:500; min-width:0; }
.image-editor input[type="text"], .image-editor input[type="number"] { min-width:0; width:100%; border:1px solid var(--field); border-radius:var(--r-control); padding:10px 12px; min-height:44px; background:var(--card); color:var(--ink); font-weight:400; }
.image-editor .edit-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.image-editor .color-field { flex-direction:row; align-items:center; justify-content:space-between; }
.image-editor input[type="color"] { width:60px; min-height:44px; padding:4px; border:1px solid var(--field); border-radius:var(--r-control); background:var(--card); }
.image-editor .position-fields { margin-top:20px; }
.image-editor .position-presets, .image-editor .logo-actions { display:flex; gap:8px; flex-wrap:wrap; }
.image-editor .position-presets button { flex:1 1 90px; font-size:.8125rem; padding:8px; }
.image-editor .reset-edit { margin:20px 0 4px; }
.image-editor #apply-edit { width:100%; }
.image-editor #logo-name { overflow-wrap:anywhere; }
@media(min-width:601px) { .image-editor .edit-preview { position:sticky; top:20px; } }
@media(max-width:380px) { .image-editor .edit-fields { grid-template-columns:minmax(0,1fr); gap:0; } }

.policy-updated { font-size:.875rem; color:var(--muted); }

.guide, .related-tool { overflow-wrap:anywhere; }

.worked-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:28px 0; }
.worked-grid figure { min-width:0; margin:0; }
.worked-image { display:flex; align-items:center; justify-content:center; aspect-ratio:3/2; background:repeating-conic-gradient(var(--check-a) 0% 25%,var(--check-b) 0% 50%) 50%/20px 20px; border:1px solid var(--line); border-radius:var(--r-control); overflow:hidden; }
.worked-image img { display:block; width:100%; height:100%; object-fit:contain; min-height:0; }
.worked-grid figcaption { display:flex; flex-direction:column; gap:8px; padding-top:12px; font-size:.875rem; }
.worked-grid figcaption strong { color:var(--ink); }
.worked-grid figcaption a { padding-block:8px; }
.example-settings { border-block:1px solid var(--line); padding-block:20px; }
@media(max-width:600px) { .worked-grid { grid-template-columns:minmax(0,1fr); gap:28px; } }

.batch-panel { border-block:1px solid var(--line); margin-top:32px; }
.batch-panel > summary { cursor:pointer; padding:16px 0; font-weight:500; }
.batch-body { padding-bottom:24px; max-width:720px; }
.batch-body > p { color:var(--ink-2); line-height:1.65; }
.batch-body label:not(.check) { display:block; margin-top:20px; font-weight:500; }
.batch-body select,.batch-body input[type=text] { width:100%; max-width:360px; padding:12px; background:var(--card); color:var(--ink); border:1px solid var(--field); border-radius:var(--r-control); font:inherit; margin-top:8px; }
.batch-results { list-style:none; padding:0; }
.batch-results li { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 16px; border-top:1px solid var(--line); padding:16px 0; overflow-wrap:anywhere; }
.batch-results li span { grid-column:1/-1; font-size:.875rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.batch-results li a { grid-column:2; grid-row:1; padding:4px; }
.batch-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
@media(max-width:420px) { .batch-results li { grid-template-columns:minmax(0,1fr); } .batch-results li a { grid-column:1; grid-row:auto; justify-self:start; } }

#single-mode {width:100%;padding:12px;color:var(--ink);background:var(--card);border:1px solid var(--field);border-radius:var(--r-control);font:inherit;}
#quality-fields {margin:20px 0;line-height:1.6;}
#quality {display:block;width:100%;min-height:44px;accent-color:var(--accent);}

.compact-guide {border-top:1px solid var(--line);margin:32px 0;}
.compact-guide > summary,.offline-panel > summary {cursor:pointer;padding:12px 0;min-height:48px;line-height:1.6;}
.offline-panel {flex-basis:100%;width:100%;font-size:.875rem;line-height:1.65;}
.offline-panel p {max-width:68ch;color:var(--ink-2);}
.guide-link {display:inline-flex;align-items:center;min-height:44px;}
.guide-links a {display:inline-block;padding-block:8px;}

/* Disclosures share one quiet chevron instead of the platform triangle. */
:is(.batch-panel, .help details, .compact-guide, .offline-panel) > summary { list-style: none; position: relative; padding-left: 24px; }
:is(.batch-panel, .help details, .compact-guide, .offline-panel) > summary::-webkit-details-marker { display: none; }
:is(.batch-panel, .help details, .compact-guide, .offline-panel) > summary::before { content: ""; position: absolute; left: 2px; top: calc(50% - 5px); width: 7px; height: 7px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform var(--fast) var(--ease); }
:is(.batch-panel, .help details, .compact-guide, .offline-panel)[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
:is(.batch-panel, .help details, .compact-guide, .offline-panel) > summary:hover::before { border-color: var(--ink); }

/* Measured and spec tables: a lab sheet with quiet rules and tabular figures. */
.spec-table { width: 100%; border-collapse: collapse; margin: 16px 0 24px; font-size: .875rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { border: 0; border-bottom: 1px solid var(--line); padding: 10px 16px 10px 0; text-align: left; vertical-align: top; }
.spec-table :is(th, td):last-child { padding-right: 0; }
.spec-table thead th { font-size: .8125rem; font-weight: 500; color: var(--muted); border-bottom-color: var(--line-3); padding-top: 0; background: none; }
.spec-table tbody th { font-weight: 500; color: var(--ink); }
.spec-table td { color: var(--ink-2); }
.spec-table :is(th, td) { hyphens: auto; }
section:has(> .spec-table) { container-type: inline-size; }
/* Whole words stay whole in cells whenever the section is wide enough for the widest
   table at the current text size (em scales with 200% text); narrower than that, cells
   fall back to breaking inside a word so a table never scrolls or overflows the page.
   shortcut: 22em comes from the widest table measured on 2026-11-10 (EN rotate, 325 px
   at 14 px text); re-measure if a wider table is added. */
@container (min-width: 22em) { .spec-table :is(th, td) { overflow-wrap: break-word; hyphens: manual; } }
/* WebKit ignores overflow-wrap: anywhere when sizing hyphenated table cells, so very
   large text on a phone (12em of the section's own font size) breaks words without
   hyphenation to keep the table inside the page. Normal text sizes are unaffected. */
@container (max-width: 12em) { .spec-table :is(th, td) { hyphens: manual; } }
/* One exception to the table rules above: the EN variant pages' measured tables are wider (up to
   463 px with whole words at 14 px text, re-measured 2026-11-10), so each sits in a .table-scroll
   box that scrolls sideways, as WCAG 1.4.10 allows for data tables. Their cells keep whole words at
   every width and text size. Core, guide and trust tables keep the rules above. */
.table-scroll { overflow-x: auto; margin: 16px 0 24px; }
.table-scroll > .spec-table { margin: 0; }
.table-scroll .spec-table :is(th, td) { overflow-wrap: normal; hyphens: manual; }
@media (max-width: 600px) { .spec-table th, .spec-table td { padding: 8px 12px 8px 0; } }
.phase2-hub h2 { font-size: 1.375rem; font-weight: 600; margin: 40px 0 12px; line-height: 1.3; }
.phase2-hub p { max-width: 68ch; color: var(--ink-2); line-height: 1.65; }