@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/jetbrainsmono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --primary: #5a67d8;
  /* Accent for TEXT (links, badges, focus rings). Lighter in dark mode for
     AA contrast; backgrounds keep using --primary. */
  --primary-text: #4c51bf; /* ≥4.5:1 on white and on the pale badge tints */
  --secondary: #764ba2;
  --accent: #f093fb;
  --success: #48bb78;
  --navbar-bg: rgba(255, 255, 255, 0.8);
  --hero-gradient: linear-gradient(
    135deg,
    rgba(90, 103, 216, 0.08) 0%,
    rgba(118, 75, 162, 0.05) 50%,
    rgba(240, 147, 251, 0.03) 100%
  );
  --bg-primary: #ffffff;
  --bg-secondary: #f7f8fc;
  --bg-tertiary: #edf2f7;
  --bg-card: #ffffff;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.15);
  --font-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  /* Alias kept for markup that used the old inline critical CSS name. */
  --font-sans: var(--font-primary);
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
  --container-width: 1200px;
  --section-padding: 80px;
  --nav-height: 72px;
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --primary-text: #8b9cf7;
  --navbar-bg: rgba(15, 17, 23, 0.85);
  --hero-gradient: linear-gradient(
    135deg,
    rgba(90, 103, 216, 0.15) 0%,
    rgba(118, 75, 162, 0.1) 50%,
    rgba(240, 147, 251, 0.05) 100%
  );
  --bg-primary: #0f1117;
  --bg-secondary: #1a1d2e;
  --bg-tertiary: #252a3a;
  --bg-card: #1e2235;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --text-muted: #94a3b8;
  --border-color: #2d3748;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* No-JS fallback: follow the OS preference unless light is forced.
   Must mirror the full [data-theme="dark"] set above. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary-text: #8b9cf7;
    --navbar-bg: rgba(15, 17, 23, 0.85);
    --hero-gradient: linear-gradient(
      135deg,
      rgba(90, 103, 216, 0.15) 0%,
      rgba(118, 75, 162, 0.1) 50%,
      rgba(240, 147, 251, 0.05) 100%
    );
    --bg-primary: #0f1117;
    --bg-secondary: #1a1d2e;
    --bg-tertiary: #252a3a;
    --bg-card: #1e2235;
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #94a3b8;
    --border-color: #2d3748;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.6);
  }
  :root:not([data-theme="light"]) .theme-toggle .sun-icon {
    display: none;
  }
  :root:not([data-theme="light"]) .theme-toggle .moon-icon {
    display: block;
  }
}
@view-transition {
  navigation: auto;
}
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  padding-top: var(--nav-height);
  overflow-x: hidden;
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
}
a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition-fast);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul,
ol {
  list-style: none;
}
button {
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: none;
}
button:not(:focus-visible) {
  outline: none;
}
input:not(:focus-visible),
textarea:not(:focus-visible) {
  outline: none;
}
input,
textarea {
  font-family: inherit;
}
pre,
code {
  -moz-tab-size: 4;
  tab-size: 4;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
/* Kept ahead of the base .hero rule on purpose: only padding-bottom takes
   effect here (the later base rule re-sets min-height). */
@media (max-width: 768px) {
  .hero-particles .particle:nth-child(n + 8) {
    display: none !important;
  }
  .code-window {
    display: none !important;
  }
  .hero {
    min-height: auto;
    padding-bottom: 40px;
  }
}
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-full);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition-normal);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.btn:hover::after {
  opacity: 1;
}
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  box-shadow: 0 4px 15px rgba(90, 103, 216, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(90, 103, 216, 0.5);
}
.btn-outline {
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  background: transparent;
}
.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary-text);
  transform: translateY(-2px);
}
.btn-lg {
  padding: 16px 36px;
  font-size: 1.05rem;
}
.btn-sm {
  padding: 8px 20px;
  font-size: 0.85rem;
}
/* The blur lives on ::before: backdrop-filter on .navbar itself would make it
   the containing block for position:fixed descendants (the mobile menu). */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Explicit resets so no other stylesheet can put the blur back here. */
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--border-color);
  z-index: 1000;
  transition: all var(--transition-normal);
}
.navbar::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--navbar-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  transition: background-color var(--transition-normal);
}
.navbar.scrolled {
  box-shadow: var(--shadow-md);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  position: relative;
  z-index: 1011;
}
.logo-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-link {
  padding: 8px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  position: relative;
}
.nav-link:hover,
.nav-link.active {
  color: var(--primary-text);
  background: rgba(90, 103, 216, 0.08);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 1011;
}
.search-toggle,
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.search-toggle:hover,
.theme-toggle:hover {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.theme-toggle .moon-icon {
  display: none;
}
[data-theme="dark"] .theme-toggle .sun-icon {
  display: none;
}
[data-theme="dark"] .theme-toggle .moon-icon {
  display: block;
}
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1011;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-primary);
  transition: all var(--transition-normal);
  margin: 0 auto;
}
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
.search-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  z-index: 2000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: min(120px, 15vh);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-normal);
}
.search-modal.active {
  opacity: 1;
  visibility: visible;
}
.search-modal-content {
  width: 90%;
  max-width: 640px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translateY(-20px) scale(0.95);
  transition: transform var(--transition-normal);
}
.search-modal.active .search-modal-content {
  transform: translateY(0) scale(1);
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
}
.search-input-wrapper svg {
  flex-shrink: 0;
  color: var(--text-muted);
}
.search-input-wrapper input {
  flex: 1;
  border: none;
  background: none;
  font-size: 1.1rem;
  color: var(--text-primary);
}
.search-input-wrapper input::placeholder {
  color: var(--text-muted);
}
.search-input-wrapper kbd {
  padding: 4px 8px;
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
}
.search-results {
  padding: 20px 24px;
  max-height: 400px;
  overflow-y: auto;
}
.search-hint p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.search-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Works for both <span> and <button type="button"> markup. */
.search-tag {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
  padding: 6px 14px;
  border: 0;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  font: inherit;
  font-size: 0.85rem;
  line-height: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  text-transform: none;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.search-tag:hover {
  background: var(--primary);
  color: white;
}
.search-tag:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 2px;
}
.search-result-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.search-result-item:hover {
  background: var(--bg-tertiary);
}
.search-result-item .result-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-result-item .result-title {
  font-weight: 600;
  font-size: 0.95rem;
}
.search-result-item .result-category {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.hero {
  position: relative;
  min-height: min(90vh, 720px);
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-gradient {
  position: absolute;
  inset: 0;
  background: var(--hero-gradient);
}
.hero-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.15;
  animation: float-particle linear infinite;
}
@keyframes float-particle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.15;
  }
  90% {
    opacity: 0.15;
  }
  100% {
    transform: translateY(-100px) rotate(720deg);
    opacity: 0;
  }
}
.hero .container {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 60px;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: rgba(90, 103, 216, 0.1);
  border: 1px solid rgba(90, 103, 216, 0.2);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-text);
  margin-bottom: 24px;
}
.pulse-dot {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.5);
  }
}
.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* LCP element: never animate or hide it. */
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.typed-wrapper {
  display: inline-flex;
  align-items: baseline;
}
@media (max-width: 768px) {
  .hero-title {
    min-height: 3.5em;
  }
}
.typed-cursor {
  color: var(--primary-text);
  animation: blink 1s infinite;
  font-weight: 100;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.hero-subtitle {
  font-size: 1.15rem;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 540px;
  line-height: 1.8;
}
.hero-cta {
  display: flex;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  align-items: center;
  gap: 32px;
}
.stat {
  text-align: center;
}
.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-plus {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--primary-text);
}
.stat-label {
  display: block;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 4px;
}
.stat-divider {
  width: 1px;
  height: 40px;
  background: var(--border-color);
}
.hero-visual {
  perspective: 1000px;
}
.code-window {
  background: #1e1e2e;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: rotateY(-5deg) rotateX(2deg);
  transition: transform var(--transition-slow);
  animation: float-window 6s ease-in-out infinite;
}
.code-window:hover {
  transform: rotateY(0deg) rotateX(0deg);
}
@keyframes float-window {
  0%,
  100% {
    transform: rotateY(-5deg) rotateX(2deg) translateY(0);
  }
  50% {
    transform: rotateY(-5deg) rotateX(2deg) translateY(-10px);
  }
}
.code-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #181825;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.code-dots {
  display: flex;
  gap: 8px;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.dot.red {
  background: #ff5f57;
}
.dot.yellow {
  background: #febc2e;
}
.dot.green {
  background: #28c840;
}
.code-title {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #a6adc8;
}
.code-body {
  padding: 24px;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.8;
  color: #cdd6f4;
  overflow-x: auto;
}
.code-body code {
  font-family: inherit;
}
.code-keyword {
  color: #cba6f7;
}
.code-string {
  color: #a6e3a1;
}
.code-function {
  color: #89b4fa;
}
.code-comment {
  /* #9399b2 on #1e1e2e is ~5.9:1 (AA); the old #6c7086 was ~3.4:1. */
  color: #9399b2;
  font-style: italic;
}
/* Code surfaces (#1e1e2e) are dark in both themes, so these apply to light
   and dark alike (Catppuccin Mocha, like the tokens above). */
