/* ============================================================
   C2 · 子页 VI（0812）

   studio.html / monitoring.html 原来用的是 css/page.css 那套通用皮，
   跟 option-c2-creator 完全不是一家人（灰底、细描边、通用标题）。
   这一支按 C2 现在的 visual identity 重新分配：色彩、字阶、卡的语言、
   圆角、间距节奏全部归到 C2 这一套。

   token 直接对齐 C2：
     紫   #7180FF   品牌主色（hero / footer / 主按钮）
     淡紫 #E3E0FF   第二支紫（信息卡、行）
     墨   #241C4E   正文和标题
     奶白 #FAF9FF   内嵌面板
     底   #F3F1FD   页面底色（0815 从粉白 #FFFAFD 换成浅紫，见下面主题层）
   规矩跟主站一致：扁平实底，无描边、无阴影、无渐变，文案不用破折号。
   0812 起四页共用：studio / monitoring / avatar-api / voice-api
   （API 两页拍板后也归到这套皮）。page.css 一个字节没动。
   ============================================================ */

/* ---- 0815 主题层 ----------------------------------------------------
   两件事一起改：
   1) 底色。原来的 --c2-ground #FFFAFD 是粉白，白卡（步骤卡 / 表格 / example）
      压在上面几乎零色差，整块糊成一片，她说 avatar 那章"看不清楚"。
      换成同一支紫的浅底 #F3F1FD，白卡靠色差自己浮起来，
      不加边框不加阴影（老规矩）。整条底色阶重新排了一遍：
        surface #FFFFFF  卡
        ground  #F3F1FD  页面底
        soft    #EAE7FC  面板（提示卡 / 目录药丸 / 代码题头 / 上下章）
        lav     #E3E0FF  品牌淡紫（信息卡 / 小片 / 序号圆片 / 表头）
   2) dark。全部颜色走 token，html[data-theme="dark"] 覆盖同一批。
      深底是深靛紫不是纯黑，跟 --c2-ink 一个家族往下压。
   文字四档 t1..t4，原来散在各处的 rgba(36,28,78,.x) 全收进来，
   不然 dark 下墨色字直接消失。 */
:root {
  color-scheme: light;
  --c2-violet: #7180FF;        /* 品牌实底块：hero / footer / 主按钮，两个主题都用它 */
  --c2-violet-deep: #5361E6;   /* 实底块 hover */
  --c2-accent: #7180FF;        /* 落在底色上的紫字：kicker / 链接 / 序号 / 选中项 */
  --c2-lav: #E3E0FF;
  --c2-lav-hover: #D6D1FF;
  --c2-lav-soft: #EAE7FC;
  --c2-soft-hover: #DEDAF8;
  --c2-ink: #241C4E;
  --c2-t1: #241C4E;                     /* 标题 / 强调 */
  --c2-t2: rgba(36, 28, 78, 0.78);      /* 正文 */
  --c2-t3: rgba(36, 28, 78, 0.62);      /* 次级：侧栏行 / 卡副文 */
  --c2-t4: rgba(36, 28, 78, 0.45);      /* 标签 / mono 小字 */
  --c2-cream: #FAF9FF;
  --c2-ground: #F3F1FD;
  --c2-surface: #FFFFFF;       /* 卡：从 ground 上浮起来的那一层 */
  --c2-raise: #FFFFFF;         /* 再高一层：淡紫卡里面的小片 */
  --c2-underline: #C9C2FF;
  --c2-font: "Proxima Nova", "proxima-nova", "Inter", -apple-system, sans-serif;
  --c2-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --c2-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --c2-pad: clamp(20px, 4vw, 76px);
  --c2-r-card: clamp(18px, 1.8vw, 28px);
  --c2-r-panel: clamp(24px, 2.6vw, 40px);
  --c2-r-pill: 100vw;
}

/* dark（0815 返工）
   第一版是"紫压紫"：ground/surface/soft/lav 四级全是饱和靛紫，
   深色端人眼对明度差本来就钝，四块紫叠在一起分不出哪是卡哪是底，
   跟她最早抱怨 light 粉底"看不清楚"是同一个病，只是换了色相。

   这版两条规矩：
   1) 底往中性深墨压（#111320，蓝味极低的墨），紫留给 accent 和实底紫块。
      底越中性，往上抬的 surface 才抬得出来。
   2) 四级台阶按 L* 拉开，每级差 5.5 到 7（light 那边 4.5 就够，
      深色端要更大跨度）：
        ground  #111320  L* 6.2
        cream   #1B1E2E  L* 11.7   代码块正文
        surface #1C1F30  L* 12.2   卡（步骤 / 表格 / example / kv / check）
        soft    #262A40  L* 17.6   面板（提示卡 / 目录药丸 / 代码题头 / 上下章）
        lav     #333856  L* 24.3   品牌淡紫位（信息卡 / 序号圆片 / 表头 / 小片）
        raise   #464C72  L* 33.3   淡紫卡里面的小片
      light 是"越浅越高"，dark 反过来"越亮越高"，相对关系一致。
   3) 文字重新定过，实测对比度（最差背景 lav 上）：
        t1 9.9 / t2 7.2 / t3 5.1 / t4 3.6 / accent 6.1，
      正文全部过 AA 4.5，次级过 3。
   实底紫块还是 #7180FF，块上白字两个主题一致。
   light 的 token 一个没动。 */
