:root{--paper:#e9eef2;--panel:#f8fafb;--ink:#1b2733;--muted:#5d6c7a;--rule:#c3cfd9;--stage:#1f2a36;--ok:#1d7a4d;--bad:#b3261e;--serif:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;--sans:ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}body{background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans);margin:0;padding:2rem 1.25rem 3rem}.page-head,.layout{max-width:1120px;margin:0 auto}h1{font:600 2rem/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 .5rem}h2{font:600 1.2rem/1.2 var(--serif);margin:0 0 .25rem}.page-head p{max-width:68ch;color:var(--muted);margin:0 0 1.5rem}.layout{grid-template-columns:minmax(300px,500px) minmax(0,1fr);align-items:start;gap:2rem;display:grid}@media (width<=900px){.layout{grid-template-columns:1fr}}.stage{position:sticky;top:1rem}@media (width<=900px){.stage{position:static}}.canvas-stack{aspect-ratio:1;background:repeating-conic-gradient(#2a3744 0% 25%, var(--stage) 0% 50%) 0 0 / 24px 24px;border-radius:4px;width:100%;max-width:480px;position:relative;overflow:hidden}.canvas-stack canvas{width:100%;height:100%;position:absolute;inset:0}#gl{image-rendering:pixelated}#overlay{touch-action:none;cursor:crosshair}#overlay.dragging{cursor:grabbing!important}.controls{gap:.75rem;max-width:480px;margin-top:1rem;display:grid}.controls label{color:var(--muted);gap:.2rem;font-size:.9rem;display:grid}.controls label:has(input[type=range]){grid-template-columns:1fr auto}.controls label:has(input[type=range]) input{grid-column:1/-1}.controls .check{align-items:center;gap:.5rem;display:flex}output{font-variant-numeric:tabular-nums;color:var(--ink)}select,button{font:inherit;border:1px solid var(--rule);background:var(--panel);color:var(--ink);border-radius:4px;padding:.45rem .6rem}button{cursor:pointer;justify-self:start}button:hover{border-color:var(--ink)}:focus-visible{outline-offset:2px;outline:2px solid #3a6ff7}fieldset{border:1px solid var(--rule);border-radius:4px;padding:.4rem .6rem .6rem}legend{color:var(--muted);padding:0 .25rem;font-size:.9rem}input[type=color]{border:1px solid var(--rule);background:0 0;width:3rem;height:2rem;margin-right:.4rem;padding:0}.pipeline{gap:1.5rem;min-width:0;display:grid}.step{background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--ink);border-radius:4px;min-width:0;padding:1rem 1.25rem 1.25rem}.step p{color:var(--muted);max-width:70ch;margin:0 0 .75rem}table{border-collapse:collapse;width:100%;margin-bottom:.75rem;font-size:.9rem}th,td{text-align:left;border-bottom:1px solid var(--rule);font-variant-numeric:tabular-nums;padding:.3rem .5rem}th{color:var(--muted);font-size:.8rem;font-weight:600}pre{color:#dce6ee;font:.8rem/1.5 var(--mono);background:#16202a;border-radius:4px;margin:.75rem 0 0;padding:.75rem 1rem;overflow-x:auto}code{font-family:var(--mono);font-size:.9em}.swatch{vertical-align:-.15em;border:1px solid #0006;border-radius:2px;width:1em;height:1em;display:inline-block}.inspector{min-height:7.5rem}.inspector dl{grid-template-columns:max-content 1fr;gap:.25rem 1rem;margin:0;font-size:.9rem;display:grid}.inspector dt{color:var(--muted);font-family:var(--mono);padding-top:.1rem;font-size:.8rem}.inspector dd{font-variant-numeric:tabular-nums;margin:0}.hint,.muted{color:var(--muted)}.ok{color:var(--ok);font-weight:600}.bad{color:var(--bad);font-weight:600}.error{color:var(--bad);background:#fbe9e7;border-radius:4px;max-width:1120px;margin:0 auto 1rem;padding:.75rem 1rem}