:root{
  --paper:#F3F6FD;
  --card:#FFFFFF;
  --ink:#23306B;
  --ink-soft:#6E79AC;
  --ink-faint:rgba(35,48,107,.18);
  --marker:#FFDD57;
  --signal:#4D6BFE;
  --signal-soft:#E6EBFF;
  --pulse:#FF6B9D;
  --ok:#2EC4B6;
  --radius:22px;
  --font-display:'M PLUS Rounded 1c',sans-serif;
  --font-body:'M PLUS Rounded 1c',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  /* 可視化の描画色(JSが参照) */
  --viz-edge:rgba(35,48,107,.16);
  --viz-edge-dim:rgba(35,48,107,.05);
  --viz-active:#4D6BFE;
  --viz-pulse:#FF6B9D;
  --viz-node-in:#FFE29A;
  --viz-node-hid:#D9E0FF;
  --viz-node-out:#FFD3E2;
  --viz-node-stroke:#23306B;
  --viz-label:#6E79AC;
  --viz-heat:77,107,254;
  --viz-pen:#23306B;
  --viz-canvas-bg:#ffffff;
  --viz-gridline:rgba(35,48,107,.07);
  --viz-featmap:255,120,190;
  --viz-dst-rgb:34,21,66;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(35,48,107,.07) 1.6px,transparent 1.6px);
  background-size:24px 24px;
  line-height:1.8;
  font-size:15.5px;
}
a{color:inherit}
button{font-family:var(--font-body);cursor:pointer}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:8px}

/* ===== ヘッダー ===== */
.topbar{
  position:sticky;top:0;z-index:50;
  background:rgba(243,246,253,.92);backdrop-filter:blur(6px);
  border-bottom:2px solid var(--ink);
}
.topbar-inner{
  max-width:1060px;margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:20px;
}
.brand{font-family:var(--font-display);font-weight:800;font-size:1.08rem;letter-spacing:.01em;white-space:nowrap}
.brand small{font-family:var(--font-mono);font-weight:400;color:var(--pulse);font-size:.66rem;display:block;letter-spacing:.08em}
.topnav{display:flex;gap:6px;overflow-x:auto;margin-left:auto;scrollbar-width:none}
.topnav::-webkit-scrollbar{display:none}
.topnav a{
  text-decoration:none;font-size:.84rem;font-weight:700;color:var(--ink-soft);
  padding:6px 14px;border-radius:999px;white-space:nowrap;border:2px solid transparent;
}
.topnav a:hover{border-color:var(--ink);color:var(--ink);background:var(--marker)}

.wrap{max-width:1060px;margin:0 auto;padding:0 20px}

/* ===== ヒーロー ===== */
.hero{padding:64px 0 48px;display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.45;letter-spacing:.01em;
}
.hl{
  background:var(--marker);border-radius:.45em;padding:.02em .18em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero p.lead{margin-top:18px;color:var(--ink-soft);max-width:34em;font-weight:500}
.hero .hint{margin-top:22px;font-family:var(--font-mono);font-size:.75rem;color:var(--pulse);letter-spacing:.06em;font-weight:600}
.hero-canvas-frame{
  background:var(--card);border:2.5px solid var(--ink);border-radius:26px;
  padding:12px;box-shadow:8px 8px 0 rgba(35,48,107,.14);
  transform:rotate(.6deg);
}
.hero-canvas-frame canvas{display:block;width:100%;height:auto;border-radius:16px}
.hero-canvas-frame figcaption{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft);text-align:right;padding:8px 6px 0;letter-spacing:.05em}

/* ===== 展示(セクション) ===== */
.note{margin:60px 0}
.note-tab{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:600;letter-spacing:.12em;color:#fff;
  margin-bottom:12px;padding:5px 16px;border-radius:999px;
  background:var(--signal);transform:rotate(-1.5deg);
  box-shadow:3px 3px 0 rgba(35,48,107,.18);
}
#digit .note-tab{background:var(--pulse)}
#conv .note-tab{background:var(--ok)}
#sort .note-tab{background:#F59E0B}
#gloss .note-tab{background:#8B5CF6}
.note h2{font-family:var(--font-display);font-weight:800;font-size:clamp(1.35rem,2.6vw,1.8rem);line-height:1.55}
.note .desc{color:var(--ink-soft);margin:12px 0 22px;max-width:44em;font-weight:500}
.panel{
  background:var(--card);border:2.5px solid var(--ink);border-radius:var(--radius);
  padding:24px;box-shadow:8px 8px 0 rgba(35,48,107,.10);
}
.impl-memo{
  margin-top:14px;font-size:.78rem;color:var(--ink-soft);
  background:var(--signal-soft);border-radius:12px;padding:8px 14px;
}
.impl-memo b{color:var(--ink)}

