/* Base */
:root {
  color-scheme: light;
  --page-bg: #f2f4f7;
  --category-gap: 6px;
  --tree-line: rgba(17,24,39,0.12);
  --surface: #ffffff;
  --surface-muted: var(--hover-bg);
  --footer-bg: #e3e8ee;
  --text: #111827;
  --muted: #6b7280;
  --border: rgba(17, 24, 39, 0.12);
  --input-bg: #ffffff;
  --input-border: rgba(17, 24, 39, 0.18);
  --hover-bg: rgba(17, 24, 39, 0.06);
  --switch-off: #9ca3af; /* Darker gray for better visibility */
  --switch-on: #111827;
  --switch-thumb: #ffffff;
  --focus: rgba(37, 99, 235, 0.35);
}

html[data-theme=dark] {
  color-scheme: dark;
  --page-bg: #0b1220;
  --surface: #0f172a;
  --surface-muted: var(--hover-bg);
  --footer-bg: #0f172a;
  --text: #e5e7eb;
  --muted: #94a3b8;
  --border: rgba(148, 163, 184, 0.18);
  --input-bg: rgba(15, 23, 42, 0.6);
  --input-border: rgba(148, 163, 184, 0.20);
  --hover-bg: rgba(226, 232, 240, 0.06);
  --switch-off: #334155;
  --switch-on: #4fb0a0;
  --switch-thumb: #e5e7eb;
  --focus: rgba(79, 176, 160, 0.24);
  --tree-line: rgba(255,255,255,0.12);
}

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

* {
  box-sizing: border-box;
}

main {
  background: var(--page-bg);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Ensure images don't overflow */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Tables scroll horizontally on small screens */
table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

/* Layouts */
.site-header-inner, .site-footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px;
}

.content {
  padding: 12px 0;
}
@media (max-width: 768px) {
  .content {
    padding: 16px 8px;
    width: 100%;
    box-sizing: border-box;
  }
}

/* Header Layout */
.site-header {
  /* Menu Toggle Button (Mobile) */
}
.site-header .site-header-inner {
  display: flex;
  align-items: center;
  min-height: 100px;
  gap: 12px;
}
@media (max-width: 768px) {
  .site-header .site-header-inner {
    flex-wrap: wrap;
    padding: 12px 16px;
    height: auto;
  }
}
.site-header .site-header-logo {
  display: flex;
  align-items: center;
}
.site-header .site-header-logo .blog-logo {
  width: 50px;
  height: 50px;
}
@media (max-width: 768px) {
  .site-header .site-header-logo {
    order: 1;
    margin-right: 8px;
    width: auto;
    justify-content: flex-start;
  }
}
.site-header .site-header-title {
  margin-right: auto;
  display: flex;
  align-items: center;
}
.site-header .site-header-title h1 {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (max-width: 768px) {
  .site-header .site-header-title h1 {
    font-size: 1.2rem;
  }
}
.site-header .site-header-title .site-title-link {
  color: inherit;
  text-decoration: none;
}
@media (max-width: 768px) {
  .site-header .site-header-title {
    order: 2;
    margin-right: auto;
    width: auto;
    justify-content: flex-start;
  }
}
.site-header .site-header-menu {
  margin-left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.site-header .site-header-menu a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background-color 120ms ease, color 120ms ease;
}
.site-header .site-header-menu a:hover {
  background: var(--hover-bg);
  color: var(--text);
}
.site-header .site-header-menu a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
}
@media (max-width: 768px) {
  .site-header .site-header-menu {
    display: none !important;
  }
}
.site-header .site-header-search {
  margin-left: 8px;
  display: flex;
  align-items: center;
  /* Compact search input with icon button */
}
@media (max-width: 768px) {
  .site-header .site-header-search {
    display: none; /* Hide from header in mobile */
  }
}
.site-header .site-header-search .site-search {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--input-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--input-bg);
}
.site-header .site-header-search .site-search:focus-within {
  box-shadow: 0 0 0 4px var(--focus);
}
.site-header .site-header-search .site-search input {
  border: 0;
  background: transparent;
  color: inherit;
  padding: 10px 12px;
  width: 180px;
  font-size: 14px;
  outline: none;
}
.site-header .site-header-search .site-search input::placeholder {
  color: var(--muted);
}
.site-header .site-header-search .site-search button {
  background: transparent;
  border: 0;
  padding: 0 12px 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--muted);
}
.site-header .site-header-search .site-search button:hover {
  color: var(--text);
}
.site-header .site-header-search .site-search button img.icon-search {
  width: 16px;
  height: 16px;
}
.site-header .site-header-menu-toggle {
  display: none;
}
@media (max-width: 768px) {
  .site-header .site-header-menu-toggle {
    order: 3;
    display: block;
  }
  .site-header .site-header-menu-toggle button {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Dark-mode specific icon/color overrides for search */
html[data-theme=dark] .site-search button {
  color: #ffffff;
}

html[data-theme=dark] .site-search button svg {
  fill: currentColor;
}

html[data-theme=dark] .site-search button img.icon-search {
  filter: invert(1) brightness(1.3);
}

.site-footer {
  margin-top: auto;
  padding: 40px 0;
  font-size: 14px;
  color: var(--muted);
  background: var(--footer-bg); /* Added background color */
  border-top: 1px solid var(--border); /* Optional: add border for better separation */
}
.site-footer .site-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media (max-width: 768px) {
  .site-footer .site-footer-inner {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 24px 16px;
  }
}
@media (max-width: 768px) {
  .site-footer .site-footer-contents {
    width: 100%;
    justify-content: center;
    display: flex;
  }
}
@media (max-width: 768px) {
  .site-footer .site-footer-darkmode {
    display: none !important;
  }
}

/* Components */
/* Theme Switch Toggle */
.theme-switch {
  display: inline-block;
  position: relative;
  cursor: pointer;
  width: 44px;
  height: 24px;
  -webkit-tap-highlight-color: transparent;
  user-select: none; /* Prevent text selection */
}
.theme-switch .theme-switch-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.theme-switch .theme-switch-track {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--switch-off);
  border-radius: 999px;
  position: relative;
  transition: background-color 200ms ease, box-shadow 200ms ease;
  overflow: hidden;
}
.theme-switch .theme-switch-track .icon-moon, .theme-switch .theme-switch-track .icon-sun {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
  color: var(--muted);
  z-index: 3;
  pointer-events: none;
}
.theme-switch .theme-switch-track .icon-moon {
  left: 6px;
}
.theme-switch .theme-switch-track .icon-sun {
  right: 6px;
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: var(--text);
}
.theme-switch .theme-switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--switch-thumb);
  position: absolute;
  top: 3px;
  left: 3px;
  transform: translateX(0);
  transition: transform 160ms ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  z-index: 2;
}

