/* ============================================================================ * 主题契约 —— 所有主题必须给全的一组令牌 + 到历史令牌名的桥接 * * 设计文档：docs/design/ui-theme-system-spec.md §1.2 / §2 * * 三层结构，从下往上： * 1) 本文件 :root 定义 45 个 --ui-* 的**兜底值**（= 经典日间），任何主题漏配都不会白屏； * 2) themes/.css 每个主题只覆盖这 45 个 + --font-display； * 3) 本文件的「桥接」段 把 --ui-* 映射到全站组件实际消费的历史名字 * （--bg/--surface/--ink/--brd/--brand/--el-*…）。 * * ★为什么要桥接★：全站 2990 个 Element 标签和几十个页面消费的是 --bg/--surface/--ink 这套 * 历史名字。让主题直接改历史名字也能跑，但那样「一个主题要配多少个变量」就没有边界了， * 加第 5 个主题时没人说得清漏了哪个。改成「主题只填契约、桥接只写一次」之后： * - 加主题 = 填 45 个格子，缺项由 :root 兜底，不会静默继承上一个主题； * - 改桥接 = 只改这一个文件，所有主题同时生效。 * * ★桥接必须放在 :root（不是 [data-theme]）★：它引用的是 var(--ui-*)， * CSS 变量是运行时按当前元素解析的，所以主题在 上覆盖 --ui-* 之后， * :root 里的 --bg: var(--ui-bg-page) 会自动跟着变，不需要每个主题重写一遍桥接。 * * M3 已完成：运行时不再写 data-ui，classic/aixluv 主题家族直接决定旧壳或新壳。 * 任何应用级覆盖必须挂在 `[data-theme^="aixluv-"]`，不得重新引入独立版本选择器。 * ==========================================================================*/ :root { /* ── 表面 ── */ --ui-bg-page: #f2ede4; --ui-bg-elevated: #fdf8ef; --ui-bg-soft: #f8f2e6; --ui-bg-muted: #ece4d6; --ui-bg-float: #e3e1dc; --ui-bg-overlay: rgba(253, 248, 239, 0.72); --ui-bg-overlay-strong: rgba(253, 248, 239, 0.94); /* ── 文字 ── ★--ui-text-muted 只配给「可有可无」的说明文字★：12px 标签用它常年过不了 4.5:1， 标签一律用 --ui-text-secondary（见设计文档 §8 验收）。 */ --ui-text-primary: #2a2622; --ui-text-secondary: #6f655a; --ui-text-muted: #a99e8f; --ui-text-faint: #c4b9a8; --ui-text-on-accent: #ffffff; /* ── 边线 ── */ --ui-border: #ece4d6; --ui-border-strong: #e2d8c6; --ui-border-soft: #f3ece0; /* ── 强调 ── */ --ui-accent: #ec6a4d; --ui-accent-hover: #f07d62; --ui-accent-hi: #f8c5bb; --ui-accent-soft: rgba(236, 106, 77, 0.12); --ui-glow: rgba(236, 106, 77, 0.35); --ui-focus-ring: rgba(236, 106, 77, 0.45); /* 强调色阶梯（Element Plus light-3/5/7/8）要混向的底色。 浅色主题混向白、深色主题混向自己的页底——★这一个值决定阶梯是"越来越浅"还是"越来越深"★。 不给的话阶梯会继承 style.css 里 html.dark 那套手调的经典棕（见下方桥接段说明）。 */ --ui-accent-ramp-to: #ffffff; /* ── 语义 ── */ --ui-success: #2bb673; --ui-success-soft: rgba(43, 182, 115, 0.12); --ui-warning: #b8781f; --ui-warning-soft: rgba(184, 120, 31, 0.12); --ui-danger: #c0392b; --ui-danger-soft: rgba(192, 57, 43, 0.1); --ui-info: #6a6cc0; --ui-info-soft: rgba(106, 108, 192, 0.12); /* ── 形 ── */ --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-radius-xl: 20px; --ui-shadow-1: 0 1px 2px rgba(70, 50, 30, 0.06); --ui-shadow-2: 0 4px 14px rgba(90, 60, 30, 0.08); --ui-shadow-3: 0 18px 44px rgba(90, 55, 25, 0.14); --ui-leading-display: 1.05; --ui-leading-title: 1.18; --ui-leading-body: 1.7; /* ── 字体 ── --font-display 每个主题不同：只换颜色像换灯泡，连字体一起换才像换了一间屋子。 正文/等宽全站统一，不随主题变（数据密集界面换正文字体只会降低可读性）。 */ --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Noto Serif SC', serif; --font-body: 'Manrope', 'Inter Variable', 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Noto Sans SC', 'Microsoft YaHei', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* ── 动效（全主题统一，参考站同款指数缓出） ── */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.15s; --dur: 0.28s; --dur-page: 0.42s; /* ── 版心 ── */ --wrap-max: 1280px; --wrap-gutter: 16px; } /* ═══════════════ 桥接：契约 → 全站历史令牌名 ═══════════════ * 下面每一行的左边都是现有组件已经在消费的名字，右边是契约。 * 加主题时★不要碰这一段★。 * * ★选择器必须是 html[data-theme] 而不是 :root★ * style.css 的 `html.dark { --bg:#211a15; --surface:…; --ink:… }` 特异性是 (0,1,1)， * 压过 :root 的 (0,1,0)。用 :root 写桥接的后果实测过：aixluv-night 的强调色和字体都换了， * 但底色仍是经典夜的 #211a15——因为 --bg 被 html.dark 抢走了。 * html[data-theme] 同为 (0,1,1)，与 html.dark 打平，靠本文件在 style.css 之后导入取胜。 * 附带好处：data-theme 未就绪（JS 跑之前）时桥接不生效，页面回落到 style.css 的原值， * 不会出现「变量没定义」的白屏。 */ html[data-theme] { --bg: var(--ui-bg-page); --surface: var(--ui-bg-elevated); --surface-2: var(--ui-bg-soft); --brd: var(--ui-border); --brd-2: var(--ui-border-strong); --ink: var(--ui-text-primary); --ink-2: var(--ui-text-secondary); --ink-3: var(--ui-text-muted); --brand: var(--ui-accent); --brand-soft: var(--ui-accent-soft); --ok: var(--ui-success); --ok-soft: var(--ui-success-soft); --warn: var(--ui-warning); --warn-soft: var(--ui-warning-soft); --danger: var(--ui-danger); --danger-soft: var(--ui-danger-soft); --info: var(--ui-info); --info-soft: var(--ui-info-soft); --rad-sm: calc(var(--ui-radius-sm) * var(--aix-radius-mul, 1)); --rad: calc(var(--ui-radius-md) * var(--aix-radius-mul, 1)); --rad-lg: calc(var(--ui-radius-lg) * var(--aix-radius-mul, 1)); --rad-xl: calc(var(--ui-radius-xl) * var(--aix-radius-mul, 1)); --sh-sm: var(--ui-shadow-1); --sh-md: var(--ui-shadow-2); --sh-lg: var(--ui-shadow-3); --sh-panel: var(--ui-shadow-2); --font-sans: var(--font-body); --font-serif: var(--font-display); /* Element Plus：全站组件通过它取色，桥接一次即可 */ /* ★强调色阶梯必须整条都桥接★ style.css 的 :root 与 html.dark 各写死了一整条 light-3/5/7/8/9（html.dark 那条是 按经典夜底 #211a15 手调的暖棕：#c3523c/#874231/#5e3226/#4a2a20）。 原来桥接只覆盖 light-3 与 light-9，于是： - classic-dark 阶梯不单调 —— light-3 取 --ui-accent-hover(#f29478，更浅)， 而 light-5/7/8 仍是手调的暖棕(更深)，plain 按钮的底与边不在一条色阶上； - ★任何深色主题都会继承经典的棕★ —— 实测 aixluv-night（金色主题，--brand:#cbb079） 的 light-5 竟是 #874231 暖棕，因为那三阶从没被桥接过。 现在整条按 accent 混向 --ui-accent-ramp-to 算，主题只需给 1 个值，阶梯自动成立。 light-9 保留 --ui-accent-soft：它是半透明淡染，压在任何底色上都成立，比算出来的实色更稳。 */ --el-color-primary: var(--ui-accent); --el-color-primary-light-3: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-accent-ramp-to)); --el-color-primary-light-5: color-mix(in srgb, var(--ui-accent) 50%, var(--ui-accent-ramp-to)); --el-color-primary-light-7: color-mix(in srgb, var(--ui-accent) 30%, var(--ui-accent-ramp-to)); --el-color-primary-light-8: color-mix(in srgb, var(--ui-accent) 20%, var(--ui-accent-ramp-to)); --el-color-primary-light-9: var(--ui-accent-soft); --el-color-primary-dark-2: var(--ui-accent); --el-color-success: var(--ui-success); --el-color-warning: var(--ui-warning); --el-color-danger: var(--ui-danger); --el-color-error: var(--ui-danger); --el-color-info: var(--ui-text-muted); --el-bg-color: var(--ui-bg-elevated); --el-bg-color-page: var(--ui-bg-page); --el-bg-color-overlay: var(--ui-bg-elevated); --el-fill-color-blank: var(--ui-bg-elevated); --el-fill-color: var(--ui-bg-soft); --el-fill-color-light: var(--ui-bg-soft); --el-fill-color-lighter: var(--ui-bg-soft); --el-border-color: var(--ui-border); --el-border-color-light: var(--ui-border); --el-border-color-lighter: var(--ui-border-soft); --el-border-color-extra-light: var(--ui-border-soft); --el-border-color-dark: var(--ui-border-strong); --el-text-color-primary: var(--ui-text-primary); --el-text-color-regular: var(--ui-text-secondary); --el-text-color-secondary: var(--ui-text-muted); --el-text-color-placeholder: var(--ui-text-secondary); --el-border-radius-base: var(--rad-sm); --el-border-radius-round: 999px; --el-font-family: var(--font-body); --el-box-shadow: var(--ui-shadow-2); --el-box-shadow-light: var(--ui-shadow-1); --el-box-shadow-lighter: var(--ui-shadow-1); } /* body 底色跟主题走。 style.css:146 有 `html.dark body { background:#211a15 }`（写死的经典夜底色）， 特异性 (0,1,2)；不覆盖它的话，曜夜主题的 --bg 虽然对了，但 body 仍是经典夜的棕黑—— app-shell 盖住了大部分，只在过度滚动/边缘露出来，很容易漏检。 html[data-theme] body 同为 (0,1,2)，靠导入顺序取胜。 */ html[data-theme] body { background: var(--ui-bg-page); color: var(--ui-text-primary); font-family: var(--font-body); } /* ============================================================================ * 主题：经典（classic）—— 今天的界面原样封装 * * 「老用户保持旧界面」= 「老用户默认 classic」。把 v1 封装成一个正常主题之后， * 就不需要两套并行的代码路径，v1 也自动获得主题系统的全部能力（管理端强制、上下架…）。 * * 色值来自 src/style.css 的 :root（日）与 html.dark（夜），逐个搬过来，观感与今天一致。 * ==========================================================================*/ /* ───────────── 经典 · 日 ───────────── */ [data-theme="classic-light"] { --ui-bg-page: #f2ede4; --ui-bg-elevated: #fdf8ef; --ui-bg-soft: #f8f2e6; --ui-bg-muted: #ece4d6; --ui-bg-float: #e3e1dc; --ui-bg-overlay: rgba(253, 248, 239, 0.72); --ui-bg-overlay-strong: rgba(253, 248, 239, 0.94); --ui-text-primary: #2a2622; --ui-text-secondary: #6f655a; --ui-text-muted: #a99e8f; --ui-text-faint: #c4b9a8; --ui-text-on-accent: #ffffff; --ui-border: #ece4d6; --ui-border-strong: #e2d8c6; --ui-border-soft: #f3ece0; --ui-accent: #ec6a4d; --ui-accent-hover: #f07d62; --ui-accent-hi: #f8c5bb; --ui-accent-soft: rgba(236, 106, 77, 0.12); --ui-glow: rgba(236, 106, 77, 0.35); --ui-focus-ring: rgba(236, 106, 77, 0.45); --ui-accent-ramp-to: #ffffff; --ui-success: #2bb673; --ui-success-soft: rgba(43, 182, 115, 0.12); --ui-warning: #b8781f; --ui-warning-soft: rgba(184, 120, 31, 0.12); --ui-danger: #c0392b; --ui-danger-soft: rgba(192, 57, 43, 0.1); --ui-info: #6a6cc0; --ui-info-soft: rgba(106, 108, 192, 0.12); --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-radius-xl: 20px; --ui-shadow-1: 0 1px 2px rgba(70, 50, 30, 0.06), 0 1px 3px rgba(70, 50, 30, 0.05); --ui-shadow-2: 0 4px 14px rgba(90, 60, 30, 0.08), 0 2px 6px rgba(90, 60, 30, 0.05); --ui-shadow-3: 0 18px 44px rgba(90, 55, 25, 0.14); /* v1 的气质来自全站衬线；换主题不该改变这一点 */ --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Noto Serif SC', 'Songti SC', serif; } /* ───────────── 经典 · 夜 ───────────── */ [data-theme="classic-dark"] { --ui-bg-page: #211a15; --ui-bg-elevated: #2c231b; --ui-bg-soft: #352a20; --ui-bg-muted: #3e3228; --ui-bg-float: #332d27; --ui-bg-overlay: rgba(44, 35, 27, 0.78); --ui-bg-overlay-strong: rgba(33, 26, 21, 0.94); --ui-text-primary: #f2ebe0; --ui-text-secondary: #c7baa6; --ui-text-muted: #948870; --ui-text-faint: #6f6553; --ui-text-on-accent: #ffffff; --ui-border: #3e3228; --ui-border-strong: #4c3d2f; --ui-border-soft: #352a20; --ui-accent: #ec6a4d; --ui-accent-hover: #f29478; --ui-accent-hi: #f8c5bb; --ui-accent-soft: rgba(236, 106, 77, 0.22); --ui-glow: rgba(236, 106, 77, 0.35); --ui-focus-ring: rgba(236, 106, 77, 0.5); --ui-accent-ramp-to: #211a15; --ui-success: #4ccb8f; --ui-success-soft: rgba(76, 203, 143, 0.18); --ui-warning: #e0a94d; --ui-warning-soft: rgba(224, 169, 77, 0.18); --ui-danger: #ef6b5e; --ui-danger-soft: rgba(239, 107, 94, 0.18); --ui-info: #8fb0d6; --ui-info-soft: rgba(143, 176, 214, 0.18); --ui-radius-sm: 8px; --ui-radius-md: 12px; --ui-radius-lg: 16px; --ui-radius-xl: 20px; /* 暗色不是反色：阴影几乎不可见，改用边线承担层级 */ --ui-shadow-1: 0 0 0 1px #3e3228; --ui-shadow-2: 0 0 0 1px #3e3228; --ui-shadow-3: 0 0 0 1px #4c3d2f, 0 16px 40px rgba(0, 0, 0, 0.45); --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Noto Serif SC', 'Songti SC', serif; } /* ============================================================================ * 主题：aixluv（晨金 gold / 曜夜 night） * * ★色值与字体来自线上 shop.aixluv.com 实测★，不是仓库里那份设计稿—— * 那份是上一代（柔雾灰 + 樱花粉 + DM Serif Display），照它做出来跟线上不是一个东西。 * 取证与对比表见 docs/design/ui-theme-system-spec.md §0/§1。 * 源码对照：dujiao-next-source/user/src/style.css 的 :root(night) 与 [data-dir="gold"]。 * * ★两个方向连展示字体一起换★：night = Sora（几何无衬线），gold = Cormorant Garamond（衬线）。 * 这是「换了主题」和「只是开了深色模式」的分水岭。 * ==========================================================================*/ /* ───────────── 晨金 gold（浅） ───────────── */ [data-theme="aixluv-gold"] { --ui-bg-page: #f3eee3; --ui-bg-elevated: #fffdf7; --ui-bg-soft: #ece5d6; --ui-bg-muted: #e4dcc9; /* ★浮层底必须是暖调★：原值 #d8d9dc 是冷灰（R≈G≈B，蓝通道还略高）， 在暖金主题里侧栏/下拉/弹窗看着"发蓝"，与整页米金打架。 现在取「比 --ui-bg-soft 再深一档的暖灰」。#ded6c6 的 R>G>B， 亮度低于 soft(#ece5d6) 高于 border，分层清楚又不跳色。 */ --ui-bg-float: #ded6c6; --ui-bg-overlay: rgba(255, 253, 247, 0.72); --ui-bg-overlay-strong: rgba(255, 253, 247, 0.92); --ui-text-primary: #17130a; --ui-text-secondary: #403a2d; --ui-text-muted: #7a7261; --ui-text-faint: #a89e88; --ui-text-on-accent: #fffdf7; --ui-border: rgba(23, 19, 10, 0.12); --ui-border-strong: rgba(23, 19, 10, 0.2); --ui-border-soft: rgba(23, 19, 10, 0.06); --ui-accent: #9c7c3c; --ui-accent-hover: #c4a05c; --ui-accent-hi: #e6cd92; --ui-accent-soft: rgba(196, 160, 92, 0.14); --ui-glow: rgba(196, 160, 92, 0.35); --ui-focus-ring: rgba(196, 160, 92, 0.4); --ui-accent-ramp-to: #ffffff; --ui-success: #4e8a5c; --ui-success-soft: rgba(78, 138, 92, 0.14); --ui-warning: #b07a2f; --ui-warning-soft: rgba(176, 122, 47, 0.14); --ui-danger: #c0492f; --ui-danger-soft: rgba(192, 73, 47, 0.12); --ui-info: #6a6cc0; --ui-info-soft: rgba(106, 108, 192, 0.14); /* 线上实测圆角族：6 / 12 / 16 / 20 / 24 / 999 */ --ui-radius-sm: 6px; --ui-radius-md: 12px; --ui-radius-lg: 20px; --ui-radius-xl: 24px; --ui-shadow-1: 0 2px 6px rgba(40, 30, 10, 0.06); --ui-shadow-2: 0 2px 6px rgba(40, 30, 10, 0.06), 0 18px 44px rgba(60, 45, 15, 0.1); --ui-shadow-3: 0 2px 6px rgba(40, 30, 10, 0.06), 0 30px 70px rgba(60, 45, 15, 0.12); /* ★展示字体与 classic 统一★（2026-09-09 用户要求「用旧版的字体」）： 原来金/夜各自换字体（Cormorant Garamond / Sora），实测在中文界面里 Cormorant 的小写 x-height 很低、字形偏细，标题读起来像"斜体艺术字"， 而且中文回落字形与拉丁拼在一起不成套。统一用 Source Serif 4 —— 同一款衬线，中英文都有对应字形，和旧版观感一致。 ★不加 font-style: italic★：斜体是 Cormorant 时代的残留，衬线正体更稳。 */ --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Noto Serif SC', 'Songti SC', serif; } /* ───────────── 曜夜 night（深） ───────────── */ [data-theme="aixluv-night"] { --ui-bg-page: #0c0c11; /* 深色下的"面板"是半透明白，不是实色——叠在页面底色上自然分层， 换底色时不用重算每一层灰度（线上同款做法）。 ★0.035 太贴近页底★：叠在 #0c0c11 上等效 #151519，面板与背景几乎看不出分界， 整页读起来就是"一坨死黑"，这是"质感不如参考站"里最实在的一处 （参考站的面板明显比页底亮一档）。提到 0.055 后等效 #19191e，卡片边界才立得住。 */ --ui-bg-elevated: rgba(255, 255, 255, 0.055); --ui-bg-soft: rgba(255, 255, 255, 0.075); --ui-bg-muted: #121219; --ui-bg-float: #17171d; --ui-bg-overlay: rgba(18, 18, 25, 0.72); --ui-bg-overlay-strong: rgba(12, 12, 17, 0.9); --ui-text-primary: #f4f1ea; --ui-text-secondary: #d6d1c6; --ui-text-muted: #928d82; --ui-text-faint: #5d594f; --ui-text-on-accent: #07070a; --ui-border: rgba(255, 255, 255, 0.1); --ui-border-strong: rgba(255, 255, 255, 0.2); --ui-border-soft: rgba(255, 255, 255, 0.05); --ui-accent: #cbb079; --ui-accent-hover: #e2cb96; --ui-accent-hi: #f2e3bf; --ui-accent-soft: rgba(203, 176, 121, 0.12); --ui-glow: rgba(203, 176, 121, 0.4); --ui-focus-ring: rgba(203, 176, 121, 0.45); --ui-accent-ramp-to: #0c0c11; --ui-success: #6fbf8a; --ui-success-soft: rgba(111, 191, 138, 0.16); --ui-warning: #d9b070; --ui-warning-soft: rgba(217, 176, 112, 0.16); --ui-danger: #e8705a; --ui-danger-soft: rgba(232, 112, 90, 0.18); --ui-info: #8fb0d6; --ui-info-soft: rgba(143, 176, 214, 0.16); --ui-radius-sm: 6px; --ui-radius-md: 12px; --ui-radius-lg: 20px; --ui-radius-xl: 24px; --ui-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.4); --ui-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.4), 0 24px 56px rgba(0, 0, 0, 0.5); --ui-shadow-3: 0 2px 8px rgba(0, 0, 0, 0.4), 0 40px 90px rgba(0, 0, 0, 0.6); --font-display: 'Source Serif 4 Variable', 'Source Serif 4', Georgia, 'Noto Serif SC', 'Songti SC', serif; } *{box-sizing:border-box}body{margin:0;background:var(--ui-bg-page);color:var(--ui-text-primary);font:15px/1.7 system-ui,-apple-system,'PingFang SC',sans-serif}header,main,footer{max-width:1280px;margin:auto;padding-inline:32px}header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:22px;border-bottom:1px solid var(--ui-border)}a{color:inherit}button,select,input{font:inherit}button,select{color:var(--ui-text-primary);background:var(--ui-bg-soft);border:1px solid var(--ui-border);padding:10px 14px;border-radius:10px;cursor:pointer}.brand{font:italic 700 24px Georgia,serif;text-decoration:none;white-space:nowrap}.brand small{display:block;font:11px system-ui;color:var(--ui-text-secondary);letter-spacing:.12em;margin-top:4px}nav,.tools{display:flex;align-items:center;gap:20px}nav a{text-decoration:none;font-size:13px}nav a:hover,a:hover{color:var(--ui-accent)}.tools{gap:8px}main{min-height:70vh;padding-block:56px 90px}h1,h2,h3{font-family:Georgia,'Noto Serif SC','Songti SC',serif;line-height:1.25}h1{font-size:clamp(34px,5vw,60px);letter-spacing:-.025em}h2{font-size:24px}.hero{max-width:820px;margin:0 auto 48px;text-align:center}.hero p,.summary{font-size:17px;color:var(--ui-text-secondary)}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--ui-accent);text-transform:uppercase}#search{display:flex;gap:12px;padding:10px;border:1px solid var(--ui-border-strong);border-radius:16px;background:var(--ui-bg-elevated);margin-top:28px}#search input{min-width:0;flex:1;padding:8px;background:transparent;border:0;color:var(--ui-text-primary)}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.card{display:flex;flex-direction:column;padding:26px;border:1px solid var(--ui-border);border-radius:22px;background:var(--ui-bg-elevated);text-decoration:none;overflow-wrap:anywhere;min-width:0}.card:hover{border-color:var(--ui-accent)}.card p{color:var(--ui-text-secondary);margin:0;font-size:14px}.card small{color:var(--ui-accent)}.card img{width:100%;height:150px;object-fit:cover;border-radius:12px;margin:10px 0}.card .logo{width:64px;height:64px;object-fit:contain;align-self:flex-start}.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}.filters button{background:transparent;border-radius:30px}.filters .selected{border-color:var(--ui-accent);background:var(--ui-accent-soft);color:var(--ui-accent)}.reading{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:70px}.reading h1{font-size:clamp(30px,4vw,44px)}.crumb,.meta{font-size:12px;color:var(--ui-text-secondary)}.meta{padding-bottom:25px;border-bottom:1px solid var(--ui-border)}.prose{line-height:1.95;overflow-wrap:anywhere}.prose p,.prose li{color:var(--ui-text-secondary)}.prose h2,.prose h3{margin-top:34px;scroll-margin-top:20px}.prose pre{overflow:auto;padding:18px;background:var(--ui-bg-soft);border-radius:12px}.prose code{font-family:monospace}.prose table{display:block;overflow:auto;border-collapse:collapse}.prose td,.prose th{padding:10px;border:1px solid var(--ui-border)}.prose blockquote{margin-inline:0;border-left:3px solid var(--ui-accent);padding-left:20px}.cover{width:100%;max-height:360px;object-fit:cover;border-radius:18px}.reading aside{position:sticky;top:28px;align-self:start}.reading aside>h2{font:13px system-ui;color:var(--ui-text-secondary)}.reading aside>a{display:block;text-decoration:none;padding:10px 12px;border-left:1px solid var(--ui-border);font-size:13px}.support{padding:20px;margin-top:28px;background:var(--ui-bg-elevated);border:1px solid var(--ui-border);border-radius:16px}.support p{font-size:13px;color:var(--ui-text-secondary)}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:25px}.tags span{font-size:12px;padding:5px 12px;border:1px solid var(--ui-border);border-radius:20px}.button{display:inline-block;padding:12px 20px;border:1px solid var(--ui-border);border-radius:10px;margin:25px 0;text-decoration:none}.related{margin-top:35px;border-top:1px solid var(--ui-border);padding-top:20px}.related a{display:block;padding:10px 0}footer{display:flex;gap:24px;flex-wrap:wrap;padding-block:25px;border-top:1px solid var(--ui-border);font-size:12px;color:var(--ui-text-secondary)}footer span{margin-right:auto}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--ui-accent);outline-offset:4px}@media(max-width:1000px){header{flex-wrap:wrap}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.reading{grid-template-columns:minmax(0,1fr);gap:24px}.reading aside{position:static;grid-row:1}.support{display:none}nav{flex-wrap:wrap}}@media(max-width:600px){header,main,footer{padding-inline:20px}header{gap:16px}nav{order:3;width:100%;gap:16px}.brand{font-size:21px}.tools{margin-left:auto}main{padding-top:32px}.grid{grid-template-columns:1fr}.filters{flex-wrap:nowrap;overflow:auto;padding:3px 1px 12px}.filters button{flex-shrink:0}#search{gap:5px}#search button{padding-inline:10px}.card{padding:22px}.hero{margin-bottom:30px}}