:root { --fg:#1a1a1c; --muted:#6b6b70; --line:#e2e2e6; --bg:#fff; --accent:#111; }
@media (prefers-color-scheme: dark) {
  :root { --fg:#ececed; --muted:#9a9aa0; --line:#2c2c30; --bg:#141416; --accent:#fff; }
}
* { box-sizing: border-box; }
body {
  margin:0; padding:0 20px; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.85; -webkit-text-size-adjust:100%;
}
.wrap { max-width:720px; margin:0 auto; padding:56px 0 96px; }
header { border-bottom:1px solid var(--line); padding-bottom:28px; margin-bottom:40px; }
.icon { width:96px; height:96px; border-radius:22px; display:block; margin-bottom:20px; }
h1 { font-size:1.75rem; margin:0 0 6px; letter-spacing:-.01em; }
h2 { font-size:1.15rem; margin:44px 0 12px; padding-top:8px; }
h3 { font-size:1rem; margin:28px 0 8px; }
.lede { color:var(--muted); margin:0; }
table { border-collapse:collapse; width:100%; margin:16px 0; font-size:.95rem; }
th,td { border-bottom:1px solid var(--line); padding:10px 12px 10px 0; text-align:left; vertical-align:top; }
th { font-weight:600; white-space:nowrap; }
a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
nav { margin:0 0 8px; font-size:.9rem; }
nav a { margin-right:18px; color:var(--muted); }
footer { margin-top:72px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.85rem; }
hr.lang { border:0; border-top:1px solid var(--line); margin:64px 0 40px; }
ul { padding-left:1.25em; }
li { margin:6px 0; }
code { font-size:.9em; background:rgba(128,128,128,.14); padding:2px 6px; border-radius:4px; }

/* スクリーンショット付きの説明 */
figure { margin:20px 0 28px; }
figure img {
  display:block; width:100%; max-width:300px; height:auto;
  border:1px solid var(--line); border-radius:14px;
}
figcaption { color:var(--muted); font-size:.85rem; margin-top:10px; }
/* 図と文章を横に並べる（画面が広いとき） */
.shot { display:grid; grid-template-columns:300px 1fr; gap:28px; align-items:start; margin:24px 0 36px; }
.shot figure { margin:0; }
.shot .body > :first-child { margin-top:0; }
.shot h3 { margin-top:0; }
@media (max-width:640px) {
  .shot { grid-template-columns:1fr; gap:16px; }
  figure img { max-width:100%; }
}

/* 複数のスクリーンショットを横に並べる（狭い画面では折り返す） */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:18px; margin:20px 0 32px; align-items:start; }
.gallery figure { margin:0; }
.gallery figure img { max-width:100%; }