@layer components{.playground{gap:var(--space-md);flex-direction:column;display:flex}.playground__presets,.playground__toolbar,.playground__code-head,.playground__copy{align-items:center;gap:var(--space-xs);flex-wrap:wrap;display:flex}.playground__body{align-items:start;gap:var(--space-lg);grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);display:grid}@media (width<=1023px){.playground__body{grid-template-columns:minmax(0,1fr)}}.playground__controls{gap:var(--space-sm);flex-direction:column;display:flex}.playground__output-column{gap:var(--space-xs);flex-direction:column;min-inline-size:0;display:flex}.playground__field,.playground__text,.playground__select{gap:var(--space-3xs);flex-direction:column;display:flex}.playground__label{font-weight:var(--font-weight-semibold)}.playground__note{color:var(--color-foreground-secondary);font-size:var(--font-size--1);margin:0}.playground__chips{gap:var(--space-3xs);flex-wrap:wrap;display:flex}.playground__chip{min-block-size:var(--control-height-sm);padding-inline:var(--space-xs);border:1px solid var(--color-border);border-radius:var(--control-radius);background:var(--color-bg);color:var(--color-foreground);font-family:var(--font-family-mono);font-size:var(--font-size--1);cursor:pointer}.playground__chip[data-hovered]{border-color:var(--color-foreground)}.playground__chip[data-selected]{border-color:var(--color-action);background:var(--color-action);color:var(--color-on-action)}.playground__chip[data-disabled]{opacity:.4;cursor:not-allowed}.playground__chip[data-focus-visible]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.playground__compass{grid-template-columns:repeat(3, var(--target-min));gap:var(--space-3xs);display:grid}.playground__chip--square{inline-size:var(--target-min);block-size:var(--target-min);font-family:var(--font-family-body);font-size:var(--font-size-0);padding:0}.playground__slider{gap:var(--space-3xs);flex-direction:column;display:flex}.playground__slider[data-disabled]{opacity:.4}.playground__slider-head{justify-content:space-between;gap:var(--space-xs);display:flex}.playground__output{font-family:var(--font-family-mono);font-size:var(--font-size--1)}.playground__track{block-size:var(--target-min);cursor:pointer;position:relative}.playground__track:before{content:"";background:var(--color-rule);block-size:2px;position:absolute;inset-block-start:50%;inset-inline:0;translate:0 -50%}.playground__fill{background:var(--color-action);block-size:2px;position:absolute;inset-block-start:50%;inset-inline-start:0;translate:0 -50%}.playground__thumb{inline-size:var(--space-sm);block-size:var(--space-sm);border-radius:var(--radius-full);background:var(--color-action);inset-block-start:50%}.playground__thumb[data-dragging]{scale:1.2}.playground__thumb[data-focus-visible]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.playground__select-button{justify-content:space-between;align-items:center;gap:var(--space-xs);min-block-size:var(--control-height-md);padding-inline:var(--control-padding-inline);border:1px solid var(--color-border);border-radius:var(--control-radius);background:var(--color-bg);color:var(--color-foreground);font-family:var(--font-family-mono);font-size:var(--font-size--1);text-align:start;display:flex}.playground__select-button[data-focus-visible]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.playground__popover{min-inline-size:var(--trigger-width);border:1px solid var(--color-border);border-radius:var(--control-radius);background:var(--color-bg);max-block-size:20rem;overflow-y:auto}.playground__listbox{outline:none}.playground__option{padding:var(--space-3xs) var(--space-xs);font-family:var(--font-family-mono);font-size:var(--font-size--1);cursor:pointer}.playground__option[data-focused]{background:var(--color-bg-alt)}.playground__option[data-selected]{font-weight:var(--font-weight-bold)}.playground__switch{align-items:center;gap:var(--space-xs);min-block-size:var(--target-min);cursor:pointer;display:flex}.playground__switch[data-focus-visible] .playground__switch-track{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.playground__switch-track{inline-size:calc(var(--space-sm) * 2 + 4px);block-size:calc(var(--space-sm) + 4px);border-radius:var(--radius-full);background:var(--color-rule);flex:none;position:relative}.playground__switch-track:after{content:"";inline-size:var(--space-sm);block-size:var(--space-sm);border-radius:var(--radius-full);background:var(--color-bg);position:absolute;inset-block-start:2px;inset-inline-start:2px}@media (prefers-reduced-motion:no-preference){.playground__switch-track:after{transition:translate .15s var(--ease-out-quad)}}[data-selected]>.playground__switch-track{background:var(--color-action)}[data-selected]>.playground__switch-track:after{translate:var(--space-sm) 0}.playground__textarea{padding:var(--space-2xs) var(--space-xs);border:1px solid var(--color-border);border-radius:var(--control-radius);background:var(--color-bg);color:var(--color-foreground);font:inherit;resize:vertical}.playground__textarea[data-focus-visible]{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.playground__reset{align-self:start}.playground__replay{margin-inline-start:auto}.playground__stage{border:1px solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-bg-alt);block-size:28rem}.playground__iframe{border-radius:var(--radius-md);background:var(--color-bg);border:0;block-size:100%;inline-size:100%;display:block}.playground__code{gap:var(--space-xs);flex-direction:column;margin-block-start:var(--space-sm);display:flex}.playground__code-head h2{font-size:var(--font-size-1);margin-inline-end:auto}.playground__pre{padding:var(--space-sm);border-radius:var(--radius-md);background:var(--color-bg-alt);font-family:var(--font-family-mono);font-size:var(--font-size--1);white-space:pre;margin:0;line-height:1.6;overflow-x:auto}.playground__pre:focus-visible{outline:var(--focus-width) solid var(--color-focus);outline-offset:var(--focus-offset)}.lede[data-astro-cid-5cyazgt5]{color:var(--color-foreground-secondary);font-size:var(--font-size-1);font-weight:var(--font-weight-body)}}