@import url("/theme.css?v=20261002-pure-black-1");

* { box-sizing: border-box; }

:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --surface-blue: #f5f8ff;
  --text: #0f172a;
  --muted: #667085;
  --muted-2: #98a2b3;
  --line: #e2e7ee;
  --line-strong: #d0d7e2;
  --blue: #2b64ea;
  --blue-hover: #2458d4;
  --blue-soft: #eaf1ff;
  --green: #18794e;
  --green-soft: #eefbf4;
  --amber: #a4570a;
  --amber-soft: #fff7e7;
  --red: #c62828;
  --red-soft: #fff3f3;
  --on-accent: #ffffff;
  --shadow: 0 18px 46px rgba(19, 33, 68, .08);
  --small-shadow: 0 6px 20px rgba(19, 33, 68, .05);
  color-scheme: light;
}

/* Dark palette: /theme.css */

html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

[hidden] { display: none !important; }

.site-header {
  height: 72px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  border-bottom: 1px solid var(--line);
}

.site-header-inner {
  width: min(1160px, calc(100% - 40px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.brand img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.brand-name {
  font-size: 17px;
  font-weight: 760;
  white-space: nowrap;
}

.brand-by {
  color: var(--muted);
  font-size: 16px;
  white-space: nowrap;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

.header-actions > * {
  position: relative;
  border-radius: 0;
}

.header-actions > * + *::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  border-radius: 0;
  background: var(--line);
  content: "";
  pointer-events: none;
}

.header-actions > :first-child {
  border-radius: 13px 0 0 13px;
}

.header-actions > :last-child {
  border-radius: 0 13px 13px 0;
}

.header-nav-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
}

.header-nav-button:hover {
  background: var(--surface-soft);
}

.header-nav-button:disabled {
  cursor: default;
  opacity: .48;
  background: transparent;
}

.header-nav-button svg,
.account-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
}

.icon-button:hover { color: var(--text); background: var(--surface-soft); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.header-actions .icon-button {
  border: 0;
  background: transparent;
}

.header-actions .icon-button:hover {
  background: var(--surface-soft);
}

.theme-button .moon-icon { display: none; }
html[data-theme="dark"] .theme-button .sun-icon { display: none; }
html[data-theme="dark"] .theme-button .moon-icon { display: block; }

.account-link {
  width: 190px;
  height: 38px;
  min-height: 38px;
  display: inline-grid;
  grid-template-columns: 17px 54px 82px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
}

#accountLinkText,
.account-badge {
  display: inline-flex;
}

.account-link:hover { background: var(--surface-soft); }

.account-badge {
  width: 82px;
  justify-content: center;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10px;
  font-weight: 760;
}

.account-badge.is-loading {
  visibility: hidden;
}

.header-actions > :focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.main-content {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: 42px 0 70px;
}

.intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 20px;
}

.intro h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.038em;
}

.intro p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 16px;
}

.local-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}

.privacy-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  border-radius: 50%;
  background: #35a56f;
  box-shadow: 0 0 0 3px rgba(53,165,111,.12);
}

.cleaner-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 24px 24px 18px;
}

.editor-panel { min-width: 0; }

.editor-heading {
  min-height: 34px;
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor-heading > label {
  font-size: 13px;
  font-weight: 760;
}

.editor-actions, .mode-controls, .edit-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.small-button, .history-button {
  min-height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 680;
}

.small-button { padding: 0 12px; }
.small-button:hover, .history-button:hover:not(:disabled) { background: var(--surface-soft); }
.small-button.ghost { color: var(--muted); }

.history-button {
  width: 34px;
  padding: 0;
  font-size: 17px;
}

.history-button:disabled {
  opacity: .35;
  cursor: default;
}

textarea {
  display: block;
  width: 100%;
  height: clamp(330px, 46vh, 510px);
  min-height: 260px;
  resize: vertical;
  overflow: auto;
  /* Use the whole editor width until a scrollbar is actually needed. */
  scrollbar-gutter: auto;
  padding: 16px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  outline: none;
  background: var(--surface);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  font-variant-ligatures: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 2;
}

textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 13%, transparent);
}

textarea::placeholder { color: var(--muted-2); }

.clean-output {
  background: var(--surface-blue);
}

.clean-output:disabled {
  color: var(--muted-2);
  background: var(--surface-soft);
  cursor: default;
}

.highlight-editor {
  position: relative;
  min-height: 260px;
}

.highlight-editor textarea {
  position: relative;
  z-index: 2;
  margin: 0;
  color: transparent;
  -webkit-text-fill-color: transparent;
  caret-color: var(--text);
  background: transparent;
}

.highlight-backdrop {
  position: absolute;
  z-index: 1;
  inset: 1px;
  overflow: auto;
  /* Match the textarea's on-demand scrollbar width so wrapping stays aligned. */
  scrollbar-gutter: auto;
  border-radius: 12px;
  background: var(--surface);
  pointer-events: none;
}

.highlight-layer {
  min-height: 100%;
  padding: 16px;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  font-variant-ligatures: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  tab-size: 2;
}

.highlight-content { display: block; min-width: 100%; }

#originalText::selection {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background: color-mix(in srgb, var(--blue) 20%, transparent);
}

.issue-highlight {
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.issue-highlight.normalized {
  color: var(--text);
  background: rgba(255, 215, 64, .28);
  box-shadow: inset 0 -2px 0 #d8a104;
}

.issue-highlight.removed {
  color: var(--text);
  background: rgba(232, 69, 76, .16);
  box-shadow: inset 0 -2px 0 #d64248;
}

.issue-highlight.invisible {
  position: relative;
  display: inline;
  width: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.issue-highlight.invisible::after {
  content: "";
  position: absolute;
  top: .08em;
  left: -2px;
  width: 4px;
  height: 1.05em;
  border-radius: 999px;
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(229,72,77,.13);
}

.sync-scroll-button {
  position: relative;
  z-index: 50;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin-top: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
}

.sync-scroll-button[aria-pressed="false"] {
  background: var(--surface-soft);
  color: var(--muted-2);
}

.sync-scroll-button svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.compact-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.compact-toggle input,
.preference-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  width: 31px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #cdd4df;
  transition: background .15s ease;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.16);
  transition: transform .15s ease;
}

