/* ============================================================
   肆叶云 · 主题令牌（暗色 / 亮色）+ 主题切换按钮
   - 暗色为默认：深青底 + 薄荷方块（终端风）
   - 亮色为「纸面终端」：浅薄荷底 + 深青墨色，对比度按 WCAG 调整
   - 切换方式：<html data-theme="dark|light">，由 head 内联脚本在样式加载前写入
     （避免闪烁），js/theme.js 负责点击切换与持久化
   - 背景动效颜色同样在这里定义（--sq-color / --sq-bg），
     js/blinking-squares.js 读取后重绘，因此主题切换背景会一起变色
   - 字体方案：<html data-font="pixel|terminal|yahei|song|art">，只覆盖
     --font-mono / --font-code 两个令牌；页面样式一律写 var(--font-mono)，
     所以增加字体不需要改任何页面 CSS，持久化在 js/theme.js
   ============================================================ */

:root,
[data-theme='dark'] {
    color-scheme: dark;

    /* 底色 / 光晕 */
    --bg: #00161f;
    --bg-glow: rgba(43, 255, 208, 0.05);

    /* 面板 / 卡片 */
    --panel: rgba(0, 26, 36, 0.74);
    --panel-strong: rgba(0, 24, 33, 0.90);
    /* 阅读面（笔记正文容器）：比普通面板更实，用来压住背景闪烁 */
    --panel-read: rgba(0, 26, 36, 0.88);
    --card-bg: rgba(0, 34, 44, 0.45);
    --card-bg-hover: rgba(43, 255, 208, 0.08);
    /* 图片放大时的蒙版：暗色下压到接近纯底色，保证图片是画面里最亮的东西 */
    --lb-mask: rgba(0, 12, 18, 0.88);

    /* 文字 */
    --text: #d9f5ee;
    --text-strong: #eafffa;
    --muted: rgba(186, 234, 226, 0.62);
    --faint: rgba(186, 234, 226, 0.36);

    /* 描边 */
    --line: rgba(43, 255, 208, 0.10);
    --line-strong: rgba(43, 255, 208, 0.34);
    --hairline: rgba(43, 255, 208, 0.08);

    /* 强调色 */
    --accent: #2bffd0;
    --accent-soft: rgba(43, 255, 208, 0.14);
    --accent-faint: rgba(43, 255, 208, 0.06);

    /* 焦点 / 选中 */
    --focus-ring: rgba(43, 255, 208, 0.68);
    --sel-bg: rgba(43, 255, 208, 0.22);
    --sel-fg: #eafffa;

    /* 品牌渐变 */
    --brand-1: #eafffa;
    --brand-2: #7bf0d8;
    --brand-3: #23c9a6;

    /* 按钮 */
    --btn-bg: rgba(43, 255, 208, 0.07);
    --btn-bg-hover: rgba(43, 255, 208, 0.14);

    /* 代码块底色 */
    --code-bg: rgba(0, 30, 40, 0.72);

    /* 阴影 */
    --shadow-sm: 0 4px 18px rgba(0, 0, 0, 0.25);
    --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.50);
    --shadow-color: rgba(0, 0, 0, 0.40);

    /* 背景动效 */
    --sq-color: #2bffd0;
    --sq-bg: #00161f;

    /* 卡片点缀色：四个不同的鲜亮色（悬停时的放大发光用它） */
    --tint-tools: #2bffd0;   /* 薄荷青 */
    --tint-tools-soft: rgba(43, 255, 208, 0.18);
    --tint-blog: #4fb8ff;    /* 电光蓝 */
    --tint-blog-soft: rgba(79, 184, 255, 0.17);
    --tint-notes: #b6f24d;   /* 青柠绿 */
    --tint-notes-soft: rgba(182, 242, 77, 0.16);
    --tint-image: #ff6ec7;   /* 玫红 */
    --tint-image-soft: rgba(255, 110, 199, 0.17);

    /* 字体 / 圆角
       --font-pixel 是像素风字体栈本体；--font-mono / --font-code 只是「当前方案」的
       指针，默认都指向它，下面的 [data-font='...'] 只覆盖这两个指针 */
    --font-pixel: 'Fusion Pixel', 'Cascadia Mono', ui-monospace, 'SF Mono',
                  Consolas, 'Liberation Mono', monospace;
    --font-mono: var(--font-pixel);
    /* 代码/等宽场景单独一个令牌：切到雅黑、宋体后代码块仍保持等宽对齐 */
    --font-code: var(--font-pixel);
    --r-card: 18px;
    --r-panel: 40px;
    --r-btn: 999px;

    /* ---------- 配色色环用的常量（暗色） ----------
       下面这些数字是从原来写死的颜色里实测出来的 oklch 值（不是估的）：
       强调色 #2bffd0 = L .894 C .167 H 172.3；背景 #00161f = L .186 C .036 H 225.9。
       只有 <html data-accent="custom"> 时才参与推导，平时不影响任何颜色。 */
    --accent-h: 172; --accent-l: .894; --accent-c: .167;
    --base-c: .039;  --panel-c: .039;
    --bg-l: .186; --panel-l: .203; --panel-strong-l: .194; --panel-read-l: .203;
    --card-bg-l: .233; --code-bg-l: .218; --lb-mask-l: .143;
    --text-l: .948; --text-strong-l: .983; --text-c: .031; --text-strong-c: .023;
    --muted-l: .901; --muted-c: .051;
    --brand1-l: .983; --brand1-c: .023; --brand2-l: .880; --brand2-c: .113;
    --brand3-l: .748; --brand3-c: .137;
    --sq-l: .894; --sq-c: .167;
    --tint-blog-l: .752; --tint-blog-c: .141; --tint-blog-dh: 69;
    --tint-notes-l: .890; --tint-notes-c: .199; --tint-notes-dh: -45;
    --tint-image-l: .741; --tint-image-c: .200; --tint-image-dh: 173;
    --a-panel: .74; --a-panel-strong: .90; --a-panel-read: .88; --a-card: .45;
    --a-code: .72; --a-mask: .88;
    --a-soft: .14; --a-faint: .06; --a-line: .10; --a-line-strong: .34;
    --a-hair: .08; --a-focus: .68; --a-sel: .22;
    --a-btn: .07; --a-btn-hover: .14; --a-hover: .08; --a-glow: .05;
    --a-muted: .62; --a-faint-text: .36; --a-tint: .18; --a-tint2: .17;
}

