/* ==========================================================================
   SREKubeCraft Custom Theme
   Terminal / Developer Environment Aesthetic
   Typography: monospace, precise, tool-like, documentation clarity
   ========================================================================== */

/* ---------- Typography Foundation ---------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---------- Theme Variables ---------- */
:root,
[data-theme="dark"] {
  /* GitHub Dark Dimmed palette */
  --background: #22272e;
  --background-gradient: linear-gradient(135deg, #22272e 0%, #2d333b 50%, #22272e 100%);
  --foreground: #adbac7;
  --foreground-bright: #cdd9e5;
  --accent: #539bf5;
  --accent-hover: #6cb6ff;
  --sidebar-bg: #1c2128;
  --sidebar-border: rgba(68, 76, 86, 0.8);
  --toc-bg: transparent;
  --card-bg: #22272e;
  --card-border: rgba(68, 76, 86, 0.8);
  --bg-overlay: radial-gradient(ellipse at top, rgba(83, 155, 245, 0.03), transparent 70%);
  --muted: #545d68;
  --comment: #636e7b;
  --code-bg: rgba(173, 186, 199, 0.05);
  --code-border: rgba(173, 186, 199, 0.1);
  --link-hover: #b083f0;
  --success: #57ab5a;
  --warning: #c69026;
  --glow: rgba(83, 155, 245, 0.15);
  --glow-strong: rgba(83, 155, 245, 0.4);
  --titlebar-bg: #2d333b;
  --accent-subtle: rgba(83, 155, 245, 0.03);
  --accent-faint: rgba(83, 155, 245, 0.06);
  --accent-light: rgba(83, 155, 245, 0.08);
  --accent-medium: rgba(83, 155, 245, 0.12);
  --accent-strong: rgba(83, 155, 245, 0.15);
  --accent-bold: rgba(83, 155, 245, 0.25);
  --accent-underline: rgba(83, 155, 245, 0.3);
  --accent-tint: rgba(83, 155, 245, 0.05);
  --table-stripe: rgba(173, 186, 199, 0.02);
  --mark-bg: rgba(198, 144, 38, 0.15);
  --dot-red: #f47067;
  --dot-yellow: #daaa3f;
  --dot-green: #57ab5a;
  --danger: #f47067;
  --shadow-sm: 0 0 8px var(--glow);
  --shadow-md: 0 0 16px var(--glow), 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 0 24px var(--glow-strong), 0 16px 48px rgba(0, 0, 0, 0.3);
  --r-sm: 8px;
  --r-md: 12px;
  --radius: 8px;
  --radius-sm: 4px;
  --panel-border: 1px solid var(--card-border);
  --panel-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --panel-shadow-hover: 0 4px 16px var(--glow), 0 0 0 1px var(--accent-faint);
  --titlebar-h: 36px;
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'SF Mono', Consolas, monospace;
  --font-size-base: 0.875rem;
  --line-height-base: 1.65;
  --line-height-tight: 1.3;
}

/* Iceberg Light */
[data-theme="light"] {
  --background: #e8e9ec;
  --background-gradient: linear-gradient(135deg, #e8e9ec 0%, #e2e4ea 50%, #e8e9ec 100%);
  --foreground: #33374c;
  --foreground-bright: #1e2132;
  --accent: #2d539e;
  --accent-hover: #1c407d;
  --sidebar-bg: #f4f5f7;
  --sidebar-border: rgba(192, 195, 206, 0.75);
  --toc-bg: transparent;
  --card-bg: #ffffff;
  --card-border: rgba(192, 195, 206, 0.75);
  --bg-overlay: radial-gradient(ellipse at top, rgba(45, 83, 158, 0.03), transparent 70%);
  --muted: #6b7394;
  --comment: #6b7394;
  --code-bg: rgba(51, 55, 76, 0.05);
  --code-border: rgba(51, 55, 76, 0.15);
  --link-hover: #7759b4;
  --success: #4d7a2a;
  --warning: #c57339;
  --glow: rgba(45, 83, 158, 0.08);
  --glow-strong: rgba(45, 83, 158, 0.18);
  --titlebar-bg: #dfe1e8;
  --accent-subtle: rgba(45, 83, 158, 0.04);
  --accent-faint: rgba(45, 83, 158, 0.06);
  --accent-light: rgba(45, 83, 158, 0.08);
  --accent-medium: rgba(45, 83, 158, 0.12);
  --accent-strong: rgba(45, 83, 158, 0.16);
  --accent-bold: rgba(45, 83, 158, 0.22);
  --accent-underline: rgba(45, 83, 158, 0.35);
  --accent-tint: rgba(45, 83, 158, 0.04);
  --table-stripe: rgba(45, 83, 158, 0.03);
  --mark-bg: rgba(197, 115, 57, 0.15);
  --dot-red: #e34e4a;
  --dot-yellow: #e09e20;
  --dot-green: #22a235;
  --danger: #c4342e;
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.03);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Cyberpunk — Ghostty palette */
[data-theme="cyberpunk"] {
  --background: #332a57;
  --background-gradient: linear-gradient(135deg, #332a57 0%, #2a2145 50%, #332a57 100%);
  --foreground: #e5e5e5;
  --foreground-bright: #ffffff;
  --accent: #00bfff;
  --accent-hover: #1bccfd;
  --sidebar-bg: #2a2145;
  --sidebar-border: rgba(74, 61, 110, 0.8);
  --toc-bg: transparent;
  --card-bg: #3b3162;
  --card-border: rgba(74, 61, 110, 0.8);
  --bg-overlay: radial-gradient(ellipse at top, rgba(0, 191, 255, 0.04), transparent 70%);
  --muted: #595959;
  --comment: #8389a3;
  --code-bg: rgba(0, 191, 255, 0.06);
  --code-border: rgba(0, 191, 255, 0.12);
  --link-hover: #df95ff;
  --success: #00fbac;
  --warning: #fffa6a;
  --glow: rgba(0, 191, 255, 0.2);
  --glow-strong: rgba(0, 191, 255, 0.45);
  --titlebar-bg: #2a2145;
  --accent-subtle: rgba(0, 191, 255, 0.03);
  --accent-faint: rgba(0, 191, 255, 0.06);
  --accent-light: rgba(0, 191, 255, 0.08);
  --accent-medium: rgba(0, 191, 255, 0.12);
  --accent-strong: rgba(0, 191, 255, 0.15);
  --accent-bold: rgba(0, 191, 255, 0.25);
  --accent-underline: rgba(0, 191, 255, 0.35);
  --accent-tint: rgba(0, 191, 255, 0.05);
  --table-stripe: rgba(0, 191, 255, 0.02);
  --mark-bg: rgba(255, 250, 106, 0.15);
  --dot-red: #ff3860;
  --dot-yellow: #fffa6a;
  --dot-green: #00fbac;
  --danger: #ff3860;
  --shadow-sm: 0 0 10px var(--glow);
  --shadow-md: 0 0 20px var(--glow), 0 4px 16px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 0 30px var(--glow-strong), 0 16px 48px rgba(0, 0, 0, 0.35);
}

/* ---------- Global Reset ---------- */
html { scroll-behavior: smooth; }

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--background-gradient);
  background-attachment: fixed;
  color: var(--foreground);
  font-family: var(--font-mono);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Reading progress bar — thin accent line at top of viewport */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.1s linear;
  pointer-events: none;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  pointer-events: none;
  z-index: 0;
}

/* Headings: dense, tight, authoritative — like terminal commands */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: var(--line-height-tight);
  color: var(--foreground-bright);
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

/* Suppress Terminal theme's ::after on headings */
h1::after, h2::after, h3::after, h4::after { display: none; }

p {
  margin: 0.75rem 0;
  line-height: var(--line-height-base);
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--link-hover);
}

