.generator{inline-size:min(100% - var(--site-gutter,1.5rem) * 2, var(--site-max,78rem));margin-inline:auto;padding-block:clamp(2rem,5vw,3.5rem) 5rem}.generator-intro h1{letter-spacing:-.015em;margin:0 0 .75rem;font-size:clamp(2.25rem,4.5vw,3.25rem);font-weight:700;font-stretch:75%;line-height:1}.generator-intro p{max-inline-size:42rem;color:var(--ui-muted-foreground);text-wrap:pretty;margin:0;font-size:1.0625rem}.generator-layout{grid-template-columns:18.5rem minmax(0,1fr);align-items:start;gap:clamp(2rem,3.5vw,3.5rem);margin-block-start:clamp(2rem,4vw,3rem);display:grid}.generator-rail{max-block-size:calc(100dvh - var(--site-header,0rem) - 2rem);overscroll-behavior:contain;scrollbar-width:thin;gap:1.5rem;margin:-.25rem -.75rem 0 -.25rem;padding:.25rem .75rem 1rem .25rem;display:grid;position:sticky;inset-block-start:calc(var(--site-header,0rem) + 1rem);overflow:auto}.generator-group{border:0;gap:1rem;min-inline-size:0;margin:0;padding:0;display:grid}.generator-group+.generator-group{border-block-start:1px solid var(--ui-border);padding-block-start:1.5rem}.generator-group>legend{float:left;inline-size:100%;margin:0;padding:0;font-size:.9375rem;font-weight:650}.generator-key-swatch{border-radius:calc(var(--ui-radius) + 4px);min-block-size:6.5rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ui-foreground) 10%, transparent);font-variant-numeric:tabular-nums;justify-content:space-between;align-items:end;gap:1rem;padding:.75rem .875rem;font-size:.875rem;display:flex}.generator-key-sample{font-size:2.25rem;font-weight:650;font-stretch:75%;line-height:1}.generator-presets{flex-wrap:wrap;gap:.375rem;display:flex}.generator-preset[data-slot]{gap:.4rem;min-block-size:0;padding:.3rem .6rem .3rem .45rem;font-size:.8125rem}.generator-preset[aria-pressed=true]{border-color:var(--ui-foreground);box-shadow:inset 0 0 0 1px var(--ui-foreground)}.generator-preset-swatch{block-size:.875rem;inline-size:.875rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ui-foreground) 15%, transparent);border-radius:999px}.generator-slider{position:relative}.generator-slider [data-slot=slider]{min-inline-size:0}.generator-slider [data-slot=slider-value]{position:absolute;inset-block-start:0;inset-inline-end:0}.generator-slider[style*=--generator-track] [data-slot=slider-track]{background:var(--generator-track);block-size:.625rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ui-foreground) 12%, transparent);border-radius:999px}.generator-slider[style*=--generator-track] [data-slot=slider-indicator]{background:0 0}.generator-slider[style*=--generator-track] [data-slot=slider-thumb]{background:0 0;border:3px solid oklch(100% 0 0);block-size:1.125rem;inline-size:1.125rem;box-shadow:0 0 0 1px oklch(20% 0 0/.55),0 1px 3px oklch(0% 0 0/.3)}.generator-switch{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}.generator-group [data-slot=segmented-control]{inline-size:100%}.generator-group [data-slot=segmented-control-item]{flex:1}.generator-status{border:1px solid color-mix(in oklab, var(--tone-warning) 45%, var(--ui-border));border-radius:calc(var(--ui-radius) + 4px);background:color-mix(in oklab, var(--tone-warning) 7%, var(--ui-background));grid-template-columns:auto minmax(0,1fr);align-items:start;gap:.5rem .625rem;padding:.875rem 1rem;font-size:.875rem;display:grid}.generator-status[data-pass]{border-color:color-mix(in oklab, var(--tone-success) 40%, var(--ui-border));background:color-mix(in oklab, var(--tone-success) 6%, var(--ui-background))}.generator-status p{margin:0}.generator-status [data-slot=button]{grid-column:2;justify-self:start}.generator-status-icon{block-size:1.125rem;inline-size:1.125rem;color:var(--tone-warning);margin-block-start:.125rem}[data-pass]>.generator-status-icon{color:var(--tone-success)}.generator-main{min-inline-size:0;container:generator-main/inline-size}.generator-section{scroll-margin-block-start:calc(var(--site-header,0rem) + 1rem)}.generator-section+.generator-section{margin-block-start:clamp(3rem,6vw,4.5rem)}.generator-section>h2{margin:0 0 .5rem;font-size:1.5rem;font-weight:650;font-stretch:85%;line-height:1.15}.generator-notes h3{margin:0 0 .5rem;font-size:1rem;font-weight:600}.generator-lede{max-inline-size:65ch;color:var(--ui-muted-foreground);text-wrap:pretty;margin:0 0 1.25rem;font-size:.9375rem}.generator-plain-list{margin:0;padding-inline-start:1.125rem}.generator-main code,.generator-rail code{font-family:var(--site-mono,ui-monospace, monospace);font-size:.9em}.generator-table code,.generator-code code{font-size:inherit;background:0 0;border:0;padding:0}.generator-previews{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-block-start:1rem;display:grid}@container generator-main (width<50rem){.generator-previews{grid-template-columns:minmax(0,1fr)}}.generator-screen-frame{min-inline-size:0}.generator-screen-label{color:var(--ui-muted-foreground);margin:0 0 .5rem;font-size:.875rem;font-weight:500}.generator-screen{border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius) + 6px);box-shadow:var(--ui-shadow);font-size:var(--ui-font-size);line-height:1.5}.generator-screen-bar{padding:calc(var(--ui-spacing) * 3) calc(var(--ui-spacing) * 5);border-block-end:1px solid var(--ui-border);flex-wrap:wrap;align-items:center;gap:.5rem .75rem;display:flex}.generator-screen-app{font-weight:650}.generator-screen-bar [data-slot=popover-trigger]{margin-inline-start:auto}.generator-screen-popover{max-inline-size:18rem}.generator-screen-body{gap:calc(var(--ui-spacing) * 5);padding:calc(var(--ui-spacing) * 5);display:grid}.generator-screen-heading h3{margin:0;font-size:1.25em;font-weight:650;line-height:1.25}.generator-screen-heading p{color:var(--ui-muted-foreground);margin:.125rem 0 0}.generator-screen-form{gap:calc(var(--ui-spacing) * 4);padding:calc(var(--ui-spacing) * 4);border:1px solid var(--ui-border);border-radius:calc(var(--ui-radius) + 4px);display:grid}.generator-screen-row{gap:calc(var(--ui-spacing) * 4);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));align-items:start;display:grid}.generator-screen-select{gap:calc(var(--ui-spacing) * 1.5);min-inline-size:0;display:grid}.generator-screen-row [data-slot=segmented-control]{inline-size:100%}.generator-screen-row [data-slot=segmented-control-item]{flex:1}.generator-screen-switch{flex-direction:row;justify-content:space-between;align-items:center;gap:1rem}.generator-screen-actions{gap:calc(var(--ui-spacing) * 2);flex-wrap:wrap;display:flex}.generator-screen-delete{margin-inline-start:auto}.generator-screen-alerts{gap:calc(var(--ui-spacing) * 2);display:grid}.generator-table-scroll{border-radius:var(--ui-radius);overflow-x:auto}.generator-table-scroll:focus-visible,.generator-code:focus-visible{outline:2px solid var(--ui-ring-border);outline-offset:2px}.generator-table{border-collapse:collapse;font-variant-numeric:tabular-nums;inline-size:100%;font-size:.875rem}.generator-table th,.generator-table td{border-block-end:1px solid var(--ui-border);text-align:start;vertical-align:top;padding:.625rem .75rem .625rem 0}.generator-table thead th{color:var(--ui-muted-foreground);padding-block-start:0;font-size:.8125rem;font-weight:500}.generator-table tbody th{font-weight:500}.generator-table-group th{padding-block-start:1.5rem;font-weight:650}.generator-checks td:not([data-pass]){background:color-mix(in oklab, var(--tone-danger) 6%, var(--ui-background))}.generator-checks th[scope=row]{inline-size:36%}.generator-checks td{inline-size:32%}.generator-need{color:var(--ui-muted-foreground);margin-block-start:.125rem;font-size:.8125rem;font-weight:400;display:block}.generator-result{white-space:nowrap;align-items:center;gap:.375rem;display:inline-flex}.generator-result-icon{block-size:1rem;inline-size:1rem;color:var(--tone-danger)}[data-pass]>.generator-result>.generator-result-icon{color:var(--tone-success)}.generator-result-value{font-weight:600}.generator-result-word{color:var(--ui-muted-foreground)}td:not([data-pass]) .generator-result-word{color:var(--tone-danger);font-weight:600}.generator-result-detail{color:var(--ui-muted-foreground);margin-block-start:.125rem;font-size:.8125rem;display:block}.generator-fix[data-slot]{white-space:normal;text-align:start;min-block-size:0;margin-block-start:.5rem;padding:.3rem .625rem;font-size:.8125rem}.generator-notes{color:var(--ui-muted-foreground);margin-block-start:1.5rem;font-size:.875rem}.generator-notes h3{color:var(--ui-foreground);font-size:.9375rem}.generator-tokens th[scope=row]{white-space:nowrap;inline-size:30%}.generator-tokens td{white-space:nowrap}.generator-token{align-items:center;gap:.5rem;display:inline-flex}.generator-token-swatch{block-size:1.125rem;inline-size:1.125rem;box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--ui-foreground) 15%, transparent);border-radius:4px;flex:none}.generator-token-hex{color:var(--ui-muted-foreground);font-size:.8125rem}.generator-tabs [data-slot=tabs-list]{margin-block-end:1.25rem}.generator-panel{gap:1rem;display:grid}.generator-panel>.generator-lede{margin:0}.generator-skin-name{max-inline-size:20rem}.generator-code{border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--ui-muted);max-block-size:26rem;font-family:var(--site-mono,ui-monospace, monospace);tab-size:2;margin:0;padding:1rem 1.125rem;font-size:.8125rem;line-height:1.6;overflow:auto}.generator-file-actions{flex-wrap:wrap;gap:.5rem;display:flex}@media (width<64rem){.generator-layout{grid-template-columns:minmax(0,1fr)}.generator-rail{max-block-size:none;margin:0;padding:0;position:static;overflow:visible}}@container generator-main (width<36rem){.generator-checks{font-size:.8125rem}.generator-checks th[scope=row]{inline-size:34%}.generator-result{gap:.25rem}.generator-result-word{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.generator-result-detail{overflow-wrap:anywhere;font-size:.75rem}.generator-screen-body{padding:calc(var(--ui-spacing) * 4)}}