/* Dark-mode adjustments */
html[data-theme=dark] .theme-switch-track .icon-moon {
  transform: translateY(-50%) scale(1.18);
  left: 4px;
  color: var(--text);
}

html:not([data-theme=dark]) .theme-switch-track .icon-sun {
  transform: translateY(-50%) scale(1.06);
  right: 6px;
  color: var(--text);
  animation: sun-rise 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes sun-rise {
  0% {
    transform: translateY(50%) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1.06);
    opacity: 1;
  }
}
/* Checked state (dark) */
.theme-switch-input:checked + .theme-switch-track .icon-moon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  color: var(--text);
  animation: moon-rise 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes moon-rise {
  0% {
    transform: translateY(50%) scale(0.5);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
}
.theme-switch-input:checked + .theme-switch-track .icon-sun {
  opacity: 0;
  transform: translateY(-50%) scale(0.9);
}

.theme-switch-input:checked + .theme-switch-track {
  background: var(--switch-on);
}

.theme-switch-input:checked + .theme-switch-track .theme-switch-thumb {
  transform: translateX(20px);
}

.theme-switch-input:focus-visible + .theme-switch-track {
  box-shadow: 0 0 0 4px var(--focus);
}

/* Mobile Menu Drawer */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
}
.mobile-menu-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
@media (min-width: 769px) {
  .mobile-menu-overlay {
    display: none;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  background: var(--surface);
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s ease;
  padding: 20px;
  overflow-y: auto;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.mobile-menu.is-open {
  transform: translateX(0);
}
@media (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.mobile-menu-header .mobile-menu-title {
  font-weight: bold;
  font-size: 1.2rem;
}
.mobile-menu-header button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  padding: 4px;
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 24px;
}
.mobile-menu-links a {
  text-decoration: none;
  color: var(--text);
  font-size: 1.1rem;
  padding: 8px 0;
}

/* Mobile Search */
.mobile-menu-search {
  margin-bottom: 24px;
}
.mobile-menu-search .site-search {
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px 12px;
}
.mobile-menu-search .site-search input {
  border: none;
  background: transparent;
  color: var(--text);
  width: 100%;
  font-size: 1rem;
  outline: none;
}
.mobile-menu-search .site-search button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.mobile-menu-search .site-search button img {
  width: 18px;
  height: 18px;
  display: block;
  filter: var(--icon-filter);
}

.mobile-menu-categories {
  margin-bottom: 24px;
  /* Reuse existing category tree styles but ensure they fit */
}
.mobile-menu-categories h3 {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 12px;
}
.mobile-menu-categories .category-tree {
  padding-left: 0;
}

/* Mobile Menu Footer (Dark Mode Toggle) */
.mobile-menu-footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.mobile-theme-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: var(--text);
}

/* Post list view modes: list, compact, large */
.home-content .home-content-header,
.post-view-root .post-view-header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.post-view-title {
  flex: 1;
}

/* Post list, cards, and view toggles */
.post-view-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post-controls {
  display: flex;
  gap: 10px;
  /* Icon tint for dark mode (fallback filter for external svg images) */
}
.post-controls .view-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  width: 40px;
  height: 40px;
  transition: transform 180ms ease, box-shadow 180ms ease, background 120ms ease;
}
.post-controls .view-btn img {
  width: 20px;
  height: 20px;
  display: block;
}
.post-controls .view-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(2, 6, 23, 0.08);
  background: var(--hover-bg);
}
.post-controls .view-btn.is-active {
  background: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme=dark] .post-controls .view-btn {
  color: #f8fafc;
}
html[data-theme=dark] .post-controls .view-btn img {
  filter: invert(1) brightness(1.2);
}

.posts-wrapper {
  margin-top: 12px;
}

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Make the whole post-item the card */
.post-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding: 12px;
  transition: box-shadow 180ms ease, background-color 180ms ease;
  box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04);
}
.post-item:hover {
  box-shadow: 0 10px 30px rgba(2, 6, 23, 0.1);
}

.post-list-inner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 0;
}
@media (max-width: 768px) {
  .post-list-inner {
    flex-direction: column;
  }
}

.post-thumb-wrap {
  flex: 0 0 auto;
  display: block;
}
@media (max-width: 768px) {
  .post-thumb-wrap {
    width: 100%;
    margin-right: 0;
    margin-bottom: 12px;
  }
}

.post-thumb {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
}
@media (max-width: 768px) {
  .post-thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
  }
}

.post-body {
  flex: 1 1 auto;
}

.post-title {
  display: block;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  font-size: 16px;
  margin-bottom: 6px;
  cursor: pointer;
  pointer-events: auto;
  line-height: 1.25;
}
.post-title:hover {
  text-decoration: none;
}
@media (max-width: 768px) {
  .post-title {
    font-size: 1rem; /* Reduced from 1.2rem */
    word-break: keep-all; /* Prevent breaking words in middle */
    line-height: 1.3;
  }
}

.post-meta {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 8px;
}

.post-excerpt {
  margin: 0;
  color: var(--muted);
}

/* List (default) view */
.home-content[data-view-mode=list] .post-thumb-wrap,
.post-view-root[data-view-mode=list] .post-thumb-wrap {
  display: none;
}
@media (max-width: 768px) {
  .home-content[data-view-mode=list] .post-thumb-wrap,
  .post-view-root[data-view-mode=list] .post-thumb-wrap {
    display: none !important;
  }
  .home-content[data-view-mode=list] .post-list-inner,
  .post-view-root[data-view-mode=list] .post-list-inner {
    flex-direction: column;
  }
}