/* Override Terminal's container — we use site-wrapper instead */
.container,
.container.center,
.container.full {
  display: contents;
  padding: 0;
  max-width: none;
  min-height: auto;
  border: none;
}

/* ---------- Site Wrapper: 3-Column Grid ---------- */
.site-wrapper {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
  max-width: 1440px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.site-wrapper:has(.toc-sidebar),
.site-wrapper:has(.right-panel) {
  grid-template-columns: 260px minmax(0, 1fr) 240px;
}

/* Sidebar section dividers */
.sidebar__divider {
  height: 1px;
  background: var(--sidebar-border);
  margin: 0.5rem 0;
}

/* ---------- Left Sidebar ---------- */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 1.5rem 1rem;
  z-index: 100;
}

.sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 0.25rem;
}

.sidebar__avatar {
  text-align: center;
  margin-bottom: 0.5rem;
}

.sidebar__avatar .avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  padding: 2px;
  margin: 0 auto;
  display: block;
  object-fit: cover;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 12px var(--glow);
}

.sidebar__avatar .avatar-img:hover {
  border-color: var(--link-hover);
  box-shadow: var(--shadow-md);
}

.sidebar__identity {
  text-align: center;
  margin-bottom: 0.75rem;
}

/* Title: like a repository name */
.sidebar__title {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground-bright);
  text-decoration: none;
  margin-bottom: 0.15rem;
}

/* Tagline: like a README description */
.sidebar__tagline {
  font-size: 0.68rem;
  color: var(--comment);
  margin: 0;
  line-height: 1.45;
  letter-spacing: 0;
}

/* Sidebar Search — like a command input */
.sidebar__search {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.4rem 0.6rem;
  margin-bottom: 0.35rem;
  background: var(--code-bg);
  border: 1px solid var(--sidebar-border);
  color: var(--comment);
  font-size: 0.75rem;
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.sidebar__search:hover {
  border-color: var(--accent);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}

.sidebar__search svg { flex-shrink: 0; }
.sidebar__search span { flex: 1; text-align: left; }

.sidebar__search-kbd {
  font-size: 0.65rem;
  padding: 0.1rem 0.4rem;
  background: var(--accent-faint);
  border: 1px solid var(--accent-medium);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.sidebar__search:hover .sidebar__search-kbd {
  background: var(--accent-medium);
  border-color: var(--accent);
}

/* Sidebar Navigation — filesystem explorer */
.sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0.75rem;
  padding-top: 0.35rem;
}

.sidebar__nav-label {
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.6rem 0.3rem;
  border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 0.2rem;
  display: block;
}

.sidebar__nav-item {
  display: block;
  padding: 0.35rem 0.6rem;
  color: var(--foreground);
  text-decoration: none;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, color 0.2s ease;
}

.sidebar__nav-item:hover {
  background: var(--accent-light);
  color: var(--accent);
}

.sidebar__nav-item.active {
  color: var(--accent);
  background: var(--accent-medium);
  border-left: 2px solid var(--accent);
  padding-left: calc(0.6rem - 2px);
}

.nav-icon {
  color: var(--success);
  margin-right: 0.4rem;
  font-weight: 700;
}

/* Sidebar section labels — matches nav-label style */
.sidebar__section-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 0.6rem 0.3rem;
  margin-bottom: 0.2rem;
}

/* Sidebar Social */
.sidebar__social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar__social .sidebar__section-label {
  width: 100%;
  padding-top: 0.15rem;
}

.social-link {
  color: var(--muted);
  transition: color 0.2s ease;
}

.social-link:hover {
  color: var(--accent);
}

/* System section: theme toggle + status */
.sidebar__system {
  margin-top: auto;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sidebar-border);
}

.sidebar__system .sidebar__section-label {
  padding-top: 0.15rem;
  margin-bottom: 0.4rem;
}

.sidebar__status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding-top: 0.5rem;
  font-size: 0.62rem;
  color: var(--muted);
  letter-spacing: 0;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.4rem 0.65rem;
  background: transparent;
  border: var(--panel-border);
  color: var(--foreground);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: border-color 0.2s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  background: transparent;
}

.theme-icon {
  display: inline-block;
  transition: transform 0.4s ease;
}

.theme-toggle:active .theme-icon {
  transform: rotate(180deg);
}

[data-theme="dark"] .theme-icon::before { content: "☾"; }
[data-theme="light"] .theme-icon::before { content: "☀"; }
[data-theme="cyberpunk"] .theme-icon::before { content: "⚡"; }

/* ---------- Mobile Header ---------- */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0.6rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.mobile-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.mobile-logo {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground-bright);
  text-decoration: none;
}

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--foreground);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.search-trigger-mobile {
  background: none;
  border: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
}

.search-trigger-mobile:hover { color: var(--accent); }

.theme-toggle-mobile {
  background: none;
  border: none;
  color: var(--foreground);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 8px;
}

.theme-toggle-mobile:hover { background: transparent; }

/* Sidebar Overlay */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 90;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* ---------- Main Content ---------- */
.main-content {
  padding: 1.75rem 2.5rem;
  min-width: 0;
  max-width: 900px;
  justify-self: center;
  width: 100%;
}

.content-wrapper {
  width: 100%;
}

/* ---------- Right TOC Sidebar ---------- */
.toc-sidebar {
  position: relative;
  padding: 1.75rem 1rem 1.75rem 0;
}

.toc-wrapper {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Panel chrome — matches system-index panels */
.toc-panel {
  background: var(--card-bg);
  border: var(--panel-border);
  border-radius: var(--r-md);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

/* Titlebar — command input bar */
.toc-titlebar {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  height: var(--titlebar-h);
  padding: 0 var(--sp-md);
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
  font-size: 0.74rem;
  color: var(--comment);
  user-select: none;
}

.toc-titlebar .term-prompt {
  margin-right: 2px;
}

.toc-progress {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.62rem;
  letter-spacing: 0.02em;
}

/* Body — TOC content area */
.toc-body {
  padding: var(--sp-sm) var(--sp-md);
}

.toc-body nav > ul { list-style: none; margin: 0; padding: 0; }
.toc-body ul { list-style: none; padding-left: 0; margin: 0; }
.toc-body li { margin: 0; }
.toc-body li::before { display: none; }

/* Nested items: tree line connector */
.toc-body ul ul {
  padding-left: 0.65rem;
  border-left: 1px solid var(--card-border);
  margin-left: 0.6rem;
}

/* TOC link states: ○ pending → ● active → ● completed */
.toc-body a {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.45;
  border-radius: 3px;
  transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  opacity: 0.5;
}

/* Status dot — inline circle before each link */
.toc-body a::before {
  content: '○';
  flex-shrink: 0;
  font-size: 0.5rem;
  line-height: 1;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Pending — upcoming sections */
.toc-body a.pending {
  color: var(--muted);
  opacity: 0.5;
}
.toc-body a.pending::before {
  content: '○';
  color: var(--muted);
  opacity: 0.6;
}

/* Active — currently reading */
.toc-body a.active {
  color: var(--accent);
  background: var(--accent-subtle);
  border-left: 2px solid var(--accent);
  opacity: 1;
}
.toc-body a.active::before {
  content: '●';
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent);
  opacity: 1;
}

/* Completed — already read */
.toc-body a.completed {
  color: var(--comment);
  opacity: 0.7;
}
.toc-body a.completed::before {
  content: '●';
  color: var(--success);
  opacity: 0.8;
}

.toc-body a:hover {
  color: var(--accent);
  background: var(--accent-faint);
  opacity: 1;
}
.toc-body a:hover::before {
  content: '●';
  color: var(--accent);
  opacity: 1;
}

/* Footer — progress bar + status */
.toc-footer {
  padding: var(--sp-sm) var(--sp-md);
  border-top: var(--panel-border);
}

.toc-bar {
  height: 2px;
  background: var(--code-bg);
  border-radius: 1px;
  overflow: hidden;
  margin-bottom: 0.45rem;
}

.toc-bar__fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.7;
  transition: width 0.3s ease;
}

.toc-status {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.62rem;
  color: var(--muted);
}

.toc-status__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 5px var(--success);
  flex-shrink: 0;
}

