.flexbox-generator-module__aGssBq__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){.flexbox-generator-module__aGssBq__tool{grid-template:"controls presets""controls banners""controls preview""controls output"1fr"footer footer"/minmax(0,24rem) minmax(0,1fr)}}@media (min-width:1440px){.flexbox-generator-module__aGssBq__tool{grid-template:"controls presets presets""controls banners banners""controls preview output"1fr"footer footer footer"/minmax(0,22rem) minmax(0,1fr) minmax(0,26rem)}}.flexbox-generator-module__aGssBq__controlsPane{grid-area:controls;}.flexbox-generator-module__aGssBq__presetsZone{grid-area:presets}.flexbox-generator-module__aGssBq__bannerZone{gap:var(--space-2);flex-direction:column;grid-area:banners;display:flex}.flexbox-generator-module__aGssBq__previewPane{grid-area:preview;align-self:start;}.flexbox-generator-module__aGssBq__outputCard{grid-area:output;align-self:start;}.flexbox-generator-module__aGssBq__footerZone{gap:var(--space-2);flex-direction:column;grid-area:footer;display:flex}.flexbox-generator-module__aGssBq__paneHeader{}.flexbox-generator-module__aGssBq__paneLabel{}.flexbox-generator-module__aGssBq__liveBadge{flex:none}.flexbox-generator-module__aGssBq__stale{}.flexbox-generator-module__aGssBq__controlsBody{gap:var(--space-3);padding:var(--pane-padding);flex-direction:column;display:flex}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__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)}.flexbox-generator-module__aGssBq__controlGroup{gap:var(--space-1);flex-direction:column;min-inline-size:0;display:flex}.flexbox-generator-module__aGssBq__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)}.flexbox-generator-module__aGssBq__segRow{gap:var(--space-1);flex-wrap:wrap;display:flex}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__segment:hover{border-color:var(--color-border-control);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__segmentOn{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);border-color:var(--color-border-control);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__segmentInput{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.flexbox-generator-module__aGssBq__segment:has(.flexbox-generator-module__aGssBq__segmentInput:focus-visible){outline:var(--focus-ring-width) solid var(--color-accent-fg);outline-offset:var(--focus-ring-offset)}.flexbox-generator-module__aGssBq__groupHint{min-block-size:var(--text-ui-sm-line);}.flexbox-generator-module__aGssBq__jitterHint{min-block-size:calc(var(--text-ui-sm-line) * 2);}.flexbox-generator-module__aGssBq__numberRow{gap:var(--space-3);flex-wrap:wrap;display:flex}.flexbox-generator-module__aGssBq__numberOption{align-items:center;gap:var(--space-2);min-block-size:var(--target-min);min-inline-size:0;display:inline-flex}.flexbox-generator-module__aGssBq__numberInput{inline-size:88px;font-family:var(--font-mono);font-feature-settings:"zero";}.flexbox-generator-module__aGssBq__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)}.flexbox-generator-module__aGssBq__stepperRow{align-items:center;gap:var(--space-2);display:flex}.flexbox-generator-module__aGssBq__stepButton{}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__capNoteHidden{visibility:hidden}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__checkbox{}.flexbox-generator-module__aGssBq__basisInput{inline-size:100%;font-family:var(--font-mono);font-feature-settings:"zero";}.flexbox-generator-module__aGssBq__diagZone{block-size:calc(var(--text-ui-sm-line) * 4 + var(--space-6));overflow-y:auto}.flexbox-generator-module__aGssBq__errorBox{}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__presetsFieldset{min-inline-size:0;padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);margin:0}.flexbox-generator-module__aGssBq__presetsRow{gap:var(--space-2);flex-wrap:wrap;display:flex}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__presetChip:hover{border-color:var(--color-accent-fg);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__presetChip:active{transform:scale(.98)}.flexbox-generator-module__aGssBq__presetChipOn{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);border-color:var(--color-border-control);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__overflowBadge{flex:none;}.flexbox-generator-module__aGssBq__badgeHidden{visibility:hidden}.flexbox-generator-module__aGssBq__previewScroll{block-size:var(--pane-min-block);padding:var(--space-2);overflow:auto}.flexbox-generator-module__aGssBq__previewContainer{outline:1px dashed var(--color-border-subtle);block-size:100%}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__previewItem:hover{border-color:var(--color-accent-fg);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__previewItemSelected{background:color-mix(in srgb, var(--color-text-primary) 8%, transparent);color:var(--color-text-primary)}.flexbox-generator-module__aGssBq__previewItemSelected:not(:focus-visible){outline:2px solid var(--color-text-primary);outline-offset:-2px}.flexbox-generator-module__aGssBq__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)}.flexbox-generator-module__aGssBq__itemWideText{font-family:var(--font-mono);font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line)}.flexbox-generator-module__aGssBq__outputBody{gap:var(--space-3);padding:var(--pane-padding);flex-direction:column;display:flex}.flexbox-generator-module__aGssBq__blockRow{align-items:center;gap:var(--space-2);min-block-size:var(--control-height-sm);display:flex}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__staleBadge{flex:none;}.flexbox-generator-module__aGssBq__blockCopy{}.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__codeBlockContainer,.flexbox-generator-module__aGssBq__codeBlockItems{block-size:calc(var(--text-code-line) * 10 + var(--space-4))}.flexbox-generator-module__aGssBq__codeBlockHtml{block-size:calc(var(--text-code-line) * 8 + var(--space-4))}.flexbox-generator-module__aGssBq__banner{}.flexbox-generator-module__aGssBq__bannerAction{color:var(--color-accent-fg);cursor:pointer;font-size:inherit;background:0 0;border:none;padding:0;text-decoration-line:underline}.flexbox-generator-module__aGssBq__actions{}.flexbox-generator-module__aGssBq__actionButton{}.flexbox-generator-module__aGssBq__copyAccent{}.flexbox-generator-module__aGssBq__swapWrap{}.flexbox-generator-module__aGssBq__swapSizer{}.flexbox-generator-module__aGssBq__echoSlot{min-inline-size:var(--space-4);text-align:start;display:inline-block}.flexbox-generator-module__aGssBq__shareNote,.flexbox-generator-module__aGssBq__storedLine,.flexbox-generator-module__aGssBq__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}.flexbox-generator-module__aGssBq__dialog{}.flexbox-generator-module__aGssBq__dialogTitle{font-size:var(--text-h4-size);line-height:var(--text-h4-line);margin-block-end:var(--space-4)}.flexbox-generator-module__aGssBq__dialogNote{font-size:var(--text-ui-xs-size);line-height:var(--text-ui-xs-line);color:var(--color-text-muted)}.flexbox-generator-module__aGssBq__shortcutList{gap:var(--space-2);flex-direction:column;margin-block-end:var(--space-4);padding:0;list-style:none;display:flex}.flexbox-generator-module__aGssBq__shortcutItem{font-size:var(--text-ui-sm-size);line-height:var(--text-ui-sm-line)}.flexbox-generator-module__aGssBq__kbd{}.flexbox-generator-module__aGssBq__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){.flexbox-generator-module__aGssBq__segment,.flexbox-generator-module__aGssBq__presetChip{min-block-size:var(--target-touch)}.flexbox-generator-module__aGssBq__bannerAction,.flexbox-generator-module__aGssBq__optionCheck,.flexbox-generator-module__aGssBq__optionDialog,.flexbox-generator-module__aGssBq__numberOption{min-block-size:var(--target-touch);align-items:center;display:inline-flex}.flexbox-generator-module__aGssBq__previewItem{position:relative}.flexbox-generator-module__aGssBq__previewItem:after{content:"";inset-inline:max(min(0px, calc((100% - var(--target-touch)) / 2)), calc(var(--g364-column-gap,0px) / -2));inset-block:max(min(0px, calc((100% - var(--target-touch)) / 2)), calc(var(--g364-row-gap,0px) / -2));position:absolute}}