[data-theme='light'] {
    color-scheme: light;

    --bg: #e9f4ef;
    --bg-glow: rgba(15, 143, 118, 0.10);

    --panel: rgba(255, 255, 255, 0.78);
    --panel-strong: rgba(255, 255, 255, 0.92);
    /* 阅读面（笔记正文容器）：比普通面板更实，用来压住背景闪烁 */
    --panel-read: rgba(255, 255, 255, 0.93);
    --card-bg: rgba(255, 255, 255, 0.74);
    --card-bg-hover: rgba(15, 143, 118, 0.10);
    /* 图片放大时的蒙版：亮色下也用深色，图片细节才压得住 */
    --lb-mask: rgba(4, 30, 26, 0.72);

    --text: #12302a;
    --text-strong: #06201b;
    --muted: rgba(18, 48, 42, 0.72);
    --faint: rgba(18, 48, 42, 0.46);

    --line: rgba(15, 143, 118, 0.22);
    --line-strong: rgba(15, 143, 118, 0.55);
    --hairline: rgba(15, 143, 118, 0.16);

    --accent: #0f8f76;
    --accent-soft: rgba(15, 143, 118, 0.14);
    --accent-faint: rgba(15, 143, 118, 0.09);

    --focus-ring: rgba(15, 143, 118, 0.70);
    --sel-bg: rgba(15, 143, 118, 0.20);
    --sel-fg: #06201b;

    --brand-1: #0b3b32;
    --brand-2: #0f8f76;
    --brand-3: #16b493;

    --btn-bg: rgba(15, 143, 118, 0.10);
    --btn-bg-hover: rgba(15, 143, 118, 0.18);

    /* 代码块底色 */
    --code-bg: rgba(15, 143, 118, 0.07);

    --shadow-sm: 0 4px 14px rgba(9, 60, 50, 0.10);
    --shadow-md: 0 10px 26px rgba(9, 60, 50, 0.16);
    --shadow-lg: 0 20px 50px rgba(9, 60, 50, 0.18);
    --shadow-color: rgba(9, 60, 50, 0.18);

    --sq-color: #12a888;
    --sq-bg: #e9f4ef;

    /* 卡片点缀色（亮色下取同色系深色，保证在浅底上的对比度） */
    --tint-tools: #0f8f76;   /* 深薄荷 */
    --tint-tools-soft: rgba(15, 143, 118, 0.18);
    --tint-blog: #0f6fd0;    /* 深电蓝 */
    --tint-blog-soft: rgba(15, 111, 208, 0.16);
    --tint-notes: #4f8f00;   /* 深青柠 */
    --tint-notes-soft: rgba(79, 143, 0, 0.16);
    --tint-image: #c2328a;   /* 深玫红 */
    --tint-image-soft: rgba(194, 50, 138, 0.16);

    /* ---------- 配色色环用的常量（亮色） ----------
       同样是实测值：强调色 #0f8f76 = L .581 C .108 H 174.2；背景 #e9f4ef = L .958 C .013；
       面板/卡片是纯白，所以它们的彩度取一个极小的值（几乎不带色偏）。 */
    --accent-h: 174; --accent-l: .5814; --accent-c: .1076;
    --base-c: .013;  --panel-c: .003;
    --bg-l: .958; --panel-l: .995; --panel-strong-l: .995; --panel-read-l: .995;
    --card-bg-l: .995; --code-bg-l: .5814; --lb-mask-l: .213;
    --text-l: .284; --text-strong-l: .222; --text-c: .038; --text-strong-c: .034;
    --muted-l: .284; --muted-c: .038;
    --brand1-l: .318; --brand1-c: .052; --brand2-l: .5814; --brand2-c: .1076;
    --brand3-l: .688; --brand3-c: .129;
    --sq-l: .653; --sq-c: .123;
    --tint-blog-l: .546; --tint-blog-c: .170; --tint-blog-dh: 80;
    --tint-notes-l: .584; --tint-notes-c: .167; --tint-notes-dh: -40;
    --tint-image-l: .564; --tint-image-c: .198; --tint-image-dh: 174;
    --a-panel: .78; --a-panel-strong: .92; --a-panel-read: .93; --a-card: .74;
    --a-code: .07; --a-mask: .72;
    --a-soft: .14; --a-faint: .09; --a-line: .22; --a-line-strong: .55;
    --a-hair: .16; --a-focus: .70; --a-sel: .20;
    --a-btn: .10; --a-btn-hover: .18; --a-hover: .10; --a-glow: .10;
    --a-muted: .72; --a-faint-text: .46; --a-tint: .18; --a-tint2: .16;
}

