/* Blog layout — Litzki Universe design tokens */

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
  align-items: start;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

.blog-layout__content {
  min-width: 0;
}

.blog-layout__sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.blog-sidebar-card {
  border: 1px solid var(--color-gray-200);
  padding: 1.25rem;
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-sans);
}

.blog-sidebar-card .eyebrow {
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-accent-dark);
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  display: block;
}

.sidebar-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: var(--text-xs);
  margin: 0;
  padding: 0;
}

.sidebar-meta dt { color: var(--color-gray-600); }

.sidebar-meta dd {
  color: var(--color-navy);
  margin: 0;
  font-weight: var(--weight-semibold);
}

.sidebar-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}

.sidebar-toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: 0.4rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-xs);
}

.sidebar-toc li:last-child { border-bottom: none; }

.sidebar-toc li::before {
  content: counter(toc);
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

.sidebar-toc a {
  color: var(--color-gray-700);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: 1.4;
}

.sidebar-toc a:hover { color: var(--color-accent-dark); }

/* Blog hub grid — cards loaded by JS */
.blog-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-8);
  margin-top: var(--space-10);
}

.blog-card {
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.blog-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-gray-300);
}

.blog-card__category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
}

.blog-card__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}

.blog-card__title a {
  color: inherit;
  text-decoration: none;
}

.blog-card__title a:hover {
  color: var(--color-accent-dark);
  text-decoration: none;
}

.blog-card__excerpt {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.blog-card__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-400);
}

/* Post body content */
.post-body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
  max-width: var(--content-max);
}

.post-body h2 {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  color: var(--color-navy);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
}

.post-body h3 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  color: var(--color-navy);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

.post-body p {
  margin-bottom: var(--space-5);
}

.post-body ul,
.post-body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.post-body ul li {
  position: relative;
  padding-left: var(--space-4);
  margin-bottom: var(--space-2);
}

.post-body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

.post-body ol {
  counter-reset: post-list;
}

.post-body ol li {
  counter-increment: post-list;
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
}

.post-body ol li::before {
  content: counter(post-list) '.';
  position: absolute;
  left: 0;
  color: var(--color-accent-dark);
  font-weight: var(--weight-semibold);
}

.post-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  color: var(--color-navy);
  font-style: italic;
}

@media (max-width: 1024px) {
  .blog-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--space-5);
  }
  .blog-layout__sidebar { display: none; }
}

/* ─── Blog Hub: category wraps to 2 lines in meta column ─── */
.hub-row__meta {
  min-width: 0;
}

.hub-row__cat {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
  display: inline-block;
  line-height: 1.4;
}

/* ─── Blog Post: article wrapper ─── */
.blog-article {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-gray-700);
  line-height: var(--leading-relaxed);
}

.blog-header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-gray-200);
}

.blog-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  margin-bottom: var(--space-4);
}

.blog-meta .separator { color: var(--color-gray-300); }

.blog-header h1 {
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin: 0;
}

.blog-content {
  composes: post-body;
}

/* ─── Tables ─── */
.blog-article table,
.blog-content table,
.post-body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
}

.blog-article th,
.blog-content th,
.post-body th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-navy);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  padding: var(--space-3) var(--space-4);
  text-align: left;
}

.blog-article td,
.blog-content td,
.post-body td {
  border: 1px solid var(--color-gray-200);
  padding: var(--space-3) var(--space-4);
  color: var(--color-gray-700);
  vertical-align: top;
}

.blog-article tr:nth-child(even) td,
.blog-content tr:nth-child(even) td,
.post-body tr:nth-child(even) td {
  background: var(--color-gray-50, #fafaf9);
}

.audit-table__caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
  text-align: left;
  margin-bottom: var(--space-2);
  caption-side: top;
  display: block;
}

/* ─── Numbered & custom lists ─── */
.numbered-list {
  list-style: none;
  counter-reset: num-list;
  padding: 0;
  margin: var(--space-6) 0;
}

.numbered-list li {
  counter-increment: num-list;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-gray-200);
  font-size: var(--text-base);
  color: var(--color-gray-700);
}

.numbered-list li:last-child { border-bottom: none; }

.numbered-list li::before {
  content: counter(num-list, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  font-weight: var(--weight-semibold);
  padding-top: 0.2em;
}

/* ─── Contrast / Code blocks ─── */
.contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-8) 0;
}

