.compare-view { min-width: 0; --font-mono: var(--mono); --font-sans: var(--sans); }
.compare-view .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.markdown-viewer.is-comparison-reader .markdown-context-bar .markdown-return { display: inline-flex; }
.compare-context { display: flex; align-items: center; gap: 14px; padding: 15px 40px; border-bottom: 1px solid rgb(var(--ink-rgb) / 10%); }
.compare-context button, .compare-legend button, .compare-notice button, .compare-footer > div button { border: 0; padding: 0; color: var(--accent-text); background: transparent; font-size: 12px; font-weight: 700; cursor: pointer; }
.compare-context button { flex-shrink: 0; }
.compare-context code { padding-left: 14px; border-left: 1px solid rgb(var(--ink-rgb) / 15%); overflow-wrap: anywhere; font-size: 12px; }
.compare-context > span { font: 11px/16px var(--font-mono); color: var(--ink-muted); }
.compare-page { padding: 26px 40px 60px; }
.compare-column { display: flex; flex-direction: column; gap: 22px; max-width: 860px; margin: 0 auto; }
.compare-lead { max-width: 640px; }
.compare-lead h1 { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 22px; letter-spacing: 0; }
.compare-lead p { margin: 0; color: var(--ink-secondary); font-size: 15px; line-height: 21px; }
.compare-card { min-width: 0; border: 1px solid var(--card-border); border-radius: 8px; background: var(--paper-card); }
.compare-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 10px 14px; border-bottom: 1px solid rgb(var(--ink-rgb) / 8%); border-radius: 8px 8px 0 0; background: var(--paper-bg); position: sticky; top: 0; z-index: 2; font: 11px/16px var(--font-mono); }
.compare-legend > span { display: flex; align-items: center; gap: 7px; }
.compare-navigation { margin-left: auto; }
.compare-navigation button { border: 1px solid rgb(var(--ink-rgb) / 25%); border-radius: 4px; width: 24px; height: 24px; color: var(--ink); background: var(--paper-card); }
.compare-diff { overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 0; scrollbar-width: thin; font: 12.5px/20px var(--font-mono); }
.compare-line { display: flex; align-items: flex-start; min-height: 20px; padding: 0 12px; }
.compare-line.is-current { color: var(--ink-secondary); background: var(--diff-removed-bg); }
.compare-line.is-saved { background: var(--diff-added-bg); }
.compare-line.is-later { border-left: 2px solid var(--diff-later-bar); padding-left: 10px; }
.compare-sign { width: 22px; flex-shrink: 0; white-space: pre; color: var(--ink-secondary); user-select: none; }
.compare-line-number { width: 42px; padding-right: 10px; text-align: right; flex-shrink: 0; color: var(--ink-muted); user-select: none; }
.compare-line-text { white-space: pre; tab-size: 4; min-width: 0; }
.compare-diff.is-numbered .compare-line { min-width: max-content; }
.compare-diff.is-wrapped .compare-line-text { white-space: pre-wrap; overflow-wrap: anywhere; flex: 1; }
.compare-line mark { background: var(--diff-added-mark); color: inherit; }
.compare-line.is-current mark { background: var(--diff-removed-mark); }
.compare-eol { color: var(--ink-secondary); font-size: 11px; margin-left: 8px; }
.compare-fold { display: flex; gap: 10px; align-items: center; padding: 4px 34px; background: var(--paper-bg); border-block: 1px solid rgb(var(--ink-rgb) / 6%); color: var(--ink-muted); font-size: 11px; }
.compare-fold button { border: 0; padding: 0; background: none; color: var(--accent-text); font-family: var(--font-sans); font-weight: 700; cursor: pointer; }
.compare-notice { padding: 18px 22px; border-bottom: 1px solid rgb(var(--ink-rgb) / 8%); font-size: 13px; line-height: 20px; }
.compare-notice p { margin: 0 0 10px; }
.compare-notice > div, .compare-footer > div { display: flex; flex-wrap: wrap; gap: 16px; }
.compare-footer { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding: 14px 22px; border-top: 1px solid rgb(var(--ink-rgb) / 8%); }
.compare-footer p { margin: 0; flex: 1; min-width: 220px; color: var(--ink-secondary); font-size: 13px; line-height: 18px; }
.compare-choice { display: flex; flex-shrink: 0; padding: 0; margin: 0; border: 1px solid rgb(var(--ink-rgb) / 15%); border-radius: 4px; overflow: hidden; }
.compare-choice label { position: relative; display: flex; }
.compare-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.compare-choice span { padding: 5px 12px; font-size: 12px; line-height: 16px; cursor: pointer; color: var(--ink-secondary); }
.compare-choice input:checked + span { color: var(--on-accent); background: var(--accent-deep); font-weight: 700; }
.compare-choice input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: -3px; }
.compare-choice input:disabled + span { opacity: .5; cursor: not-allowed; }
.compare-confirm { border: 0; border-radius: 4px; padding: 7px 13px; background: var(--hot); color: var(--on-hot); font-size: 12.5px; line-height: 16px; font-weight: 700; cursor: pointer; }
.compare-confirm:hover:not(:disabled) { background: var(--compare-hot-hover); }
.compare-confirm:disabled { opacity: .45; cursor: not-allowed; }
.compare-view button:focus-visible, .compare-diff:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; }
.compare-footer.is-busy::before { content: ""; position: absolute; top: 0; left: 0; width: 25%; height: 3px; background: var(--accent-deep); animation: compare-sweep 1.5s ease-in-out infinite alternate; }
@keyframes compare-sweep { to { left: 75%; } }
@media (prefers-reduced-motion: reduce) { .compare-footer.is-busy::before { animation: none; width: 100%; opacity: .4; } }
@media (max-width: 1024px) { .compare-page { padding-inline: 24px; } .compare-context { padding-inline: 24px; flex-wrap: wrap; } .compare-footer p { flex-basis: 100%; } }
@media (max-width: 600px) {
  .compare-page { padding: 22px 12px 40px; }
  .compare-context { padding: 14px 16px; gap: 8px; }
  .compare-context > span { flex-basis: 100%; }
  .compare-context code { flex: 1; }
  .compare-lead { padding-inline: 4px; }
  .compare-legend { gap: 8px; }
  .compare-legend > span { flex-basis: 100%; }
  .compare-navigation { margin-left: 0; }
  .compare-footer { padding: 14px; justify-content: flex-end; }
  .compare-footer p { min-width: 0; }
  .compare-choice { flex-basis: 100%; }
  .compare-choice label { flex: 1; }
  .compare-choice span { width: 100%; text-align: center; }
  .compare-notice { padding: 14px; }
  .compare-fold { padding-inline: 12px; }
  .compare-eol { overflow-wrap: anywhere; }
}