:root{--ink:#0f172a;--sub:#475569;--line:#e2e8f0;--bg:#f8fafc;--card:#fff;--acc:#0e7490;--acc2:#0891b2;--warn:#b45309;--ok:#15803d}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.85 "Hiragino Sans","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif}
.wrap{max-width:780px;margin:0 auto;padding-inline:18px}
a{color:var(--acc)}
a:hover{color:var(--acc2)}
header.site{background:var(--ink);color:#fff}
.bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 18px;padding-block:12px}
.logo{color:#fff;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:.02em}
.logo .mark{display:inline-block;background:#22d3ee;color:var(--ink);border-radius:6px;padding:0 6px;margin-right:4px;font-family:ui-monospace,Consolas,monospace}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.nav a{color:#cbd5e1;text-decoration:none}
.nav a[aria-current],.nav a:hover{color:#fff;text-decoration:underline}
main{padding-block:26px 40px}
h1{font-size:clamp(24px,5vw,32px);line-height:1.4;margin:.2em 0 .5em}
h2{font-size:22px;line-height:1.5;margin:2em 0 .6em;padding-bottom:6px;border-bottom:2px solid var(--line)}
h3{font-size:18px;margin:1.6em 0 .4em}
p{margin:.7em 0}
.lede{font-size:17px;color:var(--ink);background:var(--card);border-left:4px solid var(--acc);padding:12px 16px;border-radius:0 8px 8px 0}
.meta,.adnote{font-size:13px;color:var(--sub)}
.adnote{margin:0 0 8px}
.box{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 18px;margin:1.2em 0}
.box.warn{border-color:#fcd34d;background:#fffbeb}
.box.ok{border-color:#86efac;background:#f0fdf4}
.box h3{margin-top:.2em}
ol.steps{padding-left:0;list-style:none;counter-reset:s}
ol.steps>li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;margin:10px 0;background:var(--card);border:1px solid var(--line);border-radius:10px}
ol.steps>li::before{content:counter(s);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;text-align:center;line-height:26px;font-size:14px}
code,kbd{font-family:ui-monospace,Consolas,monospace;font-size:.92em;background:#e2e8f0;border-radius:4px;padding:1px 5px}
pre{background:#0f172a;color:#e2e8f0;border-radius:8px;padding:12px 14px;overflow-x:auto;font-size:14px;line-height:1.6}
pre code{background:none;padding:0;color:inherit}
.tbl{overflow-x:auto;margin:1em 0}
table{border-collapse:collapse;width:100%;min-width:520px;background:var(--card);font-size:15px}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
th{background:#f1f5f9}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:1em 0}
.card{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--acc)}
.card b{display:block;color:var(--acc);margin-bottom:4px}
.card span{font-size:14px;color:var(--sub)}
details.qa{background:var(--card);border:1px solid var(--line);border-radius:8px;margin:8px 0;padding:8px 14px}
details.qa summary{cursor:pointer;font-weight:700}
.check li{margin:.35em 0}
.src{font-size:14px;color:var(--sub)}
footer.site{background:#e2e8f0;font-size:13px;color:var(--sub);padding-block:18px}
.fnav{display:flex;flex-wrap:wrap;gap:4px 16px;margin-bottom:6px}
footer .warn{margin:.4em 0}
figure.fig{margin:1.2em 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px}
figure.fig img{display:block;width:100%;height:auto;max-width:100%}
figure.fig figcaption{font-size:13px;color:var(--sub);margin-top:6px}
img.hero{display:block;width:100%;height:auto;border-radius:12px;margin:.4em 0 1em}
.card img.thumb{display:block;width:calc(100% + 32px);max-width:none;height:auto;margin:-14px -16px 10px;border-radius:10px 10px 0 0}
.card{overflow:hidden}