.contrast-block {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.contrast-block--muted {
  border: 1px solid var(--color-gray-200);
  background: var(--color-gray-100);
}

.contrast-block--highlighted {
  border: 1px solid var(--color-accent);
  background: var(--color-white);
}

.contrast-block__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
  color: var(--color-gray-600);
}

.contrast-block--highlighted .contrast-block__label {
  color: var(--color-accent-dark);
  border-bottom-color: var(--color-accent);
}

.contrast-block pre {
  margin: 0;
  padding: var(--space-4);
  font-size: var(--text-xs);
  line-height: 1.6;
  overflow-x: auto;
}

/* ─── Ingestion block (AI summary) ─── */
.ingestion-block {
  border: 1px solid var(--color-gray-200);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-gray-100);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.ingestion-block__badge {
  display: inline-block;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-3);
}

.ingestion-block__header,
.ingestion-block__title {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ingestion-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.ingestion-block__list li {
  color: var(--color-gray-700);
  line-height: 1.6;
  padding-left: 18px;
}

.ingestion-block__list li::before { content: none; }

.ingestion-block__key,
.key {
  color: var(--color-navy);
  font-weight: var(--weight-semibold);
  margin-right: var(--space-2);
}

.ingestion-block__thesis {
  margin-top: var(--space-2);
  color: var(--color-gray-600);
}

/* ─── Discourse / CTA block ─── */
.discourse-block {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin: var(--space-10) 0;
  background: var(--color-white);
}

.discourse-block__label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: var(--space-4);
}

.discourse-block__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.discourse-btn--primary {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-decoration: none;
  background: var(--color-accent);
  color: var(--color-navy);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  transition: background var(--transition-fast);
}

.discourse-btn--primary:hover { background: var(--color-accent-dark); color: var(--color-white); }

.discourse-btn--outline {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid var(--color-gray-300);
  color: var(--color-gray-700);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.discourse-btn--outline:hover { border-color: var(--color-navy); color: var(--color-navy); }

/* ─── Author box ─── */
.author-box {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-6);
  align-items: start;
  border-top: 1px solid var(--color-gray-200);
  padding-top: var(--space-8);
  margin-top: var(--space-10);
}

.author-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--color-gray-200);
}

.author-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.author-name {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
}

.author-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  letter-spacing: 0.06em;
}

.author-info p {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  margin: var(--space-2) 0 var(--space-3);
}

.author-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.author-links a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-dark);
  text-decoration: none;
  letter-spacing: 0.04em;
}

.author-links a:hover { color: var(--color-navy); }

/* ─── Syntax token highlighting ─── */
.tok-key { color: var(--color-accent-dark); }
.tok-str { color: #2e7d32; }

/* ─── Sovp comparison wrapper ─── */
.sovp-comparison {
  overflow-x: auto;
  margin: var(--space-6) 0;
}

/* ─── Responsive ─── */
@media (max-width: 768px) {
  .blog-header h1 { font-size: var(--text-3xl); }
  .contrast-grid { grid-template-columns: 1fr; }
  .author-box { grid-template-columns: 1fr; }
  .author-img { width: 60px; height: 60px; }
  .discourse-block__actions { flex-direction: column; }
}

/* ─── Blog Hub container ─── */
#blog-grid {
  margin-top: var(--space-10);
}

/* ─── Blog Hub — Feature Post, Filters, Rows, Sidebar ─── */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  display: block;
  margin-bottom: var(--space-4);
}

.blog-category {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  background: var(--color-gray-100);
  border: 1px solid var(--color-gray-200);
  padding: 0.15em 0.6em;
  border-radius: var(--radius-sm);
  white-space: normal;
  word-break: break-word;
  display: inline-block;
  line-height: 1.4;
}

/* Featured post banner */
.hub-featured {
  border: 1px solid var(--color-gray-200);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  margin-bottom: var(--space-10);
  overflow: hidden;
}

.hub-featured__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-navy);
  padding: var(--space-2) var(--space-6);
}

.hub-featured__inner {
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.hub-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-500);
}

.hub-featured__title {
  font-family: var(--font-serif);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-4);
}

.hub-featured__title a {
  color: inherit;
  text-decoration: none;
}

.hub-featured__title a:hover {
  color: var(--color-accent-dark);
}

.hub-featured__excerpt {
  font-size: var(--text-base);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
  max-width: 72ch;
}