.compact-toggle input:checked + .toggle-track,
.preference-toggle input:checked + .toggle-track {
  background: var(--blue);
}

.compact-toggle input:checked + .toggle-track .toggle-thumb,
.preference-toggle input:checked + .toggle-track .toggle-thumb {
  transform: translateX(13px);
}

.result-status {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin: 0 24px 18px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
}

.result-status.cleaned {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  background: var(--green-soft);
  color: var(--green);
}

.result-status.failed {
  border-color: color-mix(in srgb, var(--red) 28%, var(--line));
  background: var(--red-soft);
  color: var(--red);
}

.status-icon {
  width: 22px;
  height: 22px;
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: var(--muted-2);
  color: var(--on-accent);
  font-size: 10px;
  font-weight: 800;
}

.result-status.cleaned .status-icon { background: var(--green); }
.result-status.failed .status-icon { background: var(--red); }

#statusMessage {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-status .text-button {
  flex: 0 0 auto;
  margin-left: auto;
}

.text-button {
  padding: 3px 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 740;
}

.text-button:hover { text-decoration: underline; }

.cleaner-footer {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 15px 24px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.footer-left {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.privacy-note {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.copy-button {
  min-height: 44px;
  min-width: 190px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border: 1px solid var(--blue);
  border-radius: 11px;
  background: var(--blue);
  color: var(--on-accent);
  font-weight: 750;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 22%, transparent);
}

.copy-button:hover:not(:disabled) { background: var(--blue-hover); }

.copy-button:disabled {
  cursor: default;
  opacity: .45;
  box-shadow: none;
}

.copy-button.locked {
  background: var(--surface);
  color: var(--blue);
  box-shadow: none;
}

.copy-button.locked:hover:not(:disabled) {
  background: var(--blue-soft);
}

.lock-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(86vh, 900px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 28px 80px rgba(9, 18, 38, .24);
}

.modal::backdrop {
  background: rgba(15, 23, 42, .44);
  backdrop-filter: blur(2px);
}

.modal-shell { padding: 24px; }

.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 2px 0 0;
  font-size: 25px;
  letter-spacing: -.02em;
}

.modal-header p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.modal-eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.close-button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.close-button:hover { background: var(--surface-soft); color: var(--text); }

.artifact-list {
  display: grid;
  gap: 8px;
  max-height: 55vh;
  overflow: auto;
}

.artifact-row {
  display: grid;
  grid-template-columns: 10px minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.artifact-dot, .legend-dot {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
}
.artifact-dot.removed, .legend-dot.removed { background: #db4249; }
.artifact-dot.normalized, .legend-dot.normalized { background: #d5a10b; }
.artifact-dot.warning, .legend-dot.warning { background: #7b8798; }

.artifact-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.artifact-name strong { font-size: 13px; }
.artifact-name span { color: var(--muted); font-size: 11px; }
.artifact-code, .artifact-count { color: var(--muted); font-size: 11px; }
.artifact-count { font-weight: 760; }

.details-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.details-legend span { display: inline-flex; align-items: center; gap: 6px; }

.settings-modal { width: min(920px, calc(100vw - 32px)); }
.settings-shell { padding: 0; max-height: 86vh; overflow: auto; }
.settings-shell .modal-header {
  margin: 0;
  padding: 22px 24px 18px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.settings-header-actions { display: flex; align-items: center; gap: 8px; }
.settings-note {
  margin: 18px 24px 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.preference-groups {
  display: grid;
  gap: 20px;
  padding: 20px 24px 28px;
}

.preference-group {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}

.preference-group-header {
  padding: 14px 15px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.preference-group-header h3 {
  margin: 0;
  font-size: 13px;
  letter-spacing: .01em;
}

.preference-group-header p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.preference-list { display: grid; }

.preference-row {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
}
.preference-row:first-child { border-top: 0; }
.preference-row.is-dormant { opacity: .55; }

.preference-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.preference-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.preference-copy strong { font-size: 12px; }
.preference-copy small { color: var(--muted); font-size: 11px; line-height: 1.4; }

.example-button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 10px;
  font-weight: 720;
}

.preference-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.preference-toggle .toggle-track { width: 34px; height: 20px; }
.preference-toggle .toggle-thumb { width: 14px; height: 14px; }
.preference-toggle input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }

.example-description, .example-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.example-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.example-comparison > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
}

.comparison-label {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.example-comparison pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.access-modal { width: min(440px, calc(100vw - 32px)); }
.access-shell { position: relative; padding: 30px 28px 26px; text-align: center; }
.access-close { position: absolute; top: 14px; right: 14px; }

.access-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 4px auto 16px;
  border-radius: 16px;
  background: var(--blue-soft);
  color: var(--blue);
}

.access-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.access-shell h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -.025em;
}

.access-shell p {
  margin: 10px auto 20px;
  max-width: 330px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.access-primary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 10px;
  background: var(--blue);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: 740;
}

.access-primary:hover { background: var(--blue-hover); }

.access-secondary {
  margin-top: 10px;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  z-index: 1000;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
  font-size: 12px;
  transform: translateX(-50%);
}

@media (max-width: 900px) {
  .workspace {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .sync-scroll-button {
    display: none;
  }

  .intro {
    align-items: flex-start;
  }

  textarea {
    height: 310px;
  }
}

@media (max-width: 650px) {
  .site-header { height: auto; min-height: 68px; }
  .site-header-inner, .main-content { width: min(100% - 24px, 1160px); }
  .site-header-inner { padding: 12px 0; }
  .brand-by { display: none; }
  .header-actions { gap: 0; }
  .icon-button { width: 38px; height: 38px; }
  .account-link { min-height: 38px; padding: 0 9px; font-size: 12px; }
  .account-badge { display: none !important; }

  .main-content { padding: 28px 0 48px; }
  .intro { margin-bottom: 15px; }
  .intro h1 { font-size: 31px; }
  .intro p { font-size: 14px; }
  .local-pill { display: none; }

  .workspace { padding: 16px 14px 12px; }
  .editor-heading { align-items: flex-start; }
  .mode-controls { gap: 10px; }
  .compact-toggle { flex-direction: column; gap: 4px; }
  textarea, .highlight-editor { min-height: 250px; }
  textarea { height: 285px; }

  .result-status { margin: 0 14px 12px; }
  .cleaner-footer {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .footer-left { justify-content: space-between; }
  .privacy-note { display: none; }
  .copy-button { width: 100%; }

  .artifact-row { grid-template-columns: 9px minmax(0,1fr) auto; }
  .artifact-code { display: none; }

  .example-comparison { grid-template-columns: 1fr; }
  .modal-shell { padding: 20px; }
  .settings-shell .modal-header { padding: 18px 18px 15px; }
  .settings-note { margin: 14px 18px 0; }
  .preference-groups { padding: 16px 18px 22px; }
}


/* =========================================================
   Compact layout + clearer web-app controls
   ========================================================= */

html {
  scrollbar-gutter: stable;
}

body.modal-open {
  overflow: hidden;
}

.site-header {
  height: 64px;
}

.site-header-inner {
  width: min(1160px, calc(100% - 36px));
}

.brand img {
  width: 30px;
  height: 30px;
}

.icon-button {
  width: 38px;
  height: 38px;
}

.header-nav-button {
  min-height: 38px;
}

.account-link {
  width: 190px;
  height: 38px;
  min-height: 38px;
}

.main-content {
  width: min(1160px, calc(100% - 36px));
  padding: 20px 0 42px;
}


.workspace {
  padding: 18px 20px 14px;
}

.editor-heading {
  min-height: 32px;
  margin-bottom: 7px;
}

.clean-title-group {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.clean-title-group > label {
  font-size: 13px;
  font-weight: 760;
}

.preferences-button {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.preferences-button:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.preferences-button svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

textarea {
  height: clamp(260px, calc(100dvh - 315px), 500px);
  min-height: 220px;
}

.highlight-editor {
  min-height: 220px;
}

.sync-scroll-button {
  align-self: center;
  margin-top: 0;
  transform: translateY(18px);
}

.result-status {
  min-height: 40px;
  margin: 0 20px 14px;
  padding: 8px 11px;
}

.cleaner-footer {
  min-height: 64px;
  padding: 10px 20px;
}

.settings-modal {
  width: min(920px, calc(100vw - 32px));
  height: min(86dvh, 860px);
  max-height: none;
  overflow: hidden;
}

.settings-shell {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.settings-shell .modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 20px 24px 16px;
}

.preference-groups {
  padding-top: 18px;
}

.access-modal {
  width: min(460px, calc(100vw - 32px));
}

.access-shell p {
  max-width: 370px;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 1050px) and (min-width: 901px) {
  .preferences-button span {
    display: none;
  }

  .preferences-button {
    width: 30px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 900px) {
  .main-content {
    padding-top: 24px;
  }

  .clean-editor-heading {
    flex-wrap: wrap;
  }

  textarea {
    height: 310px;
    min-height: 250px;
  }

}

@media (max-width: 650px) {
  .site-header {
    min-height: 62px;
  }

  .site-header-inner,
  .main-content {
    width: min(100% - 24px, 1160px);
  }

  .site-header-inner {
    gap: 8px;
  }

  .brand-name {
    font-size: 15px;
  }

  .brand-by,
  .header-nav-button span {
    display: none;
  }

  .header-actions { gap: 0; }

  .header-nav-button {
    width: 38px;
    min-width: 38px;
    padding: 0;
    justify-content: center;
  }

  .account-link {
    width: auto;
    min-width: 38px;
    display: inline-flex;
    padding: 0 9px;
  }

  .main-content {
    padding: 20px 0 38px;
  }

  .intro h1 {
    font-size: 27px;
  }

  .preferences-button span {
    display: none;
  }

  .preferences-button {
    width: 30px;
    padding: 0;
    justify-content: center;
  }

  .settings-shell .modal-header {
    padding: 17px 18px 14px;
  }

  .preference-groups {
    padding: 14px 18px 22px;
  }
}

/* Separate confirmation dialog for resetting Cleaning Preferences. */
.reset-preferences-dialog {
  width: min(430px, calc(100vw - 32px));
  max-height: none;
  overflow: visible;
}

.reset-preferences-dialog::backdrop {
  background: rgba(15, 23, 42, .32);
  backdrop-filter: blur(2px);
}

.reset-preferences-shell {
  padding: 24px;
}

.reset-preferences-shell h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.025em;
}

.reset-preferences-shell p {
  margin: 10px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.reset-preferences-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}

.reset-dialog-button {
  min-height: 40px;
  padding: 0 15px;
}

.small-button.primary-small {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-accent);
}

.small-button.primary-small:hover {
  background: var(--blue-hover);
}

@media (max-width: 520px) {
  .reset-preferences-shell {
    padding: 21px;
  }

  .reset-preferences-actions {
    flex-direction: column-reverse;
  }

  .reset-preferences-actions .small-button {
    width: 100%;
    min-height: 42px;
  }
}


/* =========================================================
   Product information below the cleaner
   ========================================================= */

.marketing-content {
  width: min(1160px, 100%);
  margin: 76px auto 0;
  padding-bottom: 8px;
}

/* Stops paragraphs ending on a single stranded word and stops headings
   breaking one word onto a line of their own. Browsers without support just
   ignore these, so the layout is never worse than it was. */
p,
li,
summary,
.source-card span,
.source-card strong,
.feature-card p,
.step-card p,
.use-case-grid p,
.faq-list p {
  text-wrap: pretty;
}

h1, h2, h3, h4,
.source-card strong,
summary {
  text-wrap: balance;
}

.section-kicker {
  display: inline-block;
  color: var(--blue);
  font-size: 11px;
  font-weight: 820;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.intro-showcase {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line));
  border-radius: 30px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue-soft) 78%, transparent), transparent 34%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--surface-blue)), var(--surface));
  box-shadow: var(--shadow);
}

.intro-copy {
  max-width: 1040px;
  margin: 0 auto;
  padding: 58px 54px 50px;
  text-align: center;
}

.intro-copy h1,
.section-heading h2,
.control-copy h2,
.privacy-banner h2,
.bottom-cta h2 {
  margin: 10px 0 0;
  color: var(--text);
  letter-spacing: -.04em;
  text-wrap: balance;
}

/* A tidy pyramid: headline widest, then a two-line explanation, then a row
   of chips just under it. Nothing here should span the full container. */
.intro-copy h1 {
  margin-top: 13px;
  font-size: clamp(34px, 4.2vw, 48px);
  line-height: 1.1;
}

.intro-copy > p {
  max-width: 760px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

/* Six chips laid out freely wrap to five-then-one on a wide hero, which reads
   as an accident. Capping the row forces an even three-and-three instead. */
/* Four chips on one row. Six needed either a stagger or a wrap, and both
   read as a mistake rather than a choice — the weaker two are covered by
   the sections below. */
.trust-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 22px auto 0;
}

.trust-chips span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: var(--small-shadow);
}

