/* ==========================================================================
   NEUMO/// — Design System
   Neumorphism · Light & Dark · Vanilla CSS, zero dependencies
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  color-scheme: light;
  --bg: #e6ebf2;
  --surface: #e6ebf2;
  --surface-alt: #dfe5ee;
  --text: #2a3241;
  --text-dim: #5c6579;
  --text-faint: #8790a3;
  --accent: #5b53f0;
  --accent-2: #00b39a;
  --accent-contrast: #ffffff;
  --danger: #e0526b;
  --shadow-light: #ffffff;
  --shadow-dark: #b3bccc;
  --shadow-dark-soft: #c3cbda;
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;

  --sh-convex: 9px 9px 18px var(--shadow-dark), -9px -9px 18px var(--shadow-light);
  --sh-convex-sm: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
  --sh-convex-lg: 14px 14px 28px var(--shadow-dark), -14px -14px 28px var(--shadow-light);
  --sh-concave: inset 6px 6px 12px var(--shadow-dark), inset -6px -6px 12px var(--shadow-light);
  --sh-concave-lg: inset 9px 9px 18px var(--shadow-dark), inset -9px -9px 18px var(--shadow-light);
  --sh-flat: 3px 3px 6px var(--shadow-dark-soft), -3px -3px 6px var(--shadow-light);
  --sh-hover: 12px 12px 22px var(--shadow-dark), -12px -12px 22px var(--shadow-light);

  --font-display: 'Space Grotesk', 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', monospace;

  --container: 1280px;
  --header-h: 76px;
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg: #242835;
  --surface: #242835;
  --surface-alt: #2a2f3d;
  --text: #e9edf6;
  --text-dim: #a7afc2;
  --text-faint: #757d90;
  --accent: #8b84ff;
  --accent-2: #2fe0c4;
  --accent-contrast: #171a22;
  --danger: #f37a8f;
  --shadow-light: #2e3444;
  --shadow-dark: #191c25;
  --shadow-dark-soft: #1e2230;
}

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

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

img{ max-width: 100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font-family: inherit; }
code, pre{ font-family: var(--font-mono); }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--text);
}
h1{ font-size: clamp(2rem, 4vw, 3.2rem); line-height:1.08; }
h2{ font-size: clamp(1.5rem, 2.6vw, 2.2rem); line-height:1.15; }
h3{ font-size: 1.3rem; }
p{ margin: 0 0 1em; color: var(--text-dim); }

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.wrap-narrow{ max-width: 820px; margin: 0 auto; padding: 0 24px; }

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

/* ---------- Neumorphic primitives ---------- */
.neu{ background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--sh-convex); }
.neu-sm{ background: var(--surface); border-radius: var(--radius-sm); box-shadow: var(--sh-convex-sm); }
.neu-lg{ background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-convex-lg); }
.neu-in{ background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--sh-concave); }
.neu-in-lg{ background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-concave-lg); }
.neu-flat{ background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--sh-flat); }

.neu-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background: var(--surface); color: var(--text);
  border:none; border-radius: var(--radius-sm);
  box-shadow: var(--sh-convex-sm);
  padding: 12px 20px;
  font-family: var(--font-body); font-weight:600; font-size:.95rem;
  cursor:pointer; transition: box-shadow .15s ease, transform .15s ease, color .15s ease;
}
.neu-btn:hover{ box-shadow: var(--sh-hover); }
.neu-btn:active{ box-shadow: var(--sh-concave); transform: translateY(1px); }
.neu-btn.is-active{ box-shadow: var(--sh-concave); color: var(--accent); }
.neu-btn.accent{ color: var(--accent); }
.neu-btn.primary{
  background: var(--accent); color:#fff; box-shadow: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
}
.neu-btn.primary:hover{ filter: brightness(1.06); }
.neu-btn.small{ padding: 8px 14px; font-size:.82rem; border-radius: var(--radius-sm); }
.neu-btn svg{ width:16px; height:16px; flex:none; }

.neu-icon-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background: var(--surface); border:none; border-radius: 14px; box-shadow: var(--sh-convex-sm);
  cursor:pointer; color: var(--text-dim); transition: box-shadow .15s ease, color .15s ease;
  flex: none;
}
.neu-icon-btn:hover{ color: var(--accent); }
.neu-icon-btn.is-active{ box-shadow: var(--sh-concave); color: var(--accent); }
.neu-icon-btn svg{ width:19px; height:19px; }