/* Hub 2-column layout */
.hub-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: var(--space-10);
  align-items: start;
}

.hub-main {
  min-width: 0;
}

/* Filter bar */
.hub-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-gray-200);
}

.hub-filter-btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-gray-600);
  background: var(--color-white);
  border: 1px solid var(--color-gray-200);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.hub-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-navy);
}

.hub-filter-btn--active {
  background: var(--color-navy);
  color: var(--color-white);
  border-color: var(--color-navy);
}

.hub-filter-count {
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  background: var(--color-gray-100);
  border-radius: 999px;
  padding: 0 0.45em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.6;
}

.hub-filter-btn--active .hub-filter-count {
  background: var(--color-gray-700);
  color: var(--color-gray-200);
}

/* Hub post rows */
.hub-posts {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.hub-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6) 0;
  border-bottom: 1px solid var(--color-gray-200);
  transition: background var(--transition-fast);
}

.hub-row:last-child {
  border-bottom: none;
}

.hub-row__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: 0.25em;
}

.hub-row__meta time {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-gray-400);
  white-space: nowrap;
}

.hub-row__cat {
  align-self: flex-start;
}

.hub-row__body {
  min-width: 0;
}

.hub-row__title {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--color-navy);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2);
}

.hub-row__title a {
  color: inherit;
  text-decoration: none;
}

.hub-row__title a:hover {
  color: var(--color-accent-dark);
}

.hub-row__excerpt {
  font-size: var(--text-sm);
  color: var(--color-gray-600);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.hub-row__link {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--color-accent-dark);
  text-decoration: none;
  white-space: nowrap;
  padding-top: 0.25em;
  transition: color var(--transition-fast);
}

.hub-row__link:hover {
  color: var(--color-navy);
}

/* Hub sidebar */
.hub-sidebar {
  position: sticky;
  top: 2rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hub-sidebar-card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-md);
  background: var(--color-white);
  padding: var(--space-5);
  font-family: var(--font-sans);
}

.hub-sidebar-badges {
  width: 100%;
  flex-direction: column;
  border-radius: var(--radius-md);
}

.hub-sidebar-badges .trust-badge {
  width: 100%;
  box-sizing: border-box;
}

.hub-sidebar-badges .trust-badges__sep {
  width: auto;
  height: 1px;
}

.hub-sidebar-cat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-gray-700);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), color var(--transition-fast);
  margin-bottom: var(--space-1);
}

.hub-sidebar-cat:hover {
  background: var(--color-gray-100);
  color: var(--color-navy);
}

.hub-sidebar-cat.active {
  background: var(--color-navy);
  color: var(--color-white);
}

.hub-sidebar-cat.active .hub-sidebar-count {
  background: var(--color-gray-700);
  color: var(--color-gray-200);
}

.hub-sidebar-cat--all {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-gray-200);
  padding-bottom: var(--space-3);
  border-radius: 0;
}

.hub-sidebar-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-gray-100);
  color: var(--color-gray-500);
  border-radius: 999px;
  padding: 0 0.45em;
  min-width: 1.4em;
  text-align: center;
  line-height: 1.6;
}

/* Hub responsive */
@media (max-width: 900px) {
  .hub-layout {
    grid-template-columns: 1fr;
  }
  .hub-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-4);
  }
}

@media (max-width: 640px) {
  .hub-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .hub-row__link {
    justify-self: flex-start;
  }
  .hub-featured__title {
    font-size: var(--text-2xl);
  }
  .hub-filters {
    gap: var(--space-1);
  }
}

/* ── Inline Diagram & Widget Styles (migrated from HTML) ──────── */

