.FlexboxDemo-module__iwoeEa__demo{background-color:var(--card-background);box-sizing:border-box;width:100%;padding:var(--spacing-md);border-radius:var(--border-radius);border:1px solid var(--border-color);gap:var(--spacing-md);flex-direction:column;display:flex}.FlexboxDemo-module__iwoeEa__sandbox{height:300px;padding:var(--spacing-sm);background-color:var(--background-color);border:1px dashed var(--hover-border-color);border-radius:var(--border-radius);display:flex;overflow:auto}.FlexboxDemo-module__iwoeEa__item{border:1px solid var(--accent-color);color:var(--accent-color);transition:var(--transition-default);background-color:#5eddac2e;border-radius:8px;flex:none;justify-content:center;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;display:flex}.FlexboxDemo-module__iwoeEa__controls{gap:var(--spacing-sm);flex-direction:column;display:flex}.FlexboxDemo-module__iwoeEa__control{align-items:center;gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.FlexboxDemo-module__iwoeEa__controlLabel{color:var(--secondary-text-color);flex:0 0 9rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}.FlexboxDemo-module__iwoeEa__options{gap:var(--spacing-xs);flex-wrap:wrap;display:flex}.FlexboxDemo-module__iwoeEa__option{border:1px solid var(--border-color);color:var(--secondary-text-color);padding:2px var(--spacing-sm);cursor:pointer;transition:var(--transition-default);background-color:#0000;border-radius:999px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.78rem}.FlexboxDemo-module__iwoeEa__option:hover{border-color:var(--accent-color);color:var(--text-color)}.FlexboxDemo-module__iwoeEa__optionActive{border-color:var(--accent-color);color:var(--accent-color);font-weight:700}.FlexboxDemo-module__iwoeEa__row{align-items:center;gap:var(--spacing-md);flex-wrap:wrap;display:flex}.FlexboxDemo-module__iwoeEa__slider{align-items:center;gap:var(--spacing-sm);flex:240px;display:flex}.FlexboxDemo-module__iwoeEa__slider .FlexboxDemo-module__iwoeEa__controlLabel{flex:none}.FlexboxDemo-module__iwoeEa__slider input[type=range]{accent-color:var(--accent-color);flex:auto}.FlexboxDemo-module__iwoeEa__value{color:var(--text-color);text-align:center;min-width:2.5rem;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}.FlexboxDemo-module__iwoeEa__counter{align-items:center;gap:var(--spacing-xs);display:inline-flex}.FlexboxDemo-module__iwoeEa__counter .FlexboxDemo-module__iwoeEa__controlLabel{flex:none}.FlexboxDemo-module__iwoeEa__ghost{padding:var(--spacing-xs) var(--spacing-md);border-radius:var(--border-radius);cursor:pointer;transition:var(--transition-default);border:1px solid var(--border-color);color:var(--secondary-text-color);background-color:#0000;margin-left:auto}.FlexboxDemo-module__iwoeEa__ghost:hover{opacity:.9;border-color:var(--accent-color)}.FlexboxDemo-module__iwoeEa__readout{color:var(--text-color);background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);padding:var(--spacing-sm);white-space:pre;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;line-height:1.6;overflow-x:auto}.FlexboxDemo-module__iwoeEa__selector{color:var(--accent-color)}@media (max-width:600px){.FlexboxDemo-module__iwoeEa__sandbox{height:240px}.FlexboxDemo-module__iwoeEa__controlLabel{flex-basis:100%}.FlexboxDemo-module__iwoeEa__ghost{margin-left:0}}