:root{
  --bg:#0b0e15; --panel:#12161f; --line:rgba(255,255,255,0.09);
  --ink:#eef1f6; --muted:rgba(232,236,244,0.62); --faint:rgba(232,236,244,0.4);
  --acc:#7E6BE6; --acc2:#4FB8D9;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.6;
  font-family:-apple-system,"SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;}
.mono{font-family:ui-monospace,"SF Mono",Menlo,monospace;}
a{color:color-mix(in oklab,var(--acc2) 70%,var(--ink));text-decoration:none;}
a:hover{text-decoration:underline;}
.wrap{max-width:760px;margin:0 auto;padding:0 24px;}
header{padding:40px 0 26px;border-bottom:1px solid var(--line);}
.crumbs{display:flex;gap:8px;font-size:12.5px;color:var(--faint);margin-bottom:24px;}
.crumbs a{color:var(--faint);}
.crumbs a:hover{color:var(--ink);text-decoration:none;}
.brand{display:flex;align-items:center;gap:12px;}
.brand-badge{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),var(--acc2));font-size:20px;}
.brand-name{font-size:22px;font-weight:680;letter-spacing:-0.02em;}
.brand-name span{color:var(--muted);font-weight:550;}
h1{font-size:34px;font-weight:680;letter-spacing:-0.03em;margin:28px 0 6px;}
.updated{font-size:13px;color:var(--faint);}
.lede{font-size:17px;color:var(--muted);margin:22px 0 0;}
.tldr{margin:30px 0 0;padding:18px 20px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--acc) 14%,transparent) inset;}
.tldr b{color:var(--ink);}
main{padding:8px 0 40px;}
h2{font-size:19px;font-weight:640;letter-spacing:-0.01em;margin:40px 0 10px;}
h3{font-size:15.5px;font-weight:640;margin:24px 0 6px;color:var(--ink);}
p{margin:10px 0;color:var(--muted);}
p strong,li strong{color:var(--ink);font-weight:600;}
ul{margin:10px 0;padding-inline-start:20px;color:var(--muted);}
li{margin:6px 0;}
.cards{display:grid;gap:12px;margin:34px 0 0;}
.card{display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:18px 20px;border-radius:14px;background:var(--panel);border:1px solid var(--line);}
.card:hover{border-color:color-mix(in oklab,var(--acc) 40%,var(--line));text-decoration:none;}
.card .t{color:var(--ink);font-weight:600;}
.card .d{color:var(--faint);font-size:13.5px;}
.card .arw{color:var(--faint);font-size:18px;}
footer{border-top:1px solid var(--line);padding:26px 0 64px;font-size:13px;color:var(--faint);}
.footrow{display:flex;gap:16px;flex-wrap:wrap;}
.footrow a{color:var(--muted);}
@media (max-width:560px){h1{font-size:28px;}}