.topic-header { margin-bottom: var(--space-8); }
.topic-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.topic-prerequisites { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.prereq-tag { padding: var(--space-1) var(--space-2); background: var(--color-surface-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-secondary); border: var(--border); }
.learning-section { margin-bottom: var(--space-8); }
.learning-section h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); padding-bottom: var(--space-2); border-bottom: var(--border); }
.learning-content { font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--color-text-secondary); }
.learning-content p { margin-bottom: var(--space-4); }
.learning-content ul { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.learning-content li { margin-bottom: var(--space-2); }
.learning-content li::marker { color: var(--color-text-tertiary); }
.knowledge-graph { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-4); margin-top: var(--space-4); }
.graph-card { padding: var(--space-4); border: var(--border); border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); }
.graph-card:hover { border-color: var(--color-border-strong); background: var(--color-surface-2); }
.graph-card-title { font-size: var(--text-sm); font-weight: 500; margin-bottom: var(--space-1); }
.graph-card-type { font-size: var(--text-xs); color: var(--color-text-tertiary); font-family: var(--font-mono); }