:root{
  --bg:#f7f7f5; --card:#fff; --ink:#2b2b2b; --muted:#6b6b6b; --line:#e3e3df;
  --brand:#3b5b8c;
  --header-h:60px;
  /* スケッチ/アクセントの既定値: .g-<Key> が無い leaf でも色が解決される安全網 */
  --accent:#6b6b6b; --accent2:#c2c2c2; --accent-ink-mix:72%;
}
*{box-sizing:border-box}
/* キーボード用スキップリンク（フォーカス時のみ表示） */
.skip-link{position:absolute;left:8px;top:-44px;z-index:200;background:#fff;color:var(--ink);
  padding:8px 14px;border:1px solid var(--line);border-radius:8px;font-size:13px;
  text-decoration:none;transition:top .15s}
.skip-link:focus-visible{top:8px;outline:2px solid var(--brand);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}
body{margin:0;font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5}
/* ===== ヘッダー（スリム sticky バー） ===== */
header.top{position:sticky;top:0;z-index:20;background:rgba(247,247,245,.86);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);padding:0;margin:0}
.top-inner{display:flex;align-items:center;gap:18px;max-width:1320px;margin:0 auto;
  padding:11px 24px;min-height:var(--header-h)}
.brand{display:flex;align-items:baseline;gap:12px;min-width:0}
.brand h1{margin:0;font-size:20px;line-height:1.2;letter-spacing:.01em;font-weight:800;
  white-space:nowrap}
.brand .tagline{font-size:12.5px;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;padding-left:12px;border-left:1px solid var(--line)}
.stats{display:flex;gap:22px;margin:0 0 0 auto;padding:0}
.stats>div{display:flex;align-items:baseline;gap:5px}
.stats dt{font-size:18px;font-weight:800;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stats dd{margin:0;font-size:11px;color:var(--muted);line-height:1}
/* 検索 */
.search{flex:1;max-width:340px;display:flex;align-items:center;gap:8px;min-width:0;margin-left:6px}
.search input{flex:1;min-width:0;font:inherit;font-size:13px;padding:7px 12px;
  border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink)}
.search input::placeholder{color:var(--muted)}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(59,91,140,.14)}
/* 強制カラーモードでは box-shadow が無効化されるため outline でフォーカスを保証 */
@media(forced-colors:active){.search input:focus{outline:2px solid ButtonText;outline-offset:2px}}
.search-count{font-size:11px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .brand .tagline{display:none}
  .stats{gap:14px}
  .stats dt{font-size:16px}
  .top-inner{flex-wrap:wrap;padding-top:9px;padding-bottom:9px}
  .search{order:3;flex-basis:100%;max-width:none;margin-left:0}
}
/* ===== 導入リード（非 sticky） ===== */
.intro{max-width:1320px;margin:0 auto;padding:13px 24px 2px}
.intro p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.intro b{color:var(--ink);font-weight:700}
@media(max-width:820px){ .intro{padding:12px 16px 0} }
/* ===== 2カラムレイアウト ===== */
.layout{display:flex;align-items:flex-start;gap:24px;max-width:1320px;margin:0 auto;padding:0 24px}
.sidebar{position:sticky;top:var(--header-h);flex:0 0 224px;width:224px;
  max-height:calc(100vh - var(--header-h));overflow-y:auto;
  padding:14px 10px 28px 0;border-right:1px solid var(--line)}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#dcdcd8;border-radius:4px}
.nav-toggle{display:none}
nav.genres{display:flex;flex-direction:column;gap:0}
.mega-all{align-self:flex-end;background:none;border:0;cursor:pointer;font:inherit;
  font-size:11px;color:var(--muted);padding:4px 10px 8px}  /* 上4pxで最小24px高を確保 */
.mega-all:hover{color:var(--ink);text-decoration:underline}
.mega{border-bottom:1px solid var(--line)}
.mega:first-child{border-top:1px solid var(--line)}
.mega-h{display:flex;align-items:center;width:100%;text-align:left;background:none;border:0;
  cursor:pointer;font:inherit;font-weight:700;font-size:12.5px;color:var(--ink);
  padding:9px 8px 9px 10px;line-height:1.25}
