/* Cosmos notes: [tool] interactives */
.cn-tool { margin: 1.8em 0; padding: 16px; border: 1px solid var(--panel-border); border-radius: var(--radius); background: var(--bg-2); }
.cn-tool-mount { display: flex; flex-direction: column; gap: 12px; }
.cn-t-svg { width: 100%; height: auto; display: block; user-select: none; -webkit-user-select: none; }
.cn-t-task { text-align: center; font-size: 1.1rem; font-weight: 600; }
.cn-t-note { text-align: center; font-size: .92rem; color: var(--muted, #a9b4d6); }
.cn-t-ctrls { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.cn-t-row { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
.cn-t-center { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.cn-t-lab { font-size: .85rem; color: var(--muted, #a9b4d6); min-width: 70px; }
.cn-t-btn { min-height: 32px; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); font: inherit; font-size: .9rem; cursor: pointer; }
.cn-t-btn:hover { border-color: var(--accent); }
.cn-t-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.cn-t-btn.cn-t-primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.cn-t-step { display: inline-flex; align-items: center; gap: 6px; }
.cn-t-step-name { font-size: .85rem; color: var(--muted, #a9b4d6); }
.cn-t-step .cn-t-btn { width: 32px; padding: 0; font-weight: 700; }
.cn-t-step output { min-width: 34px; text-align: center; font-weight: 700; }
.cn-t-seg { display: inline-flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--panel-border); }
.cn-t-seg .cn-t-btn { border: 0; border-radius: 0; }
.cn-t-seg .cn-t-btn + .cn-t-btn { border-left: 1px solid var(--panel-border); }
.cn-t-seg .cn-t-btn.is-on { background: color-mix(in srgb, var(--accent) 35%, var(--panel)); font-weight: 700; }
.cn-t-readout { text-align: center; font-size: .98rem; line-height: 1.6; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); }
.cn-t-status { text-align: center; font-weight: 600; min-height: 1.4em; }
.cn-t-status.is-ok { color: #6be3a0; }

/* svg pieces */
.cn-t-axis { stroke: var(--muted, #a9b4d6); stroke-width: 1.5; }
.cn-t-axis-head { fill: var(--muted, #a9b4d6); }
.cn-t-tick { stroke: var(--muted, #a9b4d6); stroke-width: 1.2; }
.cn-t-ticklab { fill: var(--muted, #a9b4d6); font-size: 13px; text-anchor: middle; font-family: inherit; }
.cn-t-ticklab.is-y { text-anchor: end; font-size: 11px; }
.cn-t-ticklab.is-end-x { text-anchor: end; }
.cn-t-ticklab.is-start-x { text-anchor: start; }
.cn-t-ticklab.is-end { fill: #6be3a0; font-weight: 700; }
.cn-t-ticklab.is-mean { fill: #5bb4ff; font-size: 11px; }
.cn-t-ticklab.is-med { fill: #6be3a0; font-size: 11px; }
.cn-t-medline.is-basic { stroke: #6be3a0; stroke-width: 2.5; }
.cn-t-grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.cn-t-band { stroke: #6be3a0; stroke-width: 6; stroke-linecap: butt; }
.cn-t-band-head { fill: #6be3a0; }
.cn-t-dot { fill: var(--bg-2, #0b1226); stroke: var(--accent); stroke-width: 3; }
.cn-t-dot.is-closed { fill: var(--accent); }
.cn-t-dot.is-end { fill: #6be3a0; stroke: #6be3a0; }
.cn-t-dot.is-out { fill: #ff6b81; stroke: #ff6b81; }
.cn-t-arc { fill: none; stroke-width: 2.5; }
.cn-t-arc.a { stroke: #5bb4ff; }
.cn-t-arrowhead.a { fill: #5bb4ff; }
.cn-t-arclab { font-size: 13px; text-anchor: middle; fill: #5bb4ff; font-weight: 600; }
.cn-t-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.cn-t-theory { stroke: #6be3a0; stroke-width: 1.5; stroke-dasharray: 6 5; }
.cn-t-theorylab { fill: #6be3a0; font-size: 12px; text-anchor: end; }

/* tree */
.cn-t-tree { max-height: 520px; }
.cn-t-branch { stroke: var(--muted, #a9b4d6); stroke-width: 1.5; }
.cn-t-blab { fill: #5bb4ff; font-size: 13px; text-anchor: middle; font-weight: 600; }
.cn-t-node { fill: var(--text); font-size: 15px; font-weight: 700; text-anchor: middle; }
.cn-t-leaf { cursor: pointer; }
.cn-t-leaf rect { fill: rgba(255,255,255,.05); stroke: var(--panel-border); }
.cn-t-leaf.is-sel rect { fill: color-mix(in srgb, var(--accent) 35%, transparent); stroke: var(--accent); }
.cn-t-leaf:focus-visible rect { stroke: var(--accent-2); stroke-width: 2; }
.cn-t-leaftext { fill: var(--text); font-size: 14px; font-family: inherit; }

/* venn */
.cn-t-venn { max-width: 520px; margin: 0 auto; cursor: pointer; }
.cn-t-vbox { fill: rgba(255,255,255,.02); stroke: var(--muted, #a9b4d6); stroke-width: 1.5; }
.cn-t-vcircle { fill: none; stroke-width: 2.5; }
.cn-t-vcircle.a { stroke: var(--accent); }
.cn-t-vcircle.b { stroke: #5bb4ff; }
.cn-t-vfill { fill: color-mix(in srgb, #6be3a0 40%, transparent); }
.cn-t-vname { fill: var(--text); font-size: 16px; font-weight: 700; text-anchor: middle; }
.cn-t-vnum { fill: var(--text); font-size: 20px; font-weight: 700; text-anchor: middle; pointer-events: none; }
.cn-t-2way td.is-sel { background: color-mix(in srgb, #6be3a0 30%, transparent); font-weight: 700; }
.cn-t-2way { margin: 0 auto; }

/* unit circle */
.cn-t-ucwrap { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center; }
.cn-t-uc { max-width: 360px; flex: 1 1 260px; }
.cn-t-ucside { flex: 0 1 220px; }
.cn-t-dl { display: grid; grid-template-columns: auto auto; gap: 6px 14px; margin: 0; }
.cn-t-dl dt { color: var(--muted, #a9b4d6); font-size: .9rem; }
.cn-t-dl dd { margin: 0; font-weight: 700; }
.cn-t-circle { fill: none; stroke: var(--muted, #a9b4d6); stroke-width: 1.5; }
.cn-t-radius { stroke: var(--accent); stroke-width: 2.5; }
.cn-t-sinline { stroke: #6be3a0; stroke-width: 2; stroke-dasharray: 5 4; }
.cn-t-cosline { stroke: #5bb4ff; stroke-width: 3; }
.cn-t-angarc { fill: none; stroke: var(--accent-2, #ffb46b); stroke-width: 2; }
.cn-t-relarc { fill: none; stroke: #ff6b81; stroke-width: 3; }
.cn-t-astc { fill: rgba(255,255,255,.18); font-size: 22px; font-weight: 700; text-anchor: middle; }
.cn-t-astc.is-on { fill: var(--accent); }
.cn-t-kline { stroke: #ffd36b; stroke-width: 1.5; stroke-dasharray: 6 4; }
.cn-t-kdot { fill: #ffd36b; }
.cn-t-plab { fill: var(--text); font-weight: 700; font-size: 15px; }
.cn-t-plab.is-left { text-anchor: end; }

/* pascal */
.cn-t-pascal { display: flex; flex-direction: column; align-items: center; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.cn-t-prow { display: flex; gap: 4px; align-items: center; position: relative; padding-left: 0; border-radius: 8px; }
.cn-t-prow.is-row { background: color-mix(in srgb, var(--accent) 25%, transparent); }
.cn-t-plabel { position: absolute; right: 100%; margin-right: 8px; font-size: .75rem; color: var(--muted, #a9b4d6); white-space: nowrap; }
.cn-t-pcell { min-width: 34px; height: 30px; padding: 0 4px; border-radius: 7px; border: 1px solid var(--panel-border); background: var(--panel); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.cn-t-pcell.is-pick { background: var(--accent); color: #fff; font-weight: 700; }
.cn-t-pcell.is-parent { background: rgba(91,180,255,.35); }
.cn-t-pcell.is-odd { background: color-mix(in srgb, #6be3a0 45%, var(--panel)); }

/* binomial + boxplot */
.cn-t-bar { fill: rgba(91,180,255,.55); }
.cn-t-bar.is-cum { fill: color-mix(in srgb, var(--accent) 55%, transparent); }
.cn-t-bar.is-sel { fill: var(--accent); }
.cn-t-sdband { fill: rgba(107,227,160,.10); }
.cn-t-meanline { stroke: #5bb4ff; stroke-width: 2; stroke-dasharray: 5 4; }
.cn-t-whisk { stroke: var(--text); stroke-width: 2; }
.cn-t-box { fill: rgba(91,180,255,.25); stroke: var(--text); stroke-width: 2; }
.cn-t-medline { stroke: var(--accent); stroke-width: 3; }
.cn-t-outmark { fill: #ff6b81; font-size: 20px; font-weight: 700; text-anchor: middle; }
@media (max-width: 560px) {
	.cn-tool { padding: 12px 10px; }
	.cn-t-readout { font-size: .9rem; }
	.cn-t-pcell { min-width: 24px; height: 26px; padding: 0 2px; font-size: .72rem; }
	.cn-t-prow { gap: 2px; }
	.cn-t-plabel { display: none; }
	.cn-t-pascal { align-items: safe center; }
}