.theme-generator[data-astro-cid-g3bwjb6v]{display:flex;flex-direction:column;gap:var(--size-4)}.mode-switch[data-astro-cid-g3bwjb6v]{align-self:start}.generator-grid[data-astro-cid-g3bwjb6v]{display:grid;gap:var(--size-4);grid-template-columns:1fr;@media(width>=900px){grid-template-columns:minmax(280px,360px) 1fr;align-items:start}}.controls[data-astro-cid-g3bwjb6v]{.ui-form{display:flex;flex-direction:column;gap:var(--size-4)}.chip-group{display:flex;flex-wrap:wrap;gap:var(--size-2)}}.preview-card[data-astro-cid-g3bwjb6v]{color-scheme:light;color:var(--text-primary);--palette-source: oklch( 58% calc(.21 * var(--palette-chroma, .5)) var(--palette-hue, 240) );--color-1: oklch( from var(--palette-source) 98% calc(.03 * (c / .21)) calc(h + (0 * var(--palette-hue-rotate-by))) );--color-2: oklch( from var(--palette-source) 97% calc(.06 * (c / .21)) calc(h + (1 * var(--palette-hue-rotate-by))) );--color-3: oklch( from var(--palette-source) 93% calc(.1 * (c / .21)) calc(h + (2 * var(--palette-hue-rotate-by))) );--color-4: oklch( from var(--palette-source) 84% calc(.12 * (c / .21)) calc(h + (3 * var(--palette-hue-rotate-by))) );--color-5: oklch( from var(--palette-source) 80% calc(.16 * (c / .21)) calc(h + (4 * var(--palette-hue-rotate-by))) );--color-6: oklch( from var(--palette-source) 71% calc(.19 * (c / .21)) calc(h + (5 * var(--palette-hue-rotate-by))) );--color-7: oklch( from var(--palette-source) 66% calc(.2 * (c / .21)) calc(h + (6 * var(--palette-hue-rotate-by))) );--color-8: oklch( from var(--palette-source) 58% calc(1*c) calc(h + (7 * var(--palette-hue-rotate-by))) );--color-9: oklch( from var(--palette-source) 53% calc(.2 * (c / .21)) calc(h + (8 * var(--palette-hue-rotate-by))) );--color-10: oklch( from var(--palette-source) 49% calc(.19 * (c / .21)) calc(h + (9 * var(--palette-hue-rotate-by))) );--color-11: oklch( from var(--palette-source) 42% calc(.17 * (c / .21)) calc(h + (10 * var(--palette-hue-rotate-by))) );--color-12: oklch( from var(--palette-source) 35% calc(.15 * (c / .21)) calc(h + (11 * var(--palette-hue-rotate-by))) );--color-13: oklch( from var(--palette-source) 27% calc(.12 * (c / .21)) calc(h + (12 * var(--palette-hue-rotate-by))) );--color-14: oklch( from var(--palette-source) 20% calc(.09 * (c / .21)) calc(h + (13 * var(--palette-hue-rotate-by))) );--color-15: oklch( from var(--palette-source) 16% calc(.07 * (c / .21)) calc(h + (14 * var(--palette-hue-rotate-by))) );--color-16: oklch( from var(--palette-source) 10% calc(.05 * (c / .21)) calc(h + (15 * var(--palette-hue-rotate-by))) );--gray-1: oklch(from var(--color-1) l var(--gray-chroma) var(--gray-hue));--gray-2: oklch(from var(--color-2) l var(--gray-chroma) var(--gray-hue));--gray-3: oklch(from var(--color-3) l var(--gray-chroma) var(--gray-hue));--gray-4: oklch(from var(--color-4) l var(--gray-chroma) var(--gray-hue));--gray-5: oklch(from var(--color-5) l var(--gray-chroma) var(--gray-hue));--gray-6: oklch(from var(--color-6) l var(--gray-chroma) var(--gray-hue));--gray-7: oklch(from var(--color-7) l var(--gray-chroma) var(--gray-hue));--gray-8: oklch(from var(--color-8) l var(--gray-chroma) var(--gray-hue));--gray-9: oklch(from var(--color-9) l var(--gray-chroma) var(--gray-hue));--gray-10: oklch(from var(--color-10) l var(--gray-chroma) var(--gray-hue));--gray-11: oklch(from var(--color-11) l var(--gray-chroma) var(--gray-hue));--gray-12: oklch(from var(--color-12) l var(--gray-chroma) var(--gray-hue));--gray-13: oklch(from var(--color-13) l var(--gray-chroma) var(--gray-hue));--gray-14: oklch(from var(--color-14) l var(--gray-chroma) var(--gray-hue));--gray-15: oklch(from var(--color-15) l var(--gray-chroma) var(--gray-hue));--gray-16: oklch(from var(--color-16) l var(--gray-chroma) var(--gray-hue));--surface-default: light-dark(var(--gray-1), var(--gray-13));--surface-filled: light-dark(var(--gray-4), var(--gray-15));--surface-tonal: light-dark(var(--gray-3), var(--gray-12));--surface-elevated: light-dark(var(--gray-1), var(--gray-12));--border-color: light-dark(var(--gray-4), var(--gray-12));--field-border-color: var(--border-color);&.ui-dark{color-scheme:dark}&.no-grays{--surface-default: light-dark(var(--color-1), var(--color-14));--surface-filled: light-dark(var(--color-5), var(--color-16));--surface-tonal: light-dark(var(--color-4), var(--color-12));--surface-elevated: light-dark(var(--color-1), var(--color-12));--border-color: light-dark(var(--color-4), var(--color-12));--field-border-color: light-dark(var(--color-4), var(--color-12))}}.preview-pane[data-astro-cid-g3bwjb6v]{color:var(--text-primary);display:flex;flex-direction:column;gap:var(--size-4)}.section-label[data-astro-cid-g3bwjb6v]{color:var(--text-muted);margin:0}.preview-card[data-astro-cid-g3bwjb6v].no-grays .gray-palette[data-astro-cid-g3bwjb6v]{display:none}.palette-grid[data-astro-cid-g3bwjb6v]{display:grid;gap:var(--size-2);grid-template-columns:repeat(auto-fill,minmax(52px,1fr))}.swatch[data-astro-cid-g3bwjb6v]{aspect-ratio:1;border:1px solid var(--border-color);border-radius:var(--border-radius);display:grid;inline-size:100%;place-items:center;&:hover span[data-astro-cid-g3bwjb6v]{opacity:1}span{aspect-ratio:1;background-color:oklch(from var(--text-primary) l c h / .65);color:oklch(from var(--text-primary) l c h / 0);border-radius:var(--radius-round);display:grid;opacity:0;padding-inline:1ex;pointer-events:none;place-items:center;text-align:center;transition:opacity .2s ease-out}}.surface-stack[data-astro-cid-g3bwjb6v]{display:grid;gap:var(--size-1)}.surface-swatch[data-astro-cid-g3bwjb6v]{align-items:center;border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex;font-size:var(--font-size-0);font-weight:var(--font-weight-6);justify-content:space-between;padding:var(--size-2) var(--size-3);text-transform:uppercase}.form-showcase[data-astro-cid-g3bwjb6v]{background-color:var(--surface-tonal);border:1px solid var(--border-color);border-radius:var(--border-radius);display:flex;flex-direction:column;gap:var(--size-3);padding:var(--size-3);.ui-row[data-astro-cid-g3bwjb6v]{display:flex;flex-wrap:wrap;gap:var(--size-8)}}.css-output[data-astro-cid-g3bwjb6v]{.css-header{align-items:center;display:flex;gap:var(--size-3);justify-content:space-between;width:100%;h3{margin:0}}pre{background:#1e1e1e;border-radius:var(--border-radius);color-scheme:dark;margin:0;max-block-size:60vh;overflow:auto;padding:var(--size-4)}code{font-family:var(--font-mono);font-size:var(--font-size-0);white-space:pre}}#theme-generator-css-code.hljs{color:#d4d4d4}#theme-generator-css-code .hljs-keyword,#theme-generator-css-code .hljs-selector-tag{color:#c586c0}#theme-generator-css-code .hljs-selector-class,#theme-generator-css-code .hljs-selector-id,#theme-generator-css-code .hljs-selector-pseudo{color:#d7ba7d}#theme-generator-css-code .hljs-built_in{color:#dcdcaa}#theme-generator-css-code .hljs-attr,#theme-generator-css-code .hljs-attribute{color:#9cdcfe}#theme-generator-css-code .hljs-number,#theme-generator-css-code .hljs-unit{color:#b5cea8}#theme-generator-css-code .hljs-string{color:#ce9178}#theme-generator-css-code .hljs-comment{color:#6a9955}