色彩 · 设计合集

还没解析到的那一帧看不见图，会先画一帧玻璃（实测）。判定扣掉正文进场的8px位移。 * data-no-pull 超过14行的
 默认收起只露8行（ix-sheet-pull）；不想收的写这个。.specimen 里的  不收。
 *
 * ── 模糊档位（ix-sheet-frosted 的降级档）：html[data-blur] = full | lite | off ───────────
 *   偏好存 localStorage「star-blur」= auto / on / off（外观里「背景模糊：自动 / 开 / 关」）；boot.js 在样式表前解析好：
 *   on → full；off → off；auto → 有显卡 full、没显卡 lite（WebGL failIfMajorPerformanceCaveat 探测，缓存「star-gpu」，
 *   没测过先按 lite）。JS 读档位：StarShell.blurTier()（或 StarTheme.blur()）。
 *     full  整页遮罩背景从清楚糊到26px（1s cubic-bezier(.2,.7,.2,1)，关 .3s），只糊不压暗；弹层面板 .88玻璃 + 自己的磨砂
 *     lite  整页遮罩不模糊、压暗淡入（--scrim-dim，浅 rgba(20,24,36,.28) / 深 rgba(0,0,0,.5)）；弹层面板不模糊、底提到 .97；
 *           侧栏 / 顶栏 / tab bar 的常驻磨砂照旧。实测合成开销约基线1.3×，模糊2.9–3.3×（数字见交互页「毛玻璃浮层」那条）
 *     off   同 lite，并且侧栏 / 顶栏 / tab bar 的常驻磨砂也关、玻璃提到近乎不透明（同第5节「做不出磨砂」）
 *   切主题的圆形揭开、强调色淡入、跨页过渡只在 full 下做（View Transition 要整屏截图，软件合成下最贵）。
 *   给弹层用的两个类（kit 与外壳共用）：
 *     .scrim-frost + .is-open   整页遮罩：position:fixed; inset:0; 默认 z-index 40（使用方可改）；关着 visibility:hidden、
 *                              不挡点击；按档位自己选做法。做不出磨砂、用户要求减少透明度时 full 也走压暗。
 *                              减弱动效下外壳关掉一切过渡：开关直接到位。
 *     .sheet-glass              弹层面板：full = --glass-panel + blur(30px) saturate(160%)；lite / off = --glass-panel-solid、不模糊。
 *   z-index 梯子：侧栏20、tab bar 30、「更多」遮罩 / 面板40 / 41、搜索遮罩 / 面板 / 结果44 / 45 / 46、提示条50、
 *                复制气泡60、跳到正文60、跳转点亮光环70、kit 弹层80、kit 灯箱90。
 *
 * ── 过渡（第二阶段加）──────────────────────────────────────────────────
 *   切明暗：document.startViewTransition，新画面从点的那个控件处圆形揭开（clip-path circle，420ms cubic-bezier(.25,.5,.3,1)，理由见 star.js 第1条）；
 *   切强调色：View Transition 默认交叉淡入，260ms。减弱动效、lite / off、不支持时直接切。
 *   切页：正文 .page 淡入＋上移8px（260ms cubic-bezier(.2,.8,.2,1)），侧栏不动；跨文档 View Transition
 *   （@view-transition navigation:auto），侧栏 / tab bar 临时起名 star-side / star-tabbar 原地不动，正文那层同样淡入上移；
 *   有跨页过渡时 CSS 进场不做（html.vt-nav）。file:// 下也做（屋主是双击打开的）：开关除了第14节这份，boot.js 还用
 *   构造样式表挂了一份——file:// 下只靠外部样式表，新页判开关那一刻它时有时无（实测20次跳转9–10次被中止、留一条报错）；
 *   挂上以后20/20次都有过渡、零报错。lite / off / 减弱动效时 boot.js（pagereveal）与 star.js（pageswap）跳过。
 *   带 #锚点 打开时（html.jump-in）正文进场只淡入不上移：浏览器按带位移的盒子算锚点落点，8px 没走完落点就偏。
 *   注意：带 view-transition-name 的元素是 backdrop root，它里面的子元素 backdrop-filter 只糊得到它自己——
 *   所以侧栏只在过渡那一下起名，侧栏的磨砂也一直挂在侧栏自己身上，不挪到伪元素或子元素上。
 *
 * ── 样例框与减弱动效的约定 ─────────────────────────────────────────────
 *   .specimen.is-overflow-visible
 *                          .specimen 默认 overflow-x:auto（宽样例在框里横滑，不撑破页面）；但 overflow-x 一旦不是
 *                          visible，纵向也会被裁——联想浮层、确认框这类伸出框外的东西会被切掉。这种样例加这个类
 *                          改回 overflow:visible；前提是样例本身在窄屏上不会比框宽（自己在417档量过）。
 *   data-rm="fade"         prefers-reduced-motion: reduce 下，外壳用 !important 关掉全部 transition / animation；
 *                          元素加这个属性时只保留 opacity 过渡（时长取 --rm-fade，默认 .2s），其余照关——
 *                          「原地淡入淡出」用这个。别在页面里拿更高特异性 + !important 放回过渡。
 *                          要原地淡、不要位移缩放的，页面在同一个媒体查询里把 transform 钉住即可（普通特异性就够）。
 *                          注意外壳写的是 animation / transition: none，不是0.01ms：被关掉的动画不会发 animationend / transitionend。
 *                          靠这两个事件收尾的组件必须再挂一个兜底计时器（「事件＋兜底」），否则减弱动效下会卡在半路（动画章 mo-reduce 演示了）。
 *
 * ── 令牌写法：一行写一对「浅值 / 深值」────────────────────────────────────
 *   --bg: var(--lt, #F4F5F9) var(--dk, #0B0C10);
 *   浅色时 --lt 是 initial（失效 → 取后面的浅值）、--dk 是空（整段吐空）；深色反过来。
 *   这组声明挂在 :root, [data-mode], [data-accent] 上，所以**任何元素**加 data-mode="dark" 或 data-accent="pink"
 *   都会在那个元素上重算一遍：样例里可以局部切深色、切强调色并排展示；只写 data-accent 时明暗继承外面。
 *   html 上的是全站值（boot.js 写的是已解析的 light / dark）；没有 JS 时 html 上没有 data-mode，
 *   由 prefers-color-scheme 接住深色。
 *   token 名字说用途、不说颜色（SPEC-apple-glass.md「命名教训」）：--accent-tint 实色软底、--accent-shadow 投影 …
 *
 * ── 字体令牌 ────────────────────────────────────────────────────────────
 *   --font      正文：中文字族打头（家族契约 A.1）。
 *   --font-num  数字（SPEC §3a「数字字体」，2026-10-08）：凡写了 font-variant-numeric: tabular-nums 的规则，同一条里必须写
 *               font-family: var(--font-num)。苹方在 Chrome 里不认 tabular-nums / "tnum"，--font 下写了也照样跳（40px 600的
 *               「1111」宽65.6、「0000」宽96.0）；BlinkMacSystemFont（Mac 的 Chrome）/ -apple-system（Safari、iOS）/ "Segoe UI"（Windows）/
 *               system-ui 的数字认；中文仍落到后面那串中文字族上。Windows 已实测（SPEC §3a「Windows 实测」，2026-10-09
 *               屋主台式机 Edge 154）：落到 Segoe UI，等宽；微软雅黑的数字本来就等宽，只有 Mac 上的 Chrome 会跳；Windows 上只是数字变窄约8–10%。
 *               body 不写 tabular-nums（写了也只在认它的字体上生效，还会让人以为全站数字都等宽）；要等宽的数字各自写这两条。
 *               护栏：本机量具 phase3/type/fontnum-guard.mjs（源码扫描 + 浏览器里量「1111」「0000」「8888」，差 ≤0.5px 才算等宽）。
 *   --mono      代码（真等宽字族）；写了 tabular-nums 的代码块用它也算数。Mac 的 Chrome 按名字取不到 ui-monospace、"SF Mono"，
 *               Mac 上也没有 Consolas，所以 "SF Mono" 后面插 Menlo（Safari 认 ui-monospace；Windows 取到 Consolas，未核实）。
 *   --font-kai  小屋楷书（.xw 样例里用）。
 *
 * ── 尺寸：以1440为基准等比放大，1.45封顶（SPEC §4b）────────────────────
 *   --scale = clamp(1, tan(atan2(100vw, 1440px)), 1.45)；--u = 1px × --scale。
 *   每个尺寸令牌 = 「1440处的值 × --scale」，1440及以下 --scale 恒为1，一个数都不变。
 *   不乘 scale 的：媒体查询断点、1px 线、blur 半径、光晕 vw 尺寸、焦点环2px。不用 CSS zoom。
 * ========================================================================== */

/* ---------- 1. 明暗开关 ---------- */
:root { --lt: initial; --dk: ; }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) { --lt: ; --dk: initial; }
}
[data-mode="light"] { --lt: initial; --dk: ; }
[data-mode="dark"] { --lt: ; --dk: initial; }