.trust-chips b {
  color: var(--green);
  font-size: 11px;
}

.cleaning-showcase {
  padding: 26px 42px 42px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
}

.marketing-section,
.workflow-section,
.faq-section,
.control-panel,
.privacy-banner {
  margin-top: 82px;
}

.section-heading {
  max-width: 800px;
  margin: 0 auto 32px;
  text-align: center;
}

.section-heading-wide {
  max-width: 980px;
}

.section-heading h2,
.control-copy h2,
.privacy-banner h2,
.bottom-cta h2 {
  font-size: clamp(29px, 3.8vw, 41px);
  line-height: 1.08;
}

/* These sat on the full 980px heading width, about 136 characters a line.
   Anything just over that spilled three or four words onto a second line and
   looked like a mistake. A 760px measure reads better anyway, and balance
   splits whatever does wrap into even halves instead of a long line and a
   stub. Text short enough for one line is untouched by both. */
.section-heading p,
.control-copy > p,
.privacy-banner p,
.bottom-cta p {
  max-width: 760px;
  margin: 14px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.65;
  text-wrap: balance;
}

.compact-heading { margin-bottom: 28px; }

/* Three columns here, two at 980px, one at 760px. Feature grid currently contains 9 primary cards. */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-card {
  position: relative;
  min-width: 0;
  min-height: 220px;
  overflow: hidden;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--small-shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.feature-card::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  right: -58px;
  top: -58px;
  border-radius: 50%;
  background: var(--feature-glow, var(--blue-soft));
  opacity: .68;
  pointer-events: none;
}