/* ---------- Right Panel (Homepage widgets) ---------- */
.right-panel {
  position: relative;
  padding: 1.75rem 1.25rem 1.75rem 0;
}

.right-panel-wrapper {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Widget: like a panel in a dashboard */
.widget {
  padding: 12px var(--sp-md);
  background: var(--card-bg);
  border: var(--panel-border);
  border-radius: var(--r-sm);
  box-shadow: var(--panel-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.widget:hover {
  border-color: var(--accent);
  box-shadow: var(--panel-shadow-hover);
}

/* Widget title: code comment style */
.widget-title {
  font-size: 0.65rem;
  font-weight: 400;
  color: var(--comment);
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--sidebar-border);
}

/* Trending Tags */
.trending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: 0.72rem;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.tag-chip:hover {
  border-color: var(--accent);
  background: var(--accent-light);
  box-shadow: var(--panel-shadow-hover);
}

.tag-name { color: var(--accent); }
.tag-count { color: var(--muted); font-size: 0.62rem; }

/* Recent Posts Widget */
.recent-posts { list-style: none; margin: 0; padding: 0; }

.recent-posts li {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--code-border);
}

.recent-posts li::before { display: none; }
.recent-posts li:last-child { border-bottom: none; }

.recent-posts a {
  display: block;
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s ease;
}

.recent-posts a:hover { color: var(--accent); }

.recent-posts time {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

/* Active Topics Widget */
.active-topics {
  list-style: none;
  margin: 0;
  padding: 0;
}

.active-topics li {
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--code-border);
}

.active-topics li::before { display: none; }
.active-topics li:last-child { border-bottom: none; }

.topic-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  font-size: 0.75rem;
  transition: color 0.2s ease;
}

.topic-item:hover { color: var(--accent); }

.topic-name {
  color: var(--foreground);
  flex-shrink: 0;
  min-width: 3.5rem;
  font-size: 0.72rem;
}

.topic-item:hover .topic-name { color: var(--accent); }

.topic-bar {
  flex: 1;
  height: 3px;
  background: var(--code-bg);
  border-radius: 2px;
  overflow: hidden;
}

.topic-bar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.topic-item:hover .topic-bar__fill { opacity: 1; }

.topic-count {
  color: var(--muted);
  font-size: 0.62rem;
  flex-shrink: 0;
}

/* ---------- Search Modal ---------- */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}

.search-overlay.open { display: flex; }

.search-modal {
  width: 90%;
  max-width: 580px;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: scale(0.96) translateY(-10px);
  opacity: 0;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.search-overlay.open .search-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.search-header {
  padding: 0;
  border-bottom: 1px solid var(--sidebar-border);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.65rem 0.85rem;
}

.search-icon { flex-shrink: 0; color: var(--comment); }

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--foreground);
  font-size: 0.9rem;
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

.search-input::placeholder { color: var(--muted); }

.search-kbd {
  font-size: 0.62rem;
  padding: 0.1rem 0.4rem;
  background: var(--accent-faint);
  border: 1px solid var(--accent-medium);
  border-radius: 3px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}

.search-results {
  max-height: 380px;
  overflow-y: auto;
  padding: 0.35rem;
}

.search-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--comment);
  font-size: 0.82rem;
}

.search-result-item {
  display: block;
  padding: 0.6rem 0.85rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.search-result-item:hover,
.search-result-item.active { background: var(--accent-faint); }

.search-result-item.active .search-result-title,
.search-result-item:hover .search-result-title { color: var(--accent); }

.search-result-title {
  display: block;
  color: var(--foreground);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}

.search-result-meta {
  display: block;
  font-size: 0.68rem;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.search-result-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--comment);
  line-height: 1.4;
}

/* ==========================================================================
   Terminal Post Cards
   Each card = a mini terminal window with real depth
   ========================================================================== */
.posts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-lg);
}

.term-card {
  background: var(--card-bg);
  border: var(--panel-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, opacity 0.3s ease;
}

.term-card:hover {
  border-color: var(--accent);
  box-shadow: var(--panel-shadow-hover);
  transform: translateY(-3px);
}

/* "Open file" interaction — progressive disclosure on hover */
.term-card:hover .term-card__title { color: var(--accent); }
.term-card:hover .term-card__filename { color: var(--foreground); }
.term-card:hover .term-card__titlebar { background: var(--accent-subtle); }
.term-card:hover .term-prompt { color: var(--accent); }

@media (hover: hover) {
  .posts:hover .term-card:not(:hover) {
    opacity: 0.85;
  }
}

/* Title bar: macOS + IDE window chrome */
.term-card__titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--titlebar-h);
  padding: 0 var(--sp-md);
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
  user-select: none;
  transition: background 0.18s ease;
}

.term-card__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-right: var(--sp-sm);
}

.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot--red { background: var(--dot-red); }
.dot--yellow { background: var(--dot-yellow); }
.dot--green { background: var(--dot-green); }

/* Dots pulse on card hover */
.term-card:hover .dot {
  animation: dot-pulse 1.5s ease-in-out infinite;
}
.term-card:hover .dot--yellow { animation-delay: 0.15s; }
.term-card:hover .dot--green { animation-delay: 0.3s; }

@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Filename: filepath in the tab */
.term-card__filename {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.18s ease;
}

/* Status: metrics in titlebar — right aligned, lower contrast */
.term-card__status {
  font-size: 0.62rem;
  color: var(--comment);
  letter-spacing: 0;
  flex-shrink: 0;
  white-space: nowrap;
  opacity: 0.7;
}

/* Card body: the terminal content area */
.term-card__body {
  padding: var(--sp-md) var(--sp-md) 12px;
}

/* Prompt line: $ command */
.term-card__line--prompt {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.term-prompt {
  color: var(--success);
  font-weight: 700;
  flex-shrink: 0;
  font-size: 0.88rem;
  transition: color 0.18s ease;
}

/* Blinking cursor after prompt */
.term-card__line--prompt .term-prompt::after {
  content: '▌';
  display: inline;
  color: var(--success);
  margin-left: 0.15rem;
  font-weight: 400;
  opacity: 0;
}

.term-card:hover .term-card__line--prompt .term-prompt::after {
  opacity: 1;
  animation: cursor-blink 1s step-end infinite;
}

@keyframes cursor-blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Title: the main command/article title */
.term-card__title {
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground-bright);
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: var(--line-height-tight);
}

.term-card__title:hover { color: var(--accent); }

/* Description: // comment-style documentation */
.term-card__desc {
  margin: var(--sp-sm) 0 0;
  font-size: 0.76rem;
  color: var(--comment);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.term-card__desc p { margin: 0; }

/* Card footer: date + tags */
.term-card__footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--code-border);
  flex-wrap: wrap;
}