.code-type {
  color: #f9e2af;
}
.code-number {
  color: #fab387;
}
.hero-wave {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  z-index: 2;
}
.hero-wave svg {
  display: block;
  width: 100%;
  height: 80px;
}
.section {
  padding: var(--section-padding) 0;
  position: relative;
  z-index: 1;
}
.section-header {
  text-align: center;
  margin-bottom: 48px;
}
.section-badge {
  display: inline-block;
  padding: 6px 18px;
  background: rgba(90, 103, 216, 0.1);
  color: var(--primary-text);
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}
.section-badge:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(90, 103, 216, 0.3);
}
.section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.section-subtitle {
  font-size: 1.1rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.section-cta {
  text-align: center;
  margin-top: 48px;
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.featured-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-color);
  display: flex;
  flex-direction: row;
}
.featured-card .card-image {
  flex-shrink: 0;
  width: 180px;
}
.featured-card .card-image-placeholder {
  aspect-ratio: auto;
  height: 100%;
  min-height: 180px;
}
.featured-card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 18px;
  min-height: 0;
  min-width: 0;
}
.featured-card .card-meta {
  margin-bottom: 8px;
  font-size: 0.8rem;
}
.featured-card .card-title {
  font-size: 1.05rem;
  margin-bottom: 6px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.featured-card .card-excerpt {
  font-size: 0.85rem;
  margin-bottom: 10px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  line-height: 1.5;
}
.featured-card .card-tags {
  margin-top: auto;
}
.featured-card .tag {
  font-size: 0.75rem;
  padding: 3px 10px;
}
.featured-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(90, 103, 216, 0.3);
}
.card-image {
  position: relative;
  overflow: hidden;
}
.card-image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-slow);
  overflow: hidden;
}
.featured-card:hover .card-image-placeholder {
  transform: scale(1.05);
}
.card-category {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 6px 14px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}
.card-content {
  padding: 24px;
  overflow: hidden;
}
.card-meta {
  display: flex;
  align-items: center;
  gap: 6px 8px;
  margin-bottom: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  overflow: hidden;
}
.author-name {
  font-weight: 600;
  color: var(--text-secondary);
}
.meta-dot {
  color: var(--text-muted);
}
.card-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-title a {
  color: var(--text-primary);
  transition: color var(--transition-fast);
}
.card-title a:hover {
  color: var(--primary-text);
}
.card-excerpt {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  overflow: hidden;
  max-height: 64px;
}
.tag {
  padding: 4px 12px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 500;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.tag:hover {
  background: var(--primary);
  color: white;
}
.card-category-badge {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(90, 103, 216, 0.1);
  color: var(--primary-text);
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
}
.categories-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.category-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.category-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform var(--transition-normal);
}
.category-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent, var(--primary));
}
.category-card:hover::before {
  transform: scaleX(1);
}
.category-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 103, 216, 0.08);
  border-radius: var(--radius-md);
  color: var(--accent, var(--primary));
  transition:
    background var(--transition-normal),
    color var(--transition-normal),
    transform var(--transition-normal);
}
.category-card:hover .category-icon {
  background: var(--accent, var(--primary));
  color: white;
  transform: scale(1.1);
}
.category-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.category-card p {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.category-count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary-text);
}
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.post-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.post-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.post-card .card-image {
  flex-shrink: 0;
}
.post-card .card-image-placeholder {
  aspect-ratio: 16/10;
}
.post-card .card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.post-card .card-title {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.post-card .card-meta {
  margin-top: auto;
  margin-bottom: 0;
}
.ai-section {
  background: var(--bg-secondary);
}
.ai-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.ai-text .section-title {
  text-align: left;
  font-size: 2.2rem;
}
.ai-text p {
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.8;
}
.feature-list {
  margin-bottom: 32px;
}
.feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  font-weight: 500;
  color: var(--text-secondary);
}
.feature-list li svg {
  flex-shrink: 0;
}
.ai-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.ai-card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 340px;
}
.ai-card {
  width: 100%;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  position: relative;
}
.ai-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(90, 103, 216, 0.3);
}
.ai-card-1 {
  animation: float-card 4s ease-in-out infinite;
}
.ai-card-2 {
  animation: float-card 4s ease-in-out infinite 1s;
}
.ai-card-3 {
  animation: float-card 4s ease-in-out infinite 2s;
}
@keyframes float-card {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.ai-card-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-md);
  color: white;
  margin-bottom: 16px;
}
.ai-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.ai-card p {
  font-size: 0.9rem;
  color: var(--text-muted);
}
.newsletter-card {
  display: flex;
  align-items: center;
  gap: 60px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-xl);
  padding: 60px;
  color: white;
  position: relative;
  overflow: hidden;
}
.newsletter-card::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  top: -200px;
  right: -100px;
}
.newsletter-content {
  flex: 1;
  position: relative;
  z-index: 1;
}
.newsletter-content h2 {
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 12px;
}
.newsletter-content p {
  opacity: 0.9;
  margin-bottom: 24px;
  line-height: 1.7;
}
.newsletter-form .input-group {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.1);
  color: white;
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
}
.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
.newsletter-form input:focus {
  border-color: white;
  background: rgba(255, 255, 255, 0.15);
}
.newsletter-form .btn {
  background: white;
  color: var(--primary);
  font-weight: 700;
  box-shadow: none;
}
.newsletter-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
/* Full opacity: white on the lightest gradient stop (#5a67d8) is ~4.8:1;
   0.9 would drop to ~4.2:1. */
.form-note {
  font-size: 0.82rem;
  opacity: 1;
}
/* Default ring (var(--primary)) disappears on the brand gradient. */
.newsletter-card :focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.form-note a {
  text-decoration: underline;
}
.newsletter-visual {
  position: relative;
  z-index: 1;
  opacity: 0.6;
}
.cookie-settings-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}
.cookie-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: var(--text-primary);
  cursor: pointer;
}
.cookie-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--primary);
  cursor: pointer;
}
.cookie-option span {
  color: var(--text-muted);
  font-size: 0.85rem;
}
.footer {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
  padding: 80px 0 30px;
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(
      0,
      1fr
    );
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p {
  color: var(--text-secondary);
  margin: 16px 0 24px;
  line-height: 1.7;
  max-width: 320px;
}
.social-links {
  display: flex;
  gap: 12px;
}
.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-tertiary);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}
.social-link:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}
.footer-links h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 20px;
}
.footer-links li {
  margin-bottom: 12px;
}
.footer-links a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  transition: color var(--transition-fast);
}
.footer-links a:hover {
  color: var(--primary-text);
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-color);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
  z-index: 3000;
  padding: 20px 0;
  /* Hidden = off-screen AND out of the tab order. visibility flips only after
     the slide-out finishes: "visibility 0s var(--transition-normal)" reads as
     duration 0s + delay 0.3s (the var supplies delay and easing, so don't add
     another easing keyword or the whole declaration becomes invalid). */
  transform: translateY(100%);
  visibility: hidden;
  transition:
    transform var(--transition-normal),
    visibility 0s var(--transition-normal);
}
.cookie-banner.show {
  transform: translateY(0);
  visibility: visible;
  transition:
    transform var(--transition-normal),
    visibility 0s 0s;
}
.cookie-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cookie-content p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.cookie-content a {
  color: var(--primary-text);
  text-decoration: underline;
}
.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
}
/* Entrance animations only hide content once the <head> script has added
   .js to <html>; without JS everything is visible. :where() keeps the
   original single-class specificity so the cascade is unchanged. */