.feature-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  box-shadow: 0 12px 28px rgba(19, 33, 68, .075);
}

.feature-blue { --feature-accent: var(--blue); --feature-glow: var(--blue-soft); }
.feature-violet { --feature-accent: #7559d9; --feature-glow: color-mix(in srgb, #7559d9 13%, var(--surface)); }
.feature-green { --feature-accent: var(--green); --feature-glow: var(--green-soft); }
.feature-amber { --feature-accent: var(--amber); --feature-glow: var(--amber-soft); }
.feature-cyan { --feature-accent: #1682a8; --feature-glow: color-mix(in srgb, #1682a8 12%, var(--surface)); }
.feature-rose { --feature-accent: #bd557a; --feature-glow: color-mix(in srgb, #bd557a 11%, var(--surface)); }

.feature-icon {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: color-mix(in srgb, var(--feature-accent) 10%, var(--surface));
  color: var(--feature-accent);
}

.feature-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card h3,
.control-item h3,
.step-card h3,
.use-case-grid h3 {
  margin: 18px 0 0;
  font-size: 16px;
  letter-spacing: -.018em;
}

.feature-card p,
.step-card p,
.use-case-grid p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.8px;
  line-height: 1.62;
}

.control-panel {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(440px, 1.1fr);
  gap: 58px;
  align-items: center;
  padding: 48px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--blue-soft) 72%, transparent), transparent 38%),
    linear-gradient(135deg, var(--surface-blue), var(--surface));
  box-shadow: var(--shadow);
}

.control-copy > p {
  margin-left: 0;
  max-width: 560px;
}

.control-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.control-highlights span {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 680;
}

.control-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 18px 38px rgba(19, 33, 68, .08);
}

.control-visual-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 20px;
  border-bottom: 1px solid var(--line);
}

.control-visual-head > div { display: grid; gap: 4px; }
.mini-label { color: var(--blue); font-size: 10px; font-weight: 820; letter-spacing: .08em; text-transform: uppercase; }
.control-visual-head strong { font-size: 14px; }

.found-badge {
  flex: 0 0 auto;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 800;
}

.control-visual-list { padding: 5px 14px; }

.control-visual-list > div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 52px;
  padding: 0 7px;
  border-bottom: 1px solid var(--line);
}

.control-visual-list > div:last-child { border-bottom: 0; }
.control-visual-list strong { font-size: 12px; }
.control-visual-list small { color: var(--muted); font-size: 11px; }

.change-dot { width: 8px; height: 8px; border-radius: 50%; }
.blue-dot { background: var(--blue); }
.violet-dot { background: #7559d9; }
.green-dot { background: var(--green); }

.control-visual-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}

.control-visual-foot span { color: var(--green); font-weight: 850; }

.source-section,
.use-cases-section {
  padding: 0 4px;
}

/* Same rule as the feature grid: a multiple of six stays even at every
   breakpoint. Currently 6. */
.source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.source-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--small-shadow);
  transition: transform .18s ease, border-color .18s ease;
}

.source-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 23%, var(--line));
}

.source-icon,
.use-icon {
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 820;
}

.source-icon {
  width: 44px;
  height: 44px;
  font-size: 13px;
}

.source-card > div { display: grid; gap: 4px; }
.source-card strong { font-size: 13px; }
.source-card span:not(.source-icon) { color: var(--muted); font-size: 11.7px; line-height: 1.45; }

.workflow-section {
  position: relative;
  overflow: hidden;
  padding: 48px 42px 44px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--surface-blue)), var(--surface));
  box-shadow: var(--shadow);
}

