/*
 * p-certs.css — 考试认证页 /solo/certs/（v0.26 第 4 段，2026-10-29）。页面由 tools/certgen.py 从 src/data/certs.json 生成，交互在 certs.js，都只这一页加载。
 * 照认证卡样稿 ~/claude-workbench/outputs/2026-10-28-证书插画画风/index.html（8841）的样式搬过来，类名都加了 ct- 前缀（站里有 .card、.tags 一类公共类），
 * 颜色换成 ui.css 的变量（纸、墨、朱，昼夜两套）。Leon 定下的几条：
 *   - 卡面纯文字，不画插画；整张卡不闪（10-29「证书的闪卡效果可以去掉了，闪烁保留在卡片稀有度那里」），只有右上角的稀有度标记闪：
 *     稀有一道银光扫过，史诗金光加一颗星芒，传说镭射色的光扫过加星芒；10-29 起只在悬停时闪（下面「稀有度标记」一节）。
 *     稀有度四档 10-29 改名（Leon「四个稀有度改为，普通、稀有、史诗、传说」）：数据里的 c / u / r / m 不变，原来叫普通、非普通、稀有、秘稀。
 *     史诗的烫金字、烫金框，传说的压纹照留，不跟鼠标动。
 *   - 宽屏卡 5:5.7，手机（599 以下）一列横卡 7:4.1（10-29「卡片的高度可以再低一点」）。
 *   - 页面上不用 mix-blend-mode（会让页头毛玻璃失效）：闪光、镭射、压纹都是叠层渐变。
 * 和样稿不同的几处：
 *   - 标记的扫光用 transform 平移一条渐变（样稿是动 background-position）：页面上同时有一两百枚标记在闪，transform 不用每帧重画；
 *     标记里多一个 <i> 把扫光裁成菱形，星芒在标记自己的 ::before 上，不被裁。
 *   - 卡面的底和压纹框是卡面自己的 ::before、::after（样稿是两个空 div）；叠在下面的两张只有底、纹样、稀有度的框、体系名和标记（扇开时标记从上沿露出来），别的字被上面一张挡住，不写。
 *   - 卡上的字不接指针（pointer-events: none），点哪里都是底下那颗「点开」按钮，只有 ↗ 接指针（样稿里字压在按钮上面，↗ 点不到）。
 *   - 键盘焦点：卡面裁掉了溢出，按钮自己的焦点框画不出来，改成整张卡面外面一圈（同全站的焦点框）。
 *   - cqw（按卡宽算的单位）不认的老 WebView 用一个近似的 px（卡宽 218px 上下）。
 */

/* ---------- 页头：只有标题（手机上右边一颗「筛选」） ---------- */
.ct-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(16px, 2vw, 24px); }
.ct-head h1 { color: var(--ink); font-size: clamp(34px, 3.6vw, 52px); font-weight: var(--w-display); letter-spacing: var(--track-display); line-height: 1.15; }

/* ---------- 左栏筛选（照配方页 /lib/ 左边目录的样子：p-lib.css 的 .lp-toc）：五组，组内单选、组间同时满足，组名是小标，每组第一项「全部」 ----------
   10-29 Leon「证书筛选器也应该有卡片的运动，不要直接显隐，不好看。筛选器也可以加上一些别的类别？如果筛选内容比较多，是否可以把筛选器放到左侧？」
   宽屏贴着页头往下走（窗口矮放不下时自己滚），选中的那项加粗、前面一粒朱色小菱形；稀有度每项前面一枚和卡上同色的小菱形（不闪）。
   799 以下收成页头的「筛选」，点开从下往上弹出（下面「手机」一节）。没有脚本时不出左栏，卡片全部平铺 */
.ct-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; padding-bottom: clamp(72px, 8vw, 120px); }
html:not(.js) .ct-body { display: block; }
html:not(.js) .ct-toc, html:not(.js) .ct-fbtn { display: none; }
.ct-main { position: relative; isolation: isolate; min-width: 0; }
html.ct-pending .ct-main { visibility: hidden; }   /* 网址带筛选参数：certs.js 筛好再出来 */
.ct-toc { position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); max-height: calc(100svh - var(--header-h) - 40px); margin: 20px -4px 0; padding: 4px; overflow-y: auto; overscroll-behavior: contain; }   /* 不写 scrollbar-width：Chrome 121 起写了它就不认 ::-webkit-scrollbar，ui.css 的墨色细条出不来 */
/* 左栏还能往上、往下滚时那一头淡出一点（同调试台滚动区的做法：p-tokensim.css 的 .is-scrolled、.is-more）；高度由脚本跟着视口里露出的那一段定 */
.ct-toc.is-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.ct-toc.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
.ct-toc.is-scrolled.is-more { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - 28px), transparent); }
.ct-toc-top { display: none; }
.ct-fg { margin: 0 0 16px; }   /* 组和组、项和项的间距比配方页收一点：五组 28 项，1440×900 下差不多一屏 */
.ct-fg:last-child { margin-bottom: 0; }
.ct-fg-h { margin: 0 0 3px; padding-left: 14px; color: var(--muted); font-size: 12.5px; letter-spacing: .06em; }
.ct-fg ul { margin: 0; padding: 0; list-style: none; }
.ct-fg button { position: relative; display: flex; align-items: center; width: 100%; padding: 4px 10px 4px 14px; border: 0; border-radius: var(--r-md); background: none; color: var(--ink-soft); font: inherit; font-size: 14px; line-height: 1.4; text-align: left; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
.ct-fg button::before { content: ""; position: absolute; left: 3px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px; border-radius: 1px; background: var(--accent); rotate: 45deg; scale: 0; transition: scale .2s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ct-fg button:hover { color: var(--ink); background: var(--current); } }
.ct-fg button[aria-pressed="true"] { color: var(--ink); font-weight: 650; }
.ct-fg button[aria-pressed="true"]::before { scale: 1; }
/* 选中的是「全部」：中性的样子（墨色小菱形）；选中具体某一项才用朱色（10-29 主会话：五个「全部」都是朱色太多） */
.ct-fg button[data-v=""][aria-pressed="true"]::before { background: var(--ink-soft); }
/* 选了会筛空的那一项：变灰、点不了 */
.ct-fg button[aria-disabled="true"] { color: var(--muted); opacity: .42; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .ct-fg button[aria-disabled="true"]:hover { color: var(--muted); background: none; } }
.ct-fmk { flex: none; width: 8px; height: 8px; margin: 0 9px 0 1px; border-radius: 1.5px; background: var(--m); rotate: 45deg; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .75), 0 1px 2px rgb(0 0 0 / .3); }   /* 同卡上的标记：白边一圈，夜里墨色那枚也看得见 */
.ct-fbtn { display: none; }
.ct-ghosts { position: absolute; inset: 0; z-index: -1; pointer-events: none; }   /* 筛掉的格子淡出时的影子：压在留下的格子下面，滑过去的卡不被它盖住 */
.ct-ghosts > .ct-cell { position: absolute; margin: 0; }

