:root{
  --bg: oklch(0.14 0.02 260);
  --bg-2: oklch(0.17 0.025 265);
  --bg-3: oklch(0.21 0.03 270);
  --surface: oklch(0.19 0.028 268);
  --line: oklch(0.28 0.02 268);
  --line-2: oklch(0.34 0.025 268);
  --fg: oklch(0.97 0.005 90);
  --fg-2: oklch(0.82 0.01 260);
  --fg-3: oklch(0.62 0.02 265);
  --accent: oklch(0.72 0.2 290);
  --accent-2: oklch(0.85 0.15 200);
  --accent-3: oklch(0.78 0.18 20);
  --good: oklch(0.78 0.17 150);
  --warn: oklch(0.82 0.15 75);

  /* Themeable surfaces used across components */
  --section-alt: oklch(0.12 0.02 260);
  --card-bg: oklch(0.19 0.028 268 / .4);
  --card-bg-2: oklch(0.19 0.028 268 / .6);
  --nav-bg: oklch(0.19 0.028 268 / 0.5);
  --nav-bg-scroll: oklch(0.14 0.02 260 / 0.7);
  --input-bg: oklch(0.14 0.02 260 / .6);
  --terminal-bg: oklch(0.11 0.02 260 / .5);
  --wordmark-grad-from: oklch(0.3 0.02 260);
  --wordmark-grad-to: oklch(0.16 0.02 260);
  --wordmark-slash: oklch(0.22 0.04 280);
  --tweaks-bg: oklch(0.14 0.02 260 / .9);
  --accent-tint: oklch(0.72 0.2 290 / .15);
  --accent-tint-strong: oklch(0.72 0.2 290 / .5);

  --maxw: 1320px;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --sans: 'Geist', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

[data-accent="cyan"]{ --accent: oklch(0.82 0.16 200); --accent-2: oklch(0.85 0.15 290);}
[data-accent="lime"]{ --accent: oklch(0.88 0.2 130); --accent-2: oklch(0.82 0.16 200);}
[data-accent="peach"]{ --accent: oklch(0.8 0.17 40); --accent-2: oklch(0.85 0.15 330);}
[data-accent="blue"]{ --accent: #3172f0; --accent-2: oklch(0.82 0.16 200);}

[data-theme="light"]{
  --bg: oklch(0.985 0.003 90);
  --bg-2: oklch(0.97 0.005 90);
  --bg-3: oklch(0.94 0.006 90);
  --surface: oklch(0.98 0.004 90);
  --line: oklch(0.88 0.008 90);
  --line-2: oklch(0.78 0.01 90);
  --fg: oklch(0.18 0.02 260);
  --fg-2: oklch(0.36 0.02 260);
  --fg-3: oklch(0.52 0.02 260);
  --accent: oklch(0.42 0.24 285);
  --accent-2: oklch(0.48 0.18 200);
  --good: oklch(0.58 0.17 150);
  --warn: oklch(0.65 0.15 75);

  --section-alt: oklch(0.965 0.005 90);
  --card-bg: oklch(1 0 0 / .6);
  --card-bg-2: oklch(1 0 0 / .8);
  --nav-bg: oklch(1 0 0 / .6);
  --nav-bg-scroll: oklch(1 0 0 / .85);
  --input-bg: oklch(1 0 0 / .8);
  --terminal-bg: oklch(0.94 0.006 90);
  --wordmark-grad-from: oklch(0.82 0.015 260);
  --wordmark-grad-to: oklch(0.92 0.008 260);
  --wordmark-slash: oklch(0.78 0.02 280);
  --tweaks-bg: oklch(1 0 0 / .95);
  --accent-tint: oklch(0.42 0.24 285 / .1);
  --accent-tint-strong: oklch(0.42 0.24 285 / .45);
}
[data-theme="light"][data-accent="blue"]{ --accent: #2554c4; --accent-tint: #2554c41a; --accent-tint-strong: #2554c466; }
[data-theme="light"][data-accent="cyan"]{ --accent: oklch(0.42 0.15 200); --accent-tint: oklch(0.42 0.15 200 / .1); --accent-tint-strong: oklch(0.42 0.15 200 / .45); }
[data-theme="light"][data-accent="lime"]{ --accent: oklch(0.42 0.19 130); --accent-tint: oklch(0.42 0.19 130 / .1); --accent-tint-strong: oklch(0.42 0.19 130 / .45); }
[data-theme="light"][data-accent="peach"]{ --accent: oklch(0.48 0.18 40); --accent-tint: oklch(0.48 0.18 40 / .1); --accent-tint-strong: oklch(0.48 0.18 40 / .45); }

[data-theme="light"] .glass{
  background: linear-gradient(180deg, oklch(1 0 0 / .85), oklch(0.98 0.004 90 / .7));
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px -20px oklch(0.3 0.02 260 / .1);
}
[data-theme="light"] body::before{ opacity: .02; mix-blend-mode: multiply; }
[data-theme="light"] .dotgrid{ background-image: radial-gradient(oklch(0.2 0.02 260 / .12) 1px, transparent 1px); }
[data-theme="light"] .btn-primary{ background: var(--fg); color: var(--bg); }
[data-theme="light"] .mesh::before{ opacity: .25; }
[data-theme="light"] .mesh::after{ opacity: .18; }
[data-theme="light"] .chip{ background: oklch(0 0 0 / .03); }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: var(--sans);
  background: var(--bg);
  color: var(--fg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grain overlay */
body::before{
  content:'';
  position: fixed; inset:0;
  pointer-events: none;
  z-index: 999;
  opacity: .04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
body[data-grain="false"]::before{ display:none; }

::selection{ background: var(--accent); color: var(--bg); }

a{ color: inherit; text-decoration: none; }
button{ font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

.container{ max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

.eyebrow{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before{
  content:'';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}

.serif{ font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; }
.serif-i{ font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono{ font-family: var(--mono); }

.h-display{
  font-size: clamp(52px, 8.2vw, 132px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0;
}
.h-xl{
  font-size: clamp(36px, 4.6vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 500;
  margin: 0;
}
.h-lg{
  font-size: clamp(26px, 2.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 500;
  margin: 0;
}
.h-md{
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-weight: 500;
  margin: 0;
}

/* Hairline border */
.hairline{ border: 1px solid var(--line); }

/* Glass card */
.glass{
  background: linear-gradient(180deg, oklch(0.21 0.03 270 / .6), oklch(0.17 0.025 265 / .4));
  border: 1px solid var(--line);
  border-radius: 18px;
  backdrop-filter: blur(20px) saturate(1.2);
  box-shadow: 0 0 0 1px oklch(1 0 0 / 0.02) inset, 0 20px 60px -20px oklch(0 0 0 / .5);
}

/* Buttons */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  transition: all .25s cubic-bezier(.22,.61,.36,1);
  white-space: nowrap;
}
.btn-primary{
  background: var(--fg);
  color: var(--bg);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px -8px oklch(1 0 0 / .3); }
.btn-accent{
  background: var(--accent);
  color: #fff;
}
.btn-accent:hover{ transform: translateY(-1px); box-shadow: 0 10px 30px -8px var(--accent); }
.btn-ghost{
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line-2);
}
.btn-ghost:hover{ background: var(--surface); border-color: var(--fg-3); }

.chip{
  display: inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: oklch(1 0 0 / 0.04);
  border: 1px solid var(--line);
  font-size: 12px;
  font-family: var(--mono);
  color: var(--fg-2);
}

section{ position: relative; }

/* kill mesh visually in favor of calmer backgrounds */
.mesh{ display: none; }

.reveal{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.reveal.in{ opacity: 1; transform: translateY(0); }

/* Dot grid */
.dotgrid{
  background-image: radial-gradient(oklch(1 0 0 / .08) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* utilities */
.row{ display:flex; }
.col{ display:flex; flex-direction:column; }
.center{ display:flex; align-items:center; justify-content:center; }
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-8{gap:32px}.gap-10{gap:40px}

.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

/* sparkline */
.sparkline path{ fill: none; stroke: var(--accent); stroke-width: 1.5; }

/* blinking cursor */
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.cursor{ display:inline-block; width:.5ch; background: var(--accent); animation: blink 1s steps(1) infinite; }

/* marquee */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee{ display:flex; gap: 56px; animation: marquee 38s linear infinite; width:max-content; }

/* shimmer */
@keyframes shimmer { to { background-position: 200% 0; } }
.shimmer{
  background: linear-gradient(90deg, var(--fg-3) 0%, var(--fg) 50%, var(--fg-3) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 3s linear infinite;
}

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

/* ────────── Responsive system ─────────────────────────────────────
   Breakpoints:
     mobile ≤ 640px
     tablet ≤ 1024px
     desktop > 1024px

   Strategy: use these utility classes on containers instead of inline
   gridTemplateColumns / padding. Layout decisions live here, not in JSX.
   ────────────────────────────────────────────────────────────────── */

/* Safety net — no content should cause horizontal page scroll */
html, body { overflow-x: hidden; max-width: 100%; }

/* Form inputs — 16px min prevents iOS zoom-on-focus */
input, textarea, select {
  font-family: inherit;
  font-size: 16px;
}

/* Section spacing — replaces inline padding: '120px 0' */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(48px, 7vw, 96px) 0; }

/* Grid utilities — mobile-first stacking */
.grid-2, .grid-3, .grid-4 {
  display: grid;
  gap: clamp(16px, 2.4vw, 24px);
}
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Auto-fit grid — intrinsically responsive, no breakpoints needed.
   min=280 means cards stack once they'd be narrower than that. */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(16px, 2.4vw, 24px);
}
.grid-auto-sm {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(14px, 2vw, 20px);
}

/* Split: asymmetric two-column (e.g., 1fr 1.6fr) — stacks on tablet */
.split {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.split-even {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

/* Stack: any flex/grid child stacks vertically on mobile */
.stack-mobile { display: flex; flex-direction: row; gap: 24px; }

/* Table overflow wrapper — use around tables with large minWidth */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -8px;
  padding: 0 8px;
}

/* Tablet breakpoint ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .split, .split-even { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .blog-shell { grid-template-columns: 1fr !important; }
  .blog-share-rail { display: none !important; }
}

/* Mobile breakpoint ──────────────────────────────────────────── */
@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-auto, .grid-auto-sm { grid-template-columns: 1fr; }
  .stack-mobile { flex-direction: column; align-items: stretch; }

  /* Type down-scale on phone — existing .h-* already use clamp() so they scale,
     but push the minimum a little lower. */
  .h-display { font-size: clamp(40px, 11vw, 72px); }
  .h-xl { font-size: clamp(30px, 8.5vw, 48px); }
  .h-lg { font-size: clamp(24px, 6.4vw, 34px); }

  /* Denser cards on mobile */
  .glass { border-radius: 14px; }
}

/* Hide on mobile / desktop helpers */
.hide-mobile { display: revert; }
.show-mobile { display: none; }
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .show-mobile { display: revert !important; }
}