.workflow-section::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  top: -230px;
  left: calc(50% - 150px);
  border-radius: 50%;
  background: color-mix(in srgb, var(--blue-soft) 74%, transparent);
  pointer-events: none;
}

.workflow-section > * { position: relative; z-index: 1; }

.steps-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.steps-grid::before {
  content: "";
  position: absolute;
  top: 27px;
  left: 17%;
  right: 17%;
  height: 1px;
  background: color-mix(in srgb, var(--blue) 22%, var(--line));
}

.step-card {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
}

.step-number {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--blue);
  color: var(--on-accent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 22%, transparent);
  font-size: 12px;
  font-weight: 850;
}

.step-card h3 { margin-top: 0; font-size: 14px; }
.step-card p { font-size: 11.8px; }

.use-case-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}

.use-case-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: var(--small-shadow);
  transition: transform .18s ease, border-color .18s ease;
}

.use-case-grid article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--blue) 23%, var(--line));
}

.use-icon {
  width: 42px;
  height: 42px;
  font-size: 12px;
}

.use-case-grid article:nth-child(2) .use-icon { background: var(--green-soft); color: var(--green); }
.use-case-grid article:nth-child(3) .use-icon { background: var(--amber-soft); color: var(--amber); }
.use-case-grid article:nth-child(4) .use-icon { background: color-mix(in srgb, #7559d9 12%, var(--surface)); color: #7559d9; }
.use-case-grid article:nth-child(5) .use-icon { background: color-mix(in srgb, #1682a8 12%, var(--surface)); color: #1682a8; }
.use-case-grid article:nth-child(6) .use-icon { background: color-mix(in srgb, #bd557a 11%, var(--surface)); color: #bd557a; }

.use-case-grid h3 { margin-top: 1px; font-size: 13.5px; }
.use-case-grid p { font-size: 11.8px; }

.privacy-banner {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 38px 42px;
  border: 1px solid color-mix(in srgb, var(--green) 25%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--green) 8%, transparent), transparent 30%),
    linear-gradient(135deg, var(--green-soft), color-mix(in srgb, var(--surface) 94%, var(--green-soft)));
  box-shadow: var(--small-shadow);
}

.privacy-mark {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: var(--surface);
  color: var(--green);
  box-shadow: var(--small-shadow);
}

.privacy-mark svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.privacy-copy { min-width: 0; }
.privacy-banner h2 { margin-top: 7px; font-size: clamp(27px, 3.3vw, 37px); }
.privacy-banner p { max-width: 780px; margin-left: 0; font-size: 13.2px; }

.privacy-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;
}

.privacy-points span {
  padding: 7px 10px;
  border: 1px solid color-mix(in srgb, var(--green) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--green);
  font-size: 10.8px;
  font-weight: 760;
}

.faq-section {
  padding: 46px 42px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
}

.faq-list {
  width: min(940px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 9px;
}

.faq-list details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 3px 12px rgba(19, 33, 68, .035);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.faq-list details:hover,
.faq-list details[open] {
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
}

.faq-list details[open] {
  box-shadow: var(--small-shadow);
}

.faq-list summary {
  position: relative;
  padding: 18px 52px 18px 18px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 740;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}

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

.faq-list summary::after {
  content: "+";
  position: absolute;
  top: 12px;
  right: 13px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--blue);
  border: 1px solid var(--line);
  font-size: 18px;
  font-weight: 520;
}

.faq-list details[open] summary::after { content: "–"; }

.faq-list details p {
  margin: -3px 52px 18px 18px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.68;
}

.responsible-note {
  width: min(940px, 100%);
  margin: 22px auto 0;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.55;
}

.responsible-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 850;
}

.responsible-note p { margin: 0; }
.responsible-note strong { color: var(--text); }

.bottom-cta {
  position: relative;
  overflow: hidden;
  margin-top: 72px;
  padding: 54px 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 28px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue-soft) 88%, var(--surface)), var(--surface));
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-content { position: relative; z-index: 2; }
.cta-glow { position: absolute; border-radius: 50%; pointer-events: none; }
.cta-glow-one { width: 270px; height: 270px; left: -100px; top: -150px; background: color-mix(in srgb, var(--blue) 11%, transparent); }
.cta-glow-two { width: 220px; height: 220px; right: -70px; bottom: -130px; background: color-mix(in srgb, var(--green) 9%, transparent); }

.bottom-cta h2 { font-size: clamp(29px, 4vw, 42px); }
.bottom-cta p { max-width: 620px; }

.bottom-cta button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 23px;
  padding: 0 19px;
  border: 1px solid var(--blue);
  border-radius: 12px;
  background: var(--blue);
  color: var(--on-accent);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 20%, transparent);
  font-size: 13px;
  font-weight: 790;
  transition: transform .18s ease, background .18s ease;
}

.bottom-cta button:hover {
  transform: translateY(-1px);
  background: var(--blue-hover);
}

/* Signed-out access still looks like the normal Copy button.
   The lock is the only visual difference. */
.copy-button.locked {
  background: var(--blue);
  color: var(--on-accent);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 22%, transparent);
}

.copy-button.locked:hover:not(:disabled) {
  background: var(--blue-hover);
}