/* ---------- 格子：一格放一叠（同一体系）或一张单卡；点一叠在浮层里排开（下面「浮层」一节） ---------- */
.ct-body { padding-bottom: clamp(72px, 8vw, 120px); }
.ct-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 28px 22px; padding-top: 24px; }   /* 上面留 24px：第一行叠在下面的卡往上露边。宽屏左栏占了位置，一行 4 张 */
html.js .ct-group { display: none; }   /* 有脚本时只出叠（第一帧就是）；组里的卡排开时挪进浮层，关了再挪回来 */
html:not(.js) .ct-cell.is-stack { display: none; }   /* 没有脚本：不叠，每个体系直接排开 */

.ct-stack { position: relative; display: block; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; scroll-margin: calc(var(--header-h) + 26px) 0 40px; }
.ct-stack:focus-visible { outline-offset: 6px; }
/* 叠在下面的卡只往上露边、露在行距里（缩一点、上移），不往左右伸：10-29 Leon「多个证叠在一起下面的卡会遮住右边单张的，不太合理，
   第一张始终应该可见，不应该被挡住」。样稿宽屏是往右上斜着露、还转一点，会越过格子压到右边那张上；手机原来就是这样往上露。
   每格自成一层（isolation），叠里的 z-index 只在格子里比；指针下的那一格浮到别的格子上面（转动的幅度放得下，盖不到别人） */
.ct-cell { position: relative; isolation: isolate; }
.ct-cell:hover { z-index: 1; }
/* 屏幕外的格子不排版、不画（content-visibility: auto，10-29 性能那一轮）：它会把格子里的东西裁在格子的内边距框里，
   所以格子上下左右各留一圈透明的内边距（上 22px 给叠在下面的卡往上露边，下 26px、左右 10px 给影子），再用负外边距收回去，排法不变；
   格子本身不接指针（留的那一圈不挡旁边的卡），里面的叠和卡照常接。屏幕外时的高度先按 --ct-ch（脚本量一张卡的高写上），排过一次以后浏览器记住 */
.ct-grid > .ct-cell { content-visibility: auto; contain-intrinsic-size: auto var(--ct-ch, 300px); padding: 22px 10px 26px; margin: -22px -10px -26px; pointer-events: none; }
.ct-grid > .ct-cell > * { pointer-events: auto; }
.ct-stack > .ct-sk { position: absolute; inset: 0; transform-origin: 50% 0; transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.ct-stack > .ct-sk-1 { position: relative; z-index: 3; }
.ct-stack > .ct-sk-2 { z-index: 2; transform: translateY(-7px) scale(.955); }
.ct-stack > .ct-sk-3 { z-index: 1; transform: translateY(-13px) scale(.91); }
.ct-sk:not(.ct-sk-1) .ct-face { filter: brightness(.94); box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .12), inset 0 0 0 1px var(--c-edge); }
@media (hover: hover) {
  .ct-stack:hover > .ct-sk-2 { transform: translateY(-10px) scale(.955); }   /* 悬停时往上多露一点，最多 19px，行距 28px 放得下 */
  .ct-stack:hover > .ct-sk-3 { transform: translateY(-19px) scale(.91); }
}
@media (hover: none) { .ct-stack:active .ct-sk-1 .ct-face { transform: scale(.975); } }