:where(.js) .animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}
:where(.js) .animate-fade-in {
  opacity: 0;
  animation: fade-in 0.8s ease forwards;
}
:where(.js) .animate-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.8s ease forwards;
}
:where(.js) .animate-fade-in-left {
  opacity: 0;
  transform: translateX(40px);
  animation: fade-in-left 0.8s ease forwards;
}
.delay-1 {
  animation-delay: 0.2s;
}
.delay-2 {
  animation-delay: 0.4s;
}
.delay-3 {
  animation-delay: 0.6s;
}
@keyframes fade-in {
  to {
    opacity: 1;
  }
}
@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fade-in-left {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.post-hero {
  padding: calc(var(--nav-height) + 60px) 0 40px;
  background: var(--bg-secondary);
}
.post-hero .container {
  max-width: 800px;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 24px;
  flex-wrap: wrap;
  overflow: hidden;
}
.breadcrumb a {
  color: var(--text-muted);
}
.breadcrumb a:hover {
  color: var(--primary-text);
}
.breadcrumb-sep {
  font-size: 0.7rem;
}
.post-hero .card-category-badge {
  margin-bottom: 16px;
}
.post-hero h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -0.02em;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.post-hero .card-excerpt {
  font-size: 1.1rem;
  margin-bottom: 24px;
}
.post-author-info {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--border-color);
}
.post-author-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.post-author-details h4 {
  font-weight: 600;
  font-size: 0.95rem;
}
.post-author-details span {
  font-size: 0.85rem;
  color: var(--text-muted);
}
.post-content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 48px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 48px 24px;
}
.post-content {
  max-width: 100%;
  overflow: hidden;
  min-width: 0;
}
.post-content h2 {
  font-size: 1.7rem;
  font-weight: 700;
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
}
.post-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  margin: 32px 0 12px;
}
.post-content p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.85;
  font-size: 1.05rem;
}
.post-content ul,
.post-content ol {
  margin-bottom: 20px;
  padding-left: 24px;
}
.post-content ul {
  list-style: disc;
}
.post-content ol {
  list-style: decimal;
}
.post-content li {
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.7;
}
.post-content a {
  color: var(--primary-text);
  text-decoration: underline;
}
.post-content img {
  border-radius: var(--radius-md);
  margin: 24px 0;
}
.post-content blockquote {
  border-left: 4px solid var(--primary);
  padding: 16px 24px;
  margin: 24px 0;
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary);
  font-style: italic;
}
.code-block {
  position: relative;
  margin: 24px 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #181825;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #a6adc8;
}
.copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  color: #a6adc8;
  font-size: 0.78rem;
  font-family: var(--font-mono);
  transition: all var(--transition-fast);
}
.copy-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.code-block pre {
  padding: 20px;
  background: #1e1e2e;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: #cdd6f4;
  max-width: 100%;
}
.code-block pre code {
  white-space: pre;
  display: block;
}
.post-toc {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  max-height: calc(100vh - var(--nav-height) - 48px);
  overflow-y: auto;
}
.post-toc h4 {
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.toc-list li {
  margin-bottom: 8px;
}
.toc-list a {
  display: block;
  padding: 6px 12px;
  font-size: 0.88rem;
  color: var(--text-secondary);
  border-left: 2px solid transparent;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  transition: all var(--transition-fast);
}
.toc-list a:hover,
.toc-list a.active {
  color: var(--primary-text);
  border-left-color: var(--primary);
  background: rgba(90, 103, 216, 0.05);
}
.share-section {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  margin: 40px 0;
}
.share-section span {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
}
.share-btn.twitter {
  background: #1da1f2;
  color: white;
}
.share-btn.facebook {
  background: #1877f2;
  color: white;
}
.share-btn.linkedin {
  background: #0a66c2;
  color: white;
}
.share-btn.copy-link {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}
.share-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.author-box {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin: 40px 0;
}
.author-box img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  flex-shrink: 0;
}
.author-box h4 {
  font-size: 1.1rem;
  margin-bottom: 4px;
}
.author-box .author-title {
  font-size: 0.85rem;
  color: var(--primary-text);
  margin-bottom: 10px;
}
.author-box p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.comments-section {
  margin: 40px 0;
}
.comments-section h3 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 24px;
}
.comment-form {
  margin-bottom: 40px;
}
.comment-form textarea {
  width: 100%;
  min-height: 120px;
  padding: 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  resize: vertical;
  transition: border-color var(--transition-fast);
  margin-bottom: 12px;
}
.comment-form textarea:focus {
  border-color: var(--primary);
}
.comment-form input {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
}
.comment-form input:focus {
  border-color: var(--primary);
}
.comment {
  display: flex;
  gap: 16px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-color);
}
.comment:last-child {
  border-bottom: none;
}
.comment-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.comment-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.comment-author {
  font-weight: 600;
  font-size: 0.95rem;
}
.comment-date {
  font-size: 0.82rem;
  color: var(--text-muted);
}
.comment-body {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.comment-actions {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}
.comment-action {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: color var(--transition-fast);
}
.comment-action:hover {
  color: var(--primary-text);
}
.related-section {
  padding: 60px 0;
  background: var(--bg-secondary);
}
.related-section .section-title {
  font-size: 1.6rem;
  margin-bottom: 32px;
  text-align: left;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.page-hero {
  padding: calc(var(--nav-height) + 60px) 0 60px;
  background: var(--bg-secondary);
  text-align: center;
}
.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 16px;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.page-hero p {
  font-size: 1.15rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin: 0 auto;
}
.page-content {
  padding: 60px 0;
}
.page-content .container {
  max-width: 800px;
}
.page-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 40px 0 16px;
}
.page-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 32px 0 12px;
}
.page-content p {
  color: var(--text-secondary);
  margin-bottom: 16px;
  line-height: 1.8;
}
.page-content ul,
.page-content ol {
  margin-bottom: 16px;
  padding-left: 24px;
}
.page-content ul {
  list-style: disc;
}
.page-content ol {
  list-style: decimal;
}
.page-content li {
  color: var(--text-secondary);
  margin-bottom: 8px;
  line-height: 1.7;
}
.page-content a {
  color: var(--primary-text);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  max-width: 1000px;
  margin: 0 auto;
  align-items: start;
}
.contact-info-card {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  align-items: center;
}
.contact-info-card .icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(90, 103, 216, 0.1);
  border-radius: var(--radius-sm);
  color: var(--primary-text);
  flex-shrink: 0;
}
.contact-info-card h4 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.contact-info-card p {
  font-size: 0.88rem;
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 14px 18px;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast);
  margin-bottom: 16px;
  box-sizing: border-box;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary);
}
.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin: 48px 0;
}
.about-grid.reverse {
  direction: rtl;
}
.about-grid.reverse > * {
  direction: ltr;
}
.about-image {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-xl);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 40px;
  max-width: 100%;
}
.landing-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
}
.feature-card {
  padding: 36px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  text-align: center;
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(90, 103, 216, 0.3);
}
.feature-card .icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  border-radius: var(--radius-md);
  color: white;
}
.feature-card h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.feature-card p {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.7;
}
.faq-list {
  max-width: 700px;
  margin: 48px auto 0;
}
.faq-item {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}
.faq-item:hover {
  border-color: rgba(90, 103, 216, 0.3);
}
.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition-fast);
}
.faq-question:hover {
  background: var(--bg-secondary);
}
.faq-question svg {
  flex-shrink: 0;
  transition: transform var(--transition-normal);
  color: var(--text-muted);
}
.faq-item.active .faq-question svg {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--transition-normal),
    padding var(--transition-normal);
}
.faq-item.active .faq-answer {
  max-height: 500px;
  padding: 0 24px 20px;
}
.faq-answer p {
  color: var(--text-secondary);
  line-height: 1.7;
}
@media (max-width: 1024px) {
  .hero .container {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
  .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
  }
  .hero-cta {
    justify-content: center;
  }
  .hero-stats {
    justify-content: center;
  }
  .hero-visual {
    display: none;
  }
  .featured-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .featured-card {
    flex-direction: column;
  }
  .featured-card .card-image {
    width: 100%;
  }
  .featured-card .card-image-placeholder {
    aspect-ratio: 16/9;
    min-height: auto;
  }
  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .posts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ai-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ai-text {
    text-align: center;
  }
  .ai-text .section-title {
    text-align: center;
  }
  .ai-visual {
    display: flex;
  }
  .ai-card-stack {
    max-width: 400px;
    margin: 0 auto;
  }
  .newsletter-card {
    gap: 32px;
    padding: 48px 40px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .post-content-wrapper {
    grid-template-columns: 1fr;
  }
  .post-toc {
    position: static;
    margin-bottom: 24px;
  }
  .about-grid {
    grid-template-columns: 1fr;
  }
  .about-grid.reverse {
    direction: ltr;
  }
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .landing-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  :root {
    --section-padding: 60px;
  }
  .hamburger {
    display: flex;
  }
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 320px;
    height: 100vh;
    background: var(--bg-primary);
    flex-direction: column;
    padding: calc(var(--nav-height) + 20px) 24px 24px;
    box-shadow: var(--shadow-xl);
    z-index: 1010;
    gap: 4px;
    align-items: stretch;
    overflow-y: auto;
    /* Closed = off-canvas AND not focusable; visibility flips after the
       slide-out finishes (same delay technique as .cookie-banner). */
    visibility: hidden;
    transition:
      right var(--transition-normal),
      visibility 0s var(--transition-normal);
  }
  .nav-links.active {
    right: 0;
    visibility: visible;
    transition:
      right var(--transition-normal),
      visibility 0s 0s;
  }
  /* Backdrop covers the viewport left of the panel (the menu is no longer
     clipped to the navbar). It is a negative-z child, so it must not overlap
     the panel or it would paint over the panel's own background. Clicks on it
     target #nav-links, which main.js treats as "close". */
  .nav-links.active::before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: min(80%, 320px);
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
  .nav-link {
    padding: 14px 16px;
    font-size: 1rem;
    border-radius: var(--radius-md);
  }
  .featured-grid {
    grid-template-columns: 1fr;
  }
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .category-card {
    padding: 20px 16px;
  }
  .posts-grid {
    grid-template-columns: 1fr;
  }
  .newsletter-card {
    flex-direction: column;
    padding: 40px 28px;
    text-align: center;
  }
  .newsletter-visual {
    display: none;
  }
  .newsletter-form .input-group {
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
  .cookie-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  .cookie-actions {
    width: 100%;
    justify-content: center;
  }
  .post-content-wrapper {
    padding: 32px 16px;
  }
  .author-box {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  .share-section {
    flex-wrap: wrap;
  }
  .landing-features {
    grid-template-columns: 1fr;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .hero-title {
    font-size: 2rem;
  }
  .hero-stats {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .stat-number {
    font-size: 1.5rem;
  }
  .stat-divider {
    display: none;
  }
  .stat {
    min-width: 80px;
  }
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-cta .btn {
    width: 100%;
    justify-content: center;
  }
  .categories-grid {
    grid-template-columns: 1fr;
  }
  .category-card {
    padding: 20px 14px;
  }
  .search-modal-content {
    width: 95%;
  }
  .newsletter-card {
    padding: 28px 20px;
  }
  .newsletter-content h2 {
    font-size: 1.5rem;
  }
  .section-title {
    font-size: 1.5rem;
  }
  .footer-grid {
    gap: 24px;
  }
  .cookie-actions {
    flex-direction: column;
    width: 100%;
  }
  .cookie-actions .btn {
    width: 100%;
    justify-content: center;
  }
}
.categories-grid-page {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stats-grid-about {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1024px) {
  .stats-grid-about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 768px) {
  .categories-grid-page {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .stats-grid-about {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .categories-grid-page {
    grid-template-columns: 1fr;
  }
  .stats-grid-about {
    grid-template-columns: 1fr;
  }
}
@media print {
  .navbar,
  .cookie-banner,
  .search-modal,
  .footer,
  .share-section,
  .comments-section,
  .related-section,
  .newsletter-section,
  .hero-particles,
  .hero-bg,
  .post-toc {
    display: none !important;
  }
  body {
    background: white;
    color: black;
    padding-top: 0;
    font-size: 12pt;
  }
  .post-content-wrapper {
    grid-template-columns: 1fr;
  }
  a {
    color: black;
    text-decoration: underline;
  }
  .post-content a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }
  .code-block {
    page-break-inside: avoid;
    border: 1px solid #ccc;
  }
  pre {
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  img {
    max-width: 100% !important;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  * {
    color: black !important;
    background: white !important;
    box-shadow: none !important;
  }
}
.post-content,
.related-section,
.comments-section,
.newsletter-section,
footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    /* Also beats the inline transition-delay main.js sets on
       .animate-on-scroll. */
    transition-delay: 0s !important;
  }
  html {
    scroll-behavior: auto;
  }
  .animate-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 2px;
}
/* Fully self-styled (the inline style attribute is gone from the markup). */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  padding: 12px 24px;
  background: #5a67d8;
  color: #fff;
  z-index: 10000;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}

/* === MOBILE PHONE OPTIMIZATIONS === */

/* Touch-friendly defaults */
a,
button,
.tag,
.search-tag,
.nav-link,
.btn {
  -webkit-tap-highlight-color: transparent;
}
button,
.btn,
.tag,
.search-tag,
.nav-link,
.share-btn,
.social-link,
.copy-btn,
.comment-action,
.faq-question {
  min-height: 48px;
  min-width: 48px;
}
.tag,
.search-tag,
.card-category-badge {
  min-height: auto;
  min-width: auto;
}

/* iOS momentum scrolling for scroll containers */
.search-results,
.nav-links,
.post-toc,
.code-block pre {
  -webkit-overflow-scrolling: touch;
}

/* Phone-specific refinements (768px) */
@media (max-width: 768px) {
  /* Reduce nav height on mobile for more content space */
  :root {
    --nav-height: 60px;
  }

  /* Reduce post hero double-padding issue on mobile */
  .post-hero {
    padding: calc(var(--nav-height) + 32px) 0 28px;
  }
  .page-hero {
    padding: calc(var(--nav-height) + 32px) 0 32px;
  }

  /* Smaller code blocks on mobile */
  .code-block pre {
    font-size: 0.8rem;
    padding: 14px;
    line-height: 1.6;
  }
  .code-block-header {
    padding: 10px 14px;
    font-size: 0.75rem;
  }
  .copy-btn {
    padding: 4px 8px;
    font-size: 0.75rem;
    min-height: 32px;
    min-width: auto;
  }

  /* Post content adjustments */
  .post-content p {
    font-size: 0.95rem;
    line-height: 1.75;
  }
  .post-content h2 {
    font-size: 1.4rem;
    margin: 32px 0 12px;
  }
  .post-content h3 {
    font-size: 1.15rem;
    margin: 24px 0 10px;
  }
  .post-hero .card-excerpt {
    font-size: 0.95rem;
  }

  /* Breadcrumb - allow horizontal scroll on mobile */
  .breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .breadcrumb::-webkit-scrollbar {
    display: none;
  }
  .breadcrumb a,
  .breadcrumb span {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Search modal - full width on mobile */
  .search-modal {
    padding-top: 0;
    align-items: flex-start;
  }
  .search-modal-content {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    min-height: 100vh;
  }
  .search-results {
    max-height: calc(100vh - 80px);
  }
  .search-input-wrapper {
    padding: 16px;
  }
  .search-input-wrapper kbd {
    display: none;
  }
  .search-input-wrapper input {
    font-size: 1rem;
  }

  /* All inputs 16px to prevent iOS Safari zoom */
  input,
  textarea,
  select {
    font-size: 16px !important;
  }
  .contact-form input,
  .contact-form textarea {
    padding: 14px 16px;
  }
  .comment-form textarea,
  .comment-form input {
    padding: 12px 14px;
  }

  /* Full-width buttons in cookie settings */
  .cookie-settings-panel .cookie-actions {
    flex-direction: column;
  }
  .cookie-settings-panel .cookie-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Newsletter form improvements */
  .newsletter-form input {
    font-size: 16px;
    min-width: 0;
  }
}

/* Small phone specific (480px and below) */
@media (max-width: 480px) {
  /* Even smaller code blocks */
  .code-block pre {
    font-size: 0.75rem;
    padding: 12px 10px;
  }

  /* Tighter container padding */
  .container {
    padding: 0 16px;
  }
  .post-content-wrapper {
    padding: 24px 12px;
  }

  /* Reduce section spacing */
  :root {
    --section-padding: 48px;
  }

  /* Comment section mobile */
  .comment {
    gap: 10px;
  }
  .comment-avatar {
    width: 36px;
    height: 36px;
  }

  /* Author box tighter */
  .author-box {
    padding: 24px 16px;
  }
  .author-box img {
    width: 64px;
    height: 64px;
  }

  /* Smaller featured card padding */
  .featured-card .card-content {
    padding: 14px;
  }
  .card-content {
    padding: 16px;
  }

  /* Reduce post hero spacing */
  .post-hero {
    padding: calc(var(--nav-height) + 20px) 0 20px;
  }
  .page-hero {
    padding: calc(var(--nav-height) + 20px) 0 24px;
  }
  .page-hero p {
    font-size: 0.95rem;
  }

  /* FAQ mobile */
  .faq-question {
    padding: 14px 16px;
    font-size: 0.9rem;
  }
  .faq-item.active .faq-answer {
    padding: 0 16px 16px;
  }

  /* Table of contents mobile */
  .post-toc {
    padding: 16px;
  }
  .toc-list a {
    padding: 4px 10px;
    font-size: 0.82rem;
  }

  /* Share section compact */
  .share-section {
    gap: 8px;
    padding: 16px 0;
  }
  .share-btn {
    width: 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
  }

  /* Related posts */
  .related-section {
    padding: 40px 0;
  }
  .related-section .section-title {
    font-size: 1.3rem;
  }
}

/* Card transitions: kept after .animate-on-scroll on purpose so cards that
   also animate on scroll keep these (it wins by source order). */
.featured-card,
.category-card,
.post-card,
.ai-card,
.feature-card {
  transition:
    transform var(--transition-normal),
    box-shadow var(--transition-normal),
    border-color var(--transition-normal);
}
@media (max-width: 768px) {
  .footer-links a {
    padding: 10px 4px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
@media (forced-colors: active) {
  .navbar,
  .cookie-banner,
  .btn,
  .card {
    border: 1px solid CanvasText;
    background: Canvas;
    color: CanvasText;
  }
  .btn-primary {
    forced-color-adjust: none;
  }
}
@media (prefers-reduced-transparency: reduce) {
  .navbar::before,
  .cookie-banner,
  .search-modal-content {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--bg-primary) !important;
  }
}
@media print {
  .navbar,
  .footer,
  .cookie-banner,
  .search-modal,
  .share-buttons,
  .comment-form,
  ins.adsbygoogle {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
  .post-content {
    max-width: 100%;
  }
  .code-block {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
.post-hero-image {
  grid-column: 1 / -1;
}

/* === Comments widget (rendered by js/comments.js) === */
#comments {
  position: relative;
  margin: 56px 0;
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#comments::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--primary),
    var(--secondary),
    var(--accent)
  );
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
#comments .comments-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
}
#comments .comments-title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
#comments .comments-title::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>")
    center/20px no-repeat;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z'/></svg>")
    center/20px no-repeat;
}
#comments .comments-count {
  margin-left: auto;
  padding: 5px 14px;
  background: rgba(90, 103, 216, 0.1);
  color: var(--primary-text);
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}
#comments .comments-count:empty {
  display: none;
}
#comments .comments-form {
  --cmt-gap: 14px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* dense: lets a bare email label back-fill row 1 next to the name label.
     No effect on the current label-less layout. */
  grid-auto-flow: row dense;
  gap: var(--cmt-gap);
  margin-bottom: 36px;
  padding: 24px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}
#comments .comments-form textarea {
  grid-column: 1 / -1;
  width: 100%;
  min-height: 130px;
  padding: 14px 16px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.65;
  resize: vertical;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}
#comments .comments-form textarea:focus {
  border-color: var(--primary);
  background: var(--bg-primary);
  box-shadow: 0 0 0 4px rgba(90, 103, 216, 0.12);
  outline: none;
}
#comments .comments-form input[type="text"],
#comments .comments-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.95rem;
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast);
}
#comments .comments-form input[type="text"]:focus,
#comments .comments-form input[type="email"]:focus {
  border-color: var(--primary);
  background: var(--bg-primary);
  box-shadow: 0 0 0 4px rgba(90, 103, 216, 0.12);
  outline: none;
}
#comments .comments-form input::placeholder,
#comments .comments-form textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.85;
}
/* Visible field labels. Works whether each label/control pair is wrapped in
   its own element or the labels sit directly in the form grid. */
