
    .library-subtitle { color: var(--color-text-muted); font-size: var(--font-size-sm, 14px); margin-bottom: 24px; }
    .feature-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
    .feature-item { display: flex; gap: 14px; padding: 12px 16px; background: var(--color-background); border-radius: 12px; }
    .feature-icon { font-size: var(--font-size-5xl, 28px); flex-shrink: 0; }
    .feature-content h4 { margin: 0 0 var(--spacing-sm); font-size: var(--font-size-sm, 14px); color: var(--color-secondary); }
    .feature-content p { margin: 0; font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }
    .architecture-diagram { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); margin: var(--spacing-lg) 0; padding: var(--spacing-lg); background: var(--color-background); border-radius: 12px; }
    .arch-level { width: 100%; max-width: 400px; }
    .arch-box { padding: 12px 16px; border-radius: var(--border-radius-sm); text-align: center; }
    .arch-box strong { display: block; font-size: var(--font-size-sm, 14px); }
    .arch-box small { font-size: var(--font-size-xs, 12px); color: var(--color-text-muted); }
    .arch-box.primary { background: var(--color-primary); color: var(--button-primary-text, var(--color-hero-text, #fff)); }
    .arch-box.primary small { color: var(--color-white-alpha-80, rgba(255,255,255,0.8)); }
    .arch-box.secondary { background: var(--color-secondary); color: var(--color-white); }
    .arch-box.secondary small { color: var(--color-white-alpha-80, rgba(255,255,255,0.8)); }
    .arch-box.tertiary { background: var(--color-background); border: 1px solid var(--color-border); color: var(--color-text); }
    .arch-arrow { font-size: var(--font-size-lg, 18px); color: var(--color-text-muted); }
    .library-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; font-size: var(--font-size-xs, 12px); }
    .library-table th, .library-table td { padding: var(--spacing-sm) 12px; border-bottom: 1px solid var(--color-border); text-align: left; }
    .library-table th { font-weight: var(--font-weight-semibold, 600); background: var(--color-background); }
    .code-block { background: var(--color-background); padding: 16px; border-radius: var(--border-radius-sm); font-size: var(--font-size-xs, 12px); overflow-x: auto; white-space: pre; font-family: monospace; margin-bottom: 16px; }
