:root {
  --demo-space-card: 1.25rem;
  --demo-radius-card: .75rem;
  color-scheme: light;
  --demo-hsp-xs: .25rem;
  --demo-hsp-sm: .5rem;
  --demo-hsp-md: 1rem;
  --demo-hsp-lg: 1.5rem;
  --demo-hsp-xl: 2rem;
  --demo-vsp-2xs: .25rem;
  --demo-vsp-xs: .5rem;
  --demo-vsp-sm: .75rem;
  --demo-vsp-md: 1rem;
  --demo-vsp-lg: 1.75rem;
  --demo-vsp-xl: 2.5rem;
  --demo-vsp-2xl: 3.5rem;
  --demo-scale-xs: .75rem;
  --demo-scale-sm: .875rem;
  --demo-scale-base: 1rem;
  --demo-scale-md: 1.125rem;
  --demo-scale-lg: 1.25rem;
  --demo-scale-xl: 1.75rem;
  --demo-scale-2xl: 2.5rem;
  --demo-text-page-title: var(--demo-scale-xl);
  --demo-text-section-title: var(--demo-scale-lg);
  --demo-text-subsection-title: var(--demo-scale-md);
  --demo-text-body: var(--demo-scale-base);
  --demo-text-helper: var(--demo-scale-sm);
  --demo-text-annotation: var(--demo-scale-xs);
  --demo-leading-tight: 1.2;
  --demo-leading-body: 1.6;
  --demo-leading-relaxed: 1.8;
  --demo-weight-body: 400;
  --demo-weight-heading: 700;
  --demo-font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --demo-font-mono: ui-monospace, "Cascadia Code", Menlo, monospace;
  --demo-radius-sm: .25rem;
  --demo-radius-md: .5rem;
  --demo-radius-lg: 1rem;
  --demo-transition-fast: .12s;
  --demo-transition-normal: .22s;
  --demo-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --demo-easing-linear: linear;
  --demo-palette-base-0: oklch(98.5% .003 264);
  --demo-palette-base-1: oklch(95% .004 264);
  --demo-palette-base-2: oklch(88% .006 264);
  --demo-palette-base-3: oklch(62% .01 264);
  --demo-palette-base-4: oklch(38% .012 264);
  --demo-palette-base-5: oklch(22% .014 264);
  --demo-palette-base-6: oklch(13% .012 264);
  --demo-palette-brand-0: oklch(95% .03 250);
  --demo-palette-brand-1: oklch(80% .1 250);
  --demo-palette-brand-2: oklch(58% .19 250);
  --demo-palette-brand-3: oklch(45% .16 250);
  --demo-palette-brand-4: oklch(32% .11 250);
  --demo-palette-accent-0: oklch(95% .035 50);
  --demo-palette-accent-1: oklch(78% .12 50);
  --demo-palette-accent-2: oklch(62% .15 50);
  --demo-palette-accent-3: oklch(45% .12 50);
  --demo-palette-state-0: oklch(64% .15 150);
  --demo-palette-state-1: oklch(62% .19 25);
  --demo-palette-state-2: oklch(76% .14 82);
  --demo-palette-state-3: oklch(64% .14 245);
  --demo-bg: light-dark(var(--demo-palette-base-0), var(--demo-palette-base-6));
  --demo-ink: light-dark(var(--demo-palette-base-6), var(--demo-palette-base-0));
  --demo-surface: light-dark(var(--demo-palette-base-1), var(--demo-palette-base-5));
  --demo-color-border: light-dark(var(--demo-palette-base-2), var(--demo-palette-base-4));
  --demo-color-muted: light-dark(var(--demo-palette-base-4), var(--demo-palette-base-2));
  --demo-color-code-bg: light-dark(var(--demo-palette-base-6), var(--demo-palette-base-1));
  --demo-color-code-fg: light-dark(var(--demo-palette-base-0), var(--demo-palette-base-6));
  --demo-color-primary: light-dark(var(--demo-palette-brand-3), var(--demo-palette-brand-1));
  --demo-color-primary-hover: light-dark(var(--demo-palette-brand-4), var(--demo-palette-brand-0));
  --demo-color-primary-subtle: light-dark(var(--demo-palette-brand-0), var(--demo-palette-brand-4));
  --demo-color-accent: light-dark(var(--demo-palette-accent-3), var(--demo-palette-accent-1));
  --demo-color-success: var(--demo-palette-state-0);
  --demo-color-danger: var(--demo-palette-state-1);
  --demo-color-warning: var(--demo-palette-state-2);
  --demo-color-info: var(--demo-palette-state-3);
}