@media (max-width: 980px) {
  .feature-grid,
  .source-grid,
  .use-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .control-panel {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .steps-grid::before { display: none; }
}

@media (max-width: 760px) {
  .marketing-content { margin-top: 56px; }

  .marketing-section,
  .workflow-section,
  .faq-section,
  .control-panel,
  .privacy-banner { margin-top: 64px; }

  .intro-copy { padding: 44px 24px 36px; }
  .intro-copy h1 { font-size: 33px; }
  .intro-copy > p { font-size: 15px; }
  .cleaning-showcase { padding: 24px 20px 22px; }

  .feature-grid,
  .source-grid,
  .use-case-grid,
  .steps-grid { grid-template-columns: 1fr; }

  .feature-card { min-height: 0; }

  .control-panel {
    padding: 30px 22px;
    border-radius: 22px;
  }

  .control-visual-list > div {
    grid-template-columns: 10px minmax(0, 1fr);
  }

  .control-visual-list small {
    grid-column: 2;
    margin-top: -8px;
    margin-bottom: 8px;
  }

  .source-card { padding: 16px; }

  .workflow-section {
    padding: 36px 22px 24px;
    border-radius: 22px;
  }

  .privacy-banner {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px 24px;
    border-radius: 22px;
  }

  .privacy-mark { width: 54px; height: 54px; }

  .faq-section {
    padding: 34px 18px;
    border-radius: 22px;
  }

  .faq-list summary { padding-left: 15px; }
  .faq-list details p { margin-left: 15px; margin-right: 44px; }

  .bottom-cta {
    margin-top: 54px;
    padding: 42px 22px;
    border-radius: 22px;
  }
}

@media (max-width: 520px) {
  .marketing-content { width: 100%; }
  .intro-showcase { border-radius: 22px; }
  .intro-copy h1 { font-size: 34px; }
  .trust-chips { gap: 8px; }
  .trust-chips span { padding: 0 12px; font-size: 11px; }
  .section-heading h2,
  .control-copy h2,
  .privacy-banner h2,
  .bottom-cta h2 { font-size: 29px; }
  .section-heading p,
  .control-copy > p { font-size: 13.5px; }
}


/* ---- page legal footer --------------------------------------------------- */

.legal-site-footer {
  min-height: 82px;
  margin-top: 22px;
  padding: 22px 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.legal-site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.legal-site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.legal-site-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.legal-site-footer-links a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--small-shadow);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.legal-site-footer-links a:hover {
  transform: translateY(-1px);
  color: var(--text);
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  background: color-mix(in srgb, var(--blue-soft) 40%, var(--surface));
}

@media (max-width: 760px) {
  .legal-site-footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .legal-site-footer-links {
    justify-content: flex-start;
  }
}

/* ===========================================================================
   File and image cleaning
   Added alongside the text cleaner: an Add File button, the two summary bars
   under each box, the shared preview pair, the trash control that sits between
   them, the metadata each empty box shows, the download group and the
   File & image rules tab. Every colour below is an existing theme token, so
   light and dark both follow the page.
   =========================================================================== */

.workspace { position: relative; }

.file-input { display: none; }

.small-button.file-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line-strong));
  background: var(--blue-soft);
}

.small-button.file-button:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

.small-button.file-button svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ---- drop overlay -------------------------------------------------------- */

.image-drop-overlay {
  position: absolute;
  inset: 1px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 2px dashed var(--blue);
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue-soft) 94%, transparent);
  pointer-events: none;
}

.image-drop-overlay span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 740;
}

.image-drop-overlay small {
  color: color-mix(in srgb, var(--blue) 72%, var(--muted));
  font-size: 11px;
}

/* ---- empty-box metadata -------------------------------------------------- */
/* An added image borrows the empty space in both boxes to say what the file
   was carrying and what survived the clean. The first character of text takes
   the space straight back. */

.clean-editor {
  position: relative;
  display: flex;
  min-width: 0;
}

.clean-editor textarea { width: 100%; }

/* A quiet X appears only when there is text and the pointer is over either
   editor. Both controls clear the text pair without removing an added file. */
.clear-box-button {
  position: absolute;
  z-index: 5;
  top: 5px;
  left: 5px;
  width: 24px;
  height: 24px;
  display: grid;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 7px;
  color: var(--muted-2);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s ease, color .12s ease, background .12s ease;
}

.clear-box-button svg {
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.highlight-editor:hover .clear-box-button,
.clean-editor:hover .clear-box-button,
.clear-box-button:focus-visible {
  opacity: 1;
}

.clear-box-button:hover {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 12%, var(--surface));
}

.clear-box-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

.field-empty-state {
  position: absolute;
  z-index: 4;
  inset: 1px;
  display: grid;
  gap: 10px;
  padding: 22px;
  place-content: center;
  place-items: center;
  border-radius: 12px;
  color: var(--muted-2);
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.field-empty-icon {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .45;
  transition: width .15s ease, height .15s ease, opacity .15s ease;
}

.field-empty-state.has-meta .field-empty-icon {
  width: 20px;
  height: 20px;
  opacity: .26;
}

.field-empty-meta {
  display: grid;
  gap: 5px;
  width: fit-content;
  max-width: min(100%, 48ch);
  justify-items: center;
}

.field-empty-meta strong {
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .075em;
  text-transform: uppercase;
  opacity: .8;
}

.field-empty-meta span {
  max-width: 100%;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-wrap: pretty;
  opacity: .74;
}

/* A box with anything in it is not empty, whatever the file is doing. */
.highlight-editor.has-content .field-empty-state,
.clean-editor.has-content .field-empty-state { display: none; }

/* ---- summary bars -------------------------------------------------------- */
/* Both bars are the same near-white: the clean side is the result, not a
   verdict, and colouring only one of them made the pair look mismatched. */

.file-summary-card {
  min-height: 36px;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 11px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-size: 11.5px;
  overflow: hidden;
}

.clean-file-summary-card { background: var(--surface); }

.file-bar-interactive {
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.file-bar-interactive:hover,
.file-bar-interactive[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line-strong));
  background: var(--surface-blue);
}

.file-bar-interactive:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.file-bar-label {
  flex: 0 0 auto;
  color: var(--muted);
  font-weight: 720;
  letter-spacing: .01em;
}

/* The file's own details read from the right edge, so the two bars line their
   numbers up with each other instead of with their labels. */
.file-bar-meta {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--text);
}

.file-summary-card.is-waiting .file-bar-meta { color: var(--muted-2); }
.file-summary-card.is-loading { border-color: var(--blue); }

.preview-copy-button {
  flex: 0 0 auto;
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--blue-soft);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 720;
}

.preview-copy-button:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--blue) 45%, var(--line-strong));
  background: var(--surface);
}

.preview-copy-button:disabled { opacity: .5; cursor: default; }

/* ---- Extract Text, on the Original image bar ----------------------------- */
/* Sits between the bar's label and its meta line, mirroring the extension's
   placement. The meta line keeps flex: 1 so it still reads from the right. */

