.webgpu-panel{border:1px solid var(--viz-line);background:var(--viz-panel);color:var(--viz-text);font-family:var(--viz-sans);border-radius:0;margin:2rem 0;line-height:1.4;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff04}.webgpu-panel__viewport{aspect-ratio:4/3;background:var(--viz-bg);position:relative}.webgpu-panel canvas{touch-action:pan-y;width:100%;height:100%;display:block}.webgpu-panel__viewport--comparison{aspect-ratio:2}.webgpu-panel__viewport--quad{aspect-ratio:1}.webgpu-panel__viewport--quad:before{content:"";border-top:1px solid var(--viz-line);pointer-events:none;position:absolute;inset:50% 0 auto}.webgpu-panel__viewport--quad .webgpu-panel__comparison-labels{grid-template-rows:repeat(2,1fr);inset:0}.webgpu-panel__viewport--quad .webgpu-panel__comparison-labels span{align-self:start;padding-top:10px}.webgpu-panel__viewport--comparison:after{content:"";border-left:1px solid var(--viz-line);pointer-events:none;position:absolute;inset:0 auto 0 50%}.webgpu-panel__comparison-labels{pointer-events:none;color:var(--viz-muted);font:9px var(--viz-mono);text-align:center;text-transform:uppercase;letter-spacing:.06em;grid-template-columns:1fr 1fr;display:grid;position:absolute;inset:10px 0 auto}.webgpu-panel canvas[hidden]{display:none}.webgpu-panel :is(canvas,button,input):focus-visible{outline:1px solid var(--viz-cyan);outline-offset:3px}.webgpu-panel canvas:focus-visible{outline-offset:-3px}.webgpu-panel__fallback{text-align:center;background:var(--viz-bg);color:var(--viz-muted);font:11px var(--viz-mono);align-content:center;justify-items:center;padding:20px;display:grid;position:absolute;inset:0}.webgpu-panel__fallback svg{width:min(100%,320px);height:auto}.webgpu-panel__controls{border-top:1px solid var(--viz-line);background:#060809f5;flex-wrap:wrap;align-items:center;gap:0;padding:8px 10px;display:flex}.webgpu-control{min-width:0;font:10px var(--viz-mono);text-transform:uppercase;flex:180px;gap:7px;padding:4px 10px;display:grid}.webgpu-control:first-child{padding-left:0}.webgpu-control+.webgpu-control{border-left:1px solid var(--viz-line-strong)}.webgpu-control__label{color:var(--viz-coral);letter-spacing:.08em;justify-content:space-between;align-items:baseline;gap:8px;display:flex}.webgpu-control__label b{color:var(--viz-text);letter-spacing:0;font-weight:500}.webgpu-range__track{color:var(--viz-muted);grid-template-columns:auto minmax(40px,1fr) auto;align-items:center;gap:7px;font-size:9px;display:grid}.webgpu-panel input[type=range]{appearance:none;cursor:pointer;background:0 0;width:100%;height:18px;margin:0;display:block}.webgpu-panel input[type=range]:disabled{opacity:.3;cursor:not-allowed}.webgpu-panel input[type=range]::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--viz-cyan), var(--viz-lime));border:0;height:3px}.webgpu-panel input[type=range]::-webkit-slider-thumb{appearance:none;background:#07100d;border:1px solid #e8f1ea;border-radius:50%;width:8px;height:8px;margin-top:-2.5px;box-shadow:0 0 0 1px #020303bf}.webgpu-panel input[type=range]::-moz-range-track{background:linear-gradient(90deg, var(--viz-cyan), var(--viz-lime));border:0;height:3px}.webgpu-panel input[type=range]::-moz-range-thumb{background:#07100d;border:1px solid #e8f1ea;border-radius:50%;width:7px;height:7px}.webgpu-modes__buttons{flex-wrap:wrap;gap:2px;display:flex}.webgpu-panel button{border:1px solid var(--viz-line);color:var(--viz-muted);font:9px/1 var(--viz-mono);text-transform:uppercase;cursor:pointer;background:0 0;border-radius:0;padding:6px 7px}.webgpu-panel button:hover{border-color:var(--viz-line-strong);color:var(--viz-text)}.webgpu-panel button[aria-pressed=true]{border-color:var(--viz-cyan);color:var(--viz-text);background:#2bcaff14}.webgpu-panel__controls--columns{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;row-gap:4px;display:grid}.webgpu-panel__controls--columns>.webgpu-control{border-left:1px solid var(--viz-line-strong);padding:4px 10px}.webgpu-panel__controls--columns>[data-column="1"]{border-left:0;grid-column:1;padding-left:0}.webgpu-panel__controls--columns>[data-column="2"]{grid-column:2}.webgpu-panel__controls--columns>[data-column="3"]{grid-column:3;padding-right:0}.webgpu-panel__controls--columns>[data-row="1"]{grid-row:1}.webgpu-panel__controls--columns>[data-row="2"]{grid-row:2}.webgpu-panel__controls--columns>[data-row="3"]{grid-row:3}.webgpu-panel__controls--columns>[data-row="4"]{grid-row:4}.webgpu-morph-controls{grid-row:1/span 4;align-self:stretch;gap:4px;min-width:0;margin-right:10px;display:grid;position:relative}.webgpu-morph-controls>.webgpu-control{border-left:0;padding:4px 0}.webgpu-control-blocker{background:linear-gradient(#020303cc, #020303cc), var(--viz-blocked-stripes);cursor:not-allowed;border:1px solid #ff5a4e8c;place-items:center;display:grid;position:absolute;inset:0}.webgpu-control-blocker span{background:var(--viz-bg);color:#ffcf9b;font:10px var(--viz-mono);text-align:center;text-transform:uppercase;letter-spacing:.06em;padding:8px}@media (width<=600px){.webgpu-panel__controls--columns{display:flex}.webgpu-panel__controls--columns>.webgpu-control{border-left:0;border-top:1px solid var(--viz-line-strong);flex-basis:100%;padding:7px 0}.webgpu-panel__controls--columns>[data-column="1"]{order:1}.webgpu-panel__controls--columns>[data-column="2"]{order:2}.webgpu-panel__controls--columns>[data-column="3"]{order:3}.webgpu-morph-controls{flex-basis:100%;margin-right:0}}@media (width<=440px){.webgpu-control{flex-basis:100%;padding:7px 0}.webgpu-control+.webgpu-control{border-left:0;border-top:1px solid var(--viz-line-strong)}}:root{--viz-bg:#020303;--viz-panel:#080a0b;--viz-panel-2:#0d1011;--viz-line:#202626;--viz-line-strong:#34413f;--viz-text:#e7eeea;--viz-muted:#7e8985;--viz-cyan:#2bcaff;--viz-coral:#ff806c;--viz-lime:#c9ff66;--viz-blocked-stripes:repeating-linear-gradient(135deg, #ffe05385 0 1px, #ff4b4985 1px 2px);--viz-sans:ui-sans-serif, system-ui, sans-serif;--viz-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace}.shader-explanation{overflow-anchor:none;border:1px solid var(--viz-line);background:var(--viz-panel);color:var(--viz-text);font:12px/1.6 var(--viz-mono);grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);margin:24px 0;display:grid}.shader-explanation__math,.shader-explanation__source{min-width:0;padding:12px}.shader-explanation__source{border-left:1px solid var(--viz-line)}.shader-explanation__label{color:var(--viz-coral);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;font-size:9px;display:block}.shader-explanation [data-term=position]{--trace-color:var(--viz-lime)}.shader-explanation [data-term=normal]{--trace-color:#ffcc4d}.shader-explanation [data-term=tangent]{--trace-color:var(--viz-cyan)}.shader-explanation__math button{border:1px solid var(--viz-line);width:100%;height:90px;color:var(--viz-text);font:inherit;text-align:left;cursor:pointer;background:0 0;grid-template-columns:minmax(0,1fr) auto;margin:0 0 10px;padding:8px;display:grid}.shader-explanation__term{color:var(--trace-color);letter-spacing:.08em;text-transform:uppercase;grid-column:1/-1;font-size:9px}.shader-explanation__equation{white-space:pre-wrap;overflow-wrap:anywhere;min-height:0;overflow:auto}.shader-explanation__arrow{color:var(--trace-color);opacity:0;align-self:center;margin-left:6px}.shader-explanation__math button:hover,.shader-explanation__math button[aria-pressed=true]{border-color:var(--trace-color)}.shader-explanation__math button[aria-pressed=true]{background:color-mix(in srgb, var(--trace-color) 6%, transparent)}.shader-explanation__math button[aria-pressed=true] .shader-explanation__arrow{opacity:1}.shader-explanation :is(button,pre):focus-visible{outline:1px solid var(--viz-cyan);outline-offset:3px}.shader-explanation .shader-explanation__source pre{background:var(--viz-bg);border:0;border-radius:0;height:320px;margin:0;padding:0;overflow:auto}.shader-explanation pre code{min-width:max-content;font:11px/1.8 var(--viz-mono);padding:6px 0;display:block}.shader-explanation__line{border-left:2px solid #0000;padding-right:8px;display:flex}.shader-explanation__line[data-highlighted=true]{border-left-color:var(--trace-color);color:var(--trace-color);background:color-mix(in srgb, var(--trace-color) 7%, transparent)}.shader-explanation__number{text-align:right;color:var(--viz-muted);-webkit-user-select:none;user-select:none;flex:0 0 3ch;margin-right:10px}@media (width<=600px){.shader-explanation{grid-template-columns:minmax(0,1fr)}.shader-explanation__source{border-left:0;border-top:1px solid var(--viz-line)}}