#comments .comments-form .comments-label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text-secondary);
}
/* Wrapped pairs: the comment field spans both columns. */
#comments .comments-form > :has(> textarea) {
  grid-column: 1 / -1;
}
/* Bare labels as grid items (siblings of their control): stack each label
   over its control, name | email side by side, comment full width. The
   negative margin pulls the control up so the label sits 4px above it. */
#comments .comments-form > .comments-label:not(:has(input, textarea)) {
  align-self: end;
  margin-bottom: calc(4px - var(--cmt-gap));
}
#comments .comments-form > .comments-label[for="cmt-name"],
#comments .comments-form > #cmt-name {
  grid-column: 1;
}
#comments .comments-form > .comments-label[for="cmt-email"],
#comments .comments-form > #cmt-email {
  grid-column: 2;
}
#comments .comments-form > .comments-label[for="cmt-body"] {
  grid-column: 1 / -1;
}
#comments .cmt-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
#comments .comments-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
#comments .comments-actions .btn {
  padding: 12px 28px;
  font-size: 0.95rem;
}
#comments .comments-actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
#comments .comments-note {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
  min-width: 180px;
}
#comments .comments-status {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  font-weight: 500;
}
#comments .comments-status:not(:empty) {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* AA: ~5.9:1 (success) / ~6.4:1 (error) on the tinted form background. */
#comments .comments-status.success {
  background: rgba(72, 187, 120, 0.1);
  color: #276749;
  border: 1px solid rgba(72, 187, 120, 0.3);
}
#comments .comments-status.error {
  background: rgba(252, 129, 129, 0.12);
  color: #9b2c2c;
  border: 1px solid rgba(252, 129, 129, 0.35);
}
#comments .comments-status.success::before {
  content: "\2713";
  font-weight: 700;
  font-size: 1rem;
}
#comments .comments-status.error::before {
  content: "\26A0";
  font-weight: 700;
  font-size: 1rem;
}
[data-theme="dark"] #comments .comments-status.success {
  background: rgba(72, 187, 120, 0.15);
  color: #9ae6b4;
}
[data-theme="dark"] #comments .comments-status.error {
  background: rgba(252, 129, 129, 0.15);
  color: #feb2b2;
}
#comments .comments-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
#comments .comments-empty,
#comments .comments-loading,
#comments .comments-error {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.92rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
}
#comments .comments-loading {
  color: var(--primary-text);
  font-weight: 500;
}
#comments .comments-error {
  color: #c53030;
  border-color: rgba(252, 129, 129, 0.35);
  background: rgba(252, 129, 129, 0.06);
}
[data-theme="dark"] #comments .comments-error {
  color: #feb2b2;
}
#comments .comment {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px 18px;
  padding: 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
