:root, [data-bs-theme="light"] {
    --cbt-bad: #cf222e; --cbt-bad-bg: rgba(207, 34, 46, .08); --cbt-bad-line: rgba(207, 34, 46, .35);
    --cbt-fibre: #0969da; --cbt-conn: #8250df; --cbt-splice: #bf8700; --cbt-other: #6e7781; --cbt-extra: #bc4c00;
}
@media screen {
    [data-bs-theme="dark"] {
        --cbt-bad: #f85149; --cbt-bad-bg: rgba(248, 81, 73, .1); --cbt-bad-line: rgba(248, 81, 73, .42);
        --cbt-fibre: #58a6ff; --cbt-conn: #bc8cff; --cbt-splice: #d29922; --cbt-other: #8b949e; --cbt-extra: #f0883e;
    }
}

.cb-tools h1 { margin-bottom: 0; }
.section.cb-tools { padding-top: clamp(24px, 16px + 1.4vw, 44px); }
.cb-tools [dir="ltr"] .back-link .bi-arrow-left { transform: none; }
.cb-tools-h { margin: 48px 0 18px; font-size: var(--fs-h3); line-height: 1.3; color: var(--cb-ink); }

.cb-tools-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 768px) { .cb-tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) {
    .cb-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cb-tools-grid.is-more { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.cb-tools .cb-tile { position: relative; display: flex; flex-direction: column; height: auto; }
.cb-tools .cb-tile:hover { border-color: var(--cb-accent-line); }
.cb-tile-title { font-size: var(--fs-h3); line-height: 1.35; margin: 0 0 .5rem; text-wrap: balance; }
.cb-tile-title a { color: var(--cb-ink); }
.cb-tile-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.cb-tile-title a:hover { color: var(--cb-accent-text); }
.cb-tile-title a:focus-visible { outline: none; }
.cb-tile:has(.cb-tile-title a:focus-visible) { outline: 2px solid var(--cb-accent); outline-offset: 2px; }
.cb-tools .cb-tile p { font-size: .95rem; }
.cb-tools-grid.is-compact .cb-tile { flex-direction: row; align-items: center; gap: 14px; padding: 16px 18px; }
.cb-tools-grid.is-compact .cb-ico { margin: 0; width: 38px; height: 38px; font-size: 1.15rem; }
.cb-tools-grid.is-compact .cb-tile-title { margin: 0; font-size: 1rem; }

.cb-tool-h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); margin: 0; text-wrap: balance; }
.cb-tool { margin-top: 32px; }
.cb-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 992px) {
    .cb-tool-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; }
    .cb-tool-out { position: sticky; top: 88px; }
}
.cb-tool-stack { display: grid; gap: 28px; }

.cb-tools fieldset {
    min-width: 0; margin: 0 0 28px; padding: 14px 20px 6px;
    border: 1px solid var(--cb-line); border-radius: var(--r-md); background: var(--cb-surface); box-shadow: var(--cb-shadow);
}
.cb-tool-stack fieldset { margin: 0; }
.cb-tools legend, .cb-tools .cb-res-card > .cb-res-h {
    float: none; width: auto; margin: 0; padding: .25rem .8rem; border-radius: var(--r-full);
    font-size: .72rem; font-weight: 700; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
    color: var(--cb-on-fill); background: var(--cb-accent-fill); box-shadow: 0 0 0 4px var(--cb-bg);
}
@media (max-width: 575.98px) { .cb-tools legend { max-width: 100%; white-space: normal; } }
.cb-tools .cb-res-card { position: relative; margin-top: .79rem; }
.cb-tools .cb-res-card > .cb-res-h { position: absolute; top: 0; inset-inline-start: 20px; transform: translateY(-50%); }
.cb-fs-hint { margin: 0 0 12px; }

