:root{ color-scheme:light only;
  --ink:#141414; --text:#1a1a1a; --muted:#55534e; --faint:#8f8d89;
  --line:#ededeb; --line-soft:#d8d7d3; --bg:#ffffff; --panel:#faf9f8; --accent:#8a2b2b;
  --pad:72px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--text); font-family:"Noto Sans JP",system-ui,sans-serif; -webkit-font-smoothing:antialiased; line-height:1.9;}
a{color:inherit;}
h1,h2,h3,p,ul,ol{margin:0;}
.mono{font-family:"Roboto Mono",monospace;}

.nav{display:flex; align-items:center; gap:14px; padding:26px var(--pad); border-bottom:1px solid var(--line); position:sticky; top:0; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); z-index:20;}
.brand{display:inline-flex; align-items:center; gap:12px; font-weight:700; font-size:19px; letter-spacing:0.02em; text-decoration:none;}
.brand svg{display:block;}
.nav-links{margin-left:auto; display:flex; gap:28px; font-size:14px; color:var(--muted);}
.nav-links a{text-decoration:none; transition:color .18s;}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--accent);}

.doc{max-width:820px; margin:0 auto; padding:88px var(--pad) 96px;}
.kicker{font-family:"Roboto Mono",monospace; font-size:12px; letter-spacing:0.22em; color:var(--faint); margin-bottom:24px;}
.doc h1{font-size:40px; line-height:1.4; font-weight:900; color:var(--ink); letter-spacing:0.01em;}
.meta{margin-top:20px; font-size:13px; color:var(--faint);}
.lead{margin-top:40px; color:var(--muted); font-size:15px;}

.doc h2{margin-top:64px; padding-top:28px; border-top:1px solid var(--text); font-size:21px; font-weight:700; color:var(--ink); line-height:1.5;}
.doc h2 .n{font-family:"Roboto Mono",monospace; font-size:13px; font-weight:400; color:var(--faint); margin-right:14px; letter-spacing:0.08em;}
.doc p{margin-top:14px; font-size:15px;}
.doc ul,.doc ol{margin-top:12px; padding-left:1.5em; font-size:15px;}
.doc li{margin-top:6px;}
.doc li::marker{color:var(--faint);}
.doc a.link{color:var(--accent); text-decoration:underline; text-underline-offset:3px;}

.info{margin-top:18px; border-top:1px solid var(--line); font-size:15px;}
.info div{display:flex; gap:24px; padding:14px 0; border-bottom:1px solid var(--line);}
.info dt,.info .k{width:150px; flex:none; color:var(--faint); font-size:13px; padding-top:2px;}
.info .v{flex:1;}

.note{margin-top:20px; padding:18px 22px; background:var(--panel); border-left:3px solid var(--accent); font-size:14px; color:var(--muted);}

.toc{margin-top:36px; padding:22px 26px; background:var(--panel); font-size:14px;}
.toc b{display:block; font-family:"Roboto Mono",monospace; font-size:12px; letter-spacing:0.18em; font-weight:400; color:var(--faint); margin-bottom:8px;}
.toc ol{margin-top:0; padding-left:1.6em; columns:2; column-gap:32px;}
.toc a{text-decoration:none; color:var(--muted);}
.toc a:hover{color:var(--accent);}

.endmark{margin-top:64px; padding-top:24px; border-top:1px solid var(--line); font-size:13px; color:var(--faint); text-align:right;}

footer{padding:44px var(--pad); text-align:center; font-size:13px; color:var(--faint); border-top:1px solid var(--line);}
footer .flinks{display:flex; justify-content:center; gap:28px; margin-bottom:12px;}
footer a{text-decoration:none;}
footer a:hover{color:var(--accent);}

@media (max-width:820px){
  :root{--pad:24px;}
  .nav{padding:18px var(--pad);}
  .nav-links{gap:16px; font-size:13px;}
  .doc{padding:56px var(--pad) 72px;}
  .doc h1{font-size:30px;}
  .doc h2{margin-top:48px; font-size:18px;}
  .info div{flex-direction:column; gap:2px;}
  .toc ol{columns:1;}
}
@media (max-width:400px){ .nav-links a:first-child{display:none;} }