input[type="text"], input[type="search"], input[type="number"], select, textarea{
  font-family: var(--font-body); font-size: .95rem; color: var(--text);
  background: var(--surface); border: none; border-radius: var(--radius-sm);
  box-shadow: var(--sh-concave); padding: 12px 16px; width:100%;
}
input[type="text"]::placeholder, input[type="search"]::placeholder{ color: var(--text-faint); }
select{ appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%235c6579' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
  background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius: 6px;
  background: var(--surface); box-shadow: var(--sh-concave); cursor:pointer; outline:none;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:20px; height:20px; border-radius:50%;
  background: var(--accent); box-shadow: 3px 3px 8px var(--shadow-dark), -2px -2px 6px var(--shadow-light);
  cursor:pointer; border: 3px solid var(--surface);
}
input[type="range"]::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background: var(--accent); border: 3px solid var(--surface); cursor:pointer;
}

input[type="color"]{
  -webkit-appearance:none; appearance:none; width:44px; height:44px; border:none; border-radius:14px;
  background: var(--surface); box-shadow: var(--sh-convex-sm); padding:4px; cursor:pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper{ padding:0; border-radius:10px; overflow:hidden; }
input[type="color"]::-webkit-color-swatch{ border:none; border-radius:10px; }

.field{ margin-bottom:18px; }
.field-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.field-label{ font-size:.82rem; font-weight:600; color: var(--text-dim); }
.field-value{ font-family: var(--font-mono); font-size:.78rem; color: var(--accent); background: var(--surface); box-shadow: var(--sh-flat); padding:3px 9px; border-radius: var(--radius-pill); }
.field-with-color{ display:flex; gap:10px; align-items:center; }
.field-with-color input[type="text"]{ font-family: var(--font-mono); font-size:.85rem; }

.checkbox-row{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.neu-checkbox{ width:22px; height:22px; border-radius:7px; background:var(--surface); box-shadow: var(--sh-concave); flex:none; position:relative; }
.neu-checkbox.checked::after{ content:''; position:absolute; inset:5px; border-radius:4px; background: var(--accent); }

.tag-pill{ display:inline-flex; align-items:center; gap:6px; background:var(--surface); box-shadow: var(--sh-flat); border-radius: var(--radius-pill); padding:6px 14px; font-size:.78rem; font-weight:600; color: var(--text-dim); }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 40; height: var(--header-h);
  background: var(--bg); border-bottom: 1px solid transparent;
  backdrop-filter: blur(6px);
}
.site-header .container{ height:100%; display:flex; align-items:center; gap: 28px; }
.brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight:700; font-size:1.25rem; flex:none; }
.brand-mark{ width:38px; height:38px; border-radius:12px; background:var(--surface); box-shadow: var(--sh-convex-sm); display:flex; align-items:center; justify-content:center; color: var(--accent); font-weight:700; font-family: var(--font-mono); font-size:.95rem; }
.brand small{ color:var(--accent); }

.main-nav{ display:flex; align-items:center; gap: 6px; flex:1; }
.main-nav a{ padding: 9px 14px; border-radius: var(--radius-sm); font-size:.92rem; font-weight:600; color: var(--text-dim); transition: box-shadow .15s ease, color .15s ease; }
.main-nav a:hover, .main-nav a.active{ box-shadow: var(--sh-flat); color: var(--text); }
.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; flex:none; }
.nav-toggle{ display:none; }

