/* midicn core v0.7.0 · 合成 CSS —— 顺序：token → 壳 → 组件 → 派生色板 */

/* ── base.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   midicn · 站点样式 · 核心 v0.7

   视觉宪法（2026-10-26 改写；旧八行整段作废）
     · 三层装饰，各有分工
         谱线＝结构（仍是 1px）／色块与形状＝情绪与识别／数据图＝信息
     · 三体混排（旧宪法唯一整条保留）
         衬线标题（文献）× 无衬线正文 × 等宽数字（数据）
     · 明暗双主题都是一等设计
         底色跟随系统；每个变量只写一行 light-dark()，不复制 token 块
     · 色彩三层
         中性阶 12 档 ＋ 语义色 5 档（许可／研究／存疑／警示／禁用）＋ 每站一个色相号
     · 形状四级
         r1 / r2 / r3 / rfull，同一屏最多用两档 —— 秩序靠这条，不靠「只有 2px」
     · 投影允许，但必须带色（跟站点 accent 走）；仍禁 backdrop-filter／纹理／霓虹光晕
     · 尺寸交给 clamp() 与容器查询，断点不参与尺寸
     · 形态只在两处翻转：导航（顶栏 ↔ 底部标签栏）与表格（表 ↔ 卡片）
   工程约束
     · 无任何嵌套滚动容器（性能，与审美无关）
     · 触控最小 44px；正文对比度 ≥ WCAG AA —— 两底各测一遍
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* 跟随系统；[data-theme] 可手动覆盖（只需改 color-scheme，所有 light-dark() 自动跟） */
  color-scheme:light dark;

  /* ── 表面 · 文字 · 谱线（原墨/纸，值保持不变；现为双主题配对）── */
  --ink:#0B0B0C;        --ink:light-dark(#F7F4EE,#0B0B0C);
  --ink-2:#111113;      --ink-2:light-dark(#FFFFFF,#111113);
  --ink-3:#17171A;      --ink-3:light-dark(#F1EDE5,#17171A);
  --ink-4:#0E0E10;      --ink-4:light-dark(#FAF8F4,#0E0E10);
  --rule:#242427;       --rule:light-dark(#D9D3C7,#242427);
  --rule-2:#343439;     --rule-2:light-dark(#BDB5A5,#343439);
  --paper:#F2EEE6;      --paper:light-dark(#16161A,#F2EEE6);
  --paper-2:#A9A49B;    --paper-2:light-dark(#5A564E,#A9A49B);
  /* 三档文字色全部按"两底都过 AA(4.5)"定值。旧配对 L3.34／D3.66 是**两个主题都不达标**
     —— 派生亮色时只把对比度当参考、没当底线，就会这样；判据现在钉在 _layout_smoke ⑭。 */
  --paper-3:#6E6A64;    --paper-3:light-dark(#6E6A64,#807B72);

  /* ── 语义色 5 档（全站固定，不随站点变）── */
  --vermilion:#CE4A32;  --vermilion:light-dark(#A93A24,#CE4A32);
  --gold:#C9A227;       --gold:light-dark(#8A6F10,#C9A227);
  --jade:#5E9E7E;       --jade:light-dark(#2F6B50,#5E9E7E);
  --slate:#7A8AA3;      --slate:light-dark(#4C5A70,#7A8AA3);
  /* 许可三档 ＋ 警示 ＋ 禁用：语义固定，角色色不得侵占 */
  --ok:light-dark(#1B7A4C,#58D48A);        /* C1 可商用 */
  --study:light-dark(#1F5FA8,#5A9BD8);     /* C2 研究用途 */
  --doubt:light-dark(#9A6213,#E8A33D);     /* C3 许可存疑 */
  --warn:light-dark(#C0452A,#FF7A5C);      /* 警示（朱砂退位到此） */
  --stop:light-dark(#B32E2E,#E45A5A);      /* 禁用 */

  /* 软底（由主色派生，避免每处手写 rgba） */
  --vermilion-soft:rgba(206,74,50,.14);    --vermilion-soft:light-dark(rgba(169,58,36,.10),rgba(206,74,50,.14));
  --vermilion-line:rgba(206,74,50,.45);    --vermilion-line:light-dark(rgba(169,58,36,.40),rgba(206,74,50,.45));
  --gold-soft:rgba(201,162,39,.14);        --gold-soft:light-dark(rgba(138,111,16,.10),rgba(201,162,39,.14));
  --jade-soft:rgba(94,158,126,.14);        --jade-soft:light-dark(rgba(47,107,80,.10),rgba(94,158,126,.14));

  /* ── 站色：每站只给一个色相号，明暗两版由 L 档派生──
     站点在 shell.css 写 `--accent-h: 85`；下面的 fallback 让旧写法仍可用。 */
  --accent-h:18; --accent-c:.16;
  --accent:oklch(.58 var(--accent-c) var(--accent-h));
  --accent:light-dark(oklch(.58 var(--accent-c,.16) var(--accent-h)),oklch(.80 var(--accent-c,.15) var(--accent-h)));
  --accent-soft:oklch(.58 var(--accent-c,.16) var(--accent-h) / .14);
  --accent-soft:light-dark(oklch(.58 var(--accent-c,.16) var(--accent-h) / .12),oklch(.80 var(--accent-c,.15) var(--accent-h) / .16));
  --on-accent:light-dark(#FFF8F4,#1A0A06);  /* 压在 accent 上的文字 */

  /* ── 中性阶 12 档（给新组件用；旧名继续有效）── */
  --n0:light-dark(#FBF8F1,#08080B);  --n1:light-dark(#FFFFFF,#12121A);
  --n2:light-dark(#F4F0E6,#1A1A25);  --n3:light-dark(#E4DECF,#242432);
  --n4:light-dark(#CFC7B2,#32323F);  --n5:light-dark(#B3AA93,#4A4A5A);
  --n6:light-dark(#8F8875,#6C6C80);  --n7:light-dark(#6E6857,#8E8EA3);
  --n8:light-dark(#524D3F,#B4B4C6);  --n9:light-dark(#38342A,#D6D6E2);
  --n10:light-dark(#211E17,#EFEFE8); --n11:light-dark(#12100B,#F7F6F1);

  /* ── 三体字体 ── */
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  /* ── 字号（流体）── */
  --fs-10:clamp(10px,.62rem,11px);
  --fs-11:clamp(10.5px,.66rem,11.5px);
  --fs-12:clamp(11.5px,.72rem,12.5px);
  --fs-13:clamp(12.5px,.79rem,13.5px);
  --fs-14:clamp(13.5px,.85rem,14.5px);
  --fs-16:clamp(15px,.95rem,16.5px);
  --fs-20:clamp(17px,1.1rem,20px);
  --fs-26:clamp(20px,1.6vw,26px);
  --fs-34:clamp(24px,2.6vw,34px);
  --fs-38:clamp(28px,3.2vw,38px);
  --fs-46:clamp(28px,4vw,46px);
  --lh-tight:1.2; --lh-body:1.68;

  /* ── 间距 ──
     ⚠️ 现为死 px：改成比例化会改动全站排版，必须与 _layout_smoke 的断言重写
        同批落地（REPLAN §七 步 7），否则 12 条断言全红。此处先留原值。 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* ── 形状：四级（旧 --r/--r-lg 保留为别名，组件不必改）── */
  --r-1:8px; --r-2:16px; --r-3:26px; --r-full:999px;
  --r:var(--r-1); --r-lg:var(--r-2);

  /* ── 投影：允许，但必须带色（跟站点 accent 走）── */
  --shadow-1:0 1px 0 light-dark(rgba(90,70,30,.10),rgba(0,0,0,.35)),0 10px 24px -16px oklch(.60 .10 var(--accent-h) / .45);
  --shadow-2:0 2px 0 light-dark(rgba(90,70,30,.08),rgba(0,0,0,.30)),0 20px 44px -22px oklch(.60 .12 var(--accent-h) / .55);

  /* ── 容器 ── */
  --wrap:min(92vw,1560px);
  --wrap-wide:var(--wrap);
  --wrap-read:var(--wrap);
  /* 唯一左右留白值（单一真源）：顶栏 / 正文 / 页脚 / 播放条 / 通用容器共用。
     ⚠️ 不得再各处手写 clamp(var(--s4),Nvw,var(--s6)) —— 曾经顶栏用 3vw、正文用 2vw，
     在 1067–1600px 视口下两者相差最多 8px，页脚也因此对不齐（K-9）。 */
  --gutter:clamp(var(--s4),2.5vw,var(--s6));

  --z-hdr:20; --z-play:30; --z-pop:40;
  --hdr:56px; --play:68px; --tap:44px;

  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
  --t:.15s linear;
}
/* 手动覆盖：只需改 color-scheme，上面所有 light-dark() 自动跟随 */
:root[data-theme=light]{color-scheme:light}
:root[data-theme=dark]{color-scheme:dark}
@media(prefers-reduced-motion:reduce){ :root{--t:.01s} }

/* ── 声波水母 · 和弦与状态色（设计源 v5 §C／§D）───────────────────────
   四色由 shell.css **逐站显式**给定（--jf-1…--jf-4）；这里只决定"哪个部位用哪个"。
   旧方案（--accent-h ＋ Δh 现算）已于 2026-10-27 废止：v5 定稿"所见即所发"。
   状态里的降饱和／无彩用 color-mix 现算，不必为每站再补一组灰。 */
.jf-t1{stroke:var(--jf-1)} .jf-t2{stroke:var(--jf-2)}
.jf-t3{stroke:var(--jf-3)} .jf-t4{stroke:var(--jf-4)}
/* 完成态＝两端交替（v5 §D）：1 / 2 / 4 / 2，不是四色齐上 */
.jf-w1{stroke:var(--jf-1)} .jf-w4{stroke:var(--jf-4)}
/* 伞盖跟着状态变色 —— 只灰触手会读成"坏了一半" */
.jf-dome{fill:var(--jf-dome)}
.jf-dome-n{fill:color-mix(in oklab,var(--jf-dome) 22%,var(--n6))}
.jf-dome-d{fill:color-mix(in oklab,var(--jf-dome) 12%,var(--n4))}
/* 加载：饱和降到 45%；找不到／禁用：无彩；许可：只有一缕取语义琥珀 */
.jf-mute{stroke:color-mix(in oklab,var(--jf-dome) 45%,var(--n6))}
.jf-n{stroke:var(--n6)}
.jf-n4{stroke:var(--n4)}
.jf-doubt{stroke:var(--doubt)}
.jf-dim{stroke:var(--jf-dome);stroke-opacity:.55}

/* ── 顶栏水母的状态切换 ─────────────────────────────────────────────
   几何与配色都由内核在构建期画好，产物里同时放着"当前态"和被切到的
   几张；这里只决定露出哪一张，前端不重画 —— 两处各画一次必然漂移，已吃过教训。
   态由 `<html data-jf=…>` 选，优先级在 kb.js 里算：playing > loading > hint > done。
   idle 一直留在文档流里当尺寸锚：隐藏它用 visibility 而不是 display，
   否则换态瞬间品牌位宽度塌掉，顶栏会跳一下（④ 零导航位移的直接违反）。
   没有 JS 时永远停在 idle —— 静态页必须自己读得通，这是底线。 */
.jf-stack{display:inline-flex;position:relative;line-height:0;flex:none}
.jf-stack .jf{display:none}
.jf-stack .jf-idle{display:block}
.jf-stack .jf-playing,.jf-stack .jf-loading,.jf-stack .jf-done,.jf-stack .jf-hint
  {position:absolute;top:0;left:0}
:root[data-jf=playing] .jf-stack .jf-idle{visibility:hidden}
:root[data-jf=playing] .jf-stack .jf-playing{display:block}
:root[data-jf=loading] .jf-stack .jf-idle{visibility:hidden}
:root[data-jf=loading] .jf-stack .jf-loading{display:block}
:root[data-jf=hint] .jf-stack .jf-idle{visibility:hidden}
:root[data-jf=hint] .jf-stack .jf-hint{display:block}
:root[data-jf=done] .jf-stack .jf-idle{visibility:hidden}
:root[data-jf=done] .jf-stack .jf-done{display:block}
/* 播放中的两缕正弦触手会轻微摆动；关掉动效的人拿到的是同一张图，只是不动 */
@media (prefers-reduced-motion:no-preference){
  :root[data-jf=playing] .jf-stack .jf-playing path:nth-of-type(odd)
    {animation:jf-swim 1.6s ease-in-out infinite alternate}
  @keyframes jf-swim{from{transform:translateY(-.6px)}to{transform:translateY(.6px)}}
}

/* ── 基础 ───────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--ink);color:var(--paper);font-family:var(--sans);
  font-size:var(--fs-14);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  overflow-x:hidden}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2);
  transition:border-color var(--t),color var(--t)}
a:hover{border-bottom-color:var(--vermilion);color:var(--vermilion)}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--vermilion);outline-offset:2px}
img,svg{display:block;max-width:100%}
::selection{background:var(--vermilion);color:#fff}
code,kbd{font-family:var(--mono);font-size:.9em;background:var(--ink-4);border:1px solid var(--rule);padding:.05em .3em}
pre{background:var(--ink-4);border:1px solid var(--rule);padding:var(--s4);overflow-x:auto;
  font-family:var(--mono);font-size:var(--fs-12);line-height:1.8;margin:var(--s3) 0 var(--s5)}
pre code{background:none;border:0;padding:0}

/* ── 三体混排 ───────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:.01em;line-height:var(--lh-tight)}
h1{font-size:var(--fs-34)}
h2{font-size:var(--fs-26)}
h3{font-size:var(--fs-16);font-family:var(--sans);font-weight:650;letter-spacing:0}
p{color:var(--paper-2);margin-bottom:var(--s3)}
strong,b{color:var(--paper);font-weight:650}
.lede{font-family:var(--serif);font-size:var(--fs-16);line-height:1.78;color:var(--paper);
  /* CJK：ch 按半角计，中文会过窄 → 用 em（≈每行中文字数） */
  max-width:100%}
.lede em{font-style:normal;color:var(--vermilion)}
.meta{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3);letter-spacing:.04em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

.stitle{display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  padding-top:var(--s2);border-top:2px solid var(--vermilion);margin:var(--s5) 0 var(--s3)}
.stitle h2{margin:0}
.stitle .spacer{margin-left:auto}

/* ── 谱线母题 ──────────────────────────────────────────────────────── */


/* ── 断行卫生（CJK 逐字断行会导致短文本"莫名换行"）────────────── */
h1,h2,h3{text-wrap:balance}
p,.lede{text-wrap:pretty}
.lede{max-width:100%}
.nav a,.btn,.axis,.langbtn,.dlchip,.dlmore,.fgrid a,.fgrid h4,.stitle h2,.stitle .meta,
.tag,.lic,.pkg .pn,.pkg .pm,.sideitem .si-n,.hero-meta,.hero .kick,.crumbs span,.crumbs a{
  white-space:nowrap}
.nav{flex-wrap:wrap;row-gap:var(--s2)}
@media(max-width:1023px){
  .hbar{flex-wrap:wrap;height:auto;min-height:52px;padding-top:var(--s2);padding-bottom:var(--s2);row-gap:var(--s2)}
  .nav{margin-left:0;width:100%;order:9;gap:var(--s4)}
}

/* ── 容器 ───────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap-read{max-width:var(--wrap-read)}

/* ── 顶栏 ───────────────────────────────────────────────────────────── */
/* 只认站点头：条目正文里的语义 <header class="kb-head"> 不是导航，
   全局 header 选择器会把标题块变成 sticky 色带（v6 点阵背景一上就现形）。 */
body > header{position:sticky;top:0;z-index:var(--z-hdr);background:var(--ink);
  border-bottom:1px solid var(--rule)}
.hbar{max-width:var(--wrap);margin:0 auto;height:var(--hdr);
  padding:0 var(--gutter);display:flex;align-items:center;gap:var(--s5)}
.brand{display:flex;align-items:center;gap:var(--s2);border:0;flex:none}
.brand svg{width:22px;height:22px;flex:none}
/* 404 页的品牌水母按构建期 32px 出图；别让 22px 的常态规则把它压回去 */
.brand .jf-404 svg{width:32px;height:32px}
.brand b{font-family:var(--serif);font-size:var(--fs-16);font-weight:600}
.brand i{font-family:var(--mono);font-size:var(--fs-11);font-style:normal;color:var(--paper-3);margin-left:2px}
.nav{display:flex;gap:var(--s5);font-size:var(--fs-13);margin-left:auto;flex-wrap:wrap}
.nav a{border-bottom:1px solid transparent;padding-bottom:2px;color:var(--paper-2)}
.nav a:hover{color:var(--paper);border-bottom-color:var(--rule-2)}
.nav a.on{color:var(--paper);border-bottom-color:var(--vermilion)}
.iconbtn{width:34px;height:34px;border:1px solid var(--rule);color:var(--paper-2);
  display:grid;place-items:center;transition:var(--t);flex:none}
.iconbtn:hover{border-color:var(--vermilion);color:var(--vermilion)}
.iconbtn svg{width:15px;height:15px;fill:currentColor}
.langbtn{width:auto;padding:0 var(--s3);font-family:var(--mono);font-size:var(--fs-11)}
/* 明暗切换：图标 = 当前主题的反向动作（亮底显示月亮，暗底显示太阳） */
#theme svg{fill:none;stroke:currentColor}
#theme .i-sun{display:none}
#theme .i-moon{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) #theme .i-sun{display:block}
  :root:not([data-theme=light]) #theme .i-moon{display:none}
}
:root[data-theme=dark] #theme .i-sun{display:block}
:root[data-theme=dark] #theme .i-moon{display:none}
:root[data-theme=light] #theme .i-sun{display:none}
:root[data-theme=light] #theme .i-moon{display:block}
/* 底栏 SVG 精灵：只做定义，不占布局 */
.kb-tabicons{position:absolute;width:0;height:0;overflow:hidden}

/* ── 面板 / 瓦片 ─────────────────────────────────────────────────────── */
.panel{border:1px solid var(--rule);background:var(--ink-2)}
.panel-hd{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--rule);font-family:var(--serif);font-size:var(--fs-14)}
.panel-bd{padding:var(--s3) var(--s4)}
.tile{border:1px solid var(--rule);background:var(--ink-2);padding:var(--s3);
  transition:border-color var(--t),background var(--t);display:block}
.tile:hover{border-color:var(--rule-2);background:var(--ink-3);border-bottom-color:var(--rule-2)}
.tile.is-on{border-color:var(--vermilion);background:var(--vermilion-soft)}

/* ── 定义列表（档案风）─────────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s2) var(--s4);font-size:var(--fs-13)}
.dl dt{color:var(--paper-3);white-space:nowrap;font-family:var(--mono);font-size:var(--fs-11);padding-top:2px}
.dl dd{margin:0;color:var(--paper);word-break:break-word}

/* ── 表格 ─────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:var(--fs-13)}
th,td{text-align:left;padding:var(--s3);border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3);
  letter-spacing:.06em;font-weight:500;border-bottom-color:var(--rule-2);white-space:nowrap}
td b{font-weight:600}
.tw{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── 许可徽标（全站同规格）─────────────────────────────────────────── */
.lic{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono);
  font-size:var(--fs-11);white-space:nowrap;border:1px solid currentColor;
  padding:1px var(--s2);color:var(--paper-3)}
.lic::before{content:'';width:6px;height:6px;background:currentColor;flex:none}
.lic.c1{color:var(--jade)} .lic.c2{color:var(--gold)} .lic.c3{color:var(--slate)}
.lic.no{color:var(--vermilion)} .lic.plain{border-color:var(--rule);color:var(--paper-3)}

/* ── 按钮 ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s4);border:1px solid var(--rule-2);background:none;
  color:var(--paper);font-size:var(--fs-13);transition:var(--t)}
.btn:hover{border-color:var(--vermilion);color:var(--vermilion)}
.btn.primary{background:var(--vermilion);border-color:var(--vermilion);color:#fff}
.btn.primary:hover{filter:brightness(1.08);color:#fff}
.btn.ghost{border-color:transparent;color:var(--paper-2);padding:0 var(--s3)}
.btn.ghost:hover{border-color:var(--rule);color:var(--paper)}
.btn svg{width:14px;height:14px;fill:currentColor}

/* ── 声波签名（数据驱动的装饰母题）──────────────────────────────────── */
.sig{display:flex;align-items:flex-end;gap:1px;height:24px}
.sig i{flex:1;background:var(--rule-2);transition:background var(--t)}
.tile:hover .sig i{background:var(--vermilion)}

/* ── 页脚（档案声明）───────────────────────────────────────────────── */
footer{margin-top:var(--s6);border-top:1px solid var(--rule);
  padding:var(--s4) 0 calc(var(--s4) + var(--sa-b))}
.fnote{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--rule);
  font-size:var(--fs-11);color:var(--paper-3);line-height:1.9}

/* ── 紧凑页脚（一行链接 + 一行声明）────────────────────────── */
.fbar{display:flex;align-items:center;gap:var(--s2) var(--s4);flex-wrap:wrap;
  font-size:var(--fs-12);color:var(--paper-3)}
.fbar b{font-family:var(--serif);font-size:var(--fs-13);color:var(--paper);font-weight:600}
.fnav{display:flex;gap:var(--s3) var(--s4);flex-wrap:wrap}
.fnav a{font-size:var(--fs-12);color:var(--paper-2);border-bottom:0}
.fnav a:hover{color:var(--vermilion)}
.flic{margin-left:auto;font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)}
.fnote{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule);
  display:flex;gap:var(--s2) var(--s5);flex-wrap:wrap;justify-content:space-between;
  font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)}
.fnote a{color:var(--paper-3);border-bottom:0}
.fnote a:hover{color:var(--vermilion)}

/* ── 下载卡 ───────────────────────────────────────────────────────── */
.pkgs{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:var(--s3)}
.pkg{border:1px solid var(--rule);background:var(--ink-2);padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s2)}
.pkg:hover{border-color:var(--rule-2)}
.pkg .pn{font-family:var(--serif);font-size:var(--fs-16)}
.pkg .pm{font-family:var(--mono);font-size:var(--fs-11);color:var(--paper-3)}
.pkg .pd{font-size:var(--fs-12);color:var(--paper-2);line-height:1.7;flex:1}
.pkg .dlbtn{align-self:flex-start;min-height:34px;padding:0 var(--s3);background:var(--vermilion);
  color:#fff;display:inline-flex;align-items:center;gap:var(--s2);font-size:var(--fs-12);border:0}
.pkg .dlbtn:hover{filter:brightness(1.08);color:#fff}
.pkg .dlbtn svg{width:13px;height:13px;fill:currentColor}

/* ── 步骤 / 批注 ─────────────────────────────────────────────────── */
.steps{counter-reset:s;list-style:none}
.steps li{counter-increment:s;position:relative;padding-left:var(--s6);margin-bottom:var(--s3);
  font-size:var(--fs-13);color:var(--paper-2)}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:.1em;
  font-family:var(--mono);font-size:var(--fs-11);color:var(--vermilion)}
.note{font-size:var(--fs-12);color:var(--paper-3);border-left:2px solid var(--vermilion);
  padding-left:var(--s3);margin:var(--s3) 0}

/* ── 文档页 ───────────────────────────────────────────────────────── */
main.doc.wide{max-width:var(--wrap)}
main.doc{width:100%;max-width:var(--wrap);margin:0 auto;padding:var(--s5) var(--gutter) var(--s6)}
main.doc h2{margin-top:var(--s4)}
main.doc h3{margin-top:var(--s3)}
main.doc ul,main.doc ol{margin:var(--s2) 0 var(--s3) var(--s5);color:var(--paper-2)}
main.doc li{margin-bottom:var(--s2)}

@media(max-width:640px){
  .hbar{height:52px;gap:var(--s3)} .nav{gap:var(--s3);font-size:var(--fs-12)}
  /* 触控最小 44px：品牌回首页与主题/语言控件在手机上都得够得着 */
  .hbar > .brand{min-height:44px}
  .hbar .kb-lang,.hbar .iconbtn{min-width:44px;min-height:44px}
  .hbar .kb-lang{display:inline-flex;align-items:center;justify-content:center}
  h1{font-size:var(--fs-26)}
  .pkgs{grid-template-columns:1fr}
    table{font-size:var(--fs-12)} th,td{padding:var(--s2)}
}

/* 「显示更多（还有 N 首）」这类**文字按钮**：宽度自适应、窄屏可换行。
   注意不要用 .iconbtn —— 那是固定 34×34 的方形图标按钮，装不下长文案。 */
.morebtn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:var(--s2) var(--s5);border:1px solid var(--rule-2);
  background:none;color:var(--paper);font-size:var(--fs-13);transition:var(--t);
  max-width:100%;white-space:normal;text-align:center;line-height:1.4}
.morebtn:hover{border-color:var(--vermilion);color:var(--vermilion)}
@media(max-width:640px){.morebtn{width:100%}}
.morewrap{display:flex;justify-content:center;margin:var(--s5) 0}

/* ── shell.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   midicn 内核 · core/assets/shell.css
   知识矩阵的外壳补充样式（**只加不覆盖**）

   命名约定：全部类名以 `kb-` 前缀 —— 与 base.css（在役三站的样式）零冲突。
   本文件属于 core/，lib / mid / zip 若不需要可整份不引入。
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 子站切换器 ─────────────────────────────────────────────────────── */
/* 始终**自动换行**：任何宽度下都不得出现「显示不全 / 要拖横条」的情况
   （用户 2026-09-23 明确要求；总纲 §7.6 ③）。窄屏靠缩小字号与内边距收进 2–3 行。 */
.kb-switch{
  display:flex; flex-wrap:wrap; gap:2px 4px; align-items:center;
  margin:0; padding:0; list-style:none;
  min-width:0;
}
.kb-switch a{
  display:inline-block;
  padding:.28em .52em;
  font-size:var(--fs-12);
  line-height:1.35;
  border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
  opacity:.62;
  transition:opacity .15s, background-color .15s;
}
.kb-switch a:hover{ opacity:1; background:color-mix(in srgb, currentColor 12%, transparent) }
.kb-switch a[aria-current="page"]{
  opacity:1;
  font-weight:500;
  box-shadow:inset 0 -2px 0 var(--accent, currentColor);
}
.kb-switch .kb-switch-sep{ opacity:.22; padding:0 .15em; user-select:none }

/* 平板与窄屏（≤1023px）：子站切换器独占一行，语言按钮靠右留在首行
   （顶栏在 base.css 的 ≤1023px 断点已改为可换行） */
@media (max-width:1023px){
  .kb-switch{ flex:1 1 100%; order:9; padding-top:var(--s1) }
  .kb-lang{ margin-left:auto }
}

/* 手机（≤640px）：切换器进一步收字号与内边距，确保 11 个子站也能 2–3 行排完，
   并且**绝不出现横向滚动**（原来这里用的是 overflow-x:auto + nowrap，已废弃） */
@media (max-width:640px){
  .kb-switch{ gap:1px 2px }
  .kb-switch a{ font-size:var(--fs-11); padding:.24em .38em; letter-spacing:0 }
  .kb-switch .kb-switch-sep{ padding:0 .05em }
}

/* ── 知识站顶栏：品牌后缀（如「音乐知识 · 乐理」）───────────────────── */
.kb-suffix{ opacity:.6; font-weight:400 }
.kb-suffix::before{ content:"·"; margin:0 .38em; opacity:.5 }

/* ── 站色 ＝ 声波水母的和弦（设计源：REPLAN-UI-效果图-v5 §C，逐站显式）──
   ⚠️ 这里**不是**由色相号算出来的。v5 定稿为"所见即所发"：每站一组显式四色
      ＋一个伞盖色。暗值照 v5 §C 原值；亮值是 v5 未给的部分，按**同色相、
      对比度反解到 ≥3.3:1（纸白 #FBF8F1）**补算，非拍脑袋。
   旧方案（--accent-h + Δh 派生）已于 2026-10-27 废止，见 REPLAN §6.0.4.6。 */
:root{ --jf-1:#FF7C9E; --jf-2:#FF8B6E; --jf-3:#FFAE55; --jf-4:#FFD24E; --jf-dome:#FF8B6E }
:root[data-site="home"]{
  --jf-1:light-dark(#F34875,#FF7C9E); --jf-2:light-dark(#F1522B,#FF8B6E);
  --jf-3:light-dark(#CD710D,#FFAE55); --jf-4:light-dark(#AB830B,#FFD24E);
  --jf-dome:light-dark(#F1522B,#FF8B6E) }
:root[data-site="hist"]{
  --jf-1:light-dark(#B87D0C,#FFC24E); --jf-2:light-dark(#A2861C,#EBCB4E);
  --jf-3:light-dark(#7C912B,#BBD754); --jf-4:light-dark(#58982D,#8FD95E);
  --jf-dome:light-dark(#A2861C,#EBCB4E) }
:root[data-site="theo"]{                       /* 镜像和弦：1↔4、2↔3（v5 唯一同构例） */
  --jf-1:light-dark(#494AF3,#8B8CFF); --jf-2:light-dark(#2B8CE3,#6FB6F5);
  --jf-3:light-dark(#2B8CE3,#6FB6F5); --jf-4:light-dark(#494AF3,#8B8CFF);
  --jf-dome:light-dark(#496FF3,#7E9BFF) }
:root[data-site="inst"]{
  --jf-1:light-dark(#69962B,#A6DB5E); --jf-2:light-dark(#319C4F,#6BD98A);
  --jf-3:light-dark(#29997D,#46D9B4); --jf-4:light-dark(#2996A0,#4CD0DC);
  --jf-dome:light-dark(#319C4F,#6BD98A) }
:root[data-site="prod"]{
  --jf-1:light-dark(#2A9A73,#4ED9A8); --jf-2:light-dark(#2796A6,#4CCDE0);
  --jf-3:light-dark(#338CE0,#5AA8F0); --jf-4:light-dark(#4960F3,#7A8CFF);
  --jf-dome:light-dark(#2796A6,#4CCDE0) }
:root[data-site="gloss"]{
  --jf-1:light-dark(#7E55E7,#9D7BF5); --jf-2:light-dark(#A05CE0,#B579EE);
  --jf-3:light-dark(#B762DB,#C778E8); --jf-4:light-dark(#D05AC8,#E074D8);
  --jf-dome:light-dark(#B762DB,#C778E8) }      /* v5：gloss 伞盖取第三色 */
:root[data-site="ai"]{
  --jf-1:light-dark(#DF51B5,#EE6FC8); --jf-2:light-dark(#F34489,#FF6FA8);
  --jf-3:light-dark(#F34949,#FF7C7C); --jf-4:light-dark(#DB680E,#FFA45C);
  --jf-dome:light-dark(#F34489,#FF6FA8) }
:root[data-site="lib"], :root[data-site="mid"],
:root[data-site="zip"], :root[data-site="sf"]{  /* 数据四站：单色钢青，不表演 */
  --jf-1:light-dark(#748AAE,#7C93B8); --jf-2:light-dark(#748AAE,#7C93B8);
  --jf-3:light-dark(#748AAE,#7C93B8); --jf-4:light-dark(#748AAE,#7C93B8);
  --jf-dome:light-dark(#748AAE,#7C93B8) }
/* 待退场三站：沿用邻近色，归并后随站删除 */
/* 页面其余部分的强调色＝伞盖色，保证角色与界面同源 */
:root[data-site]{ --accent:var(--jf-dome) }

/* ── 面包屑（知识站统一）─────────────────────────────────────────────── */
.kb-crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3em;
  font-size:var(--fs-12); opacity:.7;
  margin:0 0 1.1rem;
}
.kb-crumbs a{ text-decoration:none; opacity:.85 }
.kb-crumbs a:hover{ opacity:1; text-decoration:underline }
.kb-crumbs .sep{ opacity:.35 }

/* ── 超宽屏：放宽版心（正文行宽由 kb.css 的 .kb-body 另行封顶）────────
   基础值 `--wrap:min(92vw,1560px)` 在 1920 / 2560 / 3440 上会留下大片空白；
   这里只在**知识站**放宽版心，多出来的宽度交给页内目录栏与更宽松的间距。
   数据三站不引入本文件，故不受影响。 */
@media (min-width:1920px){ :root{ --wrap:min(92vw,1840px) } }
@media (min-width:2560px){ :root{ --wrap:min(88vw,2120px) } }

/* ── 移动端 APP 化：安全区与触摸手感（总纲 §7.7）─────────────────────── */
/* ① 安全区：PWA 以 standalone 打开时内容会顶到状态栏与 Home 指示条下面，
      需要按 env() 补出安全距离。左右只在横屏带缺口时有值，故用 max() 兜底。 */
@supports (padding: max(0px)){
  .hbar{
    padding-top:var(--sa-t);
    padding-left:max(var(--gutter), var(--sa-l));
    padding-right:max(var(--gutter), var(--sa-r));
  }
  main.doc{
    padding-left:max(var(--gutter), var(--sa-l));
    padding-right:max(var(--gutter), var(--sa-r));
  }
  .footwrap{
    padding-left:max(var(--gutter), var(--sa-l));
    padding-right:max(var(--gutter), var(--sa-r));
    padding-bottom:calc(var(--s4) + var(--sa-b) + env(safe-area-inset-bottom, 0px));
  }
}
/* ② 顶栏滚动收纳：窄屏专属（下滚隐藏、上滚出现）—— 阅读时不占屏 */
header{ transition:transform .22s ease }
header.is-hidden{ transform:translateY(-100%) }
@media (min-width:1024px){ header.is-hidden{ transform:none } }
@media (prefers-reduced-motion:reduce){ header{ transition:none } }

/* ③ 触摸手感：去掉点击高亮块，改为瞬时的按压缩放 —— 更接近原生 App 的反馈 */
a,button,summary,[role="button"]{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;                 /* 去掉 300ms 双击缩放等待 */
}
.kb-switch a:active{ opacity:1; background:color-mix(in srgb, currentColor 18%, transparent) }
.kb-lang:active{ border-color:var(--accent); opacity:1 }
summary:active{ opacity:.75 }

/* ── 全站统一页脚（总纲 §7.5）───────────────────────────────────────── */
/* 宽度与顶栏/正文对齐：外层 footer 只画通栏分隔线，内层 .footwrap 承担
   `--wrap` 宽度与左右内边距（与 .hbar / main.doc 完全同一套参数）。 */
footer.foot{ padding:0 }
.footwrap{
  width:100%; max-width:var(--wrap); margin:0 auto;
  padding:var(--s4) var(--gutter) calc(var(--s4) + var(--sa-b));
}
.footline{
  display:flex; flex-wrap:wrap; align-items:center;
  padding-bottom:var(--s3); margin-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}
.footnote{
  margin:0; font-size:var(--fs-12); line-height:1.9; color:var(--paper-3);
  max-width:96ch;
}
.footnote a{ color:var(--paper-2); border-bottom:1px solid var(--rule-2) }
.footnote a:hover{ color:var(--accent) }
.footmeta{
  margin:var(--s3) 0 0;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:.2em var(--s3);
  font-size:var(--fs-11); color:var(--paper-3);
}
.footlinks{ display:inline-flex; flex-wrap:wrap; gap:.2em var(--s3) }
.footlinks a{ color:var(--paper-3); border-bottom:0 }
.footlinks a:hover{ color:var(--accent) }
.footcore{
  font-family:var(--mono); opacity:.72;
}
.footcore::before{ content:"·"; margin-right:.45em; opacity:.6 }

/* ── 侧栏目录（长条目用）─────────────────────────────────────────────── */
.kb-toc{
  font-size:var(--fs-13);
  border-left:1px solid var(--rule);
  padding-left:.85rem;
}
.kb-toc a{ display:block; padding:.18em 0; text-decoration:none; opacity:.7 }
.kb-toc a:hover{ opacity:1 }
:root[data-theme=light] .kb-toc{ border-left-color:var(--rule) }


/* ── 移动端底部标签栏（新宪法：形态只在两处翻转之一）──────────────────
   桌面隐藏，≤640px 时接管导航 —— 11 个站点在手机上排 2–3 行，
   本身就是它要被换掉的理由。常驻三位**跨站相同**，所以切站时底栏不跳位，
   页脚的逐字比对判据也不必放宽。
   ⚠️ 断点暂用既有 640px，不新增一档；等断点收缩那一步统一决定翻转点。 */
.kb-tabs{ display:none }
@media (max-width:640px){
  /* 底栏占用高度 = 6 + 44 + 6 + 安全区。播放条与正文都按它让位，
     否则 sticky 播放条（z 30）会把底栏（z 20）整条盖住。 */
  :root{ --tabs-h:calc(56px + var(--sa-b)) }
  .kb-switch{ display:none }
  .kb-tabs{
    display:grid; grid-template-columns:repeat(8,1fr); gap:1px;
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-hdr);
    padding:6px 2px calc(6px + var(--sa-b));
    background:var(--ink-2); border-top:1px solid var(--rule);
  }
  .kb-tabs > a, .kb-tabs summary{
    display:grid; place-items:center; gap:1px; min-height:var(--tap);
    border-radius:var(--r-1); font-size:9.5px; line-height:1.1; text-decoration:none;
    color:var(--paper-2); background:none; border:0; cursor:pointer;
    font-family:inherit; letter-spacing:0; padding:3px 0;
  }
  .kb-tabs > a svg{width:16px;height:16px;display:block;flex:none}
  .kb-tabs > a:hover, .kb-tabs summary:hover{ color:var(--paper) }
  .kb-tabs > a[aria-current="page"]{ color:var(--accent); font-weight:650 }
  .kb-tabs-more{ position:relative }
  .kb-tabs-more[open] > summary{ background:color-mix(in srgb,currentColor 12%,transparent); color:var(--paper) }
  /* 抽屉向上开：底栏在屏幕最下，往下弹会被 home indicator 吃掉 */
  .kb-tabs-sheet{
    position:absolute; bottom:calc(100% + var(--s2)); left:0; right:0;
    background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-2);
    padding:var(--s2); display:grid; grid-template-columns:1fr 1fr; gap:2px;
    max-height:min(56vh,420px); overflow:auto;
    box-shadow:0 -12px 32px -18px rgba(0,0,0,.6);
  }
  .kb-tabs-sheet a{
    display:grid; place-items:center; min-height:var(--tap); border-radius:var(--r-1);
    font-size:var(--fs-12); color:var(--paper-2); text-decoration:none;
  }
  .kb-tabs-sheet a:hover{ background:color-mix(in srgb,currentColor 12%,transparent); color:var(--paper) }
  .kb-tabs-sheet a[aria-current="page"]{ color:var(--accent); font-weight:650 }
  /* 避免固定栏压住页脚最后一行 */
  main{ padding-bottom:calc(var(--s6) + var(--tabs-h)) }
}
@media (prefers-reduced-motion:reduce){ .kb-tabs, .kb-tabs-sheet{ transition:none } }

/* ── kb.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   midicn 内核 · kb/assets/kb.css
   知识条目的排版与组件样式（仅知识八站引入）

   依赖 base.css 的变量：--ink/--ink-2/--rule/--paper/--paper-2/--paper-3
                        --vermilion/--gold/--jade/--slate
                        --serif/--sans/--mono/--fs-*/--s*/--r/--wrap-read
   命名：全部 kb- 前缀，与在役三站零冲突
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 语言切换按钮 ───────────────────────────────────────────────────── */
.kb-lang{
  flex:0 0 auto; margin-left:var(--s3);
  padding:.26em .62em; font-size:var(--fs-12); line-height:1.4;
  border:1px solid var(--rule-2); border-radius:var(--r);
  text-decoration:none; opacity:.8; white-space:nowrap;
  transition:border-color var(--t), opacity var(--t);
}
.kb-lang:hover{ border-color:var(--accent); opacity:1; text-decoration:none }

/* ── 阅读容器 ───────────────────────────────────────────────────────── */
.doc{ padding:var(--s6) 0 var(--s8) }
.kb-read{ max-width:none }
/* 长单词 / 长链接不得顶破版心（任何宽度都不出现横向滚动） */
.doc p,.doc li,.doc h1,.doc h2,.doc h3,.doc h4,.doc blockquote,.kb-title,.kb-why{
  overflow-wrap:break-word;
}

/* ── 标题层级 ───────────────────────────────────────────────────────── */
.doc h1{
  font-family:var(--serif); font-size:var(--fs-46); font-weight:400;
  line-height:1.18; letter-spacing:.01em; margin:0 0 var(--s4);
  text-wrap:balance;
}
.doc h2{
  font-family:var(--serif); font-size:var(--fs-26); font-weight:400;
  line-height:1.3; margin:var(--s7) 0 var(--s3);
  padding-bottom:var(--s2); border-bottom:1px solid var(--rule);
}
.doc h3{
  font-size:var(--fs-20); font-weight:500; margin:var(--s5) 0 var(--s2);
}
.doc h4{
  font-size:var(--fs-16); font-weight:500; margin:var(--s4) 0 var(--s2);
  opacity:.9;
}
/* 页内目录跳转时，目标标题不被吸顶的顶栏盖住 */
.doc h2,.doc h3,.doc h4{ scroll-margin-top:calc(var(--hdr) + var(--s3)) }
.doc p{
  font-size:var(--fs-16); line-height:var(--lh-body);
  margin:0 0 var(--s3); text-wrap:pretty;
}
.doc .kb-lead{
  font-size:var(--fs-20); line-height:1.62; color:var(--paper-2);
  margin:0 0 var(--s5);
}
.doc ul{ margin:0 0 var(--s3); padding-left:1.25em }
.doc li{ font-size:var(--fs-16); line-height:var(--lh-body); margin:.2em 0 }
.doc a{ color:inherit; text-underline-offset:.22em; text-decoration-color:var(--rule-2) }
.doc a:hover{ text-decoration-color:var(--accent) }
.doc code{
  font-family:var(--mono); font-size:.9em;
  background:var(--ink-3); padding:.12em .38em; border-radius:var(--r);
}
.doc blockquote{
  margin:var(--s4) 0; padding:var(--s2) 0 var(--s2) var(--s4);
  border-left:2px solid var(--rule-2); color:var(--paper-2);
}
.kb-note{
  font-size:var(--fs-13); color:var(--paper-3); line-height:1.6;
  margin:var(--s3) 0 0;
}
.kb-broken{
  color:var(--vermilion); border-bottom:1px dashed var(--vermilion-line);
  font-family:var(--mono); font-size:.9em;
}

/* ── 可播元素 ───────────────────────────────────────────────────────── */
.kb-instances{
  margin:var(--s7) 0; padding:var(--s4) var(--s5);
  background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg);
}
.kb-instances h2{ margin-top:0; border-bottom-color:var(--rule) }
.kb-items{ display:flex; flex-direction:column; gap:2px; margin:var(--s3) 0 }

.kb-item{
  display:flex; align-items:center; gap:var(--s3);
  padding:var(--s2) var(--s3); border-radius:var(--r);
  transition:background-color var(--t);
}
.kb-item:hover{ background:var(--ink-3) }
.kb-item-inline{ display:inline-flex; vertical-align:baseline; padding:.05em .4em; gap:.4em }

.kb-play{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%;
  border:1px solid var(--rule-2); background:transparent; color:var(--paper);
  font-size:0; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:border-color var(--t), background-color var(--t), transform var(--t);
}
/* 图标随播放状态切换（▶ / ❚❚）。**用 CSS 画，不依赖任何字体或图标库** ——
   按钮内的 ▶ 文本被 font-size:0 隐去，只作为无样式时的兜底 */
.kb-play::before{
  content:""; display:block;
  width:0; height:0; margin-left:2px;
  border-style:solid; border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor;
}
.kb-play[aria-pressed="true"]::before{
  width:8px; height:10px; margin-left:0;
  border:0;
  background:linear-gradient(to right,
    currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}
.kb-play:hover{ border-color:var(--accent); background:var(--ink-3) }
.kb-play[aria-pressed="true"]{
  border-color:var(--accent); color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.kb-title{ flex:1 1 auto; font-size:var(--fs-14); min-width:0 }
.kb-why{
  flex:1 1 100%; font-size:var(--fs-13); color:var(--paper-3);
  padding-left:calc(26px + var(--s3));
}
.kb-item{ flex-wrap:wrap }
.kb-play-meta{ display:inline-flex; align-items:center; gap:var(--s2); flex:0 0 auto }
.kb-dur{ font-family:var(--mono); font-size:var(--fs-12); color:var(--paper-3) }
.kb-detail{
  flex:0 0 auto; font-size:var(--fs-12); opacity:.5;
  text-decoration:none; white-space:nowrap;
}
.kb-detail:hover{ opacity:1; text-decoration:underline }

/* 许可徽标。三档颜色走语义 token，不走角色色：C1 绿（可商用）· C2 蓝（非商业）
   · C3 琥珀（存疑／仅学习研究），与 base.css 的 --ok/--study/--doubt 一处定义。
   旧写法借的是 --jade/--gold/--vermilion，于是 C3 落成了红 —— 而红在这套系统里
   是"出事"（--stop），把"这曲许可还没查清"演成了一场事故。 */
.kb-lic{
  font-family:var(--mono); font-size:var(--fs-10); letter-spacing:.04em;
  padding:.1em .38em; border-radius:var(--r); border:1px solid currentColor;
  opacity:.85;
}
.kb-lic-c1{ color:var(--ok) }
.kb-lic-c2{ color:var(--study) }
.kb-lic-c3{ color:var(--doubt) }
/* C3 旁边那一缕琥珀＝水母的 license 态。24px 是这个态的下限：≤20px 会退成
   tier1（单色无眼），琥珀就没地方放了。文字徽章同时在场，所以关掉颜色也读得出档位。 */
.kb-lic .kb-lic-jf{ width:24px; height:24px; margin-right:.34em; vertical-align:-7px }

/* ── 图示 ───────────────────────────────────────────────────────────── */
.kb-fig{
  margin:var(--s5) 0; padding:var(--s4);
  background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg);
  overflow-x:auto;
}
.kb-fig svg{ display:block; width:100%; height:auto; min-width:min(100%,420px) }
.kb-fig figcaption{
  margin-top:var(--s3); font-size:var(--fs-12); color:var(--paper-3); text-align:center;
}
/* 音域图（`range` 围栏 · 构建时生成）：图下一行小注（读法说明） */
.kb-range-note{
  margin:var(--s2) 0 0; font-size:var(--fs-12); color:var(--paper-3); line-height:1.6;
}
.kb-range{ padding-bottom:var(--s3) }

/* ── 听辨组件 ───────────────────────────────────────────────────────── */
.kb-lab{
  margin:var(--s5) 0; padding:var(--s4) var(--s5);
  background:var(--ink-2); border:1px solid var(--rule); border-radius:var(--r-lg);
}
.kb-lab-head{
  display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s3);
}
.kb-lab-label{ font-size:var(--fs-14); font-weight:500 }
.kb-lab-hint{ font-size:var(--fs-12); color:var(--paper-3) }
.kb-lab-row{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; margin:var(--s2) 0 }
.kb-lab-btn{
  min-width:74px; padding:.42em .9em; font-size:var(--fs-13);
  background:transparent; color:var(--paper);
  border:1px solid var(--rule-2); border-radius:var(--r); cursor:pointer;
  transition:border-color var(--t), background-color var(--t);
}
.kb-lab-btn:hover{ border-color:var(--accent) }
.kb-lab-btn[aria-pressed="true"]{ border-color:var(--accent); color:var(--accent) }
.kb-lab-btn.kb-lab-on{ border-color:var(--accent); color:var(--accent) }
.kb-lab select, .kb-lab input[type=range]{
  background:var(--ink-3); color:var(--paper);
  border:1px solid var(--rule-2); border-radius:var(--r);
  font-size:var(--fs-13); padding:.3em .5em;
}
.kb-lab input[type=range]{ padding:0; accent-color:var(--accent) }
.kb-lab canvas{
  display:block; width:100%; height:76px; margin-top:var(--s3);
  background:var(--ink-4); border:1px solid var(--rule); border-radius:var(--r);
}
/* 节奏型拍点指示器（不是按钮，只做视觉高亮）*/
.kb-dot{
  display:inline-block; min-width:32px; text-align:center;
  padding:.3em .5em; font-family:var(--mono); font-size:var(--fs-12);
  border:1px solid var(--rule); border-radius:var(--r); opacity:.6;
  transition:border-color .1s linear, opacity .1s linear;
}
.kb-dot-on{ border-color:var(--accent); color:var(--accent); opacity:1 }

/* 音色试听的状态行：进度 / 已缓存 / 降级原因 —— 失败不静默，用户看得见 */
.kb-lab-state{
  font-family:var(--mono); font-size:var(--fs-11); opacity:.85;
  padding:.2em .5em; border:1px dashed var(--rule-2); border-radius:var(--r);
}
.kb-lab[data-lab="instrument"] .kb-lab-btn[data-k="gm"]{ border-color:var(--rule-2) }
.kb-lab[data-lab="instrument"] [data-keys]{
  font-family:var(--mono); letter-spacing:.02em;
}
@media (max-width:640px){
  .kb-lab-state{ display:block; flex:1 1 100%; }
  .kb-lab[data-lab="instrument"] .kb-lab-btn{ flex:1 1 100%; }
}

/* ── 关联 chips ─────────────────────────────────────────────────────── */
.kb-rel{ margin:var(--s6) 0 0 }
.kb-chips{ display:flex; flex-wrap:wrap; gap:var(--s2) }
.kb-chip{
  display:inline-block; padding:.28em .7em; font-size:var(--fs-13);
  border:1px solid var(--rule-2); border-radius:var(--r);
  text-decoration:none; opacity:.85; transition:border-color var(--t), opacity var(--t);
}
.kb-chip:hover{ border-color:var(--accent); opacity:1; text-decoration:none }

/* ── 事实来源 ───────────────────────────────────────────────────────── */
.kb-sources{ margin:var(--s6) 0 0; padding-top:var(--s4); border-top:1px solid var(--rule) }
.kb-sources h2{ font-size:var(--fs-16); border:0; margin:0 0 var(--s2); opacity:.7 }
.kb-sources ul{ margin:0; padding-left:1.2em }
.kb-sources li{ font-size:var(--fs-13); color:var(--paper-2); line-height:1.6 }

/* ── 站首页：分类块与列表 ───────────────────────────────────────────── */
.kb-cat{ margin:var(--s6) 0 0 }
.kb-cat h2{ font-size:var(--fs-20); border-bottom:1px solid var(--rule) }
.kb-list{ list-style:none; margin:var(--s3) 0 0; padding:0 }
.kb-list li{ margin:0; border-bottom:1px solid var(--rule) }
.kb-list a{
  display:block; padding:var(--s3) var(--s2); text-decoration:none;
  transition:background-color var(--t);
}
.kb-list a:hover{ background:var(--ink-2); text-decoration:none }
.kb-t{ display:block; font-size:var(--fs-16); margin-bottom:.15em }
.kb-d{ display:block; font-size:var(--fs-13); color:var(--paper-3); line-height:1.55 }

/* ── 骨架期：「内容正在陆续上线」（站内尚无条目时的首页主体）─────────────
   ⚠️ 只有 `sites.yaml` 里带 `soon` 的站才会渲染这两个类 —— 新增选择器
   不影响任何既有页面（theo / inst / sf 的渲染路径逐字节不变）。 */
.kb-soon{
  margin:var(--s6) 0 0; padding:var(--s5) var(--s5) var(--s4);
  border:1px solid var(--rule); border-left:3px solid var(--accent);
  border-radius:var(--r); background:var(--ink-2);
}
.kb-soon h2{ font-size:var(--fs-20); border:0; margin:0 0 var(--s2) }
.kb-soon p{ font-size:var(--fs-16); color:var(--paper-2); margin:0 0 var(--s3) }
.kb-soon ul{ margin:0; padding-left:1.2em; columns:2; column-gap:var(--s6) }
@media (max-width:640px){ .kb-soon ul{ columns:1 } }
/* 空状态的角色：水母 loading 态（触手收拢、饱和降 45%）。
   "内容在来的路上" 而不是 "出错了" —— 空状态最忌讳演成事故。 */
.kb-empty-mark{ display:flex; justify-content:center; margin:0 0 var(--s4); opacity:.9 }
/* 面板底部指向「本站收录什么」说明页的那条链接 */
.kb-soon-more{ margin:var(--s3) 0 0; font-size:var(--fs-13) }
.kb-soon-more a{ color:var(--paper-2) }
.kb-soon-more a:hover{ color:var(--accent) }
/* 已有条目、但仍有大批未上线 → 分类列表上方一条细提示 */
.kb-soon-hint{
  font-size:var(--fs-13); color:var(--paper-3); line-height:1.6;
  margin:0 0 var(--s3); padding-left:.75em; border-left:2px solid var(--accent);
}

/* ── 门户首页：站点入口卡（容器复用 .kb-cats 网格）─────────────────────
   识别色由构建器作为 `--pc` 内联到卡片上（取自 sites.yaml 的 accent）。 */
.kb-ph{ font-size:var(--fs-20); border:0; margin:var(--s6) 0 0 }
.kb-pcard{
  display:flex; flex-direction:column; gap:.45em;
  padding:var(--s4); border:1px solid var(--rule); border-radius:var(--r);
  background:var(--ink-2); text-decoration:none;
  transition:border-color var(--t), background-color var(--t);
}
.kb-pcard:hover{ border-color:var(--pc,var(--accent)); background:var(--ink-3); text-decoration:none }
.kb-pname{ display:flex; align-items:center; gap:.5em; font-size:var(--fs-16) }
.kb-pname i{
  display:inline-block; flex:0 0 auto; width:.45em; height:1em;
  border-radius:2px; background:var(--pc,var(--accent));
}
.kb-pdesc{ font-size:var(--fs-13); color:var(--paper-3); line-height:1.55 }
.kb-soon-tag{
  font-size:var(--fs-12); font-style:normal; color:var(--paper-3);
  border:1px solid var(--rule-2); border-radius:999px;
  padding:.05em .55em; margin-left:.5em; vertical-align:.05em;
  white-space:nowrap;
}

/* ── 底部播放条 ─────────────────────────────────────────────────────── */
.pbar{
  position:sticky; bottom:0; z-index:var(--z-play);
  background:var(--ink-2); border-top:1px solid var(--rule);
  padding:var(--s2) 0 calc(var(--s2) + var(--sa-b));
}
.pbar[hidden]{ display:none }
.pbar-inner{
  display:flex; align-items:center; gap:var(--s3);
  max-width:var(--wrap); margin:0 auto;
  width:var(--wrap); padding:0 var(--gutter);
}
.pbar-title{ flex:0 1 auto; max-width:32%; font-size:var(--fs-13); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.pbar-time{ font-family:var(--mono); font-size:var(--fs-12); color:var(--paper-3);
  flex:0 0 auto; white-space:nowrap }
/* 播放进度：可拖动的范围控件（自绘外观，零依赖；触摸目标 ≥ 24px） */
.pbar-seek{
  flex:1 1 auto; min-width:80px; height:24px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent;
  cursor:pointer; touch-action:pan-y;
}
.pbar-seek::-webkit-slider-runnable-track{
  height:4px; border-radius:2px; background:var(--ink-4); border:1px solid var(--rule);
}
.pbar-seek::-moz-range-track{
  height:4px; border-radius:2px; background:var(--ink-4); border:1px solid var(--rule);
}
.pbar-seek::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:14px; height:14px; margin-top:-6px; border-radius:50%;
  background:var(--accent); border:0;
}
.pbar-seek::-moz-range-thumb{
  width:14px; height:14px; border:0; border-radius:50%; background:var(--accent);
}
.pbar-seek:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
@media (max-width:640px){
  .pbar-title{ max-width:40% }
  .pbar-seek{ height:28px }
  .pbar-seek::-webkit-slider-thumb{ width:18px; height:18px; margin-top:-8px }
  .pbar-seek::-moz-range-thumb{ width:18px; height:18px }
  /* 播放在底栏之上，别把移动端导航盖掉（--tabs-h 由 shell.css 定义） */
  .pbar{ bottom:var(--tabs-h) }
}

/* ── 阅读栏宽度上限（超宽屏时封顶，避免一行过长）───────────────────── */
:root{ --read:1440px }

/* ── 表格 ───────────────────────────────────────────────────────────── */
/* 宽屏：正常表格；中窄屏：容器内横向滚动；手机：**堆叠成卡片**（用列标签代替表头），
   三种形态都不产生「需要拖横条」的阅读体验 —— 见总纲 §7.6 ③ */
.kb-tablewrap{
  margin:var(--s4) 0; max-width:100%;
  border:1px solid var(--rule); border-radius:var(--r);
  background:var(--ink-2);
}
.kb-tablewrap:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.kb-tablewrap table{ width:100%; min-width:0; border-collapse:collapse; margin:0 }
.kb-tablewrap th,.kb-tablewrap td{
  padding:var(--s3); border-bottom:1px solid var(--rule);
  text-align:left; vertical-align:top; font-size:var(--fs-13); line-height:1.65;
  overflow-wrap:anywhere;
}
.kb-tablewrap thead th{
  color:var(--paper-2); font-weight:500;
  background:var(--ink-3); border-bottom-color:var(--rule-2);
}
.kb-tablewrap tbody tr:last-child td{ border-bottom:0 }
.kb-tablewrap tbody tr:hover{ background:var(--ink-3) }
/* 中窄屏（641–900px）：表格可能仍偏宽 → 容器内横向滚动（不撑破版心） */
@media (min-width:641px) and (max-width:900px){
  .kb-tablewrap{ overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch }
  .kb-tablewrap table{ min-width:440px }
}
/* 手机（≤640px）：行 → 卡片，列名由 ::before 从 data-label 取，**完全不需要横向滚动** */
@media (max-width:640px){
  .kb-tablewrap{ padding:var(--s2) 0 }
  .kb-tablewrap thead{ display:none }
  .kb-tablewrap tbody tr{
    display:block; padding:var(--s2) var(--s3);
    border-bottom:1px solid var(--rule);
  }
  .kb-tablewrap tbody tr:last-child{ border-bottom:0 }
  .kb-tablewrap tbody tr:hover{ background:transparent }
  /* 值列必须 minmax(0,1fr)：flex/grid 的自动最小尺寸会让长单词撑破版心，
     Chrome 移动端会把布局视口一起拉宽（sitar 英文页实测 390→444）。 */
  .kb-tablewrap td{
    display:grid; grid-template-columns:38% minmax(0,1fr); column-gap:var(--s3);
    align-items:baseline; border:0; padding:.18em 0; font-size:var(--fs-13);
  }
  .kb-tablewrap td::before{
    content:attr(data-label);
    grid-column:1; color:var(--paper-3); font-size:var(--fs-12); line-height:1.7;
  }
}

/* ── 条目页版式：阅读栏 + 页内目录 ──────────────────────────────────── */
/* 阅读栏宽度跟随版心，但在超宽屏封顶（避免一行过长）；
   1400px 以上把富余宽度交给 JS 生成的 .kb-aside 目录栏 —— 见总纲 §7.6 */
.doc-article{
  display:flex; flex-wrap:wrap; align-items:flex-start;
  justify-content:center; gap:var(--s5);
}
.doc-article .kb-crumbs{ flex:1 1 100% }
.kb-body{ width:100%; max-width:min(100%, var(--read, 1440px)); min-width:0 }

/* ── 页内目录（APP 化：窄屏为可折叠披露，宽屏为常驻侧栏）─────────────── */
/* 结构由 kb.js 生成：<aside class="kb-aside"><details><summary>…</summary><nav>…</nav></details> */
.kb-aside{ flex:1 1 100%; order:-1; margin:0 0 var(--s3); width:100%; }
.kb-tocbox{
  border:1px solid var(--rule); border-radius:var(--r); background:var(--ink-2);
}
.kb-tocbox > summary{
  cursor:pointer; list-style:none;
  padding:var(--s3) var(--s4); font-size:var(--fs-13); color:var(--paper-2);
  display:flex; align-items:center; gap:var(--s2);
}
.kb-tocbox > summary::-webkit-details-marker{ display:none }
.kb-tocbox > summary::after{
  content:"▾"; margin-left:auto; font-size:11px; opacity:.45; transition:transform var(--t);
}
.kb-tocbox[open] > summary::after{ transform:rotate(180deg) }
.kb-tocbox > .kb-toc{ padding:0 var(--s4) var(--s3) }
.kb-toc h2{ display:none }
.kb-toc a{
  display:block; padding:.34em 0; font-size:var(--fs-13);
  text-decoration:none; opacity:.75; border-bottom:1px solid transparent;
}
.kb-toc a:hover{ opacity:1; color:var(--accent) }
.kb-toc a:active{ opacity:.6 }

/* 宽屏：目录变成右侧常驻栏（summary 隐藏 → 无法折叠，恒为展开） */
@media (min-width:1400px){
  .kb-aside{ order:0; flex:0 0 208px; width:208px; margin:0 }
  .kb-tocbox{ border:0; background:transparent }
  .kb-tocbox > summary{ display:none }
  .kb-tocbox > .kb-toc{ display:block; padding:0; position:sticky; top:calc(var(--hdr) + var(--s4)) }
  .kb-toc h2{ display:block; font-size:var(--fs-12); font-weight:600; opacity:.6; letter-spacing:.04em }
}
@media (min-width:1920px){ .kb-aside{ flex:0 0 224px; width:224px } }
@media (min-width:2560px){ .kb-aside{ flex:0 0 256px; width:256px } }

/* ── 站首页：分类块网格（窄屏单栏，宽屏多栏）────────────────────────── */
.kb-cats{ display:grid; gap:var(--s5) var(--s6); grid-template-columns:1fr }

/* ── 窄屏（手机，≤640px）────────────────────────────────────────────── */
@media (max-width:640px){
  .doc h1{ font-size:var(--fs-34) }
  .doc h2{ font-size:var(--fs-20) }
  .kb-instances{ padding:var(--s3) var(--s4) }
  .kb-why{ padding-left:0 }
  .kb-item{ flex-wrap:wrap; row-gap:var(--s2) }
  .kb-lab-row{ flex-wrap:wrap; row-gap:var(--s2) }
  .kb-lab-btn{ flex:1 1 auto }
  .pbar-inner{ width:auto; padding:0 var(--s3) }
  .pbar-title{ font-size:var(--fs-12) }
  /* 代码块在手机上也换行，避免出现横向滚动条 */
  .doc pre{ white-space:pre-wrap; overflow-wrap:anywhere }
  /* 触摸目标 ≥44px（新宪法：旧宪法本来就写了 44px，只是从没执行过）
     播放 26 → 38 → 44；三角同步放大，否则按钮变大图标不变会显空 */
  .kb-play{ width:44px; height:44px }
  .kb-play::before{ border-width:7px 0 7px 12px; margin-left:4px }
  .kb-play[aria-pressed="true"]::before{
    width:10px; height:12px; margin-left:0;
    background:linear-gradient(to right,
      currentColor 0 4px, transparent 4px 6px, currentColor 6px 10px);
  }
  .kb-play:active{ transform:scale(.93) }
  .kb-detail{ padding:.42em .7em; margin:-.42em -.3em }
  .kb-item{ padding:var(--s3) var(--s2) }
  .kb-lab-btn{ padding:.62em .9em; font-size:var(--fs-13) }
  /* 正文呼吸更松一点：手机上一屏文字少，行距略增更好读 */
  .doc p, .doc li{ line-height:1.78 }
}

/* ── 平板（641–1023px）───────────────────────────────────────────────── */
@media (min-width:641px) and (max-width:1023px){
  .doc h1{ font-size:var(--fs-38) }
  .kb-instances{ padding:var(--s3) var(--s4) }
  .kb-item{ flex-wrap:wrap; row-gap:var(--s2) }
}

/* ── 普通桌面（1024–1399px）：阅读栏占满版心，不出目录栏 ───────────── */
@media (min-width:1024px) and (max-width:1399px){
  .kb-body{ max-width:100% }
}

/* ── 宽屏（≥1400px）：阅读栏 + 页内目录两栏 ────────────────────────── */
@media (min-width:1400px){
  .kb-body{ flex:0 1 auto; max-width:min(100%, var(--read, 1440px)) }
  .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 420px), 1fr)) }
}

/* ── 超宽屏（≥1920px / 2K · 3440 带鱼屏）：放宽版心，让目录栏真正用上 ── */
@media (min-width:1920px){
  /* 版心从 1560 放宽到 1840，多出来的宽度全部给目录栏与更宽松的间距 */
  .doc-article{ gap:var(--s6) }
  .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 460px), 1fr)) }
}

/* ── 4K / 超宽（≥2560px）：进一步放宽留白，正文行宽仍封顶 ──────────── */
@media (min-width:2560px){
  .doc-article{ gap:var(--s7) }
  .kb-cats{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 520px), 1fr)) }
}


/* ── 五度圈（audiolab: circle）────────────────────────────────────────── */
.kb-circle-row{ align-items:flex-start }
.kb-circle{
  width:100%; max-width:300px; height:auto; flex:0 0 auto; color:var(--paper-2);
}
.kb-cseg{ cursor:pointer }
.kb-cseg path{ transition:fill var(--t), stroke var(--t) }
.kb-cseg:hover path{ stroke:var(--accent) }
.kb-cseg text{ pointer-events:none }
.kb-circle-now{ fill:var(--paper); font-family:var(--serif) }
@media (max-width:640px){
  .kb-circle{ max-width:230px; margin:0 auto }
}

/* ── svg-theme.css ── */
/* 自动生成 —— 不要手改；改配色请改内容里的 :::svg 围栏，或重跑本工具 */
/* 内容 SVG 的主题色板（T2）：暗值＝原色零漂移，亮值＝HLS 反相派生 */
:root{
  --sv6e6a64: light-dark(#93908A, #6E6A64);
  --sva9a49b: light-dark(#635F57, #A9A49B);
  --sve8c547: light-dark(#AA8D25, #E8C547);
  --sv5b7fa8: light-dark(#5E7B9D, #5B7FA8);
  --sve07a3f: light-dark(#B25E2D, #E07A3F);
  --sv9c7a3c: light-dark(#AC8B50, #9C7A3C);
  --sv343439: light-dark(#E5E5E6, #343439);
  --sv17171a: light-dark(#E6E6E7, #17171A);
  --sv97c459: light-dark(#779B44, #97C459);
  --sv26241f: light-dark(#E6E6E5, #26241F);
  --svc0504a: light-dark(#AA4F4A, #C0504A);
  --sv1e6b52: light-dark(#3BA180, #1E6B52);
  --sv0e0e10: light-dark(#F0F0F0, #0E0E10);
  --svf2eee6: light-dark(#201C13, #F2EEE6);
  --svf0997b: light-dark(#79321A, #F0997B);
  --sv2a2724: light-dark(#E6E6E5, #2A2724);
  --sv6b4fa8: light-dark(#765FA8, #6B4FA8);
  --svb5761e: light-dark(#C08432, #B5761E);
  --svffffff: light-dark(#1A1A1A, #FFFFFF);
  --sv5a554e: light-dark(#958F88, #5A554E);
  --sv1a0e06: light-dark(#F2EEEC, #1A0E06);
  --sve4dcd0: light-dark(#2D271D, #E4DCD0);
  --sv8a8478: light-dark(#858077, #8A8478);
  --sv070706: light-dark(#F8F8F7, #070706);
  --sva8452c: light-dark(#C87762, #A8452C);
  --sv3a3630: light-dark(#E6E6E5, #3A3630);
  --sv3a3733: light-dark(#E6E6E5, #3A3733);
  --svf0f7f3: light-dark(#132019, #F0F7F3);
  --svc0392b: light-dark(#C7584C, #C0392B);
  --svf4f0fa: light-dark(#170F24, #F4F0FA);
  --svc9a227: light-dark(#AB8D31, #C9A227);
  --svfbf3e4: light-dark(#291E0A, #FBF3E4);
  --svfaf7f2: light-dark(#231C10, #FAF7F2);
  --sv3b5ba5: light-dark(#647EBA, #3B5BA5);
  --svb5651d: light-dark(#CC7D37, #B5651D);
  --sv111113: light-dark(#EDEDED, #111113);
  --sv8c6d1f: light-dark(#AD8C36, #8C6D1F);
  --svf7ece8: light-dark(#24150F, #F7ECE8);
  --sv0d0c0a: light-dark(#F4F4F3, #0D0C0A);
  --sv3a362c: light-dark(#E7E6E4, #3A362C);
  --sve8dcc8: light-dark(#342A1A, #E8DCC8);
  --sv0b0b0c: light-dark(#F3F3F4, #0B0B0C);
  --sv242427: light-dark(#E5E5E6, #242427);
  --sv8a6b34: light-dark(#AD8B4F, #8A6B34);
  --svfbf3ee: light-dark(#26170D, #FBF3EE);
  --svf5ebdd: light-dark(#251B0E, #F5EBDD);
  --sv2a1408: light-dark(#EBE4E1, #2A1408);
  --sv4e6e8c: light-dark(#7993AB, #4E6E8C);
  --svd8cfc0: light-dark(#3D3529, #D8CFC0);
  --sve9dcc6: light-dark(#362B19, #E9DCC6);
  --sv0b0b0d: light-dark(#F3F3F3, #0B0B0D);
  --sv5e8b6e: light-dark(#739980, #5E8B6E);
  --svc9a876: light-dark(#82663D, #C9A876);
  --svce4a32: light-dark(#BF533F, #CE4A32);
  --sve4efe9: light-dark(#141F19, #E4EFE9);
  --sv3a2f10: light-dark(#EAE8E1, #3A2F10);
  --sv8c4a12: light-dark(#D17B33, #8C4A12);
  --svd8c7a4: light-dark(#56482C, #D8C7A4);
  --svf0e4ce: light-dark(#2E2412, #F0E4CE);
  --svfffdf6: light-dark(#2E2505, #FFFDF6);
  --sv1a1508: light-dark(#F1EFEB, #1A1508);
  --sv1b1b1e: light-dark(#E5E5E6, #1B1B1E);
  --sv1d1b18: light-dark(#E6E6E5, #1D1B18);
  --sv1e2a1e: light-dark(#E4E7E4, #1E2A1E);
  --sv5a2d08: light-dark(#ECE5DF, #5A2D08);
  --sv6e5a16: light-dark(#A98D31, #6E5A16);
  --sv6e6a63: light-dark(#93908A, #6E6A63);
  --svdfcdaf: light-dark(#4C3D24, #DFCDAF);
}

.sf6e6a64{fill:var(--sv6e6a64)}
.ss6e6a64{stroke:var(--sv6e6a64)}
.sfa9a49b{fill:var(--sva9a49b)}
.ssa9a49b{stroke:var(--sva9a49b)}
.sfe8c547{fill:var(--sve8c547)}
.sse8c547{stroke:var(--sve8c547)}
.sf5b7fa8{fill:var(--sv5b7fa8)}
.ss5b7fa8{stroke:var(--sv5b7fa8)}
.sfe07a3f{fill:var(--sve07a3f)}
.sse07a3f{stroke:var(--sve07a3f)}
.sf9c7a3c{fill:var(--sv9c7a3c)}
.ss9c7a3c{stroke:var(--sv9c7a3c)}
.sf343439{fill:var(--sv343439)}
.ss343439{stroke:var(--sv343439)}
.sf17171a{fill:var(--sv17171a)}
.ss17171a{stroke:var(--sv17171a)}
.sf97c459{fill:var(--sv97c459)}
.ss97c459{stroke:var(--sv97c459)}
.sf26241f{fill:var(--sv26241f)}
.ss26241f{stroke:var(--sv26241f)}
.sfc0504a{fill:var(--svc0504a)}
.ssc0504a{stroke:var(--svc0504a)}
.sf1e6b52{fill:var(--sv1e6b52)}
.ss1e6b52{stroke:var(--sv1e6b52)}
.sf0e0e10{fill:var(--sv0e0e10)}
.ss0e0e10{stroke:var(--sv0e0e10)}
.sff2eee6{fill:var(--svf2eee6)}
.ssf2eee6{stroke:var(--svf2eee6)}
.sff0997b{fill:var(--svf0997b)}
.ssf0997b{stroke:var(--svf0997b)}
.sf2a2724{fill:var(--sv2a2724)}
.ss2a2724{stroke:var(--sv2a2724)}
.sf6b4fa8{fill:var(--sv6b4fa8)}
.ss6b4fa8{stroke:var(--sv6b4fa8)}
.sfb5761e{fill:var(--svb5761e)}
.ssb5761e{stroke:var(--svb5761e)}
.sfffffff{fill:var(--svffffff)}
.ssffffff{stroke:var(--svffffff)}
.sf5a554e{fill:var(--sv5a554e)}
.ss5a554e{stroke:var(--sv5a554e)}
.sf1a0e06{fill:var(--sv1a0e06)}
.ss1a0e06{stroke:var(--sv1a0e06)}
.sfe4dcd0{fill:var(--sve4dcd0)}
.sse4dcd0{stroke:var(--sve4dcd0)}
.sf8a8478{fill:var(--sv8a8478)}
.ss8a8478{stroke:var(--sv8a8478)}
.sf070706{fill:var(--sv070706)}
.ss070706{stroke:var(--sv070706)}
.sfa8452c{fill:var(--sva8452c)}
.ssa8452c{stroke:var(--sva8452c)}
.sf3a3630{fill:var(--sv3a3630)}
.ss3a3630{stroke:var(--sv3a3630)}
.sf3a3733{fill:var(--sv3a3733)}
.ss3a3733{stroke:var(--sv3a3733)}
.sff0f7f3{fill:var(--svf0f7f3)}
.ssf0f7f3{stroke:var(--svf0f7f3)}
.sfc0392b{fill:var(--svc0392b)}
.ssc0392b{stroke:var(--svc0392b)}
.sff4f0fa{fill:var(--svf4f0fa)}
.ssf4f0fa{stroke:var(--svf4f0fa)}
.sfc9a227{fill:var(--svc9a227)}
.ssc9a227{stroke:var(--svc9a227)}
.sffbf3e4{fill:var(--svfbf3e4)}
.ssfbf3e4{stroke:var(--svfbf3e4)}
.sffaf7f2{fill:var(--svfaf7f2)}
.ssfaf7f2{stroke:var(--svfaf7f2)}
.sf3b5ba5{fill:var(--sv3b5ba5)}
.ss3b5ba5{stroke:var(--sv3b5ba5)}
.sfb5651d{fill:var(--svb5651d)}
.ssb5651d{stroke:var(--svb5651d)}
.sf111113{fill:var(--sv111113)}
.ss111113{stroke:var(--sv111113)}
.sf8c6d1f{fill:var(--sv8c6d1f)}
.ss8c6d1f{stroke:var(--sv8c6d1f)}
.sff7ece8{fill:var(--svf7ece8)}
.ssf7ece8{stroke:var(--svf7ece8)}
.sf0d0c0a{fill:var(--sv0d0c0a)}
.ss0d0c0a{stroke:var(--sv0d0c0a)}
.sf3a362c{fill:var(--sv3a362c)}
.ss3a362c{stroke:var(--sv3a362c)}
.sfe8dcc8{fill:var(--sve8dcc8)}
.sse8dcc8{stroke:var(--sve8dcc8)}
.sf0b0b0c{fill:var(--sv0b0b0c)}
.ss0b0b0c{stroke:var(--sv0b0b0c)}
.sf242427{fill:var(--sv242427)}
.ss242427{stroke:var(--sv242427)}
.sf8a6b34{fill:var(--sv8a6b34)}
.ss8a6b34{stroke:var(--sv8a6b34)}
.sffbf3ee{fill:var(--svfbf3ee)}
.ssfbf3ee{stroke:var(--svfbf3ee)}
.sff5ebdd{fill:var(--svf5ebdd)}
.ssf5ebdd{stroke:var(--svf5ebdd)}
.sf2a1408{fill:var(--sv2a1408)}
.ss2a1408{stroke:var(--sv2a1408)}
.sf4e6e8c{fill:var(--sv4e6e8c)}
.ss4e6e8c{stroke:var(--sv4e6e8c)}
.sfd8cfc0{fill:var(--svd8cfc0)}
.ssd8cfc0{stroke:var(--svd8cfc0)}
.sfe9dcc6{fill:var(--sve9dcc6)}
.sse9dcc6{stroke:var(--sve9dcc6)}
.sf0b0b0d{fill:var(--sv0b0b0d)}
.ss0b0b0d{stroke:var(--sv0b0b0d)}
.sf5e8b6e{fill:var(--sv5e8b6e)}
.ss5e8b6e{stroke:var(--sv5e8b6e)}
.sfc9a876{fill:var(--svc9a876)}
.ssc9a876{stroke:var(--svc9a876)}
.sfce4a32{fill:var(--svce4a32)}
.ssce4a32{stroke:var(--svce4a32)}
.sfe4efe9{fill:var(--sve4efe9)}
.sse4efe9{stroke:var(--sve4efe9)}
.sf3a2f10{fill:var(--sv3a2f10)}
.ss3a2f10{stroke:var(--sv3a2f10)}
.sf8c4a12{fill:var(--sv8c4a12)}
.ss8c4a12{stroke:var(--sv8c4a12)}
.sfd8c7a4{fill:var(--svd8c7a4)}
.ssd8c7a4{stroke:var(--svd8c7a4)}
.sff0e4ce{fill:var(--svf0e4ce)}
.ssf0e4ce{stroke:var(--svf0e4ce)}
.sffffdf6{fill:var(--svfffdf6)}
.ssfffdf6{stroke:var(--svfffdf6)}
.sf1a1508{fill:var(--sv1a1508)}
.ss1a1508{stroke:var(--sv1a1508)}
.sf1b1b1e{fill:var(--sv1b1b1e)}
.ss1b1b1e{stroke:var(--sv1b1b1e)}
.sf1d1b18{fill:var(--sv1d1b18)}
.ss1d1b18{stroke:var(--sv1d1b18)}
.sf1e2a1e{fill:var(--sv1e2a1e)}
.ss1e2a1e{stroke:var(--sv1e2a1e)}
.sf5a2d08{fill:var(--sv5a2d08)}
.ss5a2d08{stroke:var(--sv5a2d08)}
.sf6e5a16{fill:var(--sv6e5a16)}
.ss6e5a16{stroke:var(--sv6e5a16)}
.sf6e6a63{fill:var(--sv6e6a63)}
.ss6e6a63{stroke:var(--sv6e6a63)}
.sfdfcdaf{fill:var(--svdfcdaf)}
.ssdfcdaf{stroke:var(--svdfcdaf)}

/* ── v6.css ── */
/* ═══════════════════════════════════════════════════════════════════════
   midicn · v6 设计层（A 水母乐园 × C 夜光水族馆）
   2026-10-27：旧宪法「不靠字体/插画/纹理/光晕」的限制按用户指示解除。
   本层只挂在 `<html data-design="v6">` 的试点站上；别的站继续走 0.7 外观，
   竖切验收后再推广，避免一次动 11 站。

   不可谈判的四条：两底对比度 ≥AA · 触控 ≥44px · reduced-motion 可关 ·
   首屏仍按预算。除此之外的旧禁令（字体娱乐化、贴纸、硬投影、纹理、光晕、
   backdrop-filter、圆角档位）在本层内一律不再适用。
   ═══════════════════════════════════════════════════════════════════════ */


html[data-design=v6]{
  --ink:light-dark(#FFF5E4,#1B1317);
  --ink-2:light-dark(#FFFCF4,#261A1F);
  --ink-3:light-dark(#FFE9C9,#33222A);
  --ink-4:light-dark(#FFF9EE,#2B1D23);
  --paper:light-dark(#241B17,#FFF3E6);
  --paper-2:light-dark(#5C4B3F,#C6B3A6);
  --paper-3:light-dark(#6F5B4A,#A9958A);
  --rule:light-dark(#D8C7AE,#4A383F);
  --rule-2:light-dark(#C3AE90,#5C454D);
  --v6-line:light-dark(#241B17,#FFF3E6);
  --v6-accent:var(--jf-1,var(--vermilion));
  --v6-accent-2:var(--jf-3,var(--gold));
  --v6-display:"Smiley Sans","Songti SC",serif;
  --v6-r:20px;
  --v6-shadow:0 5px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62));
  --v6-shadow-sm:0 3px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62));
  color-scheme:light dark;
}

html[data-design=v6] body{
  background-color:var(--ink);
  background-image:
    radial-gradient(color-mix(in srgb,var(--v6-line) 7%,transparent) 1px,transparent 1.2px),
    radial-gradient(50% 36% at 86% 4%,color-mix(in srgb,var(--v6-accent) 10%,transparent),transparent 70%),
    radial-gradient(42% 34% at 4% 96%,color-mix(in srgb,var(--v6-accent-2) 9%,transparent),transparent 70%);
  background-size:24px 24px,auto,auto;
}

/* ── 顶栏 ─────────────────────────────────────────────────────────── */
html[data-design=v6] body > header{border-bottom:2px solid var(--v6-line);background:color-mix(in srgb,var(--ink) 92%,transparent)}
html[data-design=v6] .brand b{font-family:var(--v6-display);font-size:22px;letter-spacing:.01em}
html[data-design=v6] .brand i{font-size:10.5px}
html[data-design=v6] .kb-switch a{border-radius:999px;padding:.32em .55em;opacity:.72}
html[data-design=v6] .kb-switch a:hover{background:color-mix(in srgb,var(--v6-line) 10%,transparent);opacity:1}
html[data-design=v6] .kb-switch a[aria-current=page]{opacity:1;box-shadow:inset 0 -3px 0 var(--v6-accent)}
html[data-design=v6] .kb-lang{border:2px solid var(--v6-line);border-radius:999px;padding:5px 10px;font-weight:700;line-height:1.2}
html[data-design=v6] .kb-lang:hover{border-bottom-color:var(--v6-line);background:var(--ink-3);color:var(--paper)}

/* ── 门户：A 的纸面 + 贴纸，C 的水母光 ───────────────────────────── */
html[data-design=v6] .doc-index{padding-top:clamp(28px,4vw,56px)}
html[data-design=v6] .v6-hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(20px,4vw,48px);
  align-items:center;position:relative;margin-bottom:clamp(28px,4vw,52px);
}
html[data-design=v6] .v6-eyebrow{
  display:inline-flex;align-items:center;gap:6px;background:var(--ink-3);color:var(--paper);
  border:2px solid var(--v6-line);border-radius:999px;padding:4px 10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
}
html[data-design=v6] .doc-index h1{
  font-family:var(--v6-display);font-size:clamp(48px,7vw,82px);line-height:.98;
  letter-spacing:-.03em;margin:14px 0 14px;font-weight:400;
}
html[data-design=v6] .v6-actions{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
html[data-design=v6] .v6-btn{
  display:inline-flex;align-items:center;gap:7px;padding:11px 18px;border-radius:999px;
  border:2px solid var(--v6-line);background:var(--ink-2);color:var(--paper);
  font-size:13px;font-weight:700;box-shadow:var(--v6-shadow-sm);
  transition:transform .14s,box-shadow .14s,background .14s;
}
html[data-design=v6] .v6-btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62));color:var(--paper)}
html[data-design=v6] .v6-btn.primary{background:var(--v6-accent);color:#1B1317;border-color:var(--v6-line)}
html[data-design=v6] .v6-hero-art{position:relative;display:grid;place-items:center;min-height:250px}
html[data-design=v6] .v6-jf{
  width:clamp(160px,17vw,230px);height:auto;
  filter:drop-shadow(0 18px 24px color-mix(in srgb,var(--v6-accent) 30%,transparent));
}
html[data-design=v6] .v6-bubble{
  position:absolute;right:0;top:4%;background:var(--ink-2);border:2px solid var(--v6-line);
  border-radius:18px;border-bottom-left-radius:5px;padding:8px 12px;font-size:12px;
  font-weight:700;box-shadow:var(--v6-shadow-sm);transform:rotate(2deg);
}
html[data-design=v6] .v6-hero-art::before,
html[data-design=v6] .v6-hero-art::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:color-mix(in srgb,var(--v6-accent) 18%,transparent);filter:blur(1px);
}
html[data-design=v6] .v6-hero-art::before{width:90px;height:90px;left:4%;top:10%}
html[data-design=v6] .v6-hero-art::after{width:54px;height:54px;right:10%;bottom:8%;background:color-mix(in srgb,var(--v6-accent-2) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){
  html[data-design=v6] .v6-jf{animation:v6-float 6s ease-in-out infinite}
  @keyframes v6-float{0%,100%{transform:translateY(-4px)}50%{transform:translateY(6px)}}
}

/* ── 门户卡片：2px 墨线 + 贴纸硬投影 ─────────────────────────────── */
html[data-design=v6] .kb-ph{font-family:var(--v6-display);font-size:clamp(22px,3vw,30px);letter-spacing:-.01em;margin-top:var(--s5)}
html[data-design=v6] .kb-ph::after{content:"";display:block;width:84px;height:7px;margin-top:6px;border-radius:99px;background:var(--v6-accent-2)}
html[data-design=v6] .kb-cats{grid-template-columns:repeat(4,1fr);gap:12px}
html[data-design=v6] .kb-pcard{
  position:relative;display:block;overflow:hidden;background:var(--ink-2);
  border:2px solid var(--v6-line);border-radius:var(--v6-r);padding:13px 13px 11px;
  box-shadow:var(--v6-shadow);transition:transform .15s,box-shadow .15s;
}
html[data-design=v6] .kb-pcard::after{
  content:"";position:absolute;right:-20px;bottom:-26px;width:70px;height:70px;border-radius:50%;
  background:color-mix(in srgb,var(--pc,var(--v6-accent)) 20%,transparent);pointer-events:none;
}
html[data-design=v6] .kb-pcard:hover{transform:translateY(-3px);box-shadow:0 8px 0 light-dark(rgba(36,27,23,.88),rgba(0,0,0,.62))}
html[data-design=v6] .kb-pico{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--pc,var(--v6-accent));color:#1B1317;border:2px solid var(--v6-line);
  font-weight:800;font-size:13px;margin-bottom:8px;line-height:1;
}
html[data-design=v6] .kb-pname{font-family:var(--v6-display);font-size:16px;display:flex;align-items:center;gap:8px}
html[data-design=v6] .kb-pname i{display:none}
html[data-design=v6] .kb-pdesc{display:block;margin-top:6px;font-size:12px;line-height:1.65;color:var(--paper-2)}
html[data-design=v6] .kb-cat{
  margin-top:var(--s6);background:var(--ink-2);border:2px solid var(--v6-line);
  border-radius:var(--v6-r);padding:var(--s4);box-shadow:var(--v6-shadow);
}
html[data-design=v6] .kb-cat h2{font-family:var(--v6-display);font-size:22px}
html[data-design=v6] .kb-list li{border-bottom:1px dashed var(--rule)}
html[data-design=v6] .kb-t{font-weight:700}

/* ── 条目页：A 的纸面阅读 + C 的播放时刻 ──────────────────────────── */
html[data-design=v6] .doc-article h1{
  font-family:var(--v6-display);font-size:clamp(38px,5vw,58px);line-height:1.02;
  letter-spacing:-.02em;font-weight:400;
}
html[data-design=v6] .kb-lead{font-size:15px}
html[data-design=v6] .kb-chip{
  border:2px solid var(--v6-line);border-radius:999px;background:var(--ink-2);
  padding:4px 10px;box-shadow:var(--v6-shadow-sm);font-size:12px;
}
html[data-design=v6] .kb-tablewrap{
  border:2px solid var(--v6-line);border-radius:var(--v6-r);overflow:hidden;
  background:var(--ink-2);box-shadow:var(--v6-shadow);
}
html[data-design=v6] .kb-tablewrap thead th{background:var(--ink-3);font-family:var(--mono);font-size:11px;letter-spacing:.04em}
html[data-design=v6] .kb-tablewrap td{border-bottom:1px dashed var(--rule)}
html[data-design=v6] .kb-tablewrap tbody tr:hover{background:var(--ink-3)}
html[data-design=v6] .kb-item{
  border:2px solid var(--v6-line);border-radius:14px;background:var(--ink-2);
  box-shadow:var(--v6-shadow-sm);padding:10px 12px;
}
html[data-design=v6] .kb-play{
  background:var(--v6-accent);color:#1B1317;border:2px solid var(--v6-line);
  box-shadow:var(--v6-shadow-sm);
}
html[data-design=v6] .kb-play:hover{filter:brightness(1.04)}
html[data-design=v6] .kb-why{
  border-left:5px solid var(--v6-accent);background:var(--ink-3);
  border-radius:0 12px 12px 0;padding:10px 12px;
}
html[data-design=v6] .kb-note{border-left-color:var(--v6-accent)}
html[data-design=v6] .kb-title{font-weight:700}

/* ── 播放条与底栏：夜里发光，白天是纸面 ─────────────────────────── */
html[data-design=v6] .pbar{
  border-top:2px solid var(--v6-line);background:var(--ink-2);
  box-shadow:0 -14px 34px -26px color-mix(in srgb,var(--v6-accent) 55%,transparent);
}
html[data-design=v6] .kb-tabs{background:var(--ink-2);border-top:2px solid var(--v6-line)}
/* 底栏当前项不能用 accent 当文字色：珊瑚/金色在奶油底上只有 ~2:1。
   用纸色文字 + 3px accent 上沿线 —— 颜色只做加强，不承担可读性。 */
html[data-design=v6] .kb-tabs > a[aria-current=page]{color:var(--paper);font-weight:700;box-shadow:inset 0 3px 0 var(--v6-accent)}
html[data-design=v6] .kb-tabs-sheet{background:var(--ink-2);border:2px solid var(--v6-line);border-radius:16px}

/* ── 手机 ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  html[data-design=v6] .kb-cats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  html[data-design=v6] .v6-hero{grid-template-columns:1fr;gap:10px}
  html[data-design=v6] .v6-hero-art{min-height:180px;order:-1}
  html[data-design=v6] .v6-jf{width:150px}
  html[data-design=v6] .v6-bubble{right:6%;top:0}
  html[data-design=v6] .doc-index h1{font-size:clamp(42px,13vw,58px)}
  html[data-design=v6] .kb-cats{grid-template-columns:1fr}
  html[data-design=v6] .kb-cat{padding:var(--s3)}
  html[data-design=v6] .doc-article h1{font-size:clamp(36px,10vw,46px)}
  html[data-design=v6] .kb-chip{font-size:11.5px}
}