.design-section-variables[data-v-a7a98b9f]{flex-direction:column;gap:15px;display:flex}.design-section-variables .group[data-v-a7a98b9f],.design-section-variables .preview-group[data-v-a7a98b9f]{border-radius:var(--design-border-radius);background-color:var(--design-secondary);flex-direction:column;gap:15px;padding:15px;display:flex}.design-section-variables .group-title[data-v-a7a98b9f]{color:var(--design-text-primary);font-size:1rem;font-weight:600;line-height:1.35}.design-section-variables .preview-variables[data-v-a7a98b9f],.design-section-variables .variables[data-v-a7a98b9f]{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:15px;display:grid}:is(.design-section-variables .preview-variable,.design-section-variables .variable)[data-v-a7a98b9f]{text-align:left;border-radius:var(--design-border-radius);background-color:var(--design-surface);cursor:copy;flex-direction:column;align-items:flex-start;padding:15px;transition-property:background-color;transition-duration:.1s;transition-timing-function:ease-out;display:flex}:is(.design-section-variables .preview-variable,.design-section-variables .variable)[data-v-a7a98b9f]:hover{background-color:var(--design-tertiary)}:is(.design-section-variables .preview-variable,.design-section-variables .variable)[data-v-a7a98b9f]:focus-visible{outline:2px solid var(--design-text-primary);outline-offset:2px}.design-section-variables .preview-variable[data-v-a7a98b9f]{gap:10px}.design-section-variables .variable[data-v-a7a98b9f]{gap:6px}.design-section-variables .variable-complex[data-v-a7a98b9f]{grid-column:span 2}.design-section-variables .name[data-v-a7a98b9f]{color:var(--design-text-secondary);font-size:.75rem}.design-section-variables .name[data-v-a7a98b9f],.design-section-variables .value[data-v-a7a98b9f]{font-weight:600;line-height:1.35}.design-section-variables .value[data-v-a7a98b9f]{width:100%;min-width:0;color:var(--design-text-primary);white-space:pre-wrap;overflow-wrap:anywhere;font-family:inherit;font-size:.875rem;display:block}.design-section-variables .variable-complex .value[data-v-a7a98b9f]{background-color:var(--design-tertiary);border-radius:8px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.75rem;line-height:1.5}.design-section-variables .gradient-preview[data-v-a7a98b9f]{border:1px solid var(--design-subtle-border);background-color:var(--design-tertiary);background-repeat:no-repeat;background-size:cover;border-radius:8px;width:100%;height:42px;display:block}.design-section-variables .preview[data-v-a7a98b9f],.design-section-variables .spacing-track[data-v-a7a98b9f]{width:100%;display:flex}.design-section-variables .spacing-track[data-v-a7a98b9f]{align-items:center;min-height:14px;padding:6px 0}.design-section-variables .spacing-bar[data-v-a7a98b9f]{background-color:var(--design-primary);border-radius:7px;height:14px;display:block}.design-section-variables .radius-card[data-v-a7a98b9f]{border:1px solid var(--design-subtle-border);background-color:var(--design-tertiary);width:100%;max-width:120px;height:64px;display:block}.design-section-variables .preview-empty[data-v-a7a98b9f]{border:1px dashed var(--design-subtle-border);border-radius:var(--design-border-radius);color:var(--design-text-secondary);background-color:var(--design-surface);padding:25px;font-size:.8125rem;font-weight:300;line-height:1.45;display:flex}.design-section-variables .asset-preview[data-v-a7a98b9f]{border:1px solid var(--design-subtle-border);background-color:var(--design-tertiary);background-position:50%;background-repeat:no-repeat;background-size:24px 24px;border-radius:8px;width:56px;height:56px;display:block}.design-section-variables .asset-preview-icon[data-v-a7a98b9f]{color:var(--design-text-primary);justify-content:center;align-items:center;display:flex}.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg{color:currentColor;width:24px;height:24px}.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg:not([fill=none]),.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg [fill]:not([fill=none]){fill:currentColor}.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg[stroke]:not([stroke=none]),.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg [stroke]:not([stroke=none]){stroke:currentColor}.design-section-variables .asset-preview-icon[data-v-a7a98b9f] svg[fill=none]:not([stroke]) :where(path,rect,circle,ellipse,polygon,polyline):not([fill]):not([stroke]){fill:currentColor}@media (width<860px){.design-section-variables .variable-complex[data-v-a7a98b9f]{grid-column:auto}}