/* コントロール共通 */
.controls{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-bottom:18px}
.ctrl{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--ink-soft)}
.ctrl output{font-family:var(--font-mono);font-weight:600;color:var(--pulse);min-width:1.4em;text-align:center}
input[type=range]{accent-color:var(--pulse);width:130px}
select{
  font-family:var(--font-body);font-size:.84rem;font-weight:600;padding:7px 12px;border-radius:12px;
  border:2px solid var(--ink);background:#fff;color:var(--ink);
}
.btn{
  border:2px solid var(--ink);background:var(--ink);color:#fff;
  font-size:.86rem;font-weight:800;padding:9px 20px;border-radius:999px;
  box-shadow:3px 4px 0 rgba(35,48,107,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.btn:hover{transform:translate(-1px,-2px);box-shadow:5px 7px 0 rgba(35,48,107,.22)}
.btn.ghost{background:#fff;color:var(--ink)}
.btn.ghost:hover{background:var(--marker)}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* ===== 01 ネットワーク構造 ===== */
.nn-stage{overflow-x:auto}
#nnSvg{width:100%;max-width:680px;height:auto;display:block;margin:0 auto}
.nn-result{
  text-align:center;font-family:var(--font-mono);font-size:.85rem;margin-top:8px;min-height:1.6em;color:var(--ink-soft);
}
.nn-result b{color:var(--pulse)}
.legend{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:6px;font-size:.75rem;font-weight:600;color:var(--ink-soft)}
.legend span::before{content:"●";margin-right:5px}
.legend .l-in::before{color:#F5C64A}
.legend .l-hid::before{color:var(--signal)}
.legend .l-out::before{color:var(--pulse)}

/* ===== 02 手書き数字 ===== */
.digit-grid{display:grid;grid-template-columns:auto auto 1fr;gap:26px;align-items:start}
.digit-col h3,.conv-col h3{font-size:.8rem;font-weight:800;letter-spacing:.04em;margin-bottom:8px;color:var(--ink)}
#drawCanvas{
  border:2.5px solid var(--ink);border-radius:18px;background:#fff;
  touch-action:none;cursor:crosshair;display:block;
  box-shadow:4px 4px 0 rgba(35,48,107,.10);
}
#pixelCanvas{border:2px solid var(--ink-faint);border-radius:18px;background:#fff;display:block;image-rendering:pixelated}
.digit-actions{margin-top:14px;display:flex;gap:10px}
.pred-list{display:flex;flex-direction:column;gap:6px;min-width:220px}
.pred-row{display:grid;grid-template-columns:1.4em 1fr 3.4em;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.8rem}
.pred-row .bar{height:13px;border-radius:999px;background:var(--signal-soft);overflow:hidden}
.pred-row .bar i{display:block;height:100%;width:0%;background:var(--signal);border-radius:999px;transition:width .35s ease}
.pred-row.top .bar i{background:var(--pulse)}
.pred-row.top{font-weight:600;color:var(--pulse)}
.mock-note{font-size:.74rem;color:var(--ink-soft);margin-top:10px}

/* ===== 03 特徴抽出 ===== */
.conv-grid{display:grid;grid-template-columns:auto auto auto;gap:26px;align-items:start;justify-content:start}
.conv-grid canvas{border:2px solid var(--ink-faint);border-radius:18px;background:#fff;display:block}
.kernel-btns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.kbtn{
  border:2px solid var(--ink-faint);background:#fff;color:var(--ink-soft);
  font-size:.8rem;font-weight:700;padding:7px 16px;border-radius:999px;
}
.kbtn:hover{border-color:var(--ink);color:var(--ink)}
.kbtn.active{background:var(--ok);border-color:var(--ink);color:#fff;box-shadow:2px 3px 0 rgba(35,48,107,.2)}
.kernel-matrix{
  font-family:var(--font-mono);font-size:.85rem;
  display:grid;grid-template-columns:repeat(3,54px);gap:6px;margin-top:4px;
}
.kernel-matrix span{
  background:var(--signal-soft);border:2px solid #D9E0FF;border-radius:12px;
  text-align:center;padding:10px 0;font-weight:600;
}
.conv-arrow{align-self:center;font-size:1.6rem;color:var(--pulse)}

/* ===== 04 ソート ===== */
#sortBars{
  display:flex;align-items:flex-end;gap:2px;height:220px;
  background:#fff;border:2.5px solid var(--ink);border-radius:18px;padding:12px;
}
#sortBars .bar{flex:1;background:#C3CBEF;border-radius:99px 99px 0 0;transition:height .08s linear}
#sortBars .bar.cmp{background:var(--signal)}
#sortBars .bar.swp{background:var(--pulse)}
#sortBars .bar.done{background:var(--ok)}
.sort-stats{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);margin-top:12px;display:flex;gap:22px}
.sort-stats b{color:var(--pulse)}

/* ===== 05 用語集 ===== */
.gloss-tools{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:18px}
#glossSearch{
  flex:1;min-width:220px;padding:11px 18px;font-size:.9rem;font-family:var(--font-body);font-weight:500;
  border:2px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);
}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  border:2px solid var(--ink-faint);background:#fff;font-size:.78rem;font-weight:700;
  padding:6px 15px;border-radius:999px;color:var(--ink-soft);
}
.chip.active{background:var(--ink);border-color:var(--ink);color:#fff}
.gloss-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.gcard{
  background:var(--card);border:2px solid var(--ink-faint);border-radius:18px;padding:16px 18px;
  transition:transform .12s ease,border-color .12s ease;
}
.gcard:hover{transform:translateY(-2px);border-color:var(--ink)}
.gcard .cat{font-family:var(--font-mono);font-size:.63rem;font-weight:600;letter-spacing:.1em;color:var(--signal);display:inline-block;margin-bottom:6px;background:var(--signal-soft);padding:2px 10px;border-radius:999px}
.gcard .cat.mine{color:#fff;background:var(--pulse)}
.gcard h4{font-size:.98rem;font-weight:800}
.gcard .en{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-soft)}
.gcard p{font-size:.83rem;color:var(--ink-soft);margin-top:8px;line-height:1.75}
.gloss-empty{color:var(--ink-soft);font-size:.85rem;padding:20px 4px}
.add-form{
  margin-top:24px;padding-top:22px;border-top:2px dashed var(--ink-faint);
  display:grid;grid-template-columns:1fr 150px;gap:10px;
}
.add-form input,.add-form textarea{
  font-family:var(--font-body);font-size:.86rem;font-weight:500;padding:10px 16px;
  border:2px solid var(--ink-faint);border-radius:14px;background:#fff;color:var(--ink);
}
.add-form textarea{grid-column:1/-1;resize:vertical;min-height:64px}
.add-form .btn{grid-column:1/-1;justify-self:start}

footer{
  margin-top:70px;border-top:2px solid var(--ink);
  padding:26px 20px 40px;text-align:center;
  font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);letter-spacing:.05em;
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-top:40px}
  .hero-canvas-frame{transform:none}
  .digit-grid{grid-template-columns:1fr;justify-items:start}
  .conv-grid{grid-template-columns:1fr}
  .conv-arrow{transform:rotate(90deg);justify-self:center}
  .add-form{grid-template-columns:1fr}
}