/* Compact view */
.home-content[data-view-mode=compact] .post-list-inner,
.post-view-root[data-view-mode=compact] .post-list-inner {
  align-items: center;
}
.home-content[data-view-mode=compact] .post-thumb,
.post-view-root[data-view-mode=compact] .post-thumb {
  width: 140px;
  height: 92px;
}
@media (max-width: 768px) {
  .home-content[data-view-mode=compact] .post-list-inner,
  .post-view-root[data-view-mode=compact] .post-list-inner {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }
  .home-content[data-view-mode=compact] .post-thumb-wrap,
  .post-view-root[data-view-mode=compact] .post-thumb-wrap {
    width: 120px;
    margin-bottom: 0;
    flex-shrink: 0;
  }
  .home-content[data-view-mode=compact] .post-thumb,
  .post-view-root[data-view-mode=compact] .post-thumb {
    width: 100%;
    height: 80px;
    aspect-ratio: auto;
    border-radius: 6px;
  }
}

/* Large view */
.home-content[data-view-mode=large],
.post-view-root[data-view-mode=large] {
  /* Dark theme overrides for Large View */
  /* Mobile Overrides for Large View */
}
.home-content[data-view-mode=large] .post-list,
.post-view-root[data-view-mode=large] .post-list {
  display: block;
}
.home-content[data-view-mode=large] .post-item,
.post-view-root[data-view-mode=large] .post-item {
  padding: 0;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(2, 6, 23, 0.04);
  position: relative;
  overflow: hidden;
}
.home-content[data-view-mode=large] .post-list-inner,
.post-view-root[data-view-mode=large] .post-list-inner {
  display: block;
}
.home-content[data-view-mode=large] .post-thumb-wrap,
.post-view-root[data-view-mode=large] .post-thumb-wrap {
  position: relative;
  display: block;
}
.home-content[data-view-mode=large] .post-thumb,
.post-view-root[data-view-mode=large] .post-thumb {
  width: 100%;
  height: 320px;
  border-radius: 0;
  display: block;
}
.home-content[data-view-mode=large] .post-body,
.post-view-root[data-view-mode=large] .post-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 18px;
  z-index: 2;
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 60%, rgba(255, 255, 255, 0.95) 100%);
  color: var(--text);
}
.home-content[data-view-mode=large]:hover .post-item:hover,
.post-view-root[data-view-mode=large]:hover .post-item:hover {
  box-shadow: 0 18px 40px rgba(2, 6, 23, 0.12);
}
.home-content[data-view-mode=large] .post-title,
.post-view-root[data-view-mode=large] .post-title {
  color: var(--text);
  font-size: 20px;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  margin: 0 0 6px 0;
}
.home-content[data-view-mode=large] .post-meta,
.post-view-root[data-view-mode=large] .post-meta {
  color: var(--muted);
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-body,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-body {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 58%, rgba(0, 0, 0, 0.52) 100%);
  color: var(--text);
  backdrop-filter: blur(5px);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-thumb-wrap::after,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-thumb-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0.24) 60%, rgba(0, 0, 0, 0.45) 100%);
  pointer-events: none;
  z-index: 1;
  transition: opacity 180ms ease;
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-item:hover .post-thumb-wrap::after,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-item:hover .post-thumb-wrap::after {
  opacity: 0.72;
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-title,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-title {
  color: var(--text);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-meta,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-meta {
  color: rgba(255, 255, 255, 0.85);
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-thumb,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-thumb {
  filter: brightness(1.12) contrast(1.05);
  transition: filter 180ms ease;
}
html[data-theme=dark] .home-content[data-view-mode=large] .post-item:hover .post-thumb,
html[data-theme=dark] .post-view-root[data-view-mode=large] .post-item:hover .post-thumb {
  filter: brightness(1.18) contrast(1.08);
}
@media (max-width: 768px) {
  .home-content[data-view-mode=large] .post-list-inner,
  .post-view-root[data-view-mode=large] .post-list-inner {
    flex-direction: column;
  }
  .home-content[data-view-mode=large] .post-thumb-wrap,
  .post-view-root[data-view-mode=large] .post-thumb-wrap {
    width: 100%;
    margin-bottom: 0;
  }
  .home-content[data-view-mode=large] .post-thumb,
  .post-view-root[data-view-mode=large] .post-thumb {
    width: 100%;
    height: 200px;
    aspect-ratio: 16/9;
    border-radius: 10px 10px 0 0;
  }
  .home-content[data-view-mode=large] .post-body,
  .post-view-root[data-view-mode=large] .post-body {
    position: relative;
    background: none !important;
    color: var(--text) !important;
    padding: 16px;
    backdrop-filter: none;
    text-shadow: none;
  }
  .home-content[data-view-mode=large] .post-title,
  .post-view-root[data-view-mode=large] .post-title {
    color: var(--text) !important;
    text-shadow: none !important;
    font-size: 1.3rem;
  }
  .home-content[data-view-mode=large] .post-meta,
  .post-view-root[data-view-mode=large] .post-meta {
    color: var(--muted) !important;
  }
  .home-content[data-view-mode=large] .post-item:hover,
  .post-view-root[data-view-mode=large] .post-item:hover {
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.04);
  }
}

:root {
  /* Visual Studio (light) - approximate */
  --code-bg: #f3f4f6;
  --code-border: rgba(0, 0, 0, 0.08);
  --code-text: #000000;
  --code-gutter-bg: #eef1f4;
  --code-gutter-text: rgba(0, 0, 0, 0.50);
  --code-gutter-divider: rgba(0,0,0,0.08);
  --code-shadow: 0 8px 24px rgba(2, 6, 23, 0.14), 0 2px 8px rgba(2, 6, 23, 0.08);
  --code-shadow-soft: 0 2px 6px rgba(2, 6, 23, 0.05);
  --code-font: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Sans Mono", monospace;
  --code-font-size: 13px;
  --code-line-height: 1.5;
  /* Rouge token colors (Visual Studio light-ish) */
  --tok-comment: #008000;
  --tok-keyword: #0000ff;
  --tok-type: #2b91af;
  --tok-func: #795e26;
  --tok-string: #a31515;
  --tok-number: #098658;
  --tok-punct: #000000;
  --tok-preproc: #0000ff;
}

html[data-theme=dark] {
  /* Visual Studio (dark) - approximate (VS Dark+) */
  --code-bg: #1e1e1e;
  --code-border: rgba(255, 255, 255, 0.06);
  --code-text: #d4d4d4;
  --code-gutter-bg: #1e1e1e;
  --code-gutter-text: rgba(212, 212, 212, 0.45);
  --code-gutter-divider: rgba(255,255,255,0.06);
  --code-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.45);
  --code-shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.35);
  /* Rouge token colors (Visual Studio Dark+) */
  --tok-comment: #6a9955;
  --tok-keyword: #7aa7a0;
  --tok-type: #6aa698;
  --tok-func: #dcdcaa;
  --tok-string: #ce9178;
  --tok-number: #b5cea8;
  --tok-punct: #d4d4d4;
  --tok-preproc: #c586c0;
}

