:root{
  --bg:var(--ig-paper,#faf8f4); --panel:var(--ig-panel,#f3f0e9); --ink:var(--ig-ink,#1b1917); --muted:var(--ig-muted,#5d574f); --line:var(--ig-rule,#ded7cc);
  --sil:#15181d; --sil-edge:#2a2f37;
  --p:#F0A04B; --s:#FFD166; --e:#4FC2B8; --amx:#E7B98A; --gpu:#9D8BF0; --na:#F27BC0; --ane:#F07A7A;
  --slc:#6FA8E8; --mem:#C99A68; --fab:#7D8794; --media:#8DC266; --io:#9AA6B4; --sys:#BBAE8C; --link:#F4E27A;
  --accent:#B45F17; --tagA:#2F68A6; --tagI:#6b6f76;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--accent:#F0A04B;--tagA:#6FA8E8;--tagI:#9aa0a8;--sil-edge:#3a414b}}
:root[data-theme="dark"]{--accent:#F0A04B;--tagA:#6FA8E8;--tagI:#9aa0a8;--sil-edge:#3a414b}
.fp,.fp *{box-sizing:border-box}
.fp{color:var(--ink);font:15px/1.6 "IBM Plex Sans",system-ui,sans-serif;max-width:1240px;margin:0 auto;padding-inline:clamp(16px,4vw,52px);padding-block:28px 64px}
.fp .eyebrow{font:500 11.5px "JetBrains Mono",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.fp h1{font-family:"Archivo",sans-serif;font-stretch:120%;font-weight:800;font-size:clamp(32px,5.4vw,58px);line-height:1;margin:0;letter-spacing:-.015em;text-wrap:balance}
.fp h1 em{font-style:normal;color:var(--accent)}
.fp .lede{color:var(--muted);max-width:70ch;margin:12px 0 0;font-size:16px}
.fp h2,.fp h3{font-family:"Archivo",sans-serif;font-stretch:110%;text-wrap:balance}
.fp section{margin-top:40px}
.fp section>h2{font-size:22px;margin:0 0 12px}
/* picker: a periodic table of the family */
.fp .picker{margin-top:26px;overflow-x:auto;padding-bottom:4px}
.fp .pk-row{display:grid;grid-template-columns:40px repeat(4,minmax(120px,1fr));gap:6px;min-width:560px;margin-bottom:6px}
.fp .pk-head span{font:500 11px "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-left:4px}
.fp .pk-gen{font:800 18px "Archivo",sans-serif;font-stretch:115%;align-self:center;color:var(--muted)}
.fp .pk-cell{display:flex;align-items:center;gap:10px;min-height:50px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.fp .pk-cell:hover{border-color:var(--muted)}
.fp .pk-cell[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.fp .pk-cell:focus-visible,.fp .chip:focus-visible,.fp .blk:focus-visible,.fp select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fp .pk-svg{width:38px;height:38px;flex:none}
.fp .pk-name{font:600 13.5px "IBM Plex Sans",sans-serif;display:flex;align-items:center;gap:6px}
.fp .pk-none{border-style:dashed;background:transparent;color:var(--muted);font-size:12px;cursor:default;line-height:1.35}
.fp .dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.fp .dot.photo,.fp .basis.photo{--b:#2E9D6A}.fp .dot.annot,.fp .basis.annot{--b:#2F7FC1}.fp .dot.derived,.fp .basis.derived{--b:#C08A1E}.fp .dot.lineage,.fp .basis.lineage{--b:#8A8F98}
.fp .dot{background:var(--b)}
.fp .basis{font:500 11px "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--b);border:1px solid color-mix(in srgb,var(--b) 55%,transparent);border-radius:999px;padding:2px 8px;white-space:nowrap}
.fp .keyrow{display:flex;flex-wrap:wrap;gap:14px;font-size:12.5px;color:var(--muted);margin-top:6px}
.fp .keyrow span{display:inline-flex;align-items:center;gap:6px}
/* workbench */
.fp .bench{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start;margin-top:22px}
@media (max-width:960px){.fp .bench{grid-template-columns:1fr}}
.fp .board{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px}
.fp .toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:10px}
.fp .chip{font:500 12px "JetBrains Mono",monospace;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:4px 10px 4px 8px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.fp .chip i{width:10px;height:10px;border-radius:2px;display:inline-block}
.fp .chip[aria-pressed="true"]{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 9%,transparent)}
.fp .vs{display:flex;align-items:center;gap:8px;margin-left:auto;font:500 12px "JetBrains Mono",monospace;color:var(--muted)}
.fp select{font:500 13px "IBM Plex Sans",sans-serif;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:4px 8px}
.fp .stages{display:grid;grid-template-columns:1fr;gap:12px}
.fp .stages.two{grid-template-columns:1fr 1fr}
@media (max-width:760px){.fp .stages.two{grid-template-columns:1fr}}
.fp .fp-stage{margin:0;background:radial-gradient(120% 90% at 40% 30%,#181b21 0,#0b0c0f 70%);border-radius:6px;padding:10px;overflow-x:auto;color:#cfd4da;box-shadow:inset 0 0 0 1px #20242b}
.fp .fp-stage figcaption{font:600 13px "JetBrains Mono",monospace;color:#e6e9ee;margin:2px 4px 8px;letter-spacing:.04em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fp .fp-stage figcaption .basis{font-weight:500;background:#0b0c0f}
.fp .fp-stage figcaption .basis.photo{--b:#52c48f}.fp .fp-stage figcaption .basis.annot{--b:#62a8ea}.fp .fp-stage figcaption .basis.derived{--b:#e0aa3e}.fp .fp-stage figcaption .basis.lineage{--b:#aab0b9}
.fp .fp-stage svg{display:block;width:100%;height:auto;max-height:78vh;min-width:300px;font-family:"JetBrains Mono",monospace}
.fp .stages.two .fp-stage svg{max-height:62vh}
.fp .fp-stage .lbl{fill:#f4f6f8;font-weight:600;pointer-events:none;paint-order:stroke;stroke:#05060a;stroke-opacity:.85;stroke-width:2.8px;stroke-linejoin:round}
.fp .fp-stage .cap{fill:#c4cad2;font-family:"JetBrains Mono",monospace;paint-order:stroke;stroke:#0b0c0f;stroke-width:3px}
.fp .fp-stage .scale{fill:#cfd4da}
.fp .blk{cursor:pointer;transition:opacity .15s}
.fp .blk:hover .bb,.fp .blk.sel .bb{stroke-width:2.6;stroke:#fff;stroke-opacity:1}
.fp .blk:hover .wash,.fp .blk.sel .wash{fill-opacity:.38}
.fp svg.dim .blk:not(.hl){opacity:.16}
.fp .paths{display:none}
.fp svg.flow .paths{display:inline}
.fp .scale-note{font-size:12.5px;color:var(--muted);margin:8px 2px 0}
.fp .side{display:grid;gap:12px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
@media (max-width:960px){.fp .side{position:static}}
.fp .card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:16px}
.fp .cc-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fp .cc-top h2{font-size:28px;margin:0;font-weight:800;font-stretch:118%}
.fp .cc-note{margin:8px 0 12px;font-size:14.5px}
.fp .cc-dl{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;margin:0;font-size:13.5px}
.fp .cc-dl dt{color:var(--muted);font:500 11px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.fp .cc-dl dd{margin:0;font-variant-numeric:tabular-nums}
.fp .cc-basis{font-size:13px;color:var(--muted);margin:12px 0 0;border-top:1px solid var(--line);padding-top:10px}
.fp .bi-cat{display:flex;align-items:center;gap:8px;font:600 15px "Archivo",sans-serif;font-stretch:108%}
.fp .bi-cat i{width:11px;height:11px;border-radius:2px;flex:none}
.fp #fp-block p{font-size:14px;margin:8px 0}
.fp .tag{font:500 10.5px "JetBrains Mono",monospace;padding:2px 7px;border-radius:3px;border:1px solid var(--line)}
.fp .tag.a{color:var(--tagA)} .fp .tag.i{color:var(--tagI)}
.fp .hint{font-size:13px;color:var(--muted);margin:0}
.fp .lessons{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.fp .lessons h3{font-size:16.5px;margin:0 0 6px}
.fp .lessons p{margin:0;color:var(--muted);font-size:14.5px}
.fp .tablebox{overflow-x:auto}
.fp table{border-collapse:collapse;width:100%;font-size:14px}
.fp th,.fp td{text-align:left;padding:7px 12px 7px 0;border-bottom:1px solid var(--line);vertical-align:top}
.fp th{font:500 11px "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fp td.num{font-family:"JetBrains Mono",monospace;font-variant-numeric:tabular-nums}
.fp .note{color:var(--muted);font-size:14.5px;max-width:74ch}
.fp .note p{margin:0 0 10px}
.fp .sources li{margin-bottom:5px}
.fp a{color:var(--tagA)}
html[lang="ja"] .fp{line-height:1.85}
html[lang="ja"] .fp h1,html[lang="ja"] .fp h2,html[lang="ja"] .fp h3,html[lang="ja"] .fp .bi-cat{font-family:"Hiragino Mincho ProN","Yu Mincho",serif;font-stretch:normal}
@media (prefers-reduced-motion:reduce){.fp .blk{transition:none}}
@media (max-width:640px){.fp .fp-stage{padding:8px 6px}.fp .fp-stage svg{min-width:0;max-height:none}.fp .vs{margin-left:0}}
.fp .keyrow .dash{width:16px;height:9px;border:1.4px dashed var(--muted);border-radius:2px;display:inline-block}