.mega-h:hover{background:#fff}
.mega-h .mt{flex:1}
.mega-h .mega-n{color:var(--muted);font-weight:400;font-size:11px;margin:0 6px}
.mega-h .caret{color:var(--muted);font-size:10px;transition:transform .15s}
.mega.open .mega-h .caret{transform:rotate(90deg)}
.mega-body{display:none;padding:2px 0 8px}
.mega.open .mega-body{display:block}
nav.genres a{display:flex;align-items:center;gap:8px;font-size:12px;text-decoration:none;
  color:var(--muted);border-radius:0 7px 7px 0;padding:4px 10px 4px 20px;white-space:nowrap;
  border-left:2px solid transparent}
nav.genres a:hover{background:#fff;color:var(--ink)}
nav.genres a.active{background:#fff;border-left-color:var(--accent);color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));font-weight:600}
nav.genres a .n{color:var(--muted);margin-left:auto;font-size:11px}
nav.genres a.active .n{color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000))}
main{flex:1;min-width:0;padding:4px 0 80px}
section.genre{padding-top:24px;scroll-margin-top:calc(var(--header-h) + 10px);
  content-visibility:auto}  /* contain-intrinsic-size は gallery.js がカード数から個別設定 */
.empty{padding:48px 4px;color:var(--muted);font-size:14px}
section.genre:first-child{padding-top:6px}
@media(max-width:820px){
  .layout{flex-direction:column;align-items:stretch;gap:0;padding:0 16px}
  main{width:100%}
  .sidebar{position:static;flex:none;width:auto;max-height:none;overflow:visible;
    border-right:none;padding:10px 0 4px}
  .nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;
    font:inherit;font-weight:700;font-size:13px;color:var(--ink);background:#fff;
    border:1px solid var(--line);border-radius:8px;padding:9px 12px;cursor:pointer}
  .nav-toggle .nt-caret{color:var(--muted);transition:transform .15s}
  .sidebar.nav-open .nav-toggle .nt-caret{transform:rotate(180deg)}
  .sidebar nav.genres{display:none}
  .sidebar.nav-open nav.genres{display:flex;margin-top:8px}
  main{padding:8px 0 80px}
}
section.genre>h2{font-size:18px;margin:0 0 2px;display:flex;align-items:baseline;gap:8px}
section.genre>h2 .key{font-size:12px;color:var(--muted);font-weight:400}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:10px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:border-color .12s,box-shadow .12s}
.card:hover{border-color:var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.06)}
.card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* カスタムボタン/リンクのフォーカスリング（白背景上で 7:1 の --brand） */
.mega-h:focus-visible,.mega-all:focus-visible,.modal-close:focus-visible,
nav.genres a:focus-visible,.nav-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* 検索フィルタの非表示（style.display 直書きでなくクラスで一元化） */
.card.hidden,section.genre.hidden{display:none}
.card svg.sk{width:100%;height:84px;display:block;background:#fcfcfb;border-radius:6px}
.card .nm{font-size:12.5px;font-weight:600;line-height:1.3}
.card .en{font-size:10px;color:var(--muted);line-height:1.2;margin-top:-4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .use{font-size:10.5px;color:var(--muted);line-height:1.35;margin-top:1px}
.card .meta{font-size:10.5px;color:var(--muted);margin-top:auto}
.card .meta .yr{color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));font-weight:600}
.card.trad .meta .yr{color:var(--muted)}
/* sketch element classes (shared) */
.sk .ink{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.sk .inkfill{fill:var(--ink);stroke:none}
.sk .fill{fill:var(--accent);stroke:none}
.sk .fill2{fill:var(--accent2);stroke:none}
.sk .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.sk .line2{fill:none;stroke:var(--accent2);stroke-width:2;stroke-linecap:round}
.sk .faint{fill:#e8e8e4;stroke:none}
.sk .faintstroke{fill:none;stroke:#cfcfca;stroke-width:1}
.sk .dash{fill:none;stroke:var(--ink);stroke-width:1.2;stroke-dasharray:3 2}
.sk .area{fill:var(--accent);opacity:.5;stroke:none}
.sk .area2{fill:var(--accent2);opacity:.5;stroke:none}
.sk .glyph-q{fill:#bbb}
/* ===== モーダル ===== */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px}
.modal-back{position:absolute;inset:0;background:rgba(30,30,28,.42);backdrop-filter:blur(2px)}
.modal-box{position:relative;background:var(--card);border-radius:14px;max-width:520px;width:100%;
  max-height:88vh;overflow:auto;padding:22px 22px 24px;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.modal-close{position:absolute;top:8px;right:10px;border:none;background:none;font-size:24px;
  line-height:1;color:var(--muted);cursor:pointer;padding:6px 9px;min-width:36px;min-height:36px;
  display:flex;align-items:center;justify-content:center;border-radius:8px}
.modal-close:hover{color:var(--ink)}
.modal-head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.sk.big{width:130px;height:91px;flex:none;background:#fcfcfb;border:1px solid var(--line);border-radius:8px}
.modal-title h3{margin:0 0 2px;font-size:19px;line-height:1.25}
.modal-en{margin:0 0 6px;font-size:13px;color:var(--muted);line-height:1.2;letter-spacing:.01em}
.modal-meta{margin:0;font-size:12px;color:var(--muted)}
.modal-meta::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:7px;vertical-align:middle}
.modal-meta .yr{color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));font-weight:700}
.modal-meta a{color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));text-decoration:none;border-bottom:1px dotted var(--accent)}
.modal-meta a:hover{border-bottom-style:solid}
.modal-desc{margin:0 0 16px;font-size:13.5px;line-height:1.7}
/* 分解パネル（このモーダルの主役） */
.modal-decomp-wrap{margin-bottom:16px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.modal-eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.08em;color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));padding:8px 14px;background:#fafafa;
  border-bottom:1px solid var(--line)}