/* ---------- 配色色环：只由「一个色相 + 上面的常量」推导出全部颜色 ----------
   只有 <html data-accent="custom"> 时才生效 —— 不用色环时下面一条都不参与，
   渲染与改动前完全一致（这是刻意的：默认外观不动，零风险）。
   色相由 js/accent.js 写在 --accent-h 上（0–359），并在 <head> 引导脚本里
   于样式加载前写好，避免先闪一下默认色。
   背景系与文字系都用「同一个色相 + 低彩度」，只改感知亮度与透明度，
   所以无论选什么色相，明暗关系与对比度都不会失守（oklch 的 L 是感知亮度）。 */
[data-accent='custom'] {
    /* 强调色系 */
    --accent: oklch(var(--accent-l) var(--accent-c) var(--accent-h));
    --accent-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-soft));
    --accent-faint: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-faint));
    --line: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-line));
    --line-strong: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-line-strong));
    --hairline: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-hair));
    --focus-ring: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-focus));
    --sel-bg: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-sel));
    --btn-bg: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-btn));
    --btn-bg-hover: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-btn-hover));
    --card-bg-hover: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-hover));
    --bg-glow: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-glow));
    /* 注意：--sq-color / --sq-bg 不在这里推导。
       背景方块画布的 fillStyle 不认 oklch，所以这两个令牌由 js/accent.js
       算成 rgb 后写在 <html> 的行内样式上（见 syncCanvasColors）。 */

    /* 背景系：同色相、低彩度，只改明暗与透明度 */
    --bg: oklch(var(--bg-l) var(--base-c) var(--accent-h));
    --panel: oklch(var(--panel-l) var(--panel-c) var(--accent-h) / var(--a-panel));
    --panel-strong: oklch(var(--panel-strong-l) var(--panel-c) var(--accent-h) / var(--a-panel-strong));
    --panel-read: oklch(var(--panel-read-l) var(--panel-c) var(--accent-h) / var(--a-panel-read));
    --card-bg: oklch(var(--card-bg-l) var(--panel-c) var(--accent-h) / var(--a-card));
    --lb-mask: oklch(var(--lb-mask-l) var(--base-c) var(--accent-h) / var(--a-mask));

    /* 文字系：同色相、固定感知亮度 → 对比度不随色相波动 */
    --text: oklch(var(--text-l) var(--text-c) var(--accent-h));
    --text-strong: oklch(var(--text-strong-l) var(--text-strong-c) var(--accent-h));
    --muted: oklch(var(--muted-l) var(--muted-c) var(--accent-h) / var(--a-muted));
    --faint: oklch(var(--muted-l) var(--muted-c) var(--accent-h) / var(--a-faint-text));
    --sel-fg: var(--text-strong);
    --brand-1: oklch(var(--brand1-l) var(--brand1-c) var(--accent-h));
    --brand-2: oklch(var(--brand2-l) var(--brand2-c) var(--accent-h));
    --brand-3: oklch(var(--brand3-l) var(--brand3-c) var(--accent-h));

    /* 四张卡片的点缀色：各自明度彩度不变，只跟着整体旋转色相 */
    --tint-tools: var(--accent);
    --tint-tools-soft: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-tint));
    --tint-blog: oklch(var(--tint-blog-l) var(--tint-blog-c) calc(var(--accent-h) + var(--tint-blog-dh)));
    --tint-blog-soft: oklch(var(--tint-blog-l) var(--tint-blog-c) calc(var(--accent-h) + var(--tint-blog-dh)) / var(--a-tint2));
    --tint-notes: oklch(var(--tint-notes-l) var(--tint-notes-c) calc(var(--accent-h) + var(--tint-notes-dh)));
    --tint-notes-soft: oklch(var(--tint-notes-l) var(--tint-notes-c) calc(var(--accent-h) + var(--tint-notes-dh)) / var(--a-tint2));
    --tint-image: oklch(var(--tint-image-l) var(--tint-image-c) calc(var(--accent-h) + var(--tint-image-dh)));
    --tint-image-soft: oklch(var(--tint-image-l) var(--tint-image-c) calc(var(--accent-h) + var(--tint-image-dh)) / var(--a-tint2));
}

