/* Visual mathematics and data labs: wide preview, compact controls, readable output. */
.vl .ds-layout { grid-template-columns:minmax(290px,340px) minmax(0,1fr); gap:20px; align-items:start; }
.vl .ds-controls { position:sticky; top:12px; max-height:calc(100vh - 24px); overflow:auto; }
.vl .ds-preview { min-width:0; padding:20px; }
.vl .vl-presets { padding-bottom:16px; border-bottom:1px solid #614875; }
.vl .vl-presets button { font-size:12px; padding:9px 11px; }
.vl .vl-fields { display:grid; gap:13px; }
.vl .vl-fields .ds-field { margin:0; }
.vl .vl-fields textarea { min-height:140px; font-family:ui-monospace,Consolas,monospace; }
.vl .vl-limit { padding:15px; background:#191322; border:1px solid #4a375b; border-radius:10px; color:#d1c1df; font-size:12px; margin-top:22px; }
.vl .vl-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:16px; }
.vl .vl-metrics>div { background:linear-gradient(140deg,#3b2650,#241a31); border:1px solid #785396; border-radius:12px; padding:14px; min-width:0; }
.vl .vl-metrics span { display:block; color:#dac6eb; font-size:12px; margin-bottom:7px; }
.vl .vl-metrics strong { display:block; font-size:21px; overflow-wrap:anywhere; }
.vl .vl-chart { border:1px solid #634c76; border-radius:14px; overflow:hidden; background:#181321; }
.vl .vl-chart svg { display:block; width:100%; height:auto; }
.vl .vl-drag { cursor:grab; touch-action:none; }
.vl .vl-drag:active { cursor:grabbing; }
.vl .vl-drag:focus { stroke:#ffd483; stroke-width:4px; }
.vl .vl-note { border-left:3px solid #b68bdf; padding:12px 16px; background:#21192e; color:#dfd2e9; font-size:13px; }
.vl .vl-equation { padding:15px; border:1px solid #7b5b91; border-radius:10px; font-family:ui-monospace,Consolas,monospace; overflow-wrap:anywhere; }
.vl .vl-matrix pre { background:#171221; border-radius:10px; padding:16px; overflow:auto; }
.vl button.vl-primary { background:#8450b9; border-color:#b98aeb; font-weight:700; }
.vl .vl-table { max-width:100%; max-height:400px; overflow:auto; border:1px solid #5a446c; border-radius:10px; }
.vl table { width:100%; border-collapse:collapse; text-align:left; font-size:13px; }
.vl td,.vl th { padding:11px 14px; border-bottom:1px solid #493857; overflow-wrap:anywhere; min-width:80px; max-width:360px; }
.vl th { background:#352641; position:sticky; top:0; }
.vl tbody tr:nth-child(even) { background:#21192c; }
.vl .vl-table-section { margin-top:24px; }
.vl .vl-error { background:#402337; border:1px solid #e6a5bc; border-radius:12px; padding:22px; }
.vl button:focus-visible,.vl .vl-table:focus-visible { outline:3px solid #e1baff; outline-offset:3px; }
@media(max-width:850px) {
 .vl .ds-layout { grid-template-columns:minmax(0,1fr); }
 .vl .ds-controls { position:static; max-height:none; }
 .vl .ds-preview { padding:12px; }
 .vl .vl-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .vl .vl-metrics strong { font-size:17px; }
 .vl .vl-chart { margin:0 -3px; }
}

.vl .vl-compare { margin:16px 0; padding:14px; border:1px solid #654d7d; border-radius:12px; }
.vl .vl-compare summary { cursor:pointer; font-weight:700; }
.vl .vl-model { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid #493857; font-size:13px; }
.vl .vl-model button { flex:0 0 auto; padding:8px 10px; }
.vl .vl-compare pre { overflow:auto; }

.vl .vl-chart-hint { display:none; }
@media(max-width:600px) {
 .vl .vl-chart { overflow:auto; }
 .vl .vl-chart svg { width:700px; min-width:700px; max-width:none; }
 .vl .vl-chart svg text { font-size:18px; }
 .vl .vl-chart-hint { display:block; color:#cbbbda; font-size:12px; margin:8px 0; }
 .vl .vl-model { flex-wrap:wrap; }
}