:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f5ef;
  --card: #ffffff;
  --card2: #f1ede6;
  --panel: #ffffff;
  --panel2: #f1ede6;
  --text: #11172a;
  --muted: #646978;
  --line: #dcd5ca;
  --border: #dcd5ca;
  --accent: #4c9fdc;
  --cyan: #247abd;
  --lime: #2f7256;
  --blue: #326fb7;
  --blog-bg: #f8f5ef;
  --blog-surface: #ffffff;
  --blog-soft: #f1ede6;
  --blog-text: #11172a;
  --blog-muted: #646978;
  --blog-border: #dcd5ca;
  --blog-action: #247abd;
  --blog-signal: #2f7256;
  --blog-shadow: 0 18px 48px rgba(45, 38, 25, 0.08);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070a12;
  --card: #101725;
  --card2: #151f31;
  --panel: #101725;
  --panel2: #151f31;
  --text: #f4f7fb;
  --muted: #aab5c7;
  --line: #263349;
  --border: #263349;
  --accent: #7c3aed;
  --cyan: #55b7e9;
  --lime: #c9f23f;
  --blue: #3998ff;
  --blog-bg: #070a12;
  --blog-surface: #101725;
  --blog-soft: #151f31;
  --blog-text: #f4f7fb;
  --blog-muted: #aab5c7;
  --blog-border: #263349;
  --blog-action: #55b7e9;
  --blog-signal: #c9f23f;
  --blog-shadow: none;
}

html {
  min-height: 100%;
  background: var(--blog-bg);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  background: var(--blog-bg) !important;
  color: var(--blog-text) !important;
  transition: background-color 180ms ease, color 180ms ease;
}

::selection {
  color: #fff;
  background: var(--blog-action);
}

.container,
.wrap {
  color: var(--blog-text);
}

header.site,
body > .wrap > header,
body > .container > header {
  border-color: var(--blog-border) !important;
}

header.site a.brand,
header .brand,
.stat b,
h1,
h2,
h3,
h4,
strong,
.related a,
.related-card,
.card,
.brand {
  color: var(--blog-text) !important;
}

header.site nav a,
header nav a,
footer,
footer.site,
footer a,
footer.site a,
.lede,
.meta,
.dek,
.cdate,
.card p,
.related small,
.related-card p,
.method p,
.faq p,
.review,
.crumbs,
.crumbs a,
.stat span {
  color: var(--blog-muted) !important;
}

header.site nav a:hover,
header nav a:hover,
footer a:hover,
footer.site a:hover {
  color: var(--blog-text) !important;
}

footer,
footer.site,
.review {
  border-color: var(--blog-border) !important;
}

.search,
input[type="search"],
input[type="text"] {
  color: var(--blog-text) !important;
  caret-color: var(--blog-action);
  background: var(--blog-surface) !important;
  border-color: var(--blog-border) !important;
  box-shadow: none;
}

.search::placeholder,
input[type="search"]::placeholder,
input[type="text"]::placeholder {
  color: color-mix(in srgb, var(--blog-muted) 78%, transparent) !important;
}

.search:focus,
input[type="search"]:focus,
input[type="text"]:focus {
  border-color: var(--blog-action) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blog-action) 14%, transparent);
}

.chips button,
.filters button {
  color: var(--blog-muted) !important;
  background: var(--blog-surface) !important;
  border-color: var(--blog-border) !important;
}

.chips button:hover,
.filters button:hover {
  color: var(--blog-text) !important;
  border-color: color-mix(in srgb, var(--blog-action) 52%, var(--blog-border)) !important;
}

.chips button.active,
.filters button.active {
  color: #fff !important;
  background: var(--blog-action) !important;
  border-color: var(--blog-action) !important;
}

.card,
.related-card,
.related a,
.box,
.panel,
.method,
.hero-stats div {
  background: var(--blog-surface) !important;
  border-color: var(--blog-border) !important;
  box-shadow: var(--blog-shadow);
}

.card:hover,
.related-card:hover,
.related a:hover {
  border-color: color-mix(in srgb, var(--blog-action) 52%, var(--blog-border)) !important;
}

.card .thumb,
.thumb {
  background: var(--blog-soft) !important;
}

.card .thumb.gradient {
  background: color-mix(in srgb, var(--blog-action) 10%, var(--blog-soft)) !important;
}