.extract-text-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 84px;
  justify-content: center;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, opacity .12s ease;
}

.extract-text-button[hidden] { display: none; }

/* Reading an image is slow enough to need its own indicator: the bar's meta
   line carries the percentage, the button carries the spinner. */
.extract-text-button.is-loading::before {
  content: "";
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  border: 1.6px solid color-mix(in srgb, var(--blue) 32%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: download-spin .68s linear infinite;
}

.extract-text-button.is-loading {
  cursor: wait;
  opacity: .75;
}

@media (prefers-reduced-motion: reduce) {
  .extract-text-button.is-loading::before { animation: none; }
}

/* ---- trash control, centred between the two file bars -------------------- */

.remove-files-button {
  position: absolute;
  left: 50%;
  z-index: 22;
  display: grid;
  width: 26px;
  height: 28px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted-2);
  transform: translate(-50%, -50%);
  transition: color .12s ease, background .12s ease;
}

.remove-files-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.remove-files-button:hover:not(:disabled) {
  color: var(--red);
  background: var(--red-soft);
}

.remove-files-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.remove-files-button:disabled { cursor: default; opacity: .45; }

/* ---- preview pair -------------------------------------------------------- */

.file-preview-panel {
  margin-top: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.file-preview-image {
  display: block;
  max-width: 100%;
  max-height: 236px;
  margin: 0 auto;
  border-radius: 8px;
  object-fit: contain;
}

.file-preview-text {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
}

.file-preview-note {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
}

/* ---- download group, immediately right of Copy Clean Text ---------------- */

.footer-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.download-group {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 11px;
  background: var(--surface);
  overflow: visible;
}

.download-group:has(.download-action-button:disabled) {
  border-color: var(--line);
  background: var(--surface-soft);
}

.download-action-button,
.download-group .download-options-button {
  display: grid;
  height: 100%;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  color: var(--blue);
  transition: color .12s ease, background .12s ease;
}

.download-action-button {
  position: relative;
  width: 46px;
  border-radius: 10px 0 0 10px;
}

.download-group .download-options-button {
  width: 30px;
  border-left: 1px solid var(--line);
  border-radius: 0 10px 10px 0;
  color: var(--muted);
}

.download-action-button svg,
.download-group .download-options-button svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.download-action-button svg { width: 19px; height: 19px; stroke-width: 1.9; }

.download-group .download-options-button svg {
  width: 16px;
  height: 16px;
  stroke-width: 2;
  transition: transform .16s cubic-bezier(.3, 0, .2, 1);
}

/* The arrow points at the menu while it is open. */
.download-group .download-options-button[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

/* Only the half under the pointer lights up, so it is always obvious which
   of the two actions a click will take. */
.download-action-button:hover:not(:disabled),
.download-group .download-options-button:hover:not(:disabled),
.download-group .download-options-button[aria-expanded="true"] {
  background: var(--blue-soft);
  color: var(--blue);
}

.download-action-button:disabled,
.download-group .download-options-button:disabled {
  color: var(--muted-2);
  background: transparent;
  cursor: default;
}

.download-action-button:focus-visible,
.download-group .download-options-button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.download-action-button.is-processing svg { visibility: hidden; }

.download-action-button.is-processing::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: download-spin .7s linear infinite;
}

@keyframes download-spin { to { transform: rotate(360deg); } }

.download-options-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 40;
  width: 232px;
  padding: 11px;
  border: 1px solid var(--line-strong);
  border-radius: 13px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.download-menu-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.download-format-list { display: grid; gap: 4px; }

.download-format-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}

.download-format-option:hover { background: var(--surface-soft); }

.download-format-option[aria-checked="true"] {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background: var(--blue-soft);
  color: var(--blue);
}

.download-format-option small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}

.download-compress-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  cursor: pointer;
}

.download-compress-row > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.download-compress-row strong { font-size: 12px; }
.download-compress-row small { color: var(--muted); font-size: 10.5px; }

.download-compress-row input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.download-compress-row .toggle-track { width: 34px; height: 20px; }
.download-compress-row .toggle-thumb { width: 14px; height: 14px; }

/* Compress is on by default, so its switch has to read as on: the shared
   checked rule above only lists the two toggle classes that existed before. */
.download-compress-row input:checked + .toggle-track { background: var(--blue); }
.download-compress-row input:checked + .toggle-track .toggle-thumb { transform: translateX(14px); }