/* 代码块底色在两套主题里来源不同：暗色是背景系，亮色是强调色 */
[data-accent='custom'][data-theme='dark'] {
    --code-bg: oklch(var(--code-bg-l) var(--base-c) var(--accent-h) / var(--a-code));
}

[data-accent='custom'][data-theme='light'] {
    --code-bg: oklch(var(--accent-l) var(--accent-c) var(--accent-h) / var(--a-code));
}

/* ---------- 基础层（全站共用） ----------
   reset、字体、底色、焦点环、[hidden] 在各页面里完全一样，统一放这里，
   各页面的 CSS 只写自己特有的部分（背景光晕大小、布局等） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-mono);
    /* 页面统一底：光晕 + 底色（explore 用自己的光晕尺寸覆盖这一条） */
    background:
        radial-gradient(1100px 700px at 50% -12%, var(--bg-glow), transparent 62%),
        var(--bg);
    color: var(--text);
    min-height: 100vh;
    /* 像素字体边缘：WebKit/Safari 支持 none（关闭抗锯齿），Chrome 会忽略此值
       （实测 Chrome 下 12px 像素字仅 2 个灰阶，边缘已接近二值） */
    -webkit-font-smoothing: none;
    -webkit-tap-highlight-color: transparent;
}

/* hidden 属性优先于页面里的 display 规则 */
[hidden] {
    display: none !important;
}