.term-card__date {
  font-size: 0.68rem;
  color: var(--comment);
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Tags: keyword chips */
.term-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.term-tag {
  font-size: 0.65rem;
  color: var(--accent);
  text-decoration: none;
  padding: 0.08rem 0.4rem;
  background: var(--accent-faint);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease, border-color 0.15s ease, text-decoration-color 0.15s ease;
  text-underline-offset: 2px;
}

.term-tag:hover {
  background: var(--accent-strong);
  border-color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-underline);
}

/* ==========================================================================
   Page Heading — like a terminal header or documentation title
   ========================================================================== */
.page-heading {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground-bright);
  margin-bottom: 1.15rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--card-border);
}

.page-heading::after { display: none; }
.page-heading__accent { color: var(--accent); }

/* ==========================================================================
   Tags Cloud — like a collection of keywords
   ========================================================================== */
.tags-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.tags-cloud .tag-chip {
  font-size: 0.8rem;
  padding: 0.3rem 0.65rem;
}

/* ==========================================================================
   System Index — tags page, terminal system index
   ========================================================================== */
.system-index__header {
  margin-bottom: var(--sp-lg);
}

.system-index__label {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  margin-bottom: var(--sp-xs);
}

.system-index__session {
  font-size: 0.78rem;
  color: var(--comment);
  margin-top: var(--sp-xs);
}

.system-index__session .term-prompt {
  margin-right: 6px;
}

.system-index__motd {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

.system-index__exit {
  margin-top: var(--sp-xl);
  font-size: 0.74rem;
  color: var(--comment);
  text-align: center;
  line-height: 1.8;
}

.system-index__exit .term-prompt {
  margin-right: 4px;
}

.system-index__exit div {
  color: var(--muted);
  font-size: 0.68rem;
}

/* Panel shared by header + sections */
.system-index__panel {
  background: var(--card-bg);
  border: var(--panel-border);
  border-radius: var(--r-md);
  box-shadow: var(--panel-shadow);
  overflow: hidden;
}

/* Command titlebar — top bar of each panel */
.system-index__cmd {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--titlebar-h);
  padding: 0 var(--sp-md);
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
  font-size: 0.78rem;
  color: var(--comment);
  user-select: none;
}

.system-index__cmd .term-prompt {
  margin-right: 2px;
}

/* Panel body — content area below titlebar */
.system-index__body {
  padding: var(--sp-md);
}

/* Tags cloud inside panel */
.system-index__body .tags-cloud {
  gap: 0.5rem;
}

/* Sections spacing */
.system-index__section {
  margin-top: var(--sp-lg);
}

/* Active topics inside panel */
.system-index__body .active-topics {
  margin: 0;
}

/* Recent posts inside panel */
.system-index__body .recent-posts {
  margin: 0;
}

/* System status */
/* systemctl status output */
.systemctl {
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--comment);
}

.systemctl__header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--sp-sm);
  color: var(--foreground);
  font-weight: 600;
}

.systemctl__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 5px var(--success);
  flex-shrink: 0;
}

.systemctl__unit {
  color: var(--foreground-bright);
}

.systemctl__dash {
  color: var(--muted);
}

.systemctl__props {
  padding-left: 5px;
}

.systemctl__row {
  display: flex;
  gap: 6px;
}

.systemctl__key {
  color: var(--foreground);
  min-width: 7ch;
  text-align: right;
  flex-shrink: 0;
}

.systemctl__path {
  color: var(--muted);
}

.systemctl__active {
  color: var(--success);
  font-weight: 600;
}

.systemctl__tree {
  padding-left: 8ch;
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 2px;
}

/* ==========================================================================
   About / whoami — identity page
   ========================================================================== */

/* Identity card */
.whoami {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.whoami__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  box-shadow: 0 0 8px var(--glow);
  flex-shrink: 0;
  object-fit: cover;
}

.whoami__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.whoami__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--foreground-bright);
  letter-spacing: -0.02em;
}

.whoami__role {
  font-size: 0.74rem;
  color: var(--comment);
}

.whoami__bio {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 2px;
}

/* Bio content from markdown */
.whoami__content {
  font-size: 0.82rem;
  line-height: 1.7;
  color: var(--foreground);
}

.whoami__content p {
  margin: 0 0 var(--sp-sm);
}

.whoami__content p:last-child {
  margin-bottom: 0;
}

.whoami__content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.whoami__content strong {
  color: var(--foreground-bright);
}

/* SSH config — contacts */
.whoami__contacts {
  display: flex;
  flex-direction: column;
}

.whoami__contact {
  display: flex;
  gap: 8px;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--code-border);
  text-decoration: none;
  font-size: 0.76rem;
  transition: background 0.15s ease;
}

.whoami__contact:last-child {
  border-bottom: none;
}

.whoami__contact:hover {
  background: var(--accent-subtle);
}

.whoami__contact-key {
  color: var(--accent);
  min-width: 4ch;
  flex-shrink: 0;
}

.whoami__contact-val {
  color: var(--foreground);
  transition: color 0.15s ease;
}

.whoami__contact:hover .whoami__contact-val {
  color: var(--foreground-bright);
}

/* env — stack variables */
.whoami__env {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.76rem;
  line-height: 1.6;
  color: var(--foreground);
}

.whoami__env-key {
  color: var(--accent);
}

/* uptime — stats */
.whoami__uptime {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.76rem;
  color: var(--comment);
  flex-wrap: wrap;
}

.whoami__uptime-sep {
  color: var(--muted);
  font-size: 0.6rem;
}

/* ==========================================================================
   Archives — system history, git log
   ========================================================================== */
/* History summary */
.history__summary {
  font-size: 0.72rem;
  color: var(--muted);
}

/* Year era spacing */
.history__era {
  margin-top: var(--sp-lg);
}

/* Commit count in titlebar */
.history__commit-count {
  margin-left: auto;
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 400;
}

/* Log entries */
.history__entries {
  display: flex;
  flex-direction: column;
}

.history__entry {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  padding: 0.45rem var(--sp-md);
  border-bottom: 1px solid var(--code-border);
  text-decoration: none;
  transition: background 0.15s ease;
}

.history__entry:last-child {
  border-bottom: none;
}

.history__entry:hover {
  background: var(--accent-subtle);
}

/* Commit hash — git short SHA style */
.history__hash {
  font-size: 0.68rem;
  color: var(--accent);
  flex-shrink: 0;
  min-width: 5.5ch;
  opacity: 0.8;
}

.history__entry:hover .history__hash {
  opacity: 1;
}

/* Timestamp */
.history__date {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 5ch;
}

