:root{
  --bg:#f7f7f5; --panel:#ffffff; --ink:#1d1d1f; --muted:#5f6368; --line:#e3e3e0;
  --accent:#245c7d; --accent-soft:#eef3f7; --radius:10px; --maxw:1080px;
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#141517; --panel:#1c1e21; --ink:#e8e8e6; --muted:#a0a4a8; --line:#2c2f33;
         --accent:#8fbedd; --accent-soft:#1f2a33; }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}

/* Ad slots. The wrapper reserves the banner's exact height before it loads, so
   the ad cannot shift the page when it renders (CLS is a ranking signal). */
.ad-slot{margin:1.6rem auto;display:flex;flex-direction:column;align-items:center;
  gap:.35rem;max-width:100%;overflow:hidden}
.ad-label{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ad-frame{display:flex;align-items:center;justify-content:center;max-width:100%;overflow:hidden}
.ad-slot .ad-frame iframe{max-width:100%;border:0}
@media (max-width:760px){
  /* a 728x90 leaderboard cannot fit a phone: hide the units that would overflow */
  .ad-slot[data-ad-size="728x90"],.ad-slot[data-ad-size="468x60"],
  .ad-slot[data-ad-size="160x600"],.ad-slot[data-ad-size="300x600"]{display:none}
}
.consent{position:fixed;inset:auto 0 0 0;z-index:60;background:var(--panel);color:var(--ink);
  border-top:1px solid var(--line);padding:.9rem 1rem;display:flex;gap:1rem;flex-wrap:wrap;
  align-items:center;justify-content:center;box-shadow:0 -6px 20px rgba(0,0,0,.08)}
.consent p{margin:0;font-size:.9rem}
.consent-actions{display:flex;gap:.5rem}
.consent button{font:inherit;padding:.35rem .9rem;border-radius:6px;border:1px solid var(--line);
  background:var(--accent);color:#fff;cursor:pointer}
.consent button[data-consent="denied"]{background:transparent;color:var(--ink)}
.skip:focus{left:8px;top:8px;background:var(--panel);padding:8px 12px;border-radius:6px;z-index:9}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.site-header{border-bottom:1px solid var(--line);background:var(--panel)}
.header-inner{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;padding:14px 20px}
.brand{font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.nav{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px}
.nav a{color:var(--muted)}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;padding-top:28px;padding-bottom:48px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0;font-size:13px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--line)}
.post-header h1{font-size:clamp(26px,4vw,38px);line-height:1.2;margin:0 0 10px;letter-spacing:-.02em}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--muted);font-size:13px;margin:0 0 20px}
.post-figure{margin:0 0 24px}
.post-figure img{width:100%;border-radius:var(--radius);background:var(--accent-soft);display:block}
.post-figure figcaption{font-size:12px;color:var(--muted);margin-top:6px}
.toc{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:0 0 28px}
.toc h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.toc ol{margin:0;padding-left:20px}
.toc li{margin:4px 0;font-size:15px}
.post-body h2{font-size:24px;margin:34px 0 10px;letter-spacing:-.01em;scroll-margin-top:20px}
.post-body h3{font-size:18px;margin:24px 0 8px}
.post-body p{margin:0 0 16px}
.post-body ul,.post-body ol{margin:0 0 16px;padding-left:22px}
.guide-nav,.related{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:28px 0}
.guide-nav h2,.related h2{font-size:15px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.guide-nav ul{list-style:none;margin:0;padding:0}
.guide-nav li{margin:6px 0}
.cards{list-style:none;margin:0;padding:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card img{width:100%;aspect-ratio:474/274;object-fit:cover;background:var(--accent-soft)}
.card .card-body{padding:12px 14px 16px}
.card h3{font-size:16px;margin:0 0 6px;line-height:1.35}
.card p{margin:0;font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:2px 9px;margin-bottom:8px}
.faq{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:28px 0}
.faq h2{font-size:20px;margin:0 0 12px}
.faq dt{font-weight:600;margin-top:14px}
.faq dd{margin:4px 0 0;color:var(--muted)}
.pager{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:28px 0 8px;font-size:14px}
.pager a,.pager span{border:1px solid var(--line);background:var(--panel);border-radius:6px;padding:6px 11px}
.pager [aria-current]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.sidebar{font-size:14px}
.sidebar h2{font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.sidebar ul{list-style:none;margin:0 0 24px;padding:0}
.sidebar li{margin:6px 0}
.page-header h1{font-size:clamp(24px,3.4vw,34px);margin:0 0 8px;letter-spacing:-.02em}
.lede{color:var(--muted);max-width:70ch;margin:0 0 22px}
.child-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.child-nav a{font-size:13px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:4px 12px}
.site-footer{border-top:1px solid var(--line);background:var(--panel);padding:26px 0;font-size:14px;color:var(--muted)}
.site-footer nav{display:flex;flex-wrap:wrap;gap:14px;margin:8px 0}
.muted{color:var(--muted);font-size:13px}
.index-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:24px 0 40px}
.index-grid h2{font-size:17px;margin:0 0 8px}
.index-grid ul{list-style:none;margin:0;padding:0;font-size:14px}
.index-grid li{margin:5px 0}