/* 键盘焦点环：沿圆角走 */
:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* 读屏可见、视觉隐藏（表单标签等场合用） */
.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;
}

/* ---------- 打字机（js/typewriter.js，首页标语与 404 标题共用） ----------
   留位法：.type-box 的宽度由最长的句子撑开（.type-sizer 隐身但仍占位），
   打字层 .type-live 绝对定位铺满这个盒子 —— 所以打字过程中整块布局纹丝不动 */
.type-box {
    position: relative;
    display: inline-block;
}

/* 撑宽度用：隐身，但依然占位 */
.type-sizer {
    visibility: hidden;
    white-space: pre;
}

/* 真正打字的层：铺满盒子，按继承来的 text-align 摆放 */
.type-live {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    white-space: pre;
}

/* 末尾方块光标：空闲/停顿时闪烁，打字与删除时常亮（JS 切换 .is-typing） */
.type-cursor {
    display: inline-block;
    width: 0.5em;
    height: 0.95em;
    margin-left: 0.18em;
    vertical-align: -0.08em;
    background: var(--accent);
    animation: type-cursor-blink 1.15s steps(1, end) infinite;
}

.type-box.is-typing .type-cursor {
    animation: none;
    opacity: 1;
}

@keyframes type-cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* 减少动态：光标常亮不闪（JS 也会跳过打字，直接给出完整句子） */
@media (prefers-reduced-motion: reduce) {
    .type-cursor {
        animation: none;
        opacity: 1;
    }
}

/* ---------- 字体方案（右上角下拉框切换，只覆盖字体令牌） ---------- */
/* 像素风（默认）：Fusion Pixel 12px，自托管 148KB 子集，逐像素清晰 */
[data-font='pixel'] {
    --font-mono: var(--font-pixel);
    --font-code: var(--font-pixel);
}

/* 终端风：Cascadia Code，拉丁部分为自托管 18KB 子集，中文回落系统无衬线 */
[data-font='terminal'] {
    --font-mono: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas,
                 'Microsoft YaHei', 'PingFang SC', monospace;
    --font-code: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* 微软雅黑：现代无衬线，全部走系统字体（不产生额外下载） */
[data-font='yahei'] {
    --font-mono: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB',
                 'Noto Sans SC', system-ui, sans-serif;
    --font-code: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* 宋体：纸面衬线风 */
[data-font='song'] {
    --font-mono: 'SimSun', 'Songti SC', 'Noto Serif SC', serif;
    --font-code: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* 艺术体：站酷快乐体（自托管子集，OFL-1.1），缺字回落楷体 */
[data-font='art'] {
    --font-mono: 'ZCOOL KuaiLe', 'KaiTi', 'STKaiti', 'Kaiti SC', cursive;
    --font-code: 'Cascadia Code', ui-monospace, 'SF Mono', Consolas, monospace;
}

/* 代码块 / 行内代码一律等宽：切到雅黑、宋体后代码仍保持列对齐 */
code,
kbd,
samp,
pre {
    font-family: var(--font-code);
}

/* ---------- 右上角控件排布 ----------
   从右到左：主题切换 → 配色色环 → 字体按钮，三者在同一水平线上 */
:root {
    --ctl-top: clamp(0.7rem, 1.6vw, 1.05rem);
    --ctl-right: clamp(0.7rem, 1.6vw, 1.05rem);
    --ctl-size: 38px;
    --ctl-gap: 8px;
}

/* ---------- 主题切换按钮（无顶栏的页面：固定右上角） ---------- */
.theme-toggle {
    position: fixed;
    top: var(--ctl-top);
    right: var(--ctl-right);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-size);
    height: var(--ctl-size);
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--accent);
    cursor: pointer;
    transition: color 0.2s ease-out, border-color 0.2s ease-out,
                background-color 0.2s ease-out, transform 0.12s ease-out;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    border-color: var(--accent);
    background: var(--btn-bg-hover);
}

.theme-toggle:active {
    transform: scale(0.94);
}

.theme-toggle svg {
    display: block;
    /* 10×10 像素网格按 2 倍整数缩放 → 每个像素块正好 2px，无抗锯齿 */
    width: 20px;
    height: 20px;
}

/* ---------- 放进顶栏时改成跟随布局 ----------
   顶栏（tools / notes）把按钮作为子项含在条内；
   底色换成淡强调色，否则与顶栏底色相同会“看不见按钮” */
.topbar .theme-toggle {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    background: var(--btn-bg);
}

.topbar .theme-toggle:hover,
.topbar .theme-toggle:focus-visible {
    background: var(--btn-bg-hover);
}

/* ---------- 字体按钮（图标按钮，和配色色环 / 主题切换同一套外观） ---------- */
.font-btn {
    position: fixed;
    top: var(--ctl-top);
    /* 从右往左第三格：右边是配色色环与主题切换各占一格 */
    right: calc(var(--ctl-right) + 2 * (var(--ctl-size) + var(--ctl-gap)));
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-size);
    height: var(--ctl-size);
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--accent);
    cursor: pointer;
    transition: color 0.2s ease-out, border-color 0.2s ease-out,
                background-color 0.2s ease-out, transform 0.12s ease-out;
}

