/* Trove — design system */
:root {
  --paper:#FCFBF9; --panel:#FFFFFF; --sunk:#F5F3EF;
  --ink:#16181D; --body:#41454D; --muted:#787D86;
  --line:#E6E2DA; --line-soft:#F0EDE7;
  --accent:#0F5F57; --accent-hi:#0B4A44; --accent-wash:#E7F1EF;
  --amber:#A85B12; --amber-wash:#FBF1E5;
  --code-bg:#14161B; --code-ink:#D8DBE2; --code-line:#262A33;
  --radius:10px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(16,18,22,.04), 0 8px 24px -12px rgba(16,18,22,.10);
  --font:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0C0D10; --panel:#131519; --sunk:#191C21;
    --ink:#EDEBE6; --body:#B4B9C2; --muted:#828892;
    --line:#252932; --line-soft:#1D2027;
    --accent:#3FB3A3; --accent-hi:#5FCBBB; --accent-wash:#12211F;
    --amber:#D68A3F; --amber-wash:#241A0F;
    --code-bg:#0A0B0E; --code-line:#20242C;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px -14px rgba(0,0,0,.7);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--font); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{color:var(--ink); line-height:1.15; letter-spacing:-.021em; margin:0}
a{color:var(--accent); text-decoration:none}
a:hover{color:var(--accent-hi)}
code,pre{font-family:var(--mono)}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}
.mono{font-family:var(--mono)}

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--paper) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid var(--line-soft);
}
.nav-in{display:flex; align-items:center; gap:32px; height:62px}
.brand{display:flex; align-items:center; gap:9px; color:var(--ink); font-weight:640; letter-spacing:-.02em; font-size:17px}
.brand svg{display:block}
.nav-links{display:flex; gap:26px; margin-left:auto; align-items:center}
.nav-links a{color:var(--body); font-size:14.5px; font-weight:480}
.nav-links a:hover{color:var(--ink)}
@media(max-width:720px){.nav-links a.hide-sm{display:none}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 18px; border-radius:8px; font-size:14.5px; font-weight:560;
  border:1px solid transparent; cursor:pointer; transition:.16s ease; white-space:nowrap;
  font-family:inherit;
}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hi); border-color:var(--accent-hi); color:#fff}
@media (prefers-color-scheme:dark){.btn-primary{color:#06100F}.btn-primary:hover{color:#06100F}}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{background:var(--sunk); color:var(--ink)}
.btn-lg{padding:13px 24px; font-size:15.5px; border-radius:9px}
.btn[disabled]{opacity:.5; cursor:not-allowed}

/* ---------- hero ---------- */
.hero{padding:104px 0 84px; position:relative}
.hero::before{
  content:""; position:absolute; inset:-140px 0 auto; height:420px; pointer-events:none;
  background:radial-gradient(64% 100% at 50% 0%, var(--accent-wash) 0%, transparent 70%);
  opacity:.85;
}
.hero>*{position:relative}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:560;
  letter-spacing:.04em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-wash); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  padding:5px 12px; border-radius:100px; margin-bottom:22px;
}
h1.display{font-size:clamp(2.4rem,5.4vw,4rem); font-weight:660; letter-spacing:-.034em; max-width:16ch}
.lede{font-size:clamp(1.05rem,1.6vw,1.24rem); color:var(--body); max-width:58ch; margin:22px 0 0; line-height:1.6}
.cta-row{display:flex; gap:12px; margin-top:34px; flex-wrap:wrap}
.hero-note{margin-top:18px; font-size:13.5px; color:var(--muted)}

/* ---------- sections ---------- */
section{padding:88px 0; border-top:1px solid var(--line-soft)}
.sec-head{max-width:66ch; margin-bottom:48px}
.sec-head h2{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:640; letter-spacing:-.028em}
.sec-head p{margin:14px 0 0; font-size:1.05rem; color:var(--body)}
.kicker{font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:14px}

