:root {
      color-scheme: light;
      --ink: #1c1914;
      --ink-soft: #4a453c;
      --ink-muted: #8a8276;
      --paper: #f4efe6;
      --paper-deep: #ebe4d6;
      --paper-lift: #faf7f1;
      --sidebar: #1e2a24;
      --sidebar-lift: #26352d;
      --sidebar-edge: #2f4137;
      --accent: #d4773b;
      --accent-soft: #e8a06a;
      --accent-deep: #b85f28;
      --accent-glow: rgba(212, 119, 59, 0.22);
      --moss: #6b8f71;
      --danger: #c45c4a;
      --shadow: 0 24px 60px rgba(28, 25, 20, 0.12);
      --radius: 12px;
      --radius-shell: 22px;
      --font-display: "Instrument Serif", Georgia, "Times New Roman", "Songti SC", SimSun, serif;
      /* Windows: Segoe UI + 微软雅黑；macOS: PingFang；避免只靠 Google Fonts */
      --font-ui: "DM Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", ui-monospace, monospace;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
      --code-bg: #2a211c;
      --code-fg: #f0e6d8;
      --sidebar-fg: #e8e2d6;
      --sidebar-fg-dim: rgba(232, 226, 214, 0.58);
      --sidebar-fg-mute: rgba(232, 226, 214, 0.42);
      --sidebar-line: rgba(255, 255, 255, 0.06);
      --sidebar-fill: rgba(255, 255, 255, 0.05);
      --sidebar-fill-strong: rgba(255, 255, 255, 0.09);
      --sidebar-search-bg: rgba(0, 0, 0, 0.22);
      --sidebar-active-bg: rgba(212, 119, 59, 0.16);
      --sidebar-active-border: rgba(232, 160, 106, 0.28);
      --on-accent: #fff8f1;
      --link: #a85a24;
      --strong: #15120e;
      --inline-code: #7a3d1e;
      --hairline: rgba(28, 25, 20, 0.08);
      --hairline-strong: rgba(28, 25, 20, 0.12);
      --surface: rgba(255, 255, 255, 0.45);
      --surface-hover: rgba(255, 255, 255, 0.78);
      --surface-solid: #fff;
      --header-bg: linear-gradient(180deg, rgba(250, 247, 241, 0.95), rgba(244, 239, 230, 0.72));
      --toolbar-bg: rgba(244, 239, 230, 0.96);
      --toolbar-fg: #4a4036;
      --status-bg: rgba(244, 239, 230, 0.85);
      --page-glow-1: rgba(212, 119, 59, 0.12);
      --page-glow-2: rgba(107, 143, 113, 0.1);
      --page-wash: #efe8db;
      --page-wash-end: #e7dfd0;
      --noise-opacity: 0.28;
      --noise-blend: multiply;
      --table-bg: #f6f0e6;
      --table-line: rgba(28, 25, 20, 0.16);
      --table-stripe: rgba(28, 25, 20, 0.05);
      --blockquote-tint: rgba(212, 119, 59, 0.07);
      --row-hover: rgba(212, 119, 59, 0.1);
      --diagram-card: #f6f0e6;
      --code-border: rgba(28, 25, 20, 0.2);
      --lightbox-dim: rgba(20, 18, 14, 0.72);
      --scroll-thumb: rgba(28, 25, 20, 0.22);
      --scroll-thumb-side: rgba(255, 255, 255, 0.15);
      --reader-size: 0.98rem;
      --reader-leading: 1.58;
      --reader-gap: 0.65em;
      --reader-tracking: 0em;
      --reader-font: var(--font-ui);
      --reader-heading: var(--font-display);
    }

    /* 墨夜：暖黑夜读，油灯金 */
    html[data-theme="night"] {
      color-scheme: dark;
      --ink: #e8e2d6;
      --ink-soft: #c4bdb0;
      --ink-muted: #8d867a;
      --paper: #161410;
      --paper-deep: #1e1a15;
      --paper-lift: #1a1713;
      --sidebar: #0c0b0a;
      --sidebar-lift: #141210;
      --sidebar-edge: #2a241c;
      --accent: #e0a054;
      --accent-soft: #f0c48a;
      --accent-deep: #c48438;
      --accent-glow: rgba(224, 160, 84, 0.28);
      --moss: #7a9e80;
      --danger: #e07a6a;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
      --code-bg: #0e0c0a;
      --code-fg: #f0e6d8;
      --sidebar-active-bg: rgba(224, 160, 84, 0.16);
      --sidebar-active-border: rgba(240, 196, 138, 0.32);
      --on-accent: #1a140c;
      --link: #f0c48a;
      --strong: #f4efe6;
      --inline-code: #f0c48a;
      --hairline: rgba(232, 226, 214, 0.1);
      --hairline-strong: rgba(232, 226, 214, 0.16);
      --surface: rgba(255, 255, 255, 0.04);
      --surface-hover: rgba(255, 255, 255, 0.08);
      --surface-solid: #221e18;
      --header-bg: linear-gradient(180deg, rgba(26, 23, 19, 0.96), rgba(22, 20, 16, 0.82));
      --toolbar-bg: rgba(22, 20, 16, 0.96);
      --toolbar-fg: #c4bdb0;
      --status-bg: rgba(22, 20, 16, 0.9);
      --page-glow-1: rgba(224, 160, 84, 0.12);
      --page-glow-2: rgba(107, 143, 113, 0.08);
      --page-wash: #12100d;
      --page-wash-end: #0c0b0a;
      --noise-opacity: 0.22;
      --noise-blend: overlay;
      --table-bg: #1a1713;
      --table-line: rgba(232, 226, 214, 0.16);
      --table-stripe: rgba(232, 226, 214, 0.05);
      --blockquote-tint: rgba(224, 160, 84, 0.1);
      --row-hover: rgba(224, 160, 84, 0.12);
      --diagram-card: #1a1713;
      --code-border: rgba(232, 226, 214, 0.12);
      --lightbox-dim: rgba(6, 5, 4, 0.78);
      --scroll-thumb: rgba(232, 226, 214, 0.22);
    }

    /* 终端：磷光绿，给写代码的人 */
    html[data-theme="hack"] {
      color-scheme: dark;
      --ink: #d7e8dc;
      --ink-soft: #9fb8a8;
      --ink-muted: #6d8578;
      --paper: #0d1411;
      --paper-deep: #15201a;
      --paper-lift: #101814;
      --sidebar: #080c0a;
      --sidebar-lift: #0c1410;
      --sidebar-edge: #1a2e24;
      --accent: #3dd68c;
      --accent-soft: #7dffb2;
      --accent-deep: #1fa866;
      --accent-glow: rgba(61, 214, 140, 0.28);
      --moss: #3dd68c;
      --danger: #ff6b6b;
      --shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
      --radius: 6px;
      --radius-shell: 8px;
      --font-display: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
      --font-ui: "IBM Plex Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
      --font-mono: "IBM Plex Mono", "JetBrains Mono", "Cascadia Code", ui-monospace, monospace;
      --code-bg: #07110c;
      --code-fg: #c8f5d8;
      --sidebar-fg: #d7e8dc;
      --sidebar-fg-dim: rgba(215, 232, 220, 0.55);
      --sidebar-fg-mute: rgba(215, 232, 220, 0.38);
      --sidebar-line: rgba(61, 214, 140, 0.12);
      --sidebar-fill: rgba(61, 214, 140, 0.06);
      --sidebar-fill-strong: rgba(61, 214, 140, 0.12);
      --sidebar-search-bg: rgba(0, 0, 0, 0.4);
      --sidebar-active-bg: rgba(61, 214, 140, 0.14);
      --sidebar-active-border: rgba(125, 255, 178, 0.35);
      --on-accent: #04140c;
      --link: #7dffb2;
      --strong: #e8fff0;
      --inline-code: #7dffb2;
      --hairline: rgba(61, 214, 140, 0.14);
      --hairline-strong: rgba(61, 214, 140, 0.22);
      --surface: rgba(61, 214, 140, 0.05);
      --surface-hover: rgba(61, 214, 140, 0.1);
      --surface-solid: #15201a;
      --header-bg: linear-gradient(180deg, rgba(16, 24, 20, 0.96), rgba(13, 20, 17, 0.85));
      --toolbar-bg: rgba(13, 20, 17, 0.96);
      --toolbar-fg: #9fb8a8;
      --status-bg: rgba(8, 12, 10, 0.92);
      --page-glow-1: rgba(61, 214, 140, 0.1);
      --page-glow-2: rgba(61, 214, 140, 0.04);
      --page-wash: #080c0a;
      --page-wash-end: #050806;
      --noise-opacity: 0.16;
      --noise-blend: overlay;
      --table-bg: #0f1814;
      --table-line: rgba(61, 214, 140, 0.22);
      --table-stripe: rgba(61, 214, 140, 0.07);
      --blockquote-tint: rgba(61, 214, 140, 0.1);
      --row-hover: rgba(61, 214, 140, 0.14);
      --diagram-card: #0f1814;
      --code-border: rgba(61, 214, 140, 0.18);
      --lightbox-dim: rgba(2, 8, 5, 0.82);
      --scroll-thumb: rgba(61, 214, 140, 0.28);
      --scroll-thumb-side: rgba(61, 214, 140, 0.2);
    }

    /* 胭脂：豆沙与奶油纸，柔衬线 */
    html[data-theme="rose"] {
      color-scheme: light;
      --ink: #3d2a32;
      --ink-soft: #6a4a54;
      --ink-muted: #a07d86;
      --paper: #fbf4f1;
      --paper-deep: #f3e4e6;
      --paper-lift: #fff8f6;
      --sidebar: #5c3642;
      --sidebar-lift: #6a4150;
      --sidebar-edge: #7a5160;
      --accent: #c45b6a;
      --accent-soft: #e8a0aa;
      --accent-deep: #a34454;
      --accent-glow: rgba(196, 91, 106, 0.24);
      --moss: #c45b6a;
      --danger: #b42318;
      --shadow: 0 24px 60px rgba(92, 54, 66, 0.14);
      --radius: 16px;
      --radius-shell: 26px;
      --font-display: "Cormorant Garamond", "Songti SC", "STSong", Georgia, "Times New Roman", serif;
      --code-bg: #3d2a32;
      --code-fg: #fdecef;
      --sidebar-fg: #fdecef;
      --sidebar-fg-dim: rgba(253, 236, 239, 0.62);
      --sidebar-fg-mute: rgba(253, 236, 239, 0.42);
      --sidebar-line: rgba(255, 255, 255, 0.1);
      --sidebar-fill: rgba(255, 255, 255, 0.08);
      --sidebar-fill-strong: rgba(255, 255, 255, 0.14);
      --sidebar-search-bg: rgba(0, 0, 0, 0.18);
      --sidebar-active-bg: rgba(232, 160, 170, 0.22);
      --sidebar-active-border: rgba(232, 160, 170, 0.4);
      --on-accent: #fff8f6;
      --link: #c45b6a;
      --strong: #2c1a20;
      --inline-code: #a34454;
      --hairline: rgba(92, 54, 66, 0.1);
      --hairline-strong: rgba(92, 54, 66, 0.16);
      --surface: rgba(255, 255, 255, 0.55);
      --surface-hover: rgba(255, 255, 255, 0.88);
      --header-bg: linear-gradient(180deg, rgba(255, 248, 246, 0.96), rgba(251, 244, 241, 0.75));
      --toolbar-bg: rgba(251, 244, 241, 0.96);
      --toolbar-fg: #6a4a54;
      --status-bg: rgba(243, 228, 230, 0.85);
      --page-glow-1: rgba(196, 91, 106, 0.14);
      --page-glow-2: rgba(232, 160, 170, 0.16);
      --page-wash: #f8ecea;
      --page-wash-end: #f3e0e4;
      --noise-opacity: 0.2;
      --table-bg: #f6e8ea;
      --table-line: rgba(92, 54, 66, 0.16);
      --table-stripe: rgba(92, 54, 66, 0.06);
      --blockquote-tint: rgba(196, 91, 106, 0.08);
      --row-hover: rgba(196, 91, 106, 0.1);
      --diagram-card: #f6e8ea;
      --code-border: rgba(92, 54, 66, 0.18);
      --lightbox-dim: rgba(45, 24, 32, 0.7);
      --scroll-thumb: rgba(92, 54, 66, 0.22);
    }

    /* 青石：冷灰 IDE 夜读 */
    html[data-theme="slate"] {
      color-scheme: dark;
      --ink: #e2e6ed;
      --ink-soft: #a8b0bd;
      --ink-muted: #6e7685;
      --paper: #12151a;
      --paper-deep: #1a1e26;
      --paper-lift: #161a21;
      --sidebar: #0a0c10;
      --sidebar-lift: #12151c;
      --sidebar-edge: #2a3140;
      --accent: #6b9fd4;
      --accent-soft: #9bc0e8;
      --accent-deep: #4a7fb0;
      --accent-glow: rgba(107, 159, 212, 0.28);
      --moss: #6b9fd4;
      --danger: #e07a6a;
      --shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
      --font-display: "IBM Plex Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
      --font-ui: "IBM Plex Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
      --font-mono: "JetBrains Mono", "Cascadia Code", "IBM Plex Mono", ui-monospace, monospace;
      --code-bg: #0a0c10;
      --code-fg: #e8eef6;
      --sidebar-fg: #e2e6ed;
      --sidebar-fg-dim: rgba(226, 230, 237, 0.55);
      --sidebar-fg-mute: rgba(226, 230, 237, 0.38);
      --sidebar-line: rgba(107, 159, 212, 0.12);
      --sidebar-fill: rgba(107, 159, 212, 0.06);
      --sidebar-fill-strong: rgba(107, 159, 212, 0.12);
      --sidebar-search-bg: rgba(0, 0, 0, 0.4);
      --sidebar-active-bg: rgba(107, 159, 212, 0.14);
      --sidebar-active-border: rgba(155, 192, 232, 0.35);
      --on-accent: #0a1018;
      --link: #9bc0e8;
      --strong: #f0f3f8;
      --inline-code: #9bc0e8;
      --hairline: rgba(226, 230, 237, 0.1);
      --hairline-strong: rgba(226, 230, 237, 0.16);
      --surface: rgba(255, 255, 255, 0.04);
      --surface-hover: rgba(255, 255, 255, 0.08);
      --surface-solid: #1a1e26;
      --header-bg: linear-gradient(180deg, rgba(22, 26, 33, 0.96), rgba(18, 21, 26, 0.85));
      --toolbar-bg: rgba(18, 21, 26, 0.96);
      --toolbar-fg: #a8b0bd;
      --status-bg: rgba(10, 12, 16, 0.92);
      --page-glow-1: rgba(107, 159, 212, 0.1);
      --page-glow-2: rgba(107, 159, 212, 0.04);
      --page-wash: #0e1116;
      --page-wash-end: #0a0c10;
      --noise-opacity: 0.14;
      --noise-blend: overlay;
      --table-bg: #161a21;
      --table-line: rgba(226, 230, 237, 0.14);
      --table-stripe: rgba(226, 230, 237, 0.05);
      --blockquote-tint: rgba(107, 159, 212, 0.1);
      --row-hover: rgba(107, 159, 212, 0.12);
      --diagram-card: #161a21;
      --code-border: rgba(226, 230, 237, 0.12);
      --lightbox-dim: rgba(4, 6, 10, 0.8);
      --scroll-thumb: rgba(107, 159, 212, 0.28);
      --scroll-thumb-side: rgba(107, 159, 212, 0.2);
    }

    /* 薄雾：冷白低饱和 */
    html[data-theme="mist"] {
      color-scheme: light;
      --ink: #2a3038;
      --ink-soft: #5a6570;
      --ink-muted: #8a949e;
      --paper: #f3f5f7;
      --paper-deep: #e6eaee;
      --paper-lift: #fafbfc;
      --sidebar: #2c3640;
      --sidebar-lift: #36424e;
      --sidebar-edge: #44525f;
      --accent: #4a6fa5;
      --accent-soft: #7a9bc4;
      --accent-deep: #355687;
      --accent-glow: rgba(74, 111, 165, 0.22);
      --moss: #5a8a7a;
      --danger: #c45c4a;
      --shadow: 0 24px 60px rgba(42, 48, 56, 0.1);
      --code-bg: #2a3038;
      --code-fg: #eef2f6;
      --sidebar-fg: #eef2f6;
      --sidebar-fg-dim: rgba(238, 242, 246, 0.58);
      --sidebar-fg-mute: rgba(238, 242, 246, 0.4);
      --sidebar-line: rgba(255, 255, 255, 0.08);
      --sidebar-fill: rgba(255, 255, 255, 0.06);
      --sidebar-fill-strong: rgba(255, 255, 255, 0.11);
      --sidebar-search-bg: rgba(0, 0, 0, 0.2);
      --sidebar-active-bg: rgba(122, 155, 196, 0.2);
      --sidebar-active-border: rgba(122, 155, 196, 0.38);
      --on-accent: #f7f9fb;
      --link: #355687;
      --strong: #1a1e24;
      --inline-code: #355687;
      --hairline: rgba(42, 48, 56, 0.08);
      --hairline-strong: rgba(42, 48, 56, 0.14);
      --surface: rgba(255, 255, 255, 0.55);
      --surface-hover: rgba(255, 255, 255, 0.88);
      --surface-solid: #fff;
      --header-bg: linear-gradient(180deg, rgba(250, 251, 252, 0.96), rgba(243, 245, 247, 0.75));
      --toolbar-bg: rgba(243, 245, 247, 0.96);
      --toolbar-fg: #5a6570;
      --status-bg: rgba(230, 234, 238, 0.88);
      --page-glow-1: rgba(74, 111, 165, 0.08);
      --page-glow-2: rgba(90, 138, 122, 0.06);
      --page-wash: #eef1f4;
      --page-wash-end: #e4e9ee;
      --noise-opacity: 0.16;
      --noise-blend: multiply;
      --table-bg: #eef1f4;
      --table-line: rgba(42, 48, 56, 0.14);
      --table-stripe: rgba(42, 48, 56, 0.04);
      --blockquote-tint: rgba(74, 111, 165, 0.07);
      --row-hover: rgba(74, 111, 165, 0.1);
      --diagram-card: #eef1f4;
      --code-border: rgba(42, 48, 56, 0.16);
      --lightbox-dim: rgba(20, 24, 30, 0.7);
      --scroll-thumb: rgba(42, 48, 56, 0.22);
    }

    /* 朱砂：赭石与朱砂强调 */
    html[data-theme="cinnabar"] {
      color-scheme: light;
      --ink: #3a2418;
      --ink-soft: #6a4a38;
      --ink-muted: #9a7a68;
      --paper: #f7f0e8;
      --paper-deep: #ebe0d2;
      --paper-lift: #fcf8f3;
      --sidebar: #4a2e22;
      --sidebar-lift: #5a3a2c;
      --sidebar-edge: #6e4a3a;
      --accent: #c23b22;
      --accent-soft: #e07a5a;
      --accent-deep: #9a2e1a;
      --accent-glow: rgba(194, 59, 34, 0.24);
      --moss: #8a6a4a;
      --danger: #b42318;
      --shadow: 0 24px 60px rgba(58, 36, 24, 0.12);
      --font-display: "Cormorant Garamond", "Songti SC", "STSong", Georgia, "Times New Roman", serif;
      --code-bg: #3a2418;
      --code-fg: #f7ebe0;
      --sidebar-fg: #f7ebe0;
      --sidebar-fg-dim: rgba(247, 235, 224, 0.6);
      --sidebar-fg-mute: rgba(247, 235, 224, 0.4);
      --sidebar-line: rgba(255, 255, 255, 0.1);
      --sidebar-fill: rgba(255, 255, 255, 0.08);
      --sidebar-fill-strong: rgba(255, 255, 255, 0.14);
      --sidebar-search-bg: rgba(0, 0, 0, 0.18);
      --sidebar-active-bg: rgba(224, 122, 90, 0.22);
      --sidebar-active-border: rgba(224, 122, 90, 0.4);
      --on-accent: #fff8f3;
      --link: #9a2e1a;
      --strong: #2a1810;
      --inline-code: #9a2e1a;
      --hairline: rgba(58, 36, 24, 0.1);
      --hairline-strong: rgba(58, 36, 24, 0.16);
      --surface: rgba(255, 255, 255, 0.5);
      --surface-hover: rgba(255, 255, 255, 0.85);
      --surface-solid: #fff;
      --header-bg: linear-gradient(180deg, rgba(252, 248, 243, 0.96), rgba(247, 240, 232, 0.75));
      --toolbar-bg: rgba(247, 240, 232, 0.96);
      --toolbar-fg: #6a4a38;
      --status-bg: rgba(235, 224, 210, 0.88);
      --page-glow-1: rgba(194, 59, 34, 0.1);
      --page-glow-2: rgba(138, 106, 74, 0.1);
      --page-wash: #f0e6da;
      --page-wash-end: #e8dcc8;
      --noise-opacity: 0.22;
      --noise-blend: multiply;
      --table-bg: #f0e6da;
      --table-line: rgba(58, 36, 24, 0.16);
      --table-stripe: rgba(58, 36, 24, 0.05);
      --blockquote-tint: rgba(194, 59, 34, 0.08);
      --row-hover: rgba(194, 59, 34, 0.1);
      --diagram-card: #f0e6da;
      --code-border: rgba(58, 36, 24, 0.18);
      --lightbox-dim: rgba(36, 20, 12, 0.72);
      --scroll-thumb: rgba(58, 36, 24, 0.22);
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      max-height: 100%;
      color: var(--ink);
      font-family: var(--font-ui);
      /* Windows ClearType 下不要强行 antialiased，否则中文发虚 */
      text-rendering: optimizeLegibility;
      background:
        radial-gradient(1200px 600px at 10% -10%, var(--page-glow-1), transparent 55%),
        radial-gradient(900px 500px at 100% 0%, var(--page-glow-2), transparent 50%),
        linear-gradient(165deg, var(--page-wash) 0%, var(--paper) 45%, var(--page-wash-end) 100%);
      overflow: hidden;
    }

    /* 衬线标题在 Windows 上避免伪粗体 */
    .brand h1,
    .reader-title h2,
    .welcome h2,
    .aphorism,
    .folio-watermark,
    .vditor-reset h1,
    .vditor-reset h2,
    .vditor-reset h3 {
      font-synthesis: none;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: var(--noise-opacity);
      /* 1 octave + 独立合成层，避免 feTurbulence 拖累编辑器重绘 */
      contain: strict;
      transform: translateZ(0);
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
      mix-blend-mode: var(--noise-blend);
      z-index: 0;
    }

    html[data-theme="hack"] body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      opacity: 0.045;
      background: repeating-linear-gradient(
        to bottom,
        rgba(61, 214, 140, 0.55) 0px,
        rgba(61, 214, 140, 0.55) 1px,
        transparent 1px,
        transparent 4px
      );
    }

    .app {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 280px minmax(0, 1fr);
      grid-template-rows: minmax(0, 1fr);
      height: 100%;
      max-height: 100%;
      min-height: 0;
      overflow: hidden;
      padding: 12px;
      gap: 12px;
    }

    .sidebar {
      --rail: 14px;
      --ctrl: 36px;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      background: linear-gradient(180deg, var(--sidebar-lift) 0%, var(--sidebar) 100%);
      color: var(--sidebar-fg);
      border-radius: var(--radius-shell);
      border: 1px solid var(--sidebar-edge);
      box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.06);
      overflow: hidden;
    }

    .sidebar.is-compact {
      height: auto;
      max-height: 100%;
      align-self: start;
      overflow: visible;
      z-index: 4;
    }

    .brand {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
      padding: 22px var(--rail) 16px 22px;
      border-bottom: 1px solid var(--sidebar-line);
      position: relative;
      z-index: 6;
      flex-shrink: 0;
    }

    .brand-mark {
      display: flex;
      align-items: baseline;
      gap: 10px;
    }

    .brand h1 {
      display: flex;
      align-items: baseline;
      gap: 0.38em;
      font-family: var(--font-display);
      font-size: 2rem;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1;
      direction: ltr;
    }

    .brand h1 span {
      color: var(--accent-soft);
      font-style: italic;
    }

    .brand-latin {
      font-family: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
      font-style: italic;
      font-weight: 400;
      font-size: 0.62em;
      letter-spacing: 0.06em;
      color: var(--accent-soft);
      line-height: 1;
      opacity: 0.92;
    }

    .prefs {
      position: relative;
      flex-shrink: 0;
      margin-top: 2px;
    }

    .prefs-toggle {
      appearance: none;
      width: var(--ctrl);
      height: var(--ctrl);
      padding: 0;
      border: 1px solid var(--sidebar-line);
      border-radius: 8px;
      background: var(--sidebar-fill);
      color: var(--sidebar-fg);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.28s var(--ease);
    }

    .prefs-toggle svg {
      width: 15px;
      height: 15px;
      display: block;
    }

    .prefs-toggle:hover {
      color: var(--accent-soft);
      background: var(--sidebar-fill-strong);
      border-color: color-mix(in srgb, var(--accent-soft) 35%, var(--sidebar-line));
    }

    .prefs-toggle[aria-expanded="true"] {
      color: var(--accent-soft);
      background: var(--sidebar-fill-strong);
      border-color: color-mix(in srgb, var(--accent-soft) 45%, transparent);
      transform: rotate(-12deg);
    }

    .prefs-toggle:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px var(--sidebar-lift), 0 0 0 3.5px var(--accent-soft);
    }

    .prefs-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      width: 196px;
      padding: 12px 12px 14px;
      border-radius: 12px;
      border: 1px solid var(--sidebar-line);
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--sidebar-lift) 92%, white) 0%, var(--sidebar) 100%);
      box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
      transform-origin: 88% 0%;
      z-index: 8;
    }

    .prefs-menu.is-open {
      animation: molan-prefs-in 0.42s var(--ease) both;
    }

    .prefs-menu.is-out {
      animation: molan-prefs-out 0.22s ease both;
    }

    @keyframes molan-prefs-in {
      from {
        opacity: 0;
        filter: blur(8px);
        transform: translateY(-10px) rotate(4deg) scale(0.84);
      }
      to {
        opacity: 1;
        filter: blur(0);
        transform: none;
      }
    }

    @keyframes molan-prefs-out {
      from {
        opacity: 1;
        filter: blur(0);
        transform: none;
      }
      to {
        opacity: 0;
        filter: blur(5px);
        transform: translateY(-8px) rotate(3deg) scale(0.9);
      }
    }

    @keyframes molan-outline-in {
      from {
        opacity: 0;
        transform: translateX(-12px);
      }
      to {
        opacity: 1;
        transform: none;
      }
    }

    @keyframes molan-outline-out {
      from {
        opacity: 1;
        transform: none;
      }
      to {
        opacity: 0;
        transform: translateX(-12px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .prefs-toggle,
      .prefs-toggle[aria-expanded="true"] {
        transform: none;
      }
      .prefs-menu.is-open,
      .prefs-menu.is-out,
      .molan-find-bar.is-open,
      .molan-find-bar.is-out,
      .type-menu.is-open,
      .type-menu.is-out,
      .theme-menu.is-open,
      .theme-menu.is-out,
      .molan-outline-panel.is-open,
      .molan-outline-panel.is-out,
      .editor-wrap > .vditor-outline.is-in,
      .editor-wrap > .vditor-outline.is-out {
        animation: none;
      }
      #outlineBtn svg {
        transition: none;
      }
    }

    html[dir="rtl"] .prefs-menu {
      right: auto;
      left: 0;
      transform-origin: 12% 0%;
    }

    html[dir="rtl"] .brand {
      padding: 22px 22px 16px var(--rail);
    }

    .prefs-section + .prefs-section {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid var(--sidebar-line);
    }

    .prefs-label {
      display: block;
      margin-bottom: 8px;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sidebar-fg-mute);
      font-weight: 600;
    }

    .prefs-link {
      display: inline-block;
      color: var(--accent-soft);
      font-size: 0.78rem;
      text-decoration: none;
      border-bottom: 1px solid transparent;
    }

    .prefs-link:hover {
      border-bottom-color: currentColor;
    }

    .prefs-links {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
    }

    .flow-curve {
      margin-top: 10px;
      min-width: 168px;
    }

    .flow-curve__label {
      margin-bottom: 6px;
      font: 500 0.75rem/1.3 var(--font-ui);
      color: var(--ink-muted);
    }

    .flow-curve__switch {
      display: flex;
      gap: 4px;
    }

    .flow-curve__switch button {
      flex: 1;
      border: 1px solid var(--hairline-strong);
      background: transparent;
      color: var(--ink-soft);
      border-radius: 8px;
      padding: 5px 8px;
      font: 500 0.82rem/1.2 var(--font-ui);
      cursor: pointer;
    }

    .flow-curve__switch button[aria-checked="true"] {
      background: var(--surface-hover);
      color: var(--ink);
      border-color: var(--accent);
    }

    .theme-switch {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 2px;
      max-width: 196px;
    }

    .theme-switch button {
      appearance: none;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
      color: var(--accent-soft);
    }

    .theme-switch button svg {
      display: block;
      width: 28px;
      height: 28px;
      overflow: visible;
    }

    .theme-switch .theme-ring {
      fill: none;
      stroke: currentColor;
      stroke-width: 1.5;
      stroke-opacity: 0;
      transition: stroke-opacity 0.18s ease;
    }

    .theme-switch button:hover .theme-ring {
      stroke-opacity: 0.38;
    }

    .theme-switch button[aria-checked="true"] .theme-ring {
      stroke-opacity: 1;
    }

    .theme-switch button:focus-visible {
      outline: none;
    }

    .theme-switch button:focus-visible .theme-ring {
      stroke-opacity: 1;
    }

    .theme-switch [data-theme="xuan"] .theme-fill { fill: #f4efe6; }
    .theme-switch [data-theme="night"] .theme-fill { fill: #c9a06a; }
    .theme-switch [data-theme="hack"] .theme-fill { fill: #3aa874; }
    .theme-switch [data-theme="rose"] .theme-fill { fill: #e8b4bc; }
    .theme-switch [data-theme="slate"] .theme-fill { fill: #6b9fd4; }
    .theme-switch [data-theme="mist"] .theme-fill { fill: #c5ced8; }
    .theme-switch [data-theme="cinnabar"] .theme-fill { fill: #c23b22; }

    .theme-tweak {
      margin-top: 14px;
      padding-top: 12px;
      border-top: 1px solid var(--hairline);
    }

    .theme-tweak .type-head {
      margin-bottom: 8px;
    }

    .theme-tweak .type-row {
      margin-bottom: 8px;
    }

    .theme-tweak input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      border-radius: 999px;
      background: linear-gradient(
        to right,
        var(--accent) 0%,
        var(--accent) var(--pct, 50%),
        color-mix(in srgb, var(--ink-muted) 35%, transparent) var(--pct, 50%),
        color-mix(in srgb, var(--ink-muted) 35%, transparent) 100%
      );
      outline: none;
      cursor: pointer;
    }

    html[dir="rtl"] .theme-tweak input[type="range"] {
      background: linear-gradient(
        to left,
        var(--accent) 0%,
        var(--accent) var(--pct, 50%),
        color-mix(in srgb, var(--ink-muted) 35%, transparent) var(--pct, 50%),
        color-mix(in srgb, var(--ink-muted) 35%, transparent) 100%
      );
    }

    .theme-tweak input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--paper-lift);
      box-shadow: 0 1px 4px var(--accent-glow);
      cursor: pointer;
    }

    .theme-tweak input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--paper-lift);
      box-shadow: 0 1px 4px var(--accent-glow);
      cursor: pointer;
    }

    .theme-tweak input[type="range"]::-moz-range-track {
      background: transparent;
      border: 0;
    }

    .theme-tweak input[type="range"]:focus-visible {
      outline: 2px solid var(--accent-soft);
      outline-offset: 3px;
    }

    .theme-tweak .type-reset {
      margin-top: 4px;
    }

    .lang-switch {
      min-width: 0;
      flex: 1;
    }

    .lang-switch select {
      width: 100%;
      max-width: none;
      min-width: 0;
      appearance: none;
      background: var(--sidebar-search-bg);
      color: var(--sidebar-fg);
      border: 1px solid var(--sidebar-line);
      border-radius: 8px;
      padding: 5px 8px;
      font-family: var(--font-ui);
      font-size: 0.78rem;
      outline: none;
    }

    .lang-switch select:focus {
      border-color: var(--accent-soft);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    html[dir="rtl"] .search {
      padding: 11px 38px 11px 12px;
    }

    html[dir="rtl"] .search-wrap svg {
      left: auto;
      right: 12px;
    }

    html[dir="rtl"] .toolbar {
      padding: 14px 18px 10px var(--rail);
    }

    .toolbar {
      padding: 14px var(--rail) 10px 18px;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 0;
      flex-shrink: 0;
      transition: gap 0.56s var(--ease);
    }

    .toolbar.has-search {
      gap: 12px;
    }

    .toolbar-pick {
      --seal: #b23a32;
      --seal-ink: #f6e4d6;
      appearance: none;
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      width: auto;
      min-width: var(--ctrl);
      height: var(--ctrl);
      padding: 0 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      color: var(--seal-ink);
      background: var(--seal);
      border: 0;
      border-radius: 8px;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--seal-ink) 28%, transparent),
        0 0 18px 3px color-mix(in srgb, var(--seal) 58%, transparent),
        0 6px 14px color-mix(in srgb, var(--seal) 38%, transparent);
      cursor: pointer;
      transition:
        transform 0.2s var(--ease),
        box-shadow 0.2s ease,
        filter 0.2s ease,
        padding 0.56s var(--ease),
        gap 0.5s var(--ease),
        flex-grow 0.68s var(--ease),
        flex-basis 0.68s var(--ease),
        width 0.68s var(--ease);
    }

    .toolbar.has-search .toolbar-pick {
      flex: 0 0 var(--ctrl);
      width: var(--ctrl);
      padding: 0;
      gap: 0;
    }

    .toolbar-pick-label {
      min-width: 0;
      max-width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 0.86rem;
      letter-spacing: 0.16em;
      line-height: 1;
      opacity: 1;
      transition: opacity 0.36s ease, max-width 0.56s var(--ease);
    }

    .toolbar.has-search .toolbar-pick-label {
      max-width: 0;
      opacity: 0;
      pointer-events: none;
    }

    html[dir="rtl"] .toolbar-pick-label {
      letter-spacing: 0.08em;
    }

    .toolbar-pick svg {
      width: 15px;
      height: 15px;
      display: block;
      flex-shrink: 0;
    }

    .toolbar-pick:hover {
      transform: translateY(-1px);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--seal-ink) 40%, transparent),
        0 0 26px 5px color-mix(in srgb, var(--seal) 72%, transparent),
        0 8px 18px color-mix(in srgb, var(--seal) 46%, transparent);
    }

    .toolbar-pick:active { transform: translateY(0); }

    .toolbar-pick:focus-visible {
      outline: none;
      box-shadow:
        0 0 0 2px var(--sidebar-lift),
        0 0 0 4px var(--seal),
        0 0 22px 4px color-mix(in srgb, var(--seal) 65%, transparent);
    }

    .toolbar-pick::after {
      content: none;
    }

    .toolbar-pick.is-hint::after {
      content: "";
      position: absolute;
      inset: -7px;
      border-radius: 14px;
      pointer-events: none;
      box-shadow: 0 0 18px 4px color-mix(in srgb, var(--seal) 42%, transparent);
      animation: molan-glow 2.6s ease-in-out infinite;
    }

    @keyframes molan-glow {
      0%, 100% { opacity: 0.45; transform: scale(0.92); }
      50% { opacity: 1; transform: scale(1.08); }
    }

    @media (prefers-reduced-motion: reduce) {
      .toolbar-pick,
      .toolbar-pick:hover,
      .toolbar-pick:active {
        transform: none;
      }
      .toolbar-pick.is-hint::after {
        animation: none;
        opacity: 0.7;
        transform: none;
      }
    }

    .file-list[hidden] {
      display: none !important;
    }

    .btn {
      appearance: none;
      border: none;
      cursor: pointer;
      font-family: var(--font-ui);
      font-weight: 600;
      font-size: 0.9rem;
      border-radius: var(--radius);
      padding: 12px 14px;
      transition: transform 0.2s var(--ease), background 0.2s ease, box-shadow 0.2s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
      color: var(--on-accent);
      box-shadow: 0 8px 24px var(--accent-glow);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 12px 28px var(--accent-glow);
    }

    .btn-primary:active { transform: translateY(0); }

    .btn-ghost {
      background: var(--sidebar-fill);
      color: var(--sidebar-fg);
      border: 1px solid var(--sidebar-line);
    }

    .btn-ghost:hover { background: var(--sidebar-fill-strong); }

    /* 不能用 display:none，否则程序化 click 会被拦截，兼容模式失效 */
    .hidden-input {
      position: fixed;
      left: 0;
      top: 0;
      width: 1px;
      height: 1px;
      opacity: 0;
      overflow: hidden;
      pointer-events: none;
    }

    .search-wrap {
      position: relative;
      flex: 0 1 0%;
      width: 0;
      min-width: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateX(-6px);
      pointer-events: none;
      transition:
        flex-grow 0.68s var(--ease),
        flex-basis 0.68s var(--ease),
        width 0.68s var(--ease),
        opacity 0.44s ease,
        transform 0.62s var(--ease);
    }

    .toolbar.has-search .search-wrap {
      flex: 1 1 0%;
      width: auto;
      opacity: 1;
      transform: none;
      pointer-events: auto;
    }

    html[dir="rtl"] .search-wrap {
      transform: translateX(6px);
    }

    html[dir="rtl"] .toolbar.has-search .search-wrap {
      transform: none;
    }

    .search-wrap svg {
      position: absolute;
      left: 12px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0.45;
      pointer-events: none;
    }

    .search {
      width: 100%;
      min-width: 12rem;
      background: var(--sidebar-search-bg);
      border: 1px solid var(--sidebar-line);
      color: var(--sidebar-fg);
      border-radius: var(--radius);
      padding: 11px 12px 11px 38px;
      font-family: var(--font-ui);
      font-size: 0.88rem;
      outline: none;
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .search::placeholder { color: var(--sidebar-fg-mute); }
    .search:focus {
      border-color: var(--accent-soft);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }

    .recent-list {
      display: flex;
      flex-direction: column;
      gap: 1px;
      margin: 0 var(--list-inset) 4px;
      padding: var(--list-pad);
      border-radius: 10px;
      background: color-mix(in srgb, var(--accent) 6%, transparent);
    }

    .file-list:has(.doc-list) .recent-list,
    .file-list:has(.empty-side) .recent-list {
      margin-bottom: 10px;
    }

    .recent-row {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-rows: 1fr;
      gap: 2px;
      align-items: stretch;
      transition:
        grid-template-rows 0.54s var(--ease),
        opacity 0.4s ease,
        transform 0.54s var(--ease);
    }

    .recent-row > * {
      min-height: 0;
    }

    .recent-row.is-leaving {
      grid-template-rows: 0fr;
      opacity: 0;
      transform: translateX(-8px);
      overflow: hidden;
      pointer-events: none;
    }

    html[dir="rtl"] .recent-row.is-leaving {
      transform: translateX(8px);
    }

    .recent-item {
      width: 100%;
      min-width: 0;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      color: var(--sidebar-fg);
      border-radius: 8px;
      padding: 5px 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: var(--font-ui);
      transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
    }

    .recent-item:hover {
      background: var(--sidebar-fill);
      border-color: var(--sidebar-line);
    }

    .recent-item.is-current {
      background: color-mix(in srgb, var(--accent) 16%, transparent);
      border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    }

    .recent-item.is-current .file-name,
    .recent-item.is-current .file-count {
      color: var(--accent-soft);
    }

    .recent-item.is-current .file-name {
      font-weight: 600;
    }

    .recent-item.is-current .file-icon {
      color: var(--on-accent);
      background: color-mix(in srgb, var(--accent) 78%, var(--sidebar-fill-strong));
    }

    .recent-item .file-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
      font-size: 0.9rem;
      font-weight: 500;
    }

    .file-count {
      flex-shrink: 0;
      font-size: 0.68rem;
      font-variant-numeric: tabular-nums;
      color: var(--sidebar-fg-mute);
      font-weight: 500;
    }

    .recent-remove {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--sidebar-fg-mute);
      cursor: pointer;
      width: var(--ctrl);
      min-width: var(--ctrl);
      min-height: var(--ctrl);
      padding: 0;
      border-radius: 8px;
      font-size: 1.05rem;
      line-height: 1;
      display: grid;
      place-items: center;
      align-self: center;
    }

    .recent-remove:hover {
      color: var(--accent-soft);
      background: var(--sidebar-fill-strong);
    }

    .file-list {
      --list-inset: 4px;
      --list-pad: 4px;
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 4px var(--rail) 14px 8px;
      scrollbar-width: thin;
      scrollbar-color: var(--scroll-thumb-side) transparent;
      contain: layout style;
    }

    html[dir="rtl"] .file-list {
      padding: 4px 8px 14px var(--rail);
    }

    .doc-list {
      display: grid;
      grid-template-rows: 1fr;
      margin: 0 var(--list-inset);
      padding: 0 var(--list-pad);
      transition: grid-template-rows 0.56s var(--ease), opacity 0.44s ease;
    }

    .doc-list.is-leaving {
      grid-template-rows: 0fr;
      opacity: 0;
      pointer-events: none;
    }

    .doc-list-body {
      min-height: 0;
      overflow: hidden;
    }

    .file-group-title {
      margin: 8px 0 4px;
      font-size: 0.62rem;
      letter-spacing: 0.04em;
      color: var(--sidebar-fg-mute);
      font-weight: 600;
    }

    .file-item {
      width: calc(100% - var(--ctrl) - 2px);
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      color: var(--sidebar-fg);
      border-radius: 8px;
      padding: 5px 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background 0.22s var(--ease), border-color 0.22s var(--ease);
      font-family: var(--font-ui);
      content-visibility: auto;
      contain-intrinsic-size: auto 32px;
    }

    .file-item:hover {
      background: var(--sidebar-fill);
      border-color: var(--sidebar-line);
    }

    .file-item.active {
      background: var(--sidebar-active-bg);
      border-color: var(--sidebar-active-border);
    }

    .file-item.active .file-icon {
      color: var(--on-accent);
      background: color-mix(in srgb, var(--accent) 78%, var(--sidebar-fill-strong));
    }

    .file-icon {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
      border-radius: 5px;
      display: grid;
      place-items: center;
      background: var(--sidebar-fill-strong);
      color: var(--accent-soft);
      transition: background 0.22s var(--ease), color 0.22s var(--ease);
    }

    .file-icon svg {
      width: 12px;
      height: 12px;
      display: block;
    }

    .file-icon-folder {
      background: color-mix(in srgb, var(--accent) 16%, var(--sidebar-fill-strong));
    }

    .file-icon-doc {
      color: var(--sidebar-fg-mute);
    }

    .file-name {
      min-width: 0;
      flex: 1;
      font-size: 0.78rem;
      font-weight: 500;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .file-item .file-name {
      font-weight: 500;
    }

    .empty-side {
      padding: 18px 12px;
      text-align: center;
      color: var(--sidebar-fg-dim);
    }

    .empty-side p { font-size: 0.88rem; line-height: 1.55; }

    .main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      height: 100%;
      background: var(--paper-lift);
      border-radius: var(--radius-shell);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }

    .main.is-idle .reader-header {
      display: none;
    }

    .reader-header {
      position: relative;
      z-index: 2;
      min-width: 0;
      padding: 12px 28px;
      border-bottom: 1px solid var(--hairline);
      background: var(--header-bg);
      backdrop-filter: blur(8px);
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      min-height: 64px;
    }

    .reader-title {
      min-width: 0;
      flex: 1 1 auto;
      overflow: hidden;
    }

    .reader-title .eyebrow {
      font-size: 0.72rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: var(--ink-muted);
      font-weight: 600;
      margin-bottom: 6px;
    }

    .reader-title .eyebrow.dirty { color: var(--accent); }

    .reader-title h2 {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 2.4vw, 2.1rem);
      font-weight: 400;
      color: var(--ink);
      line-height: 1.15;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .reader-actions {
      display: flex;
      gap: 4px;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      justify-content: flex-end;
      align-items: center;
      margin-inline-start: auto;
    }

    .reader-actions .type-prefs {
      margin-inline-start: 8px;
      position: relative;
    }

    .reader-actions .type-prefs::before {
      content: "";
      position: absolute;
      inset-inline-start: -6px;
      top: 8px;
      bottom: 8px;
      width: 1px;
      background: var(--hairline);
      pointer-events: none;
    }

    .reader-actions .icon-btn {
      width: 40px;
      height: 40px;
      position: relative;
    }

    .reader-actions .icon-btn svg {
      width: 20px;
      height: 20px;
    }

    .reader-actions .icon-btn svg.icon-edit,
    .reader-actions .icon-btn svg.icon-preview,
    .reader-actions .icon-btn svg.icon-save,
    .reader-actions .icon-btn svg.icon-download {
      position: absolute;
      inset: 0;
      margin: auto;
      transition: opacity 0.22s var(--ease), transform 0.28s var(--ease);
    }

    .reader-actions .icon-download,
    .reader-actions .icon-preview {
      opacity: 0;
      transform: scale(0.72) rotate(10deg);
    }

    #saveBtn[data-kind="download"] .icon-save {
      opacity: 0;
      transform: scale(0.72) rotate(-10deg);
    }
    #saveBtn[data-kind="download"] .icon-download {
      opacity: 1;
      transform: none;
    }

    #modeBtn:not(.is-preview) .icon-edit {
      opacity: 0;
      transform: scale(0.72) rotate(-12deg);
    }
    #modeBtn:not(.is-preview) .icon-preview {
      opacity: 1;
      transform: none;
    }

    .reader-actions .icon-btn[hidden]:not(#saveBtn) { display: none; }

    .reader-actions .molan-chrome-prefs {
      position: relative;
      display: flex;
      flex: 0 0 auto;
    }
    .reader-actions .molan-chrome-prefs[hidden] {
      display: none;
    }

    .molan-outline-prefs {
      position: relative;
      display: flex;
      flex: 0 0 auto;
      align-items: center;
    }
    .molan-outline-prefs[hidden] {
      display: none;
    }
    .reader-header > .molan-outline-prefs .icon-btn {
      width: 40px;
      height: 40px;
      position: relative;
    }
    .reader-header > .molan-outline-prefs .icon-btn svg {
      width: 20px;
      height: 20px;
      position: absolute;
      inset: 0;
      margin: auto;
      transition: opacity 0.28s var(--ease), transform 0.36s var(--ease);
    }
    .reader-header > .molan-outline-prefs .icon-outline circle {
      fill: currentColor;
    }
    .reader-header > .molan-outline-prefs .icon-outline-close {
      opacity: 0;
      transform: rotate(-90deg) scale(0.72);
    }
    #outlineBtn.is-on .icon-outline {
      opacity: 0;
      transform: rotate(90deg) scale(0.72);
    }
    #outlineBtn.is-on .icon-outline-close {
      opacity: 1;
      transform: none;
    }
    .editor-wrap > .vditor-outline {
      flex: 0 0 var(--molan-outline-w);
      width: var(--molan-outline-w) !important;
      height: 100%;
      align-self: stretch;
      border: 0 !important;
      border-right: 1px solid var(--hairline) !important;
      border-radius: 0;
      background: color-mix(in srgb, var(--paper-deep) 55%, var(--paper-lift)) !important;
      box-shadow: none;
      overflow: auto;
      color: var(--ink);
      font-size: calc(var(--reader-size, 0.98rem) * 0.82);
      line-height: 1.6;
    }
    html[dir="rtl"] .editor-wrap > .vditor-outline {
      border-right: 0 !important;
      border-left: 1px solid var(--hairline) !important;
    }
    .editor-wrap > .vditor-outline.is-in {
      animation: molan-outline-in 0.24s var(--ease) both;
    }
    .editor-wrap > .vditor-outline.is-out {
      animation: molan-outline-out 0.18s ease both;
    }
    .editor-wrap > .vditor-outline .vditor-outline__title {
      padding: 10px 12px 8px 54px;
      border-bottom: 1px dashed var(--hairline);
      color: var(--ink-muted);
      font-family: var(--font-ui);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
    }
    html[dir="rtl"] .editor-wrap > .vditor-outline .vditor-outline__title {
      padding: 10px 54px 8px 12px;
    }
    .editor-wrap > .vditor-outline li > span {
      color: var(--ink);
      font-size: inherit;
      line-height: inherit;
    }
    .editor-wrap > .vditor-outline li > span:hover {
      color: var(--accent-deep);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .editor-wrap > .vditor-outline li.is-pick > span {
      color: var(--accent-deep);
      background: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .reader-actions #saveBtn {
      overflow: hidden;
      transition:
        width 0.28s var(--ease),
        opacity 0.22s var(--ease),
        transform 0.22s var(--ease),
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        box-shadow 0.2s var(--ease);
    }

    .reader-actions #saveBtn[hidden] {
      display: inline-flex !important;
      width: 0;
      min-width: 0;
      opacity: 0;
      pointer-events: none;
      transform: scale(0.72);
      margin: 0;
      border-color: transparent;
    }

    .reader-actions .icon-btn.is-pulse {
      animation: molan-btn-pulse 0.42s var(--ease);
    }

    .reader-actions .icon-btn.is-dirty:not(:disabled) {
      color: var(--on-accent);
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
      border-color: transparent;
    }

    .reader-actions .icon-btn.is-dirty:not(:disabled):hover {
      color: var(--on-accent);
      box-shadow: 0 6px 16px var(--accent-glow);
    }

    .icon-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .icon-btn:disabled:hover {
      border-color: transparent;
      color: var(--ink-soft);
      background: transparent;
    }

    .chip {
      border: 1px solid var(--hairline-strong);
      background: var(--surface);
      color: var(--ink-soft);
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      font-family: var(--font-ui);
      transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    }

    .chip:hover {
      background: var(--surface-solid);
      border-color: var(--accent);
      color: var(--accent);
    }

    .chip:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .chip-primary {
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
      border-color: transparent;
      color: var(--on-accent);
    }

    .chip-primary:hover:not(:disabled) {
      color: var(--on-accent);
      border-color: transparent;
      box-shadow: 0 6px 16px var(--accent-glow);
    }

    .chip-primary:disabled {
      background: var(--hairline-strong);
      color: var(--ink-muted);
    }

    .reader-header.is-finding .reader-actions {
      visibility: hidden;
      pointer-events: none;
    }

    .main.is-finding .reader-title {
      padding-right: 21rem;
    }

    html[dir="rtl"] .main.is-finding .reader-title {
      padding-right: 0;
      padding-left: 21rem;
    }

    .molan-find-bar {
      display: none;
      position: absolute;
      top: 14px;
      right: 18px;
      z-index: 12;
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding: 6px 8px;
      border-radius: 18px;
      background: var(--paper-lift);
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      color: var(--ink-soft);
      max-width: calc(100% - 28px);
      transform-origin: 88% 0%;
    }

    .molan-find-bar.is-open,
    .molan-find-bar.is-out {
      display: flex;
    }

    .molan-find-bar.is-open {
      animation: molan-prefs-in 0.42s var(--ease) both;
    }

    .molan-find-bar.is-out {
      animation: molan-prefs-out 0.22s ease both;
    }

    html[dir="rtl"] .molan-find-bar {
      right: auto;
      left: 18px;
      transform-origin: 12% 0%;
    }

    .molan-find-row {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
    }

    .molan-find-input {
      width: 11.5rem;
      min-width: 0;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--ink);
      font-family: var(--font-ui);
      font-size: 0.82rem;
      padding: 6px 4px;
      appearance: none;
      -webkit-appearance: none;
    }

    .molan-find-input::placeholder { color: var(--ink-muted); }

    .molan-find-input.is-empty {
      color: var(--danger);
    }

    .molan-find-count {
      min-width: 3.6rem;
      text-align: center;
      font-size: 0.68rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      color: var(--ink-muted);
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      padding: 0 2px;
    }

    .molan-find-case {
      appearance: none;
      width: 28px;
      height: 28px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      color: var(--ink-muted);
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      cursor: pointer;
      flex: 0 0 auto;
    }

    .molan-find-case:hover,
    .molan-find-case.is-on {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--surface);
    }

    .molan-find-bar .icon-btn {
      width: 26px;
      height: 26px;
    }

    .molan-find-action {
      appearance: none;
      flex: 0 0 auto;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font-family: var(--font-ui);
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 5px 8px;
      border-radius: 999px;
      cursor: pointer;
      white-space: nowrap;
    }

    .molan-find-action:hover:not(:disabled) {
      color: var(--accent);
      background: var(--surface);
    }

    .molan-find-action:disabled {
      opacity: 0.38;
      cursor: default;
    }

    ::highlight(molan-find) {
      background-color: rgba(212, 119, 59, 0.38);
      color: inherit;
    }

    ::highlight(molan-find-current) {
      background-color: #d4773b;
      color: #fff8f1;
    }

    html[data-theme="night"] ::highlight(molan-find) {
      background-color: rgba(224, 160, 84, 0.42);
    }

    html[data-theme="night"] ::highlight(molan-find-current) {
      background-color: #e0a054;
      color: #1a140c;
    }

    html[data-theme="hack"] ::highlight(molan-find) {
      background-color: rgba(61, 214, 140, 0.38);
    }

    html[data-theme="hack"] ::highlight(molan-find-current) {
      background-color: #3dd68c;
      color: #04140c;
    }

    html[data-theme="rose"] ::highlight(molan-find) {
      background-color: rgba(196, 91, 106, 0.36);
    }

    html[data-theme="rose"] ::highlight(molan-find-current) {
      background-color: #c45b6a;
      color: #fff8f6;
    }

    body.molan-host-vscode .molan-find-bar {
      top: 8px;
      right: 14px;
    }

    .type-prefs,
    .header-prefs {
      position: relative;
      display: flex;
      flex: 0 0 auto;
    }

    .reader-actions .type-prefs:has(#typeBtn[hidden]) {
      display: none;
    }

    .reader-actions .export-prefs {
      position: relative;
    }

    .reader-actions .export-prefs:has(#pdfBtn[hidden]) {
      display: none;
    }

    .export-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      inset-inline-end: 0;
      z-index: 14;
      min-width: 188px;
      padding: 6px;
      border-radius: 12px;
      background: var(--paper-lift);
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--shadow);
      color: var(--ink);
    }

    .export-menu:not([hidden]) {
      display: block;
    }

    .export-menu button {
      display: block;
      width: 100%;
      text-align: start;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 8px 10px;
      border-radius: 8px;
      font: 0.88rem/1.3 var(--font-ui);
      cursor: pointer;
    }

    .export-menu button:hover,
    .export-menu button:focus-visible {
      background: var(--surface-hover);
    }

    .export-menu .export-paper {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 6px;
      margin-top: 4px;
      padding: 8px 10px 6px;
      border-top: 1px solid var(--hairline);
      color: inherit;
      font: 0.88rem/1.3 var(--font-ui);
    }

    .export-menu .export-paper__label {
      color: var(--ink-muted);
      font-size: 0.75rem;
      letter-spacing: 0.04em;
    }

    .export-menu .export-paper__choices {
      display: flex;
      gap: 4px;
    }

    .export-menu .export-paper__choices button {
      flex: 1;
      width: auto;
      text-align: center;
      padding: 4px 6px;
      border-radius: 7px;
      border: 1px solid transparent;
      font-size: 0.8rem;
    }

    .export-menu .export-paper__choices button[aria-checked="true"] {
      background: var(--surface-hover);
      border-color: var(--hairline-strong);
      color: var(--ink);
    }

    .type-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 14;
      width: 248px;
      padding: 14px 14px 12px;
      border-radius: 14px;
      background: var(--paper-lift);
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      color: var(--ink-soft);
      transform-origin: 88% 0%;
    }

    .type-menu.is-open,
    .type-menu.is-out {
      display: block;
    }

    .type-menu.is-open {
      animation: molan-prefs-in 0.42s var(--ease) both;
    }

    .type-menu.is-out {
      animation: molan-prefs-out 0.22s ease both;
    }

    html[dir="rtl"] .type-menu,
    html[dir="rtl"] .theme-menu {
      right: auto;
      left: 0;
      transform-origin: 12% 0%;
    }

    .theme-menu {
      display: none;
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 14;
      width: max-content;
      padding: 12px 12px 10px;
      border-radius: 14px;
      background: var(--paper-lift);
      border: 1px solid var(--hairline-strong);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      color: var(--ink-soft);
      transform-origin: 88% 0%;
    }

    .theme-menu.is-open,
    .theme-menu.is-out {
      display: block;
    }

    .theme-menu.is-open {
      animation: molan-prefs-in 0.42s var(--ease) both;
    }

    .theme-menu.is-out {
      animation: molan-prefs-out 0.22s ease both;
    }

    .theme-menu .type-head {
      margin-bottom: 8px;
    }

    .theme-menu .theme-switch button {
      width: 32px;
      height: 32px;
    }

    .theme-menu .theme-switch button svg {
      width: 32px;
      height: 32px;
    }

    #headerPrefsBtn.is-on,
    #typeBtn.is-on,
    #sourceViewBtn.is-on,
    #outlineBtn.is-on {
      color: var(--accent);
      background: var(--surface);
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    }

    .type-head {
      margin: 0 0 12px;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--ink-muted);
      font-weight: 600;
    }

    .type-row {
      display: block;
      margin: 0 0 12px;
    }

    .type-row-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink-soft);
    }

    .type-val {
      font-variant-numeric: tabular-nums;
      font-size: 0.72rem;
      font-weight: 650;
      letter-spacing: 0.02em;
      color: var(--accent);
    }

    .type-fonts {
      display: flex;
      flex-direction: column;
      gap: 4px;
      max-height: 12.4rem;
      overflow-y: auto;
      padding: 2px;
      margin: 0 -2px;
    }

    .type-fonts[hidden] {
      display: none;
    }

    .type-row-fonts {
      margin-top: 2px;
      padding-top: 10px;
      border-top: 1px solid var(--hairline);
    }

    .type-font-toggle {
      appearance: none;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      width: 100%;
      margin: 0;
      padding: 2px 0;
      border: 0;
      background: transparent;
      color: var(--ink-soft);
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: inherit;
      cursor: pointer;
      text-align: left;
    }

    .type-row-fonts.is-open .type-font-toggle {
      margin-bottom: 7px;
    }

    .type-font-toggle:hover {
      color: var(--ink);
    }

    .type-font-toggle:focus-visible {
      outline: 2px solid var(--accent-glow);
      outline-offset: 2px;
      border-radius: 6px;
    }

    .type-font-toggle .type-val {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-width: 0;
    }

    .type-font-toggle .type-val::after {
      content: "";
      width: 0.38em;
      height: 0.38em;
      margin-top: -0.12em;
      border-right: 1.5px solid currentColor;
      border-bottom: 1.5px solid currentColor;
      transform: rotate(-45deg);
      opacity: 0.6;
      flex: 0 0 auto;
    }

    .type-font-toggle[aria-expanded="true"] .type-val::after {
      transform: rotate(45deg);
      margin-top: -0.22em;
    }

    .type-fonts button {
      appearance: none;
      margin: 0;
      padding: 7px 10px;
      border: 1px solid var(--hairline);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink-soft);
      font-size: 0.82rem;
      font-weight: 500;
      letter-spacing: 0.01em;
      text-align: left;
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .type-fonts button:hover {
      color: var(--ink);
      border-color: var(--hairline-strong);
      background: var(--surface-hover);
    }

    .type-fonts button[aria-checked="true"] {
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
      background: var(--surface-solid);
    }

    .type-fonts button:focus-visible {
      outline: 2px solid var(--accent-glow);
      outline-offset: 1px;
    }

    .type-menu input[type="range"] {
      -webkit-appearance: none;
      appearance: none;
      display: block;
      width: 100%;
      height: 4px;
      margin: 0;
      border-radius: 999px;
      background: linear-gradient(
        to right,
        var(--accent) var(--pct, 0%),
        var(--hairline-strong) var(--pct, 0%)
      );
      outline: none;
      cursor: pointer;
      accent-color: var(--accent);
    }

    html[dir="rtl"] .type-menu input[type="range"] {
      background: linear-gradient(
        to left,
        var(--accent) var(--pct, 0%),
        var(--hairline-strong) var(--pct, 0%)
      );
    }

    .type-menu input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--paper-lift);
      box-shadow: 0 0 0 1px var(--accent);
      cursor: pointer;
      transition: transform 0.16s var(--ease);
    }

    .type-menu input[type="range"]::-moz-range-thumb {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--paper-lift);
      box-shadow: 0 0 0 1px var(--accent);
      cursor: pointer;
    }

    .type-menu input[type="range"]::-moz-range-track {
      background: transparent;
      border: none;
    }

    .type-menu input[type="range"]:hover::-webkit-slider-thumb,
    .type-menu input[type="range"]:focus-visible::-webkit-slider-thumb {
      transform: scale(1.12);
    }

    .type-menu input[type="range"]:focus-visible {
      box-shadow: 0 0 0 3px var(--accent-glow);
      border-radius: 999px;
    }

    .type-reset {
      appearance: none;
      width: 100%;
      margin-top: 2px;
      padding: 7px 8px;
      border: 1px solid var(--hairline);
      border-radius: 8px;
      background: var(--surface);
      color: var(--ink-muted);
      font-family: var(--font-ui);
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      cursor: pointer;
      transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
    }

    .type-reset:hover {
      color: var(--accent);
      border-color: var(--accent);
      background: var(--surface-solid);
    }

    .type-reset:focus-visible {
      outline: 2px solid var(--accent-glow);
      outline-offset: 1px;
    }

    .reader-body {
      position: relative;
      z-index: 1;
      flex: 1;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    .welcome {
      flex: 1;
      min-height: 0;
      overflow: auto;
      display: grid;
      place-items: stretch;
      padding: 22px 24px 20px;
      position: relative;
      container-type: inline-size;
      container-name: folio-stage;
    }

    .welcome::before {
      content: "";
      position: absolute;
      inset: 8% auto auto 8%;
      width: min(68cqi, 640px);
      height: min(68cqi, 640px);
      border-radius: 50%;
      background: radial-gradient(circle, var(--page-glow-1) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    .welcome::after {
      content: "";
      position: absolute;
      inset: auto 6% 12% auto;
      width: min(42cqi, 380px);
      height: min(42cqi, 380px);
      border-radius: 50%;
      background: radial-gradient(circle, var(--page-glow-2) 0%, transparent 72%);
      pointer-events: none;
      z-index: 0;
    }

    .welcome[hidden] {
      display: none !important;
    }

    .reader-body.is-editing .welcome {
      display: none !important;
    }

    .welcome-folio {
      --folio-rule: color-mix(in srgb, var(--accent) 34%, transparent);
      --mark-opacity: 0.09;
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: none;
      min-height: 0;
      height: 100%;
      justify-self: center;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
      background:
        radial-gradient(ellipse 80% 55% at 8% 100%, color-mix(in srgb, var(--ink) 7%, transparent), transparent 58%),
        radial-gradient(ellipse 50% 40% at 96% 6%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%),
        linear-gradient(168deg, color-mix(in srgb, var(--paper-lift) 92%, var(--surface-solid)) 0%, var(--paper) 58%, var(--paper-deep) 100%);
      border: 1px solid var(--hairline-strong);
      border-radius: 3px 26px 14px 8px;
      padding: 44px 36px 22px;
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--surface-solid) 72%, transparent),
        inset 0 0 0 9px color-mix(in srgb, var(--paper-lift) 55%, transparent),
        inset 0 0 0 10px var(--folio-rule),
        0 1px 0 color-mix(in srgb, var(--surface-solid) 80%, transparent),
        0 32px 72px rgba(28, 25, 20, 0.14),
        18px 28px 48px rgba(28, 25, 20, 0.07);
      transform: rotate(-0.18deg);
      animation: molan-sheet-in 0.85s var(--ease) both;
      isolation: isolate;
    }

    .welcome-folio::before {
      content: "";
      position: absolute;
      inset: 22px 24px;
      pointer-events: none;
      z-index: 0;
      background:
        repeating-linear-gradient(
          90deg,
          transparent 0,
          transparent calc(2.35rem - 1px),
          var(--folio-rule) calc(2.35rem - 1px),
          var(--folio-rule) 2.35rem
        );
      opacity: 0.55;
      mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    }

    .welcome-folio::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      z-index: 0;
      opacity: 0.22;
      mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 128 128' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
    }

    .folio-watermark {
      display: grid;
      place-items: center;
      position: absolute;
      inset: 6% 4% 16% 2%;
      font-family: var(--font-display);
      font-size: clamp(8rem, 36cqi, 16rem);
      font-weight: 600;
      line-height: 0.82;
      color: var(--ink);
      opacity: var(--mark-opacity);
      pointer-events: none;
      user-select: none;
      z-index: 0;
      animation: molan-mark-in 1.1s 0.12s var(--ease) both;
    }

    .folio-verse {
      position: relative;
      z-index: 1;
      grid-column: 1;
      grid-row: 1;
      display: grid;
      place-items: center;
      align-self: stretch;
      justify-self: stretch;
      width: 100%;
      height: 100%;
      max-width: none;
      padding: 8px 3.4em 12px 8px;
    }

    .aphorism {
      position: relative;
      z-index: 1;
      display: block;
      margin: 0;
      max-width: min(22em, 100%);
      width: auto;
      height: auto;
      border: 0;
      padding: 8px 2px 4px 8px;
      font-family: var(--font-display);
      font-size: clamp(1.7rem, 2.4cqi + 0.85rem, 3.05rem);
      font-weight: 400;
      font-style: normal;
      line-height: 1.52;
      letter-spacing: 0.018em;
      color: var(--ink);
      text-align: start;
      text-wrap: pretty;
      cursor: pointer;
      user-select: none;
    }

    .aphorism:focus-visible {
      outline: none;
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
      border-radius: 6px;
    }

    .aphorism.is-in {
      animation: none;
    }

    .aphorism.is-out {
      animation: none;
    }

    .aphorism .ink-ch {
      display: inline-block;
      transform-origin: 50% 80%;
    }

    .aphorism.is-in .ink-ch {
      animation: molan-ink-ch 2.7s calc(var(--i) * 96ms) var(--ease) both;
    }

    .aphorism.is-out .ink-ch {
      animation: molan-ink-ch-out 1.7s calc(var(--i) * 56ms) ease both;
    }

    .aphorism.is-lined {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: min(28em, 90%);
      max-width: 34rem;
      letter-spacing: 0.012em;
      line-height: 1.38;
      text-align: start;
    }

    .ink-line {
      display: block;
      white-space: nowrap;
      padding-inline-start: var(--indent, 0);
    }

    .aphorism.is-lined .ink-ch {
      display: inline-block;
    }

    .aphorism.is-lined .ink-sp {
      width: 0.32em;
    }

    .aphorism.is-vertical {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: flex-start;
      justify-content: center;
      gap: clamp(1.1em, 3.12cqi, 2.02em);
      max-width: none;
      letter-spacing: 0;
      line-height: 1;
      text-align: start;
    }

    .ink-col {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-top: var(--stagger, 0);
      transform: translateX(var(--nudge, 0));
      gap: 0.22em;
    }

    .aphorism.is-vertical .ink-ch {
      display: block;
      line-height: 1.32;
    }

    html[lang="zh-CN"] .aphorism,
    html[lang="zh-TW"] .aphorism {
      text-align: center;
      max-width: 16.5em;
      line-height: 1.72;
      letter-spacing: 0.1em;
    }

    html[lang="zh-CN"] .aphorism.is-vertical,
    html[lang="zh-TW"] .aphorism.is-vertical,
    html[lang="ja"] .aphorism.is-vertical {
      text-align: start;
      max-width: none;
      letter-spacing: 0;
      line-height: 1;
      font-size: clamp(1.61rem, 2.27cqi + 0.8rem, 2.88rem);
    }

    .welcome-cta {
      --seal: #b23a32;
      --seal-ink: #f6e4d6;
      appearance: none;
      position: absolute;
      z-index: 2;
      right: 18px;
      bottom: 22px;
      writing-mode: vertical-rl;
      text-orientation: mixed;
      white-space: nowrap;
      font-family: var(--font-display);
      font-weight: 600;
      font-size: clamp(0.78rem, 1.35cqi, 0.98rem);
      letter-spacing: 0.22em;
      line-height: 1.15;
      padding: 0.72em 0.4em;
      color: var(--seal-ink);
      background: var(--seal);
      border: 1.5px solid color-mix(in srgb, var(--seal-ink) 78%, var(--seal));
      border-radius: 2px;
      box-shadow:
        inset 0 0 0 3px var(--seal),
        inset 0 0 0 4.5px color-mix(in srgb, var(--seal-ink) 62%, transparent),
        0 10px 22px color-mix(in srgb, var(--seal) 36%, transparent);
      transform: rotate(-7deg);
      cursor: pointer;
      transition: transform 0.2s var(--ease), box-shadow 0.2s ease;
    }

    .welcome-cta:hover {
      transform: rotate(-9deg) translateY(-2px);
      box-shadow:
        inset 0 0 0 3px var(--seal),
        inset 0 0 0 4.5px color-mix(in srgb, var(--seal-ink) 62%, transparent),
        0 14px 26px color-mix(in srgb, var(--seal) 42%, transparent);
    }

    .welcome-cta:active { transform: rotate(-6deg) translateY(0); }

    .welcome-cta:focus-visible {
      outline: none;
      box-shadow:
        inset 0 0 0 3px var(--seal),
        inset 0 0 0 4.5px color-mix(in srgb, var(--seal-ink) 62%, transparent),
        0 0 0 3px var(--paper-lift),
        0 0 0 5px var(--accent-soft);
    }

    html[dir="rtl"] .aphorism { text-align: right; }

    html[data-theme="night"] .welcome-cta,
    html[data-theme="night"] .toolbar-pick {
      --seal: #c48438;
      --seal-ink: #1a140c;
    }

    html[data-theme="night"] .welcome-folio::after {
      mix-blend-mode: overlay;
      opacity: 0.3;
    }

    html[data-theme="hack"] .aphorism {
      letter-spacing: -0.03em;
      line-height: 1.45;
    }

    html[data-theme="hack"] .aphorism.is-in .ink-ch {
      animation-name: molan-hack-ch;
      animation-duration: 1.44s;
      animation-delay: calc(var(--i) * 60ms);
    }

    html[data-theme="hack"] .aphorism.is-out .ink-ch {
      animation-name: molan-hack-ch-out;
      animation-duration: 0.96s;
      animation-delay: calc(var(--i) * 36ms);
    }

    html[data-theme="hack"] .welcome-cta,
    html[data-theme="hack"] .toolbar-pick {
      --seal: #3dd68c;
      --seal-ink: #04140c;
    }

    html[data-theme="hack"] .welcome-cta {
      transform: none;
      border-radius: 2px;
      box-shadow: 0 0 16px rgba(61, 214, 140, 0.35);
    }

    html[data-theme="hack"] .welcome-cta:hover,
    html[data-theme="hack"] .toolbar-pick:hover {
      transform: translateY(-1px);
    }

    html[data-theme="hack"] .welcome-folio {
      transform: none;
      border-radius: 6px;
      animation-name: molan-welcome-in;
    }

    html[data-theme="hack"] .welcome-folio::before {
      opacity: 0.2;
      background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 23px,
        rgba(61, 214, 140, 0.28) 23px,
        rgba(61, 214, 140, 0.28) 24px
      );
    }

    html[data-theme="hack"] .welcome-folio::after {
      mix-blend-mode: overlay;
      opacity: 0.14;
    }

    html[data-theme="hack"] .folio-watermark {
      font-family: var(--font-mono);
      font-weight: 500;
      --mark-opacity: 0.1;
    }

    html[data-theme="hack"] .toolbar-pick-label {
      font-family: var(--font-mono);
      font-weight: 500;
      letter-spacing: 0.08em;
      font-size: 0.78rem;
    }

    html[data-theme="rose"] .aphorism {
      font-weight: 600;
    }

    html[data-theme="rose"] .welcome-cta,
    html[data-theme="rose"] .toolbar-pick {
      --seal: #c45b6a;
      --seal-ink: #fff6f4;
    }

    @container folio-stage (min-width: 500px) {
      .welcome-folio {
        grid-template-columns: minmax(7.5rem, 0.3fr) minmax(0, 1fr);
        padding: 36px 40px 22px 24px;
      }

      .folio-watermark {
        position: static;
        inset: auto;
        grid-column: 1;
        grid-row: 1;
        font-size: clamp(7rem, 24cqi, 15rem);
        --mark-opacity: 0.08;
      }

      .folio-verse {
        grid-column: 2;
        grid-row: 1;
      }

      .aphorism {
        max-width: min(24em, 100%);
      }

      html[lang="zh-CN"] .aphorism:not(.is-vertical),
      html[lang="zh-TW"] .aphorism:not(.is-vertical) {
        max-width: min(18em, 100%);
      }

      .aphorism.is-lined {
        width: min(32em, 92%);
        max-width: 38rem;
      }

      .aphorism.is-vertical {
        max-width: none;
        padding-inline-start: 0;
      }
    }

    @container folio-stage (min-width: 860px) {
      .welcome-folio {
        padding: 48px 56px 26px 32px;
      }

      .aphorism {
        font-size: clamp(1.9rem, 2.1cqi + 1rem, 3.25rem);
      }

      html[lang="zh-CN"] .aphorism.is-vertical,
      html[lang="zh-TW"] .aphorism.is-vertical,
      html[lang="ja"] .aphorism.is-vertical {
        font-size: clamp(1.8rem, 1.98cqi + 0.95rem, 3.07rem);
      }
    }

    @keyframes molan-welcome-in {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes molan-mark-in {
      from { opacity: 0; filter: blur(10px); transform: translateY(12px); }
      to { opacity: var(--mark-opacity); filter: blur(0); transform: none; }
    }

    @keyframes molan-sheet-in {
      from { opacity: 0; transform: translateY(18px) rotate(-0.18deg); }
      to { opacity: 1; transform: translateY(0) rotate(-0.18deg); }
    }

    @keyframes molan-ink-ch {
      0% {
        opacity: 0;
        filter: blur(12px);
        transform: translateY(0.62em) rotate(-6deg) scale(0.72);
        color: color-mix(in srgb, var(--accent) 62%, var(--ink));
      }
      58% {
        opacity: 1;
        filter: blur(0);
        transform: translateY(-0.06em) rotate(1.2deg) scale(1.06);
      }
      100% {
        opacity: 1;
        filter: blur(0);
        transform: none;
        color: var(--ink);
      }
    }

    @keyframes molan-ink-ch-out {
      0% {
        opacity: 1;
        filter: blur(0);
        transform: none;
      }
      100% {
        opacity: 0;
        filter: blur(10px);
        transform: translateY(-0.55em) rotate(5deg) scale(1.12);
        color: color-mix(in srgb, var(--accent) 40%, transparent);
      }
    }

    @keyframes molan-hack-ch {
      0% { opacity: 0; transform: translateX(-0.35em); }
      100% { opacity: 1; transform: none; }
    }

    @keyframes molan-hack-ch-out {
      0% { opacity: 1; }
      100% { opacity: 0; transform: translateX(0.28em); }
    }

    @keyframes molan-mode-in {
      from { opacity: 0.42; }
      to { opacity: 1; }
    }

    @keyframes molan-btn-pulse {
      0% { transform: scale(1); }
      38% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }

    @keyframes molan-reload-spin {
      to { transform: rotate(360deg); }
    }

    .reader-actions #reloadBtn.is-busy svg {
      animation: molan-reload-spin 0.8s linear infinite;
    }

    @media (prefers-reduced-motion: reduce) {
      .welcome-folio,
      .folio-watermark,
      .aphorism.is-in,
      .aphorism.is-out,
      .aphorism.is-in .ink-ch,
      .aphorism.is-out .ink-ch,
      .editor-wrap.is-mode,
      .reader-actions .icon-btn.is-pulse,
      .reader-actions #reloadBtn.is-busy svg,
      .molan-find-bar.is-open,
      .molan-find-bar.is-out,
      .type-menu.is-open,
      .type-menu.is-out,
      .theme-menu.is-open,
      .theme-menu.is-out,
      .molan-outline-panel.is-open,
      .molan-outline-panel.is-out,
      .editor-wrap > .vditor-outline.is-in,
      .editor-wrap > .vditor-outline.is-out {
        animation: none;
      }
      #outlineBtn svg {
        transition: none;
      }
      .file-item,
      .recent-item,
      .recent-row,
      .doc-list,
      .toolbar,
      .search-wrap,
      .toolbar-pick,
      .toolbar-pick-label,
      .icon-btn,
      .reader-actions #saveBtn,
      .reader-actions .icon-btn svg.icon-edit,
      .reader-actions .icon-btn svg.icon-preview,
      .reader-actions .icon-btn svg.icon-save,
      .reader-actions .icon-btn svg.icon-download {
        transition: none;
      }
      .file-item:hover,
      .recent-item:hover,
      .icon-btn:hover,
      .icon-btn:active {
        transform: none;
      }
    }

    .editor-wrap {
      flex: 1 1 0%;
      min-width: 0;
      min-height: 0;
      display: none;
      padding: 0;
      background: var(--paper-lift);
      position: relative;
      overflow: hidden;
      --molan-outline-w: 250px;
    }

    .editor-wrap.visible {
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    .molan-preview {
      display: none;
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      flex-direction: column;
      height: auto;
      overflow: hidden;
      background: transparent !important;
    }

    .molan-preview > .vditor-reset,
    #molanPreviewBody {
      flex: 1 1 0%;
      min-height: 0;
      height: 0;
      overflow: auto !important;
      user-select: text;
    }

    .editor-wrap.is-lite-preview .molan-preview {
      display: flex;
    }

    .editor-wrap.is-source-open .molan-block-insert,
    .editor-wrap.is-source-open .molan-insert-menu {
      display: none !important;
    }

    .molan-source-view {
      position: absolute;
      inset: 0;
      z-index: 20;
      display: flex;
      flex-direction: column;
      background: var(--paper-lift);
      color: var(--ink);
    }

    .editor-wrap.is-source-open > .vditor-outline {
      position: relative;
      z-index: 21;
    }

    .editor-wrap.is-source-open.is-outline-open .molan-source-view {
      left: var(--molan-outline-w);
    }

    html[dir="rtl"] .editor-wrap.is-source-open.is-outline-open .molan-source-view {
      left: 0;
      right: var(--molan-outline-w);
    }

    .molan-source-view[hidden] {
      display: none;
    }

    .molan-source-view__bar {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 0 0 auto;
      padding: 10px 16px 8px 20px;
      border-bottom: 1px solid var(--hairline);
    }

    .molan-source-view__title {
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 600;
      color: var(--ink-muted);
    }

    .molan-source-view__hint {
      font-size: 0.72rem;
      color: var(--ink-muted);
    }

    .molan-source-view__bar .icon-btn {
      margin-inline-start: auto;
      width: 32px;
      height: 32px;
    }

    .molan-source-view textarea {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      border: 0;
      resize: none;
      outline: none;
      background: transparent;
      color: var(--ink);
      caret-color: var(--accent);
      font-family: var(--font-mono);
      font-size: 0.86rem;
      line-height: 1.65;
      letter-spacing: 0;
      padding: 22px 40px 48px;
      tab-size: 2;
    }

    .molan-source-view textarea::selection {
      background: color-mix(in srgb, var(--accent) 28%, transparent);
    }

    .editor-wrap.is-lite-preview #vditor {
      display: none !important;
    }

    .editor-wrap.is-preparing-edit .molan-preview {
      display: flex !important;
      position: absolute;
      inset: 0;
      z-index: 8;
      pointer-events: none;
    }

    .editor-wrap.is-preparing-edit #vditor {
      visibility: hidden;
    }

    .editor-wrap.is-mode {
      animation: molan-mode-in 0.96s var(--ease) both;
    }

    #vditor {
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      border: none !important;
      border-radius: 0 !important;
    }

    .vditor {
      border: none !important;
      border-radius: 0 !important;
      background: transparent !important;
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
    }

    .vditor-toolbar {
      display: none !important;
    }

    .vditor-toolbar__item,
    .vditor-toolbar__divider {
      float: none !important;
    }

    .vditor-toolbar__item .vditor-tooltipped {
      color: var(--toolbar-fg) !important;
    }

    .vditor-toolbar__item svg {
      display: block !important;
      width: 15px !important;
      height: 15px !important;
      fill: currentColor !important;
      stroke: currentColor;
      opacity: 1 !important;
      visibility: visible !important;
    }

    .vditor-content {
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }

    .vditor-ir,
    .vditor-wysiwyg,
    .vditor-sv,
    .vditor-preview:not(.molan-preview) {
      position: relative;
      min-height: 0;
      height: 100%;
      overflow: auto;
    }

    .vditor-content,
    .vditor-ir,
    .vditor-wysiwyg,
    .vditor-sv,
    .vditor-preview {
      background: transparent !important;
    }

    /* 对齐旧版 .prose：衬线标题 + 暖色正文，压过 Vditor 默认系统字体 */
    .vditor-ir pre.vditor-reset,
    .vditor-wysiwyg pre.vditor-reset,
    .vditor-wysiwyg > .vditor-reset,
    .vditor-sv .vditor-reset,
    .vditor-preview .vditor-reset {
      max-width: none !important;
      width: 100%;
      box-sizing: border-box;
      margin: 0 auto !important;
      padding: 22px 40px 56px 52px !important;
      overflow-x: auto;
      font-family: var(--reader-font) !important;
      font-size: var(--reader-size) !important;
      line-height: var(--reader-leading) !important;
      letter-spacing: var(--reader-tracking);
      color: var(--ink) !important;
      background: transparent !important;
      scroll-margin-top: 4px;
    }

    .vditor-reset h1,
    .vditor-reset h2,
    .vditor-reset h3,
    .vditor-reset h4 {
      font-family: var(--reader-heading) !important;
      font-weight: 400 !important;
      line-height: 1.22 !important;
      color: var(--ink) !important;
      margin: 1.25em 0 0.4em !important;
      border-bottom: none !important;
      padding-bottom: 0 !important;
      scroll-margin-top: 52px;
    }

    .vditor-reset h1 {
      font-size: 2.14em !important;
      padding-bottom: 0.3em !important;
      border-bottom: 1px solid var(--hairline-strong) !important;
    }

    .vditor-reset h2 { font-size: 1.58em !important; }
    .vditor-reset h3 { font-size: 1.24em !important; }
    .vditor-reset h4 {
      font-size: 1.07em !important;
      font-family: var(--reader-font) !important;
      font-weight: 650 !important;
    }

    .vditor-reset h5,
    .vditor-reset h6 {
      font-family: var(--reader-font) !important;
      font-weight: 650 !important;
      color: var(--ink-soft) !important;
      margin: 1.1em 0 0.35em !important;
    }

    .vditor-reset h1.has-ask-section,
    .vditor-reset h2.has-ask-section,
    .vditor-reset h3.has-ask-section,
    .vditor-reset h4.has-ask-section,
    .vditor-reset h5.has-ask-section,
    .vditor-reset h6.has-ask-section {
      position: relative;
    }

    .molan-ask-section {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-left: 0.55em;
      vertical-align: middle;
      width: auto;
      height: 1.35em;
      padding: 0 0.55em;
      border: 1px solid var(--hairline-strong);
      border-radius: 999px;
      background: var(--paper-lift);
      color: var(--ink-soft);
      font-family: var(--font-ui);
      font-size: 12px;
      font-weight: 550;
      letter-spacing: 0.02em;
      line-height: 1;
      opacity: 0;
      cursor: pointer;
      user-select: none;
      pointer-events: none;
    }

    .molan-ask-section::before {
      content: "问这一节";
    }

    .vditor-reset h1:hover .molan-ask-section,
    .vditor-reset h2:hover .molan-ask-section,
    .vditor-reset h3:hover .molan-ask-section,
    .vditor-reset h4:hover .molan-ask-section,
    .vditor-reset h5:hover .molan-ask-section,
    .vditor-reset h6:hover .molan-ask-section,
    .molan-ask-section:focus-visible {
      opacity: 1;
      pointer-events: auto;
    }

    #molanPreviewBody {
      position: relative;
    }

    .molan-ask-mark {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
    }

    .molan-ask-mark i {
      position: absolute;
      border-radius: 3px;
      background: color-mix(in srgb, var(--accent) 22%, transparent);
    }

    .vditor-reset p { margin: var(--reader-gap) 0 !important; }

    .vditor-reset a {
      color: var(--link) !important;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .vditor-reset a:hover { color: var(--accent) !important; }

    /* IR 模式链接是 span，不是 <a> */
    .vditor-ir__link {
      color: var(--link) !important;
      text-decoration: underline;
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }

    .vditor-reset strong,
    .vditor-ir__node[data-type="strong"] {
      font-weight: 700 !important;
      color: var(--strong) !important;
    }

    .vditor-reset em,
    .vditor-ir__node[data-type="em"] {
      font-style: italic !important;
      color: var(--ink-soft) !important;
    }

    .vditor-reset blockquote {
      margin: 1em 0 !important;
      padding: 0.15em 0 0.15em 1em !important;
      border-left: 3px solid var(--accent) !important;
      color: var(--ink-soft) !important;
      background: linear-gradient(90deg, var(--blockquote-tint), transparent 70%) !important;
      border-radius: 0 10px 10px 0;
    }

    .vditor-reset ul,
    .vditor-reset ol {
      margin: var(--reader-gap) 0 !important;
      padding-left: 1.35em !important;
    }

    .vditor-reset li { margin: 0.22em 0 !important; }
    .vditor-reset li::marker { color: var(--accent); }

    .vditor-reset hr {
      border: none !important;
      height: 1px !important;
      background: linear-gradient(90deg, transparent, var(--hairline-strong), transparent) !important;
      margin: 1.5em 0 !important;
    }

    .vditor-reset img {
      max-width: 100%;
      border-radius: var(--radius);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow);
      margin: 1em 0;
    }

    /*
     * Vditor 默认：table { display:block; width:100%; word-break:keep-all }
     *             td/th { white-space:nowrap }
     * display:block + 100% 会让窄表右边铺一块白底；nowrap 会让宽表撑破纸面。
     * 改回真正的 table，按内容收缩；超出纸面时由 JS 加上 .molan-table--wide。
     */
    .vditor-reset table {
      display: table !important;
      width: max-content !important;
      max-width: 100%;
      table-layout: auto;
      word-break: break-word !important;
      box-sizing: border-box;
      border-collapse: separate !important;
      border-spacing: 0;
      margin: 1.4em 0 !important;
      font-size: 0.94em;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid var(--hairline-strong) !important;
      background: var(--table-bg) !important;
      background-color: var(--table-bg) !important;
      color: var(--ink) !important;
    }

    .vditor-reset table.molan-table--wide {
      width: 100% !important;
      max-width: 100% !important;
      /*
       * 宽表列宽由 JS 按各列的自然内容宽度分配；不能用浏览器的等分结果，
       * 否则英文会被压得过窄、中文列却可能占去不成比例的空间。
       */
      table-layout: fixed !important;
    }

    .vditor-reset table td,
    .vditor-reset table th {
      padding: 10px 14px !important;
      text-align: left;
      border-top: none !important;
      border-left: none !important;
      border-right: 1px solid var(--table-line) !important;
      border-bottom: 1px solid var(--table-line) !important;
      background: transparent !important;
      background-color: transparent !important;
      color: var(--ink) !important;
      min-width: 0;
      white-space: normal !important;
      overflow-wrap: anywhere !important;
      word-break: break-word !important;
    }

    .vditor-reset table tr > :last-child {
      border-right: none !important;
    }

    .vditor-reset table.molan-table--wide tr > :nth-child(1) { width: var(--molan-col-1) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(2) { width: var(--molan-col-2) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(3) { width: var(--molan-col-3) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(4) { width: var(--molan-col-4) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(5) { width: var(--molan-col-5) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(6) { width: var(--molan-col-6) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(7) { width: var(--molan-col-7) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(8) { width: var(--molan-col-8) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(9) { width: var(--molan-col-9) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(10) { width: var(--molan-col-10) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(11) { width: var(--molan-col-11) !important; }
    .vditor-reset table.molan-table--wide tr > :nth-child(12) { width: var(--molan-col-12) !important; }

    .vditor-reset th {
      background: var(--paper-deep) !important;
      background-color: var(--paper-deep) !important;
      font-weight: 650 !important;
      color: var(--ink) !important;
      font-size: 0.82rem;
      letter-spacing: 0.02em;
    }

    .vditor-reset tr:last-child td { border-bottom: none !important; }
    .vditor-reset table tbody tr:nth-child(even) td,
    .vditor-reset table > tr:nth-child(even) td {
      background: var(--table-stripe) !important;
      background-color: var(--table-stripe) !important;
    }
    .vditor-reset table tbody tr:hover td,
    .vditor-reset table > tr:hover td,
    .vditor-reset tr:hover td {
      background: var(--row-hover) !important;
      background-color: var(--row-hover) !important;
    }
    .vditor-reset table thead,
    .vditor-reset table tbody,
    .vditor-reset table tr {
      background: transparent !important;
      background-color: transparent !important;
    }

    .vditor-reset :not(pre) > code {
      font-family: var(--font-mono) !important;
      font-size: 0.86em !important;
      background: var(--hairline) !important;
      padding: 0.15em 0.4em !important;
      border-radius: 6px !important;
      color: var(--inline-code) !important;
      border: none !important;
    }

    /* 普通代码块：暖色暗底（对齐旧版 atelier 气质） */
    .vditor-reset pre,
    .vditor-ir__node[data-type="code-block"] > .vditor-ir__preview {
      margin: 1.3em 0 !important;
      padding: 16px 18px !important;
      border-radius: 14px !important;
      background: var(--code-bg) !important;
      border: 1px solid var(--code-border) !important;
      overflow-x: auto;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      color: var(--code-fg) !important;
      font-size: var(--reader-size) !important;
      line-height: 1.55 !important;
      letter-spacing: 0 !important;
    }

    .vditor-reset pre code,
    .vditor-reset pre .hljs,
    .vditor-ir__node[data-type="code-block"] > .vditor-ir__preview code,
    .vditor-ir__node[data-type="code-block"] > .vditor-ir__preview .hljs {
      font-family: var(--font-mono) !important;
      background: transparent !important;
      /* 不加 !important，避免压过 kimbie-dark 的 token 色 */
      color: var(--code-fg);
      padding: 0 !important;
      font-size: 0.82em !important;
      line-height: 1.55 !important;
      letter-spacing: 0 !important;
      border-radius: 0 !important;
      display: block;
    }

    /* kimbie-dark 令牌色压到我们的暖底上，背景交给上面的 pre */
    .vditor-reset .hljs {
      background: transparent !important;
    }

    .vditor-copy {
      background: transparent !important;
    }

    .vditor-copy > span,
    .vditor-copy .vditor-tooltipped {
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.14) !important;
      border-radius: 999px !important;
      color: rgba(240, 230, 216, 0.75) !important;
    }

    /*
     * 流程图 / 公式预览：浅色卡片。
     * 编辑台 shell 是 pre.vditor-ir__preview，预览台是 div.language-mermaid（见 enhanceMermaidPreviews）。
     * 统一用 .molan-mermaid-shell，避免预览台圆角/高度与编辑台不一致。
     */
    .vditor-reset .molan-mermaid-shell,
    .vditor-reset pre.vditor-ir__preview:has(.language-mermaid),
    .vditor-reset pre.vditor-ir__preview:has(.language-math),
    .vditor-reset pre.vditor-ir__preview:has(.katex),
    .vditor-reset pre.vditor-ir__preview:has(.katex-display),
    .vditor-reset pre:has(> .language-mermaid):not(.vditor-ir__marker--pre),
    .vditor-reset pre:has(> .language-math):not(.vditor-ir__marker--pre),
    .vditor-reset pre:has(> .katex):not(.vditor-ir__marker--pre),
    .vditor-reset pre:has(> .katex-display):not(.vditor-ir__marker--pre),
    #molanPreviewBody pre:has(.language-mermaid),
    #molanPreviewBody pre:has(.language-math),
    #molanPreviewBody pre:has(.katex),
    #molanPreviewBody pre:has(.katex-display) {
      background: var(--diagram-card) !important;
      border: 1px solid var(--hairline) !important;
      border-radius: 14px !important;
      box-shadow: var(--shadow) !important;
      color: var(--ink) !important;
      text-align: center;
      padding: 18px 16px !important;
      position: relative;
      font-family: var(--reader-font) !important;
      font-size: var(--reader-size) !important;
      line-height: 1.55 !important;
      box-sizing: border-box !important;
    }

    .vditor-ir__node:has(> .molan-mermaid-shell) > .molan-mermaid-shell,
    .vditor-ir__node:has(> .vditor-ir__preview:has(.language-mermaid)) > .vditor-ir__preview {
      margin: 0 !important;
    }

    #molanPreviewBody .molan-mermaid-shell,
    .molan-preview .molan-mermaid-shell {
      margin: 1.3em 0 !important;
      margin-top: 48px !important;
    }

    .molan-mermaid-shell .language-mermaid,
    .vditor-reset pre:has(.language-mermaid) .language-mermaid,
    .vditor-reset pre:has(.language-math) .language-math,
    .vditor-reset pre:has(.katex) .katex,
    .vditor-reset pre:has(.katex-display) .katex-display {
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      display: block;
    }

    /*
     * IR 展开编辑时隐藏图表/公式预览，避免源码与渲染图叠在一起。
     */
    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview:has(.language-mermaid),
    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview:has(.language-math),
    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview:has(.katex),
    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview:has(.katex-display),
    .vditor-ir__node--expand[data-type="math-block"] > .vditor-ir__preview {
      display: none !important;
    }

    /* 折叠态：源码 marker 的 pre 不要被全局代码块 margin/padding 撑开占位 */
    .vditor-ir__node:not(.vditor-ir__node--expand) > .vditor-ir__marker--pre {
      margin: 0 !important;
      padding: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      min-height: 0 !important;
      overflow: hidden !important;
    }

    /*
     * 普通代码块折叠时只留高亮预览，和阅读态同一块；展开编辑时只留源码。
     * 节点外边距在折叠/展开时保持 1.3em，源码区与预览区同盒模型，避免切态跳动。
     */
    .vditor-ir__node[data-type="code-block"]:not(.vditor-ir__node--expand) > :not(.vditor-ir__preview),
    .vditor-ir__node[data-type="code-block"]:not(.vditor-ir__node--expand)::before,
    .vditor-ir__node[data-type="code-block"]:not(.vditor-ir__node--expand)::after {
      display: none !important;
    }

    .vditor-ir__node[data-type="code-block"] {
      margin: 1.3em 0;
      padding: 0;
      border: 0;
      background: transparent;
      line-height: 1.55;
    }

    .vditor-ir__node[data-type="code-block"] > .vditor-ir__preview {
      margin: 0 !important;
      box-sizing: border-box !important;
      white-space: pre-wrap !important;
    }

    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__preview:not(:has(.language-mermaid)):not(:has(.language-math)):not(:has(.katex)):not(:has(.katex-display)) {
      display: none !important;
    }

    /*
     * 普通代码块展开编辑：Vditor 在开启 codeBlockPreview 时给源码 pre 加上
     * .vditor-ir__marker，并设成 display:inline。再叠上全局 pre 的圆角暗底，
     * 行盒会碎成头尾「碗 / 反 D」；源码色又是深字叠深底，几乎看不清。
     * 源码改成一块完整代码区；语言标签对普通代码块隐藏，避免多出胶囊按钮。
     */
    .vditor-ir__node--expand[data-type="code-block"]::before,
    .vditor-ir__node--expand[data-type="code-block"]::after {
      content: none !important;
      display: none !important;
    }

    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__marker--pre {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      margin: 0 !important;
      padding: 16px 18px !important;
      border-radius: 14px !important;
      background: var(--code-bg) !important;
      border: 1px solid var(--code-border) !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      color: var(--code-fg) !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      white-space: pre-wrap !important;
      font-family: var(--font-mono) !important;
      font-size: var(--reader-size) !important;
      line-height: 1.55 !important;
      letter-spacing: 0 !important;
    }

    .vditor-ir__node--expand[data-type="code-block"] > .vditor-ir__marker--pre code {
      display: block !important;
      background: transparent !important;
      color: var(--code-fg) !important;
      font-family: var(--font-mono) !important;
      font-size: 0.82em !important;
      line-height: 1.55 !important;
      letter-spacing: 0 !important;
      padding: 0 !important;
      white-space: pre-wrap !important;
      text-align: left !important;
    }

    /* 普通代码块不要语言胶囊（那是 mermaid/math 展开用的）。 */
    .vditor-ir__node--expand[data-type="code-block"]:not(:has(.language-mermaid)):not(:has(.language-math)):not(:has(.katex)):not(:has(.katex-display)) > .vditor-ir__marker--info,
    .vditor-ir__node--expand[data-type="code-block"]:not(:has(.language-mermaid)):not(:has(.language-math)):not(:has(.katex)):not(:has(.katex-display)) > span.vditor-ir__marker {
      display: none !important;
    }

    /*
     * 流程图/公式折叠时同样只留渲染结果。
     * 语言标签 mermaid 是 .vditor-ir__marker--info，不一定是 code-block 的直接子节点。
     */
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid) .vditor-ir__marker,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid) .vditor-ir__marker--pre,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math) .vditor-ir__marker,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math) .vditor-ir__marker--pre,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid)::before,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid)::after,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math)::before,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math)::after {
      display: none !important;
    }

    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid),
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math) {
      margin: 1.3em 0;
      padding: 0;
    }

    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-mermaid) > .vditor-ir__preview,
    .vditor-ir__node:not(.vditor-ir__node--expand):has(.language-math) > .vditor-ir__preview {
      margin: 0 !important;
    }

    .vditor-reset .language-mermaid:not(.molan-mermaid-shell),
    .vditor-reset [data-type="mermaid"]:not(.molan-mermaid-shell) {
      background: transparent !important;
      border: none !important;
      border-radius: 0 !important;
      color: var(--ink) !important;
      overflow-x: auto;
      text-align: center;
    }

    .vditor-reset .language-mermaid svg {
      max-width: 100%;
      height: auto;
      font-family: var(--reader-font) !important;
    }

    /* 离屏可布局沙箱：给 mermaid.render 量尺寸，不要 display:none */
    #molanMermaidSandbox {
      position: fixed;
      left: -100000px;
      top: 0;
      width: 960px;
      height: auto;
      overflow: visible;
      pointer-events: none;
    }

    /* 预览态：点击图进入观看，不要出现 text caret */
    .vditor-ir__preview:has(.language-mermaid),
    .vditor-ir__preview:has(.language-mermaid) .language-mermaid {
      cursor: grab;
    }

    .vditor-ir__preview:has(.language-mermaid):active {
      cursor: grabbing;
    }

    /*
     * mermaid 块统一走弹窗编辑，不在 IR 里内联展开源码。
     * 隐藏围栏 marker 与伪元素，避免出现头尾「半圆」碎块。
     */
    .vditor-ir__node:has(.language-mermaid)::before,
    .vditor-ir__node:has(.language-mermaid)::after,
    .vditor-ir__node:has(.language-mermaid) > .vditor-ir__marker--pre,
    .vditor-ir__node:has(.language-mermaid) > .vditor-ir__marker--info,
    .vditor-ir__node:has(.language-mermaid) .vditor-ir__marker--pre,
    .vditor-ir__node:has(.language-mermaid) .vditor-ir__marker--info {
      display: none !important;
      content: none !important;
    }

    .vditor-ir__node:has(.language-mermaid).vditor-ir__node--expand > .vditor-ir__preview {
      display: block !important;
    }

    /* 任意态：mermaid 块都不要 Vditor 围栏伪元素（头尾半圆碎块） */
    .vditor-ir__node:has(.language-mermaid)::before,
    .vditor-ir__node:has(.language-mermaid)::after {
      content: none !important;
      display: none !important;
    }

    /* 展开编辑 mermaid/math：Vditor 会把 .vditor-ir__marker 设成 display:inline，
     * 若再套圆角/虚线边框会碎成头尾「怪形状」。强制 block + 实线干净代码区。
     */
    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code.language-mermaid),
    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code.language-math),
    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code[data-type="math-block"]),
    .vditor-ir__node--expand[data-type="math-block"] > .vditor-ir__marker--pre {
      display: block !important;
      width: 100% !important;
      box-sizing: border-box !important;
      background: var(--hairline) !important;
      border: 1px solid var(--hairline-strong) !important;
      box-shadow: none !important;
      color: var(--ink) !important;
      margin: 0.5em 0 0.85em !important;
      padding: 14px 16px !important;
      border-radius: 12px !important;
      text-align: left !important;
      overflow: auto !important;
      white-space: pre-wrap !important;
    }

    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code.language-mermaid) code,
    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code.language-math) code,
    .vditor-ir__node--expand > .vditor-ir__marker--pre:has(code[data-type="math-block"]) code,
    .vditor-ir__node--expand[data-type="math-block"] > .vditor-ir__marker--pre code {
      display: block !important;
      color: var(--ink) !important;
      font-size: 0.84rem !important;
      line-height: 1.55 !important;
      white-space: pre-wrap !important;
      text-align: left !important;
    }

    /* 展开时隐藏 Vditor 伪元素围栏 ```，改由代码区自身呈现，避免头尾碎块 */
    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-mermaid)::before,
    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-mermaid)::after,
    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-math)::before,
    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-math)::after,
    .vditor-ir__node--expand[data-type="math-block"]::before,
    .vditor-ir__node--expand[data-type="math-block"]::after {
      content: none !important;
      display: none !important;
    }

    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-mermaid) .vditor-ir__marker--info,
    .vditor-ir__node--expand:has(> .vditor-ir__marker--pre code.language-math) .vditor-ir__marker--info {
      display: inline-block !important;
      margin: 0 0 0.35em !important;
      padding: 2px 8px !important;
      border-radius: 999px !important;
      background: var(--hairline) !important;
      font-family: var(--font-mono) !important;
      font-size: 0.72rem !important;
      color: var(--ink-muted) !important;
      width: auto !important;
      height: auto !important;
    }

    .vditor-reset .katex-display {
      margin: 0.4em 0;
      padding: 8px 4px;
      overflow-x: auto;
      color: var(--ink) !important;
    }

    .vditor-reset pre.vditor-ir__preview .katex,
    .vditor-reset pre.vditor-ir__preview .katex-display,
    .vditor-reset .language-math {
      color: var(--ink) !important;
      background: transparent !important;
    }

    .vditor-reset .vditor-task {
      list-style: none !important;
    }

    .vditor-reset input[type="checkbox"] {
      margin-right: 0.45em;
      accent-color: var(--accent);
      width: 1em;
      height: 1em;
      vertical-align: -0.12em;
      cursor: pointer;
    }

    /* IR 语法标记淡化；不要染到 mermaid/math 预览正文 */
    .vditor-ir__marker {
      color: var(--ink-muted) !important;
    }

    .vditor-ir__preview:not(:has(.language-mermaid)):not(:has(.language-math)):not(:has(.katex)):not(:has(.katex-display)) {
      color: var(--ink-muted) !important;
    }

    .vditor-ir__node--hidden .vditor-ir__marker {
      opacity: 0.45;
    }

    /* 流程图右上角工具条：连线样式和图标一起，悬停后出现 */
    .molan-diagram-toolbar {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      opacity: 1;
      pointer-events: none;
      transform: translateY(-100%);
    }

    .molan-diagram-toolbar__icons {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border-radius: 999px;
      background: var(--toolbar-bg);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow);
      opacity: 0;
      pointer-events: none;
      backdrop-filter: blur(6px);
      transition: opacity 0.18s ease;
    }

    .vditor-ir__preview:has(.language-mermaid):hover .molan-diagram-toolbar__icons,
    .vditor-ir__preview:has(.language-mermaid):focus-within .molan-diagram-toolbar__icons,
    .language-mermaid:hover .molan-diagram-toolbar__icons,
    .molan-mermaid-shell:hover .molan-diagram-toolbar__icons,
    .molan-diagram-toolbar:hover .molan-diagram-toolbar__icons,
    .molan-diagram-toolbar:focus-within .molan-diagram-toolbar__icons {
      opacity: 1;
      pointer-events: auto;
    }

    .molan-diagram-toolbar .flow-curve {
      display: flex;
      align-items: center;
      flex: 0 0 auto;
      margin: 0 2px 0 0;
      min-width: max-content;
      padding-inline-end: 6px;
      border-inline-end: 1px solid var(--hairline);
    }

    .molan-diagram-toolbar .flow-curve__switch {
      padding: 0;
      background: transparent;
      border: 0;
      box-shadow: none;
    }

    .molan-diagram-toolbar .flow-curve__switch button {
      flex: 0 0 auto;
      height: 28px;
      padding: 0 8px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: transparent;
      white-space: nowrap;
      line-height: 1;
    }

    .molan-diagram-toolbar .flow-curve__switch button[aria-checked="true"] {
      background: var(--surface-solid);
      border: 1px solid var(--accent);
    }

    .icon-btn {
      appearance: none;
      width: 28px;
      height: 28px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid transparent;
      background: transparent;
      color: var(--ink-soft);
      border-radius: 999px;
      cursor: pointer;
      flex: 0 0 auto;
      line-height: 0;
      transition:
        color 0.2s var(--ease),
        background 0.2s var(--ease),
        border-color 0.2s var(--ease),
        transform 0.2s var(--ease),
        box-shadow 0.2s var(--ease),
        opacity 0.22s var(--ease);
    }

    .icon-btn svg {
      width: 15px;
      height: 15px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.85;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
    }

    .icon-btn:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--surface-solid);
      transform: translateY(-1px);
    }

    .icon-btn:active {
      transform: translateY(1px) scale(0.94);
    }

    .icon-btn:focus-visible {
      outline: 2px solid var(--accent-glow);
      outline-offset: 1px;
    }

    .molan-diagram-toolbar .icon-btn[data-molan-action="edit"] {
      color: var(--link);
      background: var(--paper-lift);
      border-color: var(--accent);
    }

    .molan-diagram-toolbar .icon-btn[data-molan-action="edit"]:hover {
      background: var(--surface-solid);
      color: var(--accent);
    }

    .molan-table-toolbar {
      position: fixed;
      z-index: 8;
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 3px 4px;
      border-radius: 999px;
      background: var(--toolbar-bg);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow);
      backdrop-filter: blur(6px);
      pointer-events: auto;
    }

    .molan-table-toolbar[hidden] {
      display: none !important;
    }

    .molan-table-toolbar__sep {
      width: 1px;
      height: 16px;
      margin: 0 4px;
      background: var(--hairline);
      flex: 0 0 auto;
    }

    .molan-table-toolbar .icon-btn.is-disabled,
    .molan-table-toolbar .icon-btn:disabled {
      opacity: 0.35;
      pointer-events: none;
      transform: none;
    }

    .vditor-toolbar [data-type="table"],
    .vditor-toolbar [data-type="table"].vditor-menu--disabled {
      color: var(--toolbar-fg) !important;
      cursor: pointer !important;
      pointer-events: auto !important;
      opacity: 1 !important;
    }

    .molan-table-picker {
      position: fixed;
      z-index: 90;
      padding: 10px;
      border-radius: 12px;
      border: 1px solid var(--hairline);
      background: var(--toolbar-bg);
      box-shadow: var(--shadow);
      backdrop-filter: blur(8px);
      min-width: 0;
    }

    .molan-table-picker[hidden] {
      display: none !important;
    }

    .molan-table-picker__grid {
      display: grid;
      gap: 3px;
    }

    .molan-table-picker__cell {
      appearance: none;
      width: 16px;
      height: 16px;
      padding: 0;
      border-radius: 3px;
      border: 1px solid var(--table-line);
      background: var(--table-bg);
      cursor: pointer;
    }

    .molan-table-picker__cell.is-on {
      background: color-mix(in srgb, var(--accent) 72%, var(--table-bg));
      border-color: var(--accent);
    }

    .molan-table-picker__cell:hover {
      border-color: var(--accent);
    }

    .molan-table-picker__label {
      margin-top: 8px;
      text-align: center;
      font-size: 0.75rem;
      letter-spacing: 0.02em;
      color: var(--ink-soft);
    }

    .lightbox-actions .icon-btn {
      width: 32px;
      height: 32px;
      border: 1px solid var(--hairline-strong);
      background: var(--surface-solid);
      box-shadow: var(--shadow);
    }

    .lightbox-actions .icon-btn svg {
      width: 16px;
      height: 16px;
    }

    .lightbox {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: transparent;
    }

    .lightbox::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--lightbox-dim);
      backdrop-filter: blur(6px);
      pointer-events: none;
    }

    .lightbox.open { display: flex; }

    .lightbox.is-preparing .lightbox-stage {
      visibility: hidden;
    }

    .lightbox-panel {
      position: relative;
      z-index: 1;
      width: min(96vw, 1400px);
      height: min(90vh, 900px);
      background: var(--surface-solid);
      border-radius: 16px;
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .lightbox-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-bottom: 1px solid var(--hairline);
      background: var(--paper-lift);
    }

    .lightbox-bar strong {
      font-size: 0.88rem;
      font-weight: 650;
      color: var(--ink);
    }

    .lightbox-bar .hint {
      display: block;
      margin-top: 2px;
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--ink-muted);
    }

    .lightbox-actions {
      display: flex;
      gap: 6px;
      align-items: center;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .lightbox-stage {
      flex: 1;
      overflow: hidden;
      position: relative;
      cursor: grab;
      touch-action: none;
      background:
        linear-gradient(90deg, var(--hairline) 1px, transparent 1px) 0 0 / 24px 24px,
        linear-gradient(var(--hairline) 1px, transparent 1px) 0 0 / 24px 24px,
        var(--paper-lift);
    }

    .lightbox-stage.is-dragging { cursor: grabbing; }

    .lightbox-canvas {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .lightbox-canvas svg {
      max-width: none;
      width: auto;
      height: auto;
      margin: 0;
      user-select: none;
      pointer-events: none;
      shape-rendering: geometricPrecision;
      text-rendering: geometricPrecision;
    }

    .vditor-counter {
      display: none !important;
    }

    /* Windows / 触控板：细滚动条，避免系统粗条破坏纸面感 */
    .file-list,
    .vditor-content,
    .vditor-preview,
    .vditor-ir,
    .vditor-wysiwyg,
    .vditor-sv {
      scrollbar-width: thin;
      scrollbar-color: var(--scroll-thumb) transparent;
    }

    .file-list::-webkit-scrollbar,
    .vditor-content::-webkit-scrollbar,
    .vditor-preview::-webkit-scrollbar,
    .vditor-ir::-webkit-scrollbar,
    .vditor-wysiwyg::-webkit-scrollbar,
    .vditor-sv::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    .file-list::-webkit-scrollbar-thumb,
    .vditor-content::-webkit-scrollbar-thumb,
    .vditor-preview::-webkit-scrollbar-thumb,
    .vditor-ir::-webkit-scrollbar-thumb,
    .vditor-wysiwyg::-webkit-scrollbar-thumb,
    .vditor-sv::-webkit-scrollbar-thumb {
      background: var(--scroll-thumb);
      border-radius: 999px;
    }

    .file-list::-webkit-scrollbar-track,
    .vditor-content::-webkit-scrollbar-track,
    .vditor-preview::-webkit-scrollbar-track {
      background: transparent;
    }

    .status-bar {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      border-top: 1px solid var(--hairline);
      padding: 10px 28px;
      display: flex;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.75rem;
      color: var(--ink-muted);
      background: var(--status-bg);
    }

    .main.is-idle .status-bar {
      justify-content: flex-end;
    }

    #statusLeft:empty {
      display: none;
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 28px;
      transform: translateX(-50%) translateY(20px);
      background: var(--ink);
      color: var(--paper);
      padding: 12px 18px;
      border-radius: 999px;
      font-size: 0.88rem;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s var(--ease);
      z-index: 50;
      box-shadow: 0 12px 32px rgba(0,0,0,0.25);
    }

    .toast.show {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    @keyframes fade-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 900px) {
      body { overflow: auto; }
      .app {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        height: auto;
        max-height: none;
        min-height: 100%;
        overflow: visible;
        padding: 12px;
      }
      .sidebar { min-height: 42vh; max-height: 48vh; height: auto; }
      .sidebar.is-compact {
        min-height: 0;
        max-height: none;
      }
      .main { min-height: 70vh; height: auto; }
      .welcome { padding: 12px 12px 14px; }
      .welcome-folio {
        padding: 32px 22px 18px;
        transform: none;
        animation-name: molan-welcome-in;
      }
      .aphorism { font-size: 1.45rem; }
      .reader-header {
        padding: 14px 18px 10px;
      }
      .reader-body { min-height: 52vh; }
      .editor-wrap { --molan-outline-w: 220px; }
      .vditor-ir pre.vditor-reset,
      .vditor-wysiwyg pre.vditor-reset,
      .vditor-wysiwyg > .vditor-reset,
      .vditor-sv .vditor-reset,
      .vditor-preview .vditor-reset {
        padding-left: 22px !important;
        padding-right: 22px !important;
      }
    }

    /* VSCode webview：无侧栏，铺满编辑器窗口 */
    html.molan-host-vscode,
    body.molan-host-vscode {
      background: var(--paper);
    }

    body.molan-host-vscode::before { opacity: 0.22; }

    body.molan-host-vscode .app {
      grid-template-columns: minmax(0, 1fr);
      padding: 0;
      gap: 0;
      height: 100%;
    }

    body.molan-host-vscode .main {
      border-radius: 0;
      border: none;
      box-shadow: none;
    }

    body.molan-host-vscode .reader-header {
      min-height: 48px;
      padding: 8px 16px;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
    }

    body.molan-host-vscode .reader-title .eyebrow {
      display: none;
    }

    body.molan-host-vscode .reader-title h2 {
      font-size: 1.2rem;
    }

    body.molan-host-vscode .reader-actions {
      position: relative;
      z-index: 1;
      flex-shrink: 0;
      overflow: visible;
    }

    body.molan-host-vscode .reader-header {
      overflow: visible;
    }

    body.molan-host-vscode #feedbackBtn {
      margin-left: 2px;
    }

    .molan-feedback {
      position: fixed;
      inset: 0;
      z-index: 80;
      display: grid;
      place-items: center;
      padding: 24px;
    }
    .molan-feedback[hidden] {
      display: none;
    }
    .molan-feedback__backdrop {
      position: absolute;
      inset: 0;
      background: var(--lightbox-dim, rgba(6, 5, 4, 0.72));
    }
    .molan-feedback__panel {
      position: relative;
      z-index: 1;
      width: min(420px, 100%);
      padding: 20px 20px 16px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
      background: var(--paper-lift, var(--paper));
      color: var(--ink);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    }
    .molan-feedback__panel h3 {
      margin: 0 0 6px;
      font-family: var(--font-display, inherit);
      font-size: 1.25rem;
      font-weight: 560;
    }
    .molan-feedback__hint {
      margin: 0 0 14px;
      color: var(--ink-muted);
      font-size: 0.86rem;
      line-height: 1.45;
    }
    .molan-feedback__field {
      display: grid;
      gap: 6px;
      margin: 0 0 12px;
      font-size: 0.86rem;
      color: var(--ink-soft);
    }
    .molan-feedback__field input,
    .molan-feedback__field textarea,
    .molan-feedback__field select {
      width: 100%;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
      background: var(--paper);
      color: var(--ink);
      padding: 8px 10px;
      font: inherit;
      resize: vertical;
    }
    .molan-feedback__field input:focus-visible,
    .molan-feedback__field textarea:focus-visible,
    .molan-feedback__field select:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
      outline-offset: 1px;
    }
    .molan-feedback__env {
      margin: 0 0 14px;
      color: var(--ink-muted);
      font-size: 0.78rem;
      font-family: var(--font-mono, ui-monospace, monospace);
    }
    .molan-feedback__actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .molan-feedback__btn {
      appearance: none;
      border-radius: 8px;
      border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
      background: transparent;
      color: var(--ink-soft);
      padding: 7px 14px;
      font: inherit;
      font-size: 0.88rem;
      cursor: pointer;
    }
    .molan-feedback__btn:hover {
      background: color-mix(in srgb, var(--ink) 6%, transparent);
    }
    .molan-feedback__btn.is-primary {
      border-color: color-mix(in srgb, var(--accent) 45%, transparent);
      background: color-mix(in srgb, var(--accent) 18%, transparent);
      color: var(--ink);
    }
    .molan-feedback__btn.is-primary:hover {
      background: color-mix(in srgb, var(--accent) 28%, transparent);
    }

    body.molan-host-vscode .editor-wrap {
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }

    html[data-theme="hack"] .brand h1,
    html[data-theme="hack"] .reader-title h2,
    html[data-theme="hack"] .welcome h2 {
      font-weight: 500;
      letter-spacing: -0.04em;
    }

    html[data-theme="hack"] .brand-latin {
      font-family: var(--font-display);
      font-style: normal;
      font-size: 0.48em;
      letter-spacing: 0.22em;
      opacity: 0.8;
    }

    html[data-theme="rose"] .brand-latin {
      font-family: "Cormorant Garamond", Georgia, serif;
      font-weight: 500;
    }

    html[data-theme="rose"] .brand h1,
    html[data-theme="rose"] .welcome h2,
    html[data-theme="rose"] .vditor-reset h1,
    html[data-theme="rose"] .vditor-reset h2 {
      font-weight: 600;
    }

    body.molan-host-vscode .welcome { display: none; }

    .molan-block-insert {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 20;
      pointer-events: none;
      will-change: transform;
    }
    .molan-block-insert.is-visible {
      pointer-events: auto;
    }
    .molan-block-plus {
      width: 26px;
      height: 26px;
      display: grid;
      place-items: center;
      border: 1px solid var(--hairline-strong);
      border-radius: 8px;
      background: var(--paper-lift);
      color: var(--ink-muted);
      box-shadow: 0 6px 18px rgba(28, 25, 20, 0.08);
      cursor: pointer;
    }
    .molan-block-plus svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
    }
    .molan-block-plus:hover,
    .molan-block-plus[aria-expanded="true"] {
      color: var(--accent-deep);
      border-color: var(--accent-soft);
      background: var(--surface-hover);
    }
    .molan-block-plus:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 2px;
    }
    html[dir="rtl"] .molan-block-plus {
      border-radius: 8px;
    }
    .molan-insert-menu {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 22;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      gap: 2px;
      max-width: min(360px, calc(100vw - 32px));
      padding: 4px;
      border: 1px solid var(--hairline-strong);
      border-radius: 12px;
      background: var(--paper-lift);
      box-shadow: var(--shadow);
      color: var(--ink);
    }
    .molan-insert-sep {
      width: 1px;
      align-self: stretch;
      margin: 4px 2px;
      background: var(--hairline);
    }
    .molan-insert-menu .molan-insert-item span {
      font: 700 11px/1 var(--font-ui);
      letter-spacing: -0.03em;
    }
    .molan-insert-menu[hidden] {
      display: none !important;
    }
    .molan-insert-item {
      width: 32px;
      height: 32px;
      padding: 0;
      display: grid;
      place-items: center;
      flex: 0 0 auto;
      border: 0;
      border-radius: 8px;
      background: transparent;
      color: var(--ink-soft);
      cursor: pointer;
    }
    .molan-insert-item svg {
      width: 16px;
      height: 16px;
      stroke: currentColor;
      stroke-width: 1.7;
      fill: none;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .molan-insert-item:hover,
    .molan-insert-item.is-active,
    .molan-insert-item:focus-visible {
      background: var(--row-hover);
      color: var(--ink);
      outline: none;
    }
    .molan-image-url-mask {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: color-mix(in srgb, var(--ink) 18%, transparent);
    }
    .molan-image-url-dialog {
      width: min(420px, 100%);
      padding: 18px 18px 14px;
      border: 1px solid var(--hairline-strong);
      border-radius: 14px;
      background: var(--paper-lift);
      box-shadow: var(--shadow);
      color: var(--ink);
      font-family: var(--font-ui);
    }
    .molan-image-url-title {
      font-size: 0.98rem;
      font-weight: 600;
    }
    .molan-image-url-hint {
      margin: 6px 0 12px;
      font-size: 0.82rem;
      color: var(--ink-muted);
    }
    .molan-image-url-input {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 8px 10px;
      border: 1px solid var(--hairline-strong);
      border-radius: 8px;
      background: var(--paper);
      color: inherit;
      font: inherit;
    }
    .molan-image-url-input:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }
    .molan-image-url-input.is-invalid {
      border-color: color-mix(in srgb, #c45c4a 70%, var(--hairline-strong));
    }
    .molan-image-url-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 14px;
    }
    .molan-image-url-cancel,
    .molan-image-url-ok {
      border: 0;
      border-radius: 8px;
      padding: 6px 12px;
      font: inherit;
      cursor: pointer;
    }
    .molan-image-url-cancel {
      background: transparent;
      color: var(--ink-muted);
    }
    .molan-image-url-ok {
      background: var(--accent);
      color: var(--paper);
    }

    .molan-mermaid-editor-mask {
      position: fixed;
      inset: 0;
      z-index: 90;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: transparent;
    }
    .molan-mermaid-editor-mask::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--lightbox-dim);
      backdrop-filter: blur(6px);
      pointer-events: none;
    }
    .molan-mermaid-editor {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(96vw, 1400px);
      height: min(90vh, 900px);
      border: 1px solid var(--hairline-strong);
      border-radius: 16px;
      background: var(--paper-lift);
      box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
      color: var(--ink);
      font-family: var(--font-ui);
      overflow: hidden;
      isolation: isolate;
    }
    .molan-mermaid-editor-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 16px 10px;
      border-bottom: 1px solid var(--hairline);
    }
    .molan-mermaid-editor-title {
      font-size: 0.98rem;
      font-weight: 600;
    }
    .molan-mermaid-editor-hint {
      margin: 4px 0 0;
      font-size: 0.82rem;
      color: var(--ink-muted);
    }
    .molan-mermaid-editor-close {
      flex: 0 0 auto;
    }
    .molan-mermaid-editor-body {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 12px;
      padding: 12px 16px;
      min-height: 0;
      flex: 1 1 auto;
    }
    @media (max-width: 760px) {
      .molan-mermaid-editor-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
        overflow: auto;
      }
    }
    .molan-mermaid-editor-pane {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-height: 0;
      min-width: 0;
    }
    .molan-mermaid-editor-pane-label {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink-muted);
      letter-spacing: 0.02em;
    }
    .molan-mermaid-editor-pane-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .molan-mermaid-editor-zoom {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .molan-mermaid-editor-source {
      flex: 1 1 auto;
      min-height: 0;
      resize: none;
      box-sizing: border-box;
      padding: 10px 12px;
      border: 1px solid var(--code-border, var(--hairline-strong));
      border-radius: 10px;
      background: var(--code-bg);
      color: var(--code-fg);
      caret-color: var(--code-fg);
      font: 0.84rem/1.55 var(--font-mono, ui-monospace, monospace);
      tab-size: 2;
      -webkit-text-fill-color: var(--code-fg);
    }
    .molan-mermaid-editor-source:focus {
      outline: 2px solid var(--accent);
      outline-offset: 1px;
    }
    .molan-mermaid-editor-snippets {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
    }
    .molan-mermaid-editor-snippets-label {
      font-size: 0.74rem;
      color: var(--ink-muted);
    }
    .molan-mermaid-editor-snippet-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .molan-mermaid-editor-snippet {
      border: 1px solid var(--hairline-strong);
      border-radius: 999px;
      padding: 2px 10px;
      background: var(--paper-deep);
      color: var(--ink-soft);
      font: inherit;
      font-size: 0.76rem;
      cursor: pointer;
    }
    .molan-mermaid-editor-snippet:hover {
      border-color: var(--accent);
      color: var(--ink);
    }
    .molan-mermaid-editor-preview {
      flex: 1 1 auto;
      min-height: 0;
      overflow: hidden;
      position: relative;
      border: 1px solid var(--hairline-strong);
      border-radius: 10px;
      background: var(--diagram-card, var(--paper));
      padding: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--ink);
      touch-action: none;
    }
    .molan-mermaid-editor-preview-canvas {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .molan-mermaid-editor-preview svg {
      max-width: none;
      max-height: none;
      height: auto;
      pointer-events: none;
      shape-rendering: geometricPrecision;
      text-rendering: geometricPrecision;
    }
    .molan-mermaid-editor-preview:has(svg) {
      cursor: grab;
    }
    .molan-mermaid-editor-preview.is-dragging {
      cursor: grabbing;
    }
    .molan-mermaid-editor-preview.is-error {
      align-items: stretch;
      justify-content: flex-start;
      cursor: default;
      touch-action: auto;
      overflow: auto;
    }
    .molan-mermaid-editor-error {
      margin: 0;
      white-space: pre-wrap;
      word-break: break-word;
      font: 0.8rem/1.45 var(--font-mono, ui-monospace, monospace);
      color: color-mix(in srgb, #c45c4a 88%, var(--ink));
    }
    .molan-mermaid-editor-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      padding: 10px 16px 14px;
      border-top: 1px solid var(--hairline);
    }
    .molan-mermaid-editor-cancel,
    .molan-mermaid-editor-apply {
      border: 0;
      border-radius: 8px;
      padding: 6px 14px;
      font: inherit;
      cursor: pointer;
    }
    .molan-mermaid-editor-cancel {
      background: transparent;
      color: var(--ink-muted);
    }
    .molan-mermaid-editor-apply {
      background: var(--accent);
      color: var(--paper);
    }

    .molan-format-bar {
      position: fixed;
      z-index: 36;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 2px;
      padding: 4px;
      border: 1px solid var(--hairline-strong);
      border-radius: 12px;
      background: var(--paper-lift);
      box-shadow: var(--shadow);
      color: var(--ink);
      font-family: var(--font-ui);
    }
    .molan-format-bar[hidden] {
      display: none !important;
    }
    .molan-format-bar__actions {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .molan-format-bar .molan-insert-item {
      font: 700 14px/1 Georgia, "Times New Roman", serif;
    }
    .molan-format-bar .molan-insert-item.is-on,
    .molan-format-bar .molan-insert-item[data-format]:hover {
      background: var(--row-hover);
      color: var(--ink);
    }
    .molan-format-bar [data-format="italic"] span {
      font-style: italic;
      font-weight: 500;
    }
    .molan-format-bar [data-format="strike"] span {
      text-decoration: line-through;
      font-weight: 600;
    }
    .molan-format-bar [data-format="inline-code"] span {
      font: 600 13px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    }
    .molan-format-bar [data-format="link"] svg {
      width: 16px;
      height: 16px;
    }
    .molan-format-bar__link {
      margin: 0;
    }
    .molan-format-bar__link input {
      width: min(280px, 70vw);
      border: 0;
      background: transparent;
      color: inherit;
      font: 13px/1.4 var(--font-ui);
      padding: 6px 8px;
      outline: none;
    }
    .molan-format-bar__link input.is-invalid {
      color: var(--danger, #c45b6a);
    }

    @page {
      size: A4;
      margin: 16mm 14mm 18mm;
    }

    @media print {
      html {
        color-scheme: light;
        --ink: #1c1914;
        --ink-soft: #4a453c;
        --ink-muted: #8a8276;
        --paper: #f4efe6;
        --paper-deep: #ebe4d6;
        --paper-lift: #faf7f1;
        --accent: #d4773b;
        --link: #a85a24;
        --strong: #15120e;
        --inline-code: #7a3d1e;
        --hairline: rgba(28, 25, 20, 0.08);
        --hairline-strong: rgba(28, 25, 20, 0.12);
        --code-bg: #f3eee4;
        --code-fg: #2a211c;
        --code-border: rgba(28, 25, 20, 0.2);
        --table-bg: #f6f0e6;
        --table-line: rgba(28, 25, 20, 0.16);
        --table-stripe: rgba(28, 25, 20, 0.05);
        --blockquote-tint: rgba(212, 119, 59, 0.07);
        --diagram-card: #f6f0e6;
        --font-display: "Cormorant Garamond", "Instrument Serif", Georgia, "Times New Roman", "Songti SC", SimSun, serif;
        --font-ui: "DM Sans", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif;
        --reader-heading: var(--font-display);
        --reader-font: var(--font-ui);
      }

      html,
      body {
        height: auto !important;
        overflow: visible !important;
        background: #f4efe6 !important;
        color: #1c1914 !important;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
      }

      html.is-print-white,
      html.is-print-white body {
        background: #fff !important;
        --paper: #ffffff;
        --paper-deep: #f4f4f4;
        --paper-lift: #ffffff;
        --diagram-card: #ffffff;
      }

      html.is-print-clear,
      html.is-print-clear body {
        background: transparent !important;
      }

      html.is-printing body > *:not(#molanPreview) {
        display: none !important;
      }

      body::before,
      body::after,
      .sidebar,
      .reader-header,
      .status-bar,
      .welcome,
      .toast,
      .lightbox,
      .molan-find-bar,
      .molan-format-bar,
      .molan-block-insert,
      .molan-insert-menu,
      .molan-diagram-toolbar,
      .molan-table-toolbar,
      .molan-table-picker,
      .molan-outline-prefs,
      .molan-outline-panel,
      .editor-wrap > .vditor-outline,
      .molan-source-view,
      .molan-mermaid-editor-mask,
      .molan-image-url-mask,
      .prefs-menu,
      .theme-menu,
      .type-menu,
      .export-menu,
      #vditor,
      .hidden-input {
        display: none !important;
      }

      .app,
      .main,
      .reader-body,
      .editor-wrap,
      .editor-wrap.visible,
      .molan-preview,
      .editor-wrap.is-lite-preview .molan-preview,
      .molan-preview > .vditor-reset,
      #molanPreviewBody {
        display: block !important;
        position: static !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: visible !important;
        flex: none !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
      }

      .app {
        grid-template-columns: none !important;
        grid-template-rows: none !important;
        gap: 0 !important;
      }

      .vditor-reset,
      .molan-preview,
      #molanPreviewBody,
      pre,
      table {
        overflow: visible !important;
        contain: none !important;
      }

      .vditor-preview .vditor-reset,
      .molan-preview > .vditor-reset,
      #molanPreviewBody {
        padding: 0 !important;
      }

      body {
        max-width: none !important;
        margin: 0 !important;
      }

      .vditor-reset h1,
      .vditor-reset h2,
      .vditor-reset h3,
      .vditor-reset h4,
      .vditor-reset h5,
      .vditor-reset h6 {
        break-after: avoid;
        page-break-after: avoid;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .vditor-reset p,
      .vditor-reset li {
        orphans: 3;
        widows: 3;
      }

      /* 代码/表格经常高于一页，禁止整块避让，否则会留下整页空白或被裁切 */
      pre,
      table,
      blockquote {
        break-inside: auto;
        page-break-inside: auto;
      }

      pre,
      pre code {
        white-space: pre-wrap !important;
        word-break: break-word !important;
        overflow: visible !important;
      }

      .vditor-reset table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: auto !important;
        border-collapse: collapse !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-shadow: none !important;
      }

      .vditor-reset table thead {
        display: table-header-group;
      }

      .vditor-reset table tr,
      .vditor-reset table th,
      .vditor-reset table td {
        break-inside: avoid;
        page-break-inside: avoid;
      }

      .molan-table--wide {
        font-size: 0.85em;
      }

      /* 图和流程图缩进单页，避免拦腰切断 */
      img,
      .katex-display,
      .molan-mermaid-shell,
      .molan-mermaid-shell svg,
      .language-mermaid svg {
        break-inside: avoid;
        page-break-inside: avoid;
        max-width: 100% !important;
        max-height: 220mm !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain;
        box-shadow: none !important;
      }

      a[href]::after {
        content: none !important;
      }
    }