:root {
  --castle-accent: #a31f34;
  --castle-accent-soft: rgba(163, 31, 52, 0.12);
  --castle-blue: #2f6f9f;
  --castle-ink: #2f363d;
  --castle-muted: #66727d;
  --castle-surface: rgba(255, 255, 255, 0.88);
  --castle-surface-strong: rgba(255, 255, 255, 0.96);
  --castle-border: rgba(47, 54, 61, 0.12);
  --castle-shadow: 0 18px 48px rgba(26, 35, 45, 0.13);
}

html:not(.dark) body {
  background:
    radial-gradient(circle at 18% 8%, rgba(247, 135, 54, 0.08), transparent 28rem),
    radial-gradient(circle at 88% 0%, rgba(47, 111, 159, 0.10), transparent 30rem),
    linear-gradient(180deg, #f8fafc 0%, #f4f2ee 100%);
}

.dark body {
  background:
    radial-gradient(circle at 14% 12%, rgba(163, 31, 52, 0.16), transparent 28rem),
    radial-gradient(circle at 86% 0%, rgba(47, 111, 159, 0.20), transparent 30rem),
    #111418;
}

.navbar-content {
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 10px 30px rgba(31, 39, 47, 0.10);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.navbar-content .navbar-list .navbar-item a,
.navbar-content .navbar-list .navbar-item {
  letter-spacing: 0;
}

.navbar-content .navbar-list .navbar-item.active a,
.navbar-content .navbar-list .navbar-item a:hover {
  color: var(--castle-accent) !important;
}

.navbar-content .navbar-list .navbar-item.active::after {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--castle-accent), var(--castle-blue));
}

.home-banner-container::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.12) 38%, rgba(10, 14, 18, 0.30) 100%),
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.28), transparent 20rem);
  z-index: 0;
}

.home-banner-container .content {
  z-index: 1;
}

.home-banner-container .description {
  text-shadow: 0 3px 18px rgba(255, 255, 255, 0.72), 0 1px 2px rgba(0, 0, 0, 0.18);
}

.home-banner-container .description p {
  margin-top: 1.15rem;
  padding: 0.48rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 999px;
  color: rgba(34, 39, 46, 0.88);
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 10px 30px rgba(31, 39, 47, 0.13);
  backdrop-filter: blur(12px) saturate(135%);
  -webkit-backdrop-filter: blur(12px) saturate(135%);
}

.social-contacts {
  background: rgba(255, 255, 255, 0.42) !important;
  border-color: rgba(255, 255, 255, 0.44) !important;
  box-shadow: 0 16px 42px rgba(31, 39, 47, 0.18) !important;
}

.social-contact-item a,
.social-contact-item-qr a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.social-contact-item a:hover,
.social-contact-item-qr a:hover {
  color: var(--castle-accent);
  background: rgba(255, 255, 255, 0.56);
  transform: translateY(-1px);
}

.home-sidebar-container .sidebar-links,
.home-sidebar-container .sidebar-content,
.home-article-item,
.article-content-container,
.page-template-container {
  border: 1px solid var(--castle-border);
  background: var(--castle-surface-strong);
  box-shadow: var(--castle-shadow);
}

.home-sidebar-container .sidebar-links,
.home-sidebar-container .sidebar-content {
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-sidebar-container .site-name,
.home-sidebar-container .author .name {
  color: var(--castle-ink);
}

.home-sidebar-container .links {
  border-radius: 12px;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.home-sidebar-container .links:hover {
  color: var(--castle-accent);
  background: var(--castle-accent-soft);
  transform: translateX(2px);
}

.home-article-list {
  gap: 2.15rem;
}

.home-article-item {
  overflow: hidden;
  border-radius: 18px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.home-article-item:hover {
  border-color: rgba(163, 31, 52, 0.24);
  box-shadow: 0 22px 56px rgba(26, 35, 45, 0.18);
  transform: translateY(-3px);
}

.home-article-thumbnail {
  height: 178px !important;
}

.home-article-thumbnail::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.18) 100%);
}

.home-article-thumbnail img {
  transform: scale(1.01);
}

.home-article-item:hover .home-article-thumbnail img {
  transform: scale(1.045);
}

.home-article-title {
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  line-height: 1.25;
}

.home-article-title a:hover,
.home-article-meta-info a:hover,
.article-meta-info a:hover,
.article-list a:hover .article-title {
  color: var(--castle-accent) !important;
}

.home-article-content.markdown-body {
  color: var(--castle-muted);
  line-height: 1.72;
}

.home-article-meta-info-container {
  gap: 1rem;
}

.home-article-meta-info {
  color: var(--castle-muted);
}

.home-article-meta-info ul,
.article-meta-info ul {
  gap: 0.18rem;
}

.article-content-container {
  overflow: hidden;
  border-radius: 20px;
}

.article-title-cover {
  max-width: min(920px, calc(100% - 3rem));
  border-radius: 14px !important;
  color: #2f363d !important;
  background: rgba(255, 248, 235, 0.78) !important;
  box-shadow: 0 14px 38px rgba(24, 30, 38, 0.18);
  font-size: clamp(2rem, 4.4vw, 3.25rem) !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}

