:root{
--bg:#FAF9F6;--surface:#FFFFFF;--surface2:#F4F2EC;
--ink:#17171A;--ink2:#57564F;--ink3:#8A887F;
--line:rgba(23,23,26,.10);--line2:rgba(23,23,26,.18);
--accent:#0F6E56;--accent-bg:#E1F5EE;
--purple:#3C3489;--purple-bg:#EEEDFE;
--coral:#993C1D;--coral-bg:#FAECE7;
--amber:#854F0B;--amber-bg:#FAEEDA;
--red:#A32D2D;--red-bg:#FCEBEB;
--blue:#185FA5;--blue-bg:#E6F1FB;
--pink:#993556;--pink-bg:#FBEAF0;
--gray:#444441;--gray-bg:#F1EFE8;
--radius:8px;--max:1240px
}
@media (prefers-color-scheme:dark){:root{
--bg:#141413;--surface:#1C1C1A;--surface2:#232320;
--ink:#F5F4EF;--ink2:#C3C2B7;--ink3:#8A887F;
--line:rgba(255,255,255,.11);--line2:rgba(255,255,255,.20);
--accent:#5DCAA5;--accent-bg:#085041;
--purple:#AFA9EC;--purple-bg:#3C3489;
--coral:#F0997B;--coral-bg:#712B13;
--amber:#EF9F27;--amber-bg:#633806;
--red:#F09595;--red-bg:#791F1F;
--blue:#85B7EB;--blue-bg:#0C447C;
--pink:#ED93B1;--pink-bg:#72243E;
--gray:#D3D1C7;--gray-bg:#2C2C2A
}}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;font-size:16px;line-height:1.85;-webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1}
img{max-width:100%;height:auto}

