html{color:var(--sl-color-text);background:var(--sl-color-bg)}body{min-height:100vh;font-family:var(--sl-font,var(--sl-font-system)), var(--sl-font-system);margin:0;font-weight:400}.design-lab:where(.astro-mzkfeszu){box-sizing:border-box;width:min(100%,80rem);padding:var(--wa-space-xl,2rem);margin-inline:auto}.lab-header:where(.astro-mzkfeszu),.section-heading:where(.astro-mzkfeszu){justify-content:space-between;align-items:center;gap:var(--wa-space-m,1rem);display:flex}.lab-header:where(.astro-mzkfeszu){margin-block-end:var(--wa-space-xl,2rem)}.lab-header:where(.astro-mzkfeszu) a:where(.astro-mzkfeszu){color:var(--sl-color-text-accent)}.utility-links:where(.astro-mzkfeszu){gap:var(--wa-space-m,1rem);flex-wrap:wrap;display:flex}.mode-toggle:where(.astro-mzkfeszu){width:max-content;margin-block-start:var(--wa-space-m,1rem)}.eyebrow:where(.astro-mzkfeszu){margin:0 0 var(--wa-space-2xs,.25rem);color:var(--sl-color-gray-3);font-size:var(--sl-text-xs);text-transform:uppercase;letter-spacing:.08em;font-weight:500}h1:where(.astro-mzkfeszu),h2:where(.astro-mzkfeszu),h3:where(.astro-mzkfeszu),p:where(.astro-mzkfeszu){margin-block-start:0}h1:where(.astro-mzkfeszu),h2:where(.astro-mzkfeszu),h3:where(.astro-mzkfeszu){color:var(--sl-color-white);font-weight:700;line-height:var(--sl-line-height-headings)}h1:where(.astro-mzkfeszu){font-size:var(--sl-text-4xl);margin-block-end:0}h2:where(.astro-mzkfeszu){font-size:var(--sl-text-2xl);margin-block-end:0}h3:where(.astro-mzkfeszu){font-size:var(--sl-text-base);margin-block-end:var(--wa-space-2xs,.25rem)}.lab-panel:where(.astro-mzkfeszu){padding:var(--wa-space-l,1.5rem);border:1px solid var(--sl-color-hairline);border-radius:var(--wa-border-radius-m,.375rem);background:var(--sl-color-bg-nav);margin-block-end:var(--wa-space-xl,2rem)}fieldset:where(.astro-mzkfeszu){min-width:0;padding:var(--wa-space-m,1rem);border:1px solid var(--sl-color-hairline);border-radius:var(--wa-border-radius-m,.375rem);margin:0}legend:where(.astro-mzkfeszu){padding-inline:var(--wa-space-2xs,.25rem);color:var(--sl-color-white);font-weight:500}.controls-grid:where(.astro-mzkfeszu),.fieldset-grid:where(.astro-mzkfeszu){gap:var(--wa-space-m,1rem);margin-block:var(--wa-space-l,1.5rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));display:grid}.controls-grid:where(.astro-mzkfeszu).compact{margin-block:0}label:where(.astro-mzkfeszu){gap:var(--wa-space-2xs,.25rem);color:var(--sl-color-gray-2);font-size:var(--sl-text-sm);font-weight:400;display:grid}label:where(.astro-mzkfeszu) span:where(.astro-mzkfeszu),output:where(.astro-mzkfeszu){font-weight:400}.checkbox-label:where(.astro-mzkfeszu){align-items:center;gap:var(--wa-space-xs,.5rem);display:flex}.checkbox-label:where(.astro-mzkfeszu) input:where(.astro-mzkfeszu){width:auto}select:where(.astro-mzkfeszu),input:where(.astro-mzkfeszu),textarea:where(.astro-mzkfeszu),button:where(.astro-mzkfeszu){font:inherit;font-weight:400}select:where(.astro-mzkfeszu),input:where(.astro-mzkfeszu),textarea:where(.astro-mzkfeszu){box-sizing:border-box;border:1px solid var(--sl-color-gray-5);border-radius:var(--wa-border-radius-s,.25rem);background:var(--sl-color-black);width:100%;color:var(--sl-color-white)}select:where(.astro-mzkfeszu),input:where(.astro-mzkfeszu){min-height:2.5rem;padding-inline:var(--wa-space-s,.75rem)}input:where(.astro-mzkfeszu)[type=range]{accent-color:var(--sl-color-accent);padding-inline:0}textarea:where(.astro-mzkfeszu){min-height:7.5rem;padding:var(--wa-space-s,.75rem);resize:vertical;font-family:var(--sl-font-mono);font-weight:400}.relationship:where(.astro-mzkfeszu){margin-block:0 var(--wa-space-m,1rem);color:var(--sl-color-gray-2);font-family:var(--sl-font-mono);font-weight:400}.preview-grid:where(.astro-mzkfeszu){gap:var(--wa-space-l,1.5rem);grid-template-columns:minmax(0,1.1fr) minmax(18rem,.9fr);display:grid}.preview-panel:where(.astro-mzkfeszu){min-height:22rem;padding:var(--wa-space-l,1.5rem);border:1px solid var(--sl-color-hairline);border-radius:var(--wa-border-radius-m,.375rem);background:var(--lab-preview-bg);color:var(--lab-preview-text);font-weight:400}.preview-panel:where(.astro-mzkfeszu)[data-preview-theme=dark],.button-preview-grid:where(.astro-mzkfeszu)[data-preview-theme=dark]{--lab-preview-bg:var(--gc-ebony-clay);--lab-preview-surface:var(--gc-mirage);--lab-preview-border:var(--gc-rhino);--lab-preview-text:var(--gc-athens-gray);--lab-preview-heading:var(--gc-white)}.preview-panel:where(.astro-mzkfeszu)[data-preview-theme=light],.button-preview-grid:where(.astro-mzkfeszu)[data-preview-theme=light]{--lab-preview-bg:var(--gc-whisper);--lab-preview-surface:var(--gc-white);--lab-preview-border:var(--gc-athens-gray);--lab-preview-text:var(--gc-rhino);--lab-preview-heading:var(--gc-mirage)}.sample-surface:where(.astro-mzkfeszu){min-height:16rem;padding:var(--wa-space-l,1.5rem);border:1px solid var(--lab-preview-border);border-radius:var(--wa-border-radius-m,.375rem);background:var(--lab-preview-surface)}.color-mix-surface:where(.astro-mzkfeszu){background:var(--lab-mix-preview,var(--lab-preview-surface))}.color-mix-surface:where(.astro-mzkfeszu)[data-mix-preview-mode=gradient]{background:var(--lab-mix-preview), var(--lab-preview-surface)}.gradient-surface:where(.astro-mzkfeszu){background:var(--lab-gradient-preview), var(--lab-preview-surface)}.sample-surface:where(.astro-mzkfeszu) h3:where(.astro-mzkfeszu),.context-card:where(.astro-mzkfeszu) h3:where(.astro-mzkfeszu){color:var(--lab-preview-heading)}.preview-kicker:where(.astro-mzkfeszu){color:var(--sl-color-text-accent);font-weight:500}.sample-surface:where(.astro-mzkfeszu) button:where(.astro-mzkfeszu),.segmented:where(.astro-mzkfeszu) button:where(.astro-mzkfeszu){border:1px solid var(--sl-color-accent);border-radius:var(--wa-border-radius-s,.25rem);background:var(--sl-color-accent);min-height:2.25rem;color:var(--sl-color-text-invert);cursor:pointer}.sample-surface:where(.astro-mzkfeszu) button:where(.astro-mzkfeszu){padding-inline:var(--wa-space-m,1rem);margin-block-start:var(--wa-space-m,1rem)}.segmented:where(.astro-mzkfeszu){padding:var(--wa-space-3xs,.125rem);border:1px solid var(--sl-color-hairline);border-radius:var(--wa-border-radius-m,.375rem);background:var(--sl-color-black);grid-template-columns:1fr 1fr;display:inline-grid}.segmented:where(.astro-mzkfeszu) button:where(.astro-mzkfeszu){color:var(--sl-color-gray-2);background:0 0;border-color:#0000}.segmented:where(.astro-mzkfeszu) button:where(.astro-mzkfeszu).is-active{background:var(--sl-color-accent);color:var(--sl-color-text-invert);font-weight:500}.code-output:where(.astro-mzkfeszu){gap:var(--wa-space-m,1rem);align-content:start;font-weight:400;display:grid}.button-lab-scope:where(.astro-mzkfeszu){--lab-button-bg:linear-gradient(217deg, var(--gc-blue-violet), var(--gc-paradiso));--lab-button-border:var(--gc-patina);--lab-button-label:var(--gc-white);--lab-button-hover-lift:3px;--lab-button-shadow:var(--wa-shadow-m);--lab-icon-primary:var(--gc-white);--lab-icon-secondary:var(--gc-biloba-flower);--lab-icon-primary-opacity:1;--lab-icon-secondary-opacity:.45}.design-lab-button:where(.astro-mzkfeszu)::part(button){justify-content:center;align-items:center;gap:var(--wa-space-xs,.5rem);background:var(--lab-button-bg);border-color:var(--lab-button-border);color:var(--lab-button-label);box-shadow:var(--lab-button-shadow);transition:transform var(--wa-transition-normal,.2s) ease, box-shadow var(--wa-transition-normal,.2s) ease;display:inline-flex}.design-lab-button:where(.astro-mzkfeszu)::part(button):hover{transform:translateY(calc(var(--lab-button-hover-lift) * -1))}.design-lab-button:where(.astro-mzkfeszu)::part(label){color:var(--lab-button-label);font-weight:500}.design-lab-button:where(.astro-mzkfeszu) wa-icon:where(.astro-mzkfeszu){--primary-color:var(--lab-icon-primary);--secondary-color:var(--lab-icon-secondary);--primary-opacity:var(--lab-icon-primary-opacity);--secondary-opacity:var(--lab-icon-secondary-opacity);flex:none;line-height:1}.button-preview-grid:where(.astro-mzkfeszu){gap:var(--wa-space-m,1rem);margin-block:var(--wa-space-l,1.5rem);padding:var(--wa-space-m,1rem);border:1px solid var(--sl-color-hairline);border-radius:var(--wa-border-radius-m,.375rem);background:var(--lab-preview-bg);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));display:grid}.context-card:where(.astro-mzkfeszu){min-height:13rem;padding:var(--wa-space-l,1.5rem);border:1px solid var(--context-border);border-radius:var(--wa-border-radius-m,.375rem);background:var(--context-bg);color:var(--context-text);font-weight:400}.context-card:where(.astro-mzkfeszu) p:where(.astro-mzkfeszu){min-height:3.5rem}.context-ebony:where(.astro-mzkfeszu){--context-bg:var(--gc-ebony-clay);--context-border:var(--gc-rhino);--context-text:var(--gc-athens-gray);--lab-preview-heading:var(--gc-white)}.context-mirage:where(.astro-mzkfeszu){--context-bg:var(--gc-mirage);--context-border:var(--gc-rhino);--context-text:var(--gc-athens-gray);--lab-preview-heading:var(--gc-white)}.context-rhino:where(.astro-mzkfeszu){--context-bg:var(--gc-rhino);--context-border:var(--gc-calypso);--context-text:var(--gc-athens-gray);--lab-preview-heading:var(--gc-white)}.context-whisper:where(.astro-mzkfeszu){--context-bg:var(--gc-whisper);--context-border:var(--gc-athens-gray);--context-text:var(--gc-rhino);--lab-preview-heading:var(--gc-mirage)}.button-output:where(.astro-mzkfeszu){margin-block-start:var(--wa-space-l,1.5rem)}@media (width<=48rem){.design-lab:where(.astro-mzkfeszu){padding:var(--wa-space-m,1rem)}.lab-header:where(.astro-mzkfeszu),.section-heading:where(.astro-mzkfeszu),.preview-grid:where(.astro-mzkfeszu){grid-template-columns:1fr;display:grid}}