/* Commit message — post title */
.history__msg {
  color: var(--foreground);
  font-size: 0.8rem;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history__entry:hover .history__msg {
  color: var(--foreground-bright);
}

/* Refs — tag badges like git branch/tag decorations */
.history__refs {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.history__ref {
  font-size: 0.6rem;
  color: var(--accent);
  background: var(--accent-faint);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.history__entry:hover .history__ref {
  border-color: var(--accent);
}

/* ==========================================================================
   Single Post Styles — "opening a file in an editor"
   ========================================================================== */

/* Post header: terminal window containing title + meta */
.post-header {
  border: var(--panel-border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--panel-shadow);
  margin-bottom: var(--sp-xl);
}

.post-header__titlebar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--titlebar-h);
  padding: 0 var(--sp-md);
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
}

.post-header__dots {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin-right: var(--sp-sm);
}

.post-header__path {
  font-size: 0.72rem;
  color: var(--comment);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-header__metrics {
  font-size: 0.62rem;
  color: var(--comment);
  opacity: 0.7;
  flex-shrink: 0;
  white-space: nowrap;
}

.post-header__body {
  padding: var(--sp-lg) var(--sp-lg) var(--sp-md);
  background: var(--card-bg);
}

.post-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: var(--sp-sm);
  line-height: 1.25;
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.post-title::after { display: none; }
.post-title a { color: var(--foreground-bright); text-decoration: none; }
.post-title .term-prompt { font-size: 1.1rem; }

/* Description: comment-style, inside header */
.post-header__desc {
  color: var(--comment);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0 0 var(--sp-md);
}

/* Terminal metadata block */
.post-terminal-meta {
  margin-top: var(--sp-sm);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  line-height: 1.8;
}

.post-terminal-meta .term-prompt {
  margin-right: 4px;
}

.terminal-date { color: var(--comment); }
.terminal-tags { color: var(--comment); }
.terminal-tags a { color: var(--accent); text-decoration: none; }
.terminal-tags a:hover { color: var(--link-hover); }

.post-terminal-meta .term-prompt::after {
  content: "_";
  animation: blink-cursor 1s infinite;
}

@keyframes blink-cursor {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .post-terminal-meta .term-prompt::after { animation: none; }
}

/* Legacy description (outside header) — keep for backwards compat */
.post-description {
  color: var(--comment);
  font-style: normal;
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin: 1rem 0;
  font-size: 0.82rem;
  line-height: 1.6;
}

/* Sticky mini header — appears on scroll */
.post-mini-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-md);
  z-index: 999;
  transform: translateY(-100%);
  transition: transform 0.25s ease;
  backdrop-filter: blur(8px);
  font-size: 0.72rem;
}

.post-mini-header.visible {
  transform: translateY(0);
}

.post-mini-header__title {
  color: var(--foreground-bright);
  font-weight: 600;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-mini-header__progress {
  color: var(--accent);
  font-size: 0.62rem;
  opacity: 0.8;
}

/* Sidebar dimming on post pages — content dominance */
.site-wrapper:has(.post-header) .sidebar,
.site-wrapper:has(.post-header) .toc-sidebar {
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

.site-wrapper:has(.post-header) .sidebar:hover,
.site-wrapper:has(.post-header) .toc-sidebar:hover {
  opacity: 1;
}

/* Post cover image */
.post-cover {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.25rem 0;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  object-fit: cover;
  transition: box-shadow 0.3s ease;
}

.post-cover:hover {
  box-shadow: var(--shadow-md);
}

/* Post list cards (fallback, used in theme default) */
.post.on-list {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--sidebar-border);
}

.post.on-list:last-of-type { border-bottom: none; }

.post.on-list .post-title {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0.4rem !important;
}

.post.on-list .post-content p { color: var(--comment); }

.read-more.button.inline {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 3px 10px;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  text-decoration: none;
}

.read-more.button.inline:hover { background: var(--accent-light); }

/* ==========================================================================
   Content Typography — code-editor feel
   Styles for all elements inside .post-content
   ========================================================================== */

/* Post content wrapper — vertical rhythm */
.post-content > div {
  line-height: var(--line-height-base);
}

.post-content > div > *:first-child { margin-top: 0; }

/* ---------- Headings inside content ---------- */
.post-content h1 {
  font-size: 1.4rem;
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--card-border);
}

.post-content h2 {
  font-size: 1.2rem;
  margin: 2.5rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--accent-faint);
  color: var(--foreground-bright);
}

.post-content h3 {
  font-size: 1.05rem;
  margin: 1.8rem 0 0.5rem;
  color: var(--foreground);
}

.post-content h4 {
  font-size: 0.95rem;
  margin: 1.25rem 0 0.5rem;
  color: var(--foreground);
}

.post-content h5 {
  font-size: 0.88rem;
  margin: 1rem 0 0.4rem;
  color: var(--comment);
  font-weight: 500;
}

.post-content h6 {
  font-size: 0.82rem;
  margin: 0.85rem 0 0.35rem;
  color: var(--comment);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Anchor links on headings — two-stage reveal */
.post-content .hanchor {
  color: var(--accent);
  font-weight: 400;
  margin-left: 0.35rem;
  text-decoration: none;
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.post-content h1:hover .hanchor,
.post-content h2:hover .hanchor,
.post-content h3:hover .hanchor,
.post-content h4:hover .hanchor,
.post-content h5:hover .hanchor,
.post-content h6:hover .hanchor {
  opacity: 0.6;
}

.post-content .hanchor:hover {
  opacity: 1;
}

/* ---------- Paragraphs ---------- */
.post-content p {
  margin: 0.75rem 0;
  color: var(--foreground);
}

/* First paragraph breathing space after header */
.post-content > div > :first-child {
  margin-top: 0.25rem;
}

/* ---------- Links inside content ---------- */
.post-content a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-underline);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease, text-underline-offset 0.15s ease;
}

.post-content a:hover {
  color: var(--link-hover);
  text-decoration-color: var(--link-hover);
  text-underline-offset: 2px;
}

/* Heading links should not be underlined */
.post-content h1 a, .post-content h2 a,
.post-content h3 a, .post-content h4 a,
.post-content h5 a, .post-content h6 a {
  text-decoration: none;
  color: inherit;
}

/* ---------- Lists — structured output ---------- */
.post-content ul,
.post-content ol {
  margin: 0.75rem 0;
  padding-left: 1.5rem;
}

.post-content ul { list-style: none; }
.post-content ol { list-style: none; counter-reset: ol-counter; }

.post-content ul > li,
.post-content ol > li {
  position: relative;
  margin: 0.45rem 0;
  padding-left: 0.5rem;
  line-height: 1.6;
}

/* Custom bullet: muted dash */
.post-content ul > li::before {
  content: '–';
  position: absolute;
  left: -1rem;
  color: var(--muted);
  font-weight: 400;
}

/* Numbered list: accent-colored counter */
.post-content ol > li {
  counter-increment: ol-counter;
}

.post-content ol > li::before {
  content: counter(ol-counter) '.';
  position: absolute;
  left: -1.5rem;
  width: 1.2rem;
  text-align: right;
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 500;
}

/* Nested lists: tighter spacing */
.post-content li > ul,
.post-content li > ol {
  margin: 0.2rem 0;
}

/* Nested unordered bullets: dimmer dot */
.post-content li > ul > li::before {
  content: '·';
  font-weight: 700;
}

/* Task lists (GitHub-style checkboxes) */
.post-content ul > li.task-list-item {
  padding-left: 0;
}

.post-content ul > li.task-list-item::before {
  display: none;
}

.post-content input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--card-border);
  border-radius: 2px;
  background: var(--code-bg);
  margin-right: 0.5rem;
  vertical-align: middle;
  position: relative;
}

.post-content input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.post-content input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: -1px;
  left: 2px;
  font-size: 10px;
  color: var(--background);
  font-weight: 700;
}

/* ---------- Tables — like kubectl / CLI data output ---------- */

.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1.25rem 0;
  border: var(--panel-border);
  border-radius: var(--r-sm);
  box-shadow: var(--panel-shadow);
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  margin: 0;
}

.post-content thead {
  background: var(--titlebar-bg);
}

.post-content th {
  color: var(--foreground-bright);
  font-weight: 600;
  font-size: 0.75rem;
  text-align: left;
  padding: 0.6rem 0.85rem;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--card-border);
}

.post-content td {
  padding: 0.5rem 0.85rem;
  color: var(--foreground);
  vertical-align: top;
  line-height: 1.5;
  border: 1px solid var(--card-border);
}

.post-content tbody tr:hover {
  background: var(--accent-subtle);
}

.post-content tbody tr:nth-child(even) {
  background: var(--table-stripe);
}

.post-content tbody tr:nth-child(even):hover {
  background: var(--accent-subtle);
}