/* Post page code block base */
.post .post-body pre {
  overflow: auto;
  padding: 12px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  color: var(--code-text);
  font-family: var(--code-font);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  white-space: pre;
  box-shadow: none;
}

/* Integrated code block UI (header + unified body) */
.code-block {
  position: relative;
  margin: 0 0 12px 0;
  padding: 0;
  border: 1px solid var(--code-border);
  border-radius: 14px;
  background: var(--code-bg);
  overflow: hidden;
  box-shadow: var(--code-shadow);
  transition: box-shadow 0.2s ease;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--code-gutter-divider);
  background: transparent;
  border-radius: 0;
}

.code-meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.code-title {
  font-size: 13px;
  color: var(--code-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.code-lang {
  font-family: var(--code-font);
  font-size: 12px;
  color: var(--code-gutter-text);
  white-space: nowrap;
}

.code-block.is-collapsed .code-header {
  opacity: 1;
  color: var(--code-text);
}

.code-block.is-collapsed .code-title,
.code-block.is-collapsed .code-lang,
.code-block.is-collapsed .code-copy {
  color: var(--code-text) !important;
  opacity: 1 !important;
}

.code-copy {
  border: 1px solid var(--code-border);
  background: transparent;
  color: var(--code-text);
  border-radius: 10px;
  padding: 6px;
  font-size: 12px;
  line-height: 1.4;
  cursor: pointer;
}

.code-copy-icon {
  width: 18px;
  height: 18px;
  display: block;
}

.code-copy.is-copied {
  opacity: 0.75;
}

.code-body {
  display: flex;
  align-items: stretch;
  background: transparent;
  border-radius: 0;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.code-body > figure.highlight {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.code-body > pre:not(.code-gutter) {
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.code-block pre.code-gutter {
  user-select: none;
  margin: 0;
  padding: 12px 8px 12px 4px;
  background: transparent;
  border: 0;
  border-left: 0;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  border-right: 1px solid var(--code-gutter-divider);
  color: var(--code-gutter-text);
  font-family: var(--code-font);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  text-align: right;
  width: calc(var(--gutter-ch, 2) * 1ch + 12px);
  min-width: calc(var(--gutter-ch, 2) * 1ch + 12px);
  flex: 0 0 auto;
  overflow: visible;
}

.code-block.no-linenos .code-gutter {
  visibility: hidden;
}

.code-block pre:not(.code-gutter) {
  overflow: auto;
  margin: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--code-text);
  font-family: var(--code-font);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  white-space: pre;
}

/* When collapsed, prevent vertical scrollbars inside code region (keep horizontal if needed). */
.code-block.is-collapsed .code-body {
  overflow: hidden;
}

.code-block.is-collapsed pre:not(.code-gutter),
.code-block.is-collapsed td.code pre,
.code-block.is-collapsed figure.highlight,
.code-block.is-collapsed table.rouge-table {
  overflow-y: hidden !important;
}

.code-block.is-collapsed pre:not(.code-gutter),
.code-block.is-collapsed td.code pre {
  overflow-x: auto;
}

/* If Rouge produced a line-number table inside a wrapping <pre>, remove the outer padding
   so gutter+code padding is controlled only by the inner td pre blocks (integrated look). */
.code-block pre.rouge-table-wrap {
  padding: 0;
}

.code-block code {
  font-family: var(--code-font);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
}

.code-block pre > code {
  display: block;
}

/* Rouge built-in line numbers (`{% highlight ... linenos %}`) */
.code-block table.rouge-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.code-block table.rouge-table td {
  padding: 0;
  border: 0;
  vertical-align: top;
}

.code-block table.rouge-table td.gutter {
  background: transparent;
  border-right: 1px solid var(--code-gutter-divider);
  border-radius: 0;
}

.code-block table.rouge-table td.gutter pre.lineno {
  user-select: none;
  margin: 0;
  padding: 12px 8px 12px 4px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--code-gutter-text);
  font-family: var(--code-font);
  font-size: var(--code-font-size);
  line-height: var(--code-line-height);
  text-align: right;
  width: calc(var(--gutter-ch, 2) * 1ch + 12px);
  min-width: calc(var(--gutter-ch, 2) * 1ch + 12px);
  overflow: visible;
}

.code-copy-icon {
  transition: transform 160ms ease, opacity 160ms ease;
}

.code-copy.is-copied .code-copy-icon {
  animation: code-copy-pop 260ms ease;
}

@keyframes code-copy-pop {
  0% {
    transform: scale(0.92);
    opacity: 0.75;
  }
  60% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.code-block table.rouge-table td.code pre {
  margin: 0;
  padding: 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Token color mapping using CSS variables */
.highlight, .highlight code, .highlight pre {
  color: var(--code-text);
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

figure.highlight {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0;
  padding: 0;
}

.highlight .c, .highlight .c1, .highlight .cm, code .c, code .c1, code .cm {
  color: var(--tok-comment);
  font-style: italic;
}

.highlight .cp, .highlight .cpf, code .cp, code .cpf {
  color: var(--tok-preproc);
  font-style: normal;
}

.highlight .k, code .k {
  color: var(--tok-keyword);
}

.highlight .kp, code .kp {
  color: var(--tok-keyword);
}

.highlight .kt, code .kt {
  color: var(--tok-type);
}

.highlight .nf, code .nf {
  color: var(--tok-func);
}

.highlight .nc, code .nc {
  color: var(--tok-type);
}

.highlight .s, code .s {
  color: var(--tok-string);
}

/* hex/hex-with-suffix tokens (rouge emits `mh` for hex numbers) */
.highlight .m, .highlight .mh, code .m, code .mh {
  color: var(--tok-number);
}

.highlight .mi, .highlight .nb, code .mi, code .nb {
  color: var(--tok-number);
}

.highlight .o, code .o {
  color: var(--tok-punct);
}

.highlight .n, code .n {
  color: var(--code-text);
}

.highlight .p, code .p {
  color: var(--tok-punct);
}

/* some rouge outputs use `err` for unexpected tokens; treat as punctuation */
.highlight .na, code .na {
  color: var(--tok-func);
}

.highlight .err, code .err {
  color: var(--tok-punct);
}

/* Code block collapse feature */
.code-collapse-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.code-collapse-overlay {
  position: absolute;
  top: 48px; /* header height */
  left: 0;
  right: 0;
  height: calc(100% - 48px);
  background: linear-gradient(180deg, transparent 0%, rgba(var(--bg-rgb, 243, 244, 246), 0.5) 20%, rgba(var(--bg-rgb, 243, 244, 246), 0.85) 100%);
  pointer-events: none;
  visibility: hidden;
  z-index: 10;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

.code-block.is-collapsed .code-collapse-overlay {
  visibility: visible;
  opacity: 1;
}

html[data-theme=dark] .code-collapse-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(30, 30, 30, 0.5) 20%, rgba(30, 30, 30, 0.85) 100%);
}

/* (no display toggles; opacity/visibility transitions handle this) */
.code-collapse-toggle {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--code-gutter-text);
  border: 1px solid var(--code-border);
  border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
  z-index: 15;
  white-space: nowrap;
}

/* Default hidden; shown via collapsed/expanded state selectors below. */
.code-collapse-toggle {
  visibility: hidden;
  opacity: 0;
}

.code-collapse-toggle:hover {
  color: var(--code-text);
  background: rgba(255, 255, 255, 0.78);
}

html[data-theme=dark] .code-collapse-toggle {
  background: rgba(30, 30, 30, 0.65);
  border-color: var(--code-border);
  color: var(--code-gutter-text);
}

html[data-theme=dark] .code-collapse-toggle:hover {
  color: var(--code-text);
  background: rgba(30, 30, 30, 0.8);
}

/* Expand button: only when collapsed */
.code-block.is-collapsed .code-collapse-toggle.code-collapse-expand {
  visibility: visible;
  opacity: 1;
}

/* Collapse button: only when expanded */
.code-block:not(.is-collapsed) .code-collapse-toggle.code-collapse-close {
  visibility: visible;
  opacity: 1;
}

/* Mobile: Ensure code blocks scroll */
@media (max-width: 768px) {
  pre, .highlight {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-top: 8px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: var(--surface-muted, rgba(0, 0, 0, 0.04));
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}
.tag-pill:hover {
  background: var(--surface);
}
.tag-pill .tag-count {
  color: var(--muted);
  font-size: 12px;
}

/* Category Tree Component */
.category-tree {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--category-gap);
}

.category-node {
  padding-left: calc(10px + var(--depth) * 14px);
  position: relative;
}

/* Subtle tree connectors (only for child nodes) */
.category-node.is-child::before {
  content: "";
  position: absolute;
  left: calc(10px + var(--depth) * 14px - 8px);
  /* extend half the gap above and below to bridge spacing between items */
  top: calc(-1 * var(--category-gap) / 2);
  bottom: calc(-1 * var(--category-gap) / 2);
  width: 1px;
  background: var(--tree-line);
  opacity: 1;
  z-index: 0;
  pointer-events: none;
}

/* Draw the small horizontal connector as part of the interactive button so
   it stays vertically aligned with the button regardless of node height
   (nested children no longer affect the horizontal position). */
.category-action::before {
  content: "";
  position: absolute;
  /* position relative to the button's left edge so the small horizontal
     connector lines up exactly with the vertical spine drawn on the li */
  left: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 1px;
  background: var(--tree-line);
  opacity: 0.95;
  z-index: 0;
  pointer-events: none;
}

/* Hide the small horizontal connector for the root 'All' item */
.category-node.is-root > .category-action::before {
  display: none;
}

/* Prevent the vertical spine from extending above the first child or below the last child.
   This avoids overlapping/thicker lines at connectors. */
.category-node.is-child:first-child::before {
  /* do not extend above the first child */
  top: 0;
}

.category-node.is-child:last-child::before {
  /* do not extend below the last child */
  bottom: 0;
}

/* Ensure connectors render behind interactive elements */
.category-action {
  position: relative;
  z-index: 2;
}

.category-action {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  text-decoration: none;
}

.category-action:hover {
  background: var(--hover-bg);
}

.category-name {
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.category-count {
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--bg-secondary);
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 24px;
  text-align: center;
}

.category-node.active > .category-action {
  background: var(--accent-bg);
  color: var(--accent);
}

.category-node.active > .category-action .category-count {
  background: var(--bg);
  color: var(--accent);
}

/* Related posts block shown on individual post pages */
.related-posts {
  margin-top: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px;
  box-sizing: border-box;
}
.related-posts .related-heading {
  font-size: 14px;
  color: var(--muted);
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.related-posts .related-heading .related-category-link {
  color: inherit;
  text-decoration: none;
}
.related-posts .related-heading .related-category-link:hover {
  text-decoration: underline;
}
.related-posts .related-heading .related-category-link:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus);
  border-radius: 8px;
}
.related-posts .related-posts-list {
  display: grid;
  gap: 6px;
  padding: 8px 2px 4px 2px;
}
.related-posts .post-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  transition: background-color 120ms ease, transform 120ms ease;
}
.related-posts .post-row:hover {
  background: var(--hover-bg);
}
.related-posts .post-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
}
.related-posts .post-link:hover {
  text-decoration: underline;
}
.related-posts .post-date {
  color: var(--muted);
  font-size: 13px;
  margin-left: 12px;
  white-space: nowrap;
}
.related-posts .current-post {
  background: linear-gradient(90deg, rgba(79, 176, 160, 0.06), transparent);
  border-left: 3px solid rgba(79, 176, 160, 0.28);
  font-weight: 600;
}
.related-posts .current-post .post-title {
  color: rgba(34, 102, 94, 0.95);
}

/* Dark theme: use the theme's switch-on accent for highlight */
html[data-theme=dark] .related-posts .current-post {
  border-left-color: var(--switch-on);
  background: linear-gradient(90deg, rgba(79, 176, 160, 0.08), rgba(0, 0, 0, 0));
}
html[data-theme=dark] .related-posts .current-post .post-title {
  color: var(--text);
}

/* Common Page Layout (Archive, Tag, Post, etc.) */
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (max-width: 768px) {
  .page {
    padding: 0 16px;
  }
}

.page-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page-header .page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--text);
}
.page-header .back-btn {
  display: inline-block;
  margin-top: 0;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
}
.page-header .back-btn:hover {
  color: var(--text);
  text-decoration: underline;
}