/* ---------- feature grid ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.g2,.g3,.g4{grid-template-columns:1fr}}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:26px; transition:.18s ease;
}
.card:hover{border-color:color-mix(in srgb,var(--accent) 34%,var(--line))}
.card h3{font-size:1.06rem; font-weight:600; margin-bottom:9px; letter-spacing:-.015em}
.card p{margin:0; font-size:14.7px; line-height:1.62}
.ico{
  width:36px; height:36px; border-radius:9px; display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent); margin-bottom:16px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,transparent);
}
.ico svg{width:18px; height:18px}

/* ---------- metrics ---------- */
.metrics{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
@media(max-width:760px){.metrics{grid-template-columns:repeat(2,1fr)}}
.metric{background:var(--panel); padding:26px 22px}
.metric .n{font-size:clamp(1.6rem,3vw,2.1rem); font-weight:660; color:var(--ink); letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.metric .l{font-size:13.4px; color:var(--muted); margin-top:5px; line-height:1.45}

/* ---------- code ---------- */
.code-shell{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--code-bg)}
.code-bar{display:flex; align-items:center; gap:4px; padding:9px 12px; border-bottom:1px solid var(--code-line); background:color-mix(in srgb,var(--code-bg) 82%,#fff 3%)}
.tab{
  padding:5px 12px; border-radius:6px; font-size:12.8px; font-weight:520; color:#8E96A4;
  cursor:pointer; border:none; background:transparent; font-family:var(--mono);
}
.tab:hover{color:#C7CCD6}
.tab[aria-selected="true"]{background:#22262F; color:#F2F4F8}
.copy{margin-left:auto; font-size:12.2px; color:#8E96A4; background:transparent; border:1px solid var(--code-line); padding:4px 10px; border-radius:6px; cursor:pointer; font-family:var(--mono)}
.copy:hover{color:#F2F4F8; border-color:#3A404C}
pre{margin:0; padding:20px; overflow-x:auto; font-size:13.1px; line-height:1.7; color:var(--code-ink)}
pre code{color:inherit}
.tok-k{color:#7FD1C1} .tok-s{color:#E3B778} .tok-c{color:#5F6875; font-style:italic}
.tok-p{color:#8FB6E8} .tok-n{color:#D8A0D0}
.split{display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr}}

/* ---------- steps ---------- */
.steps{counter-reset:s; display:grid; gap:2px}
.step{display:flex; gap:18px; padding:22px 0; border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:none}
.step-n{
  flex:none; width:29px; height:29px; border-radius:8px; display:grid; place-items:center;
  background:var(--sunk); border:1px solid var(--line); color:var(--ink);
  font-family:var(--mono); font-size:12.8px; font-weight:600;
}
.step h3{font-size:1rem; margin-bottom:5px}
.step p{margin:0; font-size:14.6px}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel)}
table{border-collapse:collapse; width:100%; font-size:14.4px; min-width:520px}
th,td{text-align:left; padding:13px 18px; border-bottom:1px solid var(--line-soft)}
th{font-weight:600; color:var(--ink); font-size:12.6px; letter-spacing:.05em; text-transform:uppercase; background:var(--sunk)}
tr:last-child td{border-bottom:none}
td.mono{font-family:var(--mono); font-size:13px}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-soft); padding:44px 0; margin-top:0}
.foot{display:flex; gap:24px; align-items:center; flex-wrap:wrap; font-size:13.6px; color:var(--muted)}
.foot a{color:var(--muted)} .foot a:hover{color:var(--ink)}
.foot .sp{margin-left:auto}

/* ---------- utility ---------- */
.pill{display:inline-block; font-family:var(--mono); font-size:11.8px; font-weight:600; padding:2.5px 8px; border-radius:5px; letter-spacing:.02em}
.pill-get{background:var(--accent-wash); color:var(--accent)}
.pill-post{background:var(--amber-wash); color:var(--amber)}
.pill-del{background:#FCE9E9; color:#B4322F}
@media (prefers-color-scheme:dark){.pill-del{background:#2A1414; color:#E88C88}}
.hr{height:1px; background:var(--line-soft); border:none; margin:0}
.center{text-align:center}
.center .lede,.center h1.display,.center .sec-head{margin-left:auto; margin-right:auto}