:root{--paper:#F3F3EE;--inkfill:#1C1F24;--ground:#F2F2EC;--grid:rgba(28,31,36,.05);--ink:#1C1F24;--muted:#646A74;--rule:#D6D6CE;--surface:#FFFFFF;--mark:#F7E36B;--shadow:0 12px 32px rgba(28,31,36,.14);--a:#1C1F24;--warn:#B8860B;--ok:#2F7D4A}
:root[data-theme="dark"]{--paper:#2A2E36;--inkfill:#3A3F49;--ground:#17191E;--grid:rgba(232,231,225,.06);--ink:#E8E7E1;--muted:#9AA0AA;--rule:#2E323A;--surface:#1F2228;--mark:#6B5D14;--shadow:0 12px 32px rgba(0,0,0,.55);--warn:#E0B33C;--ok:#6FBF85}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ground);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;color:var(--ink);font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif;font-size:15.5px;line-height:1.85;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.mono{font-family:'IBM Plex Mono','SF Mono',Menlo,monospace}
.card,.fig{font-family:'Zen Kaku Gothic New','Hiragino Sans','Noto Sans JP',sans-serif}
.card .mono,.fig .mono{font-family:'IBM Plex Mono','SF Mono',Menlo,monospace}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
h1,h2,h3{line-height:1.25;text-wrap:balance;margin:0}
/* header */
header.site{background:var(--surface);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:10}
.bar{display:flex;align-items:center;gap:22px;height:60px}
.brand{display:flex;align-items:baseline;gap:10px;white-space:nowrap}
.brand .mark{font-weight:900;font-size:22px;letter-spacing:.02em}
.brand .tag{font-size:12px;color:var(--muted)}
nav.shelves{display:flex;gap:2px;flex:1;overflow-x:auto;scrollbar-width:none}
nav.shelves::-webkit-scrollbar{display:none}
.nav-item{font-size:13.5px;font-weight:700;padding:6px 10px;border-radius:999px;white-space:nowrap;border:1.5px solid transparent}
.nav-item.on,.nav-item:hover{border-color:var(--a);color:var(--a)}
form.search{display:flex;gap:6px}
form.search input{font:inherit;font-size:14px;border:1px solid var(--rule);border-radius:8px;padding:6px 10px;background:var(--ground);color:var(--ink);width:180px}
form.search button{font:inherit;font-size:13px;font-weight:700;border:0;border-radius:8px;padding:6px 12px;background:var(--ink);color:var(--ground);cursor:pointer}
form.search.big{margin:18px 0 26px}
.theme{font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--rule);border-radius:999px;padding:5px 11px;background:var(--surface);color:var(--muted);cursor:pointer;white-space:nowrap}
.theme:hover{color:var(--ink);border-color:var(--ink)}
form.search.big input{width:100%;max-width:520px;font-size:17px;padding:10px 14px}
/* crumbs / heads */
.crumbs{font-size:13px;color:var(--muted);margin:22px 0 10px}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.lede{font-size:17px;margin:10px 0 0;max-width:64ch}
.node-head h1,.shelf-head h1{font-size:38px;font-weight:900}
.shelf-head{margin:8px 0 28px;padding-left:18px;border-left:8px solid var(--a)}
/* node：E＝サブバー（棚・題名・目次）＋本文一列720px＋右にカード */
main.wrap.node-page{max-width:1040px}
.subbar{position:sticky;top:var(--hh,60px);z-index:9;background:var(--surface);border-bottom:1px solid var(--rule);box-shadow:0 6px 16px rgba(28,31,36,.06)}
.subbar .in{max-width:1040px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;gap:18px}
.subbar .who{display:flex;align-items:center;gap:10px;white-space:nowrap;font-weight:900;font-size:16px;min-width:0}
.subbar .who .nm{overflow:hidden;text-overflow:ellipsis;max-width:40vw}
.subbar .toc{display:flex;flex-direction:row;overflow-x:auto;gap:6px;padding:2px 0;scrollbar-width:none;flex:1;font-size:13px}
.subbar .toc::-webkit-scrollbar{display:none}
.subbar .toc a{border:1px solid var(--rule);border-radius:999px;padding:4px 11px;white-space:nowrap;color:var(--muted);background:var(--surface);flex:none}
.subbar .toc a.on{background:var(--a);border-color:var(--a);color:#fff}
.node-grid{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:40px;margin-top:24px;align-items:start}
.node-grid>*,.node-body,.node-side,.cardwrap,.figwrap,.sec{min-width:0}
.node-body{max-width:720px}
.node-side{position:sticky;top:calc(var(--hh,60px) + var(--sb,56px) + 16px)}
.cardwrap{margin:0;max-width:220px}
.cardwrap svg,.figwrap svg{max-width:100%}
.cardwrap svg{display:block;width:100%;height:auto;box-shadow:var(--shadow);border-radius:6px}
.cardwrap figcaption,.figwrap figcaption{font-size:12.5px;color:var(--muted);margin-top:8px;font-family:'IBM Plex Mono',monospace}
.sec{margin:0 0 40px}
.sec h2{font-size:24px;font-weight:900;margin:0 0 12px;padding:0 0 8px;border-bottom:2px solid var(--rule)}
.sec h3{font-size:16px;font-weight:900;margin:22px 0 8px;color:var(--muted)}
.sec p{margin:0 0 12px;max-width:60ch;font-size:16.5px;line-height:1.95}
.sec ul{margin:0;padding-left:1.2em;max-width:60ch;font-size:16px;line-height:1.9}
.sec li{margin:4px 0}
.figwrap{margin:14px 0 0;background:var(--surface);border:0;border-radius:10px;padding:16px;box-shadow:0 1px 0 var(--rule),0 8px 24px rgba(28,31,36,.06)}
.figwrap svg{display:block;width:100%;height:auto}
.sec,#edges,.shelf-head,.node-head{scroll-margin-top:calc(var(--hh,60px) + var(--sb,56px) + 16px)}

/* 辺（つながる図鑑）・出典・注記 */
.inline-edges{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.inline-edges a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;border:1px solid var(--rule);border-radius:999px;padding:4px 12px 4px 6px;background:var(--surface)}
.inline-edges a:hover{border-color:var(--ink)}
.inline-edges a::after{content:"→";color:var(--muted);font-weight:400}
.edges{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.edges li a{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;background:var(--surface);border:1px solid var(--rule);border-radius:10px;padding:10px 14px;transition:border-color .15s}
.edges li a:hover{border-color:var(--ink)}
.stag{grid-row:1/3;font-size:11.5px;font-weight:700;color:var(--a);border:1.5px solid var(--a);border-radius:999px;padding:1px 8px;white-space:nowrap}
.subbar .who .stag{grid-row:auto}
.edges .eq{font-weight:900;font-size:15.5px}
.edges .et{font-size:12.5px;color:var(--muted)}
.edges.back li a{opacity:.92}
.sources{margin:0;padding-left:1.2em;font-size:13.5px}
.sources a{text-decoration:underline;text-decoration-color:var(--rule)}
.note{font-size:13px;color:var(--muted);margin:10px 0 0;max-width:70ch;border-left:3px solid var(--rule);padding-left:10px}
.gen{font-size:13px;color:var(--muted);margin-top:10px}
.badge{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 9px;margin-right:6px;border:1.5px solid currentColor}
.badge.warn{color:var(--warn)}.badge.ok{color:var(--ok)}
/* grids */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.mini{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--rule);border-top:6px solid var(--a);border-radius:10px;padding:14px 16px 12px;min-height:118px;transition:transform .12s,border-color .12s}
.mini:hover{transform:translateY(-2px);border-color:var(--ink)}
.mini .mq{font-weight:900;font-size:16.5px;line-height:1.35;text-wrap:balance}
.mini .mt{font-size:13px;color:var(--muted);margin-top:auto}
.mini .md{font-size:11.5px;color:var(--muted)}
/* home */
.hero{padding:56px 0 30px;max-width:760px}
.hero h1{font-size:44px;font-weight:900}
.shelf-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:12px 0 44px}
.tile{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:18px 18px 14px;border-left:8px solid var(--a);min-height:150px}
.tile:hover{border-color:var(--a)}
.tile .tn{font-weight:900;font-size:19px}
.tile .ta{font-size:14px;color:var(--a);font-weight:700}
.tile .td{font-size:13px;color:var(--muted);line-height:1.6}
.tile .tc{font-size:12px;color:var(--muted);margin-top:auto}
.path-sec h2,.latest h2{font-size:22px;font-weight:900;margin:0 0 14px}
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:44px}
.step{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--rule);border-top:6px solid var(--a);border-radius:10px;padding:14px 16px}
.step .k{font-size:11px;letter-spacing:.06em;color:var(--muted)}
.step .q{font-weight:900;font-size:15.5px;line-height:1.35}
.step .t{font-size:12.5px;color:var(--muted)}
.latest{margin-bottom:56px}
/* doc */
.doc{max-width:72ch;padding:28px 0 40px}
.doc h1{font-size:34px;font-weight:900;margin-bottom:14px}
.doc h2{font-size:20px;font-weight:900;margin:26px 0 8px}
.doc ul{padding-left:1.2em}
.doc li{margin:6px 0}
/* footer */
footer.site{border-top:1px solid var(--rule);margin-top:40px;padding:26px 0 48px;font-size:13px;color:var(--muted)}
footer.site p{max-width:80ch;margin:0 0 8px}
footer.site a{text-decoration:underline;text-decoration-color:var(--rule)}
@media (max-width:900px){.node-grid{grid-template-columns:minmax(0,1fr);gap:24px}.node-side{position:static;order:-1}.cardwrap{max-width:300px}.subbar .in{flex-wrap:wrap;gap:6px;padding:8px 16px}.subbar .who{font-size:15px}.subbar .who .nm{max-width:70vw}.subbar .toc{width:100%}.shelf-tiles,.path{grid-template-columns:1fr 1fr}}
@media (max-width:640px){header.site{position:static}.bar{height:auto;flex-wrap:wrap;padding:8px 0;gap:8px 12px}.brand{order:0}.theme{order:1;margin-left:auto}nav.shelves{order:2;width:100%;flex:none}form.search{order:3;width:100%}form.search input{flex:1;width:auto}.subbar{top:0}.hero h1{font-size:32px}.node-head h1,.shelf-head h1{font-size:28px}.shelf-tiles,.path{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* 図（ページ内）は literal 色を theme token に写す。カードは固定の白画像なので対象外 */
.figwrap svg text[fill="#1C1F24"]{fill:var(--ink)}
.figwrap svg text[fill="#646A74"]{fill:var(--muted)}
.figwrap svg rect[fill="#1C1F24"],.figwrap svg circle[fill="#1C1F24"],.figwrap svg polygon[fill="#1C1F24"],.figwrap svg path[fill="#1C1F24"],.figwrap svg marker path[fill="#1C1F24"]{fill:var(--inkfill)}
.figwrap svg rect[fill="#F3F3EE"]{fill:var(--paper)}
.figwrap svg rect[fill="#FFFFFF"]{fill:var(--surface)}
.figwrap svg [stroke="#1C1F24"]{stroke:var(--ink)}
.figwrap svg [stroke="#D6D6CE"]{stroke:var(--rule)}


/* セグメントの説明：PCは開いた一覧、スマホは折りたたみ */
.segs{margin:14px 0 0;display:grid;gap:6px}
.seg{border:1px solid var(--rule);border-radius:10px;background:var(--surface);padding:0 12px}
.seg summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:14px 1fr auto;gap:10px;align-items:center;padding:9px 0;font-weight:700;font-size:14.5px}
.seg summary::-webkit-details-marker{display:none}
.seg .sw{width:14px;height:14px;border-radius:3px;background:var(--sw)}
.seg .sp{font-size:12.5px;color:var(--muted)}
.seg p{margin:0 0 10px 24px;font-size:14px;color:var(--ink);line-height:1.7}
@media (max-width:900px){.seg summary::after{content:"＋";color:var(--muted);margin-left:8px}.seg[open] summary::after{content:"−"}}