/* Preserve the established grids, typography and palette; clarify the task. */
:root { --ux-muted: #555b53; --ux-focus: #3157ff; }
:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ux-focus);
  outline-offset: 4px;
}
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 10001; padding: 12px 18px; background: #fff; color: #202428; border: 2px solid var(--ux-focus); border-radius: 8px; transform: translateY(-200%); }
.skip-link:focus { transform: translateY(0); }
.upload-card .formats { font-size: 12px; line-height: 1.5; color: #bfc3ba; letter-spacing: 0; }
.upload-card > p:not(.formats) { color: #bfc3ba; }
.privacy { font-size: 12px; line-height: 1.5; letter-spacing: 0; color: var(--ux-muted); }
.privacy-note p { font-size: 13px; line-height: 1.6; color: var(--ux-muted); }
.privacy-note a { color: #2348d8; text-decoration: underline; text-underline-offset: 3px; }
.edition { font-size: 11px; color: var(--ux-muted); }
.intro-index, .comparison-caption { color: var(--ux-muted); }
.comparison-caption { line-height: 1.5; }
.upload-card-top > span:last-child { visibility: hidden; }
.header a, .header button, .g-header a, .mobile-nav a { min-height: 44px; }
.header .mobile-nav-toggle { width: 44px; height: 44px; flex-basis: 44px; }
.carousel-controls button, .dialog-close, .g-close { min-width: 44px; min-height: 44px; }
.settings-heading > p:last-child, .bg-panel p, .custom-color { font-size: 12px; line-height: 1.6; color: #50594a; }
.editor-eyebrow, .export-heading > span { font-size: 10px; color: #50594a; letter-spacing: 1px; }
.settings-heading h2 { font-size: 34px; line-height: 1.08; }
.settings .bg-tabs button { min-height: 40px; font-size: 12px; }
.settings .segmented button, .canvas-toolbar .segmented button { min-height: 36px; font-size: 12px; }
.history button { min-width: 36px; min-height: 36px; }
.compare-switch, .canvas-status, .export-summary, .editor-demo-note { font-size: 12px; color: #50594a; }
.export-heading h3 { font-size: 24px; }
.background-upload small { font-size: 11px; line-height: 1.5; color: #50594a; }
.canvas-area { background: #f0f1ed; }
#cancel-processing { min-height: 36px; padding: 6px 12px; border: 1px solid #a6ad9e; border-radius: 6px; background: #fff; color: #202428; font: inherit; cursor: pointer; }
#cancel-processing:hover { border-color: #202428; }
.canvas-status { gap: 10px; flex-wrap: wrap; }
#image-dimensions { overflow-wrap: anywhere; }
.g-result-note { line-height: 1.65; color: #555b53; }
#preview-note { margin: 16px 0; max-width: 70ch; font-size: 14px; }
.g-preview-link, .g-source-link { display: inline-flex; align-items: center; min-height: 36px; text-underline-offset: 4px; }
.info-page .workflow-heading h1 span { background: none; -webkit-text-fill-color: currentColor; color: #3157ff; }
.info-document-body p, .guide-example figcaption { color: #50586d; }
.info-document-body a, .guide-help a, .value-help a { text-underline-offset: 4px; }
.site-info-links a { display: inline-flex; align-items: center; min-height: 36px; }
@media (max-width: 760px) {
  .privacy { font-size: 12px; }
  .privacy-note p { font-size: 13px; }
  .settings .bg-tabs button { min-height: 44px; }
  .mobile-background-sheet .bg-tabs button { min-height: 44px; font-size: 13px; }
  .mobile-download { background: #202428; box-shadow: 0 2px 8px #20242818; }
  .mobile-download::before { content: none; }
  .mobile-download > span:first-child { padding-top: 0; }
  .mobile-background-sheet p, .mobile-background-sheet .custom-color { font-size: 13px; line-height: 1.6; }
  .g-preview-link, .g-source-link, .site-info-links a { min-height: 44px; }
  .canvas-status { padding-right: 8px; }
}
@media (pointer: coarse) {
  .swatches, .mobile-background-sheet .swatches { grid-template-columns: repeat(4, minmax(44px, 1fr)); gap: 10px; }
  .swatches button, .mobile-background-sheet .swatches button { width: 44px; height: 44px; }
  .history button { min-width: 44px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .g-button, .sample-button, .background-upload, .mobile-download, .workflow-visual { transition: none; }
  .button:hover, .g-button:hover, .sample-button:hover { transform: none; }
}
/* Comparison ranges are transparent: draw their keyboard focus on the surface. */
.comparison:has(input:focus-visible), .sample-compare:has(input:focus-visible), .lp-compare:has(input:focus-visible), .g-compare:has(input:focus-visible) { outline: 3px solid var(--ux-focus); outline-offset: 4px; }
.g-card-caption .g-eyebrow, .g-modal-heading .g-eyebrow { font-size: 11px; color: #555b53; }
.g-image-label, .sample-label, .image-label, .asset-note { font-size: 11px; }
.g-result-note { font-size: 13px; }
.g-filter-number, #gallery-count { font-size: 11px; }
.g-filters button, .lp-samples button { min-height: 40px; }
@media (pointer: coarse) { .g-filters button, .lp-samples button { min-height: 44px; } }

.export-heading h3 { color: #202428; font-size: 22px; font-weight: 500; text-transform: none; letter-spacing: -0.02em; }

/* Mobile keeps desktop actions reachable, with space for touch and long filenames. */
@media (max-width: 760px) {
  .canvas-toolbar .segmented button { min-height: 44px; }
  .mobile-tools { gap: 2px; padding-inline: 4px; }
  .mobile-tools button { min-width: 0; min-height: 56px; padding: 6px 2px; font-size: 11px; color: #50594a; }
  .canvas-status { font-size: 11px; gap: 6px 12px; }
  #image-dimensions { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-background-sheet .export-summary { font-size: 13px; }
  .mobile-background-sheet .editor-demo-note { font-size: 12px; color: #50594a; }
  .mobile-background-sheet .export-heading h3 { font-size: 22px; }
  .editing #export-dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
}
@media (max-width: 360px) { .mobile-tools button { font-size: 10px; } }

/* One comparison grip across home, samples, landing pages and error page. */
.divider > span, .sample-divider > span, .lp-compare-divider > span, .not-found-divider > span {
  font-size: 0 !important; color: transparent !important;
  background-color: #fff;
  background-image: linear-gradient(#657182, #657182), linear-gradient(#657182, #657182) !important;
  background-size: 2px 12px !important;
  background-position: calc(50% - 3px) center, calc(50% + 3px) center !important;
  background-repeat: no-repeat !important;
}