/* ============================================================
   工具集 — 样式表
   设计约定：
   - 浅色主题，栅格对齐，充足留白
   - 卡片 12px 圆角 / 按钮、输入框 6px 圆角
   - 标题加粗 + 正文常规，系统字体栈
   - 禁：高饱和渐变、glow、厚重毛玻璃
   ============================================================ */

:root {
  /* ---------- 字体：全站只有两个栈，别再硬编码 ----------
     --hx-sans 正文 / 标题 / 中文标签 / 按钮
     --hx-mono 英文微标 / 代码 / 色值 / 尺寸数值 / 快捷键
     其它 CSS 里 font-family 只许写 var(--hx-sans) / var(--hx-mono) / inherit。 */
  --hx-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --hx-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", monospace;
  --bg: #fafafa;
  --surface: #ffffff;
  --border: #ebebeb;
  --border-strong: #d4d4d8;
  --text: #18181b;
  --text-2: #52525b;
  --text-3: #6b6b74;   /* 三级文字（说明/计数/占位）：对着 #fff / #fafafa / #f4f4f5 均 ≥4.8:1，达 WCAG AA。原 #a1a1aa 只有 2.5:1，全站 60+ 处小字读不清 */
  --green: #16a34a;
  --accent: #a6663d;   /* 旧皮肤兜底主题色（赭石）。HELIX 下由 helix.css 重赋为薄荷 / 墨绿，此值不参与渲染 */
  --gray: #a1a1aa;
  --icon-bg: #f4f4f5;
  --icon-fg: #3f3f46;
  --shadow-1: 0 1px 2px rgba(24, 24, 27, 0.04);
  --shadow-2: 0 2px 4px rgba(24, 24, 27, 0.04), 0 10px 28px rgba(24, 24, 27, 0.1);
  --r-card: 12px;
  --r-btn: 6px;
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  /* 控件统一尺寸：输入框 / 按钮同高，保证跨视图对齐 */
  --ctl-h: 30px;
  --ctl-h-sm: 26px;
  --ctl-px: 12px;
  /* ---------- 语义色（按主题覆盖，供各工具 CSS 取用；勿在组件里再写死色值） ---------- */
  --accent-text: #905835;                 /* 文字级：比 --accent 深一档，软底上 5.03:1。JS 改色时按同一规则自动加深到 5.0 */
  --accent-soft-bg: rgba(166, 102, 61, 0.08);
  --accent-soft-border: rgba(166, 102, 61, 0.3);
  --danger: #dc2626;                      /* 错误/危险 主色 */
  --danger-text: #b91c1c;                 /* 错误文字（hover 态） */
  --danger-soft-bg: rgba(220, 38, 38, 0.08);
  --danger-soft-border: rgba(220, 38, 38, 0.25);
  --btn-p-hover: #3f3f46;                 /* 主按钮 hover 底色 */
  --checker-a: #f0f0f1;                   /* 透明棋盘格两色 */
  --checker-b: #fafafa;
  --overlay-dim: rgba(24, 24, 27, 0.08);  /* 选区遮罩（压在图上） */
  --overlay-scrim: rgba(244, 244, 245, 0.55); /* 裁切时四周压暗 */
  --spot-ring: #ffffff;                   /* 引导高亮圈内衬 */
  --sel-bg: #ffe8d9;                      /* ::selection */
  --sel-fg: #7c2d12;
  --accent-purple: #7e22ce;               /* 紫色强调（有损量化勾选等） */
  --green-soft-bg: rgba(22, 163, 74, 0.1); /* 绿色软底/文字（trim 徽标等） */
  --green-text: #15803d;
  --green-soft-border: rgba(22, 163, 74, 0.25);
  --blue-soft-bg: rgba(37, 99, 235, 0.1); /* 蓝色徽标（GIF 动图标识等） */
  --blue-text: #1d4ed8;
  --purple-soft-bg: rgba(147, 51, 234, 0.1); /* 紫色徽标（量化等） */
  /* ---------- 分类辅助色（弱着色：软底 + 文字级彩色；只做分类标识，不进控件） ---------- */
  --cat-tools-bg: rgba(130, 88, 61, 0.08);   /* 工具集 · 赭石（默认方案「丹青」；面板可换宋韵/青绿/素笺） */
  --cat-tools-fg: #82583d;                   /* 深档：11px 计数 pill 落在软底上 5.3:1 */
  --cat-design-bg: rgba(70, 102, 125, 0.08);  /* 设计资源 · 黛蓝 */
  --cat-design-fg: #46667d;                   /* 5.2:1 */
  --cat-learn-bg: rgba(79, 107, 89, 0.1);    /* 学习 · 竹青 */
  --cat-learn-fg: #4f6b59;                   /* 5.1:1 */
  --float-bg: rgba(255, 255, 255, 0.88);     /* 图上浮动标签底 */
  --spot-scrim: rgba(24, 24, 27, 0.36);   /* 引导高亮时四周压暗 */
}

