.spacing-row.svelte-944mgq{display:grid;grid-template-columns:1fr;gap:var(--space-4);align-items:start;padding:var(--space-6) 0;border-bottom:1px solid color-mix(in oklch,var(--border) 40%,transparent)}.spacing-row.svelte-944mgq:first-child{padding-top:0}.spacing-row.svelte-944mgq:last-child{border-bottom:none;padding-bottom:0}.spacing-info.svelte-944mgq{display:flex;flex-direction:column;gap:var(--space-1)}.spacing-token.svelte-944mgq{color:var(--primary);font-family:var(--font-mono);font-size:var(--text-sm);background:var(--surface-code);padding:2px var(--space-2);border-radius:var(--radius-sm);align-self:flex-start}.spacing-values.svelte-944mgq{display:flex;gap:var(--space-1);align-items:baseline}.spacing-value.svelte-944mgq{color:var(--typography-body-color);font-size:var(--typography-body-size);font-weight:var(--font-medium)}.spacing-px.svelte-944mgq{color:var(--typography-caption-color);font-size:var(--typography-caption-size)}.spacing-usage.svelte-944mgq{color:var(--typography-muted-color);font-size:var(--typography-muted-size)}.spacing-visual.svelte-944mgq{display:flex;align-items:center}.spacing-bar.svelte-944mgq{background:linear-gradient(90deg,var(--primary),var(--primary-hover));border-radius:var(--radius-sm);min-height:4px;transition:var(--transition-base)}.spacing-bar.svelte-944mgq:hover{opacity:.8}@media (min-width: 768px){.spacing-row.svelte-944mgq{grid-template-columns:280px 1fr;gap:var(--space-8);align-items:center}}.composition-section.svelte-944mgq{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border)}.composition-toggle.svelte-944mgq{padding:var(--space-2) var(--space-4);background:var(--surface-secondary);color:var(--typography-body-color);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer;transition:var(--transition-base)}.composition-toggle.svelte-944mgq:hover{background:var(--surface-tertiary)}.composition-demo.svelte-944mgq{margin-top:var(--space-6);padding:var(--space-4);background:var(--surface-secondary);border-radius:var(--radius-lg);position:relative}.composition-card.svelte-944mgq{padding:var(--space-6);background:var(--surface);border-radius:var(--radius-md);position:relative}.composition-card.svelte-944mgq h3:where(.svelte-944mgq){color:var(--typography-heading-color);font-size:var(--text-lg);font-weight:var(--font-medium);margin:0 0 var(--space-3) 0}.composition-card.svelte-944mgq p:where(.svelte-944mgq){color:var(--typography-body-color);font-size:var(--text-base);margin:0 0 var(--space-6) 0;word-wrap:break-word;overflow-wrap:break-word}.card-actions.svelte-944mgq{display:flex;gap:var(--space-3);position:relative;flex-wrap:wrap}.demo-button.svelte-944mgq{padding:var(--space-2) var(--space-4);background:var(--surface-secondary);color:var(--typography-body-color);border:1px solid var(--border);border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:var(--font-medium);cursor:pointer}.demo-button.primary.svelte-944mgq{background:var(--primary);color:var(--pure-white);border-color:transparent}.card-annotation.svelte-944mgq,.button-annotation.svelte-944mgq{display:none;position:absolute;color:var(--primary);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-medium);background:var(--surface);padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);border:1px dashed var(--primary);opacity:.8;white-space:nowrap}.card-annotation.top.svelte-944mgq{top:-12px;left:var(--space-6)}.card-annotation.left.svelte-944mgq{top:var(--space-6);left:-40px}.button-annotation.svelte-944mgq{bottom:-24px;left:0}.dark .composition-demo.svelte-944mgq{background:var(--surface-tertiary)}@media (min-width: 769px){.composition-demo.svelte-944mgq{padding:var(--space-8)}.card-annotation.svelte-944mgq,.button-annotation.svelte-944mgq{display:block}}