.page-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px;
  overflow: visible; /* Allow dropdowns/popups to overflow if needed */
  /* Ensure images inside page body fit */
}
.page-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Pages */
.home-layout {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 10px;
}
@media (max-width: 768px) {
  .home-layout {
    display: flex;
    flex-direction: column;
    padding: 0 6px; /* Small padding to show borders/shadows */
  }
}

.home-muted {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.home-content, .post-view-root {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 20px; /* align inner padding with archive headers */
}
@media (max-width: 768px) {
  .home-content, .post-view-root {
    order: 1;
    padding: 12px 8px; /* Reduced padding for mobile */
    /* Keep border radius and borders */
  }
}

@media (max-width: 768px) {
  .home-sidebar {
    order: 2;
    margin-top: 32px;
    border-top: 1px solid var(--border);
    padding-top: 32px;
  }
}

/* Hide Categories in Sidebar (since they are in menu) */
@media (max-width: 768px) {
  .home-sidebar-categories {
    display: none;
  }
}

/* Styles for homepage headings (category / archive / tag / all) */
.home-sidebar-heading {
  margin: 0 0 12px 0;
  font-size: 16px;
  /* Make home section headings clickable-looking with subtle animation */
}
.home-sidebar-heading a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
  transition: transform 160ms ease, color 160ms ease;
}
.home-sidebar-heading a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0%;
  background: var(--muted);
  transition: width 200ms ease, background-color 160ms ease;
  border-radius: 2px;
}
.home-sidebar-heading a:hover {
  transform: translateX(4px);
  color: var(--text);
}
.home-sidebar-heading a:hover::after {
  width: 100%;
  background: var(--text);
}

