/* 8.ro */
.tool {
  --del-bg: #fdeeee; --del-mark: #f6c4c4; --del-ink: #a8231c;
  --ins-bg: #e9f6ed; --ins-mark: #b9e5c5; --ins-ink: #11632f;
  --tk-k: #9a3412; --tk-s: #116329; --tk-c: #6b645f; --tk-n: #1d4ed8; --tk-f: #7c3aed; --tk-p: #0e7490; --tk-o: #57534e;
}
:root[data-theme="dark"] .tool {
  --del-bg: rgb(248 81 73 / .12); --del-mark: rgb(248 81 73 / .36); --del-ink: #ff9b93;
  --ins-bg: rgb(46 160 67 / .14); --ins-mark: rgb(46 160 67 / .4); --ins-ink: #6fdd8b;
  --tk-k: #fb923c; --tk-s: #86efac; --tk-c: #9d9690; --tk-n: #93c5fd; --tk-f: #c4b5fd; --tk-p: #67e8f9; --tk-o: #b4ada7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tool {
    --del-bg: rgb(248 81 73 / .12); --del-mark: rgb(248 81 73 / .36); --del-ink: #ff9b93;
    --ins-bg: rgb(46 160 67 / .14); --ins-mark: rgb(46 160 67 / .4); --ins-ink: #6fdd8b;
    --tk-k: #fb923c; --tk-s: #86efac; --tk-c: #9d9690; --tk-n: #93c5fd; --tk-f: #c4b5fd; --tk-p: #67e8f9; --tk-o: #b4ada7;
  }
}
.ws-pair { display: grid; gap: 16px; }
.ws-pair .field-text { min-height: 220px; }
@media (min-width: 960px) { .ws-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ws-pair .field-text { min-height: 280px; } }
.dc-box { max-height: 75vh; overflow: auto; }
.dc-box:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dc { width: 100%; border-collapse: collapse; font: .8125rem/1.6 var(--mono); }
.dc-split { table-layout: fixed; min-width: 760px; }
.dc-split col, .dc-split .dc-n { width: 3.5rem; }
.dc td { padding: 0 10px; vertical-align: top; }
.dc-n { width: 3.5rem; text-align: right; color: var(--faint); user-select: none; white-space: nowrap; }
.dc-unified .dc-n { width: 3rem; }
.dc-s { width: 1.25rem; text-align: center; user-select: none; font-weight: 700; }
.dc-c { white-space: pre-wrap; overflow-wrap: anywhere; }
.dc-split td.dc-c { border-right: 1px solid var(--line); }
.dc-del, .dc-del td, td.dc-del { background: var(--del-bg); }
.dc-ins, .dc-ins td, td.dc-ins { background: var(--ins-bg); }
.dc-del .dc-s { color: var(--del-ink); }
.dc-ins .dc-s { color: var(--ins-ink); }
.dc-del mark, td.dc-del mark { background: var(--del-mark); color: inherit; border-radius: 3px; }
.dc-ins mark, td.dc-ins mark { background: var(--ins-mark); color: inherit; border-radius: 3px; }
.dc-skip td { padding: 4px 16px; background: var(--surface-2); color: var(--faint); font-family: var(--font); font-size: .75rem; }
.tk-k { color: var(--tk-k); font-weight: 600; }
.tk-s { color: var(--tk-s); }
.tk-c { color: var(--tk-c); font-style: italic; }
.tk-n { color: var(--tk-n); }
.tk-f { color: var(--tk-f); }
.tk-p { color: var(--tk-p); }
.tk-o { color: var(--tk-o); }