.modal-eyebrow::before{content:'';width:14px;height:2px;background:var(--accent);border-radius:1px}
.modal-decomp{padding:3px 14px 6px}
.modal-decomp .row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:8px 0;border-top:1px solid #f1f1ee}
.modal-decomp .row:first-child{border-top:none}
.modal-decomp .k{color:var(--muted);font-family:ui-monospace,Menlo,monospace;font-size:11px;
  white-space:nowrap}
.modal-decomp .v{font-weight:700;color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));text-align:right;font-size:13px}
.modal-hist{margin:0;font-size:12.5px;color:var(--muted);border-left:3px solid var(--accent);
  padding:6px 0 6px 12px;line-height:1.6}
.modal-usage{margin:0 0 16px;background:#fafafa;border:1px solid var(--line);
  border-radius:8px;padding:10px 14px}
.modal-use,.modal-ex{margin:0;font-size:13px;line-height:1.6}
.modal-ex{margin-top:8px;padding-top:8px;border-top:1px solid #ececea}
.modal-use .lbl,.modal-ex .lbl,.modal-ref .lbl{display:inline-block;font-size:11px;
  color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));font-weight:700;margin-right:8px;min-width:4em}
.modal-ref{margin:14px 0 0;font-size:12.5px}
.modal-ref a{color:var(--accent-ink,color-mix(in oklab,var(--accent) var(--accent-ink-mix),#000));text-decoration:none;font-weight:600}
.modal-ref a:hover{text-decoration:underline}
.modal-ref .sep{margin:0 7px;opacity:.4}
/* per-genre accent
   --accent: スケッチ塗り/線の色。--accent2: 副色。
   --accent-ink: テキスト用の濃色。明示時はそれを優先、省略時は :root の
   color-mix(in oklab, var(--accent) var(--accent-ink-mix), #000) で自動暗色化しAA確保。 */
.g-Bar{--accent:#3b7dd8;--accent-ink:#2c73d5;--accent2:#9cc2f0}
.g-Line{--accent:#2aa98a;--accent-ink:#20826a;--accent2:#9ad9c8}
.g-Area{--accent:#2bb2d6;--accent-ink:#1e7f99;--accent2:#a3e0f0}
.g-Pie{--accent:#e0792b;--accent-ink:#b45c1a;--accent2:#f3c39a}
.g-Distribution{--accent:#7b5cd6;--accent2:#c3b3ef}
.g-Correlation{--accent:#c0467f;--accent2:#e8aac8}
.g-Hierarchy{--accent:#4c9a3f;--accent-ink:#408235;--accent2:#aed8a6}
.g-Network{--accent:#d63b3b;--accent2:#f0a3a3}
.g-Multivariate{--accent:#8a6d2f;--accent2:#d8c596}
.g-Pictorial{--accent:#b8842b;--accent-ink:#976c23;--accent2:#e8cf9a}
.g-Project{--accent:#9a5d2f;--accent2:#e0bd96}
.g-MLEval{--accent:#5a4cc0;--accent2:#b8b0ec}
.g-XAI{--accent:#7c5cc0;--accent2:#c9bce8}
.g-Stats{--accent:#4a6ab0;--accent2:#aebce0}
.g-Quality{--accent:#b5642f;--accent-ink:#ad602d;--accent2:#e6c0a0}
.g-Heatmap{--accent:#d2603f;--accent-ink:#c4502e;--accent2:#f0b89f}
.g-Timeline{--accent:#6a8f3a;--accent-ink:#5e7f33;--accent2:#c2d89a}
.g-Process{--accent:#a8569e;--accent2:#e0b0d8}
.g-Set{--accent:#4a8a78;--accent-ink:#447e6e;--accent2:#a8d2c6}
.g-Gauge{--accent:#c08a2f;--accent-ink:#976d25;--accent2:#e8cf9a}
.g-CS{--accent:#3f5b9c;--accent2:#aab8e0}
.g-3D{--accent:#5b6b87;--accent2:#b4bccd}
.g-Uncertainty{--accent:#8c7bbf;--accent-ink:#7c68b6;--accent2:#c9bce4}
.g-Text{--accent:#7a6a55;--accent2:#c8bda9}
.g-Typography{--accent:#5a5a5a;--accent2:#b5b5b5}
.g-Security{--accent:#9b2d3a;--accent2:#d99aa3}
.g-Game{--accent:#b0398f;--accent2:#e6a8d4}
.g-Notation{--accent:#5a6cc8;--accent2:#b4bce8}
.g-Music{--accent:#8e5bb5;--accent2:#cdb6e3}
.g-Politics{--accent:#7a3b5c;--accent2:#cfa9bf}
.g-LLM{--accent:#7c4dff;--accent2:#c4b0f5}
.g-DevOps{--accent:#4b7a9d;--accent2:#aec6d8}
.g-Symbology{--accent:#3f4650;--accent2:#a8adb4}
.g-Astro{--accent:#4a3f8c;--accent2:#b3aadb}
.g-Divination{--accent:#8a4f86;--accent2:#d2b0cc}
.g-Narrative{--accent:#665599;--accent2:#bbaacc}
.g-Performance{--accent:#994477;--accent2:#dd99bb}
.g-Sports{--accent:#c43f5a;--accent2:#e8a8b4}
.g-AntiPattern{--accent:#9c4a4a;--accent2:#d6a8a8}
.g-Algorithm{--accent:#7048b0;--accent2:#c2add8}
/* 新タクソノミー leaf */
.g-GeoThematic{--accent:#2b8fa8;--accent-ink:#267f96;--accent2:#a3d6e2}
.g-GeoCartogram{--accent:#226f94;--accent2:#99c2d6}
.g-GeoNature{--accent:#2f7d6b;--accent2:#a3d2c6}
.g-ArchTransit{--accent:#6f7a6a;--accent2:#c4ccbe}  /* --accent-ink 省略=自動暗色化(AA確保)。明示#6d7768は3.8:1で不足 */
.g-SciPhys{--accent:#3a5fa5;--accent2:#a8bce0}
.g-SciMath{--accent:#5a4cc0;--accent2:#b8b0ec}
.g-SciChem{--accent:#1f8a8a;--accent-ink:#1d8080;--accent2:#9fd6d6}
.g-SciEarth{--accent:#8a6d2f;--accent2:#d8c596}
.g-SciBio{--accent:#4c9a3f;--accent-ink:#408235;--accent2:#aed8a6}
.g-SciMed{--accent:#c0467f;--accent2:#e8aac8}
.g-SciQuantum{--accent:#1d6f85;--accent2:#9bc5d1}
.g-EngElec{--accent:#3a6ea5;--accent2:#a8c4e0}
.g-EngCtrl{--accent:#566270;--accent2:#aeb8c2}
.g-Mech{--accent:#7d6b4f;--accent2:#cabfa6}
.g-EngCivil{--accent:#6e6a5e;--accent2:#c2bfb6}
.g-SwUML{--accent:#2f7d6b;--accent2:#a3d2c6}
.g-SwStruct{--accent:#3f5b9c;--accent2:#aab8e0}
.g-DBBlock{--accent:#8a5a3a;--accent2:#d4b39a}
.g-VisColor{--accent:#8a5a9e;--accent2:#d0b4dc}
.g-UXA11y{--accent:#1fa07a;--accent-ink:#1a8465;--accent2:#9bd9c4}
.g-Econ{--accent:#566270;--accent2:#aeb8c2}
.g-Finance{--accent:#2f7d5b;--accent2:#a3d2bd}
.g-Strategy{--accent:#9a5d2f;--accent2:#e0bd96}
.g-Table{--accent:#5f6b76;--accent2:#b6bec6}

.g-WebFront{--accent:#2f7d6b;--accent2:#a3d2c6}
.g-Psych{--accent:#6f5aa8;--accent2:#c0b2e0}
.g-LawForensics{--accent:#4a5a7a;--accent2:#aeb8cc}
.g-OpsMap{--accent:#5a6e4a;--accent2:#b8c4a8}
.g-ReligionMyth{--accent:#5b4a8c;--accent2:#b8acd8}
.g-GraphOrg{--accent:#3a8a7a;--accent-ink:#368172;--accent2:#a6d2c8}

.g-Cryptography{--accent:#4a7a6f;--accent2:#a9cabf}
.g-Heraldry{--accent:#9c4a4a;--accent2:#d6ab6e}
.g-Horology{--accent:#8a6d3b;--accent2:#cbb487}
.g-Landscape{--accent:#5a7d44;--accent2:#b4c79a}
.g-Sensory{--accent:#b06a3c;--accent2:#e2bd98}

.g-Anthropology{--accent:#7a5c8a;--accent2:#c4b2d4}
.g-Demography{--accent:#4a6d8a;--accent2:#aac3d6}
.g-Linguistics{--accent:#8a7a3b;--accent2:#cfc187}

.g-Acoustics{--accent:#6d8f8a;--accent2:#bcd4cf}
.g-Telecom{--accent:#566a9c;--accent2:#b6bedd}

.g-Ornament{--accent:#9a7d4a;--accent2:#d4c29a}
.g-TCM{--accent:#a85a48;--accent2:#d8b3a8}

.g-Accounting{--accent:#3f7a5a;--accent2:#a8ccb6}
.g-FineArt{--accent:#7a5a4a;--accent2:#cbb0a0}
.g-Insurance{--accent:#5a5a8a;--accent2:#b6b6d4}
.g-Layout{--accent:#8a5a7a;--accent2:#d0b0c4}
.g-Photography{--accent:#5a6a7a;--accent2:#b4c0cc}

.g-AgriForest{--accent:#5a7a3a;--accent2:#b4ca94}
.g-HumanGeo{--accent:#4a7a7a;--accent2:#a8ccc8}
.g-Manufacturing{--accent:#7a5a5a;--accent2:#cab4b4}
.g-Materials{--accent:#6a6a7a;--accent2:#bcbcc8}
.g-Military{--accent:#5a6a4a;--accent2:#b4c0a4}
.g-Neuroscience{--accent:#8a4a6a;--accent2:#d4a8c0}
.g-Philosophy{--accent:#6a5a8a;--accent2:#c0b4d8}
.g-SupplyChain{--accent:#7a6a3a;--accent2:#cabf94}

.g-Craft{--accent:#6a5a3a;--accent2:#c0b298}
.g-Energy{--accent:#8a7a3a;--accent2:#d4c894}
.g-FoodSci{--accent:#9a6a3a;--accent2:#d8b894}
.g-Martial{--accent:#8a4a3a;--accent2:#d0a89c}
.g-Printing{--accent:#6a4a6a;--accent2:#c0a0c0}
.g-Robotics{--accent:#4a5a6a;--accent2:#a8b8c8}
.g-UrbanPlan{--accent:#5a6a8a;--accent2:#b0bcd4}

.g-Railway{--accent:#6a4a4a;--accent2:#c0a0a0}

.g-OceanCryo{--accent:#3a6a8a;--accent2:#a0c0d8}
.g-OrgTalent{--accent:#4a6a7a;--accent2:#a8c0cc}
.g-Tourism{--accent:#9a5a6a;--accent2:#d8b0bc}

.g-BehavEcon{--accent:#7a5a4a;--accent2:#cab0a0}