/* CatNIP 原生 BF16 权重分布与平滑度 —— 样式表
 * 由原深色主题转换为主站浅色配色；调色在 :root，改主题优先改那里。
 * 注意两处跨文件约定：
 *   - .legend 的渐变必须与 assets/js/bf16.js 里的 turbo 色表一致
 *   - --data-line / --curve-ref / --axis / --placeholder / --na-cell
 *     由 bf16.js 读去画 canvas，改这些会直接影响图表
 */

/* ============================================================================
   CatNIP 原生 BF16 权重分布与平滑度 —— 浅色主题样式表
   Theme B：数据密集型可读性优先（3 张表格 / 6 个 canvas / 满屏数字）

   来源：原深色单页报告的两个 <style> 块合并转换而来。
   调色全部收敛在 :root，改主题优先改那里；值直接取自主站 index.css 调色板。

   ── 转换原则 ────────────────────────────────────────────────────────────────
   1. 只改颜色相关声明。所有选择器、grid/flex/尺寸/间距/字号/圆角与原文件逐条一致；
      新增的规则（斑马纹、code/summary/.note b 取色、print）只写 color 类属性。
   2. 深色 :root 的 8 个变量一一映射为浅色语义等价物，不新造色相。
   3. 层次靠"面"的三级台阶做，不靠加重边框：
        paper #f5f3ed（页面）< surface-2 #edf3f1（托盘/表头）< surface #fffdf9（数据面）
      规则：**白面承载数据**（canvas 绘图区、表格正文、metric 读数芯片、panel/note），
            **带青灰的浅底是外壳**（card 托盘、sticky 表头）。
      于是每个 canvas 都是"托盘里的一张白纸"，与容器有 1.11:1 的明度台阶 + 1px 描边。
   4. --teal #118a80 在白底只有 4.16:1 → 只用于填充/描边，绝不做文字；
      所有青色文字（--cyan/.eyebrow/.kicker/border-left 强调）一律用 --teal-dark #08675f。
   5. 深色 rgba 叠加照搬到浅底会发灰发脏 → 半透明层、阴影、发丝线全部按浅底重算：
      阴影用主站的 rgba(28,49,68,.045~.09)，不用 #0005。
   6. 顶部光晕由"加深"改为"提亮"（见 body），因为 --muted 在 paper 上只剩 4.82:1，
      任何压暗背景的装饰层都会把最小号的次要文字拖到 AA 以下。

   ── 关键对比度实测（WCAG AA 阈值：文字 4.5:1，图形/描边 3:1）────────────────
     正文
       --ink #152337      on --paper #f5f3ed .............. 14.26:1
       --ink              on --surface #fffdf9 ............ 15.57:1
       --ink              on --surface-2 #edf3f1 .......... 14.08:1
       --ink-soft #2c3e52 on --surface（表格正文/findings）  10.78:1
       --ink-soft         on 斑马纹 #f4f8f6 ............... 10.22:1
       --ink-soft         on 行悬停 #eaf1ee ...............  9.55:1
       --ink-soft         on .case-note #ebf7f4 ...........  9.98:1
       --ink-soft         on pre #f4f7f5 .................. 10.15:1
       .lead #405166      on --paper ......................  7.32:1
     次要文字（--muted #5f6c7c，全站最紧的一档，逐个背景都验过）
       on --paper ......... 4.82:1     on --surface ........ 5.27:1
       on --surface-2 ..... 4.76:1     on .panel 渐变尾 .... 5.09:1
       on .fact 半透明面 .. 5.18:1     on 顶部光晕 ......... 5.00:1
       on 斑马纹 .......... 5.00:1     on 行悬停 ........... 4.67:1
       → 最低 4.67:1，全部 ≥4.5:1
     强调 / 标题
       --cyan(=--teal-dark #08675f) on --paper ............  6.07:1
       --cyan             on --surface ....................  6.63:1
       --cyan             on --surface-2 ..................  6.00:1
       --cyan             on 顶部光晕 ......................  6.30:1
       --navy #18334f     on 表头 #edf2f0 ................. 11.42:1
       --navy             on --surface（metric b / fact b） 12.72:1
       --navy             on --surface-2（card-title） .... 11.50:1
     canvas 绘图区（底 = --surface #fffdf9，见下方 risks / canvas 一节）
       #08675f 直方图柱 + trace 线 .......................  6.63:1
       #a5761c 高斯参考曲线（2px 描边，阈值 3:1）.........  3.97:1
       #5f6c7c 坐标轴 / 占位文字 .........................  5.27:1
     面与面的明度台阶（不是文字，仅用于确认层次可见）
       canvas #fffdf9 ÷ card #edf3f1 ..... 1.11    表头 ÷ 表体 ..... 1.11
       斑马纹 ÷ 表体 .................... 1.05    悬停 ÷ 斑马纹 ... 1.07

   ── 未改动的部分 ───────────────────────────────────────────────────────────
   热力图像素由 JS 的 turbo / diverge colormap 画出，本次不在改动范围内：
     · diverge 的零点是 rgb(239,235,224)=#efebe0 暖白，与浅底天然相容；
     · turbo 的低端是 rgb(23,27,38) 深蓝黑，是一张自带底色的栅格图，只需描边收边。
   .legend 的 5 个色标就是 turbo 的采样点，必须与 JS 逐位一致，故原样保留。
   ========================================================================= */

