:root{color-scheme:dark;font-family:Inter,"Noto Sans JP","Hiragino Sans",system-ui,sans-serif;background:#171715;color:#f3ead8;--ink:#171715;--amber:#f0a426;--amber-soft:#ffd47d;--paper:#f3ead8;--muted:#c7bdab;--line:rgba(243,234,216,.2)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;background:radial-gradient(circle at 86% 0,#2a261f 0,var(--ink) 34rem);font-size:16px;line-height:1.85}
a{color:var(--amber-soft);text-underline-offset:.18em}
a:focus-visible{outline:3px solid #fff0b2;outline-offset:3px}
.article-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px;padding:.6rem clamp(1rem,4vw,3rem);border-bottom:1px solid var(--line);background:#171715e8}
.article-brand{color:var(--paper);font:700 .8rem ui-monospace,monospace;letter-spacing:.14em;text-decoration:none}
.article-header nav{display:flex;gap:1.4rem;flex-wrap:wrap;font-size:.86rem}
.article-shell{width:min(880px,100% - 2rem);margin:0 auto;padding:clamp(2rem,6vw,4.5rem) 0 4rem}
.article-index{width:min(1040px,100% - 2rem)}
.eyebrow{margin:0 0 .8rem;color:var(--amber);font:700 .72rem ui-monospace,monospace;letter-spacing:.13em}
h1,h2,h3{line-height:1.45}
h1{max-width:800px;margin:.3rem 0 1rem;font-size:clamp(2rem,6vw,3.2rem);letter-spacing:-.035em}
h2{margin:2.7rem 0 .7rem;padding-bottom:.5rem;border-bottom:1px solid var(--line);font-size:1.35rem}
h3{font-size:1.08rem}
p,li{max-width:75ch}
.lead{color:#e2d7c4;font-size:1.1rem}
.meta{color:#b7ad9c;font-size:.82rem}
.notice{margin:1.4rem 0;padding:1rem 1.2rem;border-left:3px solid var(--amber);background:#25241f}
.notice p:last-child{margin-bottom:0}
.tool-cta{display:inline-flex;min-height:48px;align-items:center;justify-content:center;margin:.5rem .5rem .5rem 0;padding:.65rem 1rem;background:var(--amber);color:#19140c;font-weight:800;text-decoration:none}
.download-row{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.table-scroll{max-width:100%;overflow-x:auto;border:1px solid var(--line)}
table{width:100%;min-width:590px;border-collapse:collapse;font-size:.9rem}
th,td{padding:.75rem .85rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#252521;color:#ffd47d;font-size:.8rem}
code{overflow-wrap:anywhere;color:#ffd47d}
.steps{padding-left:1.4rem}
.steps li{padding:.25rem 0 .75rem}
.checks{padding:1rem 1.2rem;border:1px dashed #736548;background:#211f1a}
.article-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.article-list a{display:flex;min-height:230px;flex-direction:column;padding:1.2rem;border:1px solid var(--line);background:linear-gradient(155deg,#292823,#1b1b19);text-decoration:none}
.article-list a:hover{border-color:var(--amber)}
.article-list h2{margin:1rem 0 .5rem;padding:0;border:0;font-size:1.05rem}
.article-list span{color:var(--amber);font:700 .68rem ui-monospace,monospace;letter-spacing:.08em}
.article-list b{margin-top:auto;padding-top:1rem}
.article-footer{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.2rem;padding:1.5rem 1rem;border-top:1px solid var(--line);color:#b7ad9c;font-size:.82rem}
@media(max-width:720px){.article-header{align-items:flex-start;flex-direction:column;padding-block:.8rem}.article-header nav{gap:.7rem 1rem}.article-list{grid-template-columns:1fr}.article-list a{min-height:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}