/* ---------- 2. 尺度 ---------- */
:root {
  --scale-max: 1.45;
  --scale: clamp(1, tan(atan2(100vw, 1440px)), var(--scale-max));
  --u: calc(1px * var(--scale));

  --fs-title: calc(clamp(26px, 1.4vw + 14px, 34.16px) * var(--scale));
  --fs-h2: calc(clamp(19px, .3vw + 17.68px, 22px) * var(--scale));
  --fs-h3: calc(clamp(17px, .25vw + 16.4px, 20px) * var(--scale));
  --fs-lead: calc(clamp(14px, .2vw + 13.12px, 16px) * var(--scale));
  --fs-body: calc(clamp(14px, .15vw + 12.84px, 15px) * var(--scale));
  --fs-small: calc(13px * var(--scale));
  --fs-xs: calc(12px * var(--scale));
  --page-pt: calc(26 * var(--u));      /* 正文上内边距：[data-hero] 顶到顶栏底下要抵掉它（文件头「页面可以用的外壳钩子」） */
  --gap: calc(clamp(10px, 1vw, 14.4px) * var(--scale));
  --pad: calc(clamp(18px, .95vw + 14.32px, 28px) * var(--scale));
  --side-w: calc(clamp(200px, 17vw, 244.8px) * var(--scale));
  --page-x: calc(clamp(16px, 3vw, 43.2px) * var(--scale));
  --measure: calc(680px * var(--scale));
  --label-w: calc(88px * var(--scale));
  --r-xs: calc(8px * var(--scale));
  --r-sm: calc(12px * var(--scale));
  --r-md: calc(16px * var(--scale));
  --r-lg: calc(22px * var(--scale));
  --topbar-h: 56px;
  --tabbar-h: 60px;

  --font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, sans-serif;
  /* 等宽数字专用（SPEC §3a）：前四个按「谁会先取到」排，中文落到后面的中文字族；用法见文件头「字体令牌」 */
  --font-num: BlinkMacSystemFont, -apple-system, "Segoe UI", system-ui, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace;   /* Menlo：Mac 的 Chrome 取不到前两个，没有它就一路落到 Courier New（控制室10-08实测） */
  --font-kai: "Kaiti SC", "STKaiti", "KaiTi", serif;

  /* 跟随文字色的图标：mask-image 取形状、background:currentColor 上色（换主题、换强调色自动跟上） */
  --ic-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 3.6h6.2L18 8v10.9a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 6 18.9V5.1a1.5 1.5 0 0 1 1.4-1.5z'/%3E%3Cpath d='M13.4 3.6v4.6H18'/%3E%3Cpath d='M9 12.6h6M9 16h4'/%3E%3C/svg%3E");
  --ic-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.8 20.6 19.2H3.4z'/%3E%3Cpath d='M12 10.2v4.2'/%3E%3Cpath d='M12 16.9v.01'/%3E%3C/svg%3E");
  --ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13.4'/%3E%3Cpath d='m13 6.6 5.4 5.4-5.4 5.4'/%3E%3C/svg%3E");
}
/* 不支持三角函数的内核：探针必须写 scale:（接受无单位数），写 width: 会恒真、把上面的公式整个盖掉。 */
@supports not (scale: tan(atan2(1px, 1px))) {
  :root { --scale: 1; }
  @media (min-width: 1600px) { :root { --scale: 1.11; } }
  @media (min-width: 1800px) { :root { --scale: 1.25; } }
  @media (min-width: 2000px) { :root { --scale: 1.39; } }
  @media (min-width: 2200px) { :root { --scale: 1.45; } }
}

/* ---------- 3. 六个强调色的原始值（浅 / 深两支，下面第4节按明暗取一支）----------
   a 填充 / a2渐变浅端 / at 文字档（HIG 增强对比度）/ ati 实色软底 / ash 投影 / b1–b3三团光晕。
   深色 a2：样张 shua-glass.html 深色只重写了蓝（#64D2FF），其余沿用浅色那组——与岗岗、card 一致（SPEC「各家有记录的偏离」）。
   实色软底：浅 = 填充色兑11% 进白（岗岗算法），深 = 填充色兑18% 进 #17181C（card 算法）；文字档压上去实算 ≥4.59。 */
:root, [data-accent="blue"] {
  --a-l: #007AFF; --a-d: #0A84FF; --a2-l: #5AC8FA; --a2-d: #64D2FF; --at-l: #0040DD; --at-d: #409CFF;
  --ati-l: #E3F0FF; --ati-d: #152B45; --ash-l: rgba(0,122,255,.13); --ash-d: rgba(10,132,255,.2);
  --b1-l: rgba(90,200,250,.55); --b2-l: rgba(255,214,170,.55); --b3-l: rgba(175,160,255,.45);
  --b1-d: rgba(10,132,255,.35); --b2-d: rgba(255,159,10,.22); --b3-d: rgba(94,92,230,.35);
}
[data-accent="green"] {
  --a-l: #34C759; --a-d: #30D158; --a2-l: #A8E063; --a2-d: #A8E063; --at-l: #1F7A36; --at-d: #30DB5B;
  --ati-l: #E9F9ED; --ati-d: #1C3927; --ash-l: rgba(52,199,89,.15); --ash-d: rgba(48,209,88,.2);
  --b1-l: rgba(52,199,89,.4); --b2-l: rgba(255,214,170,.55); --b3-l: rgba(48,176,199,.35);
  --b1-d: rgba(48,209,88,.28); --b2-d: rgba(255,159,10,.18); --b3-d: rgba(64,200,224,.25);
}
[data-accent="indigo"] {
  --a-l: #5856D6; --a-d: #5E5CE6; --a2-l: #BF5AF2; --a2-d: #BF5AF2; --at-l: #3634A3; --at-d: #8E8BFF;
  --ati-l: #EDECFA; --ati-d: #242440; --ash-l: rgba(88,86,214,.15); --ash-d: rgba(94,92,230,.22);
  --b1-l: rgba(88,86,214,.4); --b2-l: rgba(255,45,85,.25); --b3-l: rgba(175,160,255,.45);
  --b1-d: rgba(94,92,230,.35); --b2-d: rgba(255,55,95,.18); --b3-d: rgba(191,90,242,.25);
}
[data-accent="orange"] {
  --a-l: #FF9500; --a-d: #FF9F0A; --a2-l: #FFD60A; --a2-d: #FFD60A; --at-l: #C93400; --at-d: #FFB340;
  --ati-l: #FFF3E3; --ati-d: #413019; --ash-l: rgba(255,149,0,.16); --ash-d: rgba(255,159,10,.2);
  --b1-l: rgba(255,149,0,.4); --b2-l: rgba(255,214,170,.55); --b3-l: rgba(255,59,48,.25);
  --b1-d: rgba(255,159,10,.3); --b2-d: rgba(255,69,58,.18); --b3-d: rgba(94,92,230,.25);
}
[data-accent="pink"] {
  --a-l: #FF2D55; --a-d: #FF375F; --a2-l: #FF9AA2; --a2-d: #FF9AA2; --at-l: #D30F45; --at-d: #FF6482;
  --ati-l: #FFE8EC; --ati-d: #411E28; --ash-l: rgba(255,45,85,.14); --ash-d: rgba(255,55,95,.2);
  --b1-l: rgba(255,45,85,.35); --b2-l: rgba(255,214,170,.55); --b3-l: rgba(191,90,242,.3);
  --b1-d: rgba(255,55,95,.3); --b2-d: rgba(255,159,10,.18); --b3-d: rgba(191,90,242,.25);
}
[data-accent="teal"] {
  --a-l: #30B0C7; --a-d: #40C8E0; --a2-l: #64D2FF; --a2-d: #64D2FF; --at-l: #0071A4; --at-d: #5AC8F5;
  --ati-l: #E8F6F9; --ati-d: #1E383F; --ash-l: rgba(48,176,199,.15); --ash-d: rgba(64,200,224,.2);
  --b1-l: rgba(48,176,199,.45); --b2-l: rgba(52,199,89,.3); --b3-l: rgba(175,160,255,.45);
  --b1-d: rgba(64,200,224,.3); --b2-d: rgba(48,209,88,.2); --b3-d: rgba(94,92,230,.25);
}

