.topbar { border-bottom: var(--border) solid var(--line); }
.nav { min-height: var(--nav-height); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-4); }
.navlinks { display: flex; flex-wrap: wrap; gap: var(--space-5); font-size: var(--type-sm); }
.navlinks a { color: var(--muted); text-decoration: none; }
.navlinks a:hover { color: var(--brand); }
.hero { padding-block: var(--space-10) var(--space-6); }
.hero-copy { display: flex; justify-content: space-between; align-items: end; gap: var(--space-6); margin-bottom: var(--space-6); }
.hero h1 { margin: var(--space-3) 0; }
.hero-lede { max-width: var(--copy-width); color: var(--muted); margin: 0; }
.privacy-line { flex-shrink: 0; color: var(--muted); font-size: var(--type-xs); margin: 0 0 var(--space-1); }
.tool { background: var(--surface); border: var(--border) solid var(--line); border-radius: var(--radius); overflow: hidden; }
.tool-toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--panel-pad); border-bottom: var(--border) solid var(--line); font-family: var(--font-mono); font-size: var(--type-xs); }
.tool-toolbar h2 { font: inherit; letter-spacing: var(--tracking-label); margin: 0; }
#imageState { font-family: var(--font-body); color: var(--muted); }
.step { color: var(--brand); }
.dropzone { position: relative; display: grid; place-items: center; min-height: var(--drop-height); padding: var(--space-8) var(--panel-pad); background-image: radial-gradient(var(--line) var(--grid-dot), transparent var(--grid-dot)); background-size: var(--grid-pitch) var(--grid-pitch); }
.dropzone.dragover { background-color: var(--action-bg); }
.drop-inner { text-align: center; }
.measure-labels { display: flex; justify-content: center; gap: var(--space-8); color: var(--muted); font-family: var(--font-mono); font-size: var(--type-xs); margin-bottom: var(--space-5); }
.drop-title { font-size: var(--type-subtitle); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.drop-copy { color: var(--muted); font-size: var(--type-sm); margin-bottom: var(--space-5); }
.drop-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-3); }
.paste-hint { margin-top: var(--space-3); color: var(--muted); font-size: var(--type-xs); }
.dropzone:focus-within .file-button { outline: var(--focus-width) solid var(--focus-color); outline-offset: var(--focus-offset); }
.tool.has-image .dropzone { min-height: 0; padding: var(--space-3) var(--panel-pad); border-bottom: var(--border) solid var(--line); background-image: none; }
.tool.has-image .drop-inner { width: 100%; }
.tool.has-image .measure-labels, .tool.has-image .drop-title, .tool.has-image .drop-copy, .tool.has-image .paste-hint { display: none; }
.tool.has-image .drop-actions { justify-content: start; }
.status { padding: var(--space-3) var(--panel-pad); border-top: var(--border) solid var(--line); font-size: var(--type-xs); color: var(--muted); min-height: var(--button-height); overflow-wrap: anywhere; }
.status.error { color: var(--error); }
.results { display: none; }
.results.show { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.preview-panel { padding: var(--panel-pad); background: var(--bg); border-right: var(--border) solid var(--line); min-width: 0; }
.preview-name { font: var(--type-xs)/var(--leading-body) var(--font-mono); color: var(--muted); margin: 0 0 var(--space-6); overflow-wrap: anywhere; }
.ruler { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); color: var(--muted); font-family: var(--font-mono); font-size: var(--type-xs); }
.ruler::before, .ruler::after { content: ""; flex: 1; height: var(--ruler-height); border-block-start: var(--border) solid var(--muted); border-inline: var(--border) solid var(--muted); }
.preview { min-height: var(--preview-min-height); display: grid; place-items: center; background: var(--surface-2); border: var(--border) solid var(--line); overflow: hidden; }
.preview img { max-width: 100%; max-height: var(--preview-height); display: block; object-fit: contain; }
.preview-caption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font: var(--type-xs)/var(--leading-body) var(--font-mono); color: var(--muted); }
.result-panel { min-width: 0; padding: var(--panel-pad); }
.metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-5); }
.metric { min-width: 0; }
.metric span { display: block; color: var(--muted); font-size: var(--type-xs); }
.metric strong { display: block; font-family: var(--font-mono); font-weight: var(--weight-medium); font-size: var(--type-sm); overflow-wrap: anywhere; }
.metric:first-child, .metric:nth-child(2) { grid-column: 1 / -1; border-bottom: var(--border) solid var(--line); padding-bottom: var(--space-4); }
.metric:first-child span { text-transform: uppercase; letter-spacing: var(--tracking-label); }
.metric:first-child strong { font-size: var(--type-metric); letter-spacing: var(--tracking-heading); }
.metric:nth-child(2) strong { font-size: var(--type-subtitle); }
.metric small { display: block; color: var(--muted); font-size: var(--type-xs); overflow-wrap: anywhere; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block: var(--space-5); }
.copy-fallback { display: none; min-height: var(--copy-min-height); font-family: var(--font-mono); }
.copy-fallback.show { display: block; }
.requirements p, .requirements li, .output-requirements p { font-size: var(--type-sm); }
.requirement-fields, .resize-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.requirement-fields label, .resize-fields label { display: grid; gap: var(--space-1); min-width: 0; font-size: var(--type-xs); color: var(--muted); }
.requirement-status { font-weight: var(--weight-strong); color: var(--ink); }
.requirement-status[data-state="pass"] { color: var(--good); }
.requirement-status[data-state="fail"], .requirement-status[data-state="invalid"] { color: var(--error); }
.requirement-list { padding-left: var(--space-5); overflow-wrap: anywhere; }
.secondary-details { margin-top: var(--space-4); }
.result-guidance, .suggested-list { display: grid; gap: var(--space-4); }
.guidance-card span { color: var(--muted); font-size: var(--type-xs); display: block; }
.guidance-card strong { color: var(--brand); }
.guidance-card p, .target-card p { margin: var(--space-1) 0; font-size: var(--type-sm); color: var(--muted); }
.suggested-sizes { margin-top: var(--space-5); }
.panel-header, .resize-header, .crop-editor-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.panel-header h3, .resize-header h3 { margin: 0; }
.panel-header span, .resize-header span { color: var(--muted); font-size: var(--type-xs); }
.target-card { padding-block: var(--space-3); border-top: var(--border) solid var(--line); }
.target-card-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.target-card small { display: block; font: var(--type-xs)/var(--leading-body) var(--font-mono); color: var(--muted); }
.target-card button { margin-top: var(--space-2); }
.adjustments { grid-column: 1 / -1; padding-inline: var(--panel-pad); background: var(--surface); }
.adjustments > summary { font-size: var(--type-lg); }
.editor-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-3) var(--space-6); }
.resize-note, .resize-output, .optimize-helper p, .crop-editor-help { color: var(--muted); font-size: var(--type-sm); margin: var(--space-3) 0; }
.resize-presets { display: grid; gap: var(--space-2); }
.preset-row { display: grid; gap: var(--space-2); }
.preset-row > span, .resize-mode-title { color: var(--muted); font-size: var(--type-xs); }
.preset-buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.preset-button { padding-inline: var(--space-3); font-size: var(--type-xs); }
.resize-mode { margin-block: var(--space-4); }
.resize-mode-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.resize-mode label { display: flex; gap: var(--space-2); padding: var(--space-3); border: var(--border) solid var(--line); border-radius: var(--radius); cursor: pointer; }
.resize-mode label:has(input:checked) { border-color: var(--brand); background: var(--action-bg); }
.resize-mode input { align-self: start; }
.resize-mode strong { display: block; font-size: var(--type-sm); }
.resize-mode small { display: block; color: var(--muted); font-size: var(--type-xs); }
.crop-editor { display: grid; gap: var(--space-3); padding: var(--space-3); margin-block: var(--space-4); border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--bg); }
.crop-editor-header { font-size: var(--type-sm); }
.crop-editor-header output { color: var(--muted); font-family: var(--font-mono); font-size: var(--type-xs); }
.crop-stage { position: relative; justify-self: center; overflow: hidden; max-width: 100%; background: var(--surface-2); touch-action: none; user-select: none; }
.crop-source-canvas { display: block; max-width: 100%; height: auto; }
.crop-box { position: absolute; border: var(--border-strong) solid var(--white); cursor: move; outline: var(--border) solid var(--ink); box-shadow: var(--crop-mask-shadow); }
.crop-box::before, .crop-box::after { content: ""; position: absolute; pointer-events: none; }
.crop-box::before { inset: var(--crop-rule-position) 0; border-block: var(--border) solid var(--white); }
.crop-box::after { inset: 0 var(--crop-rule-position); border-inline: var(--border) solid var(--white); }
.crop-handle { position: absolute; width: var(--crop-handle); height: var(--crop-handle); border: var(--border-strong) solid var(--white); border-radius: var(--radius-round); background: var(--brand); }
.crop-handle[data-crop-handle="nw"] { top: var(--crop-handle-offset); left: var(--crop-handle-offset); cursor: nwse-resize; }
.crop-handle[data-crop-handle="ne"] { top: var(--crop-handle-offset); right: var(--crop-handle-offset); cursor: nesw-resize; }
.crop-handle[data-crop-handle="sw"] { bottom: var(--crop-handle-offset); left: var(--crop-handle-offset); cursor: nesw-resize; }
.crop-handle[data-crop-handle="se"] { bottom: var(--crop-handle-offset); right: var(--crop-handle-offset); cursor: nwse-resize; }
.crop-size-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); font-size: var(--type-xs); }
.crop-size-control input { grid-column: 1 / -1; }
.resize-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-4); align-items: center; margin-top: var(--space-4); }
.resize-canvas { width: 100%; max-height: var(--thumbnail-width); object-fit: contain; background: var(--surface-2); }
.output-requirements { padding: var(--space-4); margin-top: var(--space-4); border: var(--border) solid var(--line); border-radius: var(--radius); }
.output-requirements h4 { margin: 0; }
.quality-control { margin-top: var(--space-5); }
.quality-control label { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); font-size: var(--type-sm); }
.quality-readout { font-family: var(--font-mono); }
.quality-size { display: block; color: var(--muted); font-size: var(--type-xs); }
.quality-ticks { display: grid; grid-template-columns: repeat(5, 1fr); }
.quality-ticks button { padding: 0; background: transparent; border-color: transparent; font-size: var(--type-xs); font-family: var(--font-mono); }
.quality-ticks button.active { color: var(--brand); background: var(--action-bg); }
.support-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.support-links a { display: block; border-top: var(--border) solid var(--line); padding-top: var(--space-3); text-decoration: none; }
.support-links span { font-family: var(--font-mono); font-size: var(--type-xs); }
.support-links strong { display: block; color: var(--ink); margin-top: var(--space-1); font-weight: var(--weight-medium); }
.section { padding-block: var(--space-10); }
.section h2 { margin: 0 0 var(--space-4); }
.section-intro { max-width: var(--copy-width); margin: 0 0 var(--space-6); color: var(--muted); }
.grid, .guide-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card, .guide-item { border-top: var(--border) solid var(--line); padding-top: var(--space-4); }
.card h3, .guide-item h3 { margin: 0 0 var(--space-2); }
.card p, .guide-item p { color: var(--muted); font-size: var(--type-sm); margin: 0; }
.example { border-inline-start: var(--border-strong) solid var(--brand); padding: var(--space-5); background: var(--surface); margin-top: var(--space-6); }
.example p { margin: var(--space-2) 0; }
.example strong { font-family: var(--font-mono); }
.size-table { width: 100%; border-collapse: collapse; background: var(--surface); }
.size-table th, .size-table td { text-align: left; padding: var(--space-4); border-bottom: var(--border) solid var(--line); vertical-align: top; font-size: var(--type-sm); }
.size-table th { font-size: var(--type-xs); color: var(--muted); font-weight: var(--weight-medium); }
.size-table td:nth-child(2) { font-family: var(--font-mono); color: var(--brand); }
.match-badge { display: inline-flex; border-radius: var(--radius); padding: var(--space-1) var(--space-2); font-size: var(--type-xs); background: var(--surface-2); white-space: nowrap; }
.match-badge.exact { color: var(--good); background: var(--good-bg); }
.match-badge.same-ratio { color: var(--brand); background: var(--action-bg); }
.match-badge.needs-resize { color: var(--warn); background: var(--warn-bg); }
.match-detail { display: block; color: var(--muted); font-size: var(--type-xs); margin-top: var(--space-2); }
.faq { border-bottom: var(--border) solid var(--line); }
.faq p { max-width: var(--copy-width); margin: 0 0 var(--space-5); }
@media (max-width: 700px) {
  .hero { padding-top: var(--space-6); }
  .hero-copy { display: block; }
  .privacy-line { margin-top: var(--space-3); }
  .results.show, .editor-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-panel { border-right: 0; border-bottom: var(--border) solid var(--line); }
  .preview img { max-height: var(--preview-min-height); }
  .preview-name { margin-bottom: var(--space-3); }
  .grid, .grid.four, .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .size-table, .size-table tbody, .size-table tr, .size-table td { display: block; width: 100%; }
  .size-table thead { display: none; }
  .size-table tr { border-bottom: var(--border) solid var(--line); padding-block: var(--space-3); }
  .size-table td { border: 0; padding-block: var(--space-1); }
  .size-table td::before { display: block; font-family: var(--font-body); font-size: var(--type-xs); color: var(--muted); }
  .size-table td:nth-child(1)::before { content: "Preset"; }
  .size-table td:nth-child(2)::before { content: "Pixels"; }
  .size-table td:nth-child(4)::before { content: "Your image"; }
}
@media (max-width: 420px) {
  .support-links, .grid, .grid.four, .guide-list { grid-template-columns: minmax(0, 1fr); }
  .requirement-fields, .resize-fields, .resize-mode-options { grid-template-columns: minmax(0, 1fr); }
  .navlinks { gap: var(--space-4); }
}