.cce { display: grid; gap: 32px; }
.cce-h { margin: 0 0 6px; font: 700 1.25rem/1.25 var(--f-display); color: var(--ink); letter-spacing: -0.01em; }
.cce-h3 { margin: 8px 0 0; font: 700 1.0625rem/1.3 var(--f-display); color: var(--ink); }
.cce-help { margin: 0 0 12px; font-size: 0.95rem; color: var(--ink-soft); max-width: 75ch; }
.cce-form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; }
.cce-hint { font: 400 0.8125rem/1.4 var(--f-body); color: var(--ink-soft); letter-spacing: 0; }
.cce .tool-actions { margin-top: 12px; }
.cce-sum { margin: 0; font: 700 1.25rem/1.3 var(--f-display); color: var(--ink); }
.cce-out { display: grid; gap: 16px; }
.cce-out > * { margin-block: 0; }
.cce-note { font: 400 0.8125rem/1.5 var(--f-body); color: var(--ink-soft); }
.cce-bands { display: grid; gap: 14px; }
.cce-row { display: grid; gap: 4px; }
.cce-rowname { margin: 0; font: 400 0.8125rem var(--f-mono); color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.cce-track { display: flex; height: 28px; width: 100%; }
.cce-seg { flex: 0 1 auto; min-width: 3px; height: 100%; }
.cce-seg.is-all, .cce-dot.is-all { background: var(--ink-soft); }
.cce-seg.is-clear, .cce-dot.is-clear { background: var(--rule); }
.cce-seg.is-esc, .cce-dot.is-esc { background: var(--teal); }
.cce-seg.is-flag, .cce-dot.is-flag { background: var(--ochre); }
.cce-seg.is-gap { background: transparent; min-width: 0; }
.cce-key { margin: 0; font: 400 0.875rem/1.6 var(--f-body); color: var(--ink); }
.cce-dot { display: inline-block; width: 10px; height: 10px; margin: 0 6px 0 0; border-radius: 2px; vertical-align: baseline; }
.cce-key .cce-dot:not(:first-child), .cce-key .cce-mark { margin-left: 12px; }
.cce-dot.is-you { background: var(--ochre); border-radius: 50%; }
.cce-mark { display: inline-block; width: 18px; height: 0; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--ink); }
.cce-mark.is-line { border-top-color: var(--teal); }
.cce-mark.is-base { border-top-color: var(--ink); }
.cce-mark.is-be { border-top: 2px dashed var(--ink-soft); }
.cce .tool-result svg.cce-chart { max-width: 560px; }
.cce-axis { stroke: var(--rule); stroke-width: 1; }
.cce-base { stroke: var(--ink); stroke-width: 1.5; }
.cce-line { stroke: var(--teal); stroke-width: 2.5; }
.cce-be { stroke: var(--ink-soft); stroke-width: 1.5; stroke-dasharray: 4 4; }
.cce-you { fill: var(--ochre); stroke: var(--paper-light); stroke-width: 2; }
.cce-tick { font: 400 12px var(--f-mono); fill: var(--ink-soft); }
.cce-tablewrap { overflow-x: auto; }
.cce .tool-result tbody th { font: 400 0.95rem var(--f-body); color: var(--ink); }
.cce .tool-result tr.cce-all th, .cce .tool-result tr.cce-all td { font-weight: 700; border-top: 1px solid var(--ink); }
.cce-quote { margin: 8px 0 0; padding: 0 0 0 14px; border-left: 3px solid var(--teal); font-style: italic; color: var(--ink); }
.cce-quote cite { display: block; margin-top: 2px; font: 400 0.8125rem var(--f-mono); font-style: normal; color: var(--ink-soft); }