.dark-mode body {
  background-color: #050608;
  background-image:
    radial-gradient(circle at 14% 12%, rgba(120,149,255,0.20), transparent 26%),
    radial-gradient(circle at 86% 10%, rgba(255,210,140,0.19), transparent 24%),
    radial-gradient(circle at 52% 0%, rgba(255,255,255,0.08), transparent 28%),
    radial-gradient(circle at 50% 28%, rgba(255,228,176,0.05), transparent 38%),
    radial-gradient(circle at 20% 72%, rgba(90,124,214,0.07), transparent 34%),
    linear-gradient(180deg, rgba(5,6,8,0.96), rgba(5,6,8,0.99));
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  background-attachment: fixed;
}

.zeus-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  opacity: 1;
  filter: saturate(1.12) contrast(1.08);
  background-image:
    radial-gradient(circle at 50% 10%, rgba(255, 240, 204, 0.10), transparent 24%),
    radial-gradient(circle at 18% 24%, rgba(126, 167, 255, 0.07), transparent 22%),
    radial-gradient(circle at 82% 20%, rgba(255, 216, 150, 0.08), transparent 20%);
}

.zeus-particles::before,
.zeus-particles::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  will-change: transform, background-position;
  mix-blend-mode: screen;
}

.zeus-particles::before {
  opacity: 1;
  filter: saturate(1.22) brightness(1.18) drop-shadow(0 0 18px rgba(255, 225, 164, 0.22)) drop-shadow(0 0 28px rgba(132, 171, 255, 0.14));
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,252,246,0.86) 0 1.8px, transparent 4.1px),
    radial-gradient(circle at 76% 18%, rgba(255,224,164,0.82) 0 1.9px, transparent 4.2px),
    radial-gradient(circle at 32% 78%, rgba(184,214,255,0.66) 0 1.7px, transparent 4px),
    radial-gradient(circle at 72% 72%, rgba(255,246,233,0.58) 0 1.85px, transparent 4.3px),
    radial-gradient(circle at 10% 88%, rgba(255,255,255,0.40) 0 1.35px, transparent 3.7px),
    radial-gradient(circle at 88% 82%, rgba(244,206,138,0.44) 0 1.3px, transparent 3.6px),
    radial-gradient(circle at 52% 16%, rgba(148,190,255,0.36) 0 1.2px, transparent 3.5px),
    radial-gradient(circle at 58% 58%, rgba(255,246,236,0.24) 0 1.0px, transparent 3.3px),
    radial-gradient(circle at 26% 46%, rgba(255,252,246,0.30) 0 1.0px, transparent 3.2px),
    radial-gradient(circle at 82% 46%, rgba(172,208,255,0.26) 0 0.95px, transparent 3px);
  background-size: 150px 150px, 210px 210px, 280px 280px, 360px 360px, 470px 470px, 590px 590px, 720px 720px, 860px 860px, 980px 980px, 1120px 1120px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: zeusParticlesDriftA 18s linear infinite alternate, zeusParticlesPulseA 11s ease-in-out infinite;
}

.zeus-particles::after {
  opacity: 0.82;
  filter: blur(1.25px) saturate(1.22) brightness(1.28) drop-shadow(0 0 28px rgba(255, 214, 146, 0.22)) drop-shadow(0 0 36px rgba(128, 166, 255, 0.12));
  background-image:
    radial-gradient(circle at 22% 32%, rgba(255,251,246,0.34) 0 1.05px, transparent 3.4px),
    radial-gradient(circle at 68% 24%, rgba(179,210,255,0.31) 0 1.1px, transparent 3.5px),
    radial-gradient(circle at 40% 70%, rgba(255,224,176,0.34) 0 1.05px, transparent 3.4px),
    radial-gradient(circle at 82% 68%, rgba(255,247,236,0.28) 0 1.1px, transparent 3.5px),
    radial-gradient(circle at 52% 48%, rgba(255,255,255,0.20) 0 0.95px, transparent 3px),
    radial-gradient(circle at 16% 54%, rgba(255,222,156,0.18) 0 0.95px, transparent 3.1px),
    radial-gradient(circle at 88% 42%, rgba(132,176,255,0.18) 0 0.92px, transparent 3px),
    radial-gradient(circle at 48% 18%, rgba(255,250,240,0.16) 0 0.88px, transparent 2.8px);
  background-size: 120px 120px, 170px 170px, 230px 230px, 300px 300px, 410px 410px, 540px 540px, 700px 700px, 860px 860px;
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  animation: zeusParticlesDriftB 24s linear infinite alternate-reverse, zeusParticlesPulseB 13s ease-in-out infinite;
}