html[data-theme="dark"] {
  color-scheme: dark;
  --c2-accent: #B3B9FF;
  --c2-violet-deep: #8A93FF;   /* 深底上 hover 往亮走，不是往暗走 */
  --c2-lav: #333856;
  --c2-lav-hover: #3E4468;
  --c2-lav-soft: #262A40;
  --c2-soft-hover: #2F3450;
  --c2-ink: #ECEEFB;
  --c2-t1: #ECEEFB;
  --c2-t2: #C9CDE3;
  --c2-t3: #A8ADC6;
  --c2-t4: #8A90AC;
  --c2-cream: #1B1E2E;   /* 代码块正文：比 ground 高半级，题头再高一级 */
  --c2-ground: #111320;
  --c2-surface: #1C1F30;
  --c2-raise: #464C72;
  --c2-underline: rgba(179, 185, 255, 0.55);
  --c2-hair: rgba(236, 238, 251, 0.16);   /* 侧栏那根分栏线，0.1 在深底上直接没了 */
}

* { box-sizing: border-box; }

body.c2p {
  margin: 0;
  background: var(--c2-ground);
  color: var(--c2-ink);
  font-family: var(--c2-font);
  font-size: clamp(14px, 1.02vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
body.c2p a { color: inherit; text-decoration: none; }
body.c2p ::selection { background: var(--c2-violet); color: #fff; }
body.c2p :focus-visible { outline: 2px solid var(--c2-accent); outline-offset: 3px; border-radius: 6px; }

/* ---------------------------------------------------------------- nav */
.c2p-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: clamp(14px, 1.4vw, 24px) var(--c2-pad);
}
.c2p-brand { display: inline-flex; align-items: center; gap: 10px; }
.c2p-brand img { width: clamp(22px, 1.9vw, 30px); display: block; }
.c2p-brand b {
  display: block; font-size: clamp(11px, 0.82vw, 13px); font-weight: 800;
  letter-spacing: 0.02em; line-height: 1.05; color: var(--c2-accent); text-transform: uppercase;
}
.c2p-back {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--c2-r-pill);
  background: var(--c2-lav); color: var(--c2-ink);
  font-size: clamp(10px, 0.68vw, 12px); font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.16s ease, transform 0.16s var(--c2-ease);
}
.c2p-back:hover { background: var(--c2-lav-hover); transform: translateX(-2px); }

/* nav 右边一组：EN / JA + BACK。0813 子页也接上双语了。
   药丸照首页那颗的做法（浅底槽 + 选中实底），只是把黑白换成这一套的墨和淡紫。 */
.c2p-nav-right { display: inline-flex; align-items: center; gap: 10px; }
.c2p-lang {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--c2-lav-soft); border-radius: var(--c2-r-pill);
}
.c2p-lang button {
  border: 0; background: none; cursor: pointer;
  font-family: var(--c2-font); font-size: clamp(10px, 0.68vw, 12px); font-weight: 700;
  letter-spacing: 0.12em; line-height: 1; color: var(--c2-ink);
  padding: 7px 13px; border-radius: var(--c2-r-pill);
  transition: background 0.16s ease, color 0.16s ease;
}
.c2p-lang button:hover { background: var(--c2-lav); }
.c2p-lang button.is-on { background: var(--c2-ink); color: var(--c2-ground); }
.c2p-lang button.is-on:hover { background: var(--c2-ink); }

/* 主题药丸（0815）：跟 EN/JA 那颗同一个壳，只是里面装两枚裸线条图标。
   不新造 UI，不加图标色底砖。 */
