.preview-box{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:32px 24px;background:#fff;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 1px 3px 0 rgba(0,0,0,.06);margin:16px 0}.preview-box-dark{background:#0f172a;border-color:#1e293b}.preview-box-col{flex-direction:column;align-items:flex-start}.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));grid-gap:8px;gap:8px;margin:16px 0}.swatch{display:flex;flex-direction:column;gap:4px}.swatch-color{height:48px;border-radius:8px;border:1px solid rgba(0,0,0,.07)}.swatch-label{font-size:11px;color:#64748b}.swatch-label,.swatch-value{font-family:JetBrains Mono,ui-monospace,monospace}.swatch-value{font-size:10px;color:#94a3b8}.spacing-scale{display:flex;flex-direction:column;gap:8px;margin:16px 0}.spacing-row{display:flex;align-items:center;gap:12px}.spacing-bar{height:20px;background-color:#3b82f6;border-radius:4px;opacity:.65}.spacing-meta{font-size:12px;color:#64748b;font-family:JetBrains Mono,ui-monospace,monospace;min-width:120px}.type-row{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid #e2e8f0}:is(.dark) .type-row{border-bottom-color:#1e293b}.type-meta{font-size:11px;color:#94a3b8;font-family:JetBrains Mono,ui-monospace,monospace;min-width:100px;flex-shrink:0}.token-table{width:100%;border-collapse:collapse;font-size:13px}.token-table th{text-align:left;padding:8px 12px;border-bottom:2px solid #e2e8f0;color:#475569;font-weight:600}.token-table td{padding:8px 12px;border-bottom:1px solid #f1f5f9;vertical-align:middle}.token-table code{font-family:JetBrains Mono,ui-monospace,monospace;font-size:12px;background:#f1f5f9;padding:2px 6px;border-radius:4px}.component-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));grid-gap:16px;gap:16px;margin:24px 0}.component-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px 0 rgba(0,0,0,.05);transition:box-shadow .15s ease,border-color .15s ease;text-decoration:none;display:block;color:inherit}.component-card:hover{box-shadow:0 4px 14px 0 rgba(0,0,0,.09);border-color:#c0cdd9}.component-card-preview{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:28px 20px;background:#f8fafc;border-bottom:1px solid #e2e8f0;min-height:96px}.component-card-body{padding:14px 16px}.component-card-name{font-size:.875rem;font-weight:600;color:#0f172a;margin:0 0 4px}.component-card-desc{font-size:.75rem;color:#64748b;margin:0;line-height:1.5}