#comments .comment:hover {
  border-color: rgba(90, 103, 216, 0.3);
  box-shadow: var(--shadow-sm);
}
#comments .comment-head {
  display: contents;
}
#comments .comment-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: white;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  grid-row: span 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 2px solid var(--bg-card);
}
#comments .comment-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 0;
  align-self: center;
}
#comments .comment-name {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
#comments .comment-time {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-feature-settings: "tnum";
}
#comments .comment-time::before {
  content: "\B7";
  margin-right: 8px;
  color: var(--border-color);
}
#comments .comment-body {
  grid-column: 2;
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.7;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
[data-theme="dark"] #comments .comments-count {
  background: rgba(90, 103, 216, 0.18);
}
@media (max-width: 600px) {
  #comments {
    padding: 24px 18px;
    margin: 36px 0;
    border-radius: var(--radius-lg);
  }
  #comments .comments-title {
    font-size: 1.25rem;
  }
  #comments .comments-title::before {
    width: 28px;
    height: 28px;
  }
  #comments .comments-form {
    --cmt-gap: 12px;
    padding: 18px;
    grid-template-columns: 1fr;
  }
  #comments .comments-form > .comments-label[for],
  #comments .comments-form > #cmt-name,
  #comments .comments-form > #cmt-email {
    grid-column: 1 / -1;
  }
  #comments .comments-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #comments .comments-actions .btn {
    width: 100%;
    justify-content: center;
  }
  #comments .comments-note {
    order: 2;
    text-align: center;
  }
  #comments .comment {
    grid-template-columns: auto 1fr;
    gap: 10px 14px;
    padding: 16px;
  }
  #comments .comment-avatar {
    width: 40px;
    height: 40px;
    font-size: 0.84rem;
  }
  #comments .comment-body {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   Callout notices � legal-use warnings and honest status notes
   ========================================================================== */
.notice {
  margin: 28px 0;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-text);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.75;
}
.notice p {
  margin: 0;
}
.notice p + p {
  margin-top: 10px;
}
.notice strong {
  color: var(--text-primary);
}
.notice-warning {
  border-left-color: #b45309;
  background: rgba(180, 83, 9, 0.06);
}
[data-theme="dark"] .notice-warning {
  border-left-color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
}
.notice-info {
  border-left-color: var(--primary-text);
}
/* Inline links inside cards and notices must be distinguishable from body text
   (not by colour alone) - WCAG 1.4.1. */
.feature-card p a,
.notice a {
  color: var(--primary-text);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.feature-card p a:hover,
.notice a:hover {
  text-decoration-thickness: 2px;
}
/* @editorial-redesign:start */
/* ==========================================================================
   Editorial redesign (Oct 2026)
   Ink on white, one documentation-blue accent, serif headlines, flat surfaces.
   This layer sits at the end of style.css and overrides the original look;
   scripts/redesign/apply.py re-inserts it and rehashes the stylesheet.
   ========================================================================== */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+20AC;
}

/* ---- Tokens: light ------------------------------------------------------ */
:root {
  --primary: #0b57a4;
  --primary-hover: #094784;
  --primary-text: #0b57a4;
  --secondary: #0b57a4;
  --accent: #0b57a4;
  --accent-rgb: 11, 87, 164;
  --success: #2f7d4f;
  --navbar-bg: #ffffff;
  --hero-gradient: none;
  --bg-primary: #ffffff;
  --bg-secondary: #f4f5f7;
  --bg-tertiary: #eceef1;
  --bg-card: #ffffff;
  --text-primary: #14171c;
  --text-body: #262b33;
  --text-secondary: #3d4450;
  --text-muted: #5b6370;
  --border-color: #dfe2e7;
  --border-strong: #c4c9d1;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-lg: 0 8px 24px rgba(16, 24, 40, 0.1);
  --shadow-xl: 0 16px 40px rgba(16, 24, 40, 0.14);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 6px;
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --code-bg: #0d1117;
  --code-bar: #161b22;
  --code-border: #30363d;
  --code-text: #e6edf3;
  --code-muted: #9ba3ab;
  --avatar-bg: #1b1f26;
}

/* ---- Tokens: dark (same three selectors as the original, so the toggle wins both ways) */
[data-theme="dark"] {
  --primary: #2f74c0;
  --primary-hover: #2766aa;
  --primary-text: #8cc0ff;
  --secondary: #2f74c0;
  --accent: #8cc0ff;
  --accent-rgb: 140, 192, 255;
  --navbar-bg: #111418;
  --bg-primary: #111418;
  --bg-secondary: #171b21;
  --bg-tertiary: #20252d;
  --bg-card: #161a20;
  --text-primary: #e7eaee;
  --text-body: #d3d8df;
  --text-secondary: #b4bcc8;
  --text-muted: #939cab;
  --border-color: #2a3039;
  --border-strong: #3a414c;
  --avatar-bg: #2a3039;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #2f74c0;
    --primary-hover: #2766aa;
    --primary-text: #8cc0ff;
    --secondary: #2f74c0;
    --accent: #8cc0ff;
    --accent-rgb: 140, 192, 255;
    --navbar-bg: #111418;
    --bg-primary: #111418;
    --bg-secondary: #171b21;
    --bg-tertiary: #20252d;
    --bg-card: #161a20;
    --text-primary: #e7eaee;
    --text-body: #d3d8df;
    --text-secondary: #b4bcc8;
    --text-muted: #939cab;
    --border-color: #2a3039;
    --border-strong: #3a414c;
    --avatar-bg: #2a3039;
  }
}

/* ---- Base ---------------------------------------------------------------- */
body {
  line-height: 1.65;
}
::selection {
  background: rgba(var(--accent-rgb), 0.2);
}
:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 2px;
}
.hero-title,
.section-title,
.page-hero h1,
.post-hero h1,
.post-content h2,
.post-content h3,
.page-content h2,
.card-title,
.category-card h2,
.category-card h3,
.newsletter-content h2,
.ai-card h3,
.feature-card h3,
#comments .comments-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* ---- Motion: content is visible at rest, nothing floats or lifts -------- */
:where(.js) .animate-on-scroll,
.animate-on-scroll,
:where(.js) .animate-fade-in,
:where(.js) .animate-fade-in-up,
:where(.js) .animate-fade-in-left {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}
.featured-card:hover,
.post-card:hover,
.category-card:hover,
.feature-card:hover,
.ai-card:hover,
.btn:hover,
.btn-primary:hover,
.btn-outline:hover,
.social-link:hover,
.share-btn:hover,
.section-badge:hover,
.newsletter-form .btn:hover,
.featured-card:hover .card-image-placeholder,
.category-card:hover .category-icon {
  transform: none;
}
.ai-card-1,
.ai-card-2,
.ai-card-3,
.code-window,
.pulse-dot,
.typed-cursor {
  animation: none;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  border-radius: var(--radius-md);
  font-weight: 600;
  letter-spacing: 0;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}
.btn::after {
  display: none;
}
.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: none;
}
.btn-outline {
  border: 1px solid var(--border-strong);
  background: var(--bg-primary);
}
.btn-outline:hover {
  border-color: var(--text-primary);
  color: var(--text-primary);
}
.btn-lg {
  padding: 13px 26px;
  font-size: 1rem;
}

/* ---- Header -------------------------------------------------------------- */
.navbar::before {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--navbar-bg);
}
.navbar.scrolled {
  box-shadow: none;
}
.logo {
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 1.25rem;
}
.logo-icon {
  background: var(--text-primary);
  color: var(--bg-primary);
  border-radius: var(--radius-sm);
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}
.nav-link {
  border-radius: 0;
  padding: 8px 12px;
  color: var(--text-secondary);
}
.nav-link:hover,
.nav-link.active {
  background: none;
  color: var(--text-primary);
  box-shadow: inset 0 -2px 0 var(--primary-text);
}
.search-toggle,
.theme-toggle {
  border-radius: var(--radius-md);
}

/* ---- Search -------------------------------------------------------------- */
.search-modal {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(12, 14, 18, 0.55);
}
.search-modal-content {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}
.search-result-item .result-icon {
  background: var(--avatar-bg);
}
.search-tag:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* ---- Home hero ----------------------------------------------------------- */
.hero {
  min-height: auto;
  padding-top: 0;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}