.search-mini{ position:relative; display:flex; align-items:center; }
.search-mini input{ width: 220px; padding: 10px 14px 10px 40px; font-size:.85rem; border: 1px solid var(--shadow-dark-soft); }.search-mini svg{ position:absolute; left:14px; width:16px; height:16px; color: var(--text-faint); pointer-events:none; }
@media (max-width: 980px){
  .main-nav{ position:fixed; inset: var(--header-h) 16px auto 16px; flex-direction:column; align-items:stretch;
    background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--sh-convex-lg); padding:14px;
    transform: translateY(-12px); opacity:0; pointer-events:none; transition: all .2s ease; }
  .main-nav.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .main-nav a{ padding:12px 16px; }
  .search-mini{ display:none; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- Buttons for theme ---------- */
.theme-toggle{ position:relative; }
.theme-toggle svg{ position:absolute; transition: opacity .2s ease, transform .3s ease; }
.theme-toggle .icon-sun{ opacity:1; transform: rotate(0deg); }
.theme-toggle .icon-moon{ opacity:0; transform: rotate(-40deg); }
html[data-theme="dark"] .theme-toggle .icon-sun{ opacity:0; transform: rotate(40deg); }
html[data-theme="dark"] .theme-toggle .icon-moon{ opacity:1; transform: rotate(0deg); }

/* ---------- Hero / Search ---------- */
.hero{ padding: 64px 0 40px; text-align:center; }
.hero .eyebrow{ display:inline-block; margin-bottom:18px; }
.hero h1{ max-width: 780px; margin-left:auto; margin-right:auto; }
.hero .lead{ max-width: 620px; margin: 0 auto 34px; font-size:1.08rem; }
.hero-search{ max-width: 640px; margin: 0 auto; position:relative; }
.hero-search .neu-in{ display:flex; align-items:center; padding: 6px 8px 6px 22px; gap:10px; border: 1px solid var(--shadow-dark-soft); }
.hero-search .neu-in:focus-within{ border-color: var(--accent); }
.hero-search svg.search-icon{ width:20px; height:20px; color: var(--text-faint); flex:none; }
.hero-search input{ background:transparent; box-shadow:none; padding: 14px 4px; font-size:1rem; }
.hero-search .neu-btn{ flex:none; }
.hero-stats{ display:flex; gap:28px; justify-content:center; margin-top:28px; flex-wrap:wrap; }
.hero-stats div{ text-align:center; }
.hero-stats strong{ display:block; font-family: var(--font-display); font-size:1.5rem; color:var(--accent); }
.hero-stats span{ font-size:.78rem; color: var(--text-faint); text-transform:uppercase; letter-spacing:.05em; }

.search-results-panel{
  position:absolute; left:0; right:0; top: calc(100% + 10px); z-index:30;
  background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--sh-convex-lg);
  padding: 10px; text-align:left; max-height: 420px; overflow-y:auto; display:none;
}
.search-results-panel.open{ display:block; }
.search-result-item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius: var(--radius-sm); }
.search-result-item:hover{ background: var(--surface-alt); }
.search-result-item .sri-icon{ width:38px; height:38px; border-radius:11px; background:var(--surface); box-shadow: var(--sh-flat); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; font-size:1rem; }
.search-result-item .sri-title{ font-weight:600; font-size:.92rem; }
.search-result-item .sri-cat{ font-size:.74rem; color: var(--text-faint); }
.search-empty{ padding: 18px; text-align:center; color: var(--text-faint); font-size:.88rem; }

/* ---------- Sections / grids ---------- */
section{ padding: 46px 0; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom: 28px; flex-wrap:wrap; }
.section-head p{ margin:0; }
.section-head .see-all{ font-size:.85rem; font-weight:700; color:var(--accent); white-space:nowrap; }

.cat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cat-card{ padding: 22px 20px; display:flex; flex-direction:column; gap: 10px; transition: box-shadow .2s ease, transform .2s ease; }
.cat-card:hover{ box-shadow: var(--sh-hover); transform: translateY(-2px); }
.cat-card .cat-icon{ width:46px; height:46px; border-radius:14px; background:var(--surface); box-shadow: var(--sh-flat); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.cat-card .cat-icon svg{ width:22px; height:22px; }
.cat-card h3{ margin:0; font-size:1.02rem; }
.cat-card p{ font-size:.85rem; margin:0; }
.cat-card .cat-count{ font-size:.72rem; color: var(--text-faint); font-family: var(--font-mono); margin-top:auto; }

.tool-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.tool-card{ padding: 22px; display:flex; flex-direction:column; gap:12px; position:relative; transition: box-shadow .2s ease, transform .2s ease; }
.tool-card:hover{ box-shadow: var(--sh-hover); transform: translateY(-2px); }
.tool-card .tc-top{ display:flex; align-items:center; justify-content:space-between; }
.tool-card .tc-icon{ width:42px; height:42px; border-radius:13px; background:var(--surface); box-shadow: var(--sh-flat); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.tool-card .tc-icon svg{ width:20px; height:20px; }
.tool-card h3{ margin:0; font-size:1.02rem; }
.tool-card p{ font-size:.85rem; margin:0; }
.fav-btn{ background:none; border:none; cursor:pointer; color: var(--text-faint); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; transition: color .15s ease, box-shadow .15s ease; }
.fav-btn:hover{ box-shadow: var(--sh-flat); }
.fav-btn svg{ width:18px; height:18px; }
.fav-btn.active{ color:#f0a94b; }
.fav-btn.active svg{ fill: currentColor; }
.tool-card .tc-cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); font-family: var(--font-mono); }

@media (max-width: 980px){ .cat-grid{ grid-template-columns: repeat(2,1fr); } .tool-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .cat-grid{ grid-template-columns: 1fr; } .tool-grid{ grid-template-columns: 1fr; } .hero-stats{ gap:18px; } }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ padding: 18px 0 0; font-size:.82rem; color: var(--text-faint); display:flex; gap:8px; flex-wrap:wrap; }
.breadcrumbs a{ color: var(--text-dim); font-weight:600; }
.breadcrumbs a:hover{ color: var(--accent); }

