:root {
      /* Primary — royal blue (50–200 = dark translucent faces) */
      --color-primary-50: rgba(42, 93, 207, 0.12);
      --color-primary-100: rgba(42, 93, 207, 0.20);
      --color-primary-200: rgba(42, 93, 207, 0.32);
      --color-primary-300: #94B0EC;
      --color-primary-400: #5E87E0;
      --color-primary-500: #2A5DCF;
      --color-primary-600: #234DB0;
      --color-primary-700: #1C3D8C;
      --color-primary-800: #162F6B;
      --color-primary-900: #112352;
      --color-primary-950: #0B1736;

      /* Accent — brick (visible; not a hairline) */
      --color-accent-50: rgba(229, 77, 66, 0.12);
      --color-accent-100: rgba(229, 77, 66, 0.22);
      --color-accent-500: #E54D42;
      --color-accent-600: #C93D34;
      --color-accent-700: #A3322B;
      --color-on-accent: #FFFFFF;

      /* Neutral — full-site dark */
      --color-canvas: #0B1220;
      --color-surface: #1A2332;
      --color-surface-muted: #222C3D;
      --color-blockquote: #3A4658;
      --color-pre: #121A28;
      --color-border: #2E3A4D;
      --color-border-subtle: #243044;
      --color-text: #F3F5F8;
      --color-text-secondary: #F3F5F8;
      --color-text-muted: #C2CAD6;
      --color-header: #141C2A;
      --color-header-deep: #0B1220;
      --color-footer-fg: #C2CAD6;
      --color-secondary: #243A66;

      /* Semantic */
      --color-danger: #C93D34;
      --color-danger-hover: #A3322B;
      --color-info: #C2CAD6;
      --color-info-bg: rgba(42, 93, 207, 0.12);

      /* On fills */
      --color-on-primary: #FFFFFF;
      --color-on-dark: #FFFFFF;
      --color-on-dark-muted: #C2CAD6;

      --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-400);

      /* Scrollbar — thin track, neutral thumb (dark v2.3) */
      --scrollbar-thumb: #3A4658;
      --scrollbar-thumb-hover: #5A687C;
      --scrollbar-thumb-active: #5E87E0;

      /* Theme chrome / links / slant (dark defaults; light overrides below) */
      color-scheme: dark;
      --color-header-fg: var(--color-on-dark);
      --color-header-fg-muted: var(--color-on-dark-muted);
      --color-header-slant-blue: #112352;
      --color-header-slant-red: #E54D42;
      --color-link: var(--color-primary-300);
      --color-link-hover: var(--color-primary-400);
      --color-pre-fg: #F3F5F8;
      --color-pre-border: #2E3A4D;
      --shadow-card: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border);
      --shadow-header: 0 1px 2px rgb(0 0 0 / 0.24);

      /* System font stacks (#57) — no webfont / CDN */
      --font-sans:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Hiragino Sans GB",
        "Microsoft YaHei UI",
        "Microsoft YaHei",
        "Noto Sans CJK SC",
        "Noto Sans SC",
        "Source Han Sans SC",
        "WenQuanYi Micro Hei",
        sans-serif;
      --font-mono:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        "Liberation Mono",
        monospace;
    }
    /* Light「纸面 · Paper Warm」token overrides (#95). pre / slant / on-* stay on :root. */
    [data-theme="light"] {
      color-scheme: light;
      --color-primary-50: #EBEAE6;
      --color-primary-100: #E2E1E8;
      --color-primary-200: #C2D3F5;
      --color-canvas: #E5E4DF;
      --color-surface: #EEECE7;
      --color-surface-muted: #DFDDD8;
      --color-blockquote: #E3E5EC;
      --color-border: #C9C7C2;
      --color-border-subtle: #D5D3CE;
      --color-text: #1A2332;
      --color-text-secondary: #1A2332;
      --color-text-muted: #5B6578;
      --color-footer-fg: #5B6578;
      --color-on-dark-muted: #5B6578;
      --color-header: #DDDBD5;
      --color-header-deep: #D4D2CC;
      --color-header-fg: #1A2332;
      --color-header-fg-muted: #5B6578;
      --color-link: var(--color-primary-600);
      --color-link-hover: var(--color-primary-700);
      --color-on-primary: #FFFFFF;
      --color-on-accent: #FFFFFF;
      --color-on-dark: #FFFFFF;
      --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
      --shadow-card: 0 1px 2px rgb(26 35 50 / 0.06), 0 0 0 1px var(--color-border);
      --shadow-header: 0 1px 2px rgb(26 35 50 / 0.06), 0 0 0 1px var(--color-border);
      --scrollbar-thumb: #A8B0BD;
      --scrollbar-thumb-hover: #5B6578;
      --scrollbar-thumb-active: #2A5DCF;
    }

    /* No-JS / script-failure fallback: follow OS when html has no data-theme yet. */
    @media (prefers-color-scheme: light) {
      :root:not([data-theme]) {
        color-scheme: light;
        --color-primary-50: #EBEAE6;
        --color-primary-100: #E2E1E8;
        --color-primary-200: #C2D3F5;
        --color-canvas: #E5E4DF;
        --color-surface: #EEECE7;
        --color-surface-muted: #DFDDD8;
        --color-blockquote: #E3E5EC;
        --color-border: #C9C7C2;
        --color-border-subtle: #D5D3CE;
        --color-text: #1A2332;
        --color-text-secondary: #1A2332;
        --color-text-muted: #5B6578;
        --color-footer-fg: #5B6578;
        --color-on-dark-muted: #5B6578;
        --color-header: #DDDBD5;
        --color-header-deep: #D4D2CC;
        --color-header-fg: #1A2332;
        --color-header-fg-muted: #5B6578;
        --color-link: var(--color-primary-600);
        --color-link-hover: var(--color-primary-700);
        --color-on-primary: #FFFFFF;
        --color-on-accent: #FFFFFF;
        --color-on-dark: #FFFFFF;
        --focus-ring: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-primary-500);
        --shadow-card: 0 1px 2px rgb(26 35 50 / 0.06), 0 0 0 1px var(--color-border);
        --shadow-header: 0 1px 2px rgb(26 35 50 / 0.06), 0 0 0 1px var(--color-border);
        --scrollbar-thumb: #A8B0BD;
        --scrollbar-thumb-hover: #5B6578;
        --scrollbar-thumb-active: #2A5DCF;
      }
    }

    html { font-family: var(--font-sans); scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
    code, kbd, samp,
    .editor .body-source textarea.field,
    .cat-slug {
      font-family: var(--font-mono);
    }
    body { background: var(--color-canvas); color: var(--color-text); }

    /* Firefox: embedded overflow containers (match html thin bar) */
    .post-body pre,
    .post-body table,
    .post-body .mermaid,
    .sidebar .archives {
      scrollbar-width: thin;
      scrollbar-color: var(--scrollbar-thumb) transparent;
    }

    /* WebKit / Blink: global thin scrollbar */
    *::-webkit-scrollbar { width: 6px; height: 6px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; }
    *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
    *::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-active); }
    *::-webkit-scrollbar-corner { background: transparent; }
    a:link, a:visited { text-decoration: none; color: var(--color-link); }
    a:hover { color: var(--color-link-hover); }
    a:active { color: var(--color-primary-500); }
    a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .post-body a:link, .post-body a:visited { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
    .post-body a:hover { color: var(--color-link-hover); }
    .post-body a:active { color: var(--color-primary-500); }
    .page { margin-inline: auto; min-height: 100vh; max-width: 77rem; padding: 2rem 1rem; }
    .columns { margin-top: 2rem; display: grid; align-items: start; gap: 2rem; }
    .columns > main { min-width: 0; }
    .site-header { position: relative; overflow: visible; border-radius: 1.5rem; color: var(--color-header-fg); box-shadow: var(--shadow-header); background: var(--color-header); }
    .site-header-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 0; }
    .site-header .header-chrome { position: relative; padding: 1rem 1.25rem; z-index: 1; }
    .site-header .header-deco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
    .site-header .header-chrome .bar { position: relative; z-index: 1; }
    .theme-control { position: absolute; top: 1.15rem; right: 1rem; z-index: 5; }
    .theme-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 28px; min-width: 28px; min-height: 28px;
      padding: 0; border: 0; border-radius: 999px; cursor: pointer;
      color: #FFFFFF; background: transparent;
    }
    .theme-btn:hover, .theme-btn[aria-expanded="true"] { background: rgba(0, 0, 0, 0.12); }
    .theme-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-header-slant-red), 0 0 0 4px var(--color-primary-300); }
    .theme-btn .ico-sphere {
      width: 22px; height: 22px; display: block;
      filter: drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
    }
    .theme-seg {
      position: absolute; top: calc(100% + 0.35rem); right: 0;
      display: none; align-items: stretch; gap: 2px; padding: 3px;
      border-radius: 10px; background: #2A303C;
      box-shadow: 0 6px 18px rgb(26 35 50 / 0.28), 0 0 0 1px rgb(0 0 0 / 0.2);
    }
    [data-theme="dark"] .theme-seg {
      background: #1A2332;
      box-shadow: 0 6px 18px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.06);
    }
    .theme-control.is-open .theme-seg { display: inline-flex; }
    .theme-seg-btn {
      display: inline-flex; align-items: center; justify-content: center;
      width: 28px; height: 26px; padding: 0; border: 0; border-radius: 7px;
      cursor: pointer; background: transparent; color: rgba(243, 245, 248, 0.55);
    }
    .theme-seg-btn:hover { color: rgba(243, 245, 248, 0.9); }
    .theme-seg-btn[aria-pressed="true"] {
      background: #3D4554; color: #FFFFFF;
      box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
    }
    [data-theme="dark"] .theme-seg-btn[aria-pressed="true"] { background: #2E3A4D; }
    .theme-seg-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .theme-seg-btn svg {
      width: 14px; height: 14px; display: block; fill: none;
      stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
    }
    .site-header .menu { position: relative; z-index: 1; background: var(--color-header); margin-top: 0; }
    .site-header .bar { display: flex; flex-direction: column; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 0.75rem; }
    .site-header .bar-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.5rem; }
    .site-header h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 600; letter-spacing: -0.025em; }
    .site-header h1 a.site-title { display: inline-flex; align-items: center; gap: 0.75rem; }
    .site-header .site-mark { width: 64px; height: 64px; flex-shrink: 0; display: block; }
    .site-header .motto { margin-top: 0.25rem; font-size: 0.875rem; letter-spacing: 0.35em; color: var(--color-header-fg-muted); }
    .site-header .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; }
    .site-header .actions form { display: inline; }
    .site-header .nav-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0.5rem 0.75rem; border: 0; border-radius: 8px; background: var(--color-primary-500); color: var(--color-on-primary); font-size: 0.875rem; cursor: pointer; }
    .site-header .nav-toggle:hover { background: var(--color-primary-600); color: var(--color-on-primary); }
    .site-header .nav-toggle:active { background: var(--color-primary-700); color: var(--color-on-primary); }
    .site-header .nav-toggle[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--color-accent-500); }
    .site-header .menu { gap: 0.5rem; font-size: 0.875rem; }
    .site-header .menu .chip { display: block; text-align: center; padding: 0.375rem 0.75rem; }
    .site-header a:link, .site-header a:visited { color: var(--color-header-fg); }
    .site-header a:hover { color: var(--color-header-fg); }
    .site-header a:active { color: var(--color-header-fg); }
    .site-header h1 a:hover { color: var(--color-link); }
    .site-header h1 a:active { color: var(--color-link); }
    .site-header a:focus-visible, .site-header .chip:focus-visible, .site-header .nav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-header), 0 0 0 4px var(--color-primary-300); }
    .site-footer { margin-top: 1.714rem; padding: 1.714rem 0; border-radius: 0; background: transparent; border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: 12px; line-height: 2; text-align: center; }
    .site-footer a:link, .site-footer a:visited { color: var(--color-text-muted); }
    .site-footer a:hover { color: var(--color-link); }
    .site-footer a:active { color: var(--color-link-hover); }
    .site-footer .logos { height: 32px; line-height: 32px; }
    .site-footer .beian-gongan { display: inline-block; padding-left: 25px; margin-right: 10px; background: transparent url(https://file.ofcdn.com/attachments/2018/06/gaba.png) no-repeat center left; line-height: 32px; vertical-align: top; }
    .site-footer .copyright { margin: 0; height: 32px; line-height: 32px; }
    .site-footer .promo { margin: 0; height: 32px; line-height: 32px; }
    .site-footer .qcloud { display: inline-block; width: 32px; height: 32px; background: url(https://file.ofcdn.com/qcloud-icon.png) no-repeat center; font-size: 0; color: transparent; overflow: hidden; }
    .chip { border-radius: 8px; padding: 0.25rem 0.75rem; font-size: 0.875rem; background: var(--color-primary-500); color: var(--color-on-primary); box-shadow: 0 1px 0 var(--color-primary-400); }
    .chip:hover { background: var(--color-primary-600); color: var(--color-on-primary); }
    .chip:active { background: var(--color-primary-700); color: var(--color-on-primary); }
    .chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .chip-current { background: var(--color-accent-500); color: var(--color-on-accent); box-shadow: none; }
    .chip-current:hover { background: var(--color-accent-600); color: var(--color-on-accent); }
    .chip-current:active { background: var(--color-accent-700); color: var(--color-on-accent); }
    .site-header .chip-current:link, .site-header .chip-current:visited { color: var(--color-on-accent); }
    .site-header .chip-current:hover { color: var(--color-on-accent); }
    .site-header .chip-current:active { color: var(--color-on-accent); }
    .site-header .chip:link, .site-header .chip:visited { color: var(--color-on-primary); }
    .site-header .chip:hover { color: var(--color-on-primary); }
    .site-header .chip:active { color: var(--color-on-primary); }
    .btn, .btn-quiet, .chip { border: 0; cursor: pointer; }
    .btn, .btn-quiet { border-radius: 0.375rem; padding: 0.5rem 1rem; }
    .btn { background: var(--color-primary-500); color: var(--color-on-primary); }
    .btn:hover { background: var(--color-primary-600); color: var(--color-on-primary); }
    .btn:active { background: var(--color-primary-700); color: var(--color-on-primary); }
    /* a:link/--color-link beats .btn color; pin on-primary for button links (404 CTA etc.) */
    a.btn:link, a.btn:visited, a.btn:hover, a.btn:active { color: var(--color-on-primary); }
    a.chip:link, a.chip:visited, a.chip:hover, a.chip:active { color: var(--color-on-primary); }
    a.chip-current:link, a.chip-current:visited, a.chip-current:hover, a.chip-current:active { color: var(--color-on-accent); }
    .btn:focus-visible, .btn-quiet:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .btn-quiet { background: var(--color-surface-muted); color: var(--color-text); }
    .btn-quiet:hover { background: var(--color-header-deep); color: var(--color-text); }
    .btn-quiet:active { background: color-mix(in srgb, var(--color-header-deep) 70%, #000); color: var(--color-text); }
    .tag, .tag:link, .tag:visited { border-radius: 0.375rem; padding: 0.125rem 0.5rem; font-size: 0.875rem; background: var(--color-primary-100); color: var(--color-text); text-decoration: none; }
    .tag:hover { background: var(--color-primary-200); color: var(--color-text); }
    .tag:active { background: var(--color-primary-200); color: var(--color-text); }
    .tag:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .listing { display: flex; flex-direction: column; gap: 1rem; }
    .page-title { margin-bottom: 1rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; color: var(--color-link); }
    h3.page-title { margin-top: 2rem; }
    .panel, .entry, .card-post, .login-form, .account-panel, .editor, .comment, .category-create { background: var(--color-surface); box-shadow: var(--shadow-card); }
    .card-post { position: relative; overflow: hidden; border-radius: 1rem; }
    .card-thumb {
      display: block; position: relative; width: 100%; max-height: 160px; aspect-ratio: 27 / 10;
      overflow: hidden; background-color: var(--color-header);
      background-size: cover; background-position: center; background-repeat: no-repeat;
      text-decoration: none; color: var(--color-on-dark);
    }
    .card-thumb-shade {
      position: absolute; inset: 0; pointer-events: none;
      background: linear-gradient(to top, rgba(11, 18, 32, 0.95) 0%, rgba(11, 18, 32, 0.75) 40%, transparent 68%);
    }
    .card-thumb-copy {
      position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
      padding: 0.75rem 1rem; max-height: 160px; box-sizing: border-box; color: var(--color-on-dark);
    }
    .card-thumb-copy h2 {
      margin: 0; font-size: 1.125rem; line-height: 1.35; font-weight: 600; color: var(--color-on-dark);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .card-body { position: relative; padding: 1rem 1.25rem; }
    .card-body.wm-host { overflow: hidden; }
    .card-body.wm-host::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: var(--wm-dots, none); background-repeat: no-repeat; }
    .card-body.wm-host > * { position: relative; z-index: 1; }
    .card-post h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; }
    .card-post .excerpt, .card-post .more, .card-post .meta { margin-top: 0.5rem; }
    .card-post .excerpt { margin: 0.5rem 0 0; font-size: 0.925rem; line-height: 1.55; color: var(--color-text-secondary); }
    .card-post .more { font-weight: 500; }
    .card-post .meta { font-size: 0.875rem; color: var(--color-text-muted); }
    .entry { position: relative; min-width: 0; overflow: hidden; border-radius: 1rem; }
    .entry.wm-host::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background-image: var(--wm-dots, none); background-repeat: no-repeat; }
    .entry > * { position: relative; z-index: 1; }
    .entry > header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); }
    .entry > header h2 { font-size: 1.5rem; line-height: 1.375; font-weight: 600; }
    .entry-hero.has-cover {
      position: relative; overflow: hidden; width: 100%; max-height: 180px; aspect-ratio: 27 / 10;
      background-color: var(--color-header);
      background-size: cover; background-position: center; background-repeat: no-repeat;
    }
    .entry-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 18, 32, 0.95) 0%, rgba(11, 18, 32, 0.75) 40%, transparent 68%); pointer-events: none; }
    .entry-hero-copy {
      position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end;
      padding: 1.25rem 1.5rem; color: var(--color-on-dark); max-height: 180px; box-sizing: border-box;
    }
    .entry-hero.has-cover h2 { font-size: 1.5rem; line-height: 1.375; font-weight: 600; color: var(--color-on-dark); }
    .entry-hero.no-cover { position: relative; overflow: hidden; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--color-border); background: var(--color-header); }
    .entry-hero.no-cover::after { content: ""; position: absolute; right: 0; bottom: 0; width: 3rem; height: 3rem; background: var(--color-accent-500); clip-path: polygon(100% 0, 100% 100%, 0 100%); opacity: 0.75; pointer-events: none; }
    .entry-hero.no-cover h2, .entry-hero.no-cover .meta-row { position: relative; z-index: 1; }
    .entry-hero.no-cover h2 { font-size: 1.5rem; line-height: 1.375; font-weight: 600; color: var(--color-header-fg); }
    .entry .meta-row { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 1rem; row-gap: 0.25rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .entry .meta-row > p { min-width: 0; }
    .entry .tools { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.75rem; }
    .entry > .post-body { min-width: 0; padding: 1.5rem; }
    .entry > .discussion { padding: 1.5rem; border-top: 1px solid var(--color-border); }
    .entry > .post-neighbors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--color-border); font-size: 0.875rem; }
    .entry > .post-neighbors .neighbor { display: grid; gap: 0.25rem; min-width: 0; color: inherit; text-decoration: none; }
    .entry > .post-neighbors .neighbor:hover .neighbor-title { color: var(--color-link); }
    .entry > .post-neighbors .neighbor-next { text-align: right; }
    .entry > .post-neighbors .neighbor-label { color: var(--color-text-muted); }
    .entry > .post-neighbors .neighbor-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
    .entry > .post-neighbors .is-empty { visibility: hidden; }
    .sidebar { display: flex; flex-direction: column; gap: 1.5rem; }
    .sidebar .panel { border-radius: 1rem; padding: 1rem; }
    .sidebar h3 { font-weight: 600; }
    .sidebar .search { display: flex; align-items: center; gap: 0.5rem; }
    .sidebar .search .field { width: auto; min-width: 0; flex: 1; padding: 0.25rem 0.5rem; }
    .sidebar .search .btn-quiet { display: inline-flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; padding: 0; }
    .sidebar .search svg { width: 1rem; height: 1rem; }
    .sidebar .tags { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .sidebar .links, .sidebar .archives { margin-top: 0.5rem; font-size: 0.875rem; }
    .sidebar .links li + li, .sidebar .archives li + li { margin-top: 0.25rem; }
    .sidebar .archives { line-height: 1.5; max-height: calc(18 * 1lh + 17 * 0.25rem); overflow-y: auto; }
    .editor { display: grid; gap: 0.75rem; max-width: 36rem; border-radius: 1rem; padding: 1.5rem; }
    .editor-tag { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
    .editor .title-input { padding-left: 0; padding-right: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; font-size: 1.75rem; line-height: 1.3; font-weight: 600; }
    .editor .title-input:focus { outline: none; border-bottom-color: var(--color-primary-500); box-shadow: 0 2px 0 0 var(--color-primary-500); }
    .editor .title-input::placeholder { color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); }
    .editor .excerpt-input { padding-left: 0; padding-right: 0; border: 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; }
    .editor .excerpt-input:focus { outline: none; border-bottom-color: var(--color-primary-500); box-shadow: 0 1px 0 0 var(--color-primary-500); }
    .editor .source { margin: 0; padding: 0; border: 0; font-size: 0.875rem; }
    .editor .source legend { padding: 0; color: var(--color-text-muted); }
    .editor .source .seg { display: inline-flex; width: fit-content; margin-top: 0.375rem; border: 1px solid var(--color-border); border-radius: 0.5rem; overflow: hidden; }
    .editor .source .seg input[type="radio"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .editor .source .seg label { padding: 0.375rem 0.875rem; cursor: pointer; color: var(--color-text-secondary); }
    .editor .source .seg label:not(:first-of-type) { border-left: 1px solid var(--color-border); }
    .editor .source .seg input:checked + label { background: var(--color-primary-100); color: var(--color-link); font-weight: 500; }
    .editor .source .seg input:focus-visible + label { outline: none; box-shadow: inset 0 0 0 2px var(--color-primary-500); }
    .editor .file-source { display: grid; justify-items: center; gap: 0.5rem; padding: 2rem 1.5rem; border: 1px dashed var(--color-border); border-radius: 0.75rem; text-align: center; font-size: 0.925rem; color: var(--color-text-muted); cursor: pointer; }
    .editor .file-source:hover { border-color: var(--color-primary-500); background: var(--color-primary-50); color: var(--color-text); }
    .editor .file-source.dragover { border-style: solid; border-color: var(--color-primary-500); background: var(--color-primary-50); color: var(--color-link); }
    .editor .file-source .dz-icon svg { width: 1.5rem; height: 1.5rem; }
    .editor .file-source .dz-browse { font-weight: 500; color: var(--color-link); }
    .editor .file-source .dz-file { font-size: 0.875rem; color: var(--color-link-hover); }
    .editor .feature-image-field { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .editor .file-source.has-file { border-style: solid; border-color: var(--color-primary-500); background: var(--color-surface); color: var(--color-text); }
    .editor .file-source .dz-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
    .editor .body-source { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .editor .body-source textarea.field { min-height: 56vh; resize: vertical; font-size: 0.925rem; line-height: 1.6; }
    .editor .meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
    .editor .meta-line > label { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .editor .meta-line .field { width: auto; }
    .editor .meta-line input[name="published_at"] { width: 13rem; }
    .editor .meta-line input[name="slug"] { min-width: 13rem; flex: 2 1 15rem; }
    .editor .meta-line input[name="tags"] { min-width: 13rem; flex: 3 1 13rem; }
    .editor .meta-line .terms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.875rem; flex-basis: 100%; font-size: 0.875rem; }
    .editor .meta-line .terms .comment-toggle { display: inline-flex; align-items: center; margin-left: auto; gap: 0.375rem; }
    .editor:has(#source-editor:checked) .file-source { display: none; }
    .editor:has(#source-file:checked) .body-source { display: none; }
    .editor .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
    .editor .preview-block { display: none; }
    .editor .preview-block:has(#preview:not(:empty)) { display: grid; gap: 0.5rem; border-top: 1px solid var(--color-border); padding-top: 1.25rem; }
    .editor .preview-block h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
    .editor .preview-note { margin: 0; font-size: 0.875rem; color: var(--color-text-muted); }
    .editor #preview:empty { display: none; }
    .field { width: 100%; border: 1px solid var(--color-border); border-radius: 0.375rem; background: var(--color-surface-muted); padding: 0.5rem 0.75rem; color: var(--color-text); }
    .field:focus { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 28%, transparent); }
    .field:focus-visible { outline: none; border-color: var(--color-primary-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500) 28%, transparent); }
    .category-list { background: var(--color-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border); display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; }
    .cat-row { display: flex; align-items: baseline; gap: 1rem; padding: 0.625rem 1rem; }
    .cat-row + .cat-row { border-top: 1px solid var(--color-border); }
    .cat-row:hover { background: var(--color-primary-50); }
    .cat-row.depth-1, .cat-row.depth-2 { position: relative; }
    .cat-row.depth-1 { padding-left: calc(1rem + 1.5rem); }
    .cat-row.depth-2 { padding-left: calc(1rem + 3rem); }
    .cat-row.depth-1::before, .cat-row.depth-2::before { content: ""; position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 1px; background: var(--color-border); }
    .cat-open { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--color-text); text-align: left; cursor: pointer; }
    .cat-open:hover { color: var(--color-primary-600); }
    .cat-open:active { color: var(--color-primary-700); }
    .cat-open:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .cat-slug { flex: 0 0 auto; font-size: 0.875rem; color: var(--color-text-muted); }
    .cat-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; color: var(--color-text-muted); }
    .category-new { margin-top: 1rem; }
    .cat-dialog { border: 0; border-radius: 1rem; margin: auto; padding: 1.5rem; width: min(30rem, calc(100vw - 2rem)); background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 12px 40px rgb(0 0 0 / 0.45); }
    .cat-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
    .cat-dialog form { display: grid; gap: 0.75rem; }
    .cat-dialog h2 { margin: 0; font-size: 1.125rem; font-weight: 600; }
    .cat-dialog label { display: grid; gap: 0.375rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; margin-top: 0.25rem; padding-top: 0.875rem; border-top: 1px solid var(--color-border); }
    .dialog-actions #cat-delete { margin-right: auto; }
    .comment-form .btn { width: fit-content; }
    .draft-list { background: var(--color-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border); display: flex; flex-direction: column; border-radius: 1rem; overflow: hidden; }
    .draft-row { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; }
    .draft-row + .draft-row { border-top: 1px solid var(--color-border); }
    .draft-row:hover { background: var(--color-primary-50); }
    .draft-main { flex: 1; min-width: 0; font-weight: 600; }
    .draft-main a:link, .draft-main a:visited { color: var(--color-text); }
    .draft-status { flex: 0 0 auto; border-radius: 999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 500; }
    .draft-status.draft { color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border); }
    .draft-status.private { color: var(--color-info); background: var(--color-info-bg); }
    .draft-date { flex: 0 0 auto; font-size: 0.875rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
    .draft-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.75rem; }
    .draft-actions form { display: inline-flex; }
    .empty-note { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
    .empty-note .muted { margin: 0; }
    .comments-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.85rem; }
    .comments-head h3, .comments h3 { margin: 0; font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
    .sort-seg { display: inline-flex; align-items: center; gap: 0.15rem; padding: 0.15rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); }
    .sort-seg button { background: none; border: 0; padding: 0.3rem 0.75rem; border-radius: 999px; cursor: pointer; color: var(--color-text-muted); font: inherit; font-size: 0.8125rem; }
    .sort-seg button[aria-pressed="true"] { color: var(--color-link); font-weight: 700; background: var(--color-primary-50); }
    .sort-seg button:hover { color: var(--color-link); }
    .sort-seg button:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    #comment-form-slot-top { margin: 0 0 1rem; }
    .comments .queue, .comments .thread { display: flex; flex-direction: column; }
    .comments .queue { margin-top: 0.5rem; gap: 0.75rem; }
    .comments .queue-list { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
    .comments .thread { margin-top: 0.5rem; gap: 1rem; padding: 0; list-style: none; }
    .comment { border-radius: 0.75rem; padding: 1rem; }
    .comment.is-target { box-shadow: 0 0 0 2px rgba(42, 93, 207, 0.28); }
    .comment .byline { font-size: 0.875rem; color: var(--color-text-muted); }
    .comment .body { margin-top: 0.5rem; white-space: pre-wrap; }
    .comment .actions { margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .comment .actions .mod-actions { display: inline-flex; gap: 0.5rem; margin: 0; }
    .reply-link { color: var(--color-link); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 0.875rem; text-decoration: none; }
    .reply-link:hover { color: var(--color-link-hover); text-decoration: underline; }
    .reply-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .replies { margin-top: 0.4rem; margin-left: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; padding: 0; background: transparent; }
    .comment-l2 { padding: 0.05rem 0; }
    .comment-l2 .body { font-size: 0.9rem; white-space: pre-wrap; }
    .comment-l2 .actions { margin-top: 0.35rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .reply-prefix { color: var(--color-text); }
    .mention { color: var(--color-link); }
    .replies-summary { align-self: flex-start; background: none; border: 0; padding: 0.15rem 0; cursor: pointer; color: var(--color-text-muted); font: inherit; font-size: 0.875rem; }
    .replies-summary:hover { color: var(--color-link); }
    .replies-summary:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .replies-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding-top: 0.5rem; margin-top: 0.25rem; border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-muted); }
    .replies-pager .pages { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
    .page-num, .pager-next, .pager-collapse { background: none; border: 0; padding: 0.15rem 0.35rem; cursor: pointer; color: var(--color-text-muted); font: inherit; font-size: 0.8125rem; }
    .page-num.is-current { color: var(--color-link); font-weight: 700; }
    .page-num:hover, .pager-next:hover, .pager-collapse:hover { color: var(--color-link); }
    .page-num:focus-visible, .pager-next:focus-visible, .pager-collapse:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .pager-next:disabled { opacity: 0.4; cursor: default; }
    .pager-collapse { margin-left: auto; }
    .load-sentinel { text-align: center; padding: 0.5rem 0; font-size: 0.8rem; color: var(--color-text-muted); }
    .form-slot:empty { display: none; }
    .comment-root > .form-slot:not(:empty) { margin-top: 0.85rem; }
    .comment-form { margin-top: 0; display: grid; gap: 0.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 0.75rem; padding: 1rem; }
    .comment-form .form-title { margin: 0; font-size: 1rem; font-weight: 600; }
    .comment-form .who { display: grid; grid-template-columns: 1fr; gap: 0.5rem; }
    .comment-form .field,
    .comment-form input,
    .comment-form textarea {
      background: var(--color-surface-muted);
      border: 1px solid var(--color-border);
    }
    .comment-form .field::placeholder,
    .comment-form input::placeholder,
    .comment-form textarea::placeholder {
      color: color-mix(in srgb, var(--color-text-muted) 92%, #fff);
      opacity: 1;
    }
    .comment .byline,
    .comment .actions,
    .comment-l2 .actions,
    .replies-summary {
      color: var(--color-text-muted);
    }
    .reply-banner { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; background: var(--color-primary-50); border-radius: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; }
    .reply-banner .who-name { color: var(--color-link); font-weight: 600; }
    .reply-banner .cancel { background: none; border: 0; padding: 0; cursor: pointer; color: var(--color-link); font: inherit; font-size: 0.875rem; }
    .reply-banner .cancel:hover { text-decoration: underline; }
    .reply-banner .cancel:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .hp { display: none; }
    .pager-nav { margin-top: 1.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
    .pager-nav .extend { color: var(--color-text-muted); }
    .comments .pager-nav { margin-top: 1rem; }
    .comments .pager { padding: 0.25rem 0.5rem; }
    .notice { margin-top: 1rem; border-radius: 0.375rem; padding: 0.5rem 0.75rem; background: var(--color-info-bg); color: var(--color-info); }
    .muted { color: var(--color-text-muted); }
    .linkish { color: var(--color-link); background: none; border: 0; cursor: pointer; }
    .linkish:hover { color: var(--color-link-hover); }
    .linkish:active { color: var(--color-primary-500); }
    .linkish:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .danger { color: var(--color-danger); background: none; border: 0; cursor: pointer; }
    .danger:hover { color: var(--color-danger-hover); }
    .danger:active { color: var(--color-danger-hover); }
    .danger:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 0.2rem; }
    .pager { border-radius: 0.25rem; padding: 0.25rem 0.75rem; background: var(--color-surface); color: var(--color-link); box-shadow: 0 0 0 1px var(--color-border); }
    .pager:hover { background: var(--color-primary-50); color: var(--color-link); }
    .pager:active { background: var(--color-primary-100); color: var(--color-link-hover); }
    .pager:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .pager-current, .pager-current:link, .pager-current:visited { background: var(--color-primary-500); color: var(--color-on-primary); box-shadow: none; }
    .pager-current:hover { background: var(--color-primary-600); color: var(--color-on-primary); }
    .pager-current:active { background: var(--color-primary-700); color: var(--color-on-primary); }

    .notice-error { background: var(--color-accent-50); color: #F5B0AB; border-left: 3px solid var(--color-accent-500); }
    .field-readonly, .field[readonly] { color: var(--color-text-muted); box-shadow: none; }
    .field-readonly:focus, .field[readonly]:focus { border-color: var(--color-border); box-shadow: none; }
    .login-form, .account-panel { display: grid; gap: 0.75rem; border-radius: 1rem; padding: 1.5rem; background: var(--color-surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border); }
    .login-form { max-width: 24rem; }
    .account-panel { max-width: none; width: 100%; gap: 0; }
    .login-form h2, .account-panel > h2 { font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; margin: 0; }
    .account-panel > .muted { margin: 0.35rem 0 0; }
    .auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.25rem; border-radius: 0.5rem; background: var(--color-header-deep); border: 1px solid var(--color-border-subtle, var(--color-border)); }
    .auth-tab { border: 0; border-radius: 0.375rem; padding: 0.4rem 0.5rem; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; }
    .auth-tab.is-active { background: var(--color-surface-muted); color: var(--color-text); }
    .auth-tab:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .login-form form { display: grid; gap: 0.75rem; }
    .login-form [data-auth-panel] { display: grid; gap: 0.75rem; }
    .account-section { padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--color-border-subtle, #243044); }
    .account-section:first-of-type { padding-top: 1.25rem; margin-top: 1rem; }
    .account-section h3 { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 600; color: var(--color-text); }
    .account-form { display: grid; gap: 0.75rem; }
    /* flex+wrap keeps caption+hint on one row; inputs take full next row */
    .field-label { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 0.35rem; font-size: 0.875rem; color: var(--color-text-muted); }
    .field-label .hint { margin-left: 0.5rem; font-size: 0.75rem; color: var(--color-text-muted); white-space: nowrap; }
    .field-label > .field,
    .field-label > input,
    .field-label > textarea,
    .field-label > select { flex: 1 0 100%; width: 100%; }
    .account-actions { display: flex; justify-content: flex-end; gap: 0.75rem; }
    .passkey-list { list-style: none; margin: 0; padding: 0; }
    .passkey-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-subtle, #243044); }
    .passkey-row:last-child { border-bottom: 0; }
    .passkey-meta { font-size: 0.8125rem; margin-top: 0.15rem; }
    .author-tools-list { margin-top: 0.5rem; font-size: 0.875rem; list-style: none; padding: 0; }
    .author-tools-list li + li { margin-top: 0.25rem; }
    .author-tools-list a, .author-tools-list button.linkish { color: var(--color-link); background: none; border: 0; padding: 0; font: inherit; font-size: 0.875rem; cursor: pointer; }
    .author-tools-list a:hover, .author-tools-list button.linkish:hover { color: var(--color-link-hover); }
    .author-tools-list a[aria-current="page"] { font-weight: 600; }
    .author-tools-list .logout-form { display: inline; }
    .author-tools-mobile { margin: 0.75rem 0 1rem; }
    .author-tools-mobile > summary.author-tools-toggle {
        list-style: none; cursor: pointer;
        display: flex; align-items: center; justify-content: space-between;
        padding: 0.75rem 1rem; border-radius: 1rem;
        background: var(--color-surface);
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border);
        font-weight: 600; font-size: 0.925rem;
    }
    .author-tools-mobile > summary::-webkit-details-marker { display: none; }
    .author-tools-mobile > summary .chev { color: var(--color-text-muted); font-weight: 400; font-size: 0.8rem; }
    .author-tools-mobile[open] > summary .chev::before { content: "收起"; }
    .author-tools-mobile:not([open]) > summary .chev::before { content: "展开"; }
    .author-tools-mobile .panel-body {
        margin-top: 0.5rem; padding: 0.75rem 1rem 1rem;
        background: var(--color-surface); border-radius: 1rem;
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 0 0 1px var(--color-border);
    }

    @media (min-width: 48rem) {
        .site-header { border-radius: 1.125rem; }
        .theme-control { top: 2.55rem; right: 2.1rem; }
        .site-header .header-chrome {
            position: static;
            padding: 1.1rem 1.25rem 0;
        }
        .site-header .header-deco { position: absolute; inset: 0; }
        .site-header .bar {
            position: relative;
            z-index: 1;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
        }
        .site-header .site-mark { width: 48px; height: 48px; }
        .site-header h1 { font-size: 1.5rem; line-height: 1.35; }
        .site-header .motto { margin-top: 0.28rem; font-size: 0.8rem; letter-spacing: 0.3em; }
        .site-header .nav-toggle { display: none; }
        .site-header .menu {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-top: 0;
            background: transparent;
            padding: 0.9rem 1.25rem 1.15rem;
            position: relative;
        }
        .site-header .menu .chip {
            display: inline-block;
            text-align: center;
            padding: 0.35rem 0.75rem;
            font-size: 0.875rem;
        }
        .comment-form .who { grid-template-columns: 1fr 1fr; }
        .replies { margin-left: 2.25rem; }
    }
    @media (min-width: 64rem) {
        .columns { grid-template-columns: minmax(0, 1fr) 26.041666667%; column-gap: 1.5rem; }
        .columns.full { grid-template-columns: minmax(0, 1fr); }
        .sidebar { position: sticky; top: 1.5rem; }
        .author-tools-mobile { display: none; }
    }
    .columns.full .editor { max-width: none; }
    .columns.full .login-form { width: min(24rem, 100%); margin-inline: auto; }
    .entry-hero.has-cover .meta-row { color: rgba(243, 245, 248, 0.85); }
    .entry-hero.has-cover .meta-row a { color: rgba(243, 245, 248, 0.95); }
    .entry-hero.no-cover .meta-row { color: var(--color-text-muted); }
    .entry-hero.no-cover .meta-row a { color: var(--color-text-muted); }
    .entry-hero.no-cover .meta-row a:hover { color: var(--color-link); }
    .meta-compact { display: none; }
    .meta-prose { display: inline; }
    @media (max-width: 47.999rem) {
        .site-header {
            position: relative;
            overflow: visible;
        }
        .site-header .header-chrome {
            position: relative;
            padding: 1rem 1.25rem;
        }
        .site-header .bar { position: relative; z-index: 1; }
        .site-header .menu { display: none; }
        .site-header.is-nav-open .menu,
        .site-header .menu[data-open="true"] {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 0.5rem;
            position: absolute;
            left: 0;
            right: 0;
            top: 100%;
            z-index: 30;
            margin: 0.5rem 0 0;
            padding: 0.75rem 1rem 1rem;
            background: var(--color-header);
            border-radius: 1rem;
            box-shadow:
                0 8px 24px rgb(0 0 0 / 0.45),
                0 0 0 1px var(--color-border);
        }
        .site-header .menu .chip {
            display: block;
            text-align: center;
            padding: 0.375rem 0.75rem;
        }
        .meta-prose { display: none; }
        .meta-compact {
            display: grid;
            grid-template-columns: 1fr auto;
            column-gap: 0.75rem;
            align-items: baseline;
            width: 100%;
        }
        .meta-compact .meta-cats { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .meta-compact .meta-date-author { flex-shrink: 0; white-space: nowrap; }
    }
    .post-copyright { margin-top: 1.5rem; padding: 8px; border: 1px solid var(--color-border); background: var(--color-info-bg); }
    .post-copyright img { float: left; width: 55px; height: 55px; margin: 0 10px 0 0; }
    .post-copyright p { overflow: hidden; margin: 0; line-height: 1.6; font-size: 12px; }
    .post-body { line-height: 1.8; font-size: 1.05rem; min-width: 0; overflow-wrap: anywhere; }
    .post-body img, .post-body video, .post-body iframe, .post-body svg { max-width: 100%; height: auto; }
    .post-body img, .post-body video { box-shadow: 0 1px 2px rgb(0 0 0 / 0.28), 0 8px 24px rgb(0 0 0 / 0.35); }
    .post-body .post-copyright img { max-width: 55px; height: 55px; box-shadow: none; }
    .post-body table { display: block; max-width: 100%; overflow-x: auto; }
    .post-body h2, .post-body h3 { font-weight: 600; margin: 1.4rem 0 .6rem; }
    .post-body h2 { font-size: 1.45rem; }
    .post-body h3 { font-size: 1.2rem; }
    .post-body p { margin: .8rem 0; }
    .post-body .post-copyright p { margin: 0; }
    .post-body ul { list-style: disc; padding-left: 1.25rem; }
    .post-body ol { list-style: decimal; padding-left: 1.25rem; }
    .post-body blockquote { border-left: 4px solid var(--color-primary-500); margin: 1rem 0; padding: .75rem 1rem; color: var(--color-text-secondary); background: var(--color-blockquote); border-radius: .5rem; }
    .post-body :not(pre) > code { background: var(--color-surface-muted); color: var(--color-link); padding: .1rem .35rem; border-radius: .3rem; }
    .post-body pre { overflow-x: auto; border-radius: .75rem; margin: 1rem 0; padding: 0.9rem 1rem; background: var(--color-pre); color: var(--color-pre-fg); border: 1px solid var(--color-pre-border); }
    .post-body .code-block { position: relative; margin: 1rem 0; max-height: 24rem; overflow: auto; }
    .post-body .code-block > pre { margin: 0; }
    .post-body .mermaid { margin: 1rem 0; overflow-x: auto; text-align: center; }
    .post-body .mermaid svg { max-width: 100%; height: auto; }
    .post-body .code-copy { position: sticky; float: right; top: .4rem; right: .4rem; margin: .4rem .4rem 0 0; z-index: 1; border: 0; border-radius: .35rem; padding: .15rem .5rem; background: rgb(255 255 255 / .14); color: #e5e9f0; font-size: 12px; line-height: 1.4; cursor: pointer; }
    .post-body .code-copy:hover { background: rgb(255 255 255 / .24); color: #fff; }
    .post-body .code-copy:active { background: rgb(255 255 255 / .3); color: #fff; }
    .post-body .code-copy:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .post-body code { font-size: .92em; }
    .post-body table { width: 100%; border-collapse: collapse; }
    .post-body td, .post-body th { border: 1px solid var(--color-border); padding: .35rem .5rem; }