/* ML Simplified — interactive viz "CodePen-style" frames */
.ml-viz{
  border:1px solid rgba(255,255,255,0.65); border-radius:16px; overflow:hidden;
  background:rgba(255,255,255,0.5); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); margin:.9rem 0 .3rem; box-shadow:0 10px 30px rgba(76,74,152,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
}
.mlv-head{
  display:flex; align-items:center; gap:6px; padding:.45rem .7rem;
  background:rgba(31,31,44,0.85); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,0.12);
}
.mlv-dot{ width:11px; height:11px; border-radius:50%; background:#ff5f56; display:inline-block; }
.mlv-dot:nth-child(2){ background:#ffbd2e; }
.mlv-dot:nth-child(3){ background:#27c93f; }
.mlv-title{ color:#c9c7f5; font:600 12px/1 'JetBrains Mono',monospace; margin-left:8px; letter-spacing:.02em; }
.mlv-body{ padding:.8rem .9rem 1rem; }
.mlv-canvas{ display:block; max-width:100%; border-radius:10px; background:transparent; touch-action:none; cursor:grab; }
.mlv-canvas:active{ cursor:grabbing; }
.mlv-controls{ display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; margin-top:.7rem; }
.mlv-ctl{ display:flex; align-items:center; gap:.4rem; font:500 12px/1.3 Inter,sans-serif; color:#444; }
.mlv-ctl-lab{ white-space:nowrap; }
.mlv-ctl-val{ color:#4C4A98; font-family:'JetBrains Mono',monospace; }
.mlv-ctl input[type=range]{ width:110px; accent-color:#4C4A98; }
.mlv-btn{
  font:600 12px Inter,sans-serif; padding:.32rem .7rem; border-radius:6px;
  border:1px solid #4C4A98; background:#4C4A98; color:#fff; cursor:pointer;
}
.mlv-btn:hover{ background:#3a3878; }
.mlv-out{ margin-top:.6rem; font:500 13px/1.5 Inter,sans-serif; color:#33333f; background:rgba(76,74,152,.06); border-radius:7px; padding:.45rem .65rem; }
.mlv-out b{ color:#4C4A98; }
.mlv-hint{ margin-top:.4rem; font:500 11px Inter,sans-serif; color:#8888a0; font-style:italic; }

/* matrix grids (transpose / trace) */
.mlv-matpair{ display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; }
.mlv-mat-t{ font:600 11px 'JetBrains Mono',monospace; color:#8888a0; margin-bottom:.3rem; text-align:center; }
.mlv-grid{ display:grid; gap:4px; }
.mlv-cell{ width:34px; height:34px; display:flex; align-items:center; justify-content:center;
  background:rgba(76,74,152,.08); border:1px solid rgba(76,74,152,.2); border-radius:6px;
  font:600 14px 'JetBrains Mono',monospace; color:#4C4A98; }
.mlv-cell.mlv-diag{ background:#4C4A98; color:#fff; }
.mlv-arrow{ font:700 16px 'JetBrains Mono',monospace; color:#9b3b6a; }

/* dark mode */
body.quarto-dark .ml-viz{ background:rgba(34,33,52,0.55); border-color:rgba(182,180,240,0.18); box-shadow:0 10px 30px rgba(0,0,0,0.45), inset 0 1px 0 rgba(182,180,240,0.12); }
body.quarto-dark .mlv-canvas{ background:transparent; }
body.quarto-dark .mlv-ctl{ color:#c9c9d6; }
body.quarto-dark .mlv-out{ color:#d8d8e0; background:rgba(182,180,240,.1); }
body.quarto-dark .mlv-out b{ color:#b6b4f0; }
body.quarto-dark .mlv-cell{ background:rgba(182,180,240,.12); color:#c9c7f5; border-color:rgba(182,180,240,.25); }

/* viz section label inside the math card */
.viz-wrap{ margin-top:1rem; }
.viz-wrap > p:first-child{ font:700 .72rem/1 Inter,sans-serif; text-transform:uppercase; letter-spacing:.06em; color:#b8860b; margin:0 0 .2rem; }
body.quarto-dark .viz-wrap > p:first-child{ color:#d6a93b; }