.download-compress-row input:focus-visible + .toggle-track {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ---- settings tabs ------------------------------------------------------- */

.settings-tabs {
  display: flex;
  gap: 7px;
  padding: 14px 20px 0;
}

.settings-tab {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.settings-tab:hover { background: var(--surface-soft); color: var(--text); }

.settings-tab.is-active {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent);
  background: var(--blue-soft);
  color: var(--blue);
}

.preference-select {
  min-height: 34px;
  max-width: 190px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
  font-weight: 660;
}

.preference-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---- details panel sections ---------------------------------------------- */

.artifact-section-title {
  margin: 14px 0 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.artifact-section-title:first-child { margin-top: 0; }

/* ---- new marketing cards ------------------------------------------------- */

.feature-teal { --feature-accent: #0f7d78; --feature-glow: color-mix(in srgb, #0f7d78 12%, var(--surface)); }
.feature-indigo { --feature-accent: #4a5bc4; --feature-glow: color-mix(in srgb, #4a5bc4 12%, var(--surface)); }
.feature-slate { --feature-accent: #566079; --feature-glow: color-mix(in srgb, #566079 12%, var(--surface)); }

html[data-theme="dark"] .feature-teal { --feature-accent: #5fc9c2; }
html[data-theme="dark"] .feature-indigo { --feature-accent: #93a0ee; }
html[data-theme="dark"] .feature-slate { --feature-accent: #a3aec6; }

@media (prefers-reduced-motion: reduce) {
  .download-group .download-options-button svg,
  .field-empty-icon,
  .remove-files-button { transition: none; }
  .download-action-button.is-processing::after { animation: none; }
}

@media (max-width: 900px) {
  .download-options-menu {
    right: auto;
    left: 0;
    width: min(272px, calc(100vw - 48px));
  }
}

@media (max-width: 720px) {
  .cleaner-footer { flex-wrap: wrap; }
  .footer-actions { width: 100%; }
  .footer-actions .copy-button { flex: 1 1 auto; }
  .file-preview-panel { max-height: 220px; }
  .settings-tabs { padding: 12px 16px 0; }
  .download-options-menu { right: 0; left: auto; }
}
.clean-output,
.clean-output:disabled {
  background: var(--surface);
}

.download-options-menu {
  width: min(272px, calc(100vw - 48px));
}

@media (min-width: 901px) {
  .workspace > .editor-panel:first-child {
    grid-column: 1;
  }

  #syncScrollButton + .editor-panel {
    grid-column: 3;
  }

  .sync-scroll-button {
    position: absolute;
    z-index: 50;
    left: 50%;
    top: var(--sync-scroll-top, 50%);
    margin: 0;
    transform: translate(-50%, -50%);
  }
}


/* ===========================================================================
   Extension-parity polish · 2026-08-31
   Keep the web tool visually aligned with the current Clean Copy extension:
   warm Add File, soft-green Try Example, the quiet empty drop mark, and the
   status-bar tips guide.
   =========================================================================== */

.small-button.file-button {
  color: #80631e;
  border: 1px dashed #dfc77a;
  background: #fffaf0;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(129, 98, 28, .04);
}

.small-button.file-button:hover {
  color: #654b10;
  border-color: #cba94d;
  background: #fff3cf;
}

.small-button.try-example-button {
  color: #357358;
  border-color: #cce2d5;
  background: #f2faf5;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(42, 111, 76, .06);
}

.small-button.try-example-button:hover {
  color: #286348;
  border-color: #afd4bd;
  background: #e9f6ee;
}

.field-empty-state.has-meta .drop-empty-icon {
  display: none;
}

.tips-button {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px dashed color-mix(in srgb, var(--muted-2) 48%, transparent);
  border-radius: 50%;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  background: transparent;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  opacity: .78;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease, opacity .14s ease;
}

.tips-button:hover,
.tips-button[aria-expanded="true"] {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--muted) 52%, transparent);
  background: color-mix(in srgb, var(--surface) 70%, var(--surface-soft));
  opacity: 1;
}

.sync-scroll-tip {
  position: absolute;
  z-index: 35;
  top: calc(100% + 8px);
  left: 50%;
  width: 128px;
  padding: 7px 9px;
  border-radius: 8px;
  color: #fff;
  background: #2e3b55;
  box-shadow: 0 5px 13px rgba(28, 39, 61, .2);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
  opacity: 0;
  text-align: center;
  pointer-events: none;
  transform: translate(-50%, -4px);
  visibility: hidden;
  white-space: normal;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.sync-scroll-tip.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
  transition-delay: 0s;
}

.sync-scroll-tip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border: 4px solid transparent;
  border-bottom-color: #2e3b55;
  transform: translateX(-50%);
}

.sync-scroll-tip[hidden] {
  display: none;
}

.drop-tip {
  top: calc(50% + 31px);
  width: 134px;
}

html[data-theme="dark"] .small-button.file-button {
  color: #e3c66b;
  border-color: #756431;
  background: rgba(207, 167, 42, .10);
}

html[data-theme="dark"] .small-button.file-button:hover {
  color: #ffe298;
  border-color: #9a813d;
  background: #3a321f;
}

html[data-theme="dark"] .small-button.try-example-button {
  color: #9ed4b6;
  border-color: #365f49;
  background: rgba(49, 132, 88, .14);
}

html[data-theme="dark"] .small-button.try-example-button:hover {
  color: #bce9cf;
  border-color: #4b7c61;
  background: rgba(58, 151, 102, .22);
}

html[data-theme="dark"] .tips-button {
  color: #969696;
  border-color: #4a4a4a;
  background: transparent;
}

html[data-theme="dark"] .tips-button:hover,
html[data-theme="dark"] .tips-button[aria-expanded="true"] {
  color: #b2b2b2;
  border-color: #666666;
  background: #242424;
}

html[data-theme="dark"] .sync-scroll-tip {
  color: #f3f3f3;
  background: #333333;
  box-shadow: 0 5px 12px rgba(0, 0, 0, .32);
}

html[data-theme="dark"] .sync-scroll-tip::after {
  border-bottom-color: #333333;
}

@media (prefers-reduced-motion: reduce) {
  .sync-scroll-tip,
  .tips-button,
  .small-button.file-button,
  .small-button.try-example-button {
    transition: none;
  }
}

/* Neutral dark controls and readable accents on the black canvas. */
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--muted-2); opacity: 1; }
html[data-theme="dark"] .toggle-track { background: #484848; }
html[data-theme="dark"] .compact-toggle input:checked + .toggle-track,
html[data-theme="dark"] .preference-toggle input:checked + .toggle-track { background: var(--blue); }
html[data-theme="dark"] .compact-toggle input:checked + .toggle-track .toggle-thumb,
html[data-theme="dark"] .preference-toggle input:checked + .toggle-track .toggle-thumb { background: var(--on-accent); }
html[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, .68); }
html[data-theme="dark"] .feature-violet { --feature-accent: #b49bff; --feature-glow: color-mix(in srgb, var(--feature-accent) 10%, var(--surface)); }
html[data-theme="dark"] .feature-cyan { --feature-accent: #6bc9e4; --feature-glow: color-mix(in srgb, var(--feature-accent) 10%, var(--surface)); }
html[data-theme="dark"] .feature-rose { --feature-accent: #ed98b8; --feature-glow: color-mix(in srgb, var(--feature-accent) 10%, var(--surface)); }
html[data-theme="dark"] .use-case-grid article:nth-child(4) .use-icon { color: #b49bff; }
html[data-theme="dark"] .use-case-grid article:nth-child(5) .use-icon { color: #6bc9e4; }
html[data-theme="dark"] .use-case-grid article:nth-child(6) .use-icon { color: #ed98b8; }