.grid-demo.svelte-1k4nt8{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-sm);padding:var(--space-md);border:var(--elevation-border);border-radius:var(--radius-md);background:var(--color-surface);margin-bottom:var(--space-md)}.grid-column.svelte-1k4nt8{background:var(--color-accent-subtle);border:1px solid var(--color-accent);border-radius:var(--radius-sm);padding:var(--space-md) 0;display:flex;align-items:center;justify-content:center}.grid-col-number.svelte-1k4nt8{font-size:var(--type-caption-size);color:var(--color-accent)}.grid-info.svelte-1k4nt8{display:flex;gap:var(--space-xl)}.grid-info-item.svelte-1k4nt8{display:flex;flex-direction:column;gap:2px}.width-demo-container.svelte-1k4nt8{display:flex;flex-direction:column;gap:var(--space-sm);margin-bottom:var(--space-lg);border:var(--elevation-border);border-radius:var(--radius-md);padding:var(--space-lg);background:var(--color-surface);overflow:hidden}.width-bar-row.svelte-1k4nt8{width:100%}.width-bar.svelte-1k4nt8{width:100%;background:var(--color-surface-secondary);border:var(--elevation-border);border-radius:var(--radius-sm);overflow:hidden}.width-bar-inner.svelte-1k4nt8{display:flex;justify-content:space-between;align-items:center;padding:var(--space-sm) var(--space-md)}.width-label.svelte-1k4nt8{font-size:var(--type-caption-size)}.width-table.svelte-1k4nt8{display:flex;flex-direction:column;gap:1px;border:var(--elevation-border);border-radius:var(--radius-md);overflow:hidden}.width-table-row.svelte-1k4nt8{display:grid;grid-template-columns:1fr auto 2fr;gap:var(--space-md);align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-bottom:var(--elevation-border)}.width-table-row.svelte-1k4nt8:last-child{border-bottom:none}.breakpoint-table.svelte-1k4nt8{border:var(--elevation-border);border-radius:var(--radius-md);overflow:hidden}.breakpoint-header.svelte-1k4nt8{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--space-md);padding:var(--space-sm) var(--space-md);background:var(--color-surface-secondary);border-bottom:var(--elevation-border)}.breakpoint-row.svelte-1k4nt8{display:grid;grid-template-columns:1fr 1fr 2fr;gap:var(--space-md);align-items:center;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border-bottom:var(--elevation-border)}.breakpoint-row.svelte-1k4nt8:last-child{border-bottom:none}.responsive-grid.svelte-1k4nt8{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md)}.responsive-card.svelte-1k4nt8{border:var(--elevation-border);border-radius:var(--radius-md);padding:var(--space-lg)}.responsive-demo.svelte-1k4nt8{display:flex;align-items:stretch;height:64px;border:var(--elevation-border);border-radius:var(--radius-sm);overflow:hidden}.margin-indicator.svelte-1k4nt8{background:var(--color-accent-subtle);display:flex;align-items:center;justify-content:center;flex-shrink:0}.gutter-demo.svelte-1k4nt8{flex:1;display:flex;align-items:stretch}.gutter-col.svelte-1k4nt8{flex:1;background:var(--color-surface-secondary)}.gutter-indicator.svelte-1k4nt8{background:var(--color-surface-tertiary);display:flex;align-items:center;justify-content:center;flex-shrink:0}