.home-sidebar-heading-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
  transition: transform 160ms ease, color 160ms ease;
  cursor: pointer;
}
.home-sidebar-heading-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--text);
  border-radius: 2px;
  transition: width 220ms ease;
}
.home-sidebar-heading-link:hover, .home-sidebar-heading-link:focus {
  transform: translateY(-2px);
}
.home-sidebar-heading-link:hover::after, .home-sidebar-heading-link:focus::after {
  width: 100%;
}

/* Archive sidebar styles */
.home-archive {
  margin: 48px 0 18px 0;
}
.home-archive .home-archive-year-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.home-archive .home-archive-year-list .home-archive-year {
  border-radius: 8px;
  overflow: visible;
  margin-bottom: 2px;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  margin: 0;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-link {
  text-decoration: none;
  color: var(--text);
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-link .home-archive-year-label {
  font-weight: 600;
  font-size: 15px;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle {
  background: transparent;
  border: 0;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--muted);
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: transform 160ms ease, color 120ms ease, background 120ms ease;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle:hover, .home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text);
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle .chev {
  transition: transform 180ms ease;
  display: block;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle.is-open .chev {
  transform: rotate(180deg);
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-year-row .home-archive-year-toggle .home-archive-year-count {
  color: var(--muted);
  font-size: 13px;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0 4px 4px 12px;
  overflow: visible;
  transition: max-height 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months.is-collapsed {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months li {
  padding: 3px 0;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months .home-archive-month-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text);
  text-decoration: none;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-weight: 500;
  font-size: 13px;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 1px 2px rgba(2, 6, 23, 0.02);
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months .home-archive-month-link:hover {
  background: var(--hover-bg);
  border-color: var(--muted);
  box-shadow: 0 2px 6px rgba(2, 6, 23, 0.04);
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months .home-archive-month-link .home-archive-month-label {
  font-weight: 500;
}
.home-archive .home-archive-year-list .home-archive-year .home-archive-months .home-archive-month-link .home-archive-count {
  color: var(--muted);
  font-size: 11px;
  font-weight: 400;
}

/* Tag sidebar styles */
.home-sidebar-tag {
  margin-top: 48px;
}

/* About page */
.about-page {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px;
  display: grid;
  gap: 18px;
}

.about-page img {
  width: 100%;
  max-width: 480px; /* reduced cap to make server image smaller */
  height: auto;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
  margin: 0 auto; /* center image */
}

.about-page .icon-github {
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-left: 8px;
  filter: var(--github-filter, none);
}

/* All archive page styling */
.archive-view-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0 0 12px 0;
}

.archive-view-controls-wrapper {
  display: flex;
  justify-content: flex-end;
}

.archive-year-month-section {
  margin-bottom: 18px;
}

.archive-month-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 10px 0;
}

.archive-month-section-title {
  margin: 0;
  font-size: 18px;
}
.archive-month-section-title a {
  color: var(--text);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
}
.archive-month-section-title a:hover, .archive-month-section-title a:focus {
  background: var(--hover-bg);
  color: var(--text);
}
.archive-month-section-title a:focus {
  box-shadow: 0 0 0 4px var(--focus);
  outline: none;
}

.archive-section-count {
  color: var(--muted);
  font-size: 14px;
}

.archive-year-block {
  margin-bottom: 12px;
}
.archive-year-block .archive-year-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.archive-year-block .archive-year-header .archive-year-title {
  margin: 0;
  font-size: 18px;
}
.archive-year-block .archive-year-header .archive-year-title a {
  color: var(--text);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 8px;
  transition: background-color 120ms ease, color 120ms ease;
}
.archive-year-block .archive-year-header .archive-year-title a:hover, .archive-year-block .archive-year-header .archive-year-title a:focus {
  background: var(--hover-bg);
  color: var(--text);
}
.archive-year-block .archive-year-header .archive-year-title a:focus {
  box-shadow: 0 0 0 4px var(--focus);
}
.archive-year-block .archive-year-header .archive-year-count {
  color: var(--muted);
  font-size: 14px;
}
.archive-year-block .archive-months-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
.archive-year-block .archive-months-list .archive-month-item {
  border-radius: 12px;
}
.archive-year-block .archive-months-list .archive-month-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(2, 6, 23, 0.04);
}
.archive-year-block .archive-months-list .archive-month-link:hover {
  background: var(--hover-bg);
  border-color: var(--text);
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.12);
  transform: translateY(-4px) scale(1.02);
}
.archive-year-block .archive-months-list .archive-month-label {
  font-weight: 600;
  color: var(--text);
  font-size: 17px;
  letter-spacing: -0.01em;
}
.archive-year-block .archive-months-list .archive-month-count {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

/* Category page */
.category-page .category-description {
  margin: 0 0 16px 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 72ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
@media (max-width: 768px) {
  .category-page .category-description {
    -webkit-line-clamp: 4;
  }
}
.category-page .category-content {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Linked category tree (used on /category/) */
.category-tree-section .category-tree-title {
  margin: 0 0 10px 0;
  font-size: 1.1rem;
  color: var(--text);
}

/* Compact child categories (no view toggle/pagination) */
.category-children {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.category-children .category-children-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.category-children .category-children-title {
  margin: 0;
  font-size: 1rem;
  color: var(--text);
}
.category-children .category-children-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 768px) {
  .category-children .category-children-grid {
    grid-template-columns: 1fr;
  }
}
.category-children .category-child {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  transition: background-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.category-children .category-child:hover, .category-children .category-child:focus {
  background: var(--hover-bg);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(2, 6, 23, 0.1);
  outline: none;
}
.category-children .category-child:focus {
  box-shadow: 0 0 0 4px var(--focus), 0 8px 18px rgba(2, 6, 23, 0.1);
}
.category-children .category-child-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.category-children .category-child-name {
  font-weight: 600;
  color: var(--text);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.category-children .category-child-count {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
}
.category-children .category-child-desc {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gallery Page Styles */
.gallery-layout {
  display: block; /* Override grid layout from home-layout */
  max-width: 1200px; /* Wider container for gallery */
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.gallery-header h1 {
  margin: 0;
}

.gallery-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1rem;
}

.gallery-view-toggle {
  display: flex;
  background: #f8f9fa; /* Explicit light background */
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}
.gallery-view-toggle .toggle-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 0.9rem;
  color: #555; /* Explicit light text */
  transition: all 0.2s;
}
.gallery-view-toggle .toggle-btn:hover {
  background-color: #e9ecef;
  color: #333;
}
.gallery-view-toggle .toggle-btn.active {
  background-color: #e9ecef;
  color: var(--primary-color, #007bff);
  font-weight: 500;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
}
.gallery-view-toggle .toggle-btn:not(:last-child) {
  border-right: 1px solid #ddd;
}
.gallery-view-toggle .toggle-btn svg {
  display: block;
}

.gallery-grid {
  display: block; /* Changed from flex to block because we now have headers and groups */
  /* Date headers span full width */
}
.gallery-grid .gallery-date-header {
  width: 100%;
  margin-top: 2rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #e0e0e0; /* Thicker and lighter border for light mode */
  font-size: 1.2rem;
  color: #222; /* Explicit dark text for light mode */
}

.gallery-date-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.gallery-item {
  position: relative;
  flex: 0 0 auto;
  margin: 0;
  border: none;
  border-radius: 0;
  cursor: pointer;
  background-color: transparent;
  overflow: hidden;
  max-width: 100%;
}
.gallery-item:hover {
  filter: brightness(0.9);
  z-index: 1;
}
.gallery-item .gallery-img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-item .gallery-img.loaded {
  opacity: 1;
}
.gallery-item .gallery-img.lqip {
  filter: blur(10px);
}

/* Pagination */
.gallery-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}
.gallery-pagination button {
  padding: 0.25rem 0.5rem; /* Minimal padding */
  min-width: 32px;
  height: 32px;
  border: 1px solid transparent; /* Minimal border */
  background: transparent;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
  font-size: 0.9rem;
  color: #333; /* Explicit dark text for light mode */
}
.gallery-pagination button:hover:not(:disabled) {
  background-color: #f5f5f5;
}
.gallery-pagination button.active {
  background-color: var(--primary-color, #007bff);
  color: white;
  font-weight: bold;
}
.gallery-pagination button:disabled {
  opacity: 0.3;
  cursor: default; /* No not-allowed cursor */
}
.gallery-pagination .pagination-jump {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1rem;
}
.gallery-pagination .pagination-jump input {
  width: 72px;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 4px;
  text-align: center;
  box-sizing: border-box;
  line-height: 1.2;
  -moz-appearance: textfield; /* Firefox: hide spinners */
}
.gallery-pagination .pagination-jump input::-webkit-outer-spin-button, .gallery-pagination .pagination-jump input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.gallery-pagination .pagination-jump span {
  font-size: 0.9rem;
  color: var(--text-color-secondary, #666);
}

/* Sentinel for Infinite Scroll */
.gallery-sentinel {
  height: 50px;
  margin-top: 2rem;
  text-align: center;
  color: #999;
}
.gallery-sentinel::after {
  content: "Loading...";
  display: inline-block;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.5;
  }
}
/* Modal */
.gallery-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-modal.is-open {
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
.gallery-modal .gallery-modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Lighter background */
  backdrop-filter: blur(5px);
}
.gallery-modal .gallery-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 90vh;
  z-index: 1001;
  display: flex;
  flex-direction: row; /* Side by side */
  background: var(--surface, #fff);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.95);
  transition: transform 0.3s ease;
  padding: 10px; /* Wrap image slightly */
  gap: 10px;
}
@media (max-width: 768px) {
  .gallery-modal .gallery-modal-content {
    flex-direction: column;
    padding: 0;
    gap: 0;
  }
}
.gallery-modal.is-open .gallery-modal-content {
  transform: scale(1);
}
.gallery-modal .gallery-modal-image-container {
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  max-width: 800px;
  border-radius: 4px; /* Inner radius */
  overflow: hidden;
}
.gallery-modal .gallery-modal-image-container img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  display: block;
}
.gallery-modal .gallery-modal-info {
  position: relative;
  width: 300px;
  padding: 1.5rem;
  background: var(--surface, #fff);
  color: var(--text-color, #333);
  overflow-y: auto;
  border-left: 1px solid var(--border-color, #eee);
  display: flex;
  flex-direction: column;
  /* Download button styled like code-copy */
}
@media (max-width: 768px) {
  .gallery-modal .gallery-modal-info {
    width: 100%;
    max-height: 30vh;
    border-left: none;
    border-top: 1px solid var(--border-color, #eee);
  }
}
.gallery-modal .gallery-modal-info h3 {
  margin: 0 0 1.5rem 0; /* More spacing from close button */
  font-size: 1.2rem;
  border-bottom: 1px solid var(--border-color, #eee);
  padding-bottom: 0.5rem;
  color: var(--text-color, #333);
  padding-right: 2rem; /* Space for close button */
}
.gallery-modal .gallery-modal-info .gallery-meta-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0; /* Push download button down */
  font-size: 0.9rem;
  flex-grow: 1;
}
.gallery-modal .gallery-modal-info .gallery-meta-list li {
  margin-bottom: 0.5rem;
  color: var(--text-color-secondary, #666);
}
.gallery-modal .gallery-modal-info .gallery-meta-list strong {
  color: var(--text-color, #333);
  font-weight: 600;
}
.gallery-modal .gallery-modal-info #gallery-modal-download {
  /* Styles are inline in HTML to match code-copy exactly or inherited from class */
  /* But we can add hover effects here if needed */
}
.gallery-modal .gallery-modal-info #gallery-modal-download:hover {
  background-color: var(--bg-color-secondary, #f0f0f0);
  color: var(--primary-color, #007bff);
}
.gallery-modal .gallery-modal-info .gallery-usage-list {
  list-style: disc;
  padding-left: 1.5rem;
  margin-top: 0.25rem;
}
.gallery-modal .gallery-modal-info .gallery-usage-list li {
  margin-bottom: 0.25rem;
}
.gallery-modal .gallery-modal-info .gallery-usage-list a {
  color: var(--primary-color, #007bff);
  text-decoration: none;
}
.gallery-modal .gallery-modal-info .gallery-usage-list a:hover {
  text-decoration: underline;
}
.gallery-modal .gallery-modal-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  color: var(--text-color, #333);
  font-size: 1.5rem;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1002;
  transition: background 0.2s;
}
.gallery-modal .gallery-modal-close:hover {
  background: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Adjustments */
html[data-theme=dark] .gallery-grid .gallery-date-header {
  color: #eee; /* Brighter text for dark mode */
  border-bottom-color: #444; /* Visible border for dark mode */
}
html[data-theme=dark] .gallery-item {
  background-color: transparent;
  border-color: #444;
}
html[data-theme=dark] .gallery-pagination button {
  color: #ddd;
}
html[data-theme=dark] .gallery-pagination button:hover:not(:disabled) {
  background-color: #444;
}
html[data-theme=dark] .gallery-pagination button:disabled {
  color: #666;
}
html[data-theme=dark] .gallery-pagination .pagination-jump input {
  background-color: #333;
  border-color: #555;
  color: #fff;
}
html[data-theme=dark] .gallery-pagination .pagination-go-btn {
  background-color: #444;
  color: #fff;
  border: 1px solid #555;
}
html[data-theme=dark] .gallery-pagination .pagination-go-btn:hover {
  background-color: #555;
}
html[data-theme=dark] .gallery-pagination .pagination-jump span {
  color: #aaa;
}
html[data-theme=dark] .gallery-view-toggle {
  background: #222;
  border-color: #444;
}
html[data-theme=dark] .gallery-view-toggle .toggle-btn {
  color: #aaa;
}
html[data-theme=dark] .gallery-view-toggle .toggle-btn:hover {
  background-color: #333;
  color: #fff;
}
html[data-theme=dark] .gallery-view-toggle .toggle-btn.active {
  background-color: #333;
  color: #fff;
}
html[data-theme=dark] .gallery-view-toggle .toggle-btn:not(:last-child) {
  border-right-color: #444;
}
html[data-theme=dark] .gallery-modal .gallery-modal-content {
  background: #222;
}
html[data-theme=dark] .gallery-modal .gallery-modal-info {
  background: #222;
  color: #eee;
  border-color: #444;
}
html[data-theme=dark] .gallery-modal .gallery-modal-info h3 {
  color: #fff;
  border-color: #444;
}
html[data-theme=dark] .gallery-modal .gallery-modal-info .gallery-meta-list li {
  color: #bbb;
}
html[data-theme=dark] .gallery-modal .gallery-modal-info .gallery-meta-list strong {
  color: #fff;
}
html[data-theme=dark] .gallery-modal .gallery-modal-close {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme=dark] .gallery-modal .gallery-modal-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Post-specific styles */
/* Images inside post/list contexts */
.home-content img, .post img, article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.post-page-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Tag page header */
/* Styles are now handled by components/page.scss */

/*# sourceMappingURL=main.css.map */