/* AI kit: boundary board, neuron steppers, descent plot, next-word widgets */
.ai-vis { color: var(--ink); max-width: 100%; height: auto; }
.step-vis > .vis.ai-scatter, .fb-vis .vis.ai-scatter { width: min(100%, 320px); max-height: none; }
.step-vis > .vis.ai-ndiag { width: min(100%, 300px); }
.step-vis > .vis.ai-barsv, .opt .vis.ai-barsv { width: min(100%, 340px); }
.opt .vis.ai-barsv { max-height: 140px; }
.step-vis > .vis.ai-corp { width: min(100%, 460px); max-height: none; }
.step-vis > .vis.ai-cnt { width: min(100%, 460px); max-height: none; }
.step-vis > .vis.ai-vecs { width: min(100%, 300px); }
.step-vis > .vis.ai-fitv { width: min(100%, 360px); }
.step-vis > .vis.ai-lossc, .step-vis > .vis.ai-bowl { width: min(100%, 340px); max-height: none; }

/* shared svg classes */
.ai-plot { fill: var(--surface); stroke: var(--line); }
.ai-gl { stroke: var(--line); stroke-width: 1; }
.ai-gl.ax { stroke: var(--ink-3); stroke-width: 1.4; }
.ai-ax, .ai-t { fill: var(--ink-2); font-size: 14px; font-weight: 600; }
.ai-t.b { fill: var(--ink); font-weight: 750; }
.ai-t.s { font-size: 12px; fill: var(--ink-3); }
.ai-pt.c0 { fill: var(--leaf); stroke: var(--surface); stroke-width: 1.5; }
.ai-pt.c1 { fill: var(--sun); stroke: var(--surface); stroke-width: 1.5; }
.ai-q { fill: var(--berry); stroke: var(--surface); stroke-width: 1.5; }
.ai-line { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.ai-mg { stroke: var(--ink-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.ai-sh { stroke: none; }
.ai-sh.s1 { fill: var(--sun); fill-opacity: .14; }
.ai-sh.s0 { fill: var(--leaf); fill-opacity: .13; }
.ai-miss { fill: none; stroke: var(--warm); stroke-width: 2.5; stroke-dasharray: 4 3; }
.ai-h { cursor: grab; outline: none; }
.ai-hz { fill: transparent; }
.ai-hd { fill: var(--surface); stroke: var(--accent); stroke-width: 4; }
.ai-h:focus-visible .ai-hd { stroke: var(--sun); stroke-width: 5; }
.ai-edge { stroke: var(--ink-3); stroke-width: 2; }
.ai-in, .ai-out { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.5; }
.ai-node { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; }
.ai-wt { fill: var(--accent); font-size: 14px; font-weight: 800; }
.ai-barbg { fill: var(--surface-2); }
.ai-bar { fill: var(--accent-2); }
.ai-ct { fill: var(--ink); font-size: 16px; font-weight: 600; }
.ai-chi { fill: var(--sun); fill-opacity: .35; }
.ai-cmk { fill: var(--accent-2); fill-opacity: .28; }
.ai-rowbg { fill: var(--surface-2); }
.ai-curve { fill: none; stroke: var(--accent-2); stroke-width: 3.5; }
.ai-cont { fill: none; stroke: var(--line); stroke-width: 1.5; }
.ai-path { fill: none; stroke: var(--coral); stroke-width: 2; stroke-dasharray: 4 4; }
.ai-trail { fill: var(--coral); fill-opacity: .55; }
.ai-ball { fill: var(--coral); stroke: var(--surface); stroke-width: 2; }
.ai-ball.off { fill: var(--warm); }
.ai-min { fill: var(--ink-3); }

/* widgets */
.ai-bnd, .ai-desc, .ai-neu, .ai-tok { display: grid; gap: 12px; justify-items: center; }
.ai-board { width: 100%; display: flex; justify-content: center; }
.ai-board .vis.ai-scatter { width: min(100%, 360px); touch-action: none; user-select: none; -webkit-user-select: none; }
.ai-board .vis.ai-lossc, .ai-board .vis.ai-bowl { width: min(100%, 360px); }
.ai-board .vis.ai-bowl { max-width: 320px; }
.ai-read { font: 700 18px var(--round); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.ai-read b { color: var(--ink); }
.ai-read.ok b:first-child { color: var(--good); }
.ai-legrow { font-size: 15px; color: var(--ink-2); }
.ai-leg { display: inline-flex; align-items: center; gap: 6px; }
.ai-leg i { width: 12px; height: 12px; display: inline-block; margin-left: 10px; }
.ai-leg i:first-child { margin-left: 0; }
.ai-k0 { background: var(--leaf); border-radius: 50%; }
.ai-k1 { background: var(--sun); transform: rotate(45deg) scale(.85); border-radius: 2px; }
.locked .ai-h { cursor: default; }

/* neuron */
.ai-diag { width: 100%; display: flex; justify-content: center; }
.ai-diag .vis { width: min(100%, 280px); }
.ai-fixedout { font: 650 16px ui-monospace, Menlo, Consolas, monospace; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); text-align: center; }
.ai-pars { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; }
.ai-pgroup { display: grid; gap: 6px; }
.ai-pgname { font: 750 15px var(--round); color: var(--ink-3); text-align: center; }
.ai-par { display: grid; grid-template-columns: 30px 44px 52px 44px; align-items: center; gap: 4px; }
.ai-par.fixed { grid-template-columns: 30px 52px; }
.ai-pn { font: 700 17px var(--round); color: var(--ink-2); }
.ai-pv { text-align: center; font: 800 19px var(--round); font-variant-numeric: tabular-nums; }
.ai-par.fixed .ai-pv { color: var(--ink-3); }
.ai-stp { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: 800 22px var(--round); display: grid; place-items: center; padding: 0; }
.ai-stp:active { transform: scale(.94); }
.locked .ai-stp { opacity: .5; cursor: default; }
.ai-tt { border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: min(100%, 300px); }
.ai-tt th { font-size: 13px; font-weight: 700; color: var(--ink-3); padding: 4px 10px; }
.ai-tt td { text-align: center; padding: 7px 10px; border-top: 1px solid var(--line); font-weight: 600; }
.ai-tt td.z { color: var(--ink-3); }
.ai-tt td.o { font-weight: 800; }
.ai-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--surface-3); }
.ai-dot.ok { background: var(--good); }

/* descent */
.ai-rates { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-rate { font-variant-numeric: tabular-nums; }
.ai-ctr { display: flex; gap: 10px; justify-content: center; }
.ai-ctr .btn { min-width: 110px; }
.ai-step:disabled { opacity: .4; }

/* next word */
.ai-corpus { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 560px; }
.ai-br { flex-basis: 100%; height: 0; }
.ai-w { min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--surface); font: 650 17px var(--font); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.ai-w.dot { min-width: 32px; padding: 0 6px; color: var(--ink-3); }
.ai-w.ctx { background: var(--warm-bg); border-color: var(--sun); }
.ai-w.on { background: var(--accent-soft); border-color: var(--accent); }
.ai-w.right { box-shadow: 0 0 0 3px var(--good); }
.ai-w.gap { border-style: dashed; color: var(--ink-3); }
.ai-w.static { cursor: default; }
.locked .ai-w { cursor: default; }
.ai-tally { display: grid; gap: 4px; min-width: min(100%, 260px); }
.ai-tl-h { font-size: 15px; color: var(--ink-3); text-align: center; }
.ai-tl { display: grid; grid-template-columns: 1fr 40px 56px; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ai-tl b { text-align: right; } .ai-tl .ai-pr { text-align: right; color: var(--ink-3); }
.ai-tl.empty { grid-template-columns: 1fr; text-align: center; color: var(--ink-3); }
.ai-scores { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; color: var(--ink-3); font-size: 15px; }
.ai-scores b { color: var(--ink); }
.ai-tslider { width: min(100%, 420px); grid-template-columns: 30px 1fr 48px; }
.ai-seq, .ai-pal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-seq { min-height: 52px; padding: 4px; }
.ai-pal { padding-top: 10px; border-top: 1px solid var(--line); max-width: 560px; }
.ai-sampled { min-height: 1.6em; max-width: 520px; text-align: center; color: var(--ink-2); font-size: 17px; }
.ai-model { width: 100%; }
.ai-mprompt { font-size: 16px; color: var(--ink-2); text-align: center; max-width: 52ch; }
@media (max-width: 420px) {
  .ai-par { grid-template-columns: 26px 44px 46px 44px; }
  .ai-tt td, .ai-tt th { padding: 6px 6px; }
}
.ai-board .vis.ai-cnt { width: min(100%, 460px); }
.ai-neu.two .ai-pars { flex-wrap: nowrap; gap: 14px; }
@media (max-width: 420px) {
  .ai-neu.two .ai-pars { gap: 8px; }
  .ai-neu.two .ai-par { grid-template-columns: 22px 44px 36px 44px; gap: 2px; }
  .ai-neu.two .ai-pv { font-size: 17px; }
}