/* from: blog/agentic-infrastructure-validation.html */
.prob-flow { animation: flow-dim 2.5s infinite linear; stroke-dasharray: 12 6; }
                                .cert-flow { animation: flow-bright 2.5s infinite linear; stroke-dasharray: 12 6; }
                                .verdict-q { animation: blink-uncertain 3s infinite; opacity: 0; }
                                .verdict-v { animation: blink-verified 3s infinite; opacity: 0; }
                                @keyframes flow-dim {
                                    0%   { stroke-dashoffset: 36; }
                                    100% { stroke-dashoffset: 0; }
                                }
                                @keyframes flow-bright {
                                    0%   { stroke-dashoffset: 36; }
                                    100% { stroke-dashoffset: 0; }
                                }
                                @keyframes blink-uncertain {
                                    0%, 50% { opacity: 0; }
                                    60%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
                                @keyframes blink-verified {
                                    0%, 30% { opacity: 0; }
                                    45%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }

/* from: blog/ai-infrastructure-audit.html */
.audit-scan { animation: audit-bounce 3s infinite ease-in-out; }
                                .sovp-scan { animation: sovp-deep 3s infinite linear; }
                                .layer-miss { animation: blink-red 3s infinite; opacity: 0; }
                                .layer-hit { animation: blink-green 3s infinite; opacity: 0; }
                                @keyframes audit-bounce {
                                    0%   { transform: translateY(0px); stroke: #555; }
                                    40%  { transform: translateY(55px); stroke: #ff3333; }
                                    60%  { transform: translateY(55px); stroke: #ff3333; }
                                    100% { transform: translateY(0px); stroke: #555; }
                                }
                                @keyframes sovp-deep {
                                    0%   { transform: translateY(0px); }
                                    50%  { transform: translateY(130px); }
                                    100% { transform: translateY(0px); }
                                }
                                @keyframes blink-red {
                                    0%, 55% { opacity: 0; }
                                    65%, 95% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
                                @keyframes blink-green {
                                    0%, 40% { opacity: 0; }
                                    55%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }

/* from: blog/authority-economics-algorithmic-solvency.html */
.bg-grid-node { fill: url(#grid-node); }
                                .txt-cyan-node { fill: var(--color-accent); font-size: 14px; font-weight: bold; letter-spacing: 2px; }
                                .txt-dim-node { fill: #e0e0e0; font-size: 14px; letter-spacing: 2px; }
                                .spin-slow-node { transform-origin: 200px 200px; animation: spin-anim-node 20s linear infinite; }
                                .spin-fast-node { transform-origin: 200px 200px; animation: spin-anim-node 10s linear infinite reverse; }
                                .pulse-ring-node { animation: pulse-anim-node 4s ease-in-out infinite alternate; }
                                @keyframes spin-anim-node { 100% { transform: rotate(360deg); } }
                                @keyframes pulse-anim-node {
                                    0% { stroke-width: 1; filter: drop-shadow(0 0 2px var(--color-accent)); }
                                    100% { stroke-width: 3; filter: drop-shadow(0 0 10px var(--color-accent)); }
                                }
.grid-bg-econ { fill: url(#grid-econ); }
                                    .axis-econ { stroke: #333; stroke-width: 2; }
                                    .text-dim-econ { fill: #666; font-size: 11px; letter-spacing: 1px; }
                                    .text-cyan-econ { fill: var(--color-accent); font-size: 12px; font-weight: bold; letter-spacing: 1px; }
                                    .text-red-econ { fill: #ff3333; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
                                    .line-opex-econ { stroke: #ff3333; stroke-width: 2; fill: none; stroke-dasharray: 4 4; }
                                    .line-capex-econ { stroke: var(--color-accent); stroke-width: 3; fill: none; filter: url(#glow-cyan-econ); }
                                    .data-point-econ { fill: #0F1F3D; stroke-width: 2; }
                                    .fill-capex-econ { fill: var(--color-accent-bg); stroke: none; }
.bg-grid-diag { fill: url(#grid-diag2); }
                                    .txt-head-diag { font-size: 14px; font-weight: bold; letter-spacing: 2px; }
                                    .txt-sub-diag { font-size: 10px; letter-spacing: 1px; }
                                    .blink-diag { animation: blink-err-diag 1s steps(2) infinite; }
                                    @keyframes blink-err-diag { 0% { opacity: 1; } 100% { opacity: 0.3; } }
                                    @keyframes load-bar-diag { from { width: 0; } to { width: 300px; } }
                                    @keyframes load-bar-short-diag { from { width: 0; } to { width: 100px; } }
.txt-title-solv { fill: #e0e0e0; font-size: 18px; font-weight: bold; letter-spacing: 2px; }
                                    .txt-sub-solv { fill: var(--color-accent); font-size: 10px; letter-spacing: 1px; }
                                    .txt-h-solv { font-size: 16px; font-weight: bold; letter-spacing: 1px; }
                                    .txt-p-solv { font-size: 12px; fill: #999; }
                                    .box-bad-solv { fill: transparent; stroke: #ff3333; stroke-width: 1; stroke-dasharray: 2 4; }
                                    .box-mid-solv { fill: transparent; stroke: #555; stroke-width: 1; }
                                    .box-good-solv { fill: transparent; stroke: var(--color-accent); stroke-width: 2; }
.lz-calc-container {
                                box-sizing: border-box;
                                background: var(--color-gray-50, #f8f7f4);
                                border: 1px solid var(--color-gray-200, #e5e7eb);
                                border-radius: 8px;
                                padding: 2rem;
                                margin: 2rem 0;
                                width: 100%;
                                font-family: var(--font-sans, system-ui, sans-serif);
                                color: var(--color-navy, #0F1F3D);
                            }
                            .lz-calc-container * { box-sizing: border-box; }
                            .lz-calc-title {
                                margin-top: 0;
                                color: var(--color-navy, #0F1F3D);
                                text-align: left;
                                margin-bottom: 2rem;
                                font-size: 1rem;
                                font-weight: 700;
                                letter-spacing: 0.05em;
                                border-bottom: 2px solid var(--color-accent, #C9A84C);
                                padding-bottom: 10px;
                            }
                            .lz-calc-grid {
                                display: grid;
                                grid-template-columns: 1fr 1fr;
                                gap: 3rem;
                                align-items: start;
                            }
                            @media (max-width: 700px) {
                                .lz-calc-grid { grid-template-columns: 1fr; gap: 2rem; }
                            }
                            .lz-calc-input-group { margin-bottom: 1.5rem; }
                            .lz-calc-label {
                                display: block;
                                font-size: var(--text-xs);
                                color: var(--color-gray-600, #4b5563);
                                margin-bottom: 0.5rem;
                                text-transform: uppercase;
                                letter-spacing: 0.06em;
                                font-family: var(--font-sans, system-ui, sans-serif);
                            }
                            .lz-calc-input {
                                width: 100%;
                                background: var(--color-white, #ffffff);
                                border: 1px solid var(--color-gray-300, #d1d5db);
                                color: var(--color-navy, #0F1F3D);
                                padding: 0.8rem;
                                font-size: 1rem;
                                font-family: var(--font-sans, system-ui, sans-serif);
                                border-radius: 4px;
                                transition: border-color 0.2s;
                            }
                            .lz-calc-input:focus { outline: none; border-color: var(--color-accent, #C9A84C); box-shadow: 0 0 0 3px #ede0c0; }
                            .lz-calc-slider {
                                -webkit-appearance: none;
                                width: 100%;
                                height: 3px;
                                background: var(--color-gray-200, #e5e7eb);
                                outline: none;
                                margin-top: 0.8rem;
                                cursor: pointer;
                                border-radius: 2px;
                            }
                            .lz-calc-slider::-webkit-slider-thumb {
                                -webkit-appearance: none;
                                width: 16px;
                                height: 16px;
                                background: var(--color-accent, #C9A84C);
                                cursor: pointer;
                                border-radius: 50%;
                                border: 2px solid var(--color-white, #ffffff);
                            }
                            .lz-calc-slider::-moz-range-thumb {
                                width: 16px;
                                height: 16px;
                                background: var(--color-accent, #C9A84C);
                                cursor: pointer;
                                border-radius: 50%;
                                border: 2px solid var(--color-white, #ffffff);
                            }
                            .lz-calc-val-display {
                                text-align: right;
                                color: var(--color-accent, #C9A84C);
                                font-size: 0.9rem;
                                margin-top: 5px;
                                font-weight: 700;
                            }
                            .lz-calc-result-box {
                                background: var(--color-white, #ffffff);
                                padding: 1.5rem;
                                text-align: left;
                                border: 1px solid var(--color-gray-200, #e5e7eb);
                                border-radius: 6px;
                                margin-bottom: 1rem;
                            }
                            .lz-calc-res-label {
                                text-transform: uppercase;
                                font-size: var(--text-xs);
                                letter-spacing: 0.06em;
                                color: var(--color-gray-500, #6b7280);
                            }
                            .lz-calc-res-value {
                                font-size: 2rem;
                                font-weight: 700;
                                margin: 0.5rem 0 0;
                                color: var(--color-navy, #0F1F3D);
                            }
                            .lz-calc-status {
                                font-weight: 700;
                                padding: 0.8rem;
                                margin-top: 1rem;
                                display: block;
                                width: 100%;
                                font-size: var(--text-xs);
                                text-align: center;
                                letter-spacing: 0.06em;
                                border-radius: 4px;
                            }
                            .lz-status-bad { background: #FEE2E2; color: #dc2626; border: 1px solid #fca5a5; }
                            .lz-status-mid { background: var(--color-gray-50, #f8f7f4); color: var(--color-gray-600, #4b5563); border: 1px solid var(--color-gray-300, #d1d5db); }
                            .lz-status-good { background: #fef9ec; color: #92701a; border: 1px solid var(--color-accent, #C9A84C); }
                            .lz-calc-footer {
                                font-size: var(--text-xs);
                                color: var(--color-gray-500, #6b7280);
                                margin-top: 2rem;
                                border-top: 1px dashed var(--color-gray-200, #e5e7eb);
                                padding-top: 10px;
                            }

/* from: blog/deterministic-signal-architecture.html */
.scan-stochastic { animation: scan-erratic 3s infinite; }
                                .scan-deterministic { animation: scan-smooth 3s infinite linear; }
                                .alert-drop { animation: blink-red 3s infinite; opacity: 0; }
                                .alert-valid { animation: blink-green 3s infinite; opacity: 0; }
                                @keyframes scan-erratic {
                                    0% { transform: translateY(0); stroke: #555; }
                                    25% { transform: translateY(40px); stroke: #ff3333; }
                                    50% { transform: translateY(10px); stroke: #555; }
                                    75% { transform: translateY(60px); stroke: #ff3333; }
                                    100% { transform: translateY(0); stroke: #555; }
                                }
                                @keyframes scan-smooth {
                                    0% { transform: translateY(0); }
                                    50% { transform: translateY(80px); }
                                    100% { transform: translateY(0); }
                                }
                                @keyframes blink-red {
                                    0%, 60% { opacity: 0; }
                                    65%, 95% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
                                @keyframes blink-green {
                                    0%, 40% { opacity: 0; }
                                    50%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
.noise-particle { animation: chaotic 3s infinite linear; transform-origin: center; }
                                .signal-beam { animation: flow 2s infinite linear; stroke-dasharray: 20 10; }
                                .sovp-core { animation: pulse 2s infinite alternate ease-in-out; }
                                @keyframes chaotic {
                                    0% { transform: translate(0, 0) scale(1); opacity: 0.8; }
                                    25% { transform: translate(10px, -15px) scale(1.2); opacity: 0.5; }
                                    50% { transform: translate(-5px, 20px) scale(0.8); opacity: 0.9; }
                                    75% { transform: translate(-15px, -5px) scale(1.1); opacity: 0.4; }
                                    100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
                                }
                                @keyframes flow {
                                    0% { stroke-dashoffset: 30; }
                                    100% { stroke-dashoffset: 0; }
                                }
                                @keyframes pulse {
                                    0% { filter: drop-shadow(0 0 5px var(--color-accent)); }
                                    100% { filter: drop-shadow(0 0 15px var(--color-accent)); }
                                }

/* from: blog/frankenstein-stack-enterprise-architecture.html */
.grid-bg-arch { fill: url(#grid-arch); }
                                    .text-cyan-arch { fill: var(--color-accent); font-size: 12px; font-weight: bold; letter-spacing: 1px; }
                                    .text-red-arch { fill: #ff3333; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
                                    .text-dim-arch { fill: #e0e0e0; font-size: 12px; letter-spacing: 1px; }
                                    .line-fail-arch { stroke: #ff3333; stroke-width: 1.5; stroke-dasharray: 4 4; fill: none; }
                                    .line-valid-arch { stroke: var(--color-accent); stroke-width: 2; fill: none; stroke-dasharray: 8 12; animation: flowArch 1s linear infinite; }
                                    .line-solid-arch { stroke: #333; stroke-width: 2; fill: none; }
                                    .node-legacy-arch { fill: #1a0f0f; stroke: #ff3333; stroke-width: 1; }
                                    .node-zwap-arch { fill: #0F1F3D; stroke: var(--color-accent); stroke-width: 2; }
                                    @keyframes flowArch {
                                        to { stroke-dashoffset: -20; }
                                    }
.msa26-wrapper {
                                    font-family: var(--font-sans, system-ui, sans-serif);
                                    max-width: 100%;
                                    margin: 0 auto;
                                    background: #F8F7F4;
                                    border: 1px solid #333;
                                    color: #0F1F3D;
                                    line-height: 1.6;
                                    box-sizing: border-box;
                                }
                                .msa26-wrapper *, .msa26-wrapper *::before, .msa26-wrapper *::after {
                                    box-sizing: inherit;
                                }
                                .msa26-header {
                                    background: #F8F7F4;
                                    border-bottom: 1px solid var(--color-accent);
                                    padding: 24px 30px;
                                    text-align: center;
                                }
                                .msa26-header h2 {
                                    margin: 0;
                                    font-size: 20px;
                                    font-weight: 700;
                                    color: var(--color-accent);
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                    line-height: 1.3;
                                    border: none;
                                    padding: 0;
                                }
                                .msa26-content { padding: 30px; }
                                .msa26-intro {
                                    margin-bottom: 30px;
                                    color: #334155;
                                    font-size: 16px;
                                    text-align: center;
                                    border-bottom: 1px solid #1a1a1a;
                                    padding-bottom: 20px;
                                }
                                .msa26-step { display: none; animation: msa26-fade-in 0.5s ease-in-out; }
                                .msa26-step.msa26-active { display: block; }
                                .msa26-sector-group {
                                    margin-bottom: 30px;
                                    background: #0d0d0d;
                                    border: 1px solid #222;
                                }
                                .msa26-sector-header {
                                    background: #111;
                                    padding: 10px 20px;
                                    border-bottom: 1px solid #1a1a1a;
                                }
                                .msa26-sector-title {
                                    margin: 0;
                                    font-size: 16px;
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                    color: var(--color-accent);
                                    font-weight: 700;
                                    display: flex;
                                    align-items: center;
                                    border: none;
                                    padding: 0;
                                }
                                .msa26-sector-title::before {
                                    content: '';
                                    display: inline-block;
                                    width: 6px;
                                    height: 6px;
                                    background: var(--color-accent);
                                    margin-right: 10px;
                                    flex-shrink: 0;
                                }
                                .msa26-sector-body { padding: 12px 20px; }
                                .msa26-question-row {
                                    display: flex;
                                    align-items: flex-start;
                                    margin-bottom: 10px;
                                    padding: 10px;
                                    transition: background 0.2s;
                                    cursor: pointer;
                                    border: 1px solid transparent;
                                }
                                .msa26-question-row:last-child { margin-bottom: 0; }
                                .msa26-question-row:hover { background: #111; }
                                .msa26-question-row.msa26-row-selected {
                                    background-color: var(--color-accent-bg) !important;
                                    border-color: var(--color-accent-bg);
                                }
                                .msa26-checkbox {
                                    -webkit-appearance: none;
                                    -moz-appearance: none;
                                    appearance: none;
                                    width: 20px;
                                    height: 20px;
                                    border: 1px solid #555;
                                    background-color: #F8F7F4;
                                    margin-right: 14px;
                                    margin-top: 2px;
                                    cursor: pointer;
                                    flex-shrink: 0;
                                    position: relative;
                                    outline: none;
                                    transition: all 0.2s ease;
                                }
                                .msa26-checkbox:checked {
                                    background-color: var(--color-accent);
                                    border-color: var(--color-accent);
                                }
                                .msa26-checkbox:checked::after {
                                    content: '';
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    width: 12px;
                                    height: 12px;
                                    transform: translate(-50%, -50%);
                                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a0a0a' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
                                    background-repeat: no-repeat;
                                    background-position: center;
                                }
                                .msa26-label {
                                    cursor: pointer;
                                    font-size: 15px;
                                    color: #e0e0e0;
                                    line-height: 1.5;
                                    user-select: none;
                                }
                                .msa26-id-badge {
                                    display: inline-block;
                                    font-size: 13px;
                                    color: #e0e0e0;
                                    margin-right: 8px;
                                    min-width: 20px;
                                    font-weight: normal;
                                }
                                .msa26-btn {
                                    display: inline-block;
                                    background: var(--color-accent);
                                    color: #0F1F3D !important;
                                    padding: 12px 24px;
                                    border: none;
                                    font-size: 14px;
                                    font-weight: 700;
                                    cursor: pointer;
                                    text-decoration: none !important;
                                    transition: all 0.2s;
                                    text-align: center;
                                    letter-spacing: 1px;
                                    text-transform: uppercase;
                                    font-family: var(--font-sans, system-ui, sans-serif);
                                }
                                .msa26-btn:hover { background: #00e5e5; }
                                .msa26-btn-outline {
                                    background: transparent;
                                    border: 1px solid var(--color-accent);
                                    color: var(--color-accent) !important;
                                    margin-left: 10px;
                                }
                                .msa26-btn-outline:hover { background: var(--color-accent-bg); }
                                .msa26-actions { text-align: center; margin-top: 36px; }
                                .msa26-result-box {
                                    text-align: center;
                                    padding: 40px 20px;
                                    background: #0d0d0d;
                                    border: 1px solid #333;
                                    margin-bottom: 30px;
                                }
                                .msa26-score-display {
                                    font-size: 56px;
                                    font-weight: 900;
                                    display: block;
                                    margin-bottom: 15px;
                                    line-height: 1;
                                    letter-spacing: -2px;
                                }
                                .msa26-status-text {
                                    font-size: 16px;
                                    font-weight: 700;
                                    margin-bottom: 20px;
                                    display: block;
                                    text-transform: uppercase;
                                    letter-spacing: 2px;
                                }
                                .msa26-status-desc {
                                    font-size: 14px;
                                    color: #888;
                                    max-width: 580px;
                                    margin: 0 auto;
                                    line-height: 1.7;
                                }
                                .msa26-color-red { color: #ff3333; border-color: #ff3333 !important; background-color: #FEE2E2 !important; }
                                .msa26-color-yellow { color: #f5a623; border-color: #f5a623 !important; background-color: #FEF9C3 !important; }
                                .msa26-color-green { color: var(--color-accent); border-color: var(--color-accent) !important; background-color: var(--color-accent-bg) !important; }
                                @keyframes msa26-fade-in {
                                    from { opacity: 0; transform: translateY(10px); }
                                    to { opacity: 1; transform: translateY(0); }
                                }
                                @media (max-width: 600px) {
                                    .msa26-btn { display: block; width: 100%; margin: 10px 0; }
                                    .msa26-btn-outline { margin-left: 0; }
                                    .msa26-content { padding: 15px; }
                                }

/* from: de/blog/agentische-infrastruktur-validierung.html */
.prob-flow-de { animation: flow-dim-de 2.5s infinite linear; stroke-dasharray: 12 6; }
                                .cert-flow-de { animation: flow-bright-de 2.5s infinite linear; stroke-dasharray: 12 6; }
                                .verdict-q-de { animation: blink-uncertain-de 3s infinite; opacity: 0; }
                                .verdict-v-de { animation: blink-verified-de 3s infinite; opacity: 0; }
                                @keyframes flow-dim-de {
                                    0%   { stroke-dashoffset: 36; }
                                    100% { stroke-dashoffset: 0; }
                                }
                                @keyframes flow-bright-de {
                                    0%   { stroke-dashoffset: 36; }
                                    100% { stroke-dashoffset: 0; }
                                }
                                @keyframes blink-uncertain-de {
                                    0%, 50% { opacity: 0; }
                                    60%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
                                @keyframes blink-verified-de {
                                    0%, 30% { opacity: 0; }
                                    45%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }

/* from: de/blog/ki-infrastruktur-audit.html */
.audit-scan-de { animation: audit-bounce-de 3s infinite ease-in-out; }
                                .sovp-scan-de { animation: sovp-deep-de 3s infinite linear; }
                                .layer-miss-de { animation: blink-red-de 3s infinite; opacity: 0; }
                                .layer-hit-de { animation: blink-green-de 3s infinite; opacity: 0; }
                                @keyframes audit-bounce-de {
                                    0%   { transform: translateY(0px); stroke: #555; }
                                    40%  { transform: translateY(55px); stroke: #ff3333; }
                                    60%  { transform: translateY(55px); stroke: #ff3333; }
                                    100% { transform: translateY(0px); stroke: #555; }
                                }
                                @keyframes sovp-deep-de {
                                    0%   { transform: translateY(0px); }
                                    50%  { transform: translateY(130px); }
                                    100% { transform: translateY(0px); }
                                }
                                @keyframes blink-red-de {
                                    0%, 55% { opacity: 0; }
                                    65%, 95% { opacity: 1; }
                                    100% { opacity: 0; }
                                }
                                @keyframes blink-green-de {
                                    0%, 40% { opacity: 0; }
                                    55%, 90% { opacity: 1; }
                                    100% { opacity: 0; }
                                }