.hero-gradient,
.hero-particles,
.hero-wave,
.pulse-dot {
  display: none;
}
.hero .container {
  padding-top: 64px;
  padding-bottom: 72px;
  gap: 56px;
}
.hero-badge {
  background: none;
  border: 0;
  padding: 0;
  border-radius: 0;
  color: var(--primary-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}
.gradient-text {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--primary-text);
}
.hero-subtitle {
  color: var(--text-secondary);
  font-size: 1.125rem;
  line-height: 1.7;
}
.hero-stats {
  gap: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.stat {
  text-align: left;
}
.stat-number {
  font-family: var(--font-display);
  font-weight: 700;
}
.stat-plus {
  color: var(--text-muted);
}
.code-window {
  transform: none;
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  box-shadow: var(--shadow-lg);
}
.code-window:hover {
  transform: none;
}
.code-header {
  background: var(--code-bar);
  border-bottom: 1px solid var(--code-border);
}
.code-body {
  color: var(--code-text);
}

/* ---- Section headers: left-aligned, ruled ------------------------------- */
.section-header {
  text-align: left;
  display: grid;
  gap: 6px;
  margin-bottom: 32px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
}
.section-badge {
  justify-self: start;
  background: none;
  padding: 0;
  margin: 0;
  border-radius: 0;
  color: var(--primary-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 700;
}
.section-badge:hover {
  background: none;
  color: var(--text-primary);
  box-shadow: none;
  text-decoration: underline;
}
.section-title {
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  margin: 0;
}
.section-subtitle {
  margin: 0;
  max-width: 65ch;
  color: var(--text-secondary);
}
.section-cta {
  text-align: left;
}
.section {
  padding: 64px 0;
}

/* ---- Page heroes (tutorials, categories, legal...) ---------------------- */
.page-hero {
  padding: 48px 0 32px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}
.page-hero h1 {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
}
.page-hero p {
  margin: 0;
  max-width: 65ch;
  color: var(--text-secondary);
}

/* ---- Cards --------------------------------------------------------------- */
.post-card,
.featured-card,
.category-card,
.feature-card,
.ai-card,
.contact-info-card,
.faq-item {
  border-radius: var(--radius-lg);
  box-shadow: none;
}
.post-card:hover,
.featured-card:hover,
.feature-card:hover,
.ai-card:hover {
  border-color: var(--border-strong);
  box-shadow: none;
}
.post-card:hover .card-title a,
.featured-card:hover .card-title a {
  color: var(--primary-text);
}
.card-image {
  background: var(--bg-tertiary);
  border-bottom: 1px solid var(--border-color);
}
.card-image picture,
.card-image img {
  display: block;
  width: 100%;
}
.card-image img {
  height: auto;
  aspect-ratio: 5 / 3;
  object-fit: cover;
}
.card-image-placeholder {
  background: var(--bg-tertiary) !important;
}
.card-image-placeholder svg {
  stroke: var(--text-muted);
}
.card-category {
  background: var(--bg-primary);
  color: var(--text-primary);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  padding: 4px 10px;
}
.card-category-badge {
  background: none;
  padding: 0;
  border-radius: 0;
  color: var(--primary-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  font-weight: 700;
}
.card-title {
  line-height: 1.3;
}
.card-excerpt {
  color: var(--text-secondary);
}
.tag {
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
.tag:hover {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-strong);
}

/* Featured: image on top, like the rest of the grid. */
.featured-card {
  flex-direction: column;
}
.featured-card .card-image {
  width: 100%;
}
.featured-card .card-image-placeholder {
  min-height: 0;
  aspect-ratio: 5 / 3;
}
.featured-card .card-title {
  font-size: 1.25rem;
}
.featured-card .card-content {
  padding: 20px;
}

/* Categories: left-aligned, brand colour only as a thin top rule. */
.category-card {
  text-align: left;
  padding: 24px;
  box-shadow: inset 0 3px 0 var(--accent, var(--primary));
}
.category-card::before {
  display: none;
}
.category-card:hover {
  border-color: var(--border-strong);
  box-shadow: inset 0 3px 0 var(--accent, var(--primary));
}
.category-icon {
  width: auto;
  height: auto;
  margin: 0 0 12px;
  background: none;
  color: var(--text-primary);
  justify-content: flex-start;
}
.category-card:hover .category-icon {
  background: none;
  color: var(--text-primary);
}
.category-card p {
  color: var(--text-secondary);
}
.category-count {
  color: var(--text-muted);
  font-weight: 600;
}

/* "Written from production experience" block */
.ai-card {
  box-shadow: none;
}
.ai-card-icon {
  background: var(--bg-tertiary);
  color: var(--text-primary);
  border-radius: var(--radius-md);
  width: 44px;
  height: 44px;
}

/* RSS / topic-request panel */
.newsletter-card {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 40px;
  gap: 32px;
}
.newsletter-card::before,
.newsletter-visual {
  display: none;
}
.newsletter-content h2 {
  font-size: 1.6rem;
}
.newsletter-content p {
  opacity: 1;
  color: var(--text-secondary);
  max-width: 65ch;
}
.newsletter-card :focus-visible {
  outline-color: var(--primary-text);
}
.newsletter-card .btn:not(.btn-primary) {
  border: 1px solid var(--border-strong);
}

/* ---- Tutorials filter --------------------------------------------------- */
.filter-bar {
  justify-content: flex-start;
  gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 32px;
}

/* ---- Article ------------------------------------------------------------- */
.post-hero {
  padding: 40px 0 28px;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border-color);
}
.post-hero h1 {
  font-size: clamp(2rem, 3.8vw, 2.75rem);
  line-height: 1.15;
}
.post-hero .card-excerpt {
  color: var(--text-secondary);
  font-size: 1.125rem;
}
.post-hero-image img,
.post-hero-image picture {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color);
}
.post-content h2 {
  font-size: 1.65rem;
  margin: 56px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border-color);
}
.post-content h3 {
  font-size: 1.25rem;
}
.post-content p,
.post-content li,
.page-content p,
.page-content li {
  color: var(--text-body);
}
.post-content p {
  font-size: 1.0625rem;
  line-height: 1.75;
}
.post-content a,
.page-content a {
  color: var(--primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.post-content blockquote {
  font-style: normal;
  border-left: 3px solid var(--primary-text);
  border-radius: 0;
  background: var(--bg-secondary);
  color: var(--text-body);
}
.post-content :not(pre) > code,
.page-content :not(pre) > code {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.35em;
  font-size: 0.88em;
  color: var(--text-primary);
}
.post-toc {
  border-radius: var(--radius-lg);
  background: var(--bg-primary);
}
.toc-list a:hover,
.toc-list a.active {
  background: none;
  color: var(--text-primary);
  border-left-color: var(--primary-text);
}
.author-box {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
}
.share-btn,
.share-btn.twitter,
.share-btn.facebook,
.share-btn.linkedin,
.share-btn.copy-link {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
}
.share-btn:hover {
  color: var(--text-primary);
  box-shadow: none;
}
.notice {
  border-radius: var(--radius-md);
}

/* ---- Code (neutral dark in both themes) --------------------------------- */
.code-block {
  border-radius: var(--radius-lg);
  border: 1px solid var(--code-border);
}
.code-block-header {
  background: var(--code-bar);
  color: var(--code-muted);
  border-bottom: 1px solid var(--code-border);
}
.code-block pre {
  background: var(--code-bg);
  color: var(--code-text);
}
.copy-btn {
  color: var(--code-muted);
  border-radius: var(--radius-sm);
}
.copy-btn:hover {
  color: #fff;
}
.code-keyword {
  color: #ff7b72;
}
.code-string {
  color: #a5d6ff;
}
.code-function {
  color: #ffa657;
}
.code-comment {
  color: #8b949e;
}
.code-type,
.code-number {
  color: #79c0ff;
}

/* ---- Footer -------------------------------------------------------------- */
.footer {
  background: var(--bg-secondary);
  padding-top: 56px;
}
.social-link {
  border-radius: var(--radius-md);
}
.social-link:hover {
  background: var(--text-primary);
  color: var(--bg-primary);
}

/* ---- About / contact ---------------------------------------------------- */
.about-image {
  background: var(--avatar-bg);
  border-radius: var(--radius-lg);
}
.contact-info-card .icon {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  border-width: 1px;
  border-radius: var(--radius-md);
}

/* ---- Comments widget ----------------------------------------------------- */
#comments {
  border-radius: var(--radius-lg);
  box-shadow: none;
}
#comments::before {
  display: none;
}
#comments .comments-title::before {
  background: var(--text-primary);
}

/* ---- Cookie banner ------------------------------------------------------- */
.cookie-banner {
  box-shadow: 0 -1px 0 var(--border-color);
}

/* ---- Mobile: keep the editorial left alignment, no reserved typing height */
@media (max-width: 768px) {
  .hero .container,
  .hero-content,
  .hero-subtitle,
  .hero-badge,
  .section-header,
  .page-hero {
    text-align: left;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 2.6rem);
  }
  .hero .container {
    padding-top: 40px;
    padding-bottom: 48px;
  }
  .hero-cta {
    margin-bottom: 32px;
  }
  .hero-stats {
    justify-content: flex-start;
  }
  .section {
    padding: 48px 0;
  }
  .newsletter-card {
    padding: 28px 22px;
  }
}

/* ---- Hero: the typed word changes length; reserve two lines so the heading
   never changes height and the code window beside it stays still. --------- */
.hero-title {
  min-height: 2.2em; /* 2 lines x line-height 1.1 */
}
.typed-wrapper {
  display: flex; /* own line: the word never jumps between lines */
  min-height: 1.1em;
  white-space: nowrap;
}
.hero .container {
  align-items: start;
}

/* ==========================================================================
   Interaction layer: whole cards clickable, measured hover motion, compact footer
   ========================================================================== */
:root {
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 140ms;
  --dur-2: 220ms;
}

/* Whole card is the link target: the title link stretches over the card,
   so the image, excerpt and empty space all open the post. Tags and other
   links inside the card sit above it and stay independently usable. */
.post-card,
.featured-card {
  position: relative;
  cursor: pointer;
}
.post-card .card-title a::after,
.featured-card .card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}
.post-card .card-title a:focus-visible,
.featured-card .card-title a:focus-visible {
  outline: none;
}
.post-card:has(.card-title a:focus-visible),
.featured-card:has(.card-title a:focus-visible) {
  outline: 2px solid var(--primary-text);
  outline-offset: 3px;
}
.post-card .card-tags,
.featured-card .card-tags,
.post-card .card-meta a,
.featured-card .card-meta a {
  position: relative;
  z-index: 2;
}

/* Card hover: small lift, deeper shadow, image zoom inside its frame. */
.post-card,
.featured-card,
.category-card,
.feature-card,
.ai-card,
.contact-info-card {
  transition:
    transform var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    border-color var(--dur-2) var(--ease-out);
}
.card-image {
  overflow: hidden;
}
.card-image img {
  transition: transform 400ms var(--ease-out);
}
.card-title a {
  transition: color var(--dur-1) ease;
}
@media (hover: hover) and (pointer: fine) {
  .post-card:hover,
  .featured-card:hover,
  .category-card:hover,
  .feature-card:hover,
  .contact-info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-strong);
  }
  .category-card:hover {
    box-shadow:
      inset 0 3px 0 var(--accent, var(--primary)),
      var(--shadow-lg);
  }
  .post-card:hover .card-image img,
  .featured-card:hover .card-image img {
    transform: scale(1.04);
  }
  .category-card:hover .category-icon {
    color: var(--primary-text);
  }
  .btn-primary:hover,
  .btn-outline:hover {
    transform: translateY(-1px);
  }
  .social-link:hover,
  .share-btn:hover {
    transform: translateY(-2px);
  }
}
.post-card:active,
.featured-card:active,
.category-card:active,
.btn:active {
  transform: translateY(0) scale(0.99);
  transition-duration: 80ms;
}

