/* ============================================================
   Learning Notes — 统一主题：Claude 暖灰底 (#F8F8F6) + 石墨灰 (#5A5953)
   与 paper-snapshots 共用同一套设计 token。极简近单色：浅色头部、1px 细线、
   小圆角、几乎无阴影；石墨灰点缀链接 / 激活态 / 重点。
   ============================================================ */

:root {
  /* —— 设计 token（与 paper-snapshots 对齐）—— */
  --ln-bg:        #F8F8F6;   /* 页面背景 */
  --ln-surface:   #FFFFFF;   /* 卡片 / 头部 / 侧栏 */
  --ln-surface-2: #F1EFEA;   /* 代码块 / 表头 / hover */
  --ln-ink:       #201F1C;   /* 正文（暖近黑）*/
  --ln-ink-2:     #3A3833;   /* 次级标题 */
  --ln-muted:     #6B675F;   /* 次要文字 */
  --ln-line:      #E8E4DC;   /* 1px 细边框 */
  --ln-acc:       #5A5953;   /* 强调 / 链接 / 激活（石墨灰）*/
  --ln-acc-weak:  #ECEAE3;   /* 石墨灰淡底 */

  /* —— 映射到 Material 变量 —— */
  --md-default-bg-color:          var(--ln-bg);
  --md-default-fg-color:          var(--ln-ink);
  --md-default-fg-color--light:   var(--ln-ink-2);
  --md-default-fg-color--lighter: var(--ln-muted);
  --md-default-fg-color--lightest:var(--ln-line);

  /* 头部用浅色（不要整条石墨灰横幅），文字用暖近黑 */
  --md-primary-fg-color:        var(--ln-surface);
  --md-primary-fg-color--light: var(--ln-surface);
  --md-primary-fg-color--dark:  var(--ln-surface-2);
  --md-primary-bg-color:        var(--ln-ink);
  --md-primary-bg-color--light: var(--ln-muted);

  /* 石墨灰作为强调 / hover */
  --md-accent-fg-color:             var(--ln-acc);
  --md-accent-fg-color--transparent:rgba(90, 89, 83, .1);

  /* 链接与代码 */
  --md-typeset-a-color: var(--ln-acc);
  --md-code-bg-color:   var(--ln-surface-2);
  --md-code-fg-color:   var(--ln-ink-2);
}

/* 中文字体回退（Inter 没有的字形交给系统中文字体）*/
:root {
  --md-text-font-family: "Inter", -apple-system, BlinkMacSystemFont,
    "PingFang SC", "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
  --md-code-font-family: "JetBrains Mono", ui-monospace, SFMono-Regular,
    "SF Mono", Menlo, Consolas, monospace;
}

/* —— 头部：浅色 + 底部细线 + 无阴影（扁平极简）—— */
.md-header {
  background-color: var(--ln-surface);
  color: var(--ln-ink);
  border-bottom: 1px solid var(--ln-line);
  box-shadow: none;
}
.md-header--shadow { box-shadow: none; }
.md-header__title { font-weight: 600; }

/* 顶部 tab：选中态石墨灰下划线 */
.md-tabs {
  background-color: var(--ln-surface);
  color: var(--ln-ink);
  border-bottom: 1px solid var(--ln-line);
}
.md-tabs__link { opacity: .82; }
.md-tabs__link:hover,
.md-tabs__link--active { opacity: 1; color: var(--ln-acc); }

/* 搜索框 */
.md-search__form {
  background-color: var(--ln-surface-2);
  border: 1px solid var(--ln-line);
  box-shadow: none;
  border-radius: 10px;
}
.md-search__form:hover { background-color: var(--ln-surface-2); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--ln-surface);
}

/* —— 左侧导航：激活项石墨灰 —— */
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover { color: var(--ln-acc); }
.md-nav__item--active > .md-nav__link { font-weight: 600; }

/* 右侧 TOC 激活态 */
.md-nav__link--active { color: var(--ln-acc); }

/* —— 正文排版 —— */
.md-typeset { font-size: .82rem; line-height: 1.75; color: var(--ln-ink); }
.md-typeset h1 { font-weight: 700; letter-spacing: -.01em; color: var(--ln-ink); }
.md-typeset h2 {
  font-weight: 650;
  margin-top: 2.2em;
  padding-bottom: .25em;
  border-bottom: 1px solid var(--ln-line);
  color: var(--ln-ink);
}
.md-typeset h3 { color: var(--ln-ink-2); }
.md-typeset a { text-decoration: none; }
.md-typeset a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* 行内代码 */
.md-typeset code {
  background-color: var(--ln-surface-2);
  border: 1px solid var(--ln-line);
  border-radius: 5px;
  padding: .1em .35em;
}
/* 代码块：扁平、细线、无重阴影 */
.md-typeset pre > code { border: none; }
.md-typeset .highlight,
.md-typeset pre {
  border: 1px solid var(--ln-line);
  border-radius: 10px;
  box-shadow: none;
}

/* 表格：扁平细线，石墨灰表头底线 */
.md-typeset table:not([class]) {
  border: 1px solid var(--ln-line);
  border-radius: 10px;
  box-shadow: none;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--ln-surface-2);
  color: var(--ln-ink);
  font-weight: 600;
}

