.css-grid-generator-module__0Il4Vq__tool{gap:var(--space-3);grid-template-columns:minmax(0,1fr);grid-template-areas:"controls""presets""banners""preview""output""footer";display:grid}@media (min-width:1024px){.css-grid-generator-module__0Il4Vq__tool{grid-template:"controls presets""controls banners""controls preview""controls output"1fr"footer footer"/minmax(0,24rem) minmax(0,1fr)}}@media (min-width:1440px){.css-grid-generator-module__0Il4Vq__tool{grid-template:"controls presets presets""controls banners banners""controls preview output"1fr"footer footer footer"/minmax(0,24rem) minmax(0,1fr) minmax(0,27rem)}}.css-grid-generator-module__0Il4Vq__controlsPane{grid-area:controls;}.css-grid-generator-module__0Il4Vq__presetsZone{grid-area:presets}.css-grid-generator-module__0Il4Vq__bannerZone{gap:var(--space-2);flex-direction:column;grid-area:banners;display:flex}.css-grid-generator-module__0Il4Vq__previewPane{grid-area:preview;align-self:start;}.css-grid-generator-module__0Il4Vq__outputCard{grid-area:output;align-self:start;}.css-grid-generator-module__0Il4Vq__footerZone{gap:var(--space-2);flex-direction:column;grid-area:footer;display:flex}.css-grid-generator-module__0Il4Vq__paneHeader{}.css-grid-generator-module__0Il4Vq__paneLabel{}.css-grid-generator-module__0Il4Vq__liveBadge{flex:none}.css-grid-generator-module__0Il4Vq__stale{}.css-grid-generator-module__0Il4Vq__controlsBody{gap:var(--space-3);padding:var(--pane-padding);flex-direction:column;display:flex}.css-grid-generator-module__0Il4Vq__fieldset{min-inline-size:0;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);gap:var(--space-3);flex-direction:column;margin:0;display:flex}.css-grid-generator-module__0Il4Vq__legend{padding-inline:var(--space-1);font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);font-weight:var(--weight-medium);color:var(--color-text-secondary)}.css-grid-generator-module__0Il4Vq__controlGroup{gap:var(--space-1);flex-direction:column;min-inline-size:0;display:flex}.css-grid-generator-module__0Il4Vq__groupLabel{font-family:var(--font-mono);font-feature-settings:"zero";font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary)}.css-grid-generator-module__0Il4Vq__segRow{gap:var(--space-1);flex-wrap:wrap;display:flex}.css-grid-generator-module__0Il4Vq__segment{min-block-size:var(--control-height);padding-inline:var(--space-2);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);font-feature-settings:"zero";font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);cursor:pointer;justify-content:center;align-items:center;display:inline-flex;position:relative}.css-grid-generator-module__0Il4Vq__segment:hover{border-color:var(--color-border-control);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__segmentOn{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);border-color:var(--color-border-control);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__segmentInput{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.css-grid-generator-module__0Il4Vq__segment:has(.css-grid-generator-module__0Il4Vq__segmentInput:focus-visible){outline:var(--focus-ring-width) solid var(--color-accent-fg);outline-offset:var(--focus-ring-offset)}.css-grid-generator-module__0Il4Vq__groupHint{min-block-size:calc(var(--text-ui-sm-line) * 2);}.css-grid-generator-module__0Il4Vq__numberRow{gap:var(--space-3);flex-wrap:wrap;display:flex}.css-grid-generator-module__0Il4Vq__numberOption{align-items:center;gap:var(--space-2);min-block-size:var(--target-min);min-inline-size:0;display:inline-flex}.css-grid-generator-module__0Il4Vq__numberInput{inline-size:88px;font-family:var(--font-mono);font-feature-settings:"zero";}.css-grid-generator-module__0Il4Vq__unitSuffix{font-family:var(--font-mono);font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted)}.css-grid-generator-module__0Il4Vq__textInput{inline-size:100%;font-family:var(--font-mono);font-feature-settings:"zero";}.css-grid-generator-module__0Il4Vq__stepperRow{align-items:center;gap:var(--space-2);display:flex}.css-grid-generator-module__0Il4Vq__stepButton{}.css-grid-generator-module__0Il4Vq__capNote{min-block-size:var(--text-ui-xs-line);font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted);margin:0}.css-grid-generator-module__0Il4Vq__capNoteHidden{visibility:hidden}.css-grid-generator-module__0Il4Vq__optionCheck{align-items:center;gap:var(--space-2);min-block-size:var(--target-min);font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);cursor:pointer;display:inline-flex}.css-grid-generator-module__0Il4Vq__checkbox{}.css-grid-generator-module__0Il4Vq__trackEditor,.css-grid-generator-module__0Il4Vq__trackList{gap:var(--space-2);flex-direction:column;min-inline-size:0;display:flex}.css-grid-generator-module__0Il4Vq__trackRow{align-items:center;gap:var(--space-2);min-inline-size:0;display:flex}.css-grid-generator-module__0Il4Vq__trackInput{min-inline-size:0;font-family:var(--font-mono);font-feature-settings:"zero";flex:1;}.css-grid-generator-module__0Il4Vq__trackRemove{flex:none;}.css-grid-generator-module__0Il4Vq__trackAdd{align-self:start;}.css-grid-generator-module__0Il4Vq__diagZone{block-size:calc(var(--text-ui-sm-line) * 4 + var(--space-4));overflow-y:auto}.css-grid-generator-module__0Il4Vq__errorBox{}.css-grid-generator-module__0Il4Vq__errorMessage{font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-danger-fg);overflow-wrap:anywhere;margin:0}.css-grid-generator-module__0Il4Vq__warnBox{padding:var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-control);border-radius:var(--radius-sm)}.css-grid-generator-module__0Il4Vq__warnMessage{font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);overflow-wrap:anywhere;margin:0}.css-grid-generator-module__0Il4Vq__matrixEditor{gap:var(--space-2);flex-direction:column;min-inline-size:0;display:flex}.css-grid-generator-module__0Il4Vq__matrixDims{gap:var(--space-3);flex-wrap:wrap;display:flex}.css-grid-generator-module__0Il4Vq__matrixDimLabel{font-family:var(--font-mono);font-feature-settings:"zero";font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted);align-self:center}.css-grid-generator-module__0Il4Vq__matrixGrid{gap:var(--space-1);min-inline-size:0;display:grid}.css-grid-generator-module__0Il4Vq__matrixCell{text-align:center;min-inline-size:0;font-family:var(--font-mono);font-feature-settings:"zero";}.css-grid-generator-module__0Il4Vq__trackInput[aria-invalid=true],.css-grid-generator-module__0Il4Vq__textInput[aria-invalid=true],.css-grid-generator-module__0Il4Vq__matrixCell[aria-invalid=true]{border-color:var(--color-danger-fg)}.css-grid-generator-module__0Il4Vq__presetsFieldset{min-inline-size:0;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);margin:0}.css-grid-generator-module__0Il4Vq__presetsRow{gap:var(--space-2);flex-wrap:wrap;display:flex}.css-grid-generator-module__0Il4Vq__presetChip{align-items:center;gap:var(--space-2);min-block-size:28px;padding-inline:var(--space-3);background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-full);font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);cursor:pointer;display:inline-flex}.css-grid-generator-module__0Il4Vq__presetChip:hover{border-color:var(--color-accent-fg);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__presetChip:active{transform:scale(.98)}.css-grid-generator-module__0Il4Vq__presetChipOn{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);border-color:var(--color-border-control);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__overflowBadge{flex:none;}.css-grid-generator-module__0Il4Vq__badgeHidden{visibility:hidden}.css-grid-generator-module__0Il4Vq__previewScroll{block-size:var(--pane-min-block);padding:var(--space-2);overflow:auto}.css-grid-generator-module__0Il4Vq__previewScroll:focus-visible{outline:var(--focus-ring-width) solid var(--color-accent-fg);outline-offset:calc(var(--focus-ring-width) * -1)}.css-grid-generator-module__0Il4Vq__previewContainer{outline:1px dashed var(--color-border-subtle);block-size:100%;min-block-size:0}.css-grid-generator-module__0Il4Vq__previewItem{justify-content:center;align-items:center;gap:var(--space-1);padding:var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-control);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);cursor:pointer;margin:0;display:flex}.css-grid-generator-module__0Il4Vq__previewItem:hover{border-color:var(--color-accent-fg);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__previewItemSelected{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);color:var(--color-text-primary)}.css-grid-generator-module__0Il4Vq__previewItemSelected:not(:focus-visible){outline:2px solid var(--color-text-primary);outline-offset:-2px}.css-grid-generator-module__0Il4Vq__itemIndex{font-family:var(--font-mono);font-feature-settings:"zero";font-variant-numeric:tabular-nums;font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line)}.css-grid-generator-module__0Il4Vq__previewArea{padding:var(--space-2);background:color-mix(in srgb, var(--color-text-primary) 6%, transparent);border:1px solid var(--color-border-control);border-radius:var(--radius-sm);min-inline-size:0;color:var(--color-text-primary);justify-content:center;align-items:center;display:flex}.css-grid-generator-module__0Il4Vq__previewGhost{border:1px dashed var(--color-border-subtle);border-radius:var(--radius-sm);min-inline-size:0;color:var(--color-text-muted);font-family:var(--font-mono);font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);justify-content:center;align-items:center;display:flex}.css-grid-generator-module__0Il4Vq__itemWideText{font-family:var(--font-mono);font-feature-settings:"zero";font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);overflow-wrap:anywhere}.css-grid-generator-module__0Il4Vq__outputBody{gap:var(--space-3);padding:var(--pane-padding);flex-direction:column;display:flex}.css-grid-generator-module__0Il4Vq__blockRow{align-items:center;gap:var(--space-2);min-block-size:var(--control-height-sm);display:flex}.css-grid-generator-module__0Il4Vq__blockLabel{min-inline-size:0;font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line);color:var(--color-text-secondary);white-space:nowrap;flex:1}.css-grid-generator-module__0Il4Vq__staleBadge{flex:none;}.css-grid-generator-module__0Il4Vq__blockCopy{}.css-grid-generator-module__0Il4Vq__codeBlock{padding:var(--space-2);background:var(--color-bg-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);font-family:var(--font-mono);font-feature-settings:"zero";font-size:var(--text-code-size);line-height:var(--text-code-line);color:var(--color-text-primary);white-space:pre;margin:0;overflow:auto}.css-grid-generator-module__0Il4Vq__codeBlockContainer{block-size:calc(var(--text-code-line) * 14 + var(--space-4))}.css-grid-generator-module__0Il4Vq__codeBlockItems,.css-grid-generator-module__0Il4Vq__codeBlockHtml{block-size:calc(var(--text-code-line) * 10 + var(--space-4))}.css-grid-generator-module__0Il4Vq__banner{}.css-grid-generator-module__0Il4Vq__bannerAction{color:var(--color-accent-fg);cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration-line:underline}.css-grid-generator-module__0Il4Vq__actions{}.css-grid-generator-module__0Il4Vq__actionButton{}.css-grid-generator-module__0Il4Vq__copyAccent{}.css-grid-generator-module__0Il4Vq__swapWrap{}.css-grid-generator-module__0Il4Vq__swapSizer{}.css-grid-generator-module__0Il4Vq__echoSlot{min-inline-size:var(--space-4);text-align:start;display:inline-block}.css-grid-generator-module__0Il4Vq__shareNote,.css-grid-generator-module__0Il4Vq__storedLine,.css-grid-generator-module__0Il4Vq__keyboardHint{min-block-size:var(--text-ui-xs-line);font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted);margin:0}.css-grid-generator-module__0Il4Vq__dialog{}.css-grid-generator-module__0Il4Vq__dialogTitle{font-size:var(--text-h4-size);line-height:var(--text-h4-line);margin-block-end:var(--space-4)}.css-grid-generator-module__0Il4Vq__dialogNote{font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted)}.css-grid-generator-module__0Il4Vq__shortcutList{gap:var(--space-2);flex-direction:column;margin-block-end:var(--space-4);padding:0;list-style:none;display:flex}.css-grid-generator-module__0Il4Vq__shortcutItem{font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line)}.css-grid-generator-module__0Il4Vq__kbd{}.css-grid-generator-module__0Il4Vq__optionDialog{align-items:center;gap:var(--space-2);font-size:var(--text-ui-md-size);line-height:var(--text-ui-md-line);min-block-size:var(--target-min);cursor:pointer;margin-block-end:var(--space-4);display:inline-flex}@media (pointer:coarse){.css-grid-generator-module__0Il4Vq__segment,.css-grid-generator-module__0Il4Vq__presetChip{min-block-size:var(--target-touch)}.css-grid-generator-module__0Il4Vq__bannerAction,.css-grid-generator-module__0Il4Vq__optionCheck,.css-grid-generator-module__0Il4Vq__optionDialog,.css-grid-generator-module__0Il4Vq__numberOption,.css-grid-generator-module__0Il4Vq__matrixDimLabel{min-block-size:var(--target-touch);align-items:center;display:inline-flex}.css-grid-generator-module__0Il4Vq__previewItem{position:relative}.css-grid-generator-module__0Il4Vq__previewItem:after{content:"";inset-inline:max(min(0px, calc((100% - var(--target-touch)) / 2)), calc(var(--g365-column-gap,0px) / -2));inset-block:max(min(0px, calc((100% - var(--target-touch)) / 2)), calc(var(--g365-row-gap,0px) / -2));position:absolute}}