/* Buttons: colour, subtle lift, arrow nudges right. */
.btn {
  transition:
    background-color var(--dur-1) ease,
    border-color var(--dur-1) ease,
    color var(--dur-1) ease,
    transform var(--dur-1) var(--ease-out),
    box-shadow var(--dur-1) ease;
}
.btn svg {
  transition: transform var(--dur-2) var(--ease-out);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn-primary:hover {
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.25);
}

/* Nav: underline grows in from the left instead of snapping. */
.nav-link {
  box-shadow: none !important;
  background-image: linear-gradient(var(--primary-text), var(--primary-text));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  transition:
    background-size var(--dur-2) var(--ease-out),
    color var(--dur-1) ease;
}
.nav-link:hover,
.nav-link.active {
  background-size: 100% 2px;
}

/* Text links. */
.post-content a,
.page-content a,
.footer-links a {
  transition:
    color var(--dur-1) ease,
    text-decoration-color var(--dur-1) ease;
}
.post-content a:hover,
.page-content a:hover {
  text-decoration-thickness: 2px;
}
.footer-links a:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.filter-bar .btn-outline:hover {
  border-color: var(--primary-text);
  color: var(--primary-text);
}
.tag {
  transition:
    border-color var(--dur-1) ease,
    color var(--dur-1) ease;
}

/* Gentle entrance for grid cards as they scroll in. Visible without JS and
   with reduced motion; .visible is added by the existing scroll observer. */
@media (prefers-reduced-motion: no-preference) {
  :where(.js) .posts-grid .animate-on-scroll:not(.visible),
  :where(.js) .featured-grid .animate-on-scroll:not(.visible),
  :where(.js) .categories-grid .animate-on-scroll:not(.visible) {
    opacity: 0.001 !important;
    transform: translateY(12px) !important;
  }
  :where(.js) .posts-grid .animate-on-scroll,
  :where(.js) .featured-grid .animate-on-scroll,
  :where(.js) .categories-grid .animate-on-scroll {
    transition:
      opacity 500ms var(--ease-out),
      transform 500ms var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Article images open full size in a new tab. */
.post-hero-image a,
.terminal-shot a {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-lg);
}
.post-hero-image a img,
.terminal-shot a img {
  transition: opacity var(--dur-1) ease;
}
.post-hero-image a:hover img,
.terminal-shot a:hover img {
  opacity: 0.92;
}
.post-hero-image a:focus-visible,
.terminal-shot a:focus-visible {
  outline: 2px solid var(--primary-text);
  outline-offset: 3px;
}

/* ---- Footer: tighter ---------------------------------------------------- */
.footer {
  padding: 40px 0 20px;
}
.footer-grid {
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 24px;
}
.footer-brand p {
  margin: 12px 0 16px;
  max-width: 38ch;
}
.footer-links h3 {
  margin-bottom: 12px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.footer-links li {
  margin-bottom: 6px;
}
.footer-links a {
  font-size: 0.9rem;
}
.footer-bottom {
  padding-top: 16px;
  font-size: 0.8rem;
}
.footer .container > div[style] {
  padding: 8px 0 !important;
  margin-top: 0 !important;
}
@media (max-width: 768px) {
  .footer {
    padding: 32px 0 16px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
  }
  .footer-brand {
    grid-column: 1 / -1;
  }
  .footer-links li {
    margin-bottom: 0;
  }
  .footer-links a {
    min-height: 36px;
    padding: 6px 0;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

/* ---- Contact form ------------------------------------------------------ */
.contact-form {
  display: grid;
  gap: 16px;
}
.contact-form .form-field {
  display: grid;
  gap: 6px;
}
.contact-form label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.contact-form label span {
  color: var(--text-muted);
}
.contact-form input,
.contact-form textarea {
  margin-bottom: 0;
  transition:
    border-color var(--dur-1) ease,
    box-shadow var(--dur-1) ease;
}
.contact-form input:hover,
.contact-form textarea:hover {
  border-color: var(--border-strong);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--primary-text);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18);
}
:root {
  --danger: #b42318;
  --ok-fg: #1f5c38;
  --ok-bg: #ecf7f0;
  --err-fg: #8a1c12;
  --err-bg: #fdf0ee;
}
[data-theme="dark"] {
  --danger: #ff8b80;
  --ok-fg: #8ee0a9;
  --ok-bg: #10261a;
  --err-fg: #ffb4ab;
  --err-bg: #2b1310;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --danger: #ff8b80;
    --ok-fg: #8ee0a9;
    --ok-bg: #10261a;
    --err-fg: #ffb4ab;
    --err-bg: #2b1310;
  }
}
.contact-form [aria-invalid="true"] {
  border-color: var(--danger);
}
.field-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.field-error {
  font-size: 0.85rem;
  color: var(--danger);
  margin: 0;
}
.form-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-submit {
  width: 100%;
  justify-content: center;
}
.contact-submit[disabled] {
  opacity: 0.6;
  cursor: progress;
}
.form-status {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.form-status.is-success {
  border-color: var(--ok-fg);
  color: var(--ok-fg);
  background: var(--ok-bg);
}
.form-status.is-error {
  border-color: var(--danger);
  color: var(--err-fg);
  background: var(--err-bg);
}

/* ==========================================================================
   Motion layer (pairs with js/motion.js). Transform/opacity only; every rule
   is neutralised by the reduced-motion block in the interaction layer.
   ========================================================================== */

/* 11. Card image wells use the diagrams' own dark tone, so a slow image never
   flashes a pale grey box first. */
.card-image,
.post-hero-image picture,
.terminal-shot picture {
  background: #0d1117;
}

/* 2. Hero: word and code window crossfade together. */
.hero-cycling #typed-text,
.hero-cycling .hero .code-window .code-body,
.hero-cycling .hero .code-title {
  transition:
    opacity 260ms var(--ease-out),
    transform 260ms var(--ease-out),
    filter 260ms var(--ease-out);
}
.hero-cycling #typed-text {
  display: inline-block;
  color: var(--primary-text);
}
.hero-cycling #typed-text.is-out {
  opacity: 0;
  transform: translateY(0.18em);
  filter: blur(2px);
}
.hero-cycling .code-window.is-out .code-body,
.hero-cycling .code-window.is-out .code-title {
  opacity: 0;
  transform: translateY(4px);
}
.hero .code-window .code-body {
  min-height: 16.5em; /* tallest snippet: the window never changes size */
}

/* 6. Header: compact after scrolling, slides away on scroll down. */
.navbar {
  transition:
    transform 260ms var(--ease-out),
    height 200ms var(--ease-out),
    box-shadow 200ms ease;
}
.navbar.is-compact {
  height: 56px;
  box-shadow: 0 1px 0 var(--border-color), 0 4px 16px rgba(16, 24, 40, 0.06);
}
.navbar.is-compact .logo-icon {
  width: 30px;
  height: 30px;
}
.navbar.is-hidden {
  transform: translateY(-100%);
}

/* 4. Reading progress. */
.read-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 1001;
  background: var(--primary-text);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* 5. Table of contents: a marker slides to the section being read. */
.toc-list.has-marker {
  position: relative;
}
.toc-list.has-marker a {
  border-left-color: transparent !important;
}
.toc-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--primary-text);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 280ms var(--ease-out),
    height 280ms var(--ease-out),
    opacity 200ms ease;
}

/* 7. Heading anchors: appear on hover/focus, copy the section link. */
.post-content h2,
.post-content h3 {
  position: relative;
  scroll-margin-top: 80px;
}
.heading-anchor {
  margin-left: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.7em;
  font-weight: 500;
  color: var(--text-muted) !important;
  text-decoration: none !important;
  opacity: 0;
  transition:
    opacity var(--dur-1) ease,
    color var(--dur-1) ease;
}
.post-content h2:hover .heading-anchor,
.post-content h3:hover .heading-anchor,
.heading-anchor:focus-visible,
.heading-anchor.is-copied {
  opacity: 1;
}
.heading-anchor:hover,
.heading-anchor.is-copied {
  color: var(--primary-text) !important;
}
@media (hover: none) {
  .heading-anchor {
    opacity: 0.55;
  }
}