.article-header {
  margin-top: 0.6rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--castle-border);
}

.article-meta-info {
  row-gap: 0.45rem;
}

.article-meta-info a,
.home-article-meta-info a {
  border-radius: 999px;
  padding: 0.08rem 0.28rem;
  transition: color 160ms ease, background-color 160ms ease;
}

.article-meta-info a:hover,
.home-article-meta-info a:hover {
  background: var(--castle-accent-soft);
}

.article-content.markdown-body {
  color: #303841;
  font-size: 1.02rem;
  line-height: 1.82;
}

.article-content.markdown-body > p:first-child {
  color: #252b31;
  font-size: 1.08rem;
}

.markdown-body h2 {
  position: relative;
  padding-left: 0.9rem;
  color: #263039;
}

.markdown-body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 4px;
  height: 1.1em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--castle-accent), var(--castle-blue));
}

.markdown-body table {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--castle-border);
}

.markdown-body table th {
  background: rgba(163, 31, 52, 0.08);
  color: #28313a;
}

.callout {
  border-radius: 14px !important;
  border: 1px solid rgba(47, 111, 159, 0.18);
  background: linear-gradient(135deg, rgba(47, 111, 159, 0.08), rgba(163, 31, 52, 0.06)) !important;
  box-shadow: none !important;
}

.side-tools-container .side-tools-list,
.side-tools-container .tool-expand,
.side-tools-container .tool-scroll-to-top,
.side-tools-container .tool-scroll-to-bottom {
  border-color: var(--castle-border);
  box-shadow: 0 12px 32px rgba(31, 39, 47, 0.10);
}

.page-template-container {
  overflow: hidden;
  border-radius: 20px;
}

.category-name {
  margin: -0.4rem -0.2rem 1.8rem;
  padding: 1.6rem 1.7rem;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(163, 31, 52, 0.10), rgba(47, 111, 159, 0.10)),
    rgba(255, 255, 255, 0.56);
  color: var(--castle-ink);
  font-size: clamp(2rem, 4vw, 3.2rem);
}

.archive-year {
  color: var(--castle-ink);
}

.archive-year-post-count {
  color: var(--castle-accent);
  background: var(--castle-accent-soft) !important;
}

.article-list .article-item {
  border-left-color: rgba(163, 31, 52, 0.20) !important;
}

.article-list .article-title {
  line-height: 1.38;
  transition: color 160ms ease, transform 160ms ease;
}

.article-list a:hover .article-title {
  transform: translateX(2px);
}

.footer-content-container {
  color: var(--castle-muted);
}

.dark .home-banner-container::before {
  background:
    linear-gradient(180deg, rgba(10, 14, 18, 0.08) 0%, rgba(10, 14, 18, 0.24) 45%, rgba(10, 14, 18, 0.55) 100%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.10), transparent 18rem);
}

.dark .home-banner-container .description {
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.72);
}

.dark .home-banner-container .description p,
.dark .social-contacts {
  color: rgba(244, 246, 248, 0.90);
  background: rgba(17, 20, 24, 0.48) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
}

.dark .home-sidebar-container .sidebar-links,
.dark .home-sidebar-container .sidebar-content,
.dark .home-article-item,
.dark .article-content-container,
.dark .page-template-container {
  background: rgba(20, 24, 29, 0.90);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.dark .home-sidebar-container .site-name,
.dark .home-sidebar-container .author .name,
.dark .article-content.markdown-body,
.dark .article-content.markdown-body > p:first-child,
.dark .markdown-body h2,
.dark .category-name,
.dark .archive-year {
  color: rgba(245, 247, 250, 0.92);
}

.dark .home-article-content.markdown-body,
.dark .home-article-meta-info,
.dark .footer-content-container {
  color: rgba(222, 228, 235, 0.72);
}

.dark .article-title-cover {
  color: rgba(245, 247, 250, 0.94) !important;
  background: rgba(20, 24, 29, 0.72) !important;
}

.dark .markdown-body table th {
  background: rgba(163, 31, 52, 0.20);
  color: rgba(245, 247, 250, 0.92);
}

.dark .category-name {
  background:
    linear-gradient(135deg, rgba(163, 31, 52, 0.20), rgba(47, 111, 159, 0.18)),
    rgba(20, 24, 29, 0.72);
}

@media (max-width: 768px) {
  .home-banner-container .description {
    padding-inline: 1rem;
  }

  .home-banner-container .description p {
    max-width: calc(100vw - 2rem);
    white-space: normal;
  }

  .home-article-thumbnail {
    height: 150px !important;
  }

  .home-article-item {
    border-radius: 16px;
  }

  .article-title-cover {
    max-width: calc(100% - 1.5rem);
    margin-inline: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding: 0.7rem 0.9rem !important;
    font-size: clamp(1.45rem, 8vw, 2.2rem) !important;
  }

  .article-content.markdown-body {
    font-size: 1rem;
    line-height: 1.78;
  }

  .category-name {
    padding: 1.15rem 1.2rem;
  }

  .article-list .article-title {
    font-size: 1.28rem !important;
  }
}