.font-btn:hover,
.font-btn:focus-visible {
    border-color: var(--accent);
    background: var(--btn-bg-hover);
}

.font-btn:active { transform: scale(0.94); }

/* 像素字母 A：10×10 网格按 2 倍整数缩放，与主题图标同一套点阵语言 */
.font-btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

/* 顶栏内（tools / notes）：改成跟随布局，与其它控件一致 */
.topbar .font-btn {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    background: var(--btn-bg);
}

.topbar .font-btn:hover,
.topbar .font-btn:focus-visible {
    background: var(--btn-bg-hover);
}

/* ---------- 字体下拉：磨砂面板 + 圆角，每行用自己的字体渲染 ---------- */
.font-pop {
    position: fixed;
    z-index: 70;
    min-width: 168px;
    padding: 0.6rem 0.55rem 0.55rem;
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    /* 与标签下拉、色环弹层同一套展开手感 */
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.18s ease-out,
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.font-pop.is-open {
    opacity: 1;
    transform: none;
}

.font-pop-title {
    margin: 0 0.35rem 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    color: var(--faint);
}

.font-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 0;
    border-radius: 10px;
    background: transparent;
    /* 每行用它自己的字体：data-font 就写在行上，[data-font='x'] 会给出对应的 --font-mono */
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
    cursor: pointer;
    transition: color 0.18s ease-out, background-color 0.18s ease-out;
}

.font-row:hover,
.font-row:focus-visible {
    color: var(--text-strong);
    background: var(--accent-faint);
}

/* 当前选中的那一个 */
.font-row[aria-pressed='true'] {
    color: var(--accent);
    background: var(--accent-soft);
}

.font-row[aria-pressed='true']::after {
    content: '✓';
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: var(--accent);
}

/* ---------- 配色色环按钮（夹在字体按钮与主题切换之间） ---------- */
.accent-btn {
    position: fixed;
    top: var(--ctl-top);
    right: calc(var(--ctl-right) + var(--ctl-size) + var(--ctl-gap));
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ctl-size);
    height: var(--ctl-size);
    padding: 0;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: var(--panel-strong);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: border-color 0.2s ease-out, background-color 0.2s ease-out,
                transform 0.12s ease-out;
}

.accent-btn:hover,
.accent-btn:focus-visible {
    border-color: var(--accent);
    background: var(--btn-bg-hover);
}

.accent-btn:active { transform: scale(0.94); }

/* 按钮上的小圆点：就是当前配色（默认或自定义都跟随） */
.accent-ring {
    display: block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bg) 40%, transparent);
}