/* header */
.sh{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.shin{max-width:var(--max);margin:0 auto;padding:0 32px;height:64px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--ink);flex-shrink:0}
.brand b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.brand span{font-size:11.5px;color:var(--ink3);letter-spacing:.06em}
.shnav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.shnav a{font-size:14px;color:var(--ink2);text-decoration:none;padding:6px 11px;border-radius:var(--radius)}
.shnav a:hover{background:var(--surface2);color:var(--ink)}
.shnav a.cta{background:var(--accent);color:#fff;padding:7px 16px}
@media (prefers-color-scheme:dark){.shnav a.cta{color:#0b0b0b}}
.shnav a.cta:hover{opacity:.88;background:var(--accent)}

.container{max-width:var(--max);margin:0 auto;padding:0 32px}
.narrow{max-width:820px;margin:0 auto}

/* hero */
.hero{padding:76px 0 56px;border-bottom:1px solid var(--line)}
.eyebrow{display:inline-block;font-size:12px;letter-spacing:.1em;color:var(--accent);background:var(--accent-bg);padding:5px 12px;border-radius:var(--radius);margin-bottom:22px}
h1{font-size:42px;line-height:1.28;font-weight:600;letter-spacing:-.015em}
.lede{font-size:18px;color:var(--ink2);max-width:62ch;margin-top:20px}
.dateline{font-size:13px;color:var(--ink3);margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}

/* article */
article{padding:52px 0 120px}
article h1{font-size:36px;margin-bottom:20px}
article h2{font-size:27px;font-weight:600;line-height:1.4;letter-spacing:-.008em;margin:60px 0 18px;padding-top:8px}
article h3{font-size:19px;font-weight:600;margin:38px 0 12px}
article h4{font-size:16.5px;font-weight:600;margin:30px 0 8px}
article p{margin-bottom:18px}
article ul,article ol{margin:0 0 20px;padding-left:1.35em}
article li{margin-bottom:8px}
strong{font-weight:600}
em{font-style:normal;background:var(--amber-bg);color:var(--amber);padding:1px 5px;border-radius:4px;font-size:.96em}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:var(--surface2);padding:2px 6px;border-radius:5px}
a{color:var(--accent)}
a.ext{text-decoration:none;border-bottom:1px solid var(--line2)}
a.ext:hover{border-bottom-color:var(--accent)}
ul.plain{list-style:none;padding-left:0}
ul.plain li{padding-left:1.5em;position:relative}
ul.plain li:before{content:"";position:absolute;left:.3em;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--ink3)}
hr{border:none;border-top:1px solid var(--line);margin:44px 0}

/* toc */
.toc{background:var(--surface2);border-radius:12px;padding:22px 26px;margin:30px 0 44px}
.toc .tl{font-size:12px;letter-spacing:.08em;color:var(--ink3);margin-bottom:10px}
.toc ol{margin:0;padding-left:1.3em}
.toc li{margin-bottom:5px;font-size:14.5px}
.toc a{text-decoration:none;border-bottom:1px solid transparent}
.toc a:hover{border-bottom-color:var(--accent)}

/* components */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 28px;margin:24px 0}
.card>*:last-child{margin-bottom:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:24px 0}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
.grid2>.card,.grid3>.card{margin:0}
@media(max-width:900px){.grid2,.grid3{grid-template-columns:1fr}}
.pill{display:inline-block;font-size:12px;padding:4px 11px;border-radius:var(--radius);line-height:1.5;white-space:nowrap}
.p-ok{background:var(--accent-bg);color:var(--accent)}
.p-warn{background:var(--amber-bg);color:var(--amber)}
.p-bad{background:var(--red-bg);color:var(--red)}
.p-info{background:var(--blue-bg);color:var(--blue)}
.p-n{background:var(--gray-bg);color:var(--gray)}
.p-pur{background:var(--purple-bg);color:var(--purple)}
.p-co{background:var(--coral-bg);color:var(--coral)}
table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14.5px}
th{text-align:left;font-weight:500;font-size:12.5px;letter-spacing:.04em;color:var(--ink3);padding:0 14px 10px 0;border-bottom:1px solid var(--line2);vertical-align:bottom}
td{padding:13px 14px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.65}
td:last-child,th:last-child{padding-right:0}
tr:last-child td{border-bottom:none}
.tw{overflow-x:auto;margin:24px 0}
.tw table{margin:0;min-width:620px}
figure{margin:32px 0;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px 22px}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:13px;color:var(--ink3);margin-top:16px;padding-top:14px;border-top:1px solid var(--line);line-height:1.7}
.sv-t{font-size:14px;font-weight:600}
.sv-s{font-size:12px}
.sv-l{font-size:12px;fill:var(--ink3)}
.callout{border-left:3px solid var(--accent);background:var(--accent-bg);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin:24px 0}
.callout .lbl{font-size:12px;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.callout>*:last-child{margin-bottom:0}
.callout.warn{border-left-color:var(--amber);background:var(--amber-bg)}
.callout.warn .lbl{color:var(--amber)}
.callout.bad{border-left-color:var(--red);background:var(--red-bg)}
.callout.bad .lbl{color:var(--red)}
details{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface);overflow:hidden}
summary{cursor:pointer;padding:16px 22px;font-size:16px;font-weight:500;list-style:none;display:flex;gap:12px}
summary::-webkit-details-marker{display:none}
summary:before{content:"+";color:var(--ink3);font-weight:400;font-size:19px;line-height:1.35;flex-shrink:0}
details[open] summary:before{content:"−"}
details[open] summary{border-bottom:1px solid var(--line)}
.dbody{padding:20px 22px 6px 52px}
.dbody>*:last-child{margin-bottom:16px}
.steps{counter-reset:s;list-style:none;padding:0;margin:24px 0}
.steps li{counter-increment:s;position:relative;padding:0 0 22px 44px;border-left:1px solid var(--line);margin-left:13px;margin-bottom:0}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li:before{content:counter(s);position:absolute;left:-13px;top:-2px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line2);color:var(--ink2);font-size:12.5px;display:flex;align-items:center;justify-content:center}
.steps .st{font-weight:600;display:block;margin-bottom:3px}
.steps .sd{font-size:14.5px;color:var(--ink2)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:24px 0}
.stat div{background:var(--surface2);border-radius:12px;padding:18px 20px}
.stat .sl{font-size:12.5px;color:var(--ink2);margin-bottom:4px}
.stat .sv{font-size:26px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.quote{font-size:19px;line-height:1.75;border-left:3px solid var(--line2);padding:4px 0 4px 22px;margin:26px 0;color:var(--ink)}
.quote cite{display:block;font-size:13px;color:var(--ink3);font-style:normal;margin-top:10px}

/* article cards */
.acards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:32px 0}
.ac{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px 26px;text-decoration:none;color:var(--ink)}
.ac:hover{border-color:var(--line2)}
.ac .k{font-size:11.5px;letter-spacing:.06em;color:var(--ink3);margin-bottom:10px;display:block}
.ac h3{font-size:18px;font-weight:600;line-height:1.5;margin:0 0 8px}
.ac p{font-size:14px;color:var(--ink2);margin:0;line-height:1.7}
.ac .m{font-size:12px;color:var(--ink3);margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}