.dark-mode .site,
.dark-mode .site-content,
.dark-mode .gh-main,
.dark-mode .gh-foot,
.dark-mode .gh-outer,
.dark-mode .gh-inner {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

.dark-mode .gh-head,
.dark-mode .off-canvas,
.dark-mode .is-head-open:not(.is-head-brand):not(.is-head-dark):not(.is-head-transparent) #gh-head,
.dark-mode .is-head-open.is-head-dark #gh-head,
.dark-mode .is-head-open.is-head-dark #gh-head .gh-head-actions {
  position: relative;
  z-index: 2;
  background-color: rgba(5, 6, 8, 0.88) !important;
  backdrop-filter: blur(4px);
}

.dark-mode .u-placeholder,
.dark-mode :not(pre) > code,
.dark-mode pre,
.dark-mode .comment-container,
.dark-mode .kg-header-card.kg-style-light,
.dark-mode .kg-bookmark-card a.kg-bookmark-container,
.dark-mode .kg-bookmark-card a.kg-bookmark-container:hover,
.dark-mode .kg-audio-card,
.dark-mode .kg-file-card-container,
.dark-mode .kg-file-card-container:hover,
.dark-mode .kg-product-card-container,
.dark-mode .page-number,
.dark-mode .gh-outline-btn,
.dark-mode .featured-posts .post,
.dark-mode .post-feed article {
  background-color: rgba(12, 15, 20, 0.92) !important;
}

.dark-mode .post-feed {
  display: grid;
  grid-template-columns: repeat(3, 320px);
  justify-content: center;
  gap: 42px;
  margin: 0 auto;
  max-width: 1128px;
  align-items: start;
}

.dark-mode .post-feed .post {
  margin-bottom: 0;
  border: 1px solid #262a33;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.dark-mode .post-feed .post.no-image {
  padding: 26px 24px;
}

.dark-mode .post-feed .post-media {
  margin: 0;
  max-width: none;
}

.dark-mode .post-feed .gh-canvas {
  display: block;
}

.dark-mode .post-feed .gh-canvas:last-child {
  padding: 18px 20px 22px;
}

.dark-mode .post-feed .u-placeholder.horizontal:before {
  padding-bottom: 74%;
}

.dark-mode .post-feed .post-title {
  font-size: 2.2rem;
  line-height: 1.15;
}