/* 8. Code blocks: language label, line highlight, collapse long blocks. */
.code-block-header > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.code-lang {
  font-family: var(--font-display, inherit);
  font-family: inherit;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--code-muted);
  padding: 2px 7px;
  border: 1px solid var(--code-border);
  border-radius: 4px;
  margin-left: 8px;
}
.code-block-header {
  gap: 10px;
}
.code-block-header .copy-btn {
  margin-left: auto;
}
.copy-btn {
  transition:
    color var(--dur-1) ease,
    background-color var(--dur-1) ease;
}
.code-block.is-collapsible {
  position: relative;
}
.code-block.is-collapsed pre {
  max-height: 26.5em;
  overflow: hidden;
}
.code-block.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 46px;
  height: 96px;
  background: linear-gradient(rgba(13, 17, 23, 0), var(--code-bg));
  pointer-events: none;
}
.code-expand {
  display: block;
  width: 100%;
  padding: 11px 16px;
  background: var(--code-bar);
  border-top: 1px solid var(--code-border);
  color: var(--code-text);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.code-expand:hover {
  background: #1c2129;
}
.code-expand:focus-visible {
  outline: 2px solid #79c0ff;
  outline-offset: -2px;
}

/* 1. Card -> article morph (same-origin cross-document view transition). */
@view-transition {
  navigation: auto;
}
::view-transition-group(*) {
  animation-duration: 380ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
}
.card-image picture,
.post-hero-image picture {
  display: block;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .navbar.is-hidden {
    transform: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}
@media print {
  .read-progress,
  .heading-anchor,
  .code-expand {
    display: none !important;
  }
  .code-block.is-collapsed pre {
    max-height: none;
  }
  .code-block.is-collapsed::after {
    display: none;
  }
}

/* ==========================================================================
   Contrast layer: ink bands, category colour, ticker
   Flat colour only (no gradients). Bands re-declare the page tokens locally,
   so every component inside them adapts without its own dark rules.
   ========================================================================== */
:root {
  --band-bg: #f4f6f9;
  --band-ok: #1a7f37;
  --news-bg: #0b57a4;
  --cat: var(--primary-text);
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%2314171c' fill-opacity='0.14'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --band-bg: #0a0d12;
  --band-ok: #3fb950;
  --news-bg: #1d4f86;
  --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --band-bg: #0a0d12;
    --band-ok: #3fb950;
    --news-bg: #1d4f86;
    --dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
  }
}

/* Category colours (badge text, card rule). Light values, then dark. */
[data-cat="python"] { --cat: #8a5a00; }
[data-cat="js"] { --cat: #6f6400; }
[data-cat="ts"] { --cat: #2453c4; }
[data-cat="web"] { --cat: #0b57a4; }
[data-cat="devops"] { --cat: #0b6584; }
[data-cat="backend"] { --cat: #a3410b; }
[data-cat="data"] { --cat: #1e7341; }
[data-cat="db"] { --cat: #0f6e5f; }
[data-cat="ai"] { --cat: #b42318; }
[data-cat="go"] { --cat: #00708a; }
[data-cat="rust"] { --cat: #9c3d1c; }
[data-cat="mobile"] { --cat: #a3195b; }
[data-theme="dark"] [data-cat="python"] { --cat: #f2c25c; }
[data-theme="dark"] [data-cat="js"] { --cat: #e3d45a; }
[data-theme="dark"] [data-cat="ts"] { --cat: #a3bcff; }
[data-theme="dark"] [data-cat="web"] { --cat: #8cc0ff; }
[data-theme="dark"] [data-cat="devops"] { --cat: #6cd0ef; }
[data-theme="dark"] [data-cat="backend"] { --cat: #ffb07a; }
[data-theme="dark"] [data-cat="data"] { --cat: #72d69a; }
[data-theme="dark"] [data-cat="db"] { --cat: #6fd8c4; }
[data-theme="dark"] [data-cat="ai"] { --cat: #ff9b8f; }
[data-theme="dark"] [data-cat="go"] { --cat: #5fd3ec; }
[data-theme="dark"] [data-cat="rust"] { --cat: #f5a383; }
[data-theme="dark"] [data-cat="mobile"] { --cat: #ff94c4; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) [data-cat="python"] { --cat: #f2c25c; }
  :root:not([data-theme="light"]) [data-cat="js"] { --cat: #e3d45a; }
  :root:not([data-theme="light"]) [data-cat="ts"] { --cat: #a3bcff; }
  :root:not([data-theme="light"]) [data-cat="web"] { --cat: #8cc0ff; }
  :root:not([data-theme="light"]) [data-cat="devops"] { --cat: #6cd0ef; }
  :root:not([data-theme="light"]) [data-cat="backend"] { --cat: #ffb07a; }
  :root:not([data-theme="light"]) [data-cat="data"] { --cat: #72d69a; }
  :root:not([data-theme="light"]) [data-cat="db"] { --cat: #6fd8c4; }
  :root:not([data-theme="light"]) [data-cat="ai"] { --cat: #ff9b8f; }
  :root:not([data-theme="light"]) [data-cat="go"] { --cat: #5fd3ec; }
  :root:not([data-theme="light"]) [data-cat="rust"] { --cat: #f5a383; }
  :root:not([data-theme="light"]) [data-cat="mobile"] { --cat: #ff94c4; }
}

/* ---- Ink bands ----------------------------------------------------------- */
[data-theme="dark"] :is(.hero, .page-hero, .topic-ticker, .ai-section, .footer) {
  --bg-primary: var(--band-bg);
  --bg-secondary: var(--band-bg);
  --bg-tertiary: #1c222b;
  --bg-card: #151b23;
  --text-primary: #f0f3f6;
  --text-body: #d5dbe3;
  --text-secondary: #b7c0cc;
  --text-muted: #9aa4b2;
  --border-color: #2a313b;
  --border-strong: #3d4653;
  --primary: #1f6feb;
  --primary-hover: #1a5fd0;
  --primary-text: #79c0ff;
  --accent-rgb: 121, 192, 255;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.hero, .page-hero, .topic-ticker, .ai-section, .footer) {
    --bg-primary: var(--band-bg);
    --bg-secondary: var(--band-bg);
    --bg-tertiary: #1c222b;
    --bg-card: #151b23;
    --text-primary: #f0f3f6;
    --text-body: #d5dbe3;
    --text-secondary: #b7c0cc;
    --text-muted: #9aa4b2;
    --border-color: #2a313b;
    --border-strong: #3d4653;
    --primary: #1f6feb;
    --primary-hover: #1a5fd0;
    --primary-text: #79c0ff;
    --accent-rgb: 121, 192, 255;
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 24px 60px rgba(0, 0, 0, 0.5);
  }
}
.hero,
.page-hero,
.topic-ticker,
.ai-section,
.footer {
  background-color: var(--band-bg);
  color: var(--text-body);
  border-color: var(--border-color);
}
.hero,
.page-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
}
.page-hero {
  background-image: var(--dots);
  padding: 56px 0 44px;
}
.page-hero h1 {
  color: var(--text-primary);
}

/* Hero: dot grid drifts slowly behind the content. */
.hero-bg {
  inset: -24px 0 0 -24px;
  background-image: var(--dots);
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-bg {
    animation: dots-drift 9s linear infinite;
  }
}
@keyframes dots-drift {
  to { transform: translate(24px, 24px); }
}
.hero .container {
  padding-top: 80px;
  padding-bottom: 88px;
}
.hero-title {
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  letter-spacing: -0.02em;
}
.hero-badge {
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--band-ok);
}
.hero-badge::before {
  content: "$ ";
  color: var(--text-muted);
}
.hero .code-window {
  border-color: #30363d;
  box-shadow: var(--shadow-xl);
}
.stat-number {
  font-size: 2.4rem;
  color: var(--text-primary);
}

/* Topic ticker under the hero (decorative: aria-hidden, links are elsewhere). */
.topic-ticker {
  overflow: hidden;
  border-top: 1px solid var(--border-color);
}
.topic-ticker-track {
  display: flex;
  width: max-content;
  padding: 14px 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.topic-ticker-track span {
  padding: 0 22px;
  border-right: 1px solid var(--border-color);
}
.topic-ticker-track span[data-cat] {
  color: var(--cat);
  font-weight: 600;
}
@media (prefers-reduced-motion: no-preference) {
  .topic-ticker-track {
    animation: ticker 70s linear infinite;
  }
  .topic-ticker:hover .topic-ticker-track {
    animation-play-state: paused;
  }
}
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ---- Section headers: numbered, heavy rule ------------------------------- */
body {
  counter-reset: sec;
}
.section-header .section-badge::before,
.ai-text .section-badge::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " / ";
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-weight: 500;
}
.section-header {
  border-bottom: 2px solid var(--text-primary);
}
.section-title {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

/* ---- Cards: category colour --------------------------------------------- */
.card-category-badge[data-cat] {
  color: var(--cat);
}
.post-card[data-cat] .card-image,
.featured-card[data-cat] .card-image {
  border-bottom: 3px solid var(--cat);
}
@media (hover: hover) and (pointer: fine) {
  .post-card .card-content {
    position: relative;
  }
  .post-card .card-content::after {
    content: "Read \2192";
    position: absolute;
    right: 20px;
    bottom: 18px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--cat);
    opacity: 0;
    transform: translateX(-6px);
    transition:
      opacity var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out);
  }
  .post-card:hover .card-content::after {
    opacity: 1;
    transform: none;
  }
  .post-card[data-cat]:hover,
  .featured-card[data-cat]:hover {
    border-color: var(--cat);
  }
}

/* Category tiles: brand-coloured top rule and tinted icon square. */
.category-card {
  box-shadow: none;
  border-top: 3px solid var(--accent, var(--primary));
}
@media (hover: hover) and (pointer: fine) {
  .category-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--accent, var(--primary));
  }
}
.category-icon {
  display: flex;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  background: color-mix(in srgb, var(--accent, var(--primary)) 16%, transparent);
  align-items: center;
  justify-content: center;
  transition:
    transform var(--dur-2) var(--ease-out),
    background-color var(--dur-2) ease;
}
.category-icon svg {
  width: 28px;
  height: 28px;
}
.category-card:hover .category-icon {
  background: color-mix(in srgb, var(--accent, var(--primary)) 28%, transparent);
  transform: rotate(-6deg);
}
.category-card h2,
.category-card h3 {
  font-size: 1.2rem;
}

/* "How it works" band */
.ai-section {
  background-image: var(--dots);
}
.ai-section .section-title {
  color: var(--text-primary);
}
.ai-section .feature-list svg {
  stroke: var(--band-ok);
}
.ai-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.ai-card-icon {
  color: var(--band-ok);
  background: rgba(63, 185, 80, 0.12);
}

/* RSS block: solid blue panel. */
.newsletter-card {
  --text-primary: #ffffff;
  --text-secondary: #ffffff;
  position: relative;
  overflow: hidden;
  background: var(--news-bg);
  border-color: var(--news-bg);
  color: #ffffff;
  padding: 48px;
}
.newsletter-card::after {
  content: "</>";
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: clamp(5rem, 12vw, 10rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
  pointer-events: none;
}
.newsletter-card .btn-primary {
  background: #ffffff;
  color: #0d1117;
}
.newsletter-card .btn-primary:hover {
  background: #e6edf3;
  box-shadow: none;
}
.newsletter-card :focus-visible {
  outline-color: #ffffff;
}

/* Footer band */
.footer .logo-icon {
  background: var(--text-primary);
  color: var(--bg-primary);
}
.footer .container > div[style] {
  border-top-color: var(--border-color) !important;
}
.footer-links a:hover {
  color: var(--primary-text);
}
.social-link {
  background: var(--bg-tertiary);
  color: var(--text-primary);
}

@media (max-width: 768px) {
  .hero .container {
    padding-top: 48px;
    padding-bottom: 56px;
  }
  .newsletter-card {
    padding: 32px 24px;
  }
  .newsletter-card::after {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .topic-ticker-track,
  .hero-bg {
    animation: none !important;
  }
}
@media print {
  .topic-ticker {
    display: none;
  }
  .hero,
  .page-hero,
  .ai-section,
  .footer {
    background: none;
    color: #000;
  }
}
/* @editorial-redesign:end */