.wb{gap:calc(var(--space,16px) * 1.5);margin-block:8px 32px;display:grid}.wb-form{gap:14px;display:grid}.wb-field{border:0;gap:6px;min-inline-size:0;margin:0;padding:0;display:grid}.wb-field>span,.wb-field>legend{color:var(--color-muted);padding:0;font-size:.9rem}.wb-field input:not([type=checkbox]),.wb-field select{font:inherit;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-block-size:44px;inline-size:100%;color:var(--color-text);padding:8px 12px}.wb-row{grid-template-columns:1fr 1fr;gap:12px;display:grid}.wb-seg{flex-wrap:wrap;gap:8px;display:flex}.wb-seg button,.wb-swatches button{font:inherit;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-block-size:44px;color:var(--color-text);cursor:pointer;padding:8px 14px}.wb-seg button[aria-pressed=true]{background:var(--color-accent);color:var(--color-accent-text);border-color:var(--color-accent)}.wb-swatches{flex-wrap:wrap;gap:10px;display:flex}.wb-swatches button{place-items:center;block-size:48px;inline-size:48px;padding:0;display:grid}.wb-swatches button>span[aria-hidden]{border-radius:50%;block-size:14px;inline-size:14px}.wb-swatches button[aria-pressed=true]{outline:3px solid var(--color-accent);outline-offset:2px}.wb-checks{gap:8px;display:grid}.wb-checks label,.wb-check{align-items:center;gap:10px;min-block-size:32px;display:flex}.wb-checks input,.wb-check input{block-size:20px;inline-size:20px;accent-color:var(--color-accent)}.wb-sr{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.wb-h{margin-block:0 8px;font-size:1rem}.wb-preview{border:1px dashed var(--color-border);border-radius:var(--radius);margin-block-end:20px;overflow:hidden}.wb-preview iframe{border:0;inline-size:100%;display:block}.wb-code{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);inline-size:100%;color:var(--color-text);resize:vertical;padding:10px 12px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.wb-copy{inline-size:100%;margin-block-start:10px}.wb-how{padding-inline-start:1.2em}.wb-how li{margin-block-end:6px}@media (min-width:900px){.wb{grid-template-columns:minmax(300px,380px) 1fr;align-items:start}.wb-out{position:sticky;inset-block-start:16px}.wb-copy{inline-size:auto}}