:root{
  --bg:#ffffff; --fg:#16181d; --muted:#5c6470; --line:#e4e7ec;
  --accent:#2f6f4f; --card:#fafbfc; --code:#f3f5f7;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#111317; --fg:#e8eaed; --muted:#9aa2ae; --line:#262a31;
         --accent:#7fc4a0; --card:#171a1f; --code:#1b1f25; }
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
header{border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;
  padding-block:18px;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;
  color:var(--fg);text-decoration:none}
.mark{width:22px;height:22px;flex:0 0 22px}
nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0;font-size:14px}
nav a{color:var(--muted);text-decoration:none}
nav a:hover,nav a[aria-current]{color:var(--fg)}
h1{font-size:clamp(1.6rem,4vw,2.3rem);line-height:1.25;letter-spacing:-.02em;
  margin:56px 0 14px;max-width:22ch}
.lede{color:var(--muted);font-size:1.05rem;margin:0 0 32px;max-width:56ch}
section{padding-block:34px;border-top:1px solid var(--line)}
h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:600;margin:0 0 18px}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:9px;padding:18px}
.card h3{margin:0 0 6px;font-size:.97rem;font-weight:600}
.card p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55}
dl{margin:0;display:grid;gap:14px}
dt{font-weight:600;font-size:.95rem}
dd{margin:3px 0 0;color:var(--muted);font-size:.9rem}
a.link,article a,.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
a.link:hover,article a:hover,.prose a:hover{border-bottom-color:currentColor}
footer{border-top:1px solid var(--line);margin-top:20px;padding-block:26px;
  color:var(--muted);font-size:.84rem;display:flex;justify-content:space-between;
  gap:14px;flex-wrap:wrap}
footer a{color:var(--muted)}

/* long-form pages */
.prose{max-width:64ch}
.prose h2,article h2{font-size:1.15rem;text-transform:none;letter-spacing:-.01em;
  color:var(--fg);margin:36px 0 10px}
.prose p,article p,article li{margin:0 0 14px}
.meta{color:var(--muted);font-size:.88rem;margin:-6px 0 30px}
code{font:.88em/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--code);padding:1px 5px;border-radius:4px}
pre{background:var(--code);border:1px solid var(--line);border-radius:8px;
  padding:14px 16px;overflow-x:auto;margin:0 0 18px}
pre code{background:none;padding:0;font-size:.85rem}

/* lists of posts / releases */
.list{list-style:none;margin:0;padding:0}
.list li{padding:16px 0;border-bottom:1px solid var(--line)}
.list li:first-child{padding-top:0}
.list a{color:var(--fg);text-decoration:none;font-weight:600}
.list a:hover{color:var(--accent)}
.list p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
.list time{color:var(--muted);font-size:.84rem}
.table{width:100%;border-collapse:collapse;font-size:.92rem;margin:0 0 18px}
.table th,.table td{text-align:left;padding:9px 10px 9px 0;border-bottom:1px solid var(--line)}
.table th{color:var(--muted);font-weight:600;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.table td:last-child,.table th:last-child{text-align:right;padding-right:0}
.scroll{overflow-x:auto}

/* speed test */
.st{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0 0 24px}
.st .card{text-align:left}
.st .v{font-size:1.9rem;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.st .u{color:var(--muted);font-size:.85rem;margin-left:4px}
.btn{font:inherit;font-weight:600;background:var(--fg);color:var(--bg);border:0;border-radius:8px;
  padding:10px 18px;cursor:pointer}
.btn:disabled{opacity:.5;cursor:default}
.status{color:var(--muted);font-size:.9rem;margin:14px 0 0;min-height:1.6em}
