:root{
  --ground:#e7ebef; --surface:#ffffff; --surface2:#f2f5f8;
  --line:#d4dae2; --line2:#b6c0cb;
  --ink:#131a21; --ink2:#57666f; --ink3:#8593a0;
  --accent:#0e7c8a; --accent-ink:#ffffff; --accent-soft:#dbeef1; --accent-line:#7ec3cc;
  --mark:#a8660a; --mark-soft:#f8ead3; --mark-line:#dcae66;
  --radius:12px;
  --font-ui:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,system-ui,sans-serif;
  --font-mono:"DM Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0f1419; --surface:#19212a; --surface2:#212b35;
    --line:#2d3946; --line2:#3e4d5c;
    --ink:#e5edf3; --ink2:#96a6b3; --ink3:#6f8090;
    --accent:#35c2cd; --accent-ink:#06232a; --accent-soft:#0f3b42; --accent-line:#1d6f79;
    --mark:#e8a93c; --mark-soft:#3a2d15; --mark-line:#7a5c22;
  }
}
:root[data-theme="dark"]{
  --ground:#0f1419; --surface:#19212a; --surface2:#212b35;
  --line:#2d3946; --line2:#3e4d5c;
  --ink:#e5edf3; --ink2:#96a6b3; --ink3:#6f8090;
  --accent:#35c2cd; --accent-ink:#06232a; --accent-soft:#0f3b42; --accent-line:#1d6f79;
  --mark:#e8a93c; --mark-soft:#3a2d15; --mark-line:#7a5c22;
}
*{box-sizing:border-box;}
body{background:var(--ground);color:var(--ink);font-family:var(--font-ui);line-height:1.9;
     -webkit-font-smoothing:antialiased;}
.wrap{max-width:760px;margin-inline:auto;padding-inline:20px;}
a{color:var(--accent);}
h1,h2,h3{margin:0;text-wrap:balance;}
.eyebrow{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);}
code{font-family:var(--font-mono);font-size:.92em;background:var(--surface2);
     border:1px solid var(--line);border-radius:5px;padding:1px 6px;}
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
     background:color-mix(in srgb,var(--ground) 90%,transparent);backdrop-filter:blur(8px);
     border-bottom:1px solid var(--line);}
.nav .wrap{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding-block:10px;max-width:1000px;}
.brand{font-weight:900;font-size:17px;text-decoration:none;color:var(--ink);margin-right:auto;}
.nav a.link{font-size:13px;color:var(--ink2);text-decoration:none;}
.nav a.link:hover{color:var(--accent);}
.btn{display:inline-block;font:700 14px var(--font-ui);text-decoration:none;
     background:var(--accent);color:var(--accent-ink);border:0;border-radius:999px;padding:9px 20px;}
.btn:hover{filter:brightness(1.08);}
.btn.sm{font-size:13px;padding:7px 16px;}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);}
main{padding-block:40px 20px;}
h1{font-size:clamp(23px,4.4vw,32px);font-weight:900;margin-block:6px 12px;}
.lead{color:var(--ink2);font-size:15.5px;margin:0 0 6px;}
h2{font-size:19px;font-weight:900;margin:36px 0 10px;padding-top:22px;border-top:1px solid var(--line);}
h3{font-size:15.5px;font-weight:700;margin:22px 0 4px;}
p{margin:0 0 12px;color:var(--ink2);font-size:15px;}
ul,ol{margin:0 0 14px;padding-left:1.4em;}
li{color:var(--ink2);font-size:15px;margin-bottom:5px;}
strong{color:var(--ink);}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;margin:16px 0;}
.note p:last-child{margin-bottom:0;}
.note.warn{background:var(--mark-soft);border-color:var(--mark-line);}
.note.warn p{color:var(--ink);}
.note h3{margin-top:0;}
figure{margin:18px 0;}
figure video,figure img{width:100%;border-radius:var(--radius);border:1px solid var(--line);
     background:#0b0e12;display:block;aspect-ratio:16/9;object-fit:cover;}
figcaption{font-size:13px;color:var(--ink3);margin-top:7px;}
table{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);color:var(--ink2);}
th{color:var(--ink);font-weight:700;background:var(--surface2);}
.cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
     padding:20px;margin:34px 0 10px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.cta p{margin:0;flex:1 1 220px;}
.more{border-top:1px solid var(--line);padding-top:22px;margin-top:34px;}
.more h2{border:0;padding:0;margin:0 0 10px;font-size:16px;}
.more ul{padding-left:1.2em;}
footer{border-top:1px solid var(--line);padding-block:24px 44px;margin-top:40px;}
footer .wrap{display:flex;flex-wrap:wrap;gap:10px 20px;max-width:1000px;}
footer a{font-size:13px;color:var(--ink2);text-decoration:none;}
footer a:hover{color:var(--accent);}