[data-extra] .canvas-wrap { height: min(62vh, 600px); min-height: 440px; }
[data-extra] canvas { display: block; width: 100%; height: 100%; }
#derivative canvas, #regression canvas, #shortest canvas, #cantor canvas { touch-action: none; }
#cantor .canvas-wrap { min-height: 520px; }
[data-extra] .panel { max-height: 600px; }
#bayes .canvas-wrap { min-height: 400px; }
.extra-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.extra-actions .btn { flex: 1; white-space: nowrap; }
.extra-readouts { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; font-variant-numeric: tabular-nums; }
.extra-readouts > div { min-width: 0; padding: 12px 0; border-bottom: 1px solid var(--line); }
.extra-readouts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.extra-readouts dt { font-size: 11px; line-height: 1.6; color: var(--text-2); margin-bottom: 6px; }
.extra-readouts dd { font-size: 17px; font-weight: 500; letter-spacing: -.02em; color: var(--accent); overflow-wrap: anywhere; }
.extra-status, .extra-note { font-size: 12px; line-height: 1.8; color: var(--text-2); }
.extra-status { min-height: 44px; margin-bottom: 4px; }
.extra-status[data-state="success"] { color: #238582; }
.extra-status[data-state="warning"] { color: #b07835; }
.extra-explainer, .extra-history { margin-top: 22px; padding: 24px 28px; }
.extra-kicker { color: var(--accent); font-size: 11px; letter-spacing: .12em; margin-bottom: 8px; }
.extra-explainer p { color: var(--text-2); line-height: 1.9; font-size: 14px; }
.extra-explainer .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }
.extra-history h3 { font-size: 16px; font-weight: 500; }
.extra-table-wrap { overflow-x: auto; margin-top: 12px; }
.extra-history table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.extra-history th, .extra-history td { text-align: right; white-space: nowrap; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.extra-history th:first-child, .extra-history td:first-child { text-align: left; }
.extra-history th { color: var(--text-2); font-weight: 400; }
.extra-history tr.current-row { color: var(--accent); background: var(--accent-soft); }
[data-extra] button:disabled { opacity: .4; cursor: default; }
@media (max-width:1080px) {
  [data-extra] .canvas-wrap { min-height: 340px; height: 52vh; }
  [data-extra] .panel { max-height: none; }
}
@media (max-width:760px) {
  #cantor .canvas-wrap { min-height: 440px; }
  [data-extra] .canvas-wrap { min-height: 320px; height: 48svh; }
  .extra-explainer, .extra-history { padding: 20px 16px; }
}