:root{
  --teal:#248F92; --deep:#146B72; --mint:#D9EEEE; --mint-soft:#EAF6F4;
  --bg:#F4F8F8; --card:#FFFFFF; --text:#102123; --muted:#688083; --line:#e2ecec;
}
@media (prefers-color-scheme: dark){
  :root{
    --teal:#2AA6A9; --deep:#1E8F97; --mint:#16282A; --mint-soft:#102022;
    --bg:#071213; --card:#102022; --text:#F4FBFA; --muted:#9AB0B1; --line:#1c3033;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:760px; margin:0 auto; padding:24px 20px 64px}
header.hero{
  background:linear-gradient(160deg,var(--deep),var(--teal)); color:#fff;
  border-radius:0 0 28px 28px; padding:40px 20px 34px; text-align:center;
}
header.hero .inner{max-width:760px;margin:0 auto}
.logo{width:88px;height:88px;border-radius:20px;display:block;margin:0 auto 14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25)}
header.hero h1{margin:.2em 0 .1em;font-size:1.9rem;letter-spacing:-.02em}
header.hero p{margin:.2em 0 0;opacity:.92}
nav.top{margin-top:16px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
nav.top a{background:rgba(255,255,255,.16);color:#fff;padding:8px 16px;border-radius:999px;font-weight:600}
nav.top a:hover{background:rgba(255,255,255,.28);text-decoration:none}
h2{font-size:1.3rem;margin:1.9em 0 .5em;letter-spacing:-.01em}
h3{font-size:1.05rem;margin:1.4em 0 .3em}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin:16px 0}
.muted{color:var(--muted)}
.small{font-size:.9rem}
ol.steps{padding-left:1.2em}
ol.steps li{margin:.35em 0}
code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--mint-soft);padding:2px 6px;border-radius:6px;font-size:.92em;
  direction:ltr;unicode-bidi:embed}
.pill{display:inline-block;background:var(--mint);color:var(--deep);font-weight:600;
  font-size:.8rem;padding:4px 10px;border-radius:999px;margin-bottom:8px}
footer{border-top:1px solid var(--line);margin-top:40px;padding-top:20px;
  color:var(--muted);font-size:.9rem;text-align:center}
.btn{display:inline-block;background:var(--teal);color:#fff;font-weight:600;
  padding:12px 22px;border-radius:14px;margin:6px 6px 0 0}
.btn:hover{background:var(--deep);text-decoration:none}