/* ---------- 4. 颜色令牌（每行一对浅 / 深）---------- */
:root, [data-mode], [data-accent] {
  color-scheme: var(--lt, light) var(--dk, dark);
  /* 底与玻璃（SPEC §2）：底色只写在 html 上，body 透明，否则盖住 body::before 的光晕 */
  --bg: var(--lt, #F4F5F9) var(--dk, #0B0C10);
  --glass: var(--lt, rgba(255,255,255,.62)) var(--dk, rgba(40,42,52,.55));
  --glass-strong: var(--lt, rgba(255,255,255,.78)) var(--dk, rgba(44,46,58,.72));
  --glass-panel: var(--lt, rgba(255,255,255,.88)) var(--dk, rgba(36,38,48,.9));
  --glass-edge: var(--lt, rgba(255,255,255,.9)) var(--dk, rgba(255,255,255,.12));
  --sep: var(--lt, rgba(60,60,67,.12)) var(--dk, rgba(84,84,88,.5));
  /* 文字三级（SPEC §5c）：次级 .76 / .62承载文字；三级 .32只给 chevron 与装饰 */
  --label: var(--lt, #1C1C1E) var(--dk, #F2F2F7);
  --label2: var(--lt, rgba(60,60,67,.76)) var(--dk, rgba(235,235,245,.62));
  --label3: var(--lt, rgba(60,60,67,.32)) var(--dk, rgba(235,235,245,.32));
  /* 承载文字的底一律实色：--fill 浅 = 白兑正文色11%，深 = 深底兑正文色20%（SPEC §5c） */
  --fill: var(--lt, #E6E6E6) var(--dk, #393A3E);
  --well: var(--lt, #F7F8FA) var(--dk, #16171C);
  --code-bg: var(--lt, #F3F4F8) var(--dk, #15161B);
  --raised: var(--lt, #FFFFFF) var(--dk, #2C2D35);
  --seg-on: var(--lt, #FFFFFF) var(--dk, #5B5C63);
  --hover: var(--lt, rgba(255,255,255,.55)) var(--dk, rgba(255,255,255,.07));
  --scrim: var(--lt, rgba(20,24,36,.18)) var(--dk, rgba(0,0,0,.5));
  /* 模糊档位 lite / off 的整页遮罩与弹层面板（ix-sheet-frosted「降级」：压暗 .28 / .5，面板底近乎不透明） */
  --scrim-dim: var(--lt, rgba(20,24,36,.28)) var(--dk, rgba(0,0,0,.5));
  --glass-panel-solid: var(--lt, rgba(255,255,255,.97)) var(--dk, rgba(36,38,48,.97));
  --shadow: var(--lt, 0 10px 30px rgba(20,30,60,.08)) var(--dk, 0 10px 30px rgba(0,0,0,.35)), inset 0 1px 0 var(--glass-edge);
  --shadow-sm: var(--lt, 0 1px 3px rgba(20,30,60,.12)) var(--dk, 0 1px 3px rgba(0,0,0,.4));
  --shadow-pop: var(--lt, 0 24px 60px rgba(20,30,60,.18)) var(--dk, 0 24px 60px rgba(0,0,0,.55)), inset 0 1px 0 var(--glass-edge);
  /* 语义色固定、不随强调色：填充 / 文字档 / 实色软底。深色红字 HIG #FF6961压强玻璃最不利角（青光晕）只有4.49，本地提亮到 #FF6E66（4.63） */
  --red: var(--lt, #FF3B30) var(--dk, #FF453A);
  --red-text: var(--lt, #D70015) var(--dk, #FF6E66);
  --red-tint: var(--lt, #FFE9E8) var(--dk, #412021);
  --green: var(--lt, #34C759) var(--dk, #30D158);
  --green-text: var(--lt, #1F7A36) var(--dk, #30DB5B);
  --green-tint: var(--lt, #E9F9ED) var(--dk, #1C3927);
  --orange: var(--lt, #FF9500) var(--dk, #FF9F0A);
  --orange-text: var(--lt, #C93400) var(--dk, #FFB340);
  --orange-tint: var(--lt, #FFF3E3) var(--dk, #413019);
  /* 范围标签：工具 = 固定蓝（不随强调色，是分类不是主题）、小屋 = 橄榄 */
  --scope-tools-tint: var(--lt, #E3F0FF) var(--dk, #152B45);
  --scope-tools-text: var(--lt, #0040DD) var(--dk, #409CFF);
  --scope-xw-tint: var(--lt, #E1E0CE) var(--dk, #3A3C34);
  --scope-xw-text: var(--lt, #4A4D35) var(--dk, #E0D7BD);
  /* 强调色：按明暗取第3节里的一支 */
  --accent: var(--lt, var(--a-l)) var(--dk, var(--a-d));
  --accent-2: var(--lt, var(--a2-l)) var(--dk, var(--a2-d));
  --accent-text: var(--lt, var(--at-l)) var(--dk, var(--at-d));
  --accent-tint: var(--lt, var(--ati-l)) var(--dk, var(--ati-d));
  --accent-shadow: var(--lt, var(--ash-l)) var(--dk, var(--ash-d));
  --on-accent-gradient: #FFFFFF;
  --blob1: var(--lt, var(--b1-l)) var(--dk, var(--b1-d));
  --blob2: var(--lt, var(--b2-l)) var(--dk, var(--b2-d));
  --blob3: var(--lt, var(--b3-l)) var(--dk, var(--b3-d));
}
[data-mode] { color: var(--label); }

/* ---------- 5. 降级：做不出磨砂 / 用户要求减少透明度 → 玻璃提到近乎不透明 ----------
   探针必须把 -webkit- 前缀一起测（iOS Safari 18以前只认前缀），外层那对括号不能省。 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, [data-mode], [data-accent] {
    --glass: var(--lt, rgba(255,255,255,.9)) var(--dk, rgba(40,42,52,.92));
    --glass-strong: var(--lt, rgba(255,255,255,.96)) var(--dk, rgba(44,46,58,.96));
    --glass-panel: var(--lt, rgba(255,255,255,.97)) var(--dk, rgba(36,38,48,.97));
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root, [data-mode], [data-accent] {
    --glass: var(--lt, rgba(255,255,255,.9)) var(--dk, rgba(40,42,52,.92));
    --glass-strong: var(--lt, rgba(255,255,255,.96)) var(--dk, rgba(44,46,58,.96));
    --glass-panel: var(--lt, rgba(255,255,255,.97)) var(--dk, rgba(36,38,48,.97));
  }
}

/* ---------- 6. 基础 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* 带 #锚点 打开、搜索跳同页锚点时：boot.js / star.js 挂 data-jump，瞬间跳（长页平滑滚会慢慢滚、量具读早、看着跑偏） */
html[data-jump] { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100svh;   /* 视口高单位按场景（控制室10-08定）：会滚的页面与它的首屏、舞台用 svh；盖满可见区的浮层用 dvh；封顶用 svh；不写裸 vh */
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  align-items: start;
  color: var(--label);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* 光晕：三团固定在视口。用 body::before{position:fixed}，不用 background-attachment:fixed（iOS 不支持）。 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(38vw 38vw at 12% 8%, var(--blob1), transparent 60%),
    radial-gradient(34vw 34vw at 92% 18%, var(--blob2), transparent 60%),
    radial-gradient(40vw 40vw at 70% 100%, var(--blob3), transparent 60%);
  filter: blur(10px);
}
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
code, pre, kbd { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: fixed; z-index: 60; left: 12px; top: 12px;
  padding: 10px 16px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent-gradient); text-shadow: 0 1px 2px rgba(0,0,0,.25);
  font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.skip:focus { transform: none; }
.i {
  width: calc(20 * var(--u)); height: calc(20 * var(--u)); flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 7. 外壳：侧栏（>900）/ 顶栏（≤900）---------- */
.side {
  position: sticky; top: 0; z-index: 20;
  height: 100svh;
  display: flex; flex-direction: column; gap: 2px;
  padding: calc(18 * var(--u)) calc(12 * var(--u)) calc(14 * var(--u));
  padding-left: max(calc(12 * var(--u)), env(safe-area-inset-left));
  background: var(--glass);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  border-right: 1px solid var(--glass-edge);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.brand {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(2 * var(--u)) calc(10 * var(--u)) calc(14 * var(--u));
  color: var(--label); text-decoration: none; border-radius: var(--r-sm);
}
.brand-icon {
  position: relative; flex: none; display: grid; place-items: center; overflow: hidden;
  width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: calc(10 * var(--u));
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 calc(6 * var(--u)) calc(14 * var(--u)) var(--accent-shadow);
}
.brand-svg {
  width: calc(24 * var(--u)); height: calc(24 * var(--u));
  fill: none; stroke: #FFFFFF; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
/* 屋主自己的图标（brand/brand-icon.svg|png）：star.js 探测到才挂 .has-file，绝对定位居中占方块84% */
.brand-file { position: absolute; inset: 0; margin: auto; width: 84%; height: 84%; object-fit: contain; }
.brand-icon.has-file .brand-svg { visibility: hidden; }
.brand-text { min-width: 0; }
.brand-text b { display: block; font-size: calc(17 * var(--u)); line-height: 1.25; white-space: nowrap; }
.brand-text span { display: block; font-size: var(--fs-xs); color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 导航区单独滚、品牌与外观控件钉在上下两头：视口比1440构图扁的时候（屋主台式2040×1019、带工具栏2040×930），
   等比放大后的侧栏装不下，余量从结构里来——只让中间的导航滚，外观控件永远看得见。 */
.side-nav {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  margin: 0 calc(-6 * var(--u)); padding: 0 calc(6 * var(--u)) calc(8 * var(--u));
}
.side-group { margin: calc(12 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 600; letter-spacing: .04em; color: var(--label2); }
.side-sec:first-child .side-group { margin-top: calc(2 * var(--u)); }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: calc(10 * var(--u));
  height: calc(34 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  color: var(--label); font-size: var(--fs-body); text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease;
}
.nav-ic { display: grid; place-items: center; color: var(--label2); }
.nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
a.nav-item[href]:not([aria-current]):hover { background: var(--hover); }
.nav-item[aria-current="page"] { background: var(--glass-strong); color: var(--accent-text); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav-item[aria-current="page"] .nav-ic { color: var(--accent-text); }
.nav-item[aria-disabled="true"] { color: var(--label2); cursor: default; }
.nav-item[aria-disabled="true"] .nav-ic { color: var(--label3); }
.nav-tag {
  margin-left: auto; flex: none; padding: 0 calc(7 * var(--u)); border-radius: 999px;
  background: var(--fill); color: var(--label2); font-size: calc(11 * var(--u)); line-height: 1.7; font-weight: 400;
}
.top-more { display: none; }
.side-foot { flex: none; padding: calc(12 * var(--u)) calc(8 * var(--u)) 0; border-top: 1px solid var(--sep); }
.side-ver { margin: 0; font-size: var(--fs-xs); color: var(--label2); white-space: nowrap; }

/* 外观控件：分段（radiogroup）+ 六个色点（每个点显示它自己的颜色，不引用当前 --accent） */
.theme { display: grid; gap: calc(10 * var(--u)); }
.theme-row { display: grid; gap: calc(6 * var(--u)); }
/* 「外观」「强调色」两个字只给读屏（分段的字与色点本身已经说明白了），省下侧栏两行高度 */
.theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.seg { display: flex; padding: 2px; border-radius: calc(10 * var(--u)); background: var(--fill); }
.seg button {
  flex: 1; min-width: 0; border: 0; background: transparent; cursor: pointer;
  padding: calc(5 * var(--u)) 0; border-radius: calc(8 * var(--u));
  color: var(--label); font-size: var(--fs-small); white-space: nowrap;
}
.seg button[aria-checked="true"] { background: var(--seg-on); font-weight: 600; box-shadow: var(--shadow-sm); }
.dots { display: flex; flex-wrap: wrap; gap: calc(11 * var(--u)); padding: 4px 3px; }
.dot {
  position: relative; flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u));
  padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--dot);
  transition: transform .15s ease;
}
.dot:hover { transform: scale(1.12); }
.dot:focus-visible { outline-offset: 4px; }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent); }
.dot[data-accent-set="blue"] { --dot: linear-gradient(135deg, var(--lt, #007AFF) var(--dk, #0A84FF), var(--lt, #5AC8FA) var(--dk, #64D2FF)); }
.dot[data-accent-set="green"] { --dot: linear-gradient(135deg, var(--lt, #34C759) var(--dk, #30D158), #A8E063); }
.dot[data-accent-set="indigo"] { --dot: linear-gradient(135deg, var(--lt, #5856D6) var(--dk, #5E5CE6), #BF5AF2); }
.dot[data-accent-set="orange"] { --dot: linear-gradient(135deg, var(--lt, #FF9500) var(--dk, #FF9F0A), #FFD60A); }
.dot[data-accent-set="pink"] { --dot: linear-gradient(135deg, var(--lt, #FF2D55) var(--dk, #FF375F), #FF9AA2); }
.dot[data-accent-set="teal"] { --dot: linear-gradient(135deg, var(--lt, #30B0C7) var(--dk, #40C8E0), #64D2FF); }
/* 色名气泡：压在别的东西上面，所以用实色（正文色底 + 页面底色字） */
.dot-name {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%);
  padding: 2px 8px; border-radius: 7px; background: var(--label); color: var(--bg);
  font-size: 12px; line-height: 1.5; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
}
.dot:hover .dot-name, .dot:focus-visible .dot-name { opacity: 1; }
/* 「背景模糊：自动 / 开 / 关」：这一行的「自动」和外观的「自动」同名，所以标签看得见、排在分段左边 */
.theme-row-blur { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(8 * var(--u)); }
.theme-label.is-shown { position: static; width: auto; height: auto; overflow: visible; clip: auto; font-size: var(--fs-xs); color: var(--label2); white-space: nowrap; }
.seg-sm button { padding: calc(3 * var(--u)) 0; font-size: var(--fs-xs); }
.theme-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin: calc(-2 * var(--u)) 0 calc(-4 * var(--u)); }
.theme-reset {
  display: inline-flex; align-items: center; gap: calc(5 * var(--u)); margin-left: calc(-7 * var(--u));
  height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)) 0 calc(7 * var(--u)); border: 0; border-radius: calc(8 * var(--u));
  background: transparent; color: var(--label2); font-size: var(--fs-xs); cursor: pointer;
}
.theme-reset:hover { background: var(--hover); color: var(--label); }
.theme-reset .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* ---------- 底部 tab bar（≤600才显示）---------- */
.tabbar { display: none; }
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-width: 0; padding: 6px 0 5px; border: 0; border-radius: 14px; background: none; cursor: pointer;
  color: var(--label2); font-size: 11px; line-height: 1.2; text-decoration: none;
}
.tab .i { width: 23px; height: 23px; }
.tab[aria-current="page"], .tab[aria-expanded="true"] { color: var(--accent-text); background: var(--glass-strong); font-weight: 600; }

/* ---------- 「更多」面板（≤900才有入口）：浮在正文上，玻璃提到 .88让字的底可预测 ---------- */
/* 遮罩是 .scrim-frost（第13节），按模糊档位糊开或压暗 */
.more-panel {
  position: fixed; z-index: 41;
  top: calc(var(--topbar-h) + 8px); right: max(12px, env(safe-area-inset-right));
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100svh - var(--topbar-h) - 24px); overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 14px 12px; border-radius: 22px;
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: var(--shadow-pop);
  animation: sheet-in .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes sheet-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
.more-head { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 6px; }
.more-title { margin: 0; font-size: 17px; font-weight: 700; }
.more-close {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: var(--fill); color: var(--label2); cursor: pointer;
}
.more-close .i { width: 18px; height: 18px; }
.more-sub { margin: 12px 6px 6px; font-size: 12px; font-weight: 600; color: var(--label2); }
.more-list { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; background: var(--raised); }
.more-list > li + li > .row::before { content: ""; position: absolute; top: 0; right: 0; left: 60px; border-top: 1px solid var(--sep); }
.more-list .row { min-height: 54px; padding: 8px 12px; gap: 12px; }
.more-list .row .ico { width: 30px; height: 30px; border-radius: 8px; }
.more-list .row .ico .i { width: 17px; height: 17px; }
.more-list .t small { font-size: 12px; }
.more-panel .theme { padding: 12px; border-radius: 16px; background: var(--raised); }
.more-panel .seg { background: var(--fill); }
.more-ver { margin: 10px 6px 0; font-size: 12px; color: var(--label2); }

/* ---------- 8. 页面、目录、分组 ---------- */
.page {
  min-width: 0;
  padding: var(--page-pt) var(--page-x) calc(72 * var(--u));
  padding-right: max(var(--page-x), env(safe-area-inset-right));
  /* 切页进场：正文淡入＋上移8px，侧栏不动。fill 只取 backwards：走完就不再作用（不留 transform，
     不然 .page 会一直是 fixed 后代的参照）。跨页 View Transition 接手时 html.vt-nav 关掉它（第14节） */
  animation: page-in 260ms cubic-bezier(.2, .8, .2, 1) backwards;
}
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
/* 带 #锚点 打开（boot.js 挂 jump-in）：只淡入不上移——浏览器按带位移的盒子算锚点落点，会偏8px（实测16 → 7.6） */
html.jump-in .page { animation-name: page-fade; }
@keyframes page-fade { from { opacity: 0; } }
.page-head { padding: var(--pad); border-radius: var(--r-lg); background: var(--glass-strong); box-shadow: var(--shadow); }
.page-title { margin: 0; font-size: var(--fs-title); line-height: 1.2; font-weight: 700; letter-spacing: -.4px; }
.page-sub { margin: calc(8 * var(--u)) 0 0; max-width: var(--measure); color: var(--label2); font-size: var(--fs-lead); line-height: 1.7; }
.page-toc:empty { display: none; }
.page-toc { display: grid; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid var(--sep); }
.toc-group { display: grid; grid-template-columns: calc(112 * var(--u)) minmax(0, 1fr); gap: calc(6 * var(--u)) calc(12 * var(--u)); align-items: start; }
.toc-label { padding-top: calc(4 * var(--u)); font-size: var(--fs-xs); font-weight: 600; line-height: 1.5; color: var(--label2); }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)) calc(8 * var(--u)); min-width: 0; }
.toc-list li { max-width: 100%; }
.toc-pill {
  display: inline-block; max-width: 100%; height: calc(28 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 999px; background: var(--fill); color: var(--label);
  font-size: var(--fs-small); line-height: calc(28 * var(--u)); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background-color .15s ease, color .15s ease;
}
.toc-pill:hover { background: var(--accent-tint); color: var(--accent-text); }

.group { margin-top: calc(40 * var(--u)); scroll-margin-top: calc(16 * var(--u)); }
.group-title { display: flex; align-items: center; gap: calc(10 * var(--u)); margin: 0 0 calc(14 * var(--u)); font-size: var(--fs-h2); line-height: 1.3; font-weight: 700; color: var(--label); }
.group-title::before { content: ""; flex: none; width: calc(6 * var(--u)); height: calc(22 * var(--u)); border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.group[data-scope="xiaowu"] .group-title::before { background: linear-gradient(180deg, #5E6144, #8B8C6D); }
.group[data-scope="common"] .group-title::before { background: linear-gradient(180deg, #8E8E93, #C7C7CC); }
/* 分组下的说明直接压在光晕上：只用正文色（次级色压光晕中心实测只有3.5，见色彩页「对比度」条目） */
.group-lede { margin: calc(-4 * var(--u)) 0 calc(16 * var(--u)); max-width: var(--measure); color: var(--label); }

/* ---------- 9. 条目组件 ---------- */
.entry {
  position: relative; min-width: 0;
  margin: 0 0 calc(18 * var(--u)); padding: var(--pad);
  border-radius: var(--r-lg); background: var(--glass-strong); box-shadow: var(--shadow);
  scroll-margin-top: calc(16 * var(--u));
  --scope-tint: var(--scope-tools-tint); --scope-text: var(--scope-tools-text);
}
/* 条目卡不挂 backdrop-filter：卡又长又多，屋主台式机没显卡，磨砂是那台机器的瓶颈。 */
.entry[data-scope="xiaowu"] { --scope-tint: var(--scope-xw-tint); --scope-text: var(--scope-xw-text); }
.entry[data-scope="common"] { --scope-tint: var(--fill); --scope-text: var(--label2); }
.entry-head h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.4; font-weight: 700; letter-spacing: -.2px; }
.entry-lede { margin: calc(6 * var(--u)) 0 0; max-width: var(--measure); color: var(--label2); line-height: 1.7; }
.entry-tags { list-style: none; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin: calc(12 * var(--u)) 0 0; padding: 0; }
.entry-tags li {
  display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(9 * var(--u));
  border-radius: 999px; background: var(--fill); color: var(--label2); font-size: var(--fs-xs); line-height: 1; white-space: nowrap;
}
.entry-tags .scope { font-weight: 600; background: var(--scope-tint); color: var(--scope-text); }
.specimen {
  min-width: 0; margin-top: calc(18 * var(--u)); padding: calc(18 * var(--u));
  border: 1px solid var(--sep); border-radius: var(--r-md); background: var(--well);
  overflow-x: auto;
}
/* overflow-x 不是 visible 时纵向也会被裁：浮层要伸出框外的样例加这个类（见文件头「样例框与减弱动效的约定」） */
.specimen.is-overflow-visible { overflow: visible; }
.entry-body { display: grid; gap: calc(14 * var(--u)); min-width: 0; margin-top: calc(20 * var(--u)); }
.fact { position: relative; min-width: 0; padding-left: calc(var(--label-w) + 18 * var(--u)); }
.fact > h4 {
  position: absolute; left: 0; top: 0; width: var(--label-w); margin: 0;
  padding-top: calc(2 * var(--u)); font-size: var(--fs-small); line-height: 1.6; font-weight: 600; color: var(--label2);
}
.fact > * + * { margin-top: calc(8 * var(--u)); }
.fact p, .fact ul, .fact ol { margin: 0; max-width: var(--measure); line-height: 1.75; }
.fact > * + p, .fact > * + ul, .fact > * + ol, .fact > * + .codebox, .fact > * + pre, .fact > * + table { margin-top: calc(8 * var(--u)); }
.fact ul, .fact ol { padding-left: 1.25em; }
.fact li + li { margin-top: calc(3 * var(--u)); }
/* 行内代码：实色底（--fill）上压正文色 */
.page :not(pre) > code { padding: .08em .38em; border-radius: 5px; background: var(--fill); color: var(--label); font-size: .9em; overflow-wrap: anywhere; }
.page pre code { padding: 0; border-radius: 0; background: none; font-size: 1em; overflow-wrap: normal; }
.fact.trap { padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u) + var(--label-w) + 18 * var(--u)); border-radius: var(--r-sm); background: var(--orange-tint); }
.fact.trap > h4 { left: calc(16 * var(--u)); top: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(5 * var(--u)); color: var(--orange-text); }
.fact.trap > h4::before {
  content: ""; flex: none; width: calc(16 * var(--u)); height: calc(16 * var(--u)); background: currentColor;
  -webkit-mask: var(--ic-alert) center / contain no-repeat; mask: var(--ic-alert) center / contain no-repeat;
}
.said { position: relative; margin: 0; padding: calc(2 * var(--u)) 0 calc(2 * var(--u)) calc(18 * var(--u)); max-width: calc(var(--measure) + 18 * var(--u)); color: var(--label); }
.said::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 2px; background: linear-gradient(180deg, var(--accent), var(--accent-2)); }
.said p { margin: 0; font-size: var(--fs-lead); line-height: 1.75; }
.said p + p { margin-top: calc(4 * var(--u)); }
.said footer { margin-top: calc(6 * var(--u)); font-size: var(--fs-xs); color: var(--label2); }
.source {
  position: relative; margin: 0; padding-left: calc(20 * var(--u));
  font-size: var(--fs-xs); line-height: 1.7; color: var(--label2); overflow-wrap: anywhere;
}
.source::before {
  content: ""; position: absolute; left: 0; top: .28em; width: calc(14 * var(--u)); height: calc(14 * var(--u)); background: currentColor;
  -webkit-mask: var(--ic-doc) center / contain no-repeat; mask: var(--ic-doc) center / contain no-repeat;
}
.page .source code, .page .said footer code { padding: 0; background: none; color: inherit; font-size: 1em; }
.entry-body > .said, .entry-body > .source { margin-left: calc(var(--label-w) + 18 * var(--u)); }

/* 代码块：star.js 把 pre 包进 .codebox 并加「复制」按钮；横向溢出只在块内滚 */
.codebox { position: relative; min-width: 0; }
.entry pre, .codebox pre {
  margin: 0; padding: calc(14 * var(--u)) calc(16 * var(--u)); overflow-x: auto;
  border: 1px solid var(--sep); border-radius: var(--r-sm); background: var(--code-bg); color: var(--label);
  font-size: calc(13 * var(--u)); line-height: 1.65; tab-size: 2; white-space: pre;
}
.copy-btn {
  position: absolute; top: calc(7 * var(--u)); right: calc(7 * var(--u));
  display: inline-flex; align-items: center; gap: calc(4 * var(--u));
  height: calc(26 * var(--u)); padding: 0 calc(9 * var(--u)); border: 0; border-radius: calc(7 * var(--u));
  background: var(--raised); color: var(--label2); box-shadow: var(--shadow-sm);
  font-size: var(--fs-xs); cursor: pointer;
}
.copy-btn .i { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
.copy-btn:hover { color: var(--label); }
.copy-btn.is-done { color: var(--green-text); }

/* ---------- 10. 通用小件 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); border: 0; border-radius: calc(12 * var(--u));
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--on-accent-gradient); text-shadow: 0 1px 2px rgba(0,0,0,.25);
  font-size: var(--fs-body); font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer;
  box-shadow: 0 calc(8 * var(--u)) calc(18 * var(--u)) var(--accent-shadow);
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.btn-tint { background: var(--accent-tint); color: var(--accent-text); text-shadow: none; box-shadow: none; }
.btn-glass { background: var(--glass-strong); color: var(--label); text-shadow: none; box-shadow: var(--shadow); }
.pill, .pill-accent {
  display: inline-flex; align-items: center; height: calc(24 * var(--u)); padding: 0 calc(10 * var(--u));
  border-radius: 999px; font-size: calc(12.5 * var(--u)); white-space: nowrap;
}
.pill { background: var(--fill); color: var(--label2); }
/* 行内的范围标签（正文里提到「工具 / 小屋 / 通用」时用） */
.scope-chip {
  display: inline-flex; align-items: center; height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); margin: 0 calc(2 * var(--u));
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; line-height: 1; vertical-align: 1px; white-space: nowrap;
}
.scope-tools { background: var(--scope-tools-tint); color: var(--scope-tools-text); }
.scope-xw { background: var(--scope-xw-tint); color: var(--scope-xw-text); }
.scope-common { background: var(--fill); color: var(--label2); }
.pill-accent { background: var(--accent-tint); color: var(--accent-text); font-weight: 600; }

/* iOS 设置式分组列表：32px 彩色方块 + 标题 / 副标题 + 计数胶囊 + chevron（SPEC §1、§5b） */
.list { list-style: none; margin: 0; padding: 0; border-radius: var(--r-lg); background: var(--glass-strong); box-shadow: var(--shadow); overflow: hidden; }
.list > li + li > .row::before { content: ""; position: absolute; top: 0; right: 0; left: calc(62 * var(--u)); border-top: 1px solid var(--sep); }
.row {
  position: relative; display: flex; align-items: center; gap: calc(14 * var(--u)); min-width: 0;
  min-height: calc(62 * var(--u)); padding: calc(11 * var(--u)) calc(16 * var(--u));
  color: var(--label); text-decoration: none;
}
a.row:hover { background: var(--hover); }
.row .ico {
  position: relative; flex: none; display: grid; place-items: center;
  width: calc(32 * var(--u)); height: calc(32 * var(--u)); border-radius: calc(9 * var(--u));
  color: #FFFFFF; box-shadow: 0 2px 5px rgba(0,0,0,.12);
}
/* 高光与顶边亮线画在伪元素上：方块底色写在内联 style 的 background 简写里，会把 background-image 一起覆盖掉 */
.row .ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.row .ico .i { position: relative; z-index: 1; width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.row .t { flex: 1; min-width: 0; }
.row .t b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .t small { display: block; margin-top: 1px; color: var(--label2); font-size: var(--fs-small); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .badge { flex: none; padding: calc(2 * var(--u)) calc(9 * var(--u)); border-radius: 999px; background: var(--fill); color: var(--label2); font-size: calc(12.5 * var(--u)); white-space: nowrap; font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.row .chev { flex: none; display: grid; color: var(--label3); }
.row .chev .i { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
.row[aria-disabled="true"] { cursor: default; }
.row[aria-disabled="true"] .t b { color: var(--label2); }
.row[aria-disabled="true"] .ico { opacity: .5; }
.row[aria-current="page"] .t b { color: var(--accent-text); }

/* 点一下复制：button[data-copy]。「已复制」气泡（ix-lightbox 气泡那半）挂 body、position:fixed（按钮常在
   overflow 裁切的样例框里，挂在按钮里会被裁），浮在按钮上方、箭头指着按钮中心；贴边时整体挪进来，箭头按 --ax 反向移；
   上方被顶栏 / 视口顶挡住就翻到下方（.is-below）。出现160ms，1400ms 后 .is-leaving 淡出140ms 再删。实色。 */
[data-copy] { position: relative; cursor: pointer; }
.copy-bubble {
  position: fixed; left: 0; top: 0; z-index: 60;
  padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u));
  background: var(--label); color: var(--bg);
  font-size: calc(12 * var(--u)); line-height: 1.5; font-weight: 600; white-space: nowrap; pointer-events: none;
  transform-origin: var(--ax, 50%) 100%;
  animation: bub-in 160ms cubic-bezier(.2, .8, .2, 1) both;
}
/* 箭头：边框三角，不用 transform；按 --ax 停在按钮中心正上方（气泡躲了多少，它反向移多少） */
.copy-bubble::after { content: ""; position: absolute; left: var(--ax, 50%); top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--label); }
.copy-bubble.is-below { transform-origin: var(--ax, 50%) 0; animation-name: bub-in-below; }
.copy-bubble.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--label); }
.copy-bubble.is-leaving { animation: bub-out 140ms ease both; }
@keyframes bub-in { from { opacity: 0; transform: translateY(4px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bub-in-below { from { opacity: 0; transform: translateY(-4px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bub-out { from { opacity: 1; } to { opacity: 0; } }
@media (forced-colors: active) {
  .copy-bubble { border: 1px solid CanvasText; }
  .copy-bubble::after { forced-color-adjust: none; border-top-color: CanvasText; }
  .copy-bubble.is-below::after { border-top-color: transparent; border-bottom-color: CanvasText; }
}

/* ---------- 11. .xw 小屋暖纸作用域（Ysevan_web/app/globals.css 的色值；夜里 .xw[data-mode="dark"]）----------
   色值按 globals.css 里的 HSL 实算（夜里那组的十六进制注释是近似值，差1–8个色阶，以 HSL 为准）。
   令牌声明挂在 .xw 与 .xw 里任何带 data-mode 的元素上，局部切白天 / 夜里都会重算；
   夜里是「冷夜暖灯」：底沉进225色相的青蓝炭，字与灯全是暖的（42–45）。 */
.xw, .xw [data-mode] {
  --xw-paper: var(--lt, #F8F6F1) var(--dk, #15171B);
  --xw-card: var(--lt, #FDFCF9) var(--dk, #1E1F25);
  --xw-ink: var(--lt, #2E2D28) var(--dk, #E7E3DA);
  --xw-ink-body: var(--lt, #3E3C35) var(--dk, #DDD9D0);
  --xw-ink-2: var(--lt, #6C6A61) var(--dk, #B1ABA0);
  --xw-ink-3: var(--lt, #6B685B) var(--dk, #9F9A8E);
  --xw-olive: var(--lt, #5E6144) var(--dk, #CDBF98);
  --xw-on-olive: var(--lt, #F6F4EE) var(--dk, #16181D);
  --xw-olive-tint: var(--lt, #E1E0CE) var(--dk, #2E3138);
  --xw-olive-deep: var(--lt, #4A4D35) var(--dk, #E0D7BD);
  --xw-olive-mid: var(--lt, #52553C) var(--dk, #C3BAA2);
  --xw-olive-2: var(--lt, #8B8C6D) var(--dk, #A9A189);
  --xw-block: var(--lt, #D5D4C1) var(--dk, #2A2E37);
  --xw-muted: var(--lt, #EDEAE3) var(--dk, #25272D);
  --xw-line: var(--lt, #E4E0D6) var(--dk, #353840);
  --xw-lava: var(--lt, #AA4E1D) var(--dk, #EB8947);
  --xw-haze-warm: var(--lt, #F2EDE2) var(--dk, #262017);
  --xw-haze-cool: var(--lt, #E9EEEC) var(--dk, #1A1D23);
  --xw-shadow-rest: 0 1px 2px rgba(74,77,53,.05);
  --xw-shadow-lift: 0 8px 20px -10px rgba(74,77,53,.11);
}
.xw {
  color: var(--xw-ink-body);
  background:
    radial-gradient(120% 80% at 88% -14%, var(--xw-haze-warm) 0%, transparent 62%),
    radial-gradient(90% 70% at 2% 106%, var(--xw-haze-cool) 0%, transparent 58%),
    var(--xw-paper);
}
.xw-kai { font-family: var(--font-kai); font-weight: 400; }

/* ---------- 12. 断点 ---------- */
@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .side {
    height: auto; min-height: var(--topbar-h);
    flex-direction: row; align-items: center; gap: 8px;
    padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
    overflow: visible; border-right: 0; border-bottom: 1px solid var(--glass-edge);
  }
  .brand { flex: none; padding: 0 6px 0 0; }
  .brand-text span { display: none; }
  .side-nav { flex: 1; min-width: 0; position: relative; display: flex; gap: 4px; margin: 0; padding: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }   /* relative：下面读屏用的分组标题是 absolute，不给它一个参照就以吸顶的 .side 为参照、不受导航框裁切，十章全上线后在768把整页撑到1167 */
  .side-nav::-webkit-scrollbar { display: none; }
  .side-sec { display: flex; }
  .side-sec:not(:has(li:not(.is-pending))) { display: none; }
  .side-group { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
  .side-list { display: flex; gap: 4px; }
  .side-list .is-pending { display: none; }
  .nav-item { height: 34px; padding: 0 10px; font-size: 14px; }
  .nav-item .i { width: 18px; height: 18px; }
  .side-foot { display: none; }
  .top-more {
    display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; padding: 0 12px;
    border: 0; border-radius: 10px; background: var(--fill); color: var(--label); font-size: 14px; cursor: pointer;
  }
  .top-more .i { width: 18px; height: 18px; }
  .top-more[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent-text); }
  /* 吸顶顶栏的高度只让 html 的 scroll-padding 管一次；条目自己只留12px（两处都加顶栏高时，768下锚点落在
     132px 处——顶栏下面空出76px，2026-10-08搜索跳转实测）。落点 = 64 + 12 = 76，顶栏下留20，和 ≤600一样 */
  .entry, .group { scroll-margin-top: 12px; }
  html { scroll-padding-top: calc(var(--topbar-h) + 8px); }
}
@media (min-width: 901px) {
  .more-panel, .more-scrim { display: none !important; }
}
@media (max-width: 600px) {
  .side { position: relative; }
  .side-nav, .top-more { display: none; }
  html { scroll-padding-top: 8px; }
  .entry, .group { scroll-margin-top: 12px; }
  .tabbar {
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    background: var(--glass);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    border-top: 1px solid var(--glass-edge);
    box-shadow: 0 -1px 0 var(--sep);
  }
  .more-panel {
    top: auto; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); width: auto;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
    max-height: calc(100svh - var(--tabbar-h) - env(safe-area-inset-bottom) - 40px);
  }
  .page { padding: 16px max(16px, env(safe-area-inset-right)) calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left)); }
  .toc-group { grid-template-columns: minmax(0, 1fr); }
  .toc-label { padding-top: 0; }
  .fact, .fact.trap { padding-left: 0; }
  .fact.trap { padding-left: 14px; padding-right: 14px; }
  .fact > h4 { position: static; width: auto; padding: 0 0 4px; }
  .fact > h4 + * { margin-top: 0; }
  .fact.trap > h4 { padding-bottom: 6px; }
  .entry-body > .said, .entry-body > .source { margin-left: 0; }
  .group { margin-top: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* 约定：data-rm="fade" 的元素只留 opacity 过渡（原地淡入淡出），其余照关。见文件头「样例框与减弱动效的约定」 */
  [data-rm="fade"] { transition: opacity var(--rm-fade, .2s) ease !important; }
}

/* ==========================================================================
 * 第二阶段：外壳用上合集（2026-10-08）。规则与契约见文件头「页面可以用的外壳钩子」「模糊档位」「过渡」。
 * ========================================================================== */

/* ---------- 13. 模糊档位与整页遮罩 ---------- */
/* .scrim-frost + .is-open：整页遮罩（「更多」面板、搜索浮层、kit 弹层共用）。
   默认（lite / off / 没写档位）= ix-sheet-frosted 的降级做法：不模糊、压暗淡入（开1s、关 .3s）。 */
.scrim-frost {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim-dim);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .3s;
}
.scrim-frost.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 1s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* full：背景由清楚糊到26px、只糊不压暗（例外：动的是 backdrop-filter 半径，照原文；代价写在交互页那一条里） */
html[data-blur="full"] .scrim-frost {
  background: transparent; opacity: 1;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition: -webkit-backdrop-filter .3s cubic-bezier(.4, 0, 1, 1), backdrop-filter .3s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .3s;
}
html[data-blur="full"] .scrim-frost.is-open {
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  transition: -webkit-backdrop-filter 1s cubic-bezier(.2, .7, .2, 1), backdrop-filter 1s cubic-bezier(.2, .7, .2, 1), visibility 0s;
}
/* 做不出磨砂 / 用户要求减少透明度：full 也走压暗（探针带前缀，外层括号不能省） */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-blur="full"] .scrim-frost { background: var(--scrim-dim); opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .3s; }
  html[data-blur="full"] .scrim-frost.is-open { opacity: 1; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-blur="full"] .scrim-frost, html[data-blur="full"] .scrim-frost.is-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--scrim-dim); }
  html[data-blur="full"] .scrim-frost { opacity: 0; transition: opacity .3s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .3s; }
  html[data-blur="full"] .scrim-frost.is-open { opacity: 1; transition: opacity 1s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
}
/* 弹层面板：full 玻璃 + 自己的磨砂；lite / off 不模糊、底提到 .97（压在压暗的背景上，磨砂本来也看不出） */
.sheet-glass {
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
}
html[data-blur="lite"] .more-panel, html[data-blur="off"] .more-panel,
html[data-blur="lite"] .search-sheet, html[data-blur="off"] .search-sheet,
html[data-blur="lite"] .sheet-glass, html[data-blur="off"] .sheet-glass {
  background: var(--glass-panel-solid);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* off：侧栏 / 顶栏 / tab bar 的常驻磨砂也关，玻璃提到近乎不透明（同第5节「做不出磨砂」那套数） */
html[data-blur="off"], html[data-blur="off"] [data-mode], html[data-blur="off"] [data-accent] {
  --glass: var(--lt, rgba(255,255,255,.9)) var(--dk, rgba(40,42,52,.92));
  --glass-strong: var(--lt, rgba(255,255,255,.96)) var(--dk, rgba(44,46,58,.96));
  --glass-panel: var(--lt, rgba(255,255,255,.97)) var(--dk, rgba(36,38,48,.97));
}
html[data-blur="off"] .side, html[data-blur="off"] .tabbar {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- 14. 过渡：切明暗、切强调色、切页（View Transition）---------- */
/* 跨页：两页都写了才生效（http(s) 与 file:// 同目录都行，Chrome 155实测）。减弱动效不开；lite / off 由脚本跳过。
   boot.js 还用构造样式表再挂了一份同样的规则：file:// 下只靠这里的话，新页判开关那一刻外部样式表时有时无（20次9–10次被中止）。 */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
/* 侧栏与 tab bar 只在跨页那一下起名（起了名的元素是 backdrop root，见文件头「过渡」） */
html.vt-nav .side { view-transition-name: star-side; }
html.vt-nav .tabbar { view-transition-name: star-tabbar; }
html.vt-nav .page { animation: none; }
html.vt-nav::view-transition-old(root) { animation: vt-out 200ms cubic-bezier(.4, 0, 1, 1) both; }
html.vt-nav::view-transition-new(root) { animation: vt-in 260ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }
/* 切明暗：新画面整张盖在旧画面上，由 star.js 在 ::view-transition-new(root) 上动 clip-path 圆（420ms），这里关掉默认的交叉淡入 */
html.vt-reveal::view-transition-old(root),
html.vt-reveal::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
/* 切强调色：默认交叉淡入，时长改260ms */
html.vt-fade::view-transition-group(root),
html.vt-fade::view-transition-old(root),
html.vt-fade::view-transition-new(root) { animation-duration: 260ms; }

/* ---------- 15. 搜索 ---------- */
/* 侧栏里的搜索框（>900）；≤900这一格藏起来，整个 form 被 star.js 搬进 #search-sheet */
.side-search { flex: none; padding: 0 calc(2 * var(--u)) calc(8 * var(--u)); }
.search-field {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--u));
  min-height: calc(34 * var(--u)); margin: 0;
  padding: calc(3 * var(--u)) calc(7 * var(--u)) calc(3 * var(--u)) calc(9 * var(--u));
  border-radius: calc(10 * var(--u)); background: var(--fill); color: var(--label); cursor: text;
}
.search-field:focus-within { background: var(--raised); outline: 2px solid var(--accent); outline-offset: 2px; }
.search-ic { flex: none; display: grid; place-items: center; color: var(--label2); }
.search-ic .i { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.search-input {
  flex: 1 1 calc(60 * var(--u)); min-width: calc(60 * var(--u)); height: calc(28 * var(--u));
  margin: 0; padding: 0 calc(3 * var(--u)); border: 0; background: transparent;
  color: var(--label); font: inherit; font-size: var(--fs-small);
}
.search-input:focus, .search-input:focus-visible { outline: none; }    /* 焦点环画在整只框上（:focus-within） */
.search-input::placeholder { color: var(--label2); opacity: 1; }
.search-kbd, .more-search kbd {
  flex: none; min-width: calc(19 * var(--u)); height: calc(19 * var(--u)); padding: 0 calc(5 * var(--u));
  border: 1px solid var(--sep); border-radius: calc(5 * var(--u)); background: var(--raised); color: var(--label2);
  font: 600 calc(11 * var(--u)) / calc(17 * var(--u)) var(--mono); text-align: center;
}
.search-field:focus-within .search-kbd { display: none; }
/* 标签胶囊（ix-tags）：底色单独一层，删除时横竖各按自己的比例缩成圆点；中心圆点再淡入、缩没 */
.search-chip {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: calc(1 * var(--u)); max-width: 100%;
  height: calc(24 * var(--u)); padding: 0 calc(1 * var(--u)) 0 calc(8 * var(--u)); border-radius: 999px;
  color: var(--accent-text); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.sc-bg { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--accent-tint); }
.sc-dot {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); margin: calc(-3 * var(--u)) 0 0 calc(-3 * var(--u));
  border-radius: 50%; background: var(--accent); opacity: 0; pointer-events: none;
}
.sc-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: calc(140 * var(--u)); }
.sc-x {
  flex: none; display: inline-grid; place-items: center;
  width: calc(22 * var(--u)); height: calc(22 * var(--u)); padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: inherit; cursor: pointer;
}
.sc-x:hover { background: var(--raised); }
.sc-x-i, .so-hash-i { width: calc(12 * var(--u)); height: calc(12 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.search-chip.is-removing { pointer-events: none; }

/* ≤900：顶栏品牌右边的搜索按钮 → 整页浮层（遮罩 .scrim-frost + 顶上一条面板） */
.top-search { display: none; }
.search-scrim { z-index: 44; }
.search-sheet {
  position: fixed; z-index: 45;
  top: calc(8px + env(safe-area-inset-top)); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right));
  max-width: 640px; margin: 0 auto;
  display: flex; align-items: flex-start; gap: 6px; padding: 8px;
  border-radius: 20px;
  background: var(--glass-panel);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  box-shadow: var(--shadow-pop);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
}
.search-sheet.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s cubic-bezier(.2, .8, .2, 1), transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.search-slot { flex: 1; min-width: 0; }
.search-sheet .search-field { min-height: 42px; padding: 4px 8px 4px 11px; border-radius: 13px; }
.search-sheet .search-ic .i { width: 18px; height: 18px; }
.search-sheet .search-input { height: 32px; font-size: 16px; }   /* iOS 上输入框字号小于16px 会在聚焦时整页放大 */
.search-sheet .search-chip { height: 28px; font-size: 13px; }
.search-cancel {
  flex: none; height: 42px; padding: 0 10px; border: 0; border-radius: 12px;
  background: transparent; color: var(--accent-text); font-size: 15px; font-weight: 600; cursor: pointer;
}
@media (min-width: 901px) {
  .search-sheet, .search-scrim { display: none !important; }
}

/* 结果列表：挂 body、fixed 贴着输入框（侧栏有 overflow 与 backdrop-filter，放里面会被裁、fixed 会错参照）。
   实色、不挂磨砂（ix-suggest：浮层挂上磨砂，没显卡那台整页 P95翻倍） */
.search-pop {
  position: fixed; z-index: 46; left: 0; top: 0;
  margin: 0; padding: calc(4 * var(--u)); overflow-y: auto; overscroll-behavior: contain;
  border-radius: var(--r-sm); background: var(--raised); color: var(--label); box-shadow: var(--shadow-pop);
  transform-origin: top left;
}
.search-list { list-style: none; margin: 0; padding: 0; }
.so {
  display: grid; gap: calc(1 * var(--u)); min-width: 0;
  padding: calc(7 * var(--u)) calc(10 * var(--u)); border-radius: calc(8 * var(--u)); cursor: pointer;
}
.so[aria-selected="true"] { background: var(--accent-tint); }
.so-line { display: flex; align-items: baseline; gap: calc(8 * var(--u)); min-width: 0; }
.so-title { flex: 0 1 auto; min-width: 0; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so[aria-selected="true"] .so-title { color: var(--accent-text); }
.so-where { flex: 0 1 auto; max-width: 45%; margin-left: auto; font-size: var(--fs-xs); color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so-sum { min-width: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--label2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.so mark { background: transparent; color: var(--accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.so-badge { flex: none; padding: 0 calc(6 * var(--u)); border-radius: 999px; background: var(--fill); color: var(--label2); font-size: var(--fs-xs); font-weight: 400; }
.so-tag .so-line { align-items: center; }
.so-hash { flex: none; display: grid; place-items: center; color: var(--label2); }
.so[aria-selected="true"] .so-hash { color: inherit; }
.so-n { flex: none; margin-left: auto; font-size: var(--fs-xs); color: var(--label2); font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.search-note, .search-foot { margin: 0; padding: calc(6 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)); font-size: var(--fs-xs); line-height: 1.5; color: var(--label2); }
.search-foot { margin-top: calc(4 * var(--u)); border-top: 1px solid var(--sep); }

/* 「更多」面板顶上的搜索入口（≤600顶栏随页面滚走） */
.more-search {
  display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; margin: 2px 0 4px; padding: 0 10px 0 12px;
  border: 0; border-radius: 12px; background: var(--fill); color: var(--label2); font-size: 15px; text-align: left; cursor: pointer;
}
.more-search .i { width: 18px; height: 18px; }
.more-search span { flex: 1; }

@media (max-width: 900px) {
  .side-search { display: none; }
  .top-search {
    display: inline-grid; place-items: center; flex: none;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 10px;
    background: var(--fill); color: var(--label); cursor: pointer;
  }
  .top-search .i { width: 18px; height: 18px; }
  .top-search[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent-text); }
}
@media (max-width: 600px) {
  :root { --page-pt: 16px; }
  .top-search { margin-left: auto; }
}

/* ---------- 16. 提示条（恢复默认外观 · 撤销）、跳转点亮的光环 ---------- */
.toast {
  position: fixed; z-index: 50; left: 50%; bottom: calc(20 * var(--u) + env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: calc(8 * var(--u)); max-width: calc(100vw - 32px);
  padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(16 * var(--u)); border-radius: 999px;
  background: var(--label); color: var(--bg); box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  font-size: var(--fs-small); font-weight: 600; line-height: 1.5; white-space: nowrap;
  opacity: 0; visibility: hidden; transform: translate(-50%, 8px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.toast:empty { display: none; }
.toast.is-open {
  opacity: 1; visibility: visible; transform: translate(-50%, 0);
  transition: opacity .18s cubic-bezier(.2, .8, .2, 1), transform .18s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}
.toast-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.toast-dot { flex: none; width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.toast-undo {
  flex: none; padding: calc(4 * var(--u)) calc(12 * var(--u)); border: 0; border-radius: 999px;
  background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .2em; cursor: pointer;
}
.toast:not(:has(.toast-undo)) { padding-right: calc(16 * var(--u)); }
.toast-undo:focus-visible { outline-color: var(--bg); outline-offset: 1px; }
@media (max-width: 600px) {
  .toast { bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 12px); }
}
@media (forced-colors: active) { .toast { border: 1px solid CanvasText; } }

/* 跳转点亮：挂 body、fixed 跟着目标走（star.js 每帧量）；只动 opacity / transform，亮两下 */
.spot-ring {
  position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none;
  border: 2.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--accent-shadow), 0 0 24px 2px var(--accent-shadow);
  animation: spot-pulse 1.2s cubic-bezier(.4, 0, .2, 1) both;
}
.spot-ring.is-static { animation: none; opacity: 1; }
@keyframes spot-pulse {
  0% { opacity: 0; transform: scale(1.06); }
  16% { opacity: 1; transform: scale(1); }
  40% { opacity: .2; transform: scale(1); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1); }
}

/* ---------- 17. 长代码下拉展开（ix-sheet-pull）、「本站这里在用」 ---------- */
/* 超过14行的 pre 包进 .code-clip 只露前8行；下沿 .code-pull 一条虚线 + 把手。
   例外：动的是 .code-clip 的 height——代码块在正文流里，展开要把下面的内容推下去（理由见 star.js 第15条）。 */
.codebox.is-pull .code-clip {
  position: relative; overflow: hidden; height: var(--code-h);
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  transition: height .5s cubic-bezier(.3, 1.35, .5, 1);
}
.codebox.is-pull.is-open .code-clip { height: var(--code-full); transition: height .45s cubic-bezier(.2, .7, .2, 1); }
.codebox.is-pull:not(.is-open) .code-clip::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: calc(28 * var(--u));
  background: linear-gradient(180deg, transparent, var(--code-bg)); pointer-events: none;
}
.codebox.is-pull pre { border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; }
.code-pull {
  position: relative;
  border: 1px solid var(--sep); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--code-bg);
  transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.3, 1.35, .5, 1);
}
.code-pull::before { content: ""; position: absolute; left: calc(14 * var(--u)); right: calc(14 * var(--u)); top: 0; border-top: 2px dashed var(--sep); }
.codebox.is-dragging .code-clip, .codebox.is-dragging .code-pull { transition: none; }
.code-handle {
  display: grid; justify-items: center; align-content: center; gap: calc(4 * var(--u)); width: 100%;
  padding: calc(9 * var(--u)) 0 calc(9 * var(--u)); border: 0; border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: transparent; color: var(--label2); font: inherit; font-size: var(--fs-xs); line-height: 1.3;
  cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;
}
.code-handle:active { cursor: grabbing; }
.code-handle:hover { color: var(--label); }
.code-handle i { display: block; width: calc(36 * var(--u)); height: calc(4 * var(--u)); border-radius: 999px; background: var(--label3); }
.code-handle:focus-visible { outline-offset: -4px; }

/* 「本站这里在用」：小、不抢标题；链接是小胶囊带一个「→」线条图标，可多个、窄屏换行 */
.used-here {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--u)) calc(8 * var(--u));
  margin: calc(10 * var(--u)) 0 0; font-size: var(--fs-xs); line-height: 1.4;
}
.used-label { color: var(--label2); font-weight: 600; white-space: nowrap; }
.used-here a {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); max-width: 100%;
  min-height: calc(22 * var(--u)); padding: calc(2 * var(--u)) calc(7 * var(--u)) calc(2 * var(--u)) calc(9 * var(--u));
  border-radius: 999px; background: var(--accent-tint); color: var(--accent-text);
  font-weight: 600; text-decoration: none; overflow-wrap: anywhere;
}
.used-here a::after {
  content: ""; flex: none; width: calc(12 * var(--u)); height: calc(12 * var(--u)); background: currentColor;
  -webkit-mask: var(--ic-arrow) center / contain no-repeat; mask: var(--ic-arrow) center / contain no-repeat;
}
.used-here a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 18. 大图上的透明顶栏（ix-oldnav）----------
   页面契约：[data-hero] 写在 main.page 的第一个子元素上；≤900这里把它往上拉到顶栏底下（抵掉顶栏高与正文上内边距）。
   html[data-over-hero]（star.js 判：整条顶栏都压在图上）：顶栏不画底、不描边、不模糊，字和图标改白。
   开页预判：star.js 第一次判之前（还没有 data-hero-checked）先按「压在图上」画——defer 脚本跑之前浏览器可能已经画了几帧，
   不预判的话那几帧是玻璃、随后才变透明。两种预判：
          页面自己声明（推荐）：body 一解析出来就生效，第一帧就对；
     :has(正文第一个子元素是 [data-hero])   没声明时的退路： 还没解析到的那一帧看不见图，实测会有一帧玻璃。
   :has 那条包在 :is() 里：:is 的选择器表是宽容的，不认 :has 的内核只当它匹配不上，不会把整条规则丢掉。
   切换过渡（hero-live 之后才有，免得开页那一下也渐变）：例外动的是底色、边线、字色与 backdrop-filter——
   一次性、只在 ≤900（手机有显卡），只动 transform / opacity 做不到「玻璃 → 透明」。 */
@media (max-width: 900px) {
  .page > [data-hero]:first-child { margin-top: calc(-1 * (var(--topbar-h) + var(--page-pt))); }
  html.hero-live .side {
    transition: background-color .3s ease, border-color .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease;
  }
  html.hero-live .side .brand, html.hero-live .side .nav-item, html.hero-live .side .nav-ic,
  html.hero-live .side .top-more, html.hero-live .side .top-search { transition: color .3s ease, background-color .3s ease; }
  /* 下面每条选择器都写三份：判定结果 [data-over-hero] / 页面声明的开页预判 body[data-hero-top] / :has 退路（包在 :is 里） */
  html[data-over-hero] .side,
  html:not([data-hero-checked]) body[data-hero-top] .side,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side {
    background: transparent; border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html[data-over-hero] .side .brand,
  html:not([data-hero-checked]) body[data-hero-top] .side .brand,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .brand,
  html[data-over-hero] .side .nav-ic,
  html:not([data-hero-checked]) body[data-hero-top] .side .nav-ic,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .nav-ic,
  html[data-over-hero] .side .top-more,
  html:not([data-hero-checked]) body[data-hero-top] .side .top-more,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .top-more,
  html[data-over-hero] .side .top-search,
  html:not([data-hero-checked]) body[data-hero-top] .side .top-search,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .top-search,
  html[data-over-hero] .side .nav-item[aria-current="page"],
  html:not([data-hero-checked]) body[data-hero-top] .side .nav-item[aria-current="page"],
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .nav-item[aria-current="page"],
  html[data-over-hero] .side .nav-item[aria-current="page"] .nav-ic,
  html:not([data-hero-checked]) body[data-hero-top] .side .nav-item[aria-current="page"] .nav-ic,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .nav-item[aria-current="page"] .nav-ic { color: #FFFFFF; }
  html[data-over-hero] .side .nav-item:not([aria-current]),
  html:not([data-hero-checked]) body[data-hero-top] .side .nav-item:not([aria-current]),
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .nav-item:not([aria-current]) { color: rgba(255, 255, 255, .78); }
  html[data-over-hero] .side .nav-item[aria-current="page"],
  html:not([data-hero-checked]) body[data-hero-top] .side .nav-item[aria-current="page"],
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .nav-item[aria-current="page"] { background: transparent; box-shadow: none; }
  html[data-over-hero] .side .top-more,
  html:not([data-hero-checked]) body[data-hero-top] .side .top-more,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .top-more,
  html[data-over-hero] .side .top-search,
  html:not([data-hero-checked]) body[data-hero-top] .side .top-search,
  html:is(:not([data-hero-checked]):has(> body > main.page > [data-hero]:first-child)) .side .top-search { background: transparent; }
}

/* ≤900浮层开着时，结果列表被 star.js 搬进 #search-sheet（aria-modal 对话框里，读屏才读得到）：挂在面板下沿 */
.search-sheet .search-pop { position: absolute; top: calc(100% + 6px); left: 0; right: 0; }

/* ---------- 19. 扁视口的紧凑侧栏（>900、视口比1440×900扁）----------
   侧栏按 --u 等比放大，竖向也跟着放大；视口比1440×900扁时（屋主台式2040×1019、带工具栏2040×930，
   笔记本2552×1274）放大后的侧栏比视口高，导航要滚。这里只收竖向节奏：导航项34→28、分组标题上下距12/4→6/2、
   侧栏上下内边距、品牌与搜索格、外观三行的间距与分段高度；横向尺寸、字号、图标一个都不动。
   条件：宽高比大于1.6（宽 ≥1440时，有效高度 = 高 × 1440 ÷ 宽，比900矮就等于宽高比大于1.6）；
   宽在901–1440之间 --scale 恒为1，宽高比量不出来，另加「高不到900」。1440×900正好1.6、高900，两条都不中，一个像素不变。
   实测（软件渲染 DPR 1.25）：2040×1019与2040×930两档11项导航和外观控件全看得见、导航不滚；
   最后一组下面还空着：1019那档约130px、930那档约40px（量具 accept-shell.mjs 的 side 段）。 */
@media (min-width: 901px) and (min-aspect-ratio: 1601/1000), (min-width: 901px) and (max-height: 899.98px) {
  .side { gap: 0; padding-top: calc(12 * var(--u)); padding-bottom: calc(8 * var(--u)); }
  .brand { padding-top: 0; padding-bottom: calc(8 * var(--u)); }
  .side-search { padding-bottom: calc(6 * var(--u)); }
  .search-field { min-height: calc(30 * var(--u)); padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
  .search-input { height: calc(26 * var(--u)); }
  .side-nav { padding-bottom: calc(2 * var(--u)); }
  .side-group { margin-top: calc(6 * var(--u)); margin-bottom: calc(2 * var(--u)); line-height: 1.3; }
  .side-sec:first-child .side-group { margin-top: 0; }
  .nav-item { height: calc(28 * var(--u)); }
  .side-foot { padding-top: calc(8 * var(--u)); }
  .theme { gap: calc(6 * var(--u)); }
  .side-foot .seg button { padding-top: calc(3 * var(--u)); padding-bottom: calc(3 * var(--u)); }
  .side-foot .seg-sm button { padding-top: calc(2 * var(--u)); padding-bottom: calc(2 * var(--u)); }
  .side-foot .dots { padding-top: 2px; padding-bottom: 2px; }
  .side-foot .theme-foot { margin-bottom: calc(-6 * var(--u)); }
}
色彩

工具 · 液态玻璃

标题写结论

数值 / 代码

用在哪

为什么

坑