.post-content td code {
  font-size: 0.82em;
  padding: 0.1em 0.35em;
}

/* ---------- Code — native to the environment ---------- */
code, kbd {
  border-color: var(--code-border);
  background: var(--code-bg);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

/* Inline code */
.post-content p code,
.post-content li code,
.post-content td code,
.post-content h1 code, .post-content h2 code,
.post-content h3 code, .post-content h4 code {
  padding: 0.15em 0.4em;
  border-radius: 3px;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  font-size: 0.88em;
  color: var(--foreground-bright);
  word-break: break-word;
}

/* Code blocks — terminal window */
pre {
  background: var(--card-bg) !important;
  border: var(--panel-border) !important;
  border-radius: var(--r-sm);
  font-size: 0.82rem;
  margin: 1rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.post-content pre {
  padding: 1rem 1.25rem;
  line-height: 1.6;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--card-border);
}

.post-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.82rem;
  color: var(--foreground);
}

/* Highlight wrapper (Hugo's code highlighting) */
.post-content .highlight {
  margin: 1.25rem 0;
  position: relative;
}

.post-content .highlight pre {
  margin: 0;
}

/* Line numbers in code blocks */
.post-content .highlight .lnt {
  color: var(--muted);
  padding-right: 1rem;
  user-select: none;
}

/* Code block title bar — language label + copy button */
.highlight {
  border: var(--panel-border) !important;
  border-radius: var(--r-sm);
  overflow: hidden;
  margin: 1.25rem 0;
  box-shadow: var(--panel-shadow);
}

.highlight pre {
  border: none !important;
  margin: 0;
  border-radius: 0;
}

.code-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--titlebar-bg);
  border-bottom: var(--panel-border);
  color: var(--comment);
  text-transform: none;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  height: var(--titlebar-h);
  padding: 0 var(--sp-md);
  line-height: 1;
  letter-spacing: 0;
}

.code-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.code-lang::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.6;
}

.copy-button {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--comment);
  background: var(--code-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.55rem;
  cursor: pointer;
  opacity: 0;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.code-title:hover .copy-button,
.highlight:hover .copy-button,
.copy-button:focus-visible {
  opacity: 1;
}

.copy-button:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-tint);
  opacity: 1;
}

.code-title .copy-button {
  background: var(--code-bg);
}

/* Copy feedback pulse */
@keyframes copy-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.copy-button.copied {
  color: var(--success);
  border-color: var(--success);
  animation: copy-pulse 0.3s ease;
}

/* Floating copy button for code blocks without language */
.copy-button--float {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.highlight:hover .copy-button--float {
  opacity: 1;
}

/* ---------- Blockquote — comment block / annotation ---------- */
blockquote {
  border-left: 3px solid var(--accent);
  border-top: none;
  border-bottom: none;
  border-right: none;
  padding: 0.5rem 0 0.5rem 1rem;
  color: var(--comment);
  font-style: normal;
}

blockquote::before { display: none; }

.post-content blockquote {
  margin: 1.25rem 0;
  padding: 0.85rem 1.25rem;
  background: var(--accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.post-content blockquote p {
  color: var(--comment);
  margin: 0.3rem 0;
}

.post-content blockquote p:first-child { margin-top: 0; }
.post-content blockquote p:last-child { margin-bottom: 0; }

/* Nested blockquotes */
.post-content blockquote blockquote {
  margin: 0.5rem 0;
  border-left-color: var(--muted);
}

/* ---------- Images — responsive with terminal frame ---------- */
img { border-color: var(--sidebar-border); }

.post-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  transition: box-shadow 0.2s ease;
}

.post-content img:hover {
  box-shadow: var(--shadow-md);
}

/* Figure with caption */
.post-content figure {
  margin: 2rem 0;
  text-align: center;
}

.post-content figure img {
  margin: 0 auto;
}

.post-content figcaption {
  font-size: 0.72rem;
  color: var(--comment);
  font-style: normal;
  margin-top: 0.75rem;
  padding: 0 0.5rem;
  line-height: 1.5;
}

.post-content figcaption::before {
  content: '// ';
  color: var(--muted);
}

/* ---------- Horizontal rule — section divider ---------- */
.post-content hr {
  border: none;
  height: 1px;
  background: var(--card-border);
  margin: 2.5rem 0 1.5rem;
  position: relative;
}

.post-content hr::after {
  content: '···';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background);
  padding: 0 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
  letter-spacing: 0.3em;
}

/* ---------- Definition lists ---------- */
.post-content dl {
  margin: 1rem 0;
}

.post-content dt {
  font-weight: 600;
  color: var(--foreground-bright);
  margin-top: 0.75rem;
}

.post-content dt::before {
  content: '$ ';
  color: var(--success);
  font-weight: 400;
}

.post-content dd {
  margin-left: 1rem;
  padding-left: 0.65rem;
  border-left: 2px solid var(--card-border);
  color: var(--foreground);
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}

/* ---------- Keyboard shortcuts ---------- */
.post-content kbd {
  display: inline-block;
  padding: 0.15em 0.45em;
  font-size: 0.78em;
  color: var(--foreground-bright);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-bottom-width: 2px;
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--code-border);
  font-family: var(--font-mono);
}

/* ---------- Abbreviations ---------- */
.post-content abbr[title] {
  text-decoration: underline dotted var(--muted);
  cursor: help;
}

/* ---------- Mark / highlight text ---------- */
.post-content mark {
  background: var(--mark-bg);
  color: var(--warning);
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

/* ---------- Details / Summary (collapsible) ---------- */
.post-content details {
  margin: 1rem 0;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  overflow: hidden;
}

.post-content summary {
  padding: 0.6rem 1rem;
  cursor: pointer;
  background: var(--code-bg);
  color: var(--foreground-bright);
  font-weight: 500;
  font-size: 0.88rem;
  user-select: none;
}

.post-content summary:hover {
  background: var(--accent-tint);
}

.post-content summary::marker {
  color: var(--accent);
}

.post-content details[open] summary {
  border-bottom: 1px solid var(--card-border);
}

.post-content details > *:not(summary) {
  padding: 0 1rem;
}

/* ---------- Superscript / Subscript ---------- */
.post-content sup, .post-content sub {
  font-size: 0.75em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

.post-content sup { top: -0.5em; }
.post-content sub { bottom: -0.25em; }

/* Footnote references */
.post-content sup a {
  text-decoration: none;
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Footnotes section ---------- */
.post-content .footnotes {
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--card-border);
  font-size: 0.82rem;
  color: var(--comment);
}

.post-content .footnotes ol {
  padding-left: 1.5rem;
}

.post-content .footnotes li {
  margin: 0.5rem 0;
}

.post-content .footnotes p {
  margin: 0.25rem 0;
  color: var(--comment);
}

/* Backref arrow */
.post-content .footnotes .footnote-backref {
  text-decoration: none;
  color: var(--accent);
  margin-left: 0.25rem;
}

/* ---------- Video / Embed ---------- */
.post-content video,
.post-content iframe {
  max-width: 100%;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  margin: 1.25rem 0;
}

/* Responsive embed wrapper (YouTube, etc.) */
.post-content .video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 1.25rem 0;
  border: 1px solid var(--card-border);
  border-radius: 6px;
}

.post-content .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  margin: 0;
}

/* ---------- Strong / Emphasis ---------- */
.post-content strong {
  color: var(--foreground-bright);
  font-weight: 600;
}

.post-content em {
  font-style: italic;
  color: var(--foreground);
}

/* ==========================================================================
   Footer — terminal-style with command sections + status bar
   ========================================================================== */
.footer {
  margin-top: 56px;
  border-top: 1px solid var(--card-border);
}