/* ---------- 暗色主题（右上角切换，持久化 localStorage；:root 为亮色默认值） ---------- */
[data-theme="dark"] {
  /* 深底不着死黑：各层明度保持原值，只把色相从冷中性（原 h240 蓝灰）换成主题色相
     （兜底＝赭石 h24，饱和 6–7%）。HELIX 下这一整组由 helix.css 覆盖，
     换肤时明度不动，所有文字对比度一分不变。 */
  --bg: #1b1816;
  --surface: #24201e;
  --border: #322d2a;
  --border-strong: #463f3b;
  --text: #f4f4f5;
  --text-2: #a8a8ae;
  --text-3: #94949c;   /* 三级文字：对着 #24201e / #1b1816 / #322d2a 均 ≥4.6:1（原 #7a7a82 仅 3.3–4.2） */
  --green: #4ade80;
  --accent: #d0a080;
  --gray: #7a7a82;
  --icon-bg: #322d2a;
  --icon-fg: #d4d4d8;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.5);
  --accent-text: #e1c1ad;
  --accent-soft-bg: rgba(208, 160, 128, 0.12);
  --accent-soft-border: rgba(208, 160, 128, 0.3);
  --danger: #f87171;
  --danger-text: #fca5a5;
  --danger-soft-bg: rgba(248, 113, 113, 0.1);
  --danger-soft-border: rgba(248, 113, 113, 0.28);
  --btn-p-hover: #463f3b;
  --checker-a: #322d2a;
  --checker-b: #24201e;
  --overlay-dim: rgba(255, 255, 255, 0.08);
  --overlay-scrim: rgba(27, 24, 22, 0.62);
  --spot-ring: #f4f4f5;
  --sel-bg: #3f3f46;
  --sel-fg: #f4f4f5;
  --accent-purple: #a855f7;
  --green-soft-bg: rgba(74, 222, 128, 0.12);
  --green-text: #86efac;
  --green-soft-border: rgba(74, 222, 128, 0.3);
  --blue-soft-bg: rgba(96, 165, 250, 0.12);
  --blue-text: #93c5fd;
  --purple-soft-bg: rgba(192, 132, 252, 0.12);
  --cat-tools-bg: rgba(200, 162, 137, 0.12);
  --cat-tools-fg: #c8a289;
  --cat-design-bg: rgba(144, 172, 193, 0.12);
  --cat-design-fg: #90acc1;
  --cat-learn-bg: rgba(146, 191, 162, 0.12);
  --cat-learn-fg: #92bfa2;
  --float-bg: rgba(36, 32, 30, 0.9);
  --spot-scrim: rgba(0, 0, 0, 0.55);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--hx-sans);
  background: var(--bg);
  color: var(--text);
  font-size: var(--hx-t14);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}

/* ---------- 亮暗模式切换（右上角图标按钮，样式与「功能引导」入口一致） ---------- */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  background: var(--surface); color: var(--text-2);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); background: var(--icon-bg); }
.theme-toggle svg { width: var(--hx-t15); height: var(--hx-t15); }
/* 侧栏底部：外观设置与「登录」并排（两者都是站点级设置）。
   按钮取 34×34 正方，与 .wb-account 同高；登录键吃掉剩余宽度。 */
.side-account { display: flex; align-items: center; gap: 8px; }
.side-account .theme-toggle { width: 34px; height: 34px; padding: 0; gap: 0; }
.side-account .wb-account { flex: 1 1 auto; justify-content: center; min-width: 0; }
/* 窄屏（侧栏横置）：按钮不抢横向空间，保持紧凑 */
@media (max-width: 768px) {
  .side-account { flex: none; gap: 6px; }
  .side-account .wb-account { flex: none; }
}