.card .chip {
  color: #fff !important;
  background: rgba(17, 23, 42, 0.78) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}

.chip,
.eyebrow,
.answer strong,
article h3,
article a:not(.cta),
.toc a {
  color: var(--blog-action) !important;
}

.eyebrow {
  border-color: color-mix(in srgb, var(--blog-action) 34%, var(--blog-border)) !important;
  background: color-mix(in srgb, var(--blog-action) 8%, transparent);
}

.hero,
article img {
  border-color: var(--blog-border) !important;
}

.lead {
  color: color-mix(in srgb, var(--blog-text) 90%, var(--blog-muted)) !important;
}

.prompt,
.formula,
pre {
  color: var(--blog-action) !important;
  background: color-mix(in srgb, var(--blog-action) 7%, var(--blog-surface)) !important;
  border-color: var(--blog-action) !important;
}

.answer,
.toc,
.note {
  color: var(--blog-text) !important;
  background: color-mix(in srgb, var(--blog-action) 7%, var(--blog-surface)) !important;
  border-color: color-mix(in srgb, var(--blog-action) 32%, var(--blog-border)) !important;
}

.note {
  border-left-color: var(--blog-signal) !important;
}

code:not(pre code) {
  color: var(--blog-action);
  background: color-mix(in srgb, var(--blog-action) 8%, var(--blog-surface));
  border: 1px solid color-mix(in srgb, var(--blog-action) 18%, var(--blog-border));
  border-radius: 6px;
  padding: 0.1em 0.35em;
}

blockquote {
  margin: 24px 0;
  padding: 14px 18px;
  color: var(--blog-muted);
  background: var(--blog-surface);
  border-left: 3px solid var(--blog-action);
  border-radius: 0 12px 12px 0;
}

table {
  width: 100%;
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 24px 0;
  color: var(--blog-text);
  background: var(--blog-surface);
  border: 1px solid var(--blog-border);
  border-radius: 12px;
}

th,
td {
  min-width: 140px;
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--blog-border);
}

th {
  background: var(--blog-soft);
}

.tools {
  background: color-mix(in srgb, var(--blog-bg) 92%, transparent) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--blog-border) 72%, transparent);
}

.featured {
  color: var(--blog-text) !important;
  background: color-mix(in srgb, var(--blog-action) 7%, var(--blog-surface)) !important;
  border-color: color-mix(in srgb, var(--blog-action) 34%, var(--blog-border)) !important;
  box-shadow: var(--blog-shadow);
}

.featured span {
  color: var(--blog-muted) !important;
}

.featured em {
  color: #fff !important;
  background: var(--blog-action) !important;
}

section.cta {
  color: var(--blog-text) !important;
  background: var(--blog-surface) !important;
  border-color: var(--blog-border) !important;
  box-shadow: var(--blog-shadow);
}

section.cta p {
  color: var(--blog-muted) !important;
}

section.cta a {
  color: #fff !important;
  background: var(--blog-action) !important;
}

article a.cta {
  color: #fff !important;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--blog-action) 20%, transparent);
}

.faq details {
  border-color: var(--blog-border) !important;
}

@media (max-width: 720px) {
  .container,
  .wrap {
    width: 100%;
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 18px !important;
  }

  header.site,
  body > .wrap > header,
  body > .container > header {
    align-items: flex-start !important;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 28px !important;
    padding-bottom: 18px !important;
  }

  header.site nav,
  header nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px !important;
    overflow: visible;
    padding-bottom: 0;
  }

  header.site nav::-webkit-scrollbar,
  header nav::-webkit-scrollbar,
  .chips::-webkit-scrollbar,
  .filters::-webkit-scrollbar {
    display: none;
  }

  header.site nav a,
  header nav a {
    flex: 0 0 auto;
    margin-left: 0 !important;
    font-size: 12px !important;
  }

  h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
    overflow-wrap: anywhere;
  }

  .lede,
  .dek {
    font-size: 16px !important;
  }

  .chips,
  .filters {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    padding-bottom: 7px;
  }

  .stats {
    gap: 18px 24px !important;
  }

  .feed,
  .grid,
  .related-grid,
  .related,
  .toc {
    grid-template-columns: 1fr !important;
    column-count: 1 !important;
  }

  .hero {
    border-radius: 16px !important;
  }

  .box,
  .panel,
  .answer,
  .toc,
  .method,
  section.cta {
    padding: 18px !important;
  }
}

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