/* Terminal content grid */
.footer__terminal {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr;
  gap: 1.5rem;
  padding: 1.5rem 0;
}

/* Command labels: $ cat README.md, $ git remote -v, etc. */
.footer__cmd {
  display: block;
  font-size: 0.72rem;
  color: var(--accent);
  margin-bottom: 0.6rem;
}

.footer__cmd .term-prompt {
  color: var(--success);
  margin-right: 0.3rem;
}

/* README heading */
.footer__heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--foreground-bright);
  margin: 0 0 0.35rem;
}

.footer__heading::after { display: none; }

/* Quote/tagline */
.footer__quote {
  font-size: 0.72rem;
  color: var(--comment);
  line-height: 1.5;
  margin: 0;
  padding-left: 0.65rem;
  border-left: 2px solid var(--card-border);
}

/* Link lists */
.footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__links li {
  margin: 0;
  padding: 0;
}

.footer__links li::before { display: none; }

.footer__links a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0;
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer__links a svg {
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.footer__links a:hover svg {
  opacity: 1;
}

.footer__links a:hover {
  color: var(--accent);
}

/* Back to top button */
.footer__top {
  display: flex;
  justify-content: center;
  padding: 1rem 0;
}

.footer__top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  font-size: 0.75rem;
  color: var(--foreground);
  text-decoration: none;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
  font-family: var(--font-mono);
}

.footer__top-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}

.footer__top-btn .term-prompt {
  color: var(--success);
}

.footer__top-arrow {
  color: var(--accent);
}

/* Status bar at the very bottom */
.footer__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.65rem;
  color: var(--muted);
}

.footer__status-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer__status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 6px var(--success);
}

.footer__status-right {
  color: var(--muted);
}

.footer__status-right a {
  color: var(--muted);
  text-decoration: none;
}

.footer__status-right a:hover {
  color: var(--accent);
}


/* Pagination */
.pagination {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--card-border);
  text-align: center;
}

.pagination__buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.8rem;
}

.pagination a {
  color: var(--comment);
  text-decoration: none;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.pagination a .term-prompt {
  font-size: 0.8rem;
  margin-right: 4px;
}

.pagination a:hover {
  border-color: var(--accent);
  background: var(--accent-faint);
  color: var(--foreground);
}

.pagination__info {
  display: block;
  margin-top: var(--sp-sm);
  color: var(--muted);
  font-size: 0.68rem;
}

/* ==========================================================================
   Article Exit — terminal session end
   One panel. Consistent spacing. No competing elements.
   ========================================================================== */

.article-exit {
  margin-top: 48px;
  padding: var(--sp-lg);
  background: var(--titlebar-bg);
  border: var(--panel-border);
  border-radius: var(--r-md);
  overflow: hidden;
}

/* --- Closing Thoughts --- */
.article-exit__thoughts {
  margin-bottom: 32px;
  padding: var(--sp-md);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--r-sm);
}

.article-exit__cmd {
  display: block;
  font-size: 0.72rem;
  color: var(--accent);
  margin-bottom: var(--sp-sm);
}

.article-exit__thoughts-body {
  font-size: 0.82rem;
  line-height: 1.65;
  color: var(--foreground);
}

.article-exit__thoughts-body p { margin: 0.4rem 0; }
.article-exit__thoughts-body p:first-child { margin-top: 0; }
.article-exit__thoughts-body p:last-child { margin-bottom: 0; }
.article-exit__thoughts-body strong { color: var(--foreground-bright); }

/* --- EOF Status Line --- */
.article-exit__eof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-bottom: 20px;
  margin-bottom: 28px;
  font-size: 0.72rem;
  color: var(--comment);
  border-bottom: 1px solid var(--card-border);
}

.article-exit__eof-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
}

.article-exit__eof-sep {
  color: var(--muted);
  opacity: 0.4;
}

/* --- Continue Exploring --- */
.article-exit__nav {
  margin-bottom: 28px;
}

.article-exit__label {
  display: block;
  font-size: 0.72rem;
  color: var(--comment);
  margin-bottom: 14px;
}

.article-exit__label .term-prompt {
  color: var(--accent);
}

.article-exit__nav-links {
  display: flex;
  gap: 10px;
}

.article-exit__nav-item {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-sm);
  padding: 10px 14px;
  background: transparent;
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-size: 0.78rem;
  color: var(--foreground);
  transition: border-color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
  min-width: 0;
}

.article-exit__nav-item:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px var(--glow);
}

.article-exit__nav-item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.article-exit__nav-item--next {
  text-align: right;
  justify-content: flex-end;
}

.article-exit__nav-item--next .article-exit__nav-text {
  align-items: flex-end;
}

.article-exit__nav-arrow {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 0.82rem;
}

.article-exit__nav-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  min-width: 0;
}

.article-exit__nav-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--foreground-bright);
}

.article-exit__nav-item:hover .article-exit__nav-title {
  color: var(--accent);
}

.article-exit__nav-desc {
  font-size: 0.68rem;
  color: var(--comment);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-exit__nav-tags {
  font-size: 0.62rem;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Author --- */
.article-exit__author {
  padding: 28px 0 0;
  border-top: 1px solid var(--card-border);
}

.article-exit__author-label {
  display: block;
  font-size: 0.65rem;
  color: var(--muted);
  margin-bottom: 10px;
}

.article-exit__author-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.article-exit__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--card-border);
  flex-shrink: 0;
}

.article-exit__author-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.article-exit__author-name {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--foreground-bright);
}

.article-exit__author-role {
  font-size: 0.65rem;
  color: var(--comment);
}

.article-exit__author-bio {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.45;
}

/* --- Terminal Exit — interactive panel --- */
.exit-block {
  display: grid;
  place-items: center;
  text-align: center;
  margin: 36px calc(-1 * var(--sp-lg)) calc(-1 * var(--sp-lg));
  padding: 20px var(--sp-lg) var(--sp-lg);
  font-size: 0.76rem;
  font-family: inherit;
  letter-spacing: 0.02em;
  line-height: 1.9;
  background: transparent;
  border: none;
  border-top: 1px solid transparent;
  cursor: pointer;
  width: auto;
  transition: background 0.14s ease, border-color 0.14s ease;
}

a.exit-block,
a.exit-block:hover { text-decoration: none; }

.exit-block:hover {
  background: var(--code-bg);
  border-top-color: var(--card-border);
}

.exit-block:focus-visible {
  background: var(--code-bg);
  border-top-color: var(--danger);
  outline: none;
}

/* $ exit command */
.exit-block__cmd {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--danger);
  font-weight: 600;
  opacity: 0.75;
  transition: opacity 0.14s ease;
}

.exit-block:hover .exit-block__cmd,
.exit-block:focus-visible .exit-block__cmd {
  opacity: 1;
}

/* Lines */
.exit-block__line { color: var(--comment); }
.exit-block__line--muted { color: var(--muted); font-size: 0.68rem; }

/* Dot — green for clean shutdown, never red */
.exit-block__dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--success);
  flex-shrink: 0;
  transition: box-shadow 0.14s ease;
}

.exit-block:hover .exit-block__dot {
  box-shadow: 0 0 6px var(--success);
}