/* ---------- Tool page layout ---------- */
.tool-hero{ padding: 28px 0 10px; }
.tool-hero .tool-title-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; justify-content:space-between; }
.tool-hero .tt-left{ display:flex; align-items:center; gap:16px; }
.tool-hero .tt-icon{ width:56px; height:56px; border-radius:16px; box-shadow: var(--sh-convex-sm); background:var(--surface); display:flex; align-items:center; justify-content:center; color:var(--accent); flex:none; }
.tool-hero .tt-icon svg{ width:26px; height:26px; }
.tool-hero h1{ margin:0 0 4px; font-size: clamp(1.5rem,3vw,2.1rem); }
.tool-hero .tt-desc{ margin:0; max-width:560px; font-size:.95rem; }

.tool-workspace{ display:grid; grid-template-columns: 340px 1fr; gap: 22px; padding: 26px 0 10px; align-items:start; }
.tool-controls{ padding: 22px; position:sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y:auto; }
.tool-controls h4{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin: 20px 0 12px; }
.tool-controls h4:first-child{ margin-top:0; }
.control-group + .control-group{ border-top: 1px solid var(--shadow-dark-soft); margin-top:14px; padding-top:14px; opacity:.001; }
.layer-block{ background: var(--surface-alt); border-radius: var(--radius-sm); box-shadow: var(--sh-flat); padding: 14px; margin-bottom:12px; }
.layer-block-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.layer-block-head span{ font-size:.78rem; font-weight:700; color:var(--text-dim); }
.layer-remove{ background:none; border:none; color: var(--danger); cursor:pointer; font-size:.75rem; font-weight:700; }
.add-layer-btn{ width:100%; margin-top:4px; }

.tool-preview-col{ display:flex; flex-direction:column; gap: 18px; }
.preview-stage{ padding: 40px; min-height: 340px; display:flex; align-items:center; justify-content:center; position:relative; overflow:auto; }
.preview-stage.checker{
  background-image: linear-gradient(45deg, var(--surface-alt) 25%, transparent 25%), linear-gradient(-45deg, var(--surface-alt) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface-alt) 75%), linear-gradient(-45deg, transparent 75%, var(--surface-alt) 75%);
  background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0px;
}
.stage-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom: -4px; }
.stage-toolbar .neu-btn.small.is-active{ color: var(--accent); }

.preview-box{ width:220px; height:150px; background: var(--surface); display:flex; align-items:center; justify-content:center; color: var(--text-dim); font-family: var(--font-mono); font-size:.8rem; }
.preview-flex-container{ width:100%; min-height:220px; background: var(--surface-alt); border-radius: var(--radius-sm); padding:16px; display:flex; }
.preview-flex-container .fitem{ background: var(--accent); color:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center; font-family: var(--font-mono); font-weight:700; font-size:.85rem; min-width:50px; min-height:50px; opacity:.92; }
.preview-flex-container .fitem:nth-child(odd){ background: var(--accent-2); }

