:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --muted: #475569;
  --line: #e2e8f0;
  --brand: #059669; /* emerald-600 */
  --brand-ink: #064e3b;
  --ring: rgba(5,150,105,.25);
  --shadow: 0 10px 30px rgba(2,6,23,.08);
  --radius: 16px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Inter,Arial,"Noto Sans",sans-serif;color:var(--ink);background:linear-gradient(#fff,var(--bg));}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600;box-shadow:var(--shadow)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn:hover{filter:brightness(.98)}
.badge{display:inline-flex;align-items:center;padding:.35rem .6rem;border-radius:999px;background:#eef2ff;color:#334155;font-size:.75rem;border:1px solid var(--line)}
.badge.green{background:#d1fae5;color:#065f46;border-color:#a7f3d0}
.badge.red{background:#fee2e2;color:#991b1b;border-color:#fecaca}
header.sticky{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--line)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between}
.nav a{font-size:.95rem;color:#1f2937;margin-left:18px}
.nav a:hover{color:#000}
.brand{display:flex;align-items:center;gap:12px}
.brand small{display:block;color:var(--muted);font-size:.75rem}
.grid{display:grid;gap:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card .pad{padding:20px}
h1{font-size:clamp(28px,4vw,44px);line-height:1.1;margin:0}
h2{font-size:clamp(24px,3vw,34px);margin:0 0 4px}
h3{font-size:18px;margin:0 0 4px}
p{color:var(--muted);line-height:1.6}
.section{padding:64px 0;border-top:1px solid var(--line)}
small, .muted{color:var(--muted)}
.hero{padding:56px 0}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.kv{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center}
@media (max-width: 900px){.kv{grid-template-columns:1fr} .nav .links{display:none} }
.list{padding-left:18px}
.list li{margin:.4rem 0;color:var(--muted)}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,"Liberation Mono","Courier New",monospace;font-size:.8rem;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:.15rem .35rem}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.tr{display:flex;gap:12px;justify-content:space-between;align-items:center;border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff}
.search{width:100%;max-width:340px;border:1px solid var(--line);padding:.7rem .9rem;border-radius:10px;outline:none}
.search:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--ring)}
footer{padding:36px 0;border-top:1px solid var(--line);color:var(--muted)}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
/* tiny helpers */
.row{display:flex;gap:10px;align-items:center}
.col2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width: 800px){.col2{grid-template-columns:1fr}}