::selection { background: var(--sel-bg); color: var(--sel-fg); }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input { font: inherit; color: inherit; }
svg { display: block; }
/* 等宽只给代码：pre/code/kbd/samp 统一一个栈，避免某个 pre 漏写字体族时
   落到 UA 默认的 Courier New（Windows 上跟 ui-monospace 差别非常明显）。 */
pre, code, kbd, samp { font-family: var(--hx-mono); }
code {
  background: var(--icon-bg);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: var(--hx-t12);
  color: var(--text-2);
}

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; width: 100%; }

/* ---------- 双栏壳 ---------- */
.app { display: flex; min-height: 100vh; }
/* ⚠️ .main 是工具视图的唯一容器（旧侧栏 2026-10-24 已删）：flex:1 撑满剩余宽度，
   min-width:0 防内部宽内容（图标网格/画布）把 flex 轨道顶出视口 */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* ---------- 侧边导航 ---------- */

/* ---------- 通用小按钮 ---------- */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--ctl-h); padding: 0 13px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  font-size: var(--hx-t13); color: var(--text-2); background: var(--surface);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn-ghost:hover { color: var(--text); border-color: var(--border-strong); }

/* ---------- 工具页头部（标题 + 右侧返回键） ----------
   结构约定：.tb-head 第一个子元素是标题（吃掉剩余宽度），右侧控件簇贴容器右缘。
   ⚠️ 不要用 justify-content: space-between：会把中间项居中，标题越短离返回越远。
   2026-10-21：外观设置入口已收敛到侧栏底部（与登录并排），工具页头部只留「返回」，
   这里不再有 JS 注入的第三个按钮。 */
