/* Alwaysbeat blog — shares the landing/docs paper/ink design tokens. */
:root{
  --paper:#f4f2ec; --panel:#fbfaf6; --ink:#141210; --ink2:#4b453c;
  --rule:#d8d3c6; --rule2:#e7e3d8; --accent:#0f7a43; --accent2:#116b3d;
  --code:#16140f; --codefg:#e9e5d8; --codedim:#8c8672; --sig:#c0432f;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#141210; --panel:#1c1a16; --ink:#ece7db; --ink2:#b3ab98;
    --rule:#33302a; --rule2:#3d3a33; --accent:#3fae74; --accent2:#57c088;
    --code:#0e0d0a; --codefg:#e9e5d8; --codedim:#8c8672; --sig:#e0836f;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
::selection{background:#0f7a4326}

.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--panel);padding:.5rem .8rem;border:1px solid var(--rule);border-radius:6px}

/* top bar (matches docs) */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:60px;border-bottom:1px solid var(--rule);
  position:sticky;top:0;background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(8px);z-index:20}
.brand{color:var(--ink);font-weight:640;letter-spacing:-.02em;font-size:1.05rem}
.brand:hover{text-decoration:none}
.topnav{display:flex;align-items:center;gap:22px;font-size:.92rem}
.topnav a{color:var(--ink2)}
.topnav a:hover{color:var(--ink);text-decoration:none}
.topnav a.cur{color:var(--ink);font-weight:560}
.topnav .cta{color:var(--accent);font-weight:560}

/* shared centered column */
.wrap{max-width:720px;margin:0 auto;padding:56px 24px 96px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--codedim)}

/* --- index (post list) --- */
.blog-head{margin-bottom:8px}
.blog-head h1{font-size:2.4rem;font-weight:640;letter-spacing:-.025em;margin:.3rem 0 .2rem}
.blog-head p{color:var(--ink2);margin:0;font-size:1.08rem}
.post-list{margin-top:40px;display:flex;flex-direction:column;gap:2px}
.post-item{display:block;padding:22px 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.post-item:first-child{border-top:0}
.post-item:hover{text-decoration:none}
.post-item time{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--codedim)}
.post-item h2{font-size:1.4rem;font-weight:620;letter-spacing:-.02em;line-height:1.2;margin:.35rem 0 .3rem;color:var(--ink)}
.post-item:hover h2{color:var(--accent)}
.post-item .excerpt{color:var(--ink2);margin:0;font-size:1.02rem;line-height:1.55}
.post-item .more{color:var(--accent);font-size:.94rem;font-weight:560;margin-top:.5rem;display:inline-block}

/* --- article (post page) --- */
.article header{margin-bottom:28px}
.back{font-size:.92rem;color:var(--ink2);display:inline-block;margin-bottom:26px}
.article h1{font-size:2.3rem;font-weight:640;letter-spacing:-.028em;line-height:1.1;margin:.3rem 0 .4rem}
.article .meta{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--codedim)}
.article h2{font-size:1.45rem;font-weight:620;letter-spacing:-.02em;margin:2.4rem 0 .6rem}
.article h3{font-size:1.12rem;font-weight:600;margin:1.8rem 0 .5rem}
.article p{margin:1.05rem 0}
.article ul,.article ol{margin:1.05rem 0;padding-left:1.4rem}
.article li{margin:.4rem 0}
.article .lead{font-size:1.16rem;color:var(--ink2)}
.article blockquote{margin:1.4rem 0;padding:.4rem 0 .4rem 1.2rem;border-left:3px solid var(--accent);
  color:var(--ink2);font-style:italic}
.article code{font-family:var(--mono);font-size:.86em;background:var(--rule2);padding:.12em .4em;border-radius:4px;word-break:break-word}
.article pre{background:var(--code);color:var(--codefg);border-radius:10px;padding:16px 18px;
  overflow-x:auto;margin:1.2rem 0;font-size:.86rem;line-height:1.55}
.article pre code{background:none;padding:0;color:inherit;font-size:1em;white-space:pre}
.article pre .c{color:var(--codedim)}
.article pre .s{color:#e6c07b}
.article hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
.article .signoff{margin-top:1.8rem;color:var(--ink2);font-style:italic}
.postnav{margin-top:44px;border-top:1px solid var(--rule);padding-top:22px;font-size:.98rem}
.cta-box{margin-top:40px;padding:22px 24px;background:var(--panel);border:1px solid var(--rule);border-radius:12px}
.cta-box strong{display:block;font-size:1.1rem;margin-bottom:.3rem}
.cta-box p{margin:.2rem 0 .9rem;color:var(--ink2)}
.cta-box .go{display:inline-block;background:var(--accent);color:#fff;padding:.5rem .9rem;border-radius:8px;
  font-weight:560;font-size:.95rem}
.cta-box .go:hover{background:var(--accent2);text-decoration:none}

footer{border-top:1px solid var(--rule);margin-top:40px}
.foot{max-width:720px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:20px;
  font-size:.9rem;color:var(--ink2);flex-wrap:wrap}
.foot .sp{flex:1}
.foot .brand{font-size:.95rem}

@media (max-width:560px){
  .wrap{padding:36px 20px 72px}
  .blog-head h1{font-size:2rem}
  .article h1{font-size:1.9rem}
}