/* 引用块：石墨灰左边线 */
.md-typeset blockquote {
  border-left: 3px solid var(--ln-acc);
  color: var(--ln-muted);
}

/* 提示框（admonition）：扁平、细线、小圆角 */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--ln-line);
  border-radius: 10px;
  box-shadow: none;
  font-size: .76rem;
}

/* 链接 / 按钮 hover 用石墨灰 */
.md-typeset .md-button {
  border-radius: 10px;
  border-color: var(--ln-line);
}
.md-typeset .md-button--primary {
  background-color: var(--ln-acc);
  border-color: var(--ln-acc);
  color: #fff;
}

/* 页脚：低调 */
.md-footer { background-color: var(--ln-ink); }
.md-footer-meta { background-color: var(--ln-ink-2); }

/* 选区高亮用石墨灰淡底 */
::selection { background: var(--ln-acc-weak); }

/* ===== 交互 demo（action-tokenization / autoregressive / fourier-dct）=====
   浅色主题：画布白底，画布内绘图用深色文字/线条（见各 .js 的配色）。 */
.ln-demo{
  background:var(--ln-surface-2); border:1px solid var(--ln-line);
  border-radius:12px; padding:18px; margin:22px 0;
}
.ln-demo .ln-demo-title{font-weight:700; color:var(--ln-ink); margin-bottom:4px}
.ln-demo .ln-demo-hint{font-size:13px; color:var(--ln-muted); line-height:1.6; margin-bottom:12px}
.ln-demo canvas{background:#FFFFFF; border:1px solid var(--ln-line); border-radius:8px; display:block; max-width:100%; width:100%; height:auto}
.ln-demo .ln-controls{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin:12px 0; font-size:14px}
.ln-demo .ln-controls label{display:flex; align-items:center; gap:8px; color:var(--ln-muted)}
.ln-demo input[type=range]{accent-color:var(--ln-acc)}
.ln-demo button{
  background:var(--ln-surface); color:var(--ln-ink); border:1px solid var(--ln-line);
  border-radius:8px; padding:7px 14px; cursor:pointer; font-size:14px;
}
.ln-demo button:hover{border-color:var(--ln-acc); color:var(--ln-acc)}
.ln-demo .ln-val{color:var(--ln-acc); font-variant-numeric:tabular-nums; font-weight:600}
.ln-demo .ln-readout{font-size:13px; color:var(--ln-muted); line-height:1.6; margin-top:8px; font-variant-numeric:tabular-nums}
/* 切换型按钮的激活态（注意力掩码 / 平滑·粗糙 等 demo）*/
.ln-demo button.on{border-color:var(--ln-acc); color:var(--ln-acc); background:var(--ln-acc-weak)}
/* 图框：承载 SVG 示意图（如 BERT/GPT 架构图、输入序列结构图），浅色 */
.ln-fig{background:#FFFFFF; border:1px solid var(--ln-line); border-radius:10px; padding:14px; margin:22px 0}
.ln-fig svg{max-width:100%; height:auto; display:block; margin:0 auto}
.ln-fig .ln-fig-cap{text-align:center; color:var(--ln-muted); font-size:13px; margin-top:8px}

/* ===== 语义 tag 芯片（DIRECT / LEARNED / LOSSY）=====
   沿用 demo 同款语义色：DIRECT 绿、LEARNED 紫、LOSSY 红；浅底高对比。 */
.md-typeset .ln-tag{
  display:inline-block; padding:.04em .55em; margin:0 .12em;
  border-radius:999px; font-size:.7em; font-weight:700;
  letter-spacing:.4px; vertical-align:middle; line-height:1.7;
  border:1px solid transparent; white-space:nowrap;
}
.md-typeset .ln-direct { color:#2f7d3a; background:rgba(63,185,80,.13);  border-color:rgba(63,185,80,.38); }
.md-typeset .ln-learned{ color:#6f49bf; background:rgba(188,140,255,.16); border-color:rgba(188,140,255,.45); }
.md-typeset .ln-lossy  { color:#c0392f; background:rgba(248,81,73,.12);  border-color:rgba(248,81,73,.38); }

/* ===== 文章左栏：返回箭头 + 目录（自定义 overrides/main.html）===== */
/* 返回上级链接（在「目录」上方）*/
.md-sidebar--primary .ln-back{
  display:inline-flex; align-items:center; gap:.4em;
  margin:.2rem .6rem .6rem; padding:.3em .7em;
  font-size:.7rem; font-weight:600; color:var(--ln-muted);
  border:1px solid var(--ln-line); border-radius:999px;
  background:var(--ln-surface); text-decoration:none;
}
.md-sidebar--primary .ln-back:hover{ color:var(--ln-acc); border-color:var(--ln-acc); }
.ln-back__arrow{ font-size:.95em; line-height:1; }
/* 把本页 TOC（md-nav--secondary）在左栏里正常显示为块 */
.md-sidebar--primary .md-nav--secondary{ display:block; }
.md-sidebar--primary .md-nav--secondary > .md-nav__list{ display:block; }
.md-sidebar--primary .md-nav--secondary .md-nav__title{
  font-weight:700; color:var(--ln-ink); padding-top:0;
}