:root{--chalk-grain:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%3E%3Cfilter%20id%3D%27chalk%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.9%27%20numOctaves%3D%273%27%20seed%3D%2717%27%20stitchTiles%3D%27stitch%27%20result%3D%27noise%27%2F%3E%3CfeColorMatrix%20in%3D%27noise%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%200%200%200%200%201%200%200%200%200%201%204%200%200%200%20-1.25%27%2F%3E%3C%2Ffilter%3E%3Cpath%20fill%3D%27white%27%20filter%3D%27url%28%23chalk%29%27%20d%3D%27M0%200h64v64H0z%27%2F%3E%3C%2Fsvg%3E);--chalk-rule:var(--pencil-line-mask) center / 100% 100% no-repeat intersect, var(--chalk-grain) top left / 64px 64px repeat;--pencil-grain:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2764%27%20height%3D%2764%27%3E%3Cdefs%3E%3Cfilter%20id%3D%27tooth%27%20x%3D%270%27%20y%3D%270%27%20width%3D%27100%25%27%20height%3D%27100%25%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.85%27%20numOctaves%3D%273%27%20seed%3D%277%27%20stitchTiles%3D%27stitch%27%20result%3D%27noise%27%2F%3E%3CfeColorMatrix%20in%3D%27noise%27%20type%3D%27matrix%27%20values%3D%270%200%200%200%201%200%200%200%200%201%200%200%200%200%201%202.4%200%200%200%20-.45%27%20result%3D%27grain%27%2F%3E%3CfeComposite%20in%3D%27SourceGraphic%27%20in2%3D%27grain%27%20operator%3D%27in%27%2F%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cpath%20fill%3D%27white%27%20filter%3D%27url%28%23tooth%29%27%20d%3D%27M0%200h64v64H0z%27%2F%3E%3C%2Fsvg%3E);--pencil-line-mask:url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20320%208%27%20preserveAspectRatio%3D%27none%27%3E%3Cg%20fill%3D%27white%27%3E%3Cpath%20d%3D%27M2%204.4C44%203.2%20112%203.1%20164%203.3S274%203.2%20318%204.2C271%204.7%20225%204.9%20168%204.8S50%205%202%204.4Z%27%2F%3E%3Cpath%20d%3D%27M15%205.4Q158%205%20303%205.2%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%27.35%27%20opacity%3D%27.35%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E);--pencil-rule:var(--pencil-line-mask) center / 100% 100% no-repeat intersect, var(--pencil-grain) top left / 64px 64px repeat}.pencil-mark,.pencil-outline,.chalk-outline{-webkit-mask-image:var(--pencil-grain);-webkit-mask-image:var(--pencil-grain);mask-image:var(--pencil-grain);pointer-events:none;-webkit-mask-size:64px 64px;mask-size:64px 64px}.pencil-outline,.chalk-outline{border-radius:inherit;opacity:.72;border:1.5px solid;position:absolute;inset:0}.pencil-outline:after{content:"";border-radius:inherit;opacity:.24;border:.5px solid;position:absolute;inset:-.4px .3px .4px -.3px}.chalk-outline{opacity:.85;-webkit-mask-image:var(--chalk-grain);-webkit-mask-image:var(--chalk-grain);mask-image:var(--chalk-grain);border-width:2px}.chalk-outline:after{content:"";border-radius:inherit;opacity:.3;border:1px solid;position:absolute;inset:-.8px .5px .6px -.5px}.pencil-line{-webkit-mask:var(--pencil-rule);-webkit-mask:var(--pencil-rule);mask:var(--pencil-rule);pointer-events:none;background:currentColor}@media (forced-colors:active){.pencil-mark,.pencil-outline,.chalk-outline,.pencil-line{opacity:1;-webkit-mask:none;mask:none}.pencil-line{forced-color-adjust:none;background:canvastext;height:1px}}
.playground{gap:1.4em;display:grid}.playground button{color:inherit;background:0 0;border:0;border-radius:6px;align-items:center;gap:.4em;padding:.3em .55em;display:inline-flex}.playground svg{flex-shrink:0;width:1.1em;height:1.1em}.playground textarea,.playground input{background:color-mix(in srgb, currentColor 5%, transparent);resize:vertical;border:0;border-radius:6px;width:100%;padding:.5em .65em;line-height:1.45}.playground textarea:focus,.playground input:focus{outline:2px solid color-mix(in srgb, currentColor 45%, transparent);outline-offset:0}.pg-field{gap:.45em;display:grid}.pg-field>:first-child{color:color-mix(in srgb, currentColor 62%, transparent);font-size:.82em}.pg-field textarea{font:inherit;resize:none;field-sizing:content;min-height:2.4em}.pg-media{flex-wrap:wrap;align-items:center;gap:.3em .4em;margin-left:-.55em;font-size:.86em;display:flex}.pg-media:empty{display:none}.pg-chip{align-items:center;margin:0 .4em 0 .55em;display:inline-flex;position:relative}.pg-chip img{object-fit:cover;border-radius:6px;max-width:7em;height:3.6em}.pg-chip .pg-play{background:color-mix(in srgb, currentColor 6%, transparent);font-variant-numeric:tabular-nums}.pg-chip .pg-remove{background:var(--pg-surface,Canvas);box-shadow:0 0 0 1px color-mix(in srgb, currentColor 15%, transparent);border-radius:99px;padding:.15em;position:absolute;top:-.6em;right:-.75em}.pg-record{background:#d8352a;border-radius:99px;width:.75em;height:.75em}.pg-stop{color:#d8352a;fill:currentColor}.pg-tool{font-variant-numeric:tabular-nums}.pg-options{gap:.35em;margin:0;padding:0;list-style:none;display:grid}.pg-option{background:color-mix(in srgb, currentColor 5%, transparent);border-radius:6px;align-items:center;display:flex;position:relative}.pg-option input{background:0 0;flex:1;min-width:0;position:relative}.pg-fill{border-radius:inherit;opacity:.13;-webkit-mask:var(--pencil-grain) top left / 64px 64px repeat;-webkit-mask:var(--pencil-grain) top left / 64px 64px repeat;mask:var(--pencil-grain) top left / 64px 64px repeat;pointer-events:none;background:currentColor;animation:.7s cubic-bezier(.15,.85,.25,1) both pg-fill;position:absolute;inset:0 auto 0 0}.pg-option[data-winner] .pg-fill{opacity:.3}@keyframes pg-fill{0%{width:0}}.pg-percent{font-variant-numeric:tabular-nums;color:color-mix(in srgb, currentColor 70%, transparent);padding:0 .65em;position:relative}.pg-option[data-winner] input,.pg-option[data-winner] .pg-percent{color:inherit;font-weight:600}.pg-option .pg-remove{opacity:0;margin-right:.2em;position:relative}.pg-option:is(:hover,:focus-within) .pg-remove{opacity:.6}.pg-option .pg-remove:hover{opacity:1}.pg-add{justify-content:center;width:100%;font-size:.86em;color:color-mix(in srgb, currentColor 62%, transparent)!important}.pg-add:hover{color:inherit!important}.pg-run{justify-content:flex-end;align-items:center;gap:1em;display:flex}.playground .pg-submit{background:color-mix(in srgb, currentColor 9%, transparent);padding:.4em 1.1em;font-weight:550}.playground .pg-submit:hover:not(:disabled){background:color-mix(in srgb, currentColor 14%, transparent)}.pg-meta{color:color-mix(in srgb, currentColor 62%, transparent);font-variant-numeric:tabular-nums;font-size:.82em}.pg-error{color:var(--pg-error,#a1301f);margin:0}.pg-modes{justify-self:end;gap:.2em;margin-bottom:-.6em;display:flex}.pg-modes [aria-selected=true]{background:color-mix(in srgb, currentColor 9%, transparent)}.pg-json{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5em;display:grid}.pg-json textarea,.pg-json pre{min-height:420px;font-family:var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:color-mix(in srgb, currentColor 5%, transparent);border-radius:8px;margin:0;padding:1em;font-size:12px}@media (max-width:720px){.pg-json{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.pg-fill{animation:none}}