.ct-group { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; gap: 22px; position: relative; padding: 10px 0 4px; }
@supports not (grid-template-columns: subgrid) { .ct-group { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); } }
.ct-group::before { content: ""; position: absolute; inset: -6px -12px -10px; border: 1px solid var(--line); border-radius: 20px; background: rgb(var(--shadow-rgb) / .035); pointer-events: none; }
:root[data-theme="dark"] .ct-group::before { background: rgb(255 255 255 / .025); }
/* 组：没有脚本时每个体系一组、直接平铺；头上是叠的 note 和「体系官网 ↗」 */
.ct-ghead { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ct-ghead:not(:has(> :not(.sr-only))) { display: none; }
.ct-gnote { color: var(--muted); font-size: 13px; line-height: 1.5; }
.ct-gurl { color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.ct-gurl:hover { color: var(--ink); text-decoration-color: currentColor; }
.ct-cell.is-out > .ct-stack { visibility: hidden; }   /* 这一叠在浮层里排开着：格子先空着 */

/* ---------- 卡片 ---------- */
.ct-card { position: relative; container-type: inline-size; }   /* 卡宽当单位：卡面上的尺寸都按它算，放大成大卡时等比 */
.ct-card.is-lifted { visibility: hidden; }
.ct-face {
  --u: 2.18px;   /* 不认 cqw 的老 WebView：按 218px 宽的卡算 */
  position: relative; aspect-ratio: 5 / 5.7; overflow: hidden; border-radius: calc(var(--u) * 5.2);
  background: var(--c-bg); color: var(--c-ink);
  box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .10), 0 8px 22px -10px rgb(var(--shadow-rgb) / .35), inset 0 0 0 1px var(--c-edge);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
  contain: layout style;   /* 卡面里的排版、计数不往外传 */
}
@supports (width: 1cqw) { .ct-face { --u: 1cqw; } }
/* 悬停：总览（页面上的叠和单卡、排开那一层里的卡）只平着浮起一点、影子加深，不立体转动（10-29 Leon「去掉certs总览时的3D效果，只在单张卡浮层时再搞3D」）；
   大卡才跟着鼠标微微转（certs.js 直接写它的 transform） */
@media (hover: hover) and (pointer: fine) {
  .ct-cell > .ct-card:hover > .ct-face, .ct-stack:hover > .ct-sk-1 > .ct-face, .ct-spread > .ct-card:hover > .ct-face {
    transform: translateY(-3px);
    box-shadow: 0 2px 4px rgb(var(--shadow-rgb) / .12), 0 12px 24px -12px rgb(var(--shadow-rgb) / .45), inset 0 0 0 1px var(--c-edge);
  }
}
.ct-big-face .ct-face.is-hover { will-change: transform; transition: transform .12s ease-out, box-shadow .3s; }
.ct-face::before, .ct-face::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.ct-face::before { background: var(--c-pat), var(--c-bg); }   /* 底色和纹样 */
.ct-face::after { z-index: 0; opacity: 0; }                     /* 史诗的烫金框、传说的压纹（下面「稀有度」一节） */
.ct-glyphs { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; }
.ct-hit { position: absolute; inset: 0; z-index: 2; width: 100%; border-radius: inherit; background: transparent; cursor: pointer; }
.ct-hit:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring); }
@supports selector(:has(a)) {
  .ct-hit:focus-visible { box-shadow: none; }
  .ct-face:has(> .ct-hit:focus-visible) { outline: var(--focus-w) solid var(--focus-ring); outline-offset: var(--focus-off); }
}
html:not(.js) .ct-hit { display: none; }
.ct-in {
  position: relative; z-index: 3; display: flex; flex-direction: column; height: 100%;
  padding: calc(var(--u) * 7) calc(var(--u) * 7) calc(var(--u) * 6.2);
  line-height: 1.55; pointer-events: none;
}
.ct-top { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: calc(var(--u) * 3); }
.ct-fam { overflow: hidden; color: var(--c-ink2); font-size: calc(var(--u) * 4.6); font-weight: 600; letter-spacing: .1em; white-space: nowrap; text-overflow: ellipsis; }
/* 认证名最多三行、小字最多两行，再长就省略（真实规模的数据里少数几张又长又有英文全名，不截会把底下的发证方挤出卡面；全名在「点开」按钮的读屏名里） */
.ct-t { display: -webkit-box; flex-shrink: 0; overflow: hidden; margin: calc(var(--u) * 4.2) 0 0; color: inherit; font-size: calc(var(--u) * 8.6); font-weight: 700; letter-spacing: .01em; line-height: 1.16; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ct-sub { display: -webkit-box; flex-shrink: 0; overflow: hidden; margin: calc(var(--u) * 2.2) 0 0; color: var(--c-ink2); font-size: calc(var(--u) * 5); line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ct-lv { display: flex; flex-shrink: 0; align-items: center; gap: calc(var(--u) * 2.6); margin: calc(var(--u) * 4.2) 0 0; font-size: calc(var(--u) * 5.3); font-weight: 600; }
.ct-pips { display: inline-flex; gap: calc(var(--u) * 1.1); }
.ct-pips i { width: calc(var(--u) * 4.6); height: calc(var(--u) * 1.6); border-radius: 99px; background: var(--c-ink); opacity: .22; }
.ct-pips i.on { background: var(--c-acc); opacity: 1; }
/* 真数据里有三十来张是三行的认证名 + 小字 + 两行小签：卡面的上下间距比样稿收了一点（认证名上 6u→4.2u、小签上 3u→1.4u、底栏上 4u→2.6u），
   都放得下；认证名、小字、级别、底栏不许被压，万一还放不下，只裁小签那一块（原来是认证名被压掉半行） */
.ct-tags { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 1.6); min-height: 0; margin-top: auto; padding-top: calc(var(--u) * 1.4); overflow: hidden; }
.ct-tags li { padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border: 1px solid var(--c-line); border-radius: 99px; color: var(--c-ink2); font-size: calc(var(--u) * 4.5); line-height: 1.25; white-space: nowrap; }
.ct-tags li.nat { border-color: var(--c-line2); color: var(--c-ink); }
/* 状态小签（即将推出、Beta、个人暂不开放、标准未发布……）：全站一种样子，朱底白字（昼 5.8:1、夜 5.1:1）；朱漆底那套皮上改成纸底朱字（5.8:1）。
   10-29 主会话：原来跟着各套皮变色（黄、红、绿），同是「即将推出」几种颜色，看着花 */
.ct-tags li.st { border-color: transparent; background: var(--accent); color: #fff; font-weight: 600; }
.s-zhu .ct-tags li.st { background: #f8efe2; color: #a8342a; }
.ct-bot { display: flex; flex-shrink: 0; align-items: flex-end; justify-content: space-between; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 2.6); padding-top: calc(var(--u) * 3); border-top: 1px solid var(--c-line); }
.ct-iss { display: -webkit-box; overflow: hidden; color: var(--c-ink2); font-size: calc(var(--u) * 4.4); line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ct-go {
  flex: none; display: grid; place-items: center; width: calc(var(--u) * 9); height: calc(var(--u) * 9);
  border: 1px solid var(--c-line2); border-radius: 50%; color: var(--c-ink); font-size: calc(var(--u) * 5); line-height: 1;
  pointer-events: auto; transition: background-color .2s;
}
.ct-go:hover { background: var(--c-line); }
.ct-go:focus-visible { outline-color: var(--c-ink); outline-offset: 2px; }   /* 焦点圈压在卡面上：用这套皮的字色（全站的 --focus-ring 是墨色，朱漆、玄色底上看不出） */
@media (hover: none) {
  .ct-face { transition: transform .14s ease-out; }
  .ct-card:active > .ct-face { transform: scale(.975); }
}

/* ---------- 稀有度标记：一枚小菱形，只看颜色（普通墨、稀有银、史诗金、传说朱） ---------- */
[data-rar="c"] { --m: linear-gradient(135deg, #3c4250, #12161f 60%); }
[data-rar="u"] { --m: linear-gradient(135deg, #ffffff, #a9b2bc 42%, #eef1f4 58%, #868f9a); }
[data-rar="r"] { --m: linear-gradient(135deg, #fff1c2, #d1a049 42%, #f6dc94 58%, #8f6526); }
[data-rar="m"] { --m: linear-gradient(135deg, #ff9f8a, #c2412f 45%, #e8604a 60%, #8a2519); }
.ct-mk {
  position: relative; flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: calc(var(--u) * 1);
  background: var(--m); transform: rotate(45deg);
  box-shadow: 0 0 0 calc(var(--u) * .5) rgb(255 255 255 / .75), 0 1px 3px rgb(0 0 0 / .35), inset 0 0 0 1px rgb(0 0 0 / .18);
}
.ct-mk > i { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* 扫光：一条三倍宽的渐变，从左外面平移到右外面；稀有白光，传说镭射色。10-29 Leon「闪光也改成只在hover时在跑吧」：
   平时都不闪（静止时页面上没有在跑的动画），标记停在静止的样子；鼠标移到一张卡（或一叠最上面那张）上，certs.js 给它加 .is-flash，
   一轮 2.6 秒：前面扫光、星芒，后一半停着；移开以后等这一遍走完再摘掉（停着的样子和动画的起点一样，不跳）。
   浮层里的大卡鼠标在上面时闪，触屏上打开大卡就闪；减少动态效果下不闪（fyro.css 统一去掉动画）。原来页面上四百多段一直在跑 */
.ct-card:is([data-rar="u"], [data-rar="r"], [data-rar="m"]) .ct-mk > i::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 300%;
  background: linear-gradient(90deg, transparent 34%, rgb(255 255 255 / .95) 50%, transparent 66%);
  transform: translateX(-66.667%);
}
.ct-card.is-flash:is([data-rar="u"], [data-rar="r"], [data-rar="m"]) .ct-mk > i::after { animation: ct-sweep 2.6s ease-in-out infinite; }
.ct-card[data-rar="m"] .ct-mk > i::after { background: linear-gradient(90deg, transparent 26%, rgb(255 214 150 / .95) 40%, rgb(176 242 206 / .95) 50%, rgb(156 204 255 / .95) 60%, transparent 74%); }
/* 星芒：史诗、传说在扫光快结束时亮一下 */
.ct-card:is([data-rar="r"], [data-rar="m"]) .ct-mk::before {
  content: ""; position: absolute; z-index: 1; left: 62%; top: -78%; width: 115%; height: 115%;
  background: #fff; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0; transform: scale(0);
}
.ct-card.is-flash:is([data-rar="r"], [data-rar="m"]) .ct-mk::before { animation: ct-twinkle 2.6s ease-in-out infinite; }
.ct-card[data-rar="r"] .ct-mk::before { background: #fff3c8; }
@keyframes ct-sweep { 0%, 6% { transform: translateX(-66.667%); } 36%, 100% { transform: translateX(0); } }   /* 扫到右外面就停着（两头都是透明的那一截，看不出跳） */
@keyframes ct-twinkle { 0%, 28% { transform: scale(0) rotate(0deg); opacity: 0; } 38% { transform: scale(1) rotate(45deg); opacity: 1; } 52%, 100% { transform: scale(0) rotate(90deg); opacity: 0; } }

/* 史诗：烫金字 + 一道烫金内框（不闪、不跟鼠标动） */
.ct-card[data-rar="r"] > .ct-face::after {
  opacity: 1; inset: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3.4);
  border: calc(var(--u) * .55) solid transparent;
  background: linear-gradient(120deg, var(--gold-1), var(--gold-2) 30%, var(--gold-3) 48%, var(--gold-2) 62%, var(--gold-1)) border-box;
  background-size: 220% 220%; background-position: 40% 40%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.ct-card[data-rar="r"] .ct-t {
  background: linear-gradient(100deg, var(--gold-1) 0%, var(--gold-2) 34%, var(--gold-3) 46%, var(--gold-2) 58%, var(--gold-1) 86%);
  background-size: 260% 100%; background-position: 30% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 var(--c-foil-shadow));
}
/* 传说：压纹（斜格压纹、浮起的内框）+ 一层磨砂 */
.ct-card[data-rar="m"] > .ct-face::after {
  opacity: 1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E"),
    repeating-linear-gradient(45deg, rgb(255 255 255 / var(--c-emb-hi)) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(45deg, rgb(0 0 0 / var(--c-emb-lo)) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgb(255 255 255 / var(--c-emb-hi)) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgb(0 0 0 / var(--c-emb-lo)) 0 1px, transparent 1px 9px);
  background-position: 0 0, 0 0, 1px 1px, 0 0, 1px 1px;
}
.ct-card[data-rar="m"] .ct-in::before {
  content: ""; position: absolute; inset: calc(var(--u) * 3); border-radius: calc(var(--u) * 3.2); pointer-events: none;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / .32), inset -1px -1px 0 rgb(0 0 0 / .34), 1px 1px 0 rgb(255 255 255 / .2), -1px -1px 0 rgb(0 0 0 / .26);
}
.ct-card[data-rar="m"] .ct-t { text-shadow: 0 1px 0 rgb(255 255 255 / var(--c-emb-txt-hi)), 0 -1px 0 rgb(0 0 0 / var(--c-emb-txt-lo)); }

/* ---------- 卡面的皮：底色和纹样，一个体系一套（certgen.py 按体系挑；样稿六个体系照样稿） ---------- */
.ct-card {
  --gold-1: #5c410f; --gold-2: #9a7124; --gold-3: #c99d45; --c-foil-shadow: rgb(255 255 255 / .5);
  --c-emb-hi: .16; --c-emb-lo: .07; --c-emb-txt-hi: .5; --c-emb-txt-lo: .12;
}
.ct-card.dk {
  --gold-1: #a9791f; --gold-2: #e2b85c; --gold-3: #fff0c0; --c-foil-shadow: rgb(0 0 0 / .35);
  --c-emb-hi: .06; --c-emb-lo: .18; --c-emb-txt-hi: .14; --c-emb-txt-lo: .5;
}
.s-zhu {    /* 朱漆底，细回格（深）：样稿的软考 */
  --c-bg: linear-gradient(160deg, #a5372b 0%, #8a2a1f 55%, #6c1f16 100%);
  --c-pat: repeating-linear-gradient(0deg, rgb(255 228 196 / .05) 0 1px, transparent 1px 10px), repeating-linear-gradient(90deg, rgb(255 228 196 / .05) 0 1px, transparent 1px 10px);
  --c-ink: #f8efe2; --c-ink2: rgb(248 239 226 / .74); --c-acc: #f0cf86;
  --c-line: rgb(248 239 226 / .26); --c-line2: rgb(248 239 226 / .55); --c-edge: rgb(255 255 255 / .1);
}
.s-bai {    /* 白底，上沿一道红（浅）：样稿的华为 */
  --c-bg: linear-gradient(170deg, #fbf9f5 0%, #f2eee7 100%);
  --c-pat: linear-gradient(180deg, #c8251c 0, #c8251c 1.3%, transparent 1.3%), repeating-linear-gradient(135deg, rgb(200 37 28 / .035) 0 1px, transparent 1px 8px);
  --c-ink: #191c24; --c-ink2: #5b5f69; --c-acc: #c8251c;
  --c-line: rgb(25 28 36 / .14); --c-line2: rgb(25 28 36 / .34); --c-edge: rgb(25 28 36 / .08);
}
.s-lan {    /* 墨蓝底，六角网点，上沿一截橙（深）：样稿的 AWS */
  --c-bg: linear-gradient(165deg, #222c40 0%, #161d2c 60%, #10151f 100%);
  --c-pat: radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.4px) 0 0 / 12px 10.4px, radial-gradient(rgb(255 255 255 / .07) 1px, transparent 1.4px) 6px 5.2px / 12px 10.4px, linear-gradient(90deg, #ff9900 0, #ff9900 22%, transparent 22%) 0 0 / 100% 2px no-repeat;
  --c-ink: #eef1f6; --c-ink2: rgb(238 241 246 / .7); --c-acc: #ffad33;
  --c-line: rgb(238 241 246 / .18); --c-line2: rgb(238 241 246 / .42); --c-edge: rgb(255 255 255 / .08);
}
.s-gang {   /* 浅钢蓝底，架构网格（浅）：样稿的 TOGAF */
  --c-bg: linear-gradient(165deg, #f0f4f8 0%, #e3eaf1 100%);
  --c-pat: repeating-linear-gradient(0deg, rgb(40 80 120 / .06) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgb(40 80 120 / .06) 0 1px, transparent 1px 14px);
  --c-ink: #14263a; --c-ink2: #4c5d70; --c-acc: #00785a;
  --c-line: rgb(20 38 58 / .14); --c-line2: rgb(20 38 58 / .34); --c-edge: rgb(20 38 58 / .08);
}
.s-shi {    /* 石墨黑底，细点阵（深）：样稿的 Palantir */
  --c-bg: linear-gradient(165deg, #23262c 0%, #17191d 55%, #0e0f12 100%);
  --c-pat: radial-gradient(rgb(255 255 255 / .06) .8px, transparent 1.2px) 0 0 / 8px 8px;
  --c-ink: #f3f3f2; --c-ink2: rgb(243 243 242 / .66); --c-acc: #f3f3f2;
  --c-line: rgb(243 243 242 / .16); --c-line2: rgb(243 243 242 / .4); --c-edge: rgb(255 255 255 / .08);
}
.s-xuan {   /* 宣纸底，一点朱（浅）：样稿的人社部能建中心 × 华为 */
  --c-bg: linear-gradient(165deg, #f5f0e6 0%, #ebe3d4 100%);
  --c-pat: radial-gradient(rgb(120 90 50 / .05) 1px, transparent 1.6px) 0 0 / 7px 9px, radial-gradient(rgb(120 90 50 / .04) 1px, transparent 1.6px) 3px 4px / 11px 7px;
  --c-ink: #1e1a14; --c-ink2: #625849; --c-acc: #b63a2b;
  --c-line: rgb(30 26 20 / .14); --c-line2: rgb(30 26 20 / .34); --c-edge: rgb(30 26 20 / .08);
}
/* 夜里：浅底的几套换成深色，深底的几套提亮一点，和夜里的页面拉开 */
:root[data-theme="dark"] .s-zhu { --c-bg: linear-gradient(160deg, #94322a 0%, #73231a 55%, #561912 100%); }
:root[data-theme="dark"] .s-bai {
  --c-bg: linear-gradient(170deg, #2a2e38 0%, #1f222a 100%);
  --c-pat: linear-gradient(180deg, #d8362b 0, #d8362b 1.3%, transparent 1.3%), repeating-linear-gradient(135deg, rgb(216 54 43 / .06) 0 1px, transparent 1px 8px);
  --c-ink: #f0ece4; --c-ink2: rgb(240 236 228 / .68); --c-acc: #ee5a4c;
  --c-line: rgb(240 236 228 / .16); --c-line2: rgb(240 236 228 / .38); --c-edge: rgb(255 255 255 / .07);
}
:root[data-theme="dark"] .s-lan { --c-bg: linear-gradient(165deg, #27324a 0%, #1b2335 60%, #141a28 100%); }
:root[data-theme="dark"] .s-gang {
  --c-bg: linear-gradient(165deg, #1e2a38 0%, #16202c 100%);
  --c-pat: repeating-linear-gradient(0deg, rgb(150 190 230 / .06) 0 1px, transparent 1px 14px), repeating-linear-gradient(90deg, rgb(150 190 230 / .06) 0 1px, transparent 1px 14px);
  --c-ink: #e2ecf6; --c-ink2: rgb(226 236 246 / .66); --c-acc: #3fbf92;
  --c-line: rgb(226 236 246 / .15); --c-line2: rgb(226 236 246 / .38); --c-edge: rgb(255 255 255 / .07);
}
:root[data-theme="dark"] .s-shi { --c-bg: linear-gradient(165deg, #2a2d34 0%, #1d1f24 55%, #141519 100%); }
:root[data-theme="dark"] .s-xuan {
  --c-bg: linear-gradient(165deg, #2b2720 0%, #211e19 100%);
  --c-pat: radial-gradient(rgb(240 220 190 / .05) 1px, transparent 1.6px) 0 0 / 7px 9px;
  --c-ink: #f1e9dc; --c-ink2: rgb(241 233 220 / .66); --c-acc: #e8604a;
  --c-line: rgb(241 233 220 / .15); --c-line2: rgb(241 233 220 / .38); --c-edge: rgb(255 255 255 / .07);
}
/* 夜里浅底的两套（白、钢蓝、宣纸）变成深底，烫金、压纹照深底的那组参数 */
:root[data-theme="dark"] .ct-card:is(.s-bai, .s-gang, .s-xuan) {
  --gold-1: #a9791f; --gold-2: #e2b85c; --gold-3: #fff0c0; --c-foil-shadow: rgb(0 0 0 / .35);
  --c-emb-hi: .06; --c-emb-lo: .18; --c-emb-txt-hi: .14; --c-emb-txt-lo: .5;
}

/* ---------- 799 以下：左栏收成页头的「筛选」，点开从下往上弹出一层（背景同浮层：模糊、压暗），五组竖排、组内横着排小签，
   上面右边「完成」，有选中时左边「清空」；按钮上写选中的名字（太长就写几项） ---------- */
.ct-sheet-bg { position: fixed; inset: 0; z-index: 60; background: var(--ct-dim); -webkit-backdrop-filter: var(--ct-blur); backdrop-filter: var(--ct-blur); opacity: 0; transition: opacity .28s ease; }
.ct-sheet-bg.on { opacity: 1; }
@media (max-width: 799px) {
  .ct-body { display: block; }
  .ct-fbtn { display: inline-flex; flex: none; align-items: center; gap: 6px; max-width: 60%; padding: 7px 14px; border: 1px solid var(--edge); border-radius: var(--r-pill);
    background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--ink); font-size: 14px; font-weight: var(--w-strong); line-height: 1.4; white-space: nowrap; }
  .ct-fbtn-v { overflow: hidden; color: var(--accent-text-sm); text-overflow: ellipsis; }
  .ct-fbtn-v:empty { display: none; }
  .ct-toc { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 61; max-height: min(80vh, 640px); margin: 0; padding: 0 16px max(20px, env(safe-area-inset-bottom));
    border-radius: 20px 20px 0 0; background: var(--sheet); box-shadow: 0 -24px 60px -24px rgb(0 0 0 / .45); visibility: hidden; transform: translateY(105%);
    transition: transform .28s var(--ease-out), visibility 0s .28s; }
  .ct-toc.is-open { visibility: visible; transform: none; transition: transform .28s var(--ease-out), visibility 0s; }
  .ct-toc-top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: 0 -16px 6px; padding: 12px 16px 8px; background: var(--sheet); }
  .ct-toc-top button { padding: 6px 12px; border-radius: var(--r-md); color: var(--ink-soft); font-size: 15px; line-height: 1.4; }
  .ct-clear { margin-right: auto; }
  .ct-done { color: var(--accent-text-sm) !important; font-weight: 650; }
  .ct-fg { margin-bottom: 18px; }
  .ct-fg-h { padding-left: 0; }
  .ct-fg ul { display: flex; flex-wrap: wrap; gap: 6px; }
  .ct-fg button { width: auto; padding: 5px 12px; border: 1px solid var(--edge); border-radius: var(--r-pill); background: var(--sheet); font-size: 13.5px; white-space: nowrap; }
  .ct-fg button::before { display: none; }
  .ct-fg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-text-sm); }
  .ct-fg button[data-v=""][aria-pressed="true"] { border-color: var(--ink-soft); color: var(--ink); }   /* 「全部」选中用墨（夜里骨白）的框 */
  .ct-fmk { margin-right: 7px; }
}

/* ---------- 手机：一列，卡片横放，卡面尺寸改按横卡算 ---------- */
@media (max-width: 599px) {
  .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 20px; }
  .ct-group { gap: 14px; }
  .ct-group::before { inset: -6px -8px -8px; }
  .ct-face { --u: 2.1px; aspect-ratio: 7 / 4.1; }
  @supports (width: 1cqw) { .ct-face { --u: .6cqw; } }
  .ct-t { margin-top: calc(var(--u) * 4.5); }
  /* fyro.css「手机：少字、分主次」给所有 h3 定了 20px（!important），卡面上的字按卡宽算，大卡右边的小标题是 14px，这里压回去 */
  .ct-face .ct-t { font-size: calc(var(--u) * 8.6) !important; line-height: 1.16 !important; }
  .ct-big-info h3, .ct-ov-name { font-size: 14px !important; line-height: 1.5 !important; }
  .ct-ov-name { font-size: 16px !important; }
}

/* ---------- 浮层：一层背景模糊，两种状态——排开、大卡（10-29 Leon「多张卡展开的情况，移动到前景+背景模糊吧」，主会话定一个浮层两种状态） ---------- */
:root { --ct-dim: rgb(18 22 31 / .32); --ct-blur: blur(12px) saturate(1.15); }
:root[data-theme="dark"] { --ct-dim: rgb(5 7 12 / .55); }
html.ct-locked { overflow: hidden; }
/* 开着浮层时页面上的标记不闪：背后的页面不动，模糊不用每帧重算（平时也只有悬停的那一张在闪） */
html.ct-ov-open .ct-grid .ct-mk > i::after, html.ct-ov-open .ct-grid .ct-mk::before { animation: none; }
.ct-ov { position: fixed; inset: 0; z-index: 60; }
.ct-ov-bg { position: absolute; inset: 0; background: var(--ct-dim); -webkit-backdrop-filter: var(--ct-blur); backdrop-filter: var(--ct-blur); opacity: 0; transition: opacity .3s ease; }
.ct-ov.on .ct-ov-bg { opacity: 1; }
.ct-ov-layer { position: absolute; inset: 0; display: flex; overflow-y: auto; overscroll-behavior: contain; }
.ct-ov-layer:focus { outline: none; }
.ct-ov-box { width: min(var(--shell), calc(100% - var(--gutter) * 2)); margin: auto; padding: 36px 0 48px; }
/* 进大卡时排开那一层淡出（卡留在原位，退回时大卡缩回去） */
.ct-ov-spread { transition: opacity .22s ease, visibility 0s; }
.ct-ov.is-big .ct-ov-spread { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }

/* 排开：头上一条（叠名、note、体系官网、×），下面这一叠的卡居中排开，一行放不下换行 */
.ct-ov-bar { display: flex; align-items: center; gap: 12px 18px; width: fit-content; max-width: min(100%, 760px); margin: 0 auto 28px; padding: 8px 8px 8px 20px;
  border: 1px solid var(--edge-soft); border-radius: var(--r-xl); background: var(--surface-card); box-shadow: var(--shadow-window);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s ease .08s, transform .35s var(--ease-out) .08s; }
.ct-ov.on .ct-ov-bar { opacity: 1; transform: none; }
/* 头上：叠名和「体系官网 ↗」一行，叠的 note 另起一行（一两句，长的折行，最宽 760px 的条里放得下两三行） */
.ct-ov-head { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; gap: 2px 14px; min-width: 0; padding: 4px 0; }
.ct-ov-name { grid-row: 1; }
.ct-ov-url { grid-row: 1; }
.ct-ov-note { grid-column: 1 / -1; grid-row: 2; }
.ct-ov-name { color: var(--ink); font-size: 17px; font-weight: 650; letter-spacing: var(--track-tight); line-height: 1.5; text-wrap: balance; }
.ct-ov-note { color: var(--muted); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
.ct-ov-url { color: var(--ink-soft); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.ct-ov-url:hover { color: var(--ink); text-decoration-color: currentColor; }
.ct-x { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-2); border-radius: 50%; color: var(--ink-soft); font-size: 18px; line-height: 1; }
.ct-x:hover { background: var(--wash); color: var(--ink); }
.ct-spread { display: flex; flex-wrap: wrap; justify-content: center; gap: 28px 22px; }
.ct-spread > .ct-card { width: 228px; }
.ct-spread > .ct-card:hover { z-index: 1; }

/* 大卡：左边放大的卡面，右边说明；从一叠进来的，上面「‹ 返回」和这一叠各级的小签 */
.ct-big-bar { display: flex; align-items: center; gap: 10px 14px; max-width: calc(360px + 22px + 440px); margin: 0 auto 18px; }
.ct-big-bar:not(:has(> :not([hidden]))) { display: none; }
.ct-back { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 6px 14px 6px 10px; border: 1px solid var(--edge-soft); border-radius: var(--r-pill);
  background: var(--surface-card); box-shadow: var(--shadow-card); color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.ct-back:hover { color: var(--ink); }
.ct-lvs { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }   /* 宽屏放不下就换行；手机上横着滑（下面） */
.ct-lvs::-webkit-scrollbar { display: none; }
.ct-lvs button { flex: none; padding: 5px 12px; border: 1px solid var(--edge-soft); border-radius: var(--r-pill); background: var(--surface-card); color: var(--ink-soft);
  font-size: 13px; line-height: 1.5; white-space: nowrap; transition: color .16s ease, border-color .16s ease; }
.ct-lvs button:hover { color: var(--ink); }
.ct-lvs button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); font-weight: 600; }
.ct-big { display: flex; align-items: flex-start; justify-content: center; gap: 22px; }
.ct-big-face { flex: none; width: min(360px, 34vw, calc((100vh - 160px) * 5 / 5.7)); transform-origin: 0 0; }
.ct-big-face .ct-face { --u: 3.6px; box-shadow: 0 4px 10px rgb(0 0 0 / .25), 0 40px 80px -30px rgb(0 0 0 / .7), inset 0 0 0 1px var(--c-edge); }
@supports (width: 1cqw) { .ct-big-face .ct-face { --u: 1cqw; } }
.ct-big-info {
  position: relative; width: min(440px, 42vw); padding: 22px 22px 20px; border: 1px solid var(--edge-soft); border-radius: var(--r-xl);
  background: var(--surface-card); color: var(--ink); box-shadow: 0 30px 70px -30px rgb(0 0 0 / .55);
}
.ct-big-info > .ct-x { position: absolute; top: 12px; right: 12px; }
.ct-rar { display: flex; align-items: flex-start; gap: 10px; margin: 2px 44px 0 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.ct-rar .ct-mk { --u: 2.2px; width: 11px; height: 11px; margin-top: 5px; border-radius: 2px; box-shadow: 0 0 0 1.5px rgb(255 255 255 / .75), 0 1px 2px rgb(0 0 0 / .3); }   /* 白边一圈，同左栏筛选的 .ct-fmk：夜里墨色那枚（普通）压在深底上也看得见（第 5 段之五，原来 1px 淡影约 1.3:1） */
.ct-rar b { font-weight: 650; }
.ct-big-info h3 { margin: 18px 0 8px; color: var(--ink); font-size: 14px; font-weight: 650; }
.ct-big-info p { color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.ct-big-info .ct-what { margin-top: 10px; }
.ct-big-info .ct-what.is-first { margin: 2px 44px 0 0; }   /* 没写稀有度的卡：「考什么」是第一行，给右上角的 × 让出位置 */
.ct-big-info .ct-note { margin-top: 6px; color: var(--muted); font-size: 13px; }
.ct-stn a, .ct-cap a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; white-space: nowrap; }
.ct-stn a:hover, .ct-cap a:hover { text-decoration-color: currentColor; }
.ct-sample { display: flex; align-items: center; gap: 14px; }
.ct-sample .ct-well { flex: none; display: grid; place-items: center; width: 132px; height: 132px; border: 1px solid var(--line); border-radius: var(--r-md); background: #f4f2ec; }
.ct-sample img { width: 116px; height: 116px; object-fit: contain; }
.ct-sample .ct-cap { color: var(--muted); font-size: 12.5px; line-height: 1.6; }
.ct-sample.wide { flex-direction: column; align-items: stretch; gap: 8px; }
.ct-sample.wide .ct-well { width: 100%; height: auto; padding: 8px; }
.ct-sample.wide img { width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.ct-act { margin-top: 20px; }

/* 手机：浮层铺满屏，排开一列竖排，层里自己滚；大卡在上、内容在下，那排小签横着滑 */
@media (max-width: 599px) {
  .ct-ov-box { width: 100%; margin: 0; padding: 12px 12px 28px; }
  .ct-ov-bar { width: auto; margin-bottom: 18px; padding: 8px 8px 8px 14px; }
  .ct-ov-head { flex: 1; }
  /* 叠名单独一行、占满 × 左边的宽度（原来和「体系官网 ↗」并排两列，挤成「……人工智／能」）；体系官网放到 note 下面，× 靠上（第 5 段之五） */
  .ct-ov-head { grid-template-columns: minmax(0, 1fr); }
  .ct-ov-url { grid-row: 3; justify-self: start; }
  .ct-ov-bar > .ct-x { align-self: flex-start; }
  .ct-spread { flex-direction: column; flex-wrap: nowrap; gap: 16px; }
  .ct-spread > .ct-card { width: 100%; }
  .ct-big-bar { margin-bottom: 12px; }
  .ct-lvs { flex-wrap: nowrap; margin: -3px 0; padding: 3px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }   /* 上下各让 3px：焦点框露得出来 */
  .ct-big { flex-direction: column; align-items: stretch; gap: 12px; }
  .ct-big-face { width: 100%; }
  .ct-big-face .ct-face { --u: 2.1px; }
  @supports (width: 1cqw) { .ct-big-face .ct-face { --u: .6cqw; } }
  .ct-big-info { width: 100%; }
}

/* ---------- 减少动态效果：不转、不放大，标记不闪（fyro.css 已统一去掉动画和过渡） ---------- */
@media (prefers-reduced-motion: reduce) {
  .ct-face, .ct-face.is-hover, .ct-big-face .ct-face { transform: none !important; }
  .ct-mk::before { display: none; }
  .ct-ov-bar { transform: none !important; }
}