.c2p-theme button {
  display: inline-grid; place-items: center;
  padding: 6px 11px;
}
.c2p-theme svg {
  width: 15px; height: 15px; display: block;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 深底上品牌 mark 是实底紫，提一档亮度才跟得上正文 */
html[data-theme="dark"] .c2p-brand img { filter: brightness(1.3); }

/* 日文排版：字典切到 ja 之后整页换字体栈，字距收紧一点。
   Noto Sans JP 本来就宽，还按拉丁的 letter-spacing 排会散。 */
html[data-lang="ja"] .c2p {
  font-family: "Proxima Nova", "proxima-nova", "Noto Sans JP", "Hiragino Sans", sans-serif;
}
html[data-lang="ja"] .c2p-tagline,
html[data-lang="ja"] .c2p-lead,
html[data-lang="ja"] .c2p-block p,
html[data-lang="ja"] .c2p-card-desc { letter-spacing: 0.01em; }
html[data-lang="ja"] .c2p-foot-heading { letter-spacing: 0; }

/* 日文换行：line-break: strict 管禁则（长音符「ー」、小书假名、句读点不能顶行首，
   monitoring 的「エンドツ／ーエンド」就是这么断错的）。
   word-break: auto-phrase 让浏览器按文节断，新版 Chrome 支持，旧版忽略不影响。 */
html[data-lang="ja"] .c2p-title,
html[data-lang="ja"] .c2p-tagline,
html[data-lang="ja"] .c2p-lead,
html[data-lang="ja"] .c2p-block h3,
html[data-lang="ja"] .c2p-block p,
html[data-lang="ja"] .c2p-card-desc,
html[data-lang="ja"] .c2p-foot-heading {
  line-break: strict;
  word-break: auto-phrase;
}

/* --------------------------------------------------------------- hero
   紫实底大面板，左下角开一个大圆角 —— 跟主站 products 那一段同一个手势。 */
.c2p-hero {
  margin: 0 var(--c2-pad);
  padding: clamp(40px, 5.4vw, 96px) clamp(24px, 3.4vw, 64px) clamp(36px, 4.6vw, 82px);
  background: var(--c2-violet); color: #fff;
  border-radius: var(--c2-r-panel) var(--c2-r-panel) var(--c2-r-panel) clamp(40px, 6vw, 92px);
}
.c2p-eyebrow {
  display: inline-flex; align-items: center; gap: 9px; margin: 0;
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.c2p-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #fff; flex: none; }
.c2p-title {
  margin: clamp(14px, 1.4vw, 24px) 0 0;
  font-size: clamp(44px, 6.4vw, 116px); font-weight: 900;
  line-height: 0.92; letter-spacing: -0.04em;
}
/* 片假名：只是标题下面的第二行排版，不承担信息量 */
.c2p-jp {
  display: block; margin-top: 10px;
  font-family: "Noto Sans JP", var(--c2-font);
  font-size: clamp(10px, 0.78vw, 14px); font-weight: 500;
  letter-spacing: 0.34em; color: rgba(255, 255, 255, 0.6);
}
.c2p-tagline {
  margin: clamp(18px, 1.8vw, 30px) 0 0; max-width: 34ch;
  font-size: clamp(17px, 1.5vw, 28px); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: rgba(255, 255, 255, 0.94);
}

/* --------------------------------------------------------------- body */
.c2p-body { padding: clamp(40px, 5vw, 92px) var(--c2-pad) clamp(50px, 6vw, 110px); }
.c2p-lead {
  margin: 0 0 clamp(28px, 3.2vw, 56px); max-width: 46ch;
  font-size: clamp(18px, 1.62vw, 30px); font-weight: 600; line-height: 1.42;
  letter-spacing: -0.015em;
}

.c2p-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
}
/* 卡不加外框：淡紫实底 + 圆角，从近白底上靠色差跳出来 */
.c2p-block {
  padding: clamp(20px, 2.1vw, 36px);
  background: var(--c2-lav); border: 0; border-radius: var(--c2-r-card);
  transition: transform 0.18s var(--c2-ease);
}
.c2p-block:hover { transform: translateY(-3px); }
.c2p-block-no {
  display: block; margin-bottom: clamp(14px, 1.4vw, 24px);
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.22em;
  color: var(--c2-t4);
}
.c2p-block h3 {
  margin: 0 0 8px;
  font-size: clamp(19px, 1.7vw, 30px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.025em;
}
.c2p-block p {
  margin: 0; max-width: 30ch;
  font-size: clamp(13px, 0.96vw, 16px); line-height: 1.6;
  color: var(--c2-t2);
}

.c2p-note {
  display: inline-block; margin: clamp(24px, 2.6vw, 44px) 0 0;
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c2-t4);
}

/* 下一站：白实底卡，同样不加外框 */
.c2p-next {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
  margin-top: clamp(34px, 3.6vw, 62px);
}
.c2p-card {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(18px, 1.9vw, 32px);
  background: var(--c2-surface); border-radius: var(--c2-r-card);
  transition: transform 0.18s var(--c2-ease);
}
.c2p-card:hover { transform: translateY(-3px); }
.c2p-card-txt { min-width: 0; }
.c2p-card-name {
  display: block; font-size: clamp(17px, 1.4vw, 24px); font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.1;
}
.c2p-card-desc {
  display: block; margin-top: 4px;
  font-size: clamp(12px, 0.88vw, 14px); line-height: 1.5;
  color: var(--c2-t3);
}
.c2p-card-arrow {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: clamp(34px, 2.8vw, 46px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c2-lav); color: var(--c2-accent);
  font-size: clamp(14px, 1.1vw, 18px);
  transition: background 0.16s ease, transform 0.16s var(--c2-ease);
}
.c2p-card:hover .c2p-card-arrow { background: var(--c2-violet); color: #fff; transform: translateX(3px); }

/* ------------------------------------------------------------- footer */
.c2p-footer {
  background: var(--c2-violet); color: #fff;
  border-radius: var(--c2-r-panel) var(--c2-r-panel) 0 0;
  padding: clamp(38px, 4.4vw, 84px) var(--c2-pad) clamp(20px, 2vw, 34px);
}
.c2p-foot-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(20px, 2.4vw, 42px);
  padding-bottom: clamp(28px, 3vw, 52px);
}
.c2p-foot-sub {
  margin: 0 0 14px;
  font-size: clamp(10px, 0.68vw, 12px); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
}
.c2p-foot-heading {
  margin: 0 0 clamp(14px, 1.4vw, 24px);
  font-size: clamp(24px, 2.6vw, 46px); font-weight: 900;
  line-height: 1; letter-spacing: -0.035em;
}
.c2p-form { display: flex; gap: 8px; flex-wrap: wrap; }
.c2p-form input {
  min-width: min(280px, 60vw);
  padding: 13px 20px; border: 0; border-radius: var(--c2-r-pill);
  background: rgba(255, 255, 255, 0.16); color: #fff;
  font-family: inherit; font-size: clamp(13px, 0.92vw, 15px);
}
.c2p-form input::placeholder { color: rgba(255, 255, 255, 0.66); }
.c2p-form button {
  padding: 13px 26px; border: 0; border-radius: var(--c2-r-pill); cursor: pointer;
  background: #fff; color: var(--c2-violet);
  font-family: inherit; font-size: clamp(10px, 0.68vw, 12px); font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: transform 0.16s var(--c2-ease);
}
.c2p-form button:hover { transform: translateY(-2px); }

.c2p-lockup { display: inline-flex; align-items: center; gap: 12px; }
.c2p-lockup img { width: clamp(30px, 2.6vw, 44px); display: block; filter: brightness(0) invert(1); }
.c2p-lockup b {
  display: block; font-size: clamp(14px, 1.2vw, 21px); font-weight: 800;
  letter-spacing: 0.01em; line-height: 1.05; text-transform: uppercase;
}
.c2p-lockup em {
  display: block; margin-top: 2px; font-style: normal;
  font-size: clamp(9px, 0.62vw, 11px); font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.c2p-foot-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-top: clamp(16px, 1.6vw, 28px);
  font-size: clamp(10px, 0.72vw, 12.5px); color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------- 窄窗口 */
@media (max-width: 900px) {
  .c2p-grid, .c2p-next { grid-template-columns: minmax(0, 1fr); }
  .c2p-block p { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .c2p-block, .c2p-card, .c2p-back, .c2p-form button { transition: none; }
}

/* ============================================================
   C2 · docs 正文层（0814 返工）

   avatar-api / voice-api 两页把 aniwaffle.com/docs 的原文整个接进来
   （avatar ← /docs/avatar，voice ← /docs/agents，Larissa 指定的映射）。
   页面骨架一个字没动，还是 0812 那套 c2p（nav / 紫 hero / next / footer），
   这里只补正文需要的排版件：小节、步骤卡、表格、代码块、提示卡、目录。

   规矩不变：扁平实底、无描边无阴影无渐变、卡不加外框，
   行与行之间只用发丝线分隔；code 面板走奶白和淡紫，不用黑色。
   ============================================================ */

:root { --c2-hair: rgba(36, 28, 78, 0.08); }

/* hero 里的两颗按钮 + 标签小片（docs 原页 header 就有这三样） */
.c2d-flag {
  display: inline-flex; align-items: center;
  margin-left: 10px; padding: 5px 12px; border-radius: var(--c2-r-pill);
  background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.14em;
}
.c2d-hero-btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(22px, 2.2vw, 38px); }
.c2d-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px; border-radius: var(--c2-r-pill);
  font-size: clamp(11px, 0.74vw, 13px); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--c2-lav); color: var(--c2-ink);
  transition: background 0.16s ease, transform 0.16s var(--c2-ease);
}
.c2d-btn:hover { background: var(--c2-lav-hover); transform: translateY(-2px); }
.c2d-btn.is-hero { background: #fff; color: var(--c2-violet); }
.c2d-btn.is-hero:hover { background: #fff; }
.c2d-btn.is-ghost { background: rgba(255, 255, 255, 0.16); color: #fff; }
.c2d-btn.is-ghost:hover { background: rgba(255, 255, 255, 0.26); }

/* 目录：docs 左栏的 On this page，搬成 lead 下面一排药丸 */
.c2d-toc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 clamp(10px, 1vw, 18px);
}
.c2d-toc-label {
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c2-t4); margin-right: 4px;
}
.c2d-toc a {
  padding: 8px 16px; border-radius: var(--c2-r-pill);
  background: var(--c2-lav-soft); color: var(--c2-ink);
  font-size: clamp(11px, 0.8vw, 13.5px); font-weight: 600;
  transition: background 0.16s ease;
}
.c2d-toc a:hover { background: var(--c2-lav); }

/* 小节骨架 */
.c2d-sec { margin-top: clamp(44px, 4.8vw, 84px); scroll-margin-top: 24px; }
.c2d-kicker {
  margin: 0; font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--c2-accent);
}
.c2d-h2 {
  margin: clamp(8px, 0.9vw, 14px) 0 0; max-width: 26ch;
  font-size: clamp(25px, 2.5vw, 44px); font-weight: 800;
  line-height: 1.06; letter-spacing: -0.03em;
}
.c2d-intro {
  margin: clamp(10px, 1.1vw, 18px) 0 0; max-width: 62ch;
  font-size: clamp(14.5px, 1.12vw, 18.5px); line-height: 1.6;
  color: var(--c2-t2);
}
.c2d-sec > p:not(.c2d-kicker):not(.c2d-intro) {
  margin: clamp(16px, 1.8vw, 28px) 0 0; max-width: 70ch;
  color: var(--c2-t2);
}