:root{
  /* 作图区描边。canvas 底(--surface)与所在面板几乎同色（1.11:1），
     只靠 --ring(1.19:1) 的话直方图与 trace 图看不出边界；这里单独给一档
     稍重的（1.43:1），仍比站内面板边框克制。 */
  --plot-edge: rgba(21,35,55,.18);

  /* overview 缺测格。色标低端已是页面纸色，缺测格必须明显区别于它，
     又不能像色标里的任何一档，所以取中性灰（对纸色 1.96:1）。
     assets/js/bf16.js 读这个变量。 */
  --na-cell: #a8b2b0;

  /* —— 主站调色板：与 index.css 的 :root 同值，不做任何改动 —— */
  --paper:#f5f3ed;
  --surface:#fffdf9;
  --surface-2:#edf3f1;
  --navy:#18334f;
  --teal:#118a80;
  --teal-dark:#08675f;
  --amber:#e6a43a;
  --coral:#d7624e;
  --violet:#7161a8;
  --shadow:0 18px 60px rgba(28,49,68,.09);
  --radius:18px;

  /* —— 原深色 8 个变量 → 浅色语义等价物 —— */
  --bg:var(--paper);          /* #090b10 → 页面纸底 */
  --panel:var(--surface);     /* #121720 → 一级面：panel / note / 表体 / 读数芯片 */
  --panel2:var(--surface-2);  /* #171e29 → 二级面：card 托盘（canvas 的外框） */
  --ink:#152337;              /* #eef3f7 → 正文 */
  --muted:#5f6c7c;            /* #9ba7b5 → 次要文字，浅底上仍 ≥4.5:1 */
  --line:#d8dedc;             /* #293442 → 容器外框 */
  --cyan:var(--teal-dark);    /* #54d8cb → 强调色，取文字安全的深青（原值在白底 1.6:1） */
  /* --amber 已在上方主站调色板中赋为 #e6a43a（原 #f3bf62）：只做填充，
     需要描边/文字时用下方的 --curve-ref（#e6a43a 在白底仅 2.12:1）。 */

  /* —— 为浅底新增的辅助值 —— */
  --ink-soft:#2c3e52;         /* 表格/清单里的密集读数：比 ink 柔和，仍 ~10:1，久读不刺眼 */
  --lead:#405166;             /* 主站 hero-lead 同色 */
  --line-soft:#e4eae8;        /* 表格行分隔发丝线：让斑马纹当主分隔，横线退居其次 */
  --ring:rgba(21,35,55,.09);  /* canvas / legend 的 1px 描边，box-shadow 不占布局 */
  --shadow-soft:0 10px 34px rgba(28,49,68,.05);   /* 浅底重算，替代深色的 #0006 */
  --shadow-head:0 6px 12px -10px rgba(21,35,55,.55); /* sticky 表头下沿的"搁板"投影 */

  --row-alt:#f4f8f6;          /* 斑马纹：8 列宽表横向扫读的锚点 */
  --row-hover:#eaf1ee;        /* 行悬停：比斑马纹再深一档，青灰色相，不与斑马纹混淆 */

  /* canvas 里由 JS 画的数据色（浅底安全版）。JS 目前仍是深色主题的硬编码值，
     由主控替换；此处登记为变量便于对齐与后续 getComputedStyle 读取。 */
  --data-line:var(--teal-dark);  /* #54d8cb → 直方图柱 / trace / trend 线 */
  --curve-ref:#a5761c;           /* #f3bf62 → 高斯参考曲线（白底 3.97:1） */
  --axis:#5f6c7c;                /* #657080 → 坐标轴 */
  --placeholder:#5f6c7c;         /* #74808d → "not applicable" 占位文字 */

  --mono:"SFMono-Regular",Consolas,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;

  color-scheme:light;         /* 原生 select 下拉、滚动条、焦点环跟着变浅 */
}

