:root{
  --bg:#ffffff; --fg:#111827; --muted:#6b7280; --accent:#0b6cff; --card:#f9fafb; --border:#e5e7eb;
}
:root.dark{
  --bg:#0b1220; --fg:#e6e7ea; --muted:#9aa3af; --accent:#6aa5ff; --card:#0f172a; --border:#1f2937;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:var(--bg); color:var(--fg);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px; margin:auto; padding:1.25rem}
header{
  border-bottom:1px solid var(--border); background:var(--bg); position:sticky; top:0; z-index:20;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
}
.nav-left{display:flex; align-items:center; gap:.75rem}
.nav img{height:36px}
.nav a{padding:.5rem .75rem; border-radius:.5rem}
.nav a[aria-current="page"]{background:var(--card)}
.nav-links{display:flex; gap:.25rem; flex-wrap:wrap}
.nav-actions{display:flex; gap:.5rem; align-items:center}
button, .btn{
  display:inline-block; border:1px solid var(--border); background:var(--bg); color:var(--fg);
  padding:.6rem .9rem; border-radius:.6rem; cursor:pointer;
}
.btn-primary{background:var(--accent); color:#fff; border-color:transparent}
.btn-primary:hover{filter:brightness(0.95)}
main{padding:1rem 0}
.hero{
  display:grid; gap:1rem; grid-template-columns:1.1fr; padding:2rem 0;
}
.hero-card{
  background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1.25rem;
}
.grid{display:grid; gap:1rem}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; padding:1rem}
h1,h2,h3{line-height:1.25}
h1{font-size:2rem; margin:.25rem 0 .75rem}
h2{font-size:1.5rem; margin:1.25rem 0 .5rem}
h3{font-size:1.15rem; margin:.75rem 0 .4rem}
.lead{color:var(--muted); font-size:1.05rem}
ul.check{list-style:none; padding-left:0; margin:0}
ul.check li{padding-left:1.5rem; position:relative; margin:.35rem 0}
ul.check li::before{content:"✓"; position:absolute; left:.2rem; color:var(--accent)}
.section{margin:2rem 0}
.kbd{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background:var(--card); border:1px solid var(--border); border-radius:.4rem; padding:.1rem .35rem}
footer{
  border-top:1px solid var(--border); margin-top:2rem; background:var(--bg);
}
.footer-grid{
  display:grid; gap:1rem; grid-template-columns:repeat(4,1fr);
}
small, .muted{color:var(--muted)}
input, textarea, select{
  width:100%; padding:.7rem .8rem; border-radius:.6rem; border:1px solid var(--border); background:var(--bg); color:var(--fg);
}
label{display:block; font-weight:600; margin:.6rem 0 .25rem}
.form-row{display:grid; gap:.75rem; grid-template-columns:1fr 1fr}
.alert{border-radius:.6rem; padding:.75rem; background:#eaf3ff; border:1px solid #d8e7ff}
:focus-visible{outline:3px solid color-mix(in oklab, var(--accent), #fff 40%); outline-offset:2px}

/* Responsive */
@media (max-width:900px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .form-row{grid-template-columns:1fr}
}
@media (max-width:580px){
  .nav-links{display:none}
}

/* Utility spacing */
.mt-0{margin-top:0}.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}