@layer components {

/* Смешанные мелкие правила и легаси-контексты, не выделенные в отдельные блоки. */

.kn-about-inner { background: var(--bg-card); border: 2px solid var(--border-strong); border-radius: 0; padding: 12px 16px; color: var(--text-secondary); max-width: var(--measure); }
.kn-about-inner strong { color: var(--text-primary); font-weight: 700; }

.kn-eyebrow { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-primary); }
.kn-eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex-shrink: 0; }
.kn-section__title { margin-bottom: 20px; font-family: var(--font-display); line-height: 1.2; max-width: var(--content-max); text-wrap: balance; }
.kn-section__sub { color: var(--text-secondary); max-width: var(--measure); margin-bottom: 24px; }
.kn-section__sub p { margin: 0; }
.kn-section__sub p + p { margin-top: 0.75em; }
.kn-section__sub--narrow { max-width: var(--measure-narrow); margin-top: 0; }
.kn-section__sub--wide { max-width: var(--measure); }

.kn-breadcrumb { font-size: 0.8125rem; color: var(--text-secondary); margin-bottom: 16px; }
.kn-breadcrumb a { color: var(--accent-ink); text-decoration: none; }
.kn-breadcrumb a:hover { text-decoration: underline; }
.kn-breadcrumb span { color: var(--text-secondary); }
.kn-back-link { display: inline-block; font-size: 0.8125rem; color: var(--text-secondary); text-decoration: none; margin-bottom: 8px; }
.kn-back-link:hover { color: var(--accent-ink); }

mark.kn-search-highlight { background: var(--accent-light); color: var(--accent-ink); border-radius: 0; padding: 0 2px; }

.kn-principles-alt { background: var(--bg-card); padding: 1px 0; overflow: hidden; }

.kn-principle-text { max-width: var(--measure); display: flex; flex-direction: column; gap: 16px; }
.kn-principle-text p { font-size: 1rem; line-height: 1.7; color: var(--text-secondary); }

.img-rounded { max-width: 100%; height: auto; border-radius: 0; display: block; border: 2px solid var(--border-strong); }
.kn-section-divider { margin-top: 48px; padding-top: 32px; border-top: 2px solid var(--border-strong); }

.kn-tech-label { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 900px) {
  .kn-about-inner { padding: 12px 16px; }
  .kn-principle-text p { font-size: 0.9375rem; }
}

}