.playground{background:var(--color-border);border:1px solid var(--color-border);grid-template-columns:1fr;gap:1px;display:grid}@media (width>=60rem){.playground{grid-template-columns:1fr 20rem}}.stage{--ground:color-mix(in srgb, var(--color-surface) 94%, var(--color-text));--ground-dot:color-mix(in srgb, var(--ground) 78%, var(--color-text));--ground-edge:color-mix(in srgb, var(--ground) 62%, var(--color-text));background-color:var(--ground);align-content:center;justify-items:center;min-height:20rem;padding:1.5rem;display:grid;position:relative}.stage:before{content:"";background-image:radial-gradient(circle, var(--ground-dot) 1px, transparent 1.5px);pointer-events:none;background-size:1.25rem 1.25rem;position:absolute;inset:0;mask-image:radial-gradient(#000 35%,#0000 95%)}.drawing{justify-content:center;align-items:center;display:flex;position:relative}.drawing svg{background:var(--ground);outline:1px solid var(--ground-edge);display:block}@media (resolution>=2x){.drawing svg{outline-width:.5px}}.logo-stage .drawing{aspect-ratio:1;width:min(24rem,100%)}.logo-stage .drawing svg{width:100%;height:100%}.banner-stage .drawing{width:100%;height:min(24rem,60vh)}.banner-stage .drawing svg{width:auto;max-width:100%;height:auto;max-height:100%}.stage .empty{max-width:24rem;font-family:var(--font-mono);font-size:var(--size-sm);color:var(--color-muted);text-align:center;position:relative}.stage .broken{color:var(--color-red)}@media (width>=60rem){.stage{align-content:start}.drawing,.stage .empty{top:calc(var(--bar) + 1.5rem);position:sticky}}.panel{background:var(--color-base);flex-direction:column;gap:1rem;padding:1.25rem;display:flex}.panel-head{font-family:var(--font-mono);font-size:var(--size-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;display:flex}.panel-actions{gap:.5rem;display:flex}.field{flex-direction:column;gap:.35rem;display:flex}.field-head{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-muted);align-items:baseline;gap:.5rem;display:flex}.field-label{text-transform:lowercase}.field-value{color:var(--color-text);margin-left:auto}.reset{appearance:none;font:inherit;color:var(--color-muted);cursor:pointer;background:0 0;border:0;padding:0;line-height:1}.reset:hover:not(:disabled){color:var(--color-accent)}.reset:disabled{opacity:.3;cursor:default}.field input[type=range]{width:100%;accent-color:var(--color-accent)}.field .text,.field textarea{width:100%;font-family:var(--font-mono);color:var(--color-text);cursor:text;justify-content:flex-start}.field textarea{background:var(--color-base);border:1px solid var(--color-border);font-size:var(--size-xs);resize:vertical;padding:.5rem;line-height:1.5}.field textarea:focus-visible{outline:1px solid var(--color-accent);outline-offset:2px}.choice{flex-wrap:wrap;gap:.35rem;display:flex}.dropdown{display:flex;position:relative}.dropdown>.control{text-align:left;padding-right:1.75rem}.field .dropdown,.field .dropdown>.control{width:100%}.field .dropdown>.control{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-text);justify-content:flex-start}.dropdown:after{content:"";border-right:1px solid var(--color-muted);border-bottom:1px solid var(--color-muted);pointer-events:none;width:.35rem;height:.35rem;position:absolute;top:50%;right:.6rem;transform:translateY(-70%)rotate(45deg)}.dropdown:has([aria-expanded=true]):after{transform:translateY(-20%)rotate(-135deg)}.options{z-index:2;background:var(--color-base);border:1px solid var(--color-accent);min-width:100%;max-height:12rem;margin:0;padding:0;list-style:none;display:none;position:absolute;top:calc(100% + 2px);left:0;overflow-y:auto}.options.open{display:block}.options li{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-muted);cursor:pointer;padding:.3rem .5rem}.options li[aria-selected=true]{color:var(--color-text);box-shadow:inset 2px 0 0 var(--color-accent)}.options li.active{background:var(--color-surface);color:var(--color-text)}.choice button[aria-pressed=true]{background:var(--color-surface);color:var(--color-text);border-color:var(--color-accent)}.section{border-top:1px solid var(--color-border);flex-direction:column;gap:1rem;padding-top:1rem;display:flex}.section-label{font-family:var(--font-mono);font-size:var(--size-sm);color:var(--color-text);text-transform:lowercase}.range{align-items:center;gap:.5rem;display:flex}.range input[type=range]{flex:1;min-width:0}.range .number{width:5rem;font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-text);cursor:text;justify-content:flex-start;padding-block:.15rem}.range .unit{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-muted)}.swatches{flex-wrap:wrap;gap:.35rem;display:flex}.swatch{border:1px solid var(--color-border);cursor:pointer;width:1.5rem;height:1.5rem;padding:0}.swatch[aria-pressed=true],.swatch.picked{outline:1px solid var(--color-accent);outline-offset:2px}.swatch.empty{background:linear-gradient(to top right, transparent calc(50% - 1px), var(--color-muted) calc(50% - 1px), var(--color-muted) calc(50% + 1px), transparent calc(50% + 1px))}.swatch.picker{appearance:none;background:0 0;border-style:dashed;margin-left:.35rem}.swatch.picker::-webkit-color-swatch-wrapper{padding:0}.swatch.picker::-webkit-color-swatch{border:0}.swatch.picker::-moz-color-swatch{border:0}.pending{font-family:var(--font-mono);font-size:var(--size-xs);color:var(--color-muted)}