/* glossary */
.srch{width:100%;background:var(--surface);border:1px solid var(--line2);border-radius:var(--radius);padding:13px 16px;font-size:15px;font-family:inherit;color:var(--ink)}
.srch:focus{outline:none;border-color:var(--accent)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 4px}
.chip{font-size:12.5px;border:1px solid var(--line2);background:transparent;color:var(--ink2);padding:5px 13px;border-radius:20px;cursor:pointer;font-family:inherit}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
@media (prefers-color-scheme:dark){.chip[aria-pressed="true"]{color:#0b0b0b}}
.gl{border-bottom:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px}
.gl .gt{font-weight:600;font-size:15.5px}
.gl .gt .gk{display:block;font-size:11.5px;color:var(--ink3);font-weight:400;letter-spacing:.04em;margin-top:2px}
.gl .gd{font-size:14.5px;color:var(--ink2)}
.gl .gd .warnnote{display:block;font-size:13px;color:var(--amber);margin-top:5px}
@media(max-width:760px){.gl{grid-template-columns:1fr;gap:5px}}
.count{font-size:13px;color:var(--ink3);margin-top:16px}

/* cta */
.ctabox{background:var(--surface2);border-radius:16px;padding:36px 40px;margin:56px 0 0;text-align:center}
.ctabox h3{font-size:23px;font-weight:600;margin-bottom:12px}
.ctabox p{color:var(--ink2);max-width:52ch;margin:0 auto 22px}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:13px 30px;border-radius:var(--radius);font-size:15px;font-weight:500}
@media (prefers-color-scheme:dark){.btn{color:#0b0b0b}}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)}

/* footer */
.sf{border-top:1px solid var(--line);padding:44px 0 60px;margin-top:80px}
.sfin{max-width:var(--max);margin:0 auto;padding:0 32px;display:flex;flex-wrap:wrap;gap:40px;justify-content:space-between}
.sf .fb{font-size:13px;color:var(--ink3);line-height:1.9;max-width:44ch}
.sf .fl{display:flex;flex-direction:column;gap:6px}
.sf .fl a{font-size:14px;color:var(--ink2);text-decoration:none}
.sf .fl a:hover{color:var(--ink)}
.sf .flt{font-size:11.5px;letter-spacing:.08em;color:var(--ink3);margin-bottom:6px}
.upd{font-size:12.5px;color:var(--ink3);border-top:1px solid var(--line);margin-top:34px;padding-top:20px;max-width:var(--max);margin-left:auto;margin-right:auto}

@media(max-width:1000px){
.shin,.container,.sfin{padding:0 20px}
.shin{height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap;gap:12px}
.shnav{margin-left:0;width:100%}
h1{font-size:29px}article h1{font-size:27px}
article h2{font-size:22px;margin-top:46px}
.hero{padding:44px 0 36px}
.ctabox{padding:28px 22px}
}