/* Cursor — appears only on hover/focus, blinks */
.exit-block__cursor {
  color: var(--danger);
  font-size: 0.65em;
  margin-left: 2px;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.exit-block:hover .exit-block__cursor,
.exit-block:focus-visible .exit-block__cursor {
  opacity: 1;
  animation: exit-blink 1s step-end infinite;
}

@keyframes exit-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Hint */
.exit-block__hint {
  font-size: 0.62rem;
  color: var(--muted);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.14s ease;
}

.exit-block:hover .exit-block__hint,
.exit-block:focus-visible .exit-block__hint {
  opacity: 0.6;
}

/* Viewport entry — fade in sequentially */
.exit-block__cmd,
.exit-block__line {
  opacity: 0;
  transform: translateY(3px);
}

.exit-block.is-visible .exit-block__cmd {
  opacity: 0.75;
  transform: translateY(0);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.exit-block.is-visible .exit-block__line:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s ease 0.1s, transform 0.15s ease 0.1s;
}

.exit-block.is-visible .exit-block__line:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.15s ease 0.2s, transform 0.15s ease 0.2s;
}

/* Hover override — cmd goes full opacity even after entry */
.exit-block.is-visible:hover .exit-block__cmd,
.exit-block.is-visible:focus-visible .exit-block__cmd {
  opacity: 1;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .exit-block__cursor { animation: none; }
  .exit-block:hover .exit-block__cursor,
  .exit-block:focus-visible .exit-block__cursor { animation: none; opacity: 1; }
  .exit-block__cmd,
  .exit-block__line { opacity: 1; transform: none; }
  .exit-block.is-visible .exit-block__cmd { opacity: 0.75; }
  .exit-block.is-visible .exit-block__line:nth-child(2),
  .exit-block.is-visible .exit-block__line:nth-child(3) { transition: none; }
}

/* Terms (Tags) page */
.terms a { color: var(--accent); }

/* ==========================================================================
   Scrollbar — minimal, tool-like
   ========================================================================== */
/* Webkit (Chrome, Safari, Edge) */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--sidebar-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-border) transparent;
}

/* Selection */
::selection {
  background: var(--accent-bold);
  color: var(--foreground-bright);
}

/* ==========================================================================
   Transitions — targeted for theme switching performance
   ========================================================================== */
body,
.sidebar,
.mobile-header,
.main-content,
.term-card,
.term-card__titlebar,
.widget,
.search-modal,
.footer,
.post-content pre,
.highlight,
.post-content details,
.post-content summary,
.post-content blockquote,
.code-title,
.post-content table,
.post-content th,
.post-content td,
.post-cover {
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

a, .sidebar__nav-item, .social-link, .term-tag, .tag-chip {
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

/* Tablet: hide right column */
@media (max-width: 1280px) {
  .site-wrapper,
  .site-wrapper:has(.toc-sidebar),
  .site-wrapper:has(.right-panel) {
    grid-template-columns: 260px 1fr;
  }

  .toc-sidebar, .right-panel { display: none; }
  .main-content { padding: 1.5rem 1.5rem; }
}

/* Mobile: sidebar becomes slide-out drawer */
@media (max-width: 768px) {
  .site-wrapper,
  .site-wrapper:has(.toc-sidebar),
  .site-wrapper:has(.right-panel) {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .mobile-header { display: flex; grid-row: 1; }

  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    width: 260px;
    height: 100vh;
    transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 300;
  }

  .sidebar.open { left: 0; }
  .main-content { grid-row: 2; padding: 1.25rem 1rem; }
  .toc-sidebar, .right-panel { display: none; }
  .post-title { font-size: 1.15rem; }
  .post-header__body { padding: var(--sp-md); }
  .post-header__titlebar { padding: 0 12px; height: 32px; }
  .article-exit { padding: var(--sp-md); margin-top: var(--sp-xl); }
  .article-exit__nav-links { flex-direction: column; }
  .exit-block { margin: var(--sp-xl) calc(-1 * var(--sp-md)) calc(-1 * var(--sp-md)); padding: 20px var(--sp-md) var(--sp-md); }
  .post-mini-header { display: none; }
  .search-modal { width: 95%; }
  .search-overlay { padding-top: 5vh; }

  .term-card__title { font-size: 0.88rem; }
  .term-card__body { padding: 12px 12px 10px; }
  .term-card__titlebar { height: 32px; padding: 0 12px; }

  /* Content typography mobile adjustments */
  .post-content h1 { font-size: 1.2rem; }
  .post-content h2 { font-size: 1.05rem; }
  .post-content h3 { font-size: 0.95rem; }
  .post-content table { font-size: 0.75rem; }
  .post-content th, .post-content td { padding: 0.35rem 0.5rem; }
  .post-content pre { padding: 0.75rem; font-size: 0.78rem; }
  .post-content blockquote { padding: 0.5rem 0.75rem; }
  .post-cover { margin: 0.75rem 0; }

  .footer__terminal {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .footer__status {
    flex-direction: column;
    gap: 0.35rem;
    text-align: center;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .main-content { padding: 1rem 0.75rem; }
  .post-content ul, .post-content ol { padding-left: 1.25rem; }
  .post-content img { margin: 1rem auto; }
}

/* ==========================================================================
   Focus-Visible States — Keyboard Accessibility
   ========================================================================== */

*:focus { outline: none; }

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Tighter outlines for inline elements */
a:focus-visible,
.term-tag:focus-visible,
.terminal-tags a:focus-visible {
  outline-offset: 1px;
}

/* Sidebar nav items — accent background instead of outline */
.sidebar__nav-item:focus-visible {
  outline: none;
  background: var(--accent-light);
  border-color: var(--accent);
}

/* Buttons — glow ring instead of outline */
.theme-toggle:focus-visible,
.sidebar__search:focus-visible,
.social-link:focus-visible,
.copy-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--accent);
}

/* Search input — accent border */
.search-input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Card focus — glow border like hover */
.term-card:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-sm);
}

/* Pagination links */
.pagination a:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-light);
}

/* Skip to content (screen readers) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 9999;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--background);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ==========================================================================
   Prefers Reduced Motion — Disable animations
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Print Styles — Clean output for printing
   ========================================================================== */

@media print {
  body {
    background: white !important;
    color: black !important;
    font-size: 12pt;
  }

  .sidebar,
  .mobile-header,
  .toc-sidebar,
  .right-panel,
  .sidebar-overlay,
  .search-overlay,
  .footer,
  .copy-button,
  .copy-button--float,
  .code-title,
  .pagination,
  .posts-pagination,
  .exit-block,
  .post-mini-header,
  .reading-progress,
  .post-header__dots,
  .terminal-tags,
  .term-card__dots,
  .skip-link {
    display: none !important;
  }

  .site-wrapper {
    display: block !important;
    grid-template-columns: 1fr !important;
  }

  .main-content {
    padding: 0 !important;
    max-width: 100% !important;
  }

  a { color: black !important; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
  a[href^="#"]::after,
  a[href^="javascript"]::after { content: ""; }

  .post-content pre {
    white-space: pre-wrap;
    word-break: break-all;
    border: 1px solid #ccc;
    padding: 0.5rem;
  }

  .post-content img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    color: black !important;
  }

  .post-content blockquote {
    border-left: 3px solid #999;
    padding-left: 1rem;
    color: #333;
  }

  .term-card {
    page-break-inside: avoid;
    border: 1px solid #ccc;
  }
}

/* ==========================================================================
   Dark Mode Image Handling — Reduce brightness for dark themes
   ========================================================================== */

[data-theme="dark"] .post-content img:not([src*=".svg"]) {
  filter: brightness(0.92);
}
[data-theme="dark"] .post-content img:not([src*=".svg"]):hover {
  filter: brightness(1);
}
[data-theme="cyberpunk"] .post-content img:not([src*=".svg"]) {
  filter: brightness(0.88) saturate(1.1);
}
[data-theme="cyberpunk"] .post-content img:not([src*=".svg"]):hover {
  filter: brightness(1) saturate(1);
}