.theme-generator[data-astro-cid-hb77nrdk]{gap:var(--size-4);flex-direction:column;display:flex}.mode-switch[data-astro-cid-hb77nrdk]{align-self:start}.generator-grid[data-astro-cid-hb77nrdk]{gap:var(--size-4);grid-template-columns:1fr;display:grid;@media (width>=900px){grid-template-columns:minmax(280px,360px) 1fr;align-items:start}}.controls[data-astro-cid-hb77nrdk]{& .ui-form{gap:var(--size-4);flex-direction:column;display:flex}& .chip-group{gap:var(--size-2);flex-wrap:wrap;display:flex}}.preview-card[data-astro-cid-hb77nrdk]{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(.21 * (c / .21)) 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-hb77nrdk]{color:var(--text-primary);gap:var(--size-4);flex-direction:column;display:flex}.section-label[data-astro-cid-hb77nrdk]{color:var(--text-muted);margin:0}.preview-card[data-astro-cid-hb77nrdk].no-grays .gray-palette[data-astro-cid-hb77nrdk]{display:none}.palette-grid[data-astro-cid-hb77nrdk]{gap:var(--size-2);grid-template-columns:repeat(auto-fill,minmax(52px,1fr));display:grid}.swatch[data-astro-cid-hb77nrdk]{aspect-ratio:1;border:1px solid var(--border-color);border-radius:var(--border-radius);place-items:center;inline-size:100%;display:grid;&:hover span[data-astro-cid-hb77nrdk]{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);opacity:0;pointer-events:none;text-align:center;place-items:center;padding-inline:1ex;transition:opacity .2s ease-out;display:grid}}.surface-stack[data-astro-cid-hb77nrdk]{gap:var(--size-1);display:grid}.surface-swatch[data-astro-cid-hb77nrdk]{border:1px solid var(--border-color);border-radius:var(--border-radius);font-size:var(--font-size-0);font-weight:var(--font-weight-6);padding:var(--size-2) var(--size-3);text-transform:uppercase;justify-content:space-between;align-items:center;display:flex}.form-showcase[data-astro-cid-hb77nrdk]{background-color:var(--surface-tonal);border:1px solid var(--border-color);border-radius:var(--border-radius);gap:var(--size-3);padding:var(--size-3);flex-direction:column;display:flex;& .ui-row{gap:var(--size-8);flex-wrap:wrap;display:flex}}.css-output[data-astro-cid-hb77nrdk]{& .css-header{align-items:center;gap:var(--size-3);justify-content:space-between;width:100%;display:flex;& h3{margin:0}}& pre{border-radius:var(--border-radius);color-scheme:dark;max-block-size:60vh;padding:var(--size-4);background:#1e1e1e;margin:0;overflow:auto}& 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}