.comparison-root.svelte-65aayp{gap:18px;display:grid}.filter-tabs.svelte-65aayp{flex-wrap:wrap;gap:4px;display:flex}.tab-btn.svelte-65aayp{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);min-height:2rem;font-size:var(--v-text-label);color:var(--v-color-text);transition:all var(--v-transition-base) ease;justify-content:center;align-items:center;padding:0 .85rem;font-weight:600;display:inline-flex}.tab-btn.svelte-65aayp:hover{background:var(--v-status-secondary-bg)}.tab-btn.active.svelte-65aayp{border-color:var(--v-color-primary);color:var(--v-color-primary);background:color-mix(in srgb, var(--v-color-primary) 8%, var(--v-color-surface))}.comparison-grid.svelte-65aayp{grid-template-columns:1fr 1fr;gap:16px;display:grid}.side-card.svelte-65aayp{border:1px solid var(--v-color-border);border-radius:var(--v-radius-sm,6px);background:var(--v-color-surface);grid-template-rows:auto 1fr auto;display:grid;overflow:hidden}.bad-card.svelte-65aayp{border-top:3px solid var(--v-color-danger)}.good-card.svelte-65aayp{border-top:3px solid var(--v-color-primary)}.card-header.svelte-65aayp{border-bottom:1px solid var(--v-color-border);background:var(--v-color-surface-elevated);flex-direction:column;gap:4px;padding:12px 14px;display:flex}.status-badge.svelte-65aayp{font-size:var(--v-text-xs);letter-spacing:.05em;font-weight:700}.bad-badge.svelte-65aayp{color:var(--v-color-danger)}.good-badge.svelte-65aayp{color:var(--v-color-primary)}.anti-pattern-title.svelte-65aayp,.standard-title.svelte-65aayp{font-size:var(--v-text-body-sm);color:var(--v-color-text);font-weight:600}.card-preview.svelte-65aayp{background:var(--v-color-bg);align-content:center;min-height:180px;padding:16px;display:grid}.card-explanation.svelte-65aayp{border-top:1px solid var(--v-color-border);background:var(--v-color-surface);font-size:var(--v-text-body-sm);padding:12px 14px}.card-explanation.svelte-65aayp strong:where(.svelte-65aayp){font-size:var(--v-text-xs);text-transform:uppercase;color:var(--v-color-text-muted);margin-bottom:2px;display:block}.card-explanation.svelte-65aayp p:where(.svelte-65aayp){color:var(--v-color-text);margin:0;line-height:1.45}.preview-shell-bad.svelte-65aayp{background:#fff;border:1px solid #ccc;grid-template-columns:100px 14px 1fr;height:140px;display:grid}.mock-sidebar-bad.svelte-65aayp{background:#f0f0f0;border-right:2px solid #bbb;align-content:start;gap:4px;padding:8px;display:grid}.active-bad.svelte-65aayp{color:#111;background:#e0e0e0;font-weight:700}.thick-gutter-bad.svelte-65aayp{background:#d4d4d4;box-shadow:inset 2px 0 4px #00000026,inset -2px 0 4px #00000026}.mock-content-bad.svelte-65aayp{background:#fafafa;border-left:2px solid #bbb;padding:10px}.card-elevated-bad.svelte-65aayp{background:linear-gradient(135deg,#fff 0%,#f4f6f8 100%);border:2px solid #00000014;border-radius:16px;padding:16px;box-shadow:0 10px 25px -5px #0003,0 8px 10px -6px #0000001a}.capsule-tabs-bad.svelte-65aayp{background:#eceff1;border-radius:9999px;gap:8px;padding:6px;display:flex;box-shadow:0 4px 12px #00000014}.pill-bad.svelte-65aayp{border-radius:9999px;padding:6px 14px;font-size:11px;font-weight:600}.active-pill-bad.svelte-65aayp{color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 2px 6px #05966966}.preview-split-bad.svelte-65aayp{grid-template-columns:1fr 12px 1fr;display:grid}.split-left-bad.svelte-65aayp,.split-right-bad.svelte-65aayp{background:#fff;border:1px solid #ccc;border-radius:8px;padding:10px;box-shadow:0 4px 8px #00000014}.split-gutter-bad.svelte-65aayp{background:0 0}.preview-shell-good.svelte-65aayp{background:var(--v-color-surface);border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);grid-template-columns:110px 1fr;height:140px;display:grid}.mock-sidebar-good.svelte-65aayp{background:var(--v-color-surface);border-inline-end:1px solid var(--v-color-border);align-content:start;gap:1px;padding:8px 0;display:grid}.mock-item.svelte-65aayp{font-size:var(--v-text-xs);border-top:1px solid #0000;border-bottom:1px solid #0000;border-inline-end:1px solid #0000;padding:6px 8px}.active-good.svelte-65aayp{background:var(--v-color-bg);color:var(--v-color-primary);box-shadow:inset 3px 0 0 var(--v-color-primary);border-top:1px solid var(--v-color-border);border-bottom:1px solid var(--v-color-border);border-inline-end:1px solid var(--v-color-bg);z-index:2;margin-inline-end:-1px;font-weight:600;position:relative}.mock-content-good.svelte-65aayp{background:var(--v-color-bg);padding:10px 12px}.mock-title.svelte-65aayp{font-size:var(--v-text-body-sm);color:var(--v-color-text);font-weight:700}.mock-meta.svelte-65aayp{font-size:var(--v-text-xs);color:var(--v-color-text-muted)}.card-flat-good.svelte-65aayp{border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);padding:14px}.btn-group-good.svelte-65aayp{gap:3px;display:flex}.tab-good.svelte-65aayp{all:unset;box-sizing:border-box;border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);min-height:1.85rem;font-size:var(--v-text-xs);color:var(--v-color-text);padding:0 .65rem;font-weight:600}.active-tab-good.svelte-65aayp{border-color:var(--v-color-primary);color:var(--v-color-primary);background:color-mix(in srgb, var(--v-color-primary) 8%, var(--v-color-surface))}.preview-split-good.svelte-65aayp{border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);grid-template-columns:110px 1fr;display:grid}.split-left-good.svelte-65aayp{border-inline-end:1px solid var(--v-color-border);gap:2px;padding:8px;display:grid}.split-right-good.svelte-65aayp{gap:2px;padding:8px 12px;display:grid}.mt-2.svelte-65aayp{margin-top:8px}@media (width<=768px){.comparison-grid.svelte-65aayp{grid-template-columns:1fr}}.tokens-root.svelte-1rsvex6{gap:16px;display:grid}.tabs-bar.svelte-1rsvex6{border-bottom:1px solid var(--v-color-border);flex-wrap:wrap;gap:4px;padding-bottom:8px;display:flex}.tab-btn.svelte-1rsvex6{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);min-height:2rem;font-size:var(--v-text-label);color:var(--v-color-text);transition:all var(--v-transition-base) ease;justify-content:center;align-items:center;padding:0 .85rem;font-weight:600;display:inline-flex}.tab-btn.svelte-1rsvex6:hover{background:var(--v-status-secondary-bg)}.tab-btn.active.svelte-1rsvex6{border-color:var(--v-color-primary);color:var(--v-color-primary);background:color-mix(in srgb, var(--v-color-primary) 8%, var(--v-color-surface))}.swatches-grid.svelte-1rsvex6{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;display:grid}.swatch-card.svelte-1rsvex6{border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);gap:10px;padding:12px;display:grid}.swatch-header.svelte-1rsvex6{align-items:center;gap:10px;display:flex}.swatch-preview.svelte-1rsvex6{border-radius:var(--v-radius-xs,2px);flex-shrink:0;width:28px;height:28px}.swatch-titles.svelte-1rsvex6{gap:2px;min-width:0;display:grid}.swatch-titles.svelte-1rsvex6 strong:where(.svelte-1rsvex6){font-size:var(--v-text-body-sm);font-family:var(--v-font-family-mono)}.swatch-desc.svelte-1rsvex6{font-size:var(--v-text-label);color:var(--v-color-text-muted)}.swatch-values.svelte-1rsvex6{font-size:var(--v-text-label);border-top:1px solid var(--v-color-border);gap:16px;padding-top:6px;display:flex}.val-label.svelte-1rsvex6{color:var(--v-color-text-muted);margin-right:4px}.swatch-values.svelte-1rsvex6 code:where(.svelte-1rsvex6){font-family:var(--v-font-family-mono);font-weight:600}.type-table-wrap.svelte-1rsvex6{overflow-x:auto}.flat-table.svelte-1rsvex6{border-collapse:collapse;width:100%;font-size:var(--v-text-body-sm)}.flat-table.svelte-1rsvex6 th:where(.svelte-1rsvex6),.flat-table.svelte-1rsvex6 td:where(.svelte-1rsvex6){border:1px solid var(--v-color-border);text-align:left;background:var(--v-color-surface);padding:10px 12px}.flat-table.svelte-1rsvex6 th:where(.svelte-1rsvex6){background:var(--v-color-surface-elevated);font-weight:700;font-size:var(--v-text-label);color:var(--v-color-text-muted);text-transform:uppercase;letter-spacing:.05em}.muted-td.svelte-1rsvex6{color:var(--v-color-text-muted)}.density-grid.svelte-1rsvex6{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;display:grid}.density-card.svelte-1rsvex6{border:1px solid var(--v-color-border);border-radius:var(--v-radius-xs,2px);background:var(--v-color-surface);gap:4px;padding:14px;display:grid}.density-title.svelte-1rsvex6{font-size:var(--v-text-label);text-transform:uppercase;letter-spacing:.05em;color:var(--v-color-text-muted);font-weight:700}.density-val.svelte-1rsvex6{font-size:var(--v-text-lg);color:var(--v-color-primary);font-weight:700}.density-desc.svelte-1rsvex6{font-size:var(--v-text-body-sm);color:var(--v-color-text-muted);margin:4px 0 0;line-height:1.4}.rules-card.svelte-1rsvex6{border:1px solid var(--v-color-border);border-radius:var(--v-radius-sm,6px);background:var(--v-color-surface);gap:12px;padding:18px;display:grid}.rules-card.svelte-1rsvex6 h3:where(.svelte-1rsvex6){font-size:var(--v-text-title);margin:0}.rules-card.svelte-1rsvex6 p:where(.svelte-1rsvex6){color:var(--v-color-text-muted);margin:0;line-height:1.55}.rule-points.svelte-1rsvex6{gap:12px;margin-top:6px;display:grid}.rule-point.svelte-1rsvex6{border-left:3px solid var(--v-color-primary);background:color-mix(in srgb, var(--v-color-primary) 4%, var(--v-color-surface));border-radius:0 var(--v-radius-xs) var(--v-radius-xs) 0;padding:10px 14px}.rule-point.svelte-1rsvex6 strong:where(.svelte-1rsvex6){font-size:var(--v-text-body-sm);color:var(--v-color-text);margin-bottom:2px;display:block}.rule-point.svelte-1rsvex6 p:where(.svelte-1rsvex6){font-size:var(--v-text-body-sm);color:var(--v-color-text-muted);margin:0}