.tb-head {
  display: flex; align-items: flex-start; gap: 8px;   /* 与各页控件簇间距一致 */
  margin: 0 0 18px;               /* 标题与下方功能模块统一 18px 间距 */
}
.tb-head > :first-child { flex: 1 1 auto; min-width: 0; }
.tb-head h1 { margin: 0; font-size: var(--hx-t20); font-weight: 700; letter-spacing: 0.2px; }
.tb-head .btn-back { flex: none; height: var(--ctl-h); }
.btn-back {
  display: inline-flex; align-items: center; gap: 5px; flex: none;
  height: var(--ctl-h); padding: 0 11px;
  border: 1px solid var(--border); border-radius: var(--r-btn);
  font-size: var(--hx-t13); font-weight: 500; color: var(--text-2); background: var(--surface);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn-back:hover { color: var(--text); border-color: var(--border-strong); }
.btn-back svg { width: var(--hx-t14); height: var(--hx-t14); }
/* 返回键文案会动态带来源工具名（「返回 PDF 压缩」）：给文字加宽度上限 + 省略号，
   防止某个超长工具名把头部顶宽（窄屏曾因此溢出 48px） */
.btn-back span {
  min-width: 0; max-width: 10em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- Toast ----------
     全站唯一的操作提示：视口顶部居中（不是底部），浅色底 + 深色字。
     图标用 ::before 画（不走 DOM 子节点），保证 textContent 只有纯文案。
     语义分级靠「浅色底 + 同色系深字 + 描边色」表达，不用实心底。
     动效：入场用 slide 曲线过冲滑入（越线 2-3px 再收回，0.45s），
     退场走 0.15s 快出——非对称时序，离开不拖沓（Kinetics toast overshoot）。 */
.toast {
  position: fixed; left: 50%; top: 18px; z-index: 210;
  display: flex; align-items: center; gap: 8px;
  transform: translate(-50%, -12px);
  max-width: min(92vw, 460px);
  padding: 9px 15px 9px 12px; border-radius: var(--r-btn);
  font-size: var(--hx-t13); line-height: 1.5; text-align: left;
  color: #2b2d31;
  background: #eef0f2;
  border: 1px solid rgba(43, 45, 49, 0.14);
  box-shadow: 0 8px 22px rgba(24, 24, 27, 0.12);
  opacity: 0; pointer-events: none;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
}
.toast::before {
  content: ""; flex: none; width: 16px; height: 16px;
  border-radius: 50%; background: rgba(43, 45, 49, 0.08);
  background-repeat: no-repeat; background-position: center;
}
.toast.show {
  opacity: 1; transform: translate(-50%, 0);
  transition: opacity 0.2s var(--ease), transform 0.45s var(--hx-slide, cubic-bezier(0.18, 1.25, 0.4, 1));
}
.toast.info { background: #eef0f2; color: #2b2d31; border-color: rgba(43, 45, 49, 0.16); }
.toast.ok   { background: #e4f2e9; color: #1a6540; border-color: rgba(26, 101, 64, 0.24); }
.toast.warn { background: #fbeed6; color: #7a4806; border-color: rgba(122, 72, 6, 0.26); }
.toast.err  { background: #f9e5e2; color: #97271d; border-color: rgba(151, 39, 29, 0.24); }
/* 四种字形：i / √ / ! / ×，用遮罩画免掉外部图标字体（描边取同档深字色） */
.toast.info::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.4v.1M8 7v4.6' stroke='%232b2d31' stroke-width='1.7' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='8' r='6.4' fill='none' stroke='%232b2d31' stroke-opacity='.6' stroke-width='1.2'/%3E%3C/svg%3E"); }
.toast.ok::before   { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 8.3l2.3 2.3 4.5-4.8' fill='none' stroke='%231a6540' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.toast.warn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.6v4.2M8 11.3v.1' stroke='%237a4806' stroke-width='1.9' stroke-linecap='round'/%3E%3C/svg%3E"); }
.toast.err::before  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.3 5.3l5.4 5.4M10.7 5.3l-5.4 5.4' stroke='%2397271d' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
/* 暗色：底色整体压暗一档（仍是浅底深字），避免在深背景上刺眼 */
[data-theme="dark"] .toast.info { background: #e2e4e7; color: #24262a; border-color: rgba(255, 255, 255, 0.22); }
[data-theme="dark"] .toast.ok   { background: #d9eade; color: #14532f; border-color: rgba(20, 83, 47, 0.30); }
[data-theme="dark"] .toast.warn { background: #f2e3c8; color: #663d05; border-color: rgba(102, 61, 5, 0.32); }
[data-theme="dark"] .toast.err  { background: #f0dad6; color: #8a221a; border-color: rgba(138, 34, 26, 0.30); }
@media (max-width: 640px) {
  .toast { top: 10px; max-width: calc(100vw - 24px); }
}

/* ---------- 功能预览层（当前页内 iframe 承载） ---------- */
/* 令牌统一取 helix.css 弹层套：原来是自己一套最浅的 rgba(24,24,27,.34)、
   无 blur、面板带 48px 大投影（皮肤已定"零投影"）。 */
.viewer-mask {
  position: fixed; inset: 0; z-index: var(--hx-z-viewer, 90);
  background: var(--hx-mask, rgba(24, 24, 27, 0.34));
  -webkit-backdrop-filter: blur(var(--hx-mask-blur, 3px));
          backdrop-filter: blur(var(--hx-mask-blur, 3px));
  display: flex; align-items: center; justify-content: center;
  padding: 24px; animation: hxFade 0.18s var(--ease) both;
}
.viewer-close {
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--r-btn); color: var(--text-3);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.viewer-close:hover { background: var(--icon-bg); color: var(--text); }
.viewer-close svg { width: var(--hx-t15); height: var(--hx-t15); }
.viewer {
  width: 100%; max-width: 1120px; height: 86vh;
  background: var(--hx-dlg-bg, var(--surface));
  border: 1px solid var(--hx-dlg-line, transparent);
  border-radius: var(--hx-dlg-radius, var(--r-card));
  box-shadow: var(--hx-dlg-shadow, 0 16px 48px rgba(24, 24, 27, 0.18));
  display: flex; flex-direction: column; overflow: hidden;
  animation: hxPopIn 0.34s var(--hx-spring) both;
}
.viewer-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--border); flex: none;
}
.viewer-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--icon-bg); color: var(--icon-fg); display: grid; place-items: center; flex: none; }
.viewer-icon svg { width: var(--hx-t18); height: var(--hx-t18); }
.viewer-icon img { width: 22px; height: 22px; object-fit: contain; }
.viewer-titles { min-width: 0; flex: 1; }
.viewer-head h2 { font-size: var(--hx-t15); font-weight: 700; }
.viewer-sub { display: block; font-size: var(--hx-t12); color: var(--text-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.viewer-body { flex: 1; min-height: 0; background: var(--bg); }
.viewer-body iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--surface); }

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
  .viewer { height: 92vh; }
}

/* ---------- 动效降级 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   全局加载指示器（.busybar）
   大量文件导入/处理时，界面本身没有单次长阻塞，但小任务累积很久、
   期间毫无反馈＝看起来「卡死」。这里用「旋转圆环 + 实时进度文字」持续告知。
   四个工具共用（全局类，不绑定任何 view id），由 window.__ui.busy() 驱动。
   ============================================================ */
.busybar {
  display: none;
  align-items: center;
  gap: 10px;
  margin: 12px 0;
  padding: 9px 13px;
  border: 1px solid var(--accent-soft-border);
  border-radius: 8px;
  background: var(--accent-soft-bg);
  color: var(--accent-text);   /* 文字级取深一档：亮色 #82583d 在赭石软底上 5.4:1；直接用 --accent #9e6b4a 只有 4.5:1，卡在 AA 线上 */
  font-size: var(--hx-t12-5);
  line-height: 1.4;
}
.busybar.on { display: flex; }
.busybar .bb-spin {
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  opacity: 0.85;
  animation: bb-spin 0.72s linear infinite;
}
@keyframes bb-spin { to { transform: rotate(360deg); } }
.busybar .bb-text { flex: 1; min-width: 0; }
/* 进度计数：等宽数字，进度跳动时不抖动 */
.busybar .bb-num {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-2);
}
/* 细进度条（贴在指示器底部，长任务给出可视化进度） */
.busybar .bb-track {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent-soft-bg);
  border-radius: 0 0 8px 8px;
  overflow: hidden;
}
.busybar { position: relative; overflow: hidden; }
.busybar .bb-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  opacity: 0.55;
  transition: width 0.2s linear;
}
.busybar.no-track .bb-track { display: none; }
/* 窄屏：文字换行，数字不挤 */
@media (max-width: 560px) {
  .busybar { flex-wrap: wrap; }
  .busybar .bb-num { width: 100%; order: 3; }
}

/* ============================================================
   字号阶梯：6 档 × 22 级，全部整数 px
   为什么不用 calc(px * 系数)：16px 档的系数是 16/14 = 1.142857…，
   12.5px 会乘出 14.2857px —— DevTools 里一串小数（用户 2026-10-27 指出）。
   这里把每档写成定值表，档位由 helix-home.js 切 html[data-fs]，任一档都是整数。
   ⚠️ 新增字号层级必须补全 6 档；本块必须放在 :root 之外，别塞进变量块里。
   ============================================================ */
html {
  --hx-t7: 7px;
  --hx-t8: 8px;
  --hx-t8-5: 9px;
  --hx-t9: 9px;
  --hx-t9-5: 10px;
  --hx-t10: 10px;
  --hx-t10-5: 11px;
  --hx-t11: 11px;
  --hx-t11-5: 12px;
  --hx-t12: 12px;
  --hx-t12-5: 13px;
  --hx-t13: 13px;
  --hx-t13-5: 14px;
  --hx-t14: 14px;
  --hx-t14-5: 15px;
  --hx-t15: 15px;
  --hx-t15-5: 16px;
  --hx-t16: 16px;
  --hx-t17: 17px;
  --hx-t18: 18px;
  --hx-t20: 20px;
  --hx-t21: 21px;
  --hx-t19: 19px;
  --hx-t22: 22px;
  --hx-t24: 24px;
  --hx-t26: 26px;
}
html[data-fs="12"] {
  --hx-t7: 6px;
  --hx-t8: 7px;
  --hx-t8-5: 7px;
  --hx-t9: 8px;
  --hx-t9-5: 8px;
  --hx-t10: 9px;
  --hx-t10-5: 9px;
  --hx-t11: 9px;
  --hx-t11-5: 10px;
  --hx-t12: 10px;
  --hx-t12-5: 11px;
  --hx-t13: 11px;
  --hx-t13-5: 12px;
  --hx-t14: 12px;
  --hx-t14-5: 12px;
  --hx-t15: 13px;
  --hx-t15-5: 13px;
  --hx-t16: 14px;
  --hx-t17: 15px;
  --hx-t18: 15px;
  --hx-t20: 17px;
  --hx-t21: 18px;
  --hx-t19: 16px;
  --hx-t22: 19px;
  --hx-t24: 21px;
  --hx-t26: 22px;
}
html[data-fs="16"] {
  --hx-t7: 8px;
  --hx-t8: 9px;
  --hx-t8-5: 10px;
  --hx-t9: 10px;
  --hx-t9-5: 11px;
  --hx-t10: 11px;
  --hx-t10-5: 12px;
  --hx-t11: 13px;
  --hx-t11-5: 13px;
  --hx-t12: 14px;
  --hx-t12-5: 14px;
  --hx-t13: 15px;
  --hx-t13-5: 15px;
  --hx-t14: 16px;
  --hx-t14-5: 17px;
  --hx-t15: 17px;
  --hx-t15-5: 18px;
  --hx-t16: 18px;
  --hx-t17: 19px;
  --hx-t18: 21px;
  --hx-t20: 23px;
  --hx-t21: 24px;
  --hx-t19: 22px;
  --hx-t22: 25px;
  --hx-t24: 27px;
  --hx-t26: 30px;
}
html[data-fs="18"] {
  --hx-t7: 9px;
  --hx-t8: 10px;
  --hx-t8-5: 11px;
  --hx-t9: 12px;
  --hx-t9-5: 12px;
  --hx-t10: 13px;
  --hx-t10-5: 14px;
  --hx-t11: 14px;
  --hx-t11-5: 15px;
  --hx-t12: 15px;
  --hx-t12-5: 16px;
  --hx-t13: 17px;
  --hx-t13-5: 17px;
  --hx-t14: 18px;
  --hx-t14-5: 19px;
  --hx-t15: 19px;
  --hx-t15-5: 20px;
  --hx-t16: 21px;
  --hx-t17: 22px;
  --hx-t18: 23px;
  --hx-t20: 26px;
  --hx-t21: 27px;
  --hx-t19: 24px;
  --hx-t22: 28px;
  --hx-t24: 31px;
  --hx-t26: 33px;
}
html[data-fs="20"] {
  --hx-t7: 10px;
  --hx-t8: 11px;
  --hx-t8-5: 12px;
  --hx-t9: 13px;
  --hx-t9-5: 14px;
  --hx-t10: 14px;
  --hx-t10-5: 15px;
  --hx-t11: 16px;
  --hx-t11-5: 16px;
  --hx-t12: 17px;
  --hx-t12-5: 18px;
  --hx-t13: 19px;
  --hx-t13-5: 19px;
  --hx-t14: 20px;
  --hx-t14-5: 21px;
  --hx-t15: 21px;
  --hx-t15-5: 22px;
  --hx-t16: 23px;
  --hx-t17: 24px;
  --hx-t18: 26px;
  --hx-t20: 29px;
  --hx-t21: 30px;
  --hx-t19: 27px;
  --hx-t22: 31px;
  --hx-t24: 34px;
  --hx-t26: 37px;
}
html[data-fs="22"] {
  --hx-t7: 11px;
  --hx-t8: 13px;
  --hx-t8-5: 13px;
  --hx-t9: 14px;
  --hx-t9-5: 15px;
  --hx-t10: 16px;
  --hx-t10-5: 17px;
  --hx-t11: 17px;
  --hx-t11-5: 18px;
  --hx-t12: 19px;
  --hx-t12-5: 20px;
  --hx-t13: 20px;
  --hx-t13-5: 21px;
  --hx-t14: 22px;
  --hx-t14-5: 23px;
  --hx-t15: 24px;
  --hx-t15-5: 24px;
  --hx-t16: 25px;
  --hx-t17: 27px;
  --hx-t18: 28px;
  --hx-t20: 31px;
  --hx-t21: 33px;
  --hx-t19: 30px;
  --hx-t22: 35px;
  --hx-t24: 38px;
  --hx-t26: 41px;
}