.code-panel{ padding: 0; overflow:hidden; }
.code-panel-head{ display:flex; align-items:center; justify-content:space-between; padding: 14px 18px; border-bottom: 1px solid var(--shadow-dark-soft); }
.code-panel-head .cph-title{ font-family: var(--font-mono); font-size:.8rem; color: var(--text-faint); display:flex; gap:8px; align-items:center; }
.code-panel-head .dot{ width:9px; height:9px; border-radius:50%; }
.dot.r{ background:#f2726a; } .dot.y{ background:#f0c355; } .dot.g{ background:#5fd68f; }
.code-panel-actions{ display:flex; gap:8px; }
.code-panel pre{ margin:0; padding: 18px; font-size:.84rem; line-height:1.7; overflow-x:auto; color: var(--accent); background: var(--surface-alt); }
.code-panel code{ white-space:pre; }
.code-panel .tok-prop{ color: var(--text-dim); }
.code-panel .tok-sel{ color: var(--accent-2); font-weight:600; }

.explain-panel{ padding: 22px; }
.explain-panel h3{ margin-bottom:14px; }
.prop-explain{ margin-bottom:14px; padding-bottom:14px; border-bottom:1px solid var(--shadow-dark-soft); }
.prop-explain:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.prop-explain code{ background: var(--surface-alt); box-shadow: var(--sh-flat); padding:2px 8px; border-radius:6px; font-size:.8rem; color: var(--accent); }
.prop-explain p{ margin:6px 0 0; font-size:.87rem; }

.examples-strip{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px; }
.example-card{ padding:18px; text-align:center; cursor:pointer; transition: box-shadow .15s ease; }
.example-card:hover{ box-shadow: var(--sh-hover); }
.example-card .ex-swatch{ height:70px; border-radius: var(--radius-sm); margin-bottom:10px; background: var(--surface-alt); box-shadow: var(--sh-flat); }
.example-card span{ font-size:.8rem; font-weight:600; color: var(--text-dim); }

@media (max-width: 980px){
  .tool-workspace{ grid-template-columns:1fr; }
  .tool-controls{ position:static; max-height:none; }
  .examples-strip{ grid-template-columns:1fr; }
}

/* ---------- FAQ ---------- */
.faq-item{ padding: 4px 22px; margin-bottom:14px; }
.faq-q{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 16px 0; cursor:pointer; font-weight:700; font-size:.98rem; }
.faq-q svg{ width:18px; height:18px; flex:none; transition: transform .2s ease; color: var(--text-faint); }
.faq-item.open .faq-q svg{ transform: rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition: max-height .25s ease; font-size:.9rem; }
.faq-item.open .faq-a{ max-height: 400px; padding-bottom:16px; }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:20px; }
.post-card{ display:flex; flex-direction:column; gap:12px; padding:20px; }
.post-card .post-cat{ align-self:flex-start; }
.post-card h3{ margin:0; font-size:1.05rem; }
.post-card .post-meta{ font-size:.76rem; color: var(--text-faint); font-family: var(--font-mono); }
.post-card p{ font-size:.87rem; margin:0; }
.article-body{ padding: 8px 0 40px; }
.article-body h2{ margin-top:1.6em; }
.article-body h3{ margin-top:1.4em; }
.article-body pre{ background: var(--surface); box-shadow: var(--sh-concave); padding:18px; border-radius: var(--radius-sm); overflow-x:auto; color:var(--accent); font-size:.85rem; }
.article-body code{ background: var(--surface); box-shadow: var(--sh-flat); padding:2px 7px; border-radius:6px; font-size:.85rem; }
.article-body ul, .article-body ol{ color: var(--text-dim); }
.article-meta{ display:flex; gap:14px; align-items:center; color: var(--text-faint); font-size:.82rem; font-family: var(--font-mono); margin-bottom:24px; flex-wrap:wrap; }
@media (max-width: 980px){ .blog-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .blog-grid{ grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer{ padding: 60px 0 40px; margin-top:40px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.footer-col h4{ font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color: var(--text-faint); margin-bottom:14px; }
.footer-col a{ display:block; padding: 6px 0; font-size:.87rem; color: var(--text-dim); }
.footer-col a:hover{ color: var(--accent); }
.footer-bottom{ margin-top:40px; padding-top:24px; border-top: 1px solid var(--shadow-dark-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:.8rem; color: var(--text-faint); }
@media (max-width: 820px){ .footer-grid{ grid-template-columns: repeat(2,1fr); } }

/* ---------- Utility ---------- */
.mt-0{ margin-top:0; } .mb-0{ margin-bottom:0; }
.text-center{ text-align:center; }
.badge-new{ background: var(--accent-2); color:#08312b; font-size:.65rem; font-weight:800; text-transform:uppercase; padding:3px 8px; border-radius: var(--radius-pill); letter-spacing:.04em; }
.empty-state{ text-align:center; padding: 60px 20px; }
.empty-state svg{ width:64px; height:64px; color: var(--text-faint); margin: 0 auto 16px; }
.toast{
  position:fixed; bottom: 26px; left:50%; transform: translateX(-50%) translateY(20px); opacity:0; pointer-events:none;
  background: var(--surface); box-shadow: var(--sh-convex-lg); padding: 14px 24px; border-radius: var(--radius-pill);
  font-size:.88rem; font-weight:600; color: var(--accent); z-index:100; transition: all .25s ease; display:flex; align-items:center; gap:10px;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }
.toast svg{ width:18px; height:18px; }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--accent); color:#fff; padding:12px 18px; border-radius:0 0 10px 0; z-index:200; }
.skip-link:focus{ left:0; }