.cb-tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (min-width: 576px) { .cb-tf-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 379.98px) { .cb-tf-grid, .cb-tf-grid.is-3 { grid-template-columns: minmax(0, 1fr); } }
.cb-tf { min-width: 0; margin-bottom: 14px; }
.cb-tf > label { display: block; font-size: .85rem; line-height: 1.35; color: var(--cb-muted); margin-bottom: 5px; }
.cb-tf-in { position: relative; }
.cb-tools .cb-input { min-height: 44px; font-variant-numeric: tabular-nums; }
.cb-tf-in .cb-input { padding-inline-end: 3.9rem; }
.cb-tf-in.is-select .cb-input { padding-inline-end: 2.2rem; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
.cb-tf-in:not(:has(.cb-tf-unit)):not(.is-select) .cb-input { padding-inline-end: .75rem; }
.cb-tf-unit, .cb-tf-in.is-select::after {
    position: absolute; top: 50%; inset-inline-end: .75rem; transform: translateY(-50%);
    color: var(--cb-muted); font-size: .85rem; pointer-events: none;
}
.cb-tf-in.is-select::after { content: "\F282"; font-family: "bootstrap-icons"; font-size: .8rem; }
.cb-tf-hint { display: block; margin-top: 5px; font-size: .8rem; line-height: 1.45; color: var(--cb-muted); }
.cb-tf-area { min-height: 7.5rem; resize: vertical; font-family: var(--cb-mono); font-size: .95rem; line-height: 1.5; }
.cb-tools input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.cb-tools input[type="number"]::-webkit-inner-spin-button, .cb-tools input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.cb-tools .cb-res-card { height: auto; }
.cb-res-h { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--cb-muted); }
.cb-res-h.is-sub { margin-top: 22px; }
.cb-res { margin: 0; }
.cb-res > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; padding: 7px 0; border-bottom: 1px solid var(--cb-line-soft); }
.cb-res > div:last-child { border-bottom: 0; }
.cb-res dt { font-weight: 400; color: var(--cb-body); font-size: .93rem; }
.cb-res dd { margin: 0; margin-inline-start: auto; color: var(--cb-ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.cb-res dd .u { margin-inline-start: .3em; color: var(--cb-muted); font-weight: 400; font-size: .85em; }
.cb-res .is-key dd { font-size: 1.3rem; line-height: 1.3; }
.cb-res .is-sum { border-top: 1px solid var(--cb-line); }
.cb-res-sub { color: var(--cb-muted); font-size: .85em; }
.cb-res.is-text { margin-top: 6px; }
.cb-res.is-text > div { display: block; }
.cb-res.is-text dd { margin-top: 2px; text-align: start; font-weight: 400; color: var(--cb-ink); font-size: .95rem; }
.cb-res-note { margin: 12px 0 0; font-size: .82rem; line-height: 1.5; color: var(--cb-muted); }
.cb-tool-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; align-items: start; }
@media (min-width: 768px) { .cb-tool-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cb-tool-pair .cb-res { padding-bottom: 12px; }

[data-o][data-state="pass"], [data-o][data-state="no"] { color: var(--cb-accent-text); }
[data-o][data-state="fail"], [data-o][data-state="yes"], [data-o][data-state="bad"] { color: var(--cbt-bad); }
[data-o][data-state="short"], [data-o][data-state="wp"] { color: var(--cb-warn); }
.cb-verdict {
    display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 16px; padding: 12px 14px;
    border: 1px solid var(--cb-line-soft); border-radius: var(--r-sm); background: var(--cb-surface-2);
    color: var(--cb-body); font-size: .95rem; line-height: 1.5;
}
.cb-verdict .bi { display: none; flex: 0 0 auto; line-height: 1.5; }
.cb-verdict [data-o] { color: inherit; }
.cb-verdict[data-state="ok"] { color: var(--cb-accent-text); background: var(--cb-accent-bg); border-color: var(--cb-accent-line); }
.cb-verdict:is([data-state="cond"], [data-state="weak"], [data-state="tight"], [data-state="under"]) { color: var(--cb-warn); background: var(--cb-warn-bg); border-color: var(--cb-warn-line); }
.cb-verdict[data-state="fail"] { color: var(--cbt-bad); background: var(--cbt-bad-bg); border-color: var(--cbt-bad-line); }
.cb-verdict[data-state="ok"] .is-ok,
.cb-verdict:is([data-state="cond"], [data-state="weak"], [data-state="tight"], [data-state="under"]) .is-warn,
.cb-verdict[data-state="fail"] .is-bad { display: inline-block; }

.cb-bar { position: relative; display: flex; height: 14px; margin: 0 0 8px; border-radius: 7px; overflow: hidden; background: var(--cb-surface-2); box-shadow: inset 0 0 0 1px var(--cb-line-soft); }
.cb-bar > span { flex: 0 0 auto; width: 0; background: var(--c); transition: width var(--dur-2, .2s) ease; }
.cb-bar > .cb-bar-over {
    position: absolute; inset-block: 0; inset-inline-start: var(--b, 100%); inset-inline-end: 0; width: auto;
    background: repeating-linear-gradient(135deg, var(--cbt-bad) 0 3px, transparent 3px 7px); opacity: .7;
    box-shadow: inset 2px 0 0 var(--cbt-bad);
}
[dir="rtl"] .cb-bar > .cb-bar-over { box-shadow: inset -2px 0 0 var(--cbt-bad); }
[data-seg="fibre"], [data-k="fibre"] { --c: var(--cbt-fibre); }
[data-seg="conn"], [data-k="conn"] { --c: var(--cbt-conn); }
[data-seg="splice"], [data-k="splice"] { --c: var(--cbt-splice); }
[data-seg="other"], [data-k="other"] { --c: var(--cbt-other); }
[data-seg="extra"], [data-k="extra"] { --c: var(--cbt-extra); }
[data-seg="margin"], [data-k="margin"] { --c: var(--cb-accent); }
.cb-bar-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; padding: 0; list-style: none; font-size: .78rem; color: var(--cb-muted); }
.cb-bar-key i { display: inline-block; width: 10px; height: 10px; margin-inline-end: .35rem; border-radius: 3px; background: var(--c); vertical-align: -1px; }
.cb-bar[hidden] + .cb-bar-key { display: none; }

.cb-res-table-wrap { overflow-x: auto; }
.cb-res-table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.cb-res-table th, .cb-res-table td { padding: 7px 8px; border-bottom: 1px solid var(--cb-line-soft); text-align: end; vertical-align: top; }
.cb-res-table th:first-child { padding-inline-start: 0; text-align: start; font-weight: 400; color: var(--cb-body); }
.cb-res-table td:last-child, .cb-res-table thead th:last-child { padding-inline-end: 0; }
.cb-res-table thead th { font-size: .8rem; font-weight: 600; color: var(--cb-muted); white-space: nowrap; }
.cb-res-table td { color: var(--cb-ink); font-weight: 600; }
.cb-res-table .is-key td { font-size: 1.15rem; }
.cb-res-table .is-key th, .cb-res-table .is-key td { border-top: 1px solid var(--cb-line); }
.cb-res-table .is-res td { font-weight: 400; font-size: .85rem; line-height: 1.4; }
.cb-res-table tbody tr:last-child > * { border-bottom: 0; }

.cb-chan-wrap { max-height: 560px; overflow: auto; border: 1px solid var(--cb-line); border-radius: var(--r-md); background: var(--cb-surface); }
.cb-chan th, .cb-chan td { padding: 6px 12px; text-align: start; white-space: nowrap; }
.cb-chan th:first-child { padding-inline-start: 14px; font-weight: 600; color: var(--cb-ink); }
.cb-chan td { font-weight: 400; color: var(--cb-body); }
.cb-chan td:last-child { white-space: normal; }
.cb-chan thead th { position: sticky; top: 0; z-index: 1; padding-block: 9px; background: var(--cb-surface-2); border-bottom: 1px solid var(--cb-line); }
.cb-chan .is-half { color: var(--cb-muted); }
.cb-chan thead th:nth-child(4) { border-inline-start: 1px solid var(--cb-line-soft); }
.cb-chan td.is-half:nth-child(4) { border-inline-start: 1px solid var(--cb-line-soft); }
.cb-chan tr.is-wp > td:last-child { color: var(--cb-warn); }
.cb-chan .is-hit, .cb-chan .is-hit > * { color: var(--cb-accent-text); background: var(--cb-accent-bg); font-weight: 600; }

.cb-tool-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cb-tool-act .btn-cb-ghost { min-height: 40px; padding: .5rem .95rem; font-size: .8rem; }
.cb-tool:not(.is-live) .cb-tool-act { display: none; }

.cb-tool-text { max-width: 820px; margin-top: 56px; color: var(--cb-body); font-size: 1.02rem; line-height: var(--lh-body); overflow-wrap: anywhere; }
.cb-tool-text > :first-child { margin-top: 0; }
.cb-tool-text h2 { margin: 2.2rem 0 .8rem; font-size: 1.45rem; line-height: 1.3; color: var(--cb-ink); }
.cb-tool-text h3 { margin: 1.6rem 0 .6rem; font-size: 1.15rem; color: var(--cb-ink); }
.cb-tool-text p, .cb-tool-text ul, .cb-tool-text ol, .cb-tool-text pre, .cb-tool-text blockquote, .cb-tool-text .doc-table-wrap { margin: 0 0 1rem; }
.cb-tool-text ul, .cb-tool-text ol { padding-inline-start: 1.4rem; }
.cb-tool-text a { color: var(--cb-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.cb-tool-text strong { color: var(--cb-ink); }
.cb-tool-text code { font-family: var(--cb-mono); font-size: .9em; padding: .1em .35em; border-radius: var(--r-xs); background: var(--cb-surface-2); border: 1px solid var(--cb-line-soft); }
.cb-tool-text pre { padding: 12px 14px; border-radius: var(--r-sm); background: var(--cb-surface-2); border: 1px solid var(--cb-line-soft); overflow-x: auto; }
.cb-tool-text pre code { padding: 0; border: 0; background: none; }
.cb-tool-text .doc-table-wrap { overflow-x: auto; border: 1px solid var(--cb-line); border-radius: var(--r-sm); }
.cb-tool-text .doc-table { width: 100%; border-collapse: collapse; font-size: .92rem; line-height: 1.5; }
.cb-tool-text .doc-table th, .cb-tool-text .doc-table td { padding: 8px 12px; border-bottom: 1px solid var(--cb-line-soft); text-align: start; vertical-align: top; }
.cb-tool-text .doc-table thead th { background: var(--cb-surface-2); color: var(--cb-ink); font-weight: 600; }
.cb-tool-text .doc-table tbody tr:last-child > * { border-bottom: 0; }

.cb-tools-rel { margin-top: 24px; }

:root, [data-bs-theme="light"] { --cbt-s1: #2a78d6; --cbt-s2: #eb6834; --cbt-band: rgba(31, 35, 40, .05); }
@media screen { [data-bs-theme="dark"] { --cbt-s1: #3987e5; --cbt-s2: #d95926; --cbt-band: rgba(240, 246, 252, .05); } }
.cb-spec { margin: 0 0 20px; padding: 18px 20px 14px; border: 1px solid var(--cb-line); border-radius: var(--r-md); background: var(--cb-surface); box-shadow: var(--cb-shadow); }
.cb-spec-key { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 10px; padding: 0; list-style: none; font-size: .85rem; color: var(--cb-body); }
.cb-spec-key i { display: inline-block; width: 18px; height: 2px; margin-inline-end: .45rem; vertical-align: middle; border-radius: 1px; }
.cb-spec-key i.is-s1 { background: var(--cbt-s1); }
.cb-spec-key i.is-s2 { background: var(--cbt-s2); }
.cb-spec-key i.is-band { width: 12px; height: 12px; background: var(--cbt-band); box-shadow: inset 0 0 0 1px var(--cb-line); }
.cb-spec-plot { position: relative; overflow-x: auto; outline-offset: 4px; border-radius: var(--r-xs); }
.cb-spec-plot:focus-visible { outline: 2px solid var(--cb-accent); }
.cb-spec-svg { display: block; width: 100%; min-width: 760px; height: auto; touch-action: pan-x pan-y; }
.cb-spec-band { fill: var(--cbt-band); }
.cb-spec-grid { stroke: var(--cb-line-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb-spec-axis { stroke: var(--cb-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb-spec-xl, .cb-spec-yl { fill: var(--cb-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cb-spec-note { fill: var(--cb-body); font-size: 13px; }
.cb-spec-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.cb-spec-line.is-s1 { stroke: var(--cbt-s1); }
.cb-spec-line.is-s2 { stroke: var(--cbt-s2); }
.cb-spec-dot, .cb-spec-hit { stroke: var(--cb-surface); stroke-width: 2; vector-effect: non-scaling-stroke; }
.cb-spec-dot.is-s2, .cb-spec-hit.is-s2 { fill: var(--cbt-s2); }
.cb-spec-hit.is-s1 { fill: var(--cbt-s1); }
.cb-spec-cross { stroke: var(--cb-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cb-spec-tip {
    position: absolute; z-index: 2; min-width: 11rem; padding: 8px 10px; pointer-events: none;
    border: 1px solid var(--cb-line); border-radius: var(--r-sm); background: var(--cb-raised); box-shadow: var(--e3);
    font-size: .82rem; line-height: 1.5; color: var(--cb-body); white-space: nowrap;
}
.cb-spec-tip-h { margin-bottom: 4px; color: var(--cb-muted); }
.cb-spec-tip div:not(.cb-spec-tip-h) { display: flex; align-items: center; gap: .45rem; }
.cb-spec-tip i { flex: 0 0 auto; width: 12px; height: 2px; border-radius: 1px; }
.cb-spec-tip i.is-s1 { background: var(--cbt-s1); }
.cb-spec-tip i.is-s2 { background: var(--cbt-s2); }
.cb-spec-tip b { color: var(--cb-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.cb-spec-table { max-height: 420px; }
.cb-spec-table td { font-variant-numeric: tabular-nums; }
.cb-spec-table tr.is-peak > * { font-weight: 700; color: var(--cb-ink); }
.cb-spec-table tr.in-wp > td:nth-child(2) { color: var(--cb-warn); }