/* 行内 code：淡紫小片（黑色 chip 禁用，docs 原站那种深底不进这套皮） */
.c2p-body code,
.c2doc-main code {
  font-family: var(--c2-mono); font-size: 0.86em;
  background: var(--c2-lav-soft); color: var(--c2-ink);
  padding: 1px 7px; border-radius: 7px;
}
/* 正文里的链接：淡紫下划线，hover 变紫 */
.c2d-a { text-decoration: underline; text-decoration-color: var(--c2-underline); text-underline-offset: 4px; font-weight: 600; }
.c2d-a:hover { text-decoration-color: var(--c2-accent); color: var(--c2-accent); }

/* 步骤卡：白实底一张卡，行内发丝线，紫号码圆片 */
.c2d-steps {
  list-style: none; margin: clamp(16px, 1.8vw, 28px) 0 0; padding: 0;
  background: var(--c2-surface); border-radius: var(--c2-r-card); overflow: hidden;
  counter-reset: c2dstep;
}
.c2d-steps li {
  display: grid; grid-template-columns: clamp(30px, 2.4vw, 38px) 1fr;
  gap: clamp(12px, 1.2vw, 18px); align-items: start;
  padding: clamp(16px, 1.7vw, 26px) clamp(18px, 2vw, 32px);
}
.c2d-steps li + li { border-top: 1px solid var(--c2-hair); }
.c2d-steps li::before {
  counter-increment: c2dstep; content: counter(c2dstep);
  display: grid; place-items: center;
  width: clamp(28px, 2.2vw, 34px); aspect-ratio: 1; border-radius: 50%;
  background: var(--c2-lav); color: var(--c2-accent);
  font-family: var(--c2-mono); font-size: clamp(11px, 0.8vw, 13px); font-weight: 700;
}
.c2d-steps h3 {
  margin: 2px 0 0;
  font-size: clamp(14.5px, 1.12vw, 18.5px); font-weight: 700;
  line-height: 1.25; letter-spacing: -0.01em;
}
.c2d-steps li > div > div {
  margin-top: 5px;
  font-size: clamp(13px, 0.96vw, 15.5px); line-height: 1.62;
  color: var(--c2-t2);
}

