: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);
    }

    /* 墨夜：暖黑夜读，油灯金 */
    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);
    }

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

    html, body {
      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);
      height: 100%;
      padding: 12px;
      gap: 12px;
    }

    .sidebar {
      display: flex;
      flex-direction: column;
      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;
    }

    .brand {
      padding: 28px 24px 18px;
      border-bottom: 1px solid var(--sidebar-line);
    }

    .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 {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-top: 14px;
    }

    .theme-switch {
      display: flex;
      align-items: center;
      gap: 2px;
    }

    .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; }

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

    .lang-switch select {
      width: 100%;
      max-width: 11.5em;
      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;
    }

    .toolbar {
      padding: 14px 18px 8px;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .library-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 4px 12px 6px 18px;
      flex-shrink: 0;
      overflow: visible;
    }

    .library-label {
      min-width: 0;
      font-size: 0.62rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--sidebar-fg-mute);
      font-weight: 600;
      line-height: 1.3;
    }

    .library-label.is-folder {
      font-size: 0.78rem;
      letter-spacing: 0.02em;
      text-transform: none;
      color: var(--sidebar-fg);
      font-weight: 550;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .library-actions {
      display: flex;
      align-items: center;
      gap: 4px;
      flex-shrink: 0;
      overflow: visible;
    }

    .icon-add {
      appearance: none;
      position: relative;
      width: 28px;
      height: 28px;
      padding: 0;
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 8px;
      background: rgba(255, 255, 255, 0.05);
      color: var(--sidebar-fg);
      cursor: pointer;
      display: grid;
      place-items: center;
      transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
    }

    .icon-add svg {
      width: 14px;
      height: 14px;
      display: block;
    }

    .icon-add:hover {
      background: var(--accent);
      border-color: transparent;
      color: var(--on-accent);
    }

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

    .icon-add-quiet {
      background: transparent;
      border-style: dashed;
      border-color: rgba(255, 255, 255, 0.18);
      color: var(--sidebar-fg-dim);
    }

    .icon-add-quiet:hover {
      background: var(--sidebar-fill-strong);
      border-color: var(--accent-soft);
      color: var(--accent-soft);
    }

    .icon-add.is-hint {
      z-index: 1;
      border-color: color-mix(in srgb, var(--accent-soft) 70%, transparent);
      color: var(--accent-soft);
      animation: molan-breathe 2.4s ease-in-out infinite;
    }

    .icon-add.is-hint::after {
      content: "";
      position: absolute;
      inset: -5px;
      border-radius: 12px;
      border: 1.5px solid var(--accent-soft);
      pointer-events: none;
      animation: molan-halo 2.4s ease-out infinite;
    }

    @keyframes molan-breathe {
      0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
        background: rgba(255, 255, 255, 0.05);
      }
      50% {
        box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent-soft) 55%, transparent);
        background: color-mix(in srgb, var(--accent) 28%, rgba(255, 255, 255, 0.05));
      }
    }

    @keyframes molan-halo {
      0% { opacity: 0.7; transform: scale(0.96); }
      70%, 100% { opacity: 0; transform: scale(1.28); }
    }

    @media (prefers-reduced-motion: reduce) {
      .icon-add.is-hint,
      .icon-add.is-hint::after {
        animation: none;
      }
      .icon-add.is-hint {
        box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent-soft) 50%, transparent);
      }
    }

    .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; }

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

    .search {
      width: 100%;
      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);
    }

    .folder-meta {
      display: none;
      padding: 0 18px 8px;
      font-size: 0.75rem;
      color: var(--sidebar-fg-mute);
      letter-spacing: 0.02em;
    }

    .folder-meta.visible { display: block; }
    .folder-meta strong { color: var(--accent-soft); font-weight: 600; }

    .recent-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 2px;
      align-items: stretch;
    }

    .recent-item {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      color: var(--sidebar-fg);
      border-radius: 8px;
      padding: 7px 8px;
      cursor: pointer;
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 7px;
      align-items: center;
      font-family: var(--font-ui);
      transition: background 0.15s ease, border-color 0.15s ease;
    }

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

    .recent-item .file-icon {
      background: color-mix(in srgb, var(--accent-soft) 18%, transparent);
    }

    .recent-name {
      font-size: 0.78rem;
      font-weight: 550;
      line-height: 1.25;
      word-break: break-word;
    }

    .recent-meta {
      margin-top: 1px;
      font-size: 0.62rem;
      color: var(--sidebar-fg-mute);
    }

    .recent-remove {
      appearance: none;
      border: none;
      background: transparent;
      color: var(--sidebar-fg-mute);
      cursor: pointer;
      font-size: 0.85rem;
      line-height: 1;
      padding: 4px 6px;
      border-radius: 6px;
    }

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

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

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

    .file-item {
      width: 100%;
      text-align: left;
      background: transparent;
      border: 1px solid transparent;
      color: var(--sidebar-fg);
      border-radius: 8px;
      padding: 6px 8px;
      cursor: pointer;
      display: grid;
      grid-template-columns: 20px 1fr;
      gap: 7px;
      align-items: center;
      transition: background 0.15s ease, border-color 0.15s ease;
      font-family: var(--font-ui);
      content-visibility: auto;
      contain-intrinsic-size: auto 44px;
    }

    .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-icon {
      width: 20px;
      height: 20px;
      border-radius: 5px;
      display: grid;
      place-items: center;
      background: var(--sidebar-fill-strong);
      color: var(--accent-soft);
      font-family: var(--font-display);
      font-size: 0.72rem;
      line-height: 1;
    }

    .file-name {
      font-size: 0.78rem;
      font-weight: 550;
      line-height: 1.25;
      word-break: break-word;
    }

    .file-path {
      margin-top: 1px;
      font-size: 0.64rem;
      color: var(--sidebar-fg-mute);
      word-break: break-all;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

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

    .empty-side .glyph {
      font-family: var(--font-display);
      font-size: 1.8rem;
      color: var(--accent-soft);
      margin-bottom: 8px;
      display: block;
      opacity: 0.55;
    }

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

    .main {
      display: flex;
      flex-direction: column;
      min-width: 0;
      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;
      padding: 16px 28px 12px;
      border-bottom: 1px solid var(--hairline);
      background: var(--header-bg);
      backdrop-filter: blur(8px);
      display: flex;
      flex-wrap: nowrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      min-height: 68px;
    }

    .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: 8px;
      flex: 0 0 auto;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }

    .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-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 {
      --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 {
      --seal: #3dd68c;
      --seal-ink: #04140c;
      transform: none;
      border-radius: 2px;
      box-shadow: 0 0 16px rgba(61, 214, 140, 0.35);
    }

    html[data-theme="hack"] .welcome-cta: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="rose"] .aphorism {
      font-weight: 600;
    }

    html[data-theme="rose"] .welcome-cta {
      --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); }
    }

    @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 {
        animation: none;
      }
    }

    .editor-wrap {
      flex: 1;
      min-height: 0;
      display: none;
      padding: 0;
      background: var(--paper-lift);
      contain: layout;
    }

    .editor-wrap.visible { display: flex; flex-direction: column; }

    #vditor {
      flex: 1;
      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: flex !important;
      flex-wrap: wrap;
      align-items: center;
      flex-shrink: 0;
      min-height: 36px;
      overflow: visible !important;
      z-index: 3;
      background: var(--toolbar-bg) !important;
      border-bottom: 1px solid var(--hairline) !important;
      padding-left: 8px !important;
      padding-right: 8px !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;
    }

    .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 !important;
      overflow-x: auto;
      font-family: var(--font-ui) !important;
      font-size: 0.98rem !important;
      line-height: 1.58 !important;
      color: var(--ink) !important;
      background: transparent !important;
    }

    .vditor-reset h1,
    .vditor-reset h2,
    .vditor-reset h3,
    .vditor-reset h4 {
      font-family: var(--font-display) !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;
    }

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

    .vditor-reset h2 { font-size: 1.55rem !important; }
    .vditor-reset h3 { font-size: 1.22rem !important; }
    .vditor-reset h4 {
      font-size: 1.05rem !important;
      font-family: var(--font-ui) !important;
      font-weight: 650 !important;
    }

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

    .vditor-reset p { margin: 0.65em 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: 0.65em 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.92rem;
      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 {
      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;
    }

    .vditor-reset pre code,
    .vditor-reset pre .hljs {
      font-family: var(--font-mono) !important;
      background: transparent !important;
      /* 不加 !important，避免压过 kimbie-dark 的 token 色 */
      color: var(--code-fg);
      padding: 0 !important;
      font-size: 0.8rem !important;
      line-height: 1.55 !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;
    }

    /* 流程图 / 公式预览：浅色卡片，不要套代码暗底 */
    .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-wysiwyg pre.vditor-reset .language-mermaid,
    .vditor-preview .vditor-reset .language-mermaid,
    .vditor-preview .vditor-reset .language-math {
      background: var(--diagram-card) !important;
      border: 1px solid var(--hairline) !important;
      box-shadow: var(--shadow) !important;
      color: var(--ink) !important;
      text-align: center;
      padding: 18px 16px !important;
      position: relative;
    }

    /*
     * 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;
    }

    .vditor-reset .language-mermaid,
    .vditor-reset [data-type="mermaid"] {
      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(--font-ui) !important;
    }

    /* 预览态：点击图进入观看，不要出现 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/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 input[type="checkbox"] {
      margin-right: 0.45em;
      accent-color: var(--accent);
      width: 1em;
      height: 1em;
      vertical-align: -0.12em;
    }

    /* 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: 8px;
      right: 8px;
      z-index: 3;
      display: flex;
      gap: 4px;
      padding: 3px;
      border-radius: 999px;
      background: var(--toolbar-bg);
      border: 1px solid var(--hairline);
      box-shadow: var(--shadow);
      opacity: 0.78;
      transform: translateY(0);
      transition: opacity 0.18s ease;
      pointer-events: auto;
      backdrop-filter: blur(6px);
    }

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

    .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;
    }

    .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);
    }

    .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);
    }

    .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: var(--lightbox-dim);
      backdrop-filter: blur(6px);
    }

    .lightbox.open { display: flex; }

    .lightbox-panel {
      position: relative;
      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;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transform-origin: center center;
      will-change: transform;
    }

    .lightbox-canvas svg {
      max-width: none !important;
      width: auto;
      height: auto;
      margin: 0;
      user-select: none;
      pointer-events: none;
    }

    .vditor-counter {
      color: var(--ink-muted) !important;
      background: transparent !important;
      font-family: var(--font-ui) !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;
      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;
        height: auto;
        min-height: 100%;
        padding: 12px;
      }
      .sidebar { min-height: 42vh; max-height: 48vh; }
      .main { min-height: 70vh; }
      .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; }
      .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: flex-end;
    }

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

    body.molan-host-vscode .reader-actions {
      position: relative;
      z-index: 1;
    }

    body.molan-host-vscode .editor-wrap {
      display: flex;
      flex-direction: column;
    }

    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; }