:root{
  --bg:#faf8f4; --surface:#ffffff; --ink:#1f2328; --muted:#5b616b;
  --line:#e6e1d8; --accent:#c9772b; --accent-ink:#8a4a12;
  --radius:14px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#15171a; --surface:#1d2024; --ink:#ecebe8; --muted:#a4a8ae;
    --line:#2e3238; --accent:#e39a55; --accent-ink:#f0b77f;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.85; font-size:16px;
}
a{color:var(--accent-ink)}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}
header.site{border-bottom:1px solid var(--line)}
header.site .wrap{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{white-space:nowrap; font-weight:700; letter-spacing:.02em; text-decoration:none; color:var(--ink)}
.brand span{color:var(--accent)}
nav.site a{color:var(--muted); text-decoration:none; font-size:14px; margin-left:18px; white-space:nowrap}
@media (max-width:480px){nav.site a{font-size:12px; margin-left:12px} .brand{font-size:15px}}
nav.site a:hover{color:var(--ink)}
.hero{padding:72px 0 56px}
.hero h1{font-size:clamp(28px,6vw,44px); line-height:1.35; margin:0 0 12px; letter-spacing:.02em}
.hero .en{color:var(--muted); margin:0; font-size:15px; letter-spacing:.04em}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; margin:0 0 24px}
.card h2{margin:0 0 4px; font-size:22px}
.tag{display:inline-block; font-size:12px; color:var(--accent-ink); border:1px solid var(--accent); border-radius:999px; padding:1px 10px; margin-left:8px; vertical-align:middle}
.card p{margin:10px 0 0; color:var(--muted)}
.links{margin-top:16px; font-size:14px}
.links a{margin-right:16px}
section.doc{padding:48px 0 24px}
.doc h1{font-size:clamp(24px,5vw,32px); line-height:1.4; margin:0 0 8px}
.doc .meta{color:var(--muted); font-size:14px; margin:0 0 32px}
.doc h2{font-size:19px; margin:40px 0 8px; padding-top:8px; border-top:1px solid var(--line)}
.doc h3{font-size:16px; margin:24px 0 4px}
.doc ul,.doc ol{padding-left:1.4em}
.doc li{margin:4px 0}
.note{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:8px; padding:14px 18px; margin:16px 0}
.lang{font-size:14px; color:var(--muted); margin-bottom:24px}
table{border-collapse:collapse; width:100%; font-size:15px; margin:12px 0}
th,td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{background:var(--surface); white-space:nowrap}
td:first-child{min-width:6.5em}
.tablewrap{overflow-x:auto}
footer.site{border-top:1px solid var(--line); margin-top:56px; padding:28px 0 40px; color:var(--muted); font-size:13px}
footer.site a{color:var(--muted); margin-right:14px}
code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 6px}