/* 提示卡：淡紫实底（docs 的 info callout），无图标，宁可没有 */
.c2d-note {
  margin-top: clamp(14px, 1.4vw, 22px);
  padding: clamp(18px, 1.9vw, 28px) clamp(18px, 2vw, 32px);
  background: var(--c2-lav-soft); border-radius: var(--c2-r-card);
  font-size: clamp(13px, 0.96vw, 15.5px); line-height: 1.62;
  color: var(--c2-t2);
}
.c2d-note strong { color: var(--c2-ink); font-weight: 700; }
/* 只有开头那个题头 strong 独占一行，正文里行内的 strong 不换行
   （0814 自查：Start from live config 那句被切成三行，就是这里） */
.c2d-note > strong:first-child { display: block; margin-bottom: 4px; }
.c2d-note code { background: var(--c2-lav); }

/* 表格：白实底卡，表头淡紫，行发丝线；窄窗口横向滚（细轨自然出，不做粗滚动条） */
.c2d-tablewrap {
  margin-top: clamp(16px, 1.8vw, 28px);
  background: var(--c2-surface); border-radius: var(--c2-r-card);
  overflow-x: auto;
}
.c2d-tablewrap table {
  width: 100%; min-width: 640px; border-collapse: collapse;
  text-align: left; font-size: clamp(12.5px, 0.94vw, 15px); line-height: 1.55;
}
.c2d-tablewrap th {
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 26px);
  background: var(--c2-lav); font-weight: 700; white-space: nowrap;
}
.c2d-tablewrap td {
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 26px);
  vertical-align: top; color: var(--c2-t2);
}
.c2d-tablewrap tr + tr td { border-top: 1px solid var(--c2-hair); }
.c2d-tablewrap td:first-child { font-weight: 600; color: var(--c2-ink); }

/* 代码块：奶白实底 + 淡紫题头，mono 墨字。docs 原站是黑底，这里不进黑。 */
.c2d-code {
  margin-top: clamp(14px, 1.4vw, 22px);
  background: var(--c2-cream); border-radius: var(--c2-r-card); overflow: hidden;
}
.c2d-code-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px clamp(16px, 1.6vw, 26px);
  background: var(--c2-lav-soft);
}
.c2d-code-head span {
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c2-accent); font-weight: 700;
}
.c2d-code-head button {
  border: 0; cursor: pointer; font-family: var(--c2-font);
  padding: 6px 14px; border-radius: var(--c2-r-pill);
  background: var(--c2-lav); color: var(--c2-ink);
  font-size: clamp(10px, 0.68vw, 12px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  transition: background 0.16s ease;
}
.c2d-code-head button:hover { background: var(--c2-lav-hover); }
.c2d-code pre {
  margin: 0; padding: clamp(16px, 1.7vw, 26px) clamp(16px, 1.6vw, 26px);
  overflow-x: auto;
  font-family: var(--c2-mono); font-size: clamp(11.5px, 0.86vw, 13.5px); line-height: 1.75;
  color: var(--c2-ink);
}
.c2d-code pre code { background: none; padding: 0; font-size: inherit; }

/* 键值卡：instructions 那张「Role and scope …」，左名右说明 */
.c2d-kv {
  margin-top: clamp(14px, 1.4vw, 22px);
  background: var(--c2-surface); border-radius: var(--c2-r-card); overflow: hidden;
}
.c2d-kv > div {
  display: grid; grid-template-columns: minmax(9rem, 11rem) 1fr; gap: 6px 18px;
  padding: clamp(13px, 1.3vw, 20px) clamp(18px, 2vw, 32px);
  font-size: clamp(13px, 0.96vw, 15.5px); line-height: 1.6;
}
.c2d-kv > div + div { border-top: 1px solid var(--c2-hair); }
.c2d-kv strong { font-weight: 700; }
.c2d-kv span { color: var(--c2-t2); }

/* 打勾清单卡：test 小节那五条验收，白卡 + 紫点 */
.c2d-check {
  list-style: none; margin: clamp(14px, 1.4vw, 22px) 0 0; padding: 0;
  background: var(--c2-surface); border-radius: var(--c2-r-card); overflow: hidden;
}
.c2d-check li {
  display: flex; gap: 12px; align-items: baseline;
  padding: clamp(12px, 1.2vw, 18px) clamp(18px, 2vw, 32px);
  font-size: clamp(13px, 0.96vw, 15.5px); line-height: 1.6;
  color: var(--c2-t2);
}
.c2d-check li + li { border-top: 1px solid var(--c2-hair); }
.c2d-check li::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--c2-accent); transform: translateY(-1px);
}

/* 正文里的小卡阵：3 列（01/02/03）或 2 列，淡紫卡沿用 .c2p-block 的语言 */
.c2d-grid { display: grid; gap: clamp(10px, 1.1vw, 18px); margin-top: clamp(16px, 1.8vw, 28px); }
.c2d-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c2d-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c2d-grid .c2p-block h3 { font-size: clamp(16px, 1.3vw, 22px); }
.c2d-grid .c2p-block p { max-width: none; }

/* 小卡阵 · dark（0815 拍板：不填底 + 发丝分栏）
   深色端把淡紫卡底填满一整排，读出来是三块脏泥，而且三个要点跟底下
   那条提示卡长得一模一样，分不出内容和补充。
   这版把填充直接拿掉：三块落在 ground 上，每栏顶一根发丝线定住结构，
   gap 从 18 加到 34 撑开分栏。这是分栏线不是卡外框（外框老规矩照旧
   不加），跟 .c2d-steps / .c2d-kv / .c2d-check 已经在用的发丝分隔同一种线。
   序号（和路径卡那排眉标）提到 accent 紫，是这一段唯一的彩色锚点。
   提示卡退到 cream 那一级（比 ground 高半档），从"一块砖"变"一片纸"，
   跟上面三块拉开角色。
   窄窗口塌成一列时线跟着变成整行的横分隔，不会留一堆孤零零的短线。
   light 一个 token 都没动，全部锁在 dark 作用域里。 */
