.visual-lab { --vl-ink:#243e50; --vl-rust:#976346; --vl-rule:#d8d9d2; margin:34px 0; padding:22px 0 0; border-top:2px solid var(--vl-ink); scroll-margin-top:24px; color:#253f50; }
.visual-lab * { box-sizing:border-box; }
.visual-lab p.vl-kicker { font:600 11px/1.5 system-ui,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#65747b; margin:0 0 9px; }
.visual-lab h3 { font:27px/1.2 Georgia,serif; margin:0 0 12px; letter-spacing:-.01em; color:#233b49; }
.visual-lab p.vl-intro { font-size:14px; line-height:1.7; margin:0 0 18px; max-width:62ch; }
.visual-lab .vl-controls { background:#f3f2eb; border-block:1px solid var(--vl-rule); padding:16px; margin:0 0 20px; display:flex; flex-wrap:wrap; align-items:center; gap:16px 26px; }
.visual-lab .vl-controls[hidden] { display:none; }
.visual-lab .vl-control { flex:1 1 180px; min-width:0; }
.visual-lab .vl-control label { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; font:500 13px/1.5 system-ui,sans-serif; }
.visual-lab output { font-variant-numeric:tabular-nums; color:var(--vl-ink); }
.visual-lab input[type=range] { accent-color:var(--vl-ink); display:block; width:100%; height:34px; margin:4px 0 0; cursor:pointer; }
.visual-lab select { display:block; background:#fcfcfa; border:1px solid #aab5b9; border-radius:0; padding:8px; width:100%; min-height:44px; color:var(--vl-ink); font:14px system-ui,sans-serif; }
.visual-lab .vl-modes { display:flex; flex:1 1 100%; gap:0; border:0; padding:0; margin:0; min-width:0; }
.visual-lab .vl-modes button { flex:1; background:#fcfcfa; border:1px solid #aab5b9; border-radius:0; padding:10px; min-height:44px; font:500 13px/1.4 system-ui,sans-serif; color:var(--vl-ink); cursor:pointer; }
.visual-lab .vl-modes button+button { border-left:0; }
.visual-lab .vl-modes button[aria-pressed=true] { background:var(--vl-ink); color:#fcfcfa; }
.visual-lab .vl-reset { border:0; border-bottom:1px solid #aab5b9; border-radius:0; padding:5px 0; min-height:36px; background:transparent; color:var(--vl-ink); font:12px system-ui,sans-serif; cursor:pointer; }
.visual-lab :is(button,select,input,summary,a):focus-visible { outline:2px solid var(--vl-rust); outline-offset:4px; }
.visual-lab .vl-metrics { display:flex; flex-wrap:wrap; gap:16px 28px; padding-bottom:12px; border-bottom:1px solid var(--vl-rule); margin:0 0 16px; }
.visual-lab .vl-metrics>div { flex:1 1 140px; }
.visual-lab .vl-metrics span { display:block; font:12px/1.5 system-ui,sans-serif; color:#5a6c75; }
.visual-lab .vl-metrics strong { display:block; font:26px/1.3 Georgia,serif; font-variant-numeric:lining-nums tabular-nums; margin-top:5px; color:var(--vl-ink); }
.visual-lab .vl-plot { min-width:0; }
.visual-lab .vl-plot svg { display:block; width:100%; height:auto; overflow:visible; }
.visual-lab .vl-axis,.visual-lab .vl-axis-title,.visual-lab .vl-value,.visual-lab .vl-rust { fill:#5a6c75; font:13px system-ui,sans-serif; }
.visual-lab .vl-axis-title { font-size:12px; }
.visual-lab .vl-value { fill:#253f50; font-weight:500; }
.visual-lab .vl-rust { fill:var(--vl-rust); }
.visual-lab .vl-grid { stroke:#dfe3e1; stroke-width:1; }
.visual-lab .vl-main-line { fill:none; stroke:var(--vl-ink); stroke-width:2.5; }
.visual-lab .vl-rust-line { fill:none; stroke:var(--vl-rust); stroke-width:2.4; }
.visual-lab .vl-dashed { stroke-dasharray:6 4; }
.visual-lab .vl-guide { stroke:#7e8c91; stroke-dasharray:3 4; stroke-width:1; }
.visual-lab .vl-threshold { stroke:var(--vl-rust); stroke-dasharray:5 3; stroke-width:2; }
.visual-lab .vl-point { fill:var(--vl-ink); stroke:#fcfcfa; stroke-width:1.5; }
.visual-lab .vl-rust-point { fill:var(--vl-rust); stroke:#fcfcfa; stroke-width:1.5; }
.visual-lab .vl-bar { fill:var(--vl-ink); }
.visual-lab .vl-muted-bar { fill:#c9d2d4; }
.visual-lab .vl-rust-bar { fill:var(--vl-rust); }
.visual-lab .vl-area { fill:#e4dccf; stroke:none; }
.visual-lab .vl-band { fill:#e7eceb; stroke:none; }
.visual-lab .vl-sample { fill:none; stroke:#879ca8; stroke-width:1.2; opacity:.85; }
.visual-lab .vl-sample-1 { stroke:#a99970; }
.visual-lab .vl-sample-2 { stroke:#789183; }
.visual-lab .vl-sample-3 { stroke:#aea19a; }
.visual-lab .vl-legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin:6px 0 14px; font:12px/1.6 system-ui,sans-serif; color:#5a6c75; }
.visual-lab .vl-legend span { display:inline-flex; align-items:center; gap:6px; }
.visual-lab .vl-legend i { display:inline-block; width:19px; border-top:2px solid var(--vl-ink); }
.visual-lab .vl-legend .rust { border-color:var(--vl-rust); border-top-style:dashed; }
.visual-lab .vl-legend .rust.solid { border-top-style:solid; }
.visual-lab .vl-legend .band { height:10px; border:0; background:#e1e7e5; }
.visual-lab p.vl-summary { margin:12px 0; font-size:14px; line-height:1.7; min-height:48px; }
.visual-lab p.vl-method { font-size:12px; line-height:1.7; color:#5a6c75; margin:14px 0; }
.visual-lab .vl-data { border-top:1px solid var(--vl-rule); padding-top:10px; font:12px/1.6 system-ui,sans-serif; }
.visual-lab .vl-data summary { cursor:pointer; min-height:30px; }
.visual-lab .vl-table-wrap { max-width:100%; overflow-x:auto; }
.visual-lab table { width:100%; border-collapse:collapse; margin:10px 0; font:12px/1.5 system-ui,sans-serif; }
.visual-lab th,.visual-lab td { text-align:left; padding:8px 5px; border-bottom:1px solid var(--vl-rule); white-space:normal; font-weight:400; }
.visual-lab thead th { font-weight:600; }
.visual-lab .vl-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.visual-original { margin:18px 0 30px; border-top:1px solid #d8d9d2; padding-top:10px; color:#5a6c75; font-size:12px; }
.visual-original>summary { cursor:pointer; }
.vl-jumps { margin:18px 0 24px; font:13px/1.8 system-ui,sans-serif; display:flex; flex-wrap:wrap; gap:4px 16px; }
.vl-jumps>span { color:#687880; }
.vl-jumps a { color:#29485b; text-decoration:underline; text-underline-offset:4px; }
@media(max-width:500px) { .visual-lab h3 { font-size:24px; } .visual-lab .vl-controls { padding:12px; gap:12px; } .visual-lab .vl-metrics { gap:12px 20px; } .visual-lab .vl-metrics>div { flex-basis:110px; } .visual-lab .vl-metrics strong { font-size:24px; } }
@media print { .visual-lab .vl-controls { display:none; } .visual-lab { break-inside:avoid; } .visual-lab .vl-plot { max-width:600px; } }