/* 放进顶栏时改成跟随布局 */
.topbar .accent-btn {
    position: static;
    top: auto;
    right: auto;
    z-index: auto;
    flex: 0 0 auto;
    background: var(--btn-bg);
}

.topbar .accent-btn:hover,
.topbar .accent-btn:focus-visible { background: var(--btn-bg-hover); }

/* ---------- 色环弹层 ---------- */
.accent-pop {
    position: fixed;
    z-index: 70;
    width: 208px;
    padding: 0.85rem 0.9rem 0.8rem;
    border-radius: 18px;
    background: color-mix(in srgb, var(--panel-strong) 86%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    backdrop-filter: blur(16px) saturate(1.15);
    border: 1px solid var(--line-strong);
    box-shadow: var(--shadow-lg);
    /* 弹出/收回动画：与标签下拉同一套手感 */
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top right;
    transition: opacity 0.18s ease-out,
                transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.accent-pop.is-open {
    opacity: 1;
    transform: none;
}

/* 色环：外层负责接收拖拽（环身被遮罩挖空，圆点与环心是它的兄弟层，不受遮罩影响） */
.accent-wheel-wrap {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 0.1rem auto 0.75rem;
    cursor: crosshair;
    touch-action: none;
}

.accent-wheel {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    /* 环身由 JS 用 conic-gradient 画（颜色就是站点会用的那套） */
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 45px, #000 46px);
    mask: radial-gradient(circle at 50% 50%, transparent 0 45px, #000 46px);
}

.accent-wheel-wrap:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 4px;
    border-radius: 50%;
}

/* 环上的圆点：rotate 到对应角度后往外推 */
.accent-knob {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--panel-strong), var(--shadow-sm);
    pointer-events: none;
}

/* 环心：当前颜色的预览 */
.accent-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 62px;
    height: 62px;
    margin: -31px 0 0 -31px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--accent-faint);
    pointer-events: none;
}

/* 色相滑条：给键盘用户的等价值控件 */
.accent-range {
    display: block;
    width: 100%;
    height: 18px;
    margin: 0 0 0.7rem;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    cursor: pointer;
}

.accent-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg,
        oklch(var(--accent-l) var(--accent-c) 0),
        oklch(var(--accent-l) var(--accent-c) 60),
        oklch(var(--accent-l) var(--accent-c) 120),
        oklch(var(--accent-l) var(--accent-c) 180),
        oklch(var(--accent-l) var(--accent-c) 240),
        oklch(var(--accent-l) var(--accent-c) 300),
        oklch(var(--accent-l) var(--accent-c) 360));
    border: 1px solid var(--line);
}

.accent-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 50%;
    border: 2px solid var(--panel-strong);
    background: var(--accent);
    box-shadow: var(--shadow-sm);
}

.accent-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: var(--accent-soft);
}

.accent-range::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--panel-strong);
    background: var(--accent);
}

/* 预设色点 */
.accent-presets {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-bottom: 0.7rem;
}

.accent-dot {
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    /* --dot-h 由 JS 写在每个点上 */
    background: oklch(var(--accent-l) var(--accent-c) var(--dot-h));
    cursor: pointer;
    transition: transform 0.16s ease-out, border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.accent-dot:hover,
.accent-dot:focus-visible {
    transform: scale(1.12);
    border-color: var(--accent);
}

/* 当前正在用的那个色相 */
.accent-dot[aria-pressed='true'] {
    border-color: var(--text);
    box-shadow: 0 0 0 2px var(--accent-faint);
}

/* 恢复默认 */
.accent-reset {
    display: block;
    width: 100%;
    padding: 0.3rem 0.4rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.2s ease-out, border-color 0.2s ease-out, background-color 0.2s ease-out;
}

.accent-reset:hover,
.accent-reset:focus-visible {
    color: var(--accent);
    border-color: var(--line-strong);
    background: var(--accent-faint);
}

/* 主题切换过渡：背景与文字平滑变化（方块由 JS 立即重绘） */
body {
    transition: background-color 0.28s ease-out, color 0.28s ease-out;
}