html[data-theme="dark"] .c2d-grid { gap: clamp(18px, 2.2vw, 34px); }
html[data-theme="dark"] .c2d-grid .c2p-block {
  padding: 16px 0 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--c2-hair);
  transition: border-color 0.18s ease;
}
html[data-theme="dark"] .c2d-grid .c2p-block:hover {
  transform: none;
  border-top-color: var(--c2-accent);
}
html[data-theme="dark"] .c2d-grid .c2p-block-no {
  margin-bottom: 10px;
  color: var(--c2-accent);
}
/* 可点的路径卡：没了实底就得靠 hover 说"我可以点"，题头跟着分栏线一起提紫 */
html[data-theme="dark"] .c2d-grid button.c2p-block h3 { transition: color 0.18s ease; }
html[data-theme="dark"] .c2d-grid button.c2p-block:hover h3 { color: var(--c2-accent); }
/* 包名小片：卡没了，raise 那档小片浮在 ground 上太重，退一级到 lav */
html[data-theme="dark"] .c2doc-main .c2d-grid .c2p-block .c2doc-pkg { background: var(--c2-lav); }
/* 块不再有下 padding，提示卡要自己把那口气补回来 */
html[data-theme="dark"] .c2d-grid + .c2d-note { margin-top: clamp(22px, 2.2vw, 34px); }
html[data-theme="dark"] .c2d-note { background: var(--c2-cream); }

/* Example 卡（avatar 页 Lumi 那张）：白实底，纯文字，不放插画 */
.c2d-example {
  margin-top: clamp(14px, 1.4vw, 22px);
  padding: clamp(20px, 2.1vw, 34px) clamp(18px, 2vw, 32px);
  background: var(--c2-surface); border-radius: var(--c2-r-card);
}
.c2d-example .c2d-kicker { color: var(--c2-accent); }
.c2d-example h3 {
  margin: 8px 0 0; font-size: clamp(17px, 1.4vw, 24px); font-weight: 800; letter-spacing: -0.02em;
}
.c2d-example p {
  margin: 8px 0 0; max-width: 60ch;
  font-size: clamp(13px, 0.96vw, 15.5px); line-height: 1.62; color: var(--c2-t2);
}

/* 正文小节尾部的按钮 */
.c2d-sec .c2d-btn { margin-top: clamp(14px, 1.4vw, 22px); }

@media (max-width: 900px) {
  .c2d-grid.is-3, .c2d-grid.is-2 { grid-template-columns: minmax(0, 1fr); }
  .c2d-kv > div { grid-template-columns: minmax(0, 1fr); }
  .c2d-h2 { max-width: none; }
  /* dark 的分栏线：塌成一列之后线变成整行的横分隔，这时候上下要拉开
     差距（间距 28 对 padding 14），线才明确属于下面那一块，
     不然一根线夹在两块中间谁都不认领。 */
  html[data-theme="dark"] .c2d-grid { gap: 28px; }
  html[data-theme="dark"] .c2d-grid .c2p-block { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .c2d-btn { transition: none; }
}

/* ============================================================
   C2 · docs 骨架层 c2doc-（0815）

   拆开的 avatar-api / voice-api 两页她说"拆分出来不太好，排版也不 OK"，
   改成一个标准 docs 页：docs.html 单文件单 URL。
   结构照 platform.claude.com/docs 那种：左边固定 sidebar 列章节，
   右边 content，正文右侧一条 On this page。她截图里顶上那条药丸 nav
   不用管（那是网页自己的 nav），只搬 sidebar + content 这层骨架。
   sidebar 点击在页内切章节，不跳页。

   visual 还是我们自己的：紫 #7180FF / 淡紫 #E3E0FF / 墨 #241C4E，
   Proxima Nova，扁平实底，无渐变无阴影，卡不加外框，
   分栏只用发丝线（她说细线好看，讨厌的是粗滚动条），
   图标裸线条不加色底砖。正文排版件全部复用上面的 c2d- 层。
   ============================================================ */

/* ---- 顶栏：一条通栏，左 logo 右语言 + 回站 ---- */
.c2doc-top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 var(--c2-pad); height: var(--c2doc-top-h);
  background: var(--c2-ground);
  border-bottom: 1px solid var(--c2-hair);
}
:root { --c2doc-top-h: clamp(56px, 4.6vw, 68px); }
.c2doc-top .c2p-brand span { display: inline-flex; align-items: baseline; gap: 8px; }
/* logo 后面那枚 Docs 小字，跟 docs 原站同一个信息位 */
.c2doc-top-tag {
  font-size: clamp(11px, 0.82vw, 13px); font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--c2-t4);
}

/* ---- 三栏骨架 ---- */
.c2doc-shell {
  display: grid;
  grid-template-columns: clamp(200px, 17vw, 260px) minmax(0, 1fr) clamp(180px, 14vw, 224px);
  gap: 0;
  max-width: 1480px; margin: 0 auto;
  align-items: start;
}