/* ===== 05 OpenCVラボ / 06 カラーツール ===== */
.cv-grid{display:grid;grid-template-columns:auto 230px auto;gap:26px;align-items:start;justify-content:start;margin-bottom:20px}
#cvDst{border:2px solid var(--ink-faint);border-radius:18px;background:#fff;display:block;max-width:100%}
#cvSrc{cursor:crosshair;border:2.5px solid var(--ink);border-radius:18px;background:#fff;display:block;max-width:100%;box-shadow:4px 4px 0 rgba(35,48,107,.10)}
.param-box{display:flex;flex-direction:column;gap:12px;font-size:.83rem;font-weight:600;color:var(--ink-soft);min-height:120px}
.param-box .ctrl{width:100%;justify-content:space-between}
.param-box input[type=range]{width:120px}
.param-box .p-note{font-size:.74rem;line-height:1.7;font-weight:500}
.preset-chips{display:flex;flex-wrap:wrap;gap:7px}
.preset-chips button{width:28px;height:28px;border-radius:50%;border:2.5px solid #fff;box-shadow:0 0 0 2px var(--ink-faint);cursor:pointer}
.preset-chips button:hover{transform:scale(1.15);box-shadow:0 0 0 2px var(--ink)}
.code-head{display:flex;align-items:center;gap:14px;margin-top:10px}
.code-head h3{font-size:.78rem;font-weight:800;letter-spacing:.02em;color:var(--ink)}
.code-box{font-family:var(--font-mono);font-size:.78rem;line-height:1.65;background:#251C4D;color:#EDE9FF;border:2px solid #3A2F6B;border-radius:16px;padding:14px 18px;overflow-x:auto;margin-top:10px;white-space:pre}
.picker-grid{display:grid;grid-template-columns:180px minmax(230px,1fr) minmax(260px,1.2fr);gap:30px;align-items:start}
.swatch{width:150px;height:150px;border-radius:20px;border:2.5px solid var(--ink);box-shadow:4px 4px 0 rgba(35,48,107,.12)}
#cpNative{margin-top:14px;width:150px;height:44px;border:2px solid var(--ink);border-radius:14px;background:#fff;cursor:pointer;padding:3px}
.cp-row{display:grid;grid-template-columns:1.4em 1fr 2.8em;gap:10px;align-items:center;font-family:var(--font-mono);font-size:.8rem;margin-bottom:8px}
.cp-sep{font-size:.72rem;letter-spacing:.04em;color:var(--ink);margin:10px 0 6px;font-weight:800}
.val-row{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;margin-bottom:8px}
.val-row .vlabel{width:64px;color:var(--ink-soft);flex:none}
.val-row code{flex:1;background:var(--signal-soft);border:2px solid #D9E0FF;border-radius:10px;padding:6px 10px;overflow-x:auto;white-space:nowrap}
.copy-mini{border:2px solid var(--ink-faint);background:#fff;border-radius:999px;font-size:.7rem;font-weight:700;padding:5px 12px;color:var(--ink);flex:none}
.copy-mini:hover{border-color:var(--ink);background:var(--marker)}
.range-code{margin-top:4px}
#cvlab .note-tab{background:#0EA5E9}
#colortool .note-tab{background:linear-gradient(90deg,#FF6B6B,#F5A623,#2EC4B6,#4D6BFE)}
@media (max-width:960px){
  .cv-grid{grid-template-columns:1fr}
  .picker-grid{grid-template-columns:1fr}
}

/* ===== 07-10 ディープラーニング ===== */
.duo-grid{display:grid;grid-template-columns:auto minmax(250px,1fr);gap:28px;align-items:start}
.plot{border:2px solid var(--ink-faint);border-radius:18px;background:#fff;display:block;max-width:100%;height:auto}
#lossPlot{cursor:grab;touch-action:none;border:2.5px solid var(--ink);box-shadow:4px 4px 0 rgba(35,48,107,.10)}
#gdPlot{cursor:pointer;width:100%;max-width:640px;border:2.5px solid var(--ink)}
.mini-h{font-size:.78rem;font-weight:800;letter-spacing:.03em;margin-bottom:10px;color:var(--ink)}
.sub-block{margin-top:24px;padding-top:22px;border-top:2px dashed var(--ink-faint)}
.bar-row{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;margin-bottom:9px}
.bar-row code{min-width:76px;text-align:right;background:none;border:none;padding:0}
.mbar{flex:1;height:13px;border-radius:999px;background:var(--signal-soft);overflow:hidden;min-width:80px}
.mbar i{display:block;height:100%;width:0%;background:var(--signal);border-radius:999px;transition:width .25s ease}
.mbar-p i{background:var(--pulse)}
#loss .note-tab{background:#F43F5E}
#gd .note-tab{background:#6366F1}
#metrics .note-tab{background:#059669}
#overfit .note-tab{background:#D97706}
@media (max-width:960px){ .duo-grid{grid-template-columns:1fr} }

/* ===== ページ構成 ===== */
[hidden]{display:none!important}
.topnav a.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.page-head{margin:52px 0 0}
.page-head h1{font-family:var(--font-display);font-weight:800;font-size:clamp(1.6rem,3.2vw,2.2rem);line-height:1.45}
.page-head .desc{color:var(--ink-soft);margin-top:10px;max-width:44em;font-weight:500}
.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.subnav a{text-decoration:none;font-size:.78rem;font-weight:700;border:2px solid var(--ink-faint);background:#fff;color:var(--ink-soft);padding:6px 15px;border-radius:999px}
.subnav a:hover{border-color:var(--ink);color:var(--ink);background:var(--marker)}
#bpSvg{width:100%;max-width:680px;height:auto;display:block;margin:0 auto}
#act .note-tab{background:#DB2777}
#bp .note-tab{background:#2563EB}
#optim .note-tab{background:#7C3AED}

/* ===== 機械学習ページ タブ色 ===== */
#kmeans .note-tab{background:#0891B2}
#knn .note-tab{background:#4D6BFE}
#tree .note-tab{background:#16A34A}
#linreg .note-tab{background:#EA580C}
#ae .note-tab{background:#9333EA}
#pca .note-tab{background:#0D9488}
#rl .note-tab{background:#DC2626}
#embed .note-tab{background:#7C3AED}
#ngram .note-tab{background:#2563EB}
#bayes .note-tab{background:#DB2777}
#aeGen{background:#0d1030}

/* ===== 初学者向け: TL;DR / たとえ / 操作ガイド / 難易度 ===== */
.tldr{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--signal-soft);
  border:2px solid var(--ink);border-radius:16px;
  padding:14px 18px;margin:14px 0 18px;
  box-shadow:4px 4px 0 rgba(35,48,107,.10);
}
.tldr .ic{font-size:1.3rem;line-height:1.4;flex:none}
.tldr .body{font-size:.92rem;font-weight:500}
.tldr .body b{background:var(--marker);border-radius:.4em;padding:0 .25em}
.tldr .analogy{display:block;margin-top:6px;font-size:.84rem;color:var(--ink-soft);font-weight:500}
.howto{
  display:flex;flex-wrap:wrap;gap:8px 16px;
  background:var(--paper);border:1px dashed var(--ink-faint);border-radius:12px;
  padding:10px 16px;margin:16px 0 4px;font-size:.82rem;color:var(--ink-soft);
}
.howto b{color:var(--ink);font-weight:700}
.howto .step{display:flex;align-items:center;gap:6px}
.howto .step::before{
  content:attr(data-n);display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
  font-size:.72rem;font-weight:700;font-family:var(--font-mono);flex:none;
}
.lvl{
  display:inline-block;font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  letter-spacing:.08em;padding:3px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;
}
.lvl-basic{background:#DCFCE7;color:#166534}
.lvl-mid{background:#FEF3C7;color:#92400E}
.lvl-adv{background:#FEE2E2;color:#991B1B}

/* ===== 混同行列のセル / 新テーマ タブ色 ===== */
.cm-cell{border-radius:12px;padding:12px;text-align:center;border:2px solid var(--ink-faint)}
.cm-cell b{display:block;font-size:1.6rem;font-family:var(--font-mono);line-height:1.1}
.cm-cell span{font-size:.68rem;color:var(--ink-soft)}
.cm-tp{background:rgba(46,196,182,.15);border-color:rgba(46,196,182,.5)}
.cm-tn{background:rgba(46,196,182,.1);border-color:rgba(46,196,182,.4)}
.cm-fn{background:rgba(255,107,157,.13);border-color:rgba(255,107,157,.5)}
.cm-fp{background:rgba(255,107,157,.13);border-color:rgba(255,107,157,.5)}
#svm .note-tab{background:#0369A1}
#forest .note-tab{background:#15803D}
#confmat .note-tab{background:#B45309}
#tsne .note-tab{background:#6D28D9}
#blur .note-tab{background:#0891B2}
#canny .note-tab{background:#7C3AED}
#contour .note-tab{background:#DC2626}
#resize .note-tab{background:#0D9488}