*{box-sizing:border-box}

/* 顶部光晕：原 #173742 是"压暗"型；浅底上压暗会把 --muted(4.82:1) 拖到 4.3:1。
   改为主站的浅青 #f0faf7 做"提亮"型光晕 —— 位置/半径与原文件完全一致
   (circle at 12% -8% / transparent 32%)，但落在它上面的文字对比度是提升的：
   muted 5.00:1、cyan 6.30:1、ink 14.78:1。
   background-repeat:no-repeat：body 背景会传播到画布，不加会在长页面上出现色带接缝。 */
body{
  margin:0;
  background:radial-gradient(circle at 12% -8%,rgba(240,250,247,.85) 0,transparent 32%),var(--bg);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:min(1540px,calc(100% - 36px));margin:auto}
header{padding:68px 0 38px;border-bottom:1px solid var(--line)}
h1{font-size:clamp(36px,6vw,74px);line-height:.98;letter-spacing:-.05em;margin:14px 0 22px;max-width:1200px;color:var(--ink)}
h2{font-size:30px;letter-spacing:-.03em;margin:0 0 10px;color:var(--ink)}
h3{margin:4px 0 10px;color:var(--navy)}
.eyebrow,.kicker{font:700 11px var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--cyan)}
p{color:var(--muted)}
.lead{font-size:18px;max-width:980px;color:var(--lead)}

.facts{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:30px}
/* 原 #0d1219cc 是"比面板更暗"的半透明；浅底反过来要"比纸底更亮"，
   rgba(255,253,249,.82) 落在 paper 上等效 #fdfbf7（muted 5.18:1），与主站 .metric 同款 */
.fact{background:rgba(255,253,249,.82);border:1px solid var(--line);border-radius:11px;padding:13px}
.fact b{display:block;font:650 19px var(--mono);color:var(--navy)}
.fact span{font-size:11px;color:var(--muted)}
section{padding:46px 0;border-bottom:1px solid var(--line)}
.section-head{display:flex;justify-content:space-between;gap:26px;align-items:end;margin-bottom:20px}
.section-head p{max-width:800px;margin:0}
/* 原渐变从 --panel 走向更暗的 #0e1218；浅底同向翻转：从纯净白面走向极淡青灰，
   保持"左上受光"的方向感。白面对纸底只有 1.09:1，靠柔和投影 + 1px 边框分离。 */
