:root{
  --bg:#fbfbfd; --fg:#1c1c22; --muted:#5d5d6b; --line:#e2e2ea;
  --card:#fff; --accent:#3b5bdb; --accent-fg:#fff; --code:#f2f2f7;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131318; --fg:#e8e8ee; --muted:#a0a0b0; --line:#2c2c36;
    --card:#1b1b22; --accent:#7c93f5; --accent-fg:#10121a; --code:#23232c;
    --shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  line-height:1.8; font-size:16px;
}
.wrap{max-width:860px; margin:0 auto; padding:0 20px}
header{border-bottom:1px solid var(--line); padding:44px 0 34px; margin-bottom:38px}
header .kicker{color:var(--muted); font-size:.82rem; letter-spacing:.12em; margin:0 0 10px}
h1{font-size:1.5rem; line-height:1.5; margin:0 0 14px; font-weight:700}
header p{color:var(--muted); margin:0; font-size:.95rem}

nav.toc{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin-bottom:40px; box-shadow:var(--shadow);
}
nav.toc h2{font-size:.8rem; letter-spacing:.1em; color:var(--muted); margin:0 0 12px; font-weight:600}
nav.toc ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px}
nav.toc a{
  display:inline-block; padding:6px 13px; border:1px solid var(--line);
  border-radius:999px; text-decoration:none; color:var(--fg); font-size:.88rem;
}
nav.toc a:hover{border-color:var(--accent); color:var(--accent)}

section{margin-bottom:52px; scroll-margin-top:20px}
h2.ch{font-size:1.18rem; margin:0 0 6px; padding-bottom:10px; border-bottom:2px solid var(--line)}
h2.ch .num{color:var(--accent); margin-right:.5em}
.ch-note{color:var(--muted); font-size:.9rem; margin:10px 0 22px}
h3.sub{
  font-size:.86rem; font-weight:600; color:var(--muted);
  margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);
  letter-spacing:.02em;
}
h3.sub:first-of-type{margin-top:0}

.item{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:15px 17px; margin-bottom:11px; box-shadow:var(--shadow);
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
}
.item .meta{flex:1 1 340px; min-width:0}
.item .sec{
  display:inline-block; font-size:.74rem; color:var(--muted);
  border:1px solid var(--line); border-radius:4px; padding:1px 7px; margin-bottom:5px;
}
.item .name{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9rem; word-break:break-all; display:block; margin-bottom:3px;
}
.item .desc{color:var(--muted); font-size:.87rem; line-height:1.6}
.dl{
  flex:0 0 auto; background:var(--accent); color:var(--accent-fg);
  text-decoration:none; padding:8px 18px; border-radius:7px;
  font-size:.87rem; font-weight:600; white-space:nowrap;
}
.dl:hover{filter:brightness(1.08)}
.dl.pending{background:transparent; color:var(--muted); border:1px dashed var(--line); font-weight:400; cursor:not-allowed}

.callout{
  background:var(--code); border-left:3px solid var(--accent);
  border-radius:0 8px 8px 0; padding:15px 18px; margin:0 0 34px; font-size:.91rem;
}
.callout h3{margin:0 0 8px; font-size:.95rem}
.callout ol,.callout ul{margin:8px 0 0; padding-left:1.3em}
.callout li{margin-bottom:5px}
.callout code{background:var(--bg); padding:1px 6px; border-radius:4px; font-size:.85em}

footer{border-top:1px solid var(--line); padding:26px 0 60px; color:var(--muted); font-size:.85rem}
footer p{margin:0 0 8px}
a{color:var(--accent)}
@media (max-width:560px){
  .item{gap:12px}
  .dl{width:100%; text-align:center}
}

/* 章ページ用 */
.crumb{margin:0 0 26px; font-size:.88rem}
.crumb a{text-decoration:none}
.chnav{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between;
  border-top:1px solid var(--line); padding-top:22px; margin-top:44px;
}
.chnav a{
  display:inline-block; padding:8px 15px; border:1px solid var(--line);
  border-radius:8px; text-decoration:none; color:var(--fg); font-size:.88rem;
}
.chnav a:hover{border-color:var(--accent); color:var(--accent)}
.chcard{
  display:block; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:16px 18px; margin-bottom:11px; box-shadow:var(--shadow);
  text-decoration:none; color:var(--fg);
}
.chcard:hover{border-color:var(--accent)}
.chcard .num{color:var(--accent); font-weight:600; margin-right:.6em}
.chcard .title{font-weight:600}
.chcard .note{display:block; color:var(--muted); font-size:.87rem; margin-top:5px; line-height:1.6}
.chcard .count{float:right; color:var(--muted); font-size:.8rem; font-weight:400}