
.visual-lab{--vl-bg:#0c2029;--vl-fg:#eef9f7;--vl-muted:#b9d2d6;--vl-line:#37545d;background:var(--vl-bg);color:var(--vl-fg);border:1px solid var(--vl-line);border-radius:20px;padding:clamp(16px,3vw,30px);margin:32px 0;overflow:hidden;font-family:system-ui,sans-serif}
.visual-lab *{box-sizing:border-box}.visual-lab h3{color:var(--vl-fg);font-size:1.5rem;margin:8px 0}.visual-lab p{color:var(--vl-muted);font-size:.95rem;line-height:1.6}.visual-lab .vl-eyebrow{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#82e5cd}.vl-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:20px 0}.visual-lab button,.visual-lab select{font:inherit;font-size:.88rem;min-height:44px;border:1px solid #63828c;border-radius:9px;padding:9px 12px;background:#153440;color:#f2faf9;cursor:pointer;max-width:100%}.visual-lab button[aria-pressed=true],.visual-lab button:hover{background:#21594f;border-color:#82e5cd}.visual-lab :focus-visible{outline:3px solid #ffd17a;outline-offset:3px}.vl-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0}.vl-node{border:1px solid var(--vl-line);border-radius:12px;padding:16px;min-height:108px;transition:background .3s,border-color .3s,transform .3s}.vl-node strong{display:block;color:var(--vl-fg);font-size:.92rem}.vl-node small{display:block;color:var(--vl-muted);font-size:.78rem;line-height:1.5;margin-top:5px}.vl-node[data-active=true]{background:#20574d;border-color:#82e5cd;transform:translateY(-3px)}.vl-number{font-size:.75rem;color:#82e5cd;display:block;margin-bottom:7px}.vl-detail{border-left:3px solid #82e5cd;padding:12px 16px;background:#132f39;min-height:110px}.vl-map{width:100%;height:auto;display:block;background:#102b35;border:1px solid var(--vl-line);border-radius:14px}.vl-map text{font-family:system-ui,sans-serif;fill:#eaf6f5;font-size:13px}.vl-map .vl-dot{fill:#91d5fa}.vl-map .vl-dot[data-selected=true]{fill:#82e5cd;stroke:#82e5cd;stroke-width:10;stroke-opacity:.2}.vl-map .vl-query{fill:#ffd17a}.vl-table-wrap{overflow-x:auto}.visual-lab table{width:100%;font-size:.8rem;border-collapse:collapse;margin-top:20px}.visual-lab th,.visual-lab td{padding:10px 8px;border-bottom:1px solid var(--vl-line);color:var(--vl-fg);text-align:left;white-space:normal}.visual-lab label{color:var(--vl-fg);font-size:.87rem}.vl-key{display:flex;gap:16px;flex-wrap:wrap;font-size:.8rem;color:var(--vl-muted)}.vl-pass{color:#82e5cd}.vl-warn{color:#ffd17a}.visual-lab input[type=checkbox]{width:18px;height:18px;accent-color:#82e5cd}.vl-check{display:flex;gap:8px;align-items:center}@media(max-width:600px){.vl-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.vl-node{padding:12px}.visual-lab th,.visual-lab td{padding:8px 4px;font-size:.73rem}}@media(prefers-reduced-motion:reduce){.vl-node{transition:none}.vl-node[data-active=true]{transform:none}}@media print{.vl-controls{display:none}.visual-lab{break-inside:avoid}.vl-node{transform:none!important}}
