:root {
  --bg: #081f3b;
  --bg-2: #0d3157;
  --ink-2: #c3d9ec;
  --muted: #8aa8c2;
  --line: rgba(91, 190, 255, 0.25);
  --paper: rgba(8, 31, 59, 0.94);
  --cyan-glow: rgba(0, 174, 255, 0.48);
}

html,
body {
  background-color: var(--bg);
}

.ribbon {
  background-color: rgba(7, 25, 47, 0.9);
}

header.site {
  background-color: rgba(8, 28, 52, 0.88);
  box-shadow: 0 12px 36px rgba(0, 9, 24, 0.2);
}

.dropdown,
.search-panel {
  background-color: var(--paper);
}

body .mobile-nav-panel {
  background-color: rgba(7, 25, 47, 0.97);
}

body .mobile-nav-card,
body .mobile-nav-sub-link {
  background-color: rgba(9, 35, 64, 0.9);
}

body .search-modal {
  background-color: rgba(3, 16, 34, 0.7);
}

body .search-panel,
body .search-head input {
  background-color: rgba(8, 31, 59, 0.96);
}

.marquee {
  background-color: rgba(8, 28, 52, 0.82);
}

.section,
.page-hero,
.books-hero,
.software-hero,
.article-hero {
  background-color: #081f3b;
}

.mukatta-strip,
.detail-strip,
.software-section,
.books-section {
  background-color: #0a2746;
}

.card,
.mk-cell,
.method-card,
.matrix-cell,
.blog-card,
.book-card,
.software-card,
.software-panel,
.article-meta span {
  background-color: rgba(8, 28, 52, 0.78);
}

.qa,
.article-body,
.detail-panel {
  background-color: rgba(9, 35, 64, 0.82);
}

footer.site {
  background-color: #051426;
}

body > main:first-child {
  background-color: rgba(10, 36, 66, 0.88);
}

@supports (backdrop-filter: blur(12px)) {
  header.site,
  .ribbon {
    backdrop-filter: blur(12px) saturate(1.14);
  }
}