.dark-mode .post-feed .post-meta {
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

.dark-mode .post-feed .post-excerpt {
  color: #b8c0cc;
  font-size: 1.5rem;
  line-height: 1.55;
  margin-top: 10px;
}

.dark-mode .featured-posts .post {
  border: 1px solid #262a33;
  border-radius: 18px;
  overflow: hidden;
}

.dark-mode .featured-posts .post-header {
  padding: 16px 20px 18px;
}

.dark-mode .featured-posts .post-title {
  font-size: 2.1rem;
}

.dark-mode .kg-bookmark-card,
.dark-mode .page-number,
.dark-mode .post-footer,
.dark-mode .gh-outline-btn,
.dark-mode hr,
.dark-mode .sep:after {
  border-color: #262a33;
}

.dark-mode .owl .owl-next,
.dark-mode .owl .owl-prev {
  background-color: #11141a;
  color: #f5f7fb;
  box-shadow: 0 0 0 1px #2a2f38;
}

.dark-mode .owl .owl-dot span {
  background-color: #3b404b;
}

.dark-mode .owl .owl-dot.active span,
.dark-mode .gh-primary-btn {
  background-color: var(--ghost-accent-color);
}

.dark-mode .post-meta,
.dark-mode .author-location,
.dark-mode .author-social-item,
.dark-mode .page-number,
.dark-mode .menu-item-link,
.dark-mode .button-arrow-icon {
  color: #9aa0aa;
}

.dark-mode .gh-head .nav a:hover,
.dark-mode .gh-foot a:hover,
.dark-mode a:not(.post-tag):not(.kg-btn):hover {
  opacity: 0.92;
}

@keyframes zeusParticlesDriftA {
  0% {
    transform: translate3d(0, 0, 0);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    transform: translate3d(0, -10px, 0);
    background-position: 64px -88px, -74px 56px, 42px 76px, -46px -52px, -22px 34px, 24px -24px, -38px 18px, 18px -42px, 30px 20px, -26px -18px;
  }
}

@keyframes zeusParticlesDriftB {
  0% {
    transform: translate3d(0, 0, 0) scale(1.02);
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    transform: translate3d(0, 12px, 0) scale(1.05);
    background-position: -54px 72px, 36px -58px, -28px 44px, 24px -36px, -16px 26px, 18px -28px, -24px 18px, 12px -16px;
  }
}

@keyframes zeusParticlesPulseA {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

@keyframes zeusParticlesPulseB {
  0%, 100% {
    opacity: 0.68;
  }
  50% {
    opacity: 0.86;
  }
}

@media (max-width: 1100px) {
  .dark-mode .post-feed {
    grid-template-columns: repeat(2, 320px);
    max-width: 682px;
  }
}

@media (max-width: 767px) {
  .dark-mode .post-feed {
    grid-template-columns: minmax(0, 1fr);
    max-width: 92vw;
    gap: 24px;
  }

  .dark-mode .post-feed .post-title {
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zeus-particles::before,
  .zeus-particles::after {
    animation: none;
  }
}

.dark-mode .post-feed .post,
.dark-mode .featured-posts .post {
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dark-mode .post-feed .post:hover,
.dark-mode .post-feed .post:focus-within {
  transform: translateY(-4px);
  border-color: rgba(242, 199, 92, 0.72);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(242, 199, 92, 0.34), 0 0 18px rgba(242, 199, 92, 0.18);
}

.dark-mode .featured-posts .post:hover,
.dark-mode .featured-posts .post:focus-within {
  transform: translateY(-4px);
  border-color: rgba(242, 199, 92, 0.72);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(242, 199, 92, 0.30), 0 0 16px rgba(242, 199, 92, 0.16);
}

.dark-mode .post-feed .post,
.dark-mode .featured-posts .post {
  border-color: rgba(124, 166, 255, 0.34);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(124, 166, 255, 0.22),
    0 0 16px rgba(124, 166, 255, 0.12);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.dark-mode .post-feed .post:hover,
.dark-mode .post-feed .post:focus-within,
.dark-mode .post-feed .post:active,
.dark-mode .featured-posts .post:hover,
.dark-mode .featured-posts .post:focus-within,
.dark-mode .featured-posts .post:active {
  transform: translateY(-4px);
  border-color: rgba(242, 199, 92, 0.78);
  box-shadow:
    0 22px 54px rgba(0, 0, 0, 0.34),
    0 0 0 1px rgba(242, 199, 92, 0.36),
    0 0 18px rgba(242, 199, 92, 0.22);
}

.dark-mode .featured-posts {
  max-width: 1128px;
  margin-left: auto;
  margin-right: auto;
}