/* ---- 左 sidebar：跟着滚，自己一条发丝线分栏 ---- */
.c2doc-side {
  position: sticky; top: var(--c2doc-top-h);
  max-height: calc(100vh - var(--c2doc-top-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(20px, 2.2vw, 34px) clamp(12px, 1.2vw, 20px) 40px clamp(12px, 1.4vw, 24px);
  border-right: 1px solid var(--c2-hair);
}
.c2doc-side-label {
  margin: 0 0 8px; padding: 0 10px;
  font-family: var(--c2-mono);
  font-size: clamp(9.5px, 0.66vw, 11px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c2-t4);
}
.c2doc-side-label + .c2doc-side-label,
.c2doc-side nav + .c2doc-side-label { margin-top: clamp(20px, 2vw, 30px); }
.c2doc-side nav { display: flex; flex-direction: column; gap: 1px; }
.c2doc-nav {
  display: flex; align-items: center; gap: 10px;
  padding: clamp(7px, 0.7vw, 10px) 10px; border: 0; border-radius: 10px;
  background: none; color: var(--c2-t2);
  font-family: var(--c2-font); font-size: clamp(13px, 0.98vw, 15.5px);
  font-weight: 500; line-height: 1.35; text-align: left; cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.c2doc-nav:hover { background: var(--c2-lav-soft); color: var(--c2-ink); }
.c2doc-nav[aria-current="page"] {
  background: var(--c2-lav); color: var(--c2-accent); font-weight: 700;
}
.c2doc-nav svg {
  width: 15px; height: 15px; flex: none;
  stroke: currentColor; stroke-width: 1.7; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.72;
}
.c2doc-nav[aria-current="page"] svg { opacity: 1; }
/* 外链一组（Dashboard / npm）：同一个行语言，尾巴一枚小箭头 */
.c2doc-side a.c2doc-nav::after {
  content: "↗"; margin-left: auto;
  font-size: 0.82em; color: var(--c2-t4);
}

/* ---- 中间 content ---- */
.c2doc-main {
  min-width: 0;
  padding: clamp(26px, 3.4vw, 60px) clamp(20px, 3.4vw, 64px) clamp(60px, 7vw, 120px);
}
.c2doc-page[hidden] { display: none; }
/* 章节页头：kicker + h1 + lead，比正文 h2 大一档 */
.c2doc-eyebrow {
  margin: 0; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--c2-mono);
  font-size: clamp(10px, 0.68vw, 12px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--c2-accent);
}
.c2doc-h1 {
  margin: clamp(10px, 1vw, 16px) 0 0; max-width: 22ch;
  font-size: clamp(30px, 3vw, 52px); font-weight: 800;
  line-height: 1.04; letter-spacing: -0.035em;
}
.c2doc-lead {
  margin: clamp(12px, 1.3vw, 20px) 0 0; max-width: 62ch;
  font-size: clamp(15px, 1.2vw, 20px); line-height: 1.55;
  color: var(--c2-t2);
}
.c2doc-page .c2d-hero-btns .c2d-btn { background: var(--c2-lav); color: var(--c2-ink); }
.c2doc-page .c2d-hero-btns .c2d-btn.is-solid { background: var(--c2-violet); color: #fff; }
.c2doc-page .c2d-hero-btns .c2d-btn.is-solid:hover { background: var(--c2-violet-deep); }
/* docs 列宽下正文 h2 收一档，44px 在这个栏里太冲 */
.c2doc-main .c2d-h2 { font-size: clamp(22px, 1.9vw, 32px); letter-spacing: -0.025em; }
.c2doc-main .c2d-intro { font-size: clamp(14.5px, 1.06vw, 17px); }
.c2doc-main .c2d-sec { scroll-margin-top: calc(var(--c2doc-top-h) + 20px); }
/* 章节之间一条发丝线，读长文的时候有个落点 */
.c2doc-main .c2d-sec + .c2d-sec { border-top: 1px solid var(--c2-hair); padding-top: clamp(34px, 3.6vw, 60px); }
/* 章节末尾的上一章 / 下一章 */
.c2doc-updown {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(40px, 4.4vw, 76px);
  padding-top: clamp(22px, 2.4vw, 36px);
  border-top: 1px solid var(--c2-hair);
}
.c2doc-updown button {
  display: inline-flex; align-items: center; gap: 10px;
  padding: clamp(12px, 1.2vw, 18px) clamp(16px, 1.6vw, 24px);
  border: 0; border-radius: var(--c2-r-card); cursor: pointer;
  background: var(--c2-lav-soft); color: var(--c2-ink);
  font-family: var(--c2-font); text-align: left;
  transition: background 0.14s ease;
}
.c2doc-updown button:hover { background: var(--c2-lav); }
.c2doc-updown small {
  display: block;
  font-family: var(--c2-mono); font-size: clamp(9.5px, 0.66vw, 11px);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--c2-t4);
}
.c2doc-updown strong { display: block; margin-top: 3px; font-size: clamp(14px, 1.05vw, 17px); font-weight: 700; }

/* ---- 右 On this page ---- */
.c2doc-onthis {
  position: sticky; top: var(--c2doc-top-h);
  max-height: calc(100vh - var(--c2doc-top-h));
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(26px, 3.4vw, 60px) clamp(14px, 1.6vw, 26px) 40px 0;
}
.c2doc-onthis p {
  margin: 0 0 10px;
  font-family: var(--c2-mono);
  font-size: clamp(9.5px, 0.66vw, 11px); font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--c2-t4);
}
.c2doc-onthis ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c2doc-onthis a {
  display: block; padding: 5px 0 5px 12px;
  font-size: clamp(12px, 0.88vw, 14px); line-height: 1.4;
  color: var(--c2-t3);
  /* 发丝线做一条读进度轨，选中那段变紫（她要的是细线，不是滚动条） */
  box-shadow: inset 1px 0 0 var(--c2-hair);
  transition: color 0.14s ease, box-shadow 0.14s ease;
}
.c2doc-onthis a:hover { color: var(--c2-ink); }
.c2doc-onthis a.is-on { color: var(--c2-accent); font-weight: 700; box-shadow: inset 1.5px 0 0 var(--c2-accent); }

/* ---- 断点（她拖窄窗口 review）----
   1180 以下右栏整列退场：grid 模板同步改成两列，
   不然 display:none 的 grid 子元素会把邻居塞进错的列。 */
@media (max-width: 1180px) {
  .c2doc-shell { grid-template-columns: clamp(190px, 22vw, 240px) minmax(0, 1fr); }
  .c2doc-onthis { display: none; }
}
/* 900 以下 sidebar 从左栏翻成顶上一条横滚章节条 */
@media (max-width: 900px) {
  .c2doc-shell { grid-template-columns: minmax(0, 1fr); }
  .c2doc-side {
    position: sticky; top: var(--c2doc-top-h); z-index: 30;
    max-height: none; overflow: visible;
    padding: 10px var(--c2-pad);
    background: var(--c2-ground);
    border-right: 0; border-bottom: 1px solid var(--c2-hair);
  }
  .c2doc-side-label { display: none; }
  /* 章节 + Elsewhere 收成同一条横滚，别叠成两行把内容压下去 */
  .c2doc-side {
    display: flex; align-items: center; gap: 6px;
    overflow-x: auto; scrollbar-width: none;
  }
  .c2doc-side::-webkit-scrollbar { display: none; }
  .c2doc-side nav { flex-direction: row; gap: 6px; overflow: visible; }
  .c2doc-nav { flex: none; white-space: nowrap; border-radius: 100vw; padding: 8px 14px; }
  .c2doc-side a.c2doc-nav::after { margin-left: 4px; }
  .c2doc-main { padding: clamp(24px, 5vw, 40px) var(--c2-pad) clamp(56px, 12vw, 90px); }
}
@media (prefers-reduced-motion: reduce) {
  .c2doc-nav, .c2doc-onthis a, .c2doc-updown button { transition: none; }
}

/* ---- docs 正文里几个小补丁（0815，跟 c2doc 骨架一起用）---- */
/* 卡里第二行提示句：比正文淡一档、小一档 */
.c2doc-main .c2p-block p + p {
  margin-top: 8px; font-size: 0.92em; color: var(--c2-t4);
}
/* 可点的路径卡（overview 那三张跳章节用）：button 也要长得跟卡一样 */
button.c2p-block {
  width: 100%; text-align: left; cursor: pointer;
  font-family: var(--c2-font); color: inherit;
}
/* 卡里那枚 mono 包名小片 */
.c2doc-main .c2p-block .c2doc-pkg {
  display: inline-block; margin-top: 12px; padding: 4px 10px; border-radius: 8px;
  background: var(--c2-raise); color: var(--c2-accent);
  font-family: var(--c2-mono); font-size: clamp(10.5px, 0.76vw, 12.5px); font-weight: 700;
}

/* button 版的 c2d-btn：浏览器默认边框要清掉（卡/按钮永不加外框） */
button.c2d-btn { border: 0; cursor: pointer; font-family: var(--c2-font); }

/* ============================================================ docs · 日本語
   0815：docs.html 正文六章全部日文化，c2doc / c2d 这一层原来只按拉丁排的。
   日文没有词间空格，行高要比英文松一档，字距反过来要收；标题那种
   line-height 1.04 的紧排，换成日文会挤成一坨，所以单独放开。
   line-break: strict 管禁则（长音符「ー」、小书假名、句读点不顶行首），
   word-break: auto-phrase 让 Chrome 按文节断行，标题不会断在奇怪的地方。 */
html[data-lang="ja"] .c2doc-h1,
html[data-lang="ja"] .c2d-h2,
html[data-lang="ja"] .c2doc-lead,
html[data-lang="ja"] .c2d-intro,
html[data-lang="ja"] .c2d-sec > p,
html[data-lang="ja"] .c2d-steps li,
html[data-lang="ja"] .c2d-check li,
html[data-lang="ja"] .c2d-kv span,
html[data-lang="ja"] .c2d-note,
html[data-lang="ja"] .c2doc-main .c2p-block h3,
html[data-lang="ja"] .c2doc-main .c2p-block p,
html[data-lang="ja"] .c2d-tablewrap td {
  line-break: strict;
  word-break: auto-phrase;
}

/* 标题：紧排 + 负字距是拉丁的手势，日文要放回来 */
html[data-lang="ja"] .c2doc-h1 {
  max-width: 20ch; line-height: 1.3; letter-spacing: -0.005em;
}
html[data-lang="ja"] .c2d-h2 {
  max-width: 24ch; line-height: 1.34; letter-spacing: 0;
}
html[data-lang="ja"] .c2doc-main .c2p-block h3,
html[data-lang="ja"] .c2d-steps li > div > h3 {
  line-height: 1.5; letter-spacing: 0;
}

/* 正文：行高松一档，字距 +0.01em 让假名不粘在一起 */
html[data-lang="ja"] .c2doc-lead { line-height: 1.78; letter-spacing: 0.01em; }
html[data-lang="ja"] .c2d-intro,
html[data-lang="ja"] .c2d-sec > p,
html[data-lang="ja"] .c2doc-main .c2p-block p,
html[data-lang="ja"] .c2d-kv span {
  line-height: 1.8; letter-spacing: 0.01em;
}
html[data-lang="ja"] .c2d-note { line-height: 1.8; letter-spacing: 0.01em; }
html[data-lang="ja"] .c2d-steps li,
html[data-lang="ja"] .c2d-check li { line-height: 1.78; letter-spacing: 0.01em; }
html[data-lang="ja"] .c2d-tablewrap table { line-height: 1.75; letter-spacing: 0.01em; }
/* 表头：日文短，nowrap 留着；说明列照常换行 */
html[data-lang="ja"] .c2doc-side,
html[data-lang="ja"] .c2doc-onthis { line-height: 1.6; letter-spacing: 0.01em; }