*, :before, :after {
  box-sizing: border-box;
}

:root[data-theme="light"] {
  color-scheme: light !important;
}

:root[data-theme="dark"] {
  color-scheme: dark !important;
}

html {
  background: var(--demo-bg);
  color: var(--demo-ink);
  font-family: var(--demo-font-sans);
  font-size: var(--demo-text-body);
  line-height: var(--demo-leading-body);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--demo-bg);
}

button, input, select, textarea {
  color: inherit;
  font: inherit;
}

a {
  color: var(--demo-color-primary);
}

a:hover {
  color: var(--demo-color-primary-hover);
}

code {
  font-family: var(--demo-font-mono);
}

.lRQ8eW_card{background:var(--demo-surface);color:var(--demo-ink);padding:var(--demo-space-card);border-radius:var(--demo-radius-card);border:1px solid var(--demo-color-border)}.lRQ8eW_title{margin:0;color:var(--demo-ink);font-size:var(--demo-text-section-title);font-weight:var(--demo-weight-heading);line-height:var(--demo-leading-tight)}.lRQ8eW_body{margin:var(--demo-vsp-md) 0 0}.lRQ8eW_eyebrow{margin:0;color:var(--demo-color-muted);font-size:var(--demo-text-annotation);font-weight:var(--demo-weight-heading)}

.DhGR_G_note{margin-top:var(--demo-vsp-md);padding:var(--demo-vsp-sm) var(--demo-hsp-md);color:var(--demo-color-muted);background:var(--demo-bg);border-left:var(--demo-hsp-xs) solid var(--demo-color-accent);border-radius:var(--demo-radius-sm)}.DhGR_G_title{margin:0;color:var(--demo-color-primary);font-size:var(--demo-text-helper);font-weight:var(--demo-weight-heading)}

.uW188a_topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--demo-hsp-md);min-height:calc(var(--demo-vsp-xl) + var(--demo-vsp-md));padding:var(--demo-vsp-sm) var(--demo-hsp-xl);background:var(--demo-surface);border-bottom:1px solid var(--demo-color-border)}.uW188a_brand{color:var(--demo-ink);font-size:var(--demo-text-section-title);font-weight:var(--demo-weight-heading);text-decoration:none}.uW188a_controls{display:flex;align-items:center;justify-content:flex-end;gap:var(--demo-hsp-sm)}.uW188a_layout{display:grid;grid-template-columns:minmax(calc(var(--demo-hsp-xl) * 6), calc(var(--demo-hsp-xl) * 8)) minmax(0, 1fr);min-height:calc(100vh - var(--demo-vsp-2xl))}.uW188a_nav{display:flex;flex-direction:column;gap:var(--demo-vsp-xs);padding:var(--demo-vsp-lg) var(--demo-hsp-md);background:var(--demo-surface);border-right:1px solid var(--demo-color-border)}.uW188a_link{padding:var(--demo-vsp-xs) var(--demo-hsp-sm);color:var(--demo-color-muted);border-radius:var(--demo-radius-md);text-decoration:none}.uW188a_active{color:var(--demo-ink);background:var(--demo-color-primary-subtle)}.uW188a_main{min-width:0;padding:var(--demo-vsp-xl) var(--demo-hsp-xl)}.uW188a_stack{display:flex;flex-direction:column;gap:var(--demo-vsp-xl);max-width:calc(var(--demo-hsp-xl) * 34);margin-inline:auto}.uW188a_button{padding:var(--demo-vsp-xs) var(--demo-hsp-md);color:var(--demo-bg);background:var(--demo-color-primary);border:1px solid var(--demo-color-primary);border-radius:var(--demo-radius-md);cursor:pointer}.uW188a_quiet{color:var(--demo-ink);background:var(--demo-surface);border-color:var(--demo-color-border)}.uW188a_meta{color:var(--demo-color-muted);font-size:var(--demo-text-annotation);font-weight:var(--demo-weight-heading)}.uW188a_swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--demo-hsp-sm);margin-top:var(--demo-vsp-md)}.uW188a_swatch{display:grid;gap:var(--demo-vsp-2xs);color:var(--demo-ink);font-size:var(--demo-text-annotation);text-align:center}.uW188a_chip{display:block;aspect-ratio:1;background:var(--swatch-color);border:1px solid var(--demo-color-border);border-radius:var(--demo-radius-md)}@media (width<=48rem){.uW188a_topbar,.uW188a_controls{align-items:stretch;flex-direction:column}.uW188a_layout{grid-template-columns:1fr}.uW188a_nav{border-right:0;border-bottom:1px solid var(--demo-color-border)}.uW188a_swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}