.panel{background:linear-gradient(145deg,var(--panel),#f7faf8);border:1px solid var(--line);border-radius:15px;padding:18px;box-shadow:var(--shadow-soft)}
.findings{display:grid;grid-template-columns:1.15fr .85fr;gap:15px}
.findings ol{margin:0;padding-left:22px}
.findings li{padding:7px 0;color:var(--ink-soft)}

.controls{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
label{font-size:11px;color:var(--muted);letter-spacing:.07em;text-transform:uppercase}
select{display:block;margin-top:5px;min-width:185px;max-width:460px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:9px 28px 9px 10px}
.overview-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}

/* canvas：整页 6 块画布的"纸"。选 --surface #fffdf9 而不是带青灰的浅底，理由有三 —
   ① histCanvas / 两个 traceCanvas / trendCanvas 每帧只 clearRect，线条之外露的就是这个底，
      白底能把假定改深后的数据线拉到最高对比（#08675f 6.63:1、#a5761c 3.97:1、轴 5.27:1）；
   ② 与 .card 托盘 #edf3f1 有 1.11:1 的明度台阶，绘图区和容器一眼分得开；
   ③ weightCanvas 的 diverge 零点是暖白 #efebe0，白底 + 冷调托盘让这张暖色栅格
      读作"一张图片"，而不是页面上的一个洞。
   1px 描边用 box-shadow 而非 border：不改变盒模型，不影响 JS 里的 clientWidth 采样。 */
canvas{display:block;width:100%;background:var(--surface);box-shadow:0 0 0 1px var(--plot-edge);border-radius:8px}
#overviewCanvas{height:620px;image-rendering:pixelated}
/* ↓ 这 5 个色标就是 JS turbo() 的插值锚点，必须与之逐位一致，故原样保留；
   只补一圈描边，免得色带在浅底上"悬空"。turbo 改了这里必须同步改。 */
.legend{height:10px;border-radius:10px;background:linear-gradient(90deg,#f5f3ed,#78c4ba,#42b6a4,#ffd166,#ef476f);box-shadow:0 0 0 1px var(--ring);margin:12px 0 4px}

.micro,code,pre{font-family:var(--mono)}
/* 原 #788594 在浅底会掉到 3.x:1；统一收到 --muted，11px 小字也保证 ≥4.5:1 */
.micro{font-size:11px;color:var(--muted);overflow-wrap:anywhere}
code{color:var(--teal-dark)}
/* 语义色块：主站 .callout.good 同源（浅青底 + 青边），左侧 3px 保持强调条 */
.case-note{background:#ebf7f4;border:1px solid #b8dbd4;border-left:3px solid var(--cyan);padding:11px 14px;border-radius:9px;margin-bottom:14px;color:var(--ink-soft)}

.detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
/* card 是 canvas 的托盘：用 --surface-2 冷调浅底，把里面的白色绘图区顶出来。
   托盘不加投影（一排 5 个托盘各带投影会很吵），只用 1px --line 收边。 */
.card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px;min-width:0}
.card canvas{height:380px}
.card-title{display:flex;justify-content:space-between;gap:12px;font:650 13px var(--mono);margin-bottom:8px;color:var(--navy)}

#tensorMeta{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:14px 0}
/* 读数芯片按"白面 = 数据"的规则给纯净白：在纸底上是浮起的读数块，
   在 .panel 里（.threshold）则靠 1px --line 收边。10 个芯片一律不加投影。 */
.metric{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:10px}
.metric span{display:block;color:var(--muted);font-size:11px}
.metric b{font:600 12px var(--mono);overflow-wrap:anywhere;color:var(--navy)}

/* —— 表格：白面 + 斑马纹 + 发丝线，本页最需要久读的地方 —— */
.scroll{overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:11px;box-shadow:var(--shadow-soft)}
table{width:100%;border-collapse:collapse;font-size:12px;background:var(--surface);color:var(--ink-soft)}
/* sticky 表头：border-collapse 下滚动时 border 会跟着行走丢，用 inset 阴影补一条实底线；
   再叠一层几乎贴合的外投影当"搁板"，让表头与滚动中的数据行始终分层。 */
th{position:sticky;top:0;background:#edf2f0;color:var(--navy);box-shadow:inset 0 -1px 0 var(--line),var(--shadow-head);text-align:left;font:650 11px var(--mono);text-transform:uppercase}
th,td{padding:9px 11px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
td:last-child{white-space:normal}
/* 斑马纹：最宽的表有 8 列且全部 nowrap，横向扫读靠它锚行；
   与表体只差 1.05:1，够看清行带、又不会在 30 行连排时形成条纹噪声。 */
tbody tr:nth-child(even){background:var(--row-alt)}
/* 悬停必须压过斑马纹（同特异度，靠源码顺序），且比斑马纹再深一档 */
tbody tr:hover{background:var(--row-hover)}

.family-grid{display:grid;grid-template-columns:1fr;gap:14px}
.threshold{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.threshold .metric b{font-size:17px}
.method{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
/* .note 原本无外框，靠深色面板与背景拉开；浅底上白面对纸底只有 1.09:1，
   改用柔和投影做分离（不加 border，免得改变 grid 里的视觉宽度）。 */
.note{background:var(--panel);border-left:3px solid var(--cyan);box-shadow:var(--shadow-soft);padding:14px 16px;color:var(--muted)}
.note b{color:var(--navy)}
details{margin:12px 0;color:var(--muted)}
summary{color:var(--navy)}
/* manifest JSON：原 #080b10 近黑；浅底给一块极淡青灰纸 + inset 发丝框，
   正文用 --ink-soft（10.15:1），长段等宽数字久读不刺眼。 */
pre{white-space:pre-wrap;background:#f4f7f5;color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:8px;padding:12px;max-height:300px;overflow:auto;font-size:11px}
footer{padding:34px 0 70px;color:var(--muted);font-size:12px}

@media(max-width:900px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .findings,.overview-grid,.detail-grid,.method{grid-template-columns:1fr}
  .section-head{display:block}
  #tensorMeta{grid-template-columns:repeat(2,1fr)}
}

/* 打印：纸底换纯白、去掉所有投影；表格边框改回实线，斑马纹保留给行对齐用。
   canvas 是否出图由浏览器的 print-color-adjust 决定，这里不强制。 */
@media print{
  body{background:#fff}
  .panel,.note,.scroll{box-shadow:none}
  th{box-shadow:none;border-bottom:1px solid var(--line)}
}


/* ---- 返回主报告 ---- */
.nav-home {
  display: inline-block;
  margin-bottom: 14px;
  font: 700 12px/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  text-decoration: none;
}
.nav-home:hover { text-decoration: underline; }
.nav-home span { padding-right: 2px; }