:root{
  --bg:#ffffff; --fg:#14161c; --muted:#5b6270; --line:#e3e6ec;
  --card:#f7f8fa; --accent:#0a8f80; --accent-fg:#ffffff; --code:#eef1f5;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0e1016; --fg:#e8eaf0; --muted:#98a0b0; --line:#252a35;
    --card:#161a23; --accent:#00e0c6; --accent-fg:#06221f; --code:#1b202b;
  }
}
:root[data-theme="dark"]{
  --bg:#0e1016; --fg:#e8eaf0; --muted:#98a0b0; --line:#252a35;
  --card:#161a23; --accent:#00e0c6; --accent-fg:#06221f; --code:#1b202b;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",
    "Yu Gothic UI",system-ui,sans-serif;
  line-height:1.75; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px; margin:0 auto; padding:56px 16px 96px}
header{display:flex; align-items:center; gap:14px; margin-bottom:40px}
header img{width:44px; height:44px; border-radius:10px}
header b{font-size:1.05rem; letter-spacing:.01em}
h1{font-size:1.75rem; line-height:1.3; margin:0 0 8px; letter-spacing:-.01em}
h2{font-size:1.05rem; margin:36px 0 10px; padding-top:20px; border-top:1px solid var(--line)}
p,li{color:var(--fg)}
.lead{color:var(--muted); margin:0 0 8px}
ul{padding-left:1.2em}
li{margin:.3em 0}
a{color:var(--accent)}
code{background:var(--code); padding:.15em .45em; border-radius:5px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em}
.card{background:var(--card); border:1px solid var(--line);
  border-radius:12px; padding:20px 22px; margin:20px 0}
footer{margin-top:56px; padding-top:20px; border-top:1px solid var(--line);
  color:var(--muted); font-size:.88rem}
nav a{margin-right:18px}
@media (max-width:520px){ .wrap{padding:36px 16px 72px} h1{font-size:1.45rem} }