.viz{--viz-line:var(--rule-strong);--viz-muted:var(--muted);--viz-fill:var(--ground-3);--viz-accent:var(--accent);--viz-a:var(--accent-high);--viz-b:var(--f-records);--viz-c:var(--f-requires);--viz-d:var(--f-needs);--viz-e:var(--f-injects);--viz-f:var(--f-platform);--viz-bad:var(--f-exception);max-width:100%;margin-block:var(--s-6);padding-block:var(--s-4);border-block:1px solid var(--rule);font-size:var(--type-body);background:0 0;overflow:hidden}.viz-run{z-index:1;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:0;place-items:center;margin:0;padding:0;display:grid;position:absolute;inset:0}.viz-run[hidden]{display:none}.viz-run>span{gap:var(--s-2);padding:var(--s-2) var(--s-3);border:1px solid var(--rule-strong);background:var(--ground);color:var(--text);font:12px / 1.5 var(--font-mono);border-radius:2px;align-items:center;transition:border-color .12s,color .12s;display:flex}.viz-run>span:before{content:"";background:var(--accent);clip-path:polygon(0 0,100% 50%,0 100%);width:7px;height:8px}.viz-run:is(:active,:focus-visible)>span{border-color:var(--accent);color:var(--accent-high)}@media (hover:hover){.viz-run:hover>span{border-color:var(--accent);color:var(--accent-high)}}.viz-run:focus-visible{outline:none}@media (prefers-reduced-motion:reduce){.viz-run>span{transition:none}}.viz-wide{scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;overflow-x:auto}.viz-wide>svg{min-width:34rem}.viz svg{width:100%;height:auto;font-family:var(--font-mono);font-size:var(--type-label);display:block;overflow:hidden}.viz svg,.viz canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}:where(.viz) canvas{aspect-ratio:16/10;width:100%;display:block}.viz-screen{position:relative}.viz-screen:has(>canvas[hidden]){display:none}:where(.viz svg text:not([fill])){fill:var(--viz-muted)}.viz svg text{--viz-accent:var(--link)}.viz svg .strong{fill:var(--text)}.viz-controls{gap:var(--s-2) var(--s-4);margin-top:var(--s-4);font:var(--type-label) / 1.5 var(--font-mono);flex-wrap:wrap;align-items:center;display:flex}.viz .viz-controls>*,.viz .viz-choice>*{margin:0}.viz-controls button,.viz .viz-choice label,.viz-controls select{min-height:28px;padding:var(--s-1) var(--s-2);border:1px solid var(--rule-strong);color:var(--text-2);font:11px/1.5 var(--font-mono);background:0 0;border-radius:2px;transition:border-color .12s,color .12s}.viz-controls button,.viz .viz-choice label{cursor:pointer}.viz-controls button:hover,.viz .viz-choice label:hover,.viz-controls select:hover{border-color:var(--muted);color:var(--text)}.viz-controls button[aria-pressed=true],.viz .viz-choice label:has(:checked){border-color:var(--accent);color:var(--accent-high)}.viz-controls button:disabled{opacity:.45;cursor:default}.viz-controls button:focus-visible,.viz-controls select:focus-visible,.viz-controls input[type=range]:focus-visible,.viz .viz-choice label:has(:focus-visible){outline:1px solid var(--accent);outline-offset:3px}.viz .viz-choice{gap:var(--s-1);color:var(--muted);font:11px/1.5 var(--font-mono);flex-wrap:wrap;align-items:center;display:flex}.viz .viz-choice>span{margin-right:var(--s-1)}.viz .viz-choice label{align-items:center;display:inline-flex;position:relative}.viz .viz-choice input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.viz-controls label{gap:var(--s-2);max-width:100%;color:var(--muted);font:11px/1.5 var(--font-mono);align-items:center;display:flex}.viz-controls select{background:var(--ground);min-width:0;max-width:100%}.viz-range{gap:var(--s-2);align-items:center;display:inline-flex;position:relative}.viz-controls input[type=range]{appearance:none;cursor:ew-resize;background:0 0;border:0;border-radius:0;width:6rem;height:28px;margin:0;padding:0}.viz-controls input[type=range]::-webkit-slider-runnable-track{background:var(--rule-strong);height:1px}.viz-controls input[type=range]::-webkit-slider-thumb{appearance:none;border:1px solid var(--accent);background:var(--ground);border-radius:0;width:8px;height:8px;margin-top:-3.5px}.viz-controls input[type=range]::-moz-range-track{background:var(--rule-strong);height:1px}.viz-controls input[type=range]::-moz-range-thumb{border:1px solid var(--accent);background:var(--ground);border-radius:0;width:6px;height:6px}.viz-controls output{min-width:3ch;color:var(--text);font:11px/1.5 var(--font-mono);font-variant-numeric:tabular-nums}.viz-number .viz-range{min-height:28px}.viz-number output{border-bottom:1px dotted var(--accent);min-width:1ch;color:var(--accent-high);padding-inline:1px}.viz-controls .viz-number input[type=range]{opacity:0;touch-action:none;width:100%;height:100%;position:absolute;inset:0}.viz-number .viz-range:hover output,.viz-number .viz-range:focus-within output,.viz-number .held+output{background:var(--accent-low)}.viz-number .viz-range:has(:focus-visible) output{outline:1px solid var(--accent);outline-offset:3px}.viz-note,.viz-caption{max-width:var(--measure);margin:var(--s-3) 0 0;color:var(--muted);font:var(--type-body) / 1.55 var(--font-sans)}.viz-status{min-height:calc(var(--lines,1) * 1.6em);margin:var(--s-2) 0 0;color:var(--text-2);font:var(--type-status) / 1.6 var(--font-mono);white-space:pre-line}.viz-bleed{aspect-ratio:auto;touch-action:pan-y;border-radius:0;height:clamp(240px,30vw,340px);margin:0}.viz-readout{gap:var(--s-4);font:var(--type-label) / 1.5 var(--font-mono);margin:0;display:flex}.viz-readout div{gap:var(--s-2);align-items:baseline;display:flex}.viz-readout dt{color:var(--muted);margin:0;font-weight:400}.viz-readout dd,.viz-readout output{min-width:6ch;padding:1px var(--s-1);border:1px solid var(--rule-strong);color:var(--text);font-variant-numeric:tabular-nums;border-radius:2px;margin:0}.viz-settings{gap:var(--s-2) var(--s-5);flex-wrap:wrap;flex-basis:100%;align-items:center;display:flex;container-type:inline-size}.viz .viz-settings>*,.viz .viz-readout div{margin:0}@container (width<=30rem){.viz-settings>label:has(input[type=range]){grid-template-columns:7ch minmax(0,1fr) 5ch;width:100%;display:grid}.viz-settings input[type=range]{width:100%}}@media (prefers-reduced-motion:reduce){.viz-controls button,.viz .viz-choice label,.viz-controls select{transition:none}}
