/* 静室 CSS：24-digital-studio.css。
   写作台、登录、用户管理与筛选面板的补齐样式；只消费 01-tokens.css 既有的
   颜色/字体/间距令牌，不引入新的视觉体系。 */
@layer pages {
  /* ---- 登录与密码页（.entry-space/.entry-card 此前无样式定义）---- */
  .entry-space {
    min-height:60vh;
    display:grid;
    place-items:center;
    padding:var(--space-8) var(--gutter)
  }
  .entry-card {
    inline-size:min(420px,100%);
    padding:var(--space-7) var(--space-6);
    background:var(--surface-canvas);
    border:var(--stroke-hairline) solid var(--border-subtle)
  }
  .entry-card h1,.password-card h1 {
    margin:var(--space-2) 0 var(--space-3);
    font:400 clamp(var(--font-size-2),4vw,var(--font-size-3))/1.15 var(--font-reading)
  }
  .entry-card>p:not(.eyebrow),.password-card>p:not(.eyebrow) {
    margin:0 0 var(--space-5);
    color:var(--text-secondary);
    font:400 var(--font-size--1)/1.72 var(--font-ui)
  }
  .entry-card label,.password-card label,.meta-fields label,.quick-meta label {
    display:block;
    margin:0 0 var(--space-4);
    color:var(--text-secondary);
    font:600 var(--font-size--2)/1.4 var(--font-ui);
    letter-spacing:.04em
  }
  .entry-card label small,.password-card label small,.meta-fields label small {
    margin-left:.5em;
    color:var(--text-muted);
    font-weight:400;
    letter-spacing:0
  }
  .entry-card input:not([type=checkbox]):not([type=hidden]),.password-card input,
  .entry-card select,.admin-page input,.admin-page select,.admin-page textarea,
  .taxonomy-row input {
    inline-size:100%;
    margin-top:var(--space-1);
    padding:10px 12px;
    background:var(--surface-canvas);
    color:var(--text-primary);
    border:var(--stroke-hairline) solid var(--border-strong);
    border-radius:0;
    font:400 var(--font-size-0)/1.5 var(--font-ui)
  }
  .entry-card input:focus,.password-card input:focus,.admin-page input:focus,
  .admin-page select:focus,.taxonomy-row input:focus {
    outline:var(--stroke-focus) solid var(--focus-ring);
    outline-offset:-1px
  }
  /* 密码行：输入框 + 显隐按钮 + 提交按钮同行 */
  .password-row {
    display:flex;
    gap:var(--space-2);
    align-items:stretch
  }
  .password-row input { flex:1; min-inline-size:0 }
  .toggle-pw {
    flex:none;
    padding:0 12px;
    background:var(--action-subtle);
    color:var(--text-secondary);
    border:var(--stroke-hairline) solid var(--border-subtle);
    font-size:16px;
    line-height:1;
    cursor:pointer
  }
  .toggle-pw:hover,.toggle-pw[aria-pressed="true"] { color:var(--text-primary); border-color:var(--border-strong) }

  /* ---- 写作台通用表单页（用户管理、批量整理）---- */
  .page-shell-inner,.editor-page,.users-page,.taxonomy-page,.quick-write {
    max-width:var(--container-feature);
    margin:auto;
    padding-top:clamp(3rem,7vh,5rem)
  }
  .page-shell-inner h1,.users-page h1,.taxonomy-page h1 {
    font:400 clamp(var(--font-size-2),4vw,var(--font-size-4))/1.15 var(--font-reading)
  }
  .page-shell-inner>h2,.page-shell-inner form h2 {
    margin:var(--space-7) 0 var(--space-4);
    font:600 var(--font-size-1)/1.3 var(--font-reading)
  }
  .page-shell-inner>p:first-of-type { color:var(--text-secondary); font:400 var(--font-size--1)/1.72 var(--font-ui) }
  .inline-form { display:inline-block; margin:0 var(--space-2) var(--space-2) 0; vertical-align:top }
  .inline-form label {
    display:block;
    margin-bottom:var(--space-1);
    font:600 var(--font-size--2)/1.4 var(--font-ui);
    color:var(--text-muted)
  }
  .inline-form select,.inline-form input[type=password] { min-inline-size:180px }
  .admin-table-wrap table.users-table td,.page-shell-inner td {
    border-top:var(--stroke-hairline) solid var(--border-subtle);
    padding:var(--space-3);
    vertical-align:top;
    font:400 var(--font-size--1)/1.6 var(--font-ui)
  }
  .page-shell-inner table thead th {
    text-align:start;
    padding:var(--space-2) var(--space-3);
    color:var(--text-muted);
    font:600 var(--font-size--2)/1.4 var(--font-ui);
    letter-spacing:.05em;
    border-bottom:2px solid var(--border-strong)
  }
  .page-shell-inner small,.users-page small { color:var(--text-muted) }
  .return-link a,.plain-link { color:var(--text-secondary); text-decoration:underline; text-underline-offset:3px }
  .return-link a:hover,.plain-link:hover { color:var(--text-primary) }

  /* ---- 标签 chips（邮件式收件人输入）---- */
  .tag-field {
    margin-top:var(--space-1);
    padding:6px;
    background:var(--surface-canvas);
    border:var(--stroke-hairline) solid var(--border-strong)
  }
  .tag-field:focus-within { outline:var(--stroke-focus) solid var(--focus-ring); outline-offset:-1px }
  .tag-chips { display:flex; flex-wrap:wrap; gap:6px }
  .tag-chips:not(:empty) { margin-bottom:6px }
  .tag-chip {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:3px 8px;
    background:var(--action-subtle);
    color:var(--text-primary);
    font:400 var(--font-size--2)/1.4 var(--font-ui)
  }
  .tag-chip button {
    padding:0 2px;
    border:0;
    background:none;
    color:var(--text-muted);
    font-size:14px;
    line-height:1;
    cursor:pointer
  }
  .tag-chip button:hover { color:var(--text-primary) }
  .tag-entry {
    inline-size:100%;
    border:0 !important;
    background:transparent !important;
    padding:4px 2px !important
  }
  .tag-entry:focus { outline:none !important }

  /* ---- 批量整理行内表单 ---- */
  .taxonomy-row { display:flex; gap:var(--space-2); align-items:end }
  .taxonomy-row input[name=category] { max-inline-size:180px }
  .taxonomy-row input[name=tags] { flex:1; min-inline-size:200px }
  .taxonomy-intro { color:var(--text-secondary); font:400 var(--font-size--1)/1.72 var(--font-ui) }

  /* ---- 前台筛选侧边栏（分类计数 + 标签云）---- */
  .library-filter { max-width:var(--container-reading); margin:var(--space-5) auto 0 }
  .filter-panel { border:var(--stroke-hairline) solid var(--border-subtle); background:var(--surface-canvas) }
  .filter-panel summary {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:var(--space-3);
    padding:var(--space-3) var(--space-4);
    cursor:pointer;
    list-style:none;
    font:600 var(--font-size--1)/1.4 var(--font-ui);
    color:var(--text-secondary)
  }
  .filter-panel summary::-webkit-details-marker { display:none }
  .filter-panel summary::after { content:"+"; color:var(--text-muted) }
  .filter-panel[open] summary::after { content:"–" }
  .filter-panel summary small { font-weight:400; color:var(--text-muted) }
  .filter-body { display:grid; gap:var(--space-5); padding:var(--space-2) var(--space-4) var(--space-4) }
  @media(min-width:640px) { .filter-body { grid-template-columns:1fr 1.4fr } }
  .filter-categories .section-kicker,.filter-tags .section-kicker { margin-bottom:var(--space-2) }
  .filter-link {
    display:flex;
    justify-content:space-between;
    gap:var(--space-3);
    padding:6px 0;
    color:var(--text-secondary);
    text-decoration:none;
    border-bottom:1px dashed var(--border-subtle);
    font:400 var(--font-size--1)/1.5 var(--font-ui)
  }
  .filter-link b { font-weight:400; color:var(--text-muted) }
  .filter-link:hover { color:var(--text-primary) }
  .filter-link.active { color:var(--text-primary); font-weight:600; border-bottom-color:var(--border-strong) }
  .tag-cloud { display:flex; flex-wrap:wrap; gap:var(--space-2) var(--space-3); align-items:baseline }
  .cloud-tag {
    color:var(--text-secondary);
    text-decoration:none;
    font-family:var(--font-ui)
  }
  .cloud-tag small { margin-left:3px; color:var(--text-muted); font-size:.72em }
  .cloud-tag:hover { color:var(--text-primary); text-decoration:underline; text-underline-offset:3px }
  .cloud-tag[data-active=true] { color:var(--text-primary); font-weight:700; text-decoration:underline; text-underline-offset:3px }
  .cloud-tag.weight-0,.cloud-tag.weight-1 { font-size:var(--font-size--1) }
  .cloud-tag.weight-2 { font-size:var(--font-size-0) }
  .cloud-tag.weight-3 { font-size:var(--font-size-1) }
  .cloud-tag.weight-4 { font-size:var(--font-size-1); font-weight:600 }
  /* ---- 手账贴纸标签：最热门的 6 个变成贴纸，其余保持文字 ---- */
  .tag-cloud .cloud-tag.sticker {
    position:relative;
    display:inline-flex;
    align-items:baseline;
    gap:4px;
    padding:6px 12px;
    border:1.5px solid var(--color-warm);
    border-radius:10px 12px 10px 14px;
    background:color-mix(in srgb, var(--color-warm-soft) 40%, var(--surface-canvas));
    color:var(--text-primary);
    font-weight:600;
    transform:rotate(-1.2deg);
    box-shadow:1.5px 2px 0 color-mix(in srgb, var(--color-warm-soft) 70%, transparent);
    transition:transform .18s ease, box-shadow .18s ease
  }
  .tag-cloud .cloud-tag.sticker:nth-child(even) { transform:rotate(1.4deg); border-radius:12px 10px 14px 10px; border-color:var(--category-history) }
  .tag-cloud .cloud-tag.sticker:hover {
    transform:rotate(2deg) scale(1.05);
    box-shadow:3px 4px 8px rgba(0,0,0,.12);
    color:var(--text-primary);
    text-decoration:none;
    z-index:1
  }
  .tag-cloud .cloud-tag.sticker small {
    color:var(--text-secondary);
    font-size:.68em
  }
  /* 贴纸折角：右上角小三角 */
  .tag-cloud .cloud-tag.sticker::after {
    content:"";
    position:absolute;
    top:-5px;
    right:-5px;
    width:0;
    height:0;
    border-style:solid;
    border-width:0 10px 10px 0;
    border-color:transparent var(--color-warm-hover) transparent transparent;
    border-radius:0 0 0 3px;
    opacity:.85
  }
  .tag-cloud .cloud-tag.sticker:nth-child(even)::after { border-color:transparent var(--category-history) transparent transparent }
  .filter-clear {
    display:inline-block;
    margin-top:var(--space-3);
    color:var(--text-muted);
    font:400 var(--font-size--2)/1.4 var(--font-ui);
    text-decoration:underline;
    text-underline-offset:3px
  }

  /* ---- EasyMDE 与写作台同色 ---- */
  .editor-split .EasyMDEContainer .CodeMirror {
    background:var(--surface-canvas);
    color:var(--text-primary);
    border-color:var(--border-strong);
    font:400 var(--font-size--1)/1.75 var(--font-prose)
  }
  .editor-split .EasyMDEContainer .editor-toolbar {
    background:var(--action-subtle);
    border-color:var(--border-strong);
    color:var(--text-secondary)
  }
  .editor-split .EasyMDEContainer .editor-toolbar button.active,
  .editor-split .EasyMDEContainer .editor-toolbar button:hover { color:var(--text-primary) }
  .editor-split .EasyMDEContainer .CodeMirror-selected { background:var(--accent-soft,rgba(0,0,0,.08)) }
  .editor-split .editor-preview-side,
  .editor-split .editor-preview {
    background:var(--surface-canvas);
    color:var(--text-primary);
    border-color:var(--border-strong);
    padding:var(--space-5);
    font:400 var(--font-size-0)/1.85 var(--font-prose)
  }
  .editor-split .editor-preview-side blockquote,.editor-split .editor-preview blockquote {
    margin:1.4em 0;
    padding-left:14px;
    border-left:3px solid var(--border-strong);
    color:var(--text-secondary);
    font-style:italic
  }
  .editor-split .editor-preview-side pre,.editor-split .editor-preview pre {
    padding:12px;
    background:var(--surface-subtle);
    overflow:auto
  }

  /* ---- 阅读页：正文列 + 侧注列作为整体居中 ----
     宽屏下侧注绝对定位在正文右侧 48px 处（宽192px），
     整体占位约 720 + 48 + 192 = 960px。把阅读列整体左移半个
     侧注列宽度并给侧注列一个常驻的淡分隔线，让左右留白对称、
     且读者能看出右侧空间是被设计的。 */
  @media(min-width:1260px) {
    .reading-sheet {
      /* 整体居中后向左回移半列：960/2-720/2=120px 的补偿让
         “正文+边注”组合在视口中轴对称。 */
      --sidenote-column:240px;
      max-width:none;
      margin-inline:auto;
      padding-inline:max(var(--gutter), calc((100% - var(--container-wide))/2))
    }
    .essay-header,
    .article-body,
    .collection-marker,
    .provenance-note,
    .essay-turning,
    .essay-related,
    .essay-exits,
    .essay-footer,
    .private-annotations,
    .reading-resume {
      position:relative;
      margin-inline:auto;
      transform:translateX(calc(var(--sidenote-column)/-2));
      transition:transform .3s ease
    }
    /* 窄于整体布局时取消位移，避免挤压 */
    @media(max-width:1500px) {
      .essay-header,.article-body,.collection-marker,.provenance-note,
      .essay-turning,.essay-related,.essay-exits,.essay-footer,
      .private-annotations,.reading-resume {
        transform:none
      }
    }
    /* 侧注列的常驻视觉存在感：极淡竖线标记设计出来的空间 */
    .article-body::after {
      content:"";
      position:absolute;
      top:0;
      bottom:0;
      left:calc(100% + 47px);
      width:1px;
      pointer-events:none;
      background:linear-gradient(to bottom,
        transparent 0%,
        color-mix(in srgb, var(--border-subtle) 55%, transparent) 12%,
        color-mix(in srgb, var(--border-subtle) 55%, transparent) 88%,
        transparent 100%)
    }
  }

  /* ---- 模块分隔：用间距和身份标识区分功能区块 ---- */

  /* 功能区块统一底色（比正文背景深一档的米灰），纯阅读区块保持干净 */
  .private-annotations,
  .reading-resume,
  .provenance-note {
    background:color-mix(in srgb, var(--surface-subtle) 42%, transparent);
    border-radius:2px;
    padding-inline:clamp(16px, 2.5vw, 28px);
    padding-block:var(--space-5);
    border-top:0
  }

  /* 模块间距明显大于模块内段落间距 */
  .private-annotations { margin-top:clamp(4.5rem, 8vw, 7rem); }
  .provenance-note { margin-top:clamp(3.75rem, 6.5vw, 6rem); }
  .annotation-list li + li { border-top:var(--stroke-hairline) solid var(--border-subtle); }
  .annotation-form { margin-top:var(--space-6); }

  /* 模块小标题：字重、字距、赭红强调色，形成清晰身份标识 */
  .private-annotations .section-kicker,
  .provenance-note .section-kicker,
  .reading-resume .section-kicker,
  .essay-turning .turning-label,
  .essay-related .turning-label {
    display:inline-block;
    padding-bottom:4px;
    border-bottom:2px solid color-mix(in srgb, #7e5544 55%, transparent);
    color:#7e5544;
    font-weight:800;
    letter-spacing:.18em
  }
  html[data-theme="night"] .private-annotations .section-kicker,
  html[data-theme="night"] .provenance-note .section-kicker,
  html[data-theme="night"] .reading-resume .section-kicker,
  html[data-theme="night"] .essay-turning .turning-label,
  html[data-theme="night"] .essay-related .turning-label {
    border-bottom-color:color-mix(in srgb, var(--category-history) 60%, transparent);
    color:var(--category-history)
  }

  /* ---- "写下"页插入图片：内嵌展开区域（方案4）----
     不用弹窗、不依赖 vh、随页面自然滚动，从根上避免"弹窗装不下"。 */
  .quick-toolbar { display:flex; justify-content:flex-end; margin-bottom:var(--space-2) }
  .image-panel {
    margin:var(--space-4) 0;
    padding:var(--space-5);
    background:color-mix(in srgb, var(--surface-subtle) 42%, transparent);
    border:var(--stroke-hairline) solid var(--border-subtle);
    border-radius:3px
  }
  .image-panel-head h2 {
    margin:0 0 var(--space-2);
    font:600 var(--font-size-1)/1.3 var(--font-reading)
  }
  .image-panel-head .modal-note { margin-bottom:var(--space-4) }
  .image-panel label {
    display:block;
    margin-bottom:var(--space-3);
    color:var(--text-secondary);
    font:600 var(--font-size--2)/1.4 var(--font-ui)
  }
  .image-panel input[type=text],
  .image-panel textarea,
  .image-panel input[type=file] {
    inline-size:100%;
    margin-top:var(--space-1);
    padding:9px 11px;
    background:var(--surface-canvas);
    color:var(--text-primary);
    border:var(--stroke-hairline) solid var(--border-strong);
    font:400 var(--font-size--1)/1.5 var(--font-ui)
  }
  .image-panel fieldset.media-purpose {
    margin:0 0 var(--space-3);
    padding:var(--space-3);
    border:var(--stroke-hairline) solid var(--border-subtle)
  }
  .image-panel fieldset label {
    display:block;
    margin-bottom:var(--space-1);
    font-weight:400
  }
  .image-panel-actions {
    display:flex;
    justify-content:flex-end;
    gap:var(--space-3);
    margin-top:var(--space-2)
  }
  .image-panel-actions button:disabled { opacity:.55; cursor:progress }
  .modal-note {
    margin:0 0 var(--space-4);
    color:var(--text-muted);
    font:400 var(--font-size--2)/1.65 var(--font-ui)
  }
  .modal-error {
    color:#a33;
    font:400 var(--font-size--1)/1.5 var(--font-ui)
  }
  html[data-theme="night"] .modal-error { color:#d88 }

  /* ---- 笔记本温度层：暖色 hover、圆角呼吸、便签质感 ----
     只做加法：正文/标题颜色不变，排版度量不动。 */
  .button,
  .admin-page button,
  .entry-card,
  .password-card,
  .image-panel,
  .tag-field,
  .asset-panel,
  .filter-panel,
  .image-modal-card,
  .article-body figure.article-image img {
    border-radius:8px
  }
  .tag-chip { border-radius:999px }
  /* 主按钮 hover 从墨色换成暖橘；焦点环同步 */
  .button:hover,.admin-page button:hover {
    background:var(--color-warm-hover);
    border-color:var(--color-warm-hover)
  }
  a:hover { text-decoration-color:var(--color-warm) }
  /* 链接 hover 下划线用暖色点缀 */
  .plain-link:hover,.return-link a:hover,.filter-link:hover { color:var(--color-warm-hover) }
  /* 标签云 hover 暖色反馈 */
  .cloud-tag:hover { color:var(--color-warm-hover) }

  /* ---- 手账开篇 hero（Julia Evans 式）：问候 + 插画 + 三个按钮 ---- */
  .notebook-hero {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:var(--space-6)
  }
  .notebook-hero .illustration-logo { flex:none }
  .notebook-hero-text { flex:1; min-inline-size:min(320px, 100%) }
  .notebook-greeting {
    margin:0 0 var(--space-2);
    color:var(--color-warm);
    font:600 var(--font-size-0)/1.4 var(--font-ui);
    letter-spacing:.02em
  }
  .notebook-hero-text h1 {
    margin:0 0 var(--space-3);
    font:400 clamp(22px, 3.4vw, 34px)/1.4 var(--font-reading);
    letter-spacing:-.01em
  }
  .notebook-sub {
    margin:0;
    color:var(--text-secondary);
    font:400 var(--font-size-0)/1.8 var(--font-prose)
  }
  .notebook-actions {
    flex:none;
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    min-inline-size:200px
  }
  .notebook-btn {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--space-3);
    padding:12px 18px;
    border:1.5px solid var(--border-strong);
    border-radius:10px;
    color:var(--text-primary);
    text-decoration:none;
    font:600 var(--font-size--1)/1.4 var(--font-ui);
    background:var(--surface-canvas);
    transition:border-color .2s ease, background .2s ease, transform .15s ease
  }
  .notebook-btn:hover {
    border-color:var(--color-warm);
    background:color-mix(in srgb, var(--color-warm-soft) 35%, transparent);
    transform:translateX(2px)
  }
  .notebook-btn-primary {
    background:var(--text-primary);
    color:var(--surface-canvas);
    border-color:var(--text-primary)
  }
  .notebook-btn-primary:hover {
    background:var(--color-warm-hover);
    border-color:var(--color-warm-hover);
    color:#fff
  }
  @media(max-width:767px) {
    .notebook-hero { flex-direction:column; align-items:flex-start }
    .notebook-actions { flex-direction:row; flex-wrap:wrap; min-inline-size:0 }
    .notebook-btn-primary { flex-basis:100% }
  }

  /* ---- 手账装饰层：贴纸感、微倾斜、手绘分隔线 ----
     只作用于 hero 与 about 区块；时间线/分类/标签云保持阮式规整。 */
  .notebook-hero {
    background:color-mix(in srgb, var(--color-pink-soft) 22%, transparent);
    border:1.5px solid var(--border-subtle);
    border-radius:12px;
    padding:var(--space-6);
    transform:rotate(-.6deg);
    box-shadow:2px 3px 0 color-mix(in srgb, var(--color-warm-soft) 60%, transparent)
  }
  .notebook-greeting { transform:rotate(-1deg); display:inline-block }
  .notebook-divider {
    display:block;
    margin:var(--space-5) auto;
    inline-size:min(400px, 80%);
    block-size:auto;
    color:var(--color-warm);
    opacity:.85
  }
  .library-hall-about {
    background:color-mix(in srgb, var(--surface-subtle) 35%, transparent);
    border:1.5px solid var(--border-subtle);
    border-radius:12px;
    padding:var(--space-6);
    transform:rotate(.5deg);
    box-shadow:-2px 3px 0 color-mix(in srgb, var(--color-pencil) 35%, transparent)
  }
  .about-text h2 { transform:rotate(-.8deg); display:inline-block }
  @media(max-width:767px) {
    .notebook-hero, .library-hall-about { transform:none; padding:var(--space-4) }
  }

  /* ---- 插画：手绘 SVG，currentColor 自动适配昼夜主题 ---- */
  .illustration-logo {
    inline-size:clamp(120px, 22vw, 200px);
    block-size:auto;
    color:var(--text-primary)
  }
  .not-found-illustration {
    display:block;
    inline-size:min(300px, 70vw);
    block-size:auto;
    margin:0 auto var(--space-5);
    color:var(--text-secondary)
  }
  .wander-link {
    display:inline-flex;
    align-items:center;
    gap:var(--space-4);
    margin-top:var(--space-4);
    padding:var(--space-3) var(--space-4);
    border:var(--stroke-hairline) solid var(--border-subtle);
    border-radius:8px;
    color:var(--text-primary);
    text-decoration:none;
    background:color-mix(in srgb, var(--color-pink-soft) 30%, transparent);
    transition:border-color .2s ease, transform .2s ease
  }
  .wander-link:hover { border-color:var(--color-warm); transform:translateY(-2px) }
  .wander-link strong { display:block; font:600 var(--font-size--1)/1.4 var(--font-ui) }
  .wander-link small { display:block; color:var(--text-muted); font:400 var(--font-size--2)/1.5 var(--font-ui) }
  /* 关于板块：插画与文字并排，移动端堆叠 */
  .library-hall-statement {
    display:flex;
    align-items:center;
    gap:var(--space-5)
  }
  .library-hall-note { margin-top:var(--space-3); color:var(--text-muted) }
  .library-hall-about {
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    gap:var(--space-6);
    align-items:center;
    margin-top:var(--space-7);
    padding-top:var(--space-6);
    border-top:var(--stroke-hairline) solid var(--border-subtle)
  }
  .about-illustration-wrap { display:grid; gap:var(--space-3) }
  .about-illustration { inline-size:100%; block-size:auto; color:var(--text-secondary) }
  .about-flow { inline-size:88%; block-size:auto; color:var(--text-muted) }
  .about-text h2 { margin:var(--space-2) 0 var(--space-3); font:600 clamp(18px,2.2vw,24px)/1.3 var(--font-reading) }
  .about-text p { margin:0 0 var(--space-3); color:var(--text-secondary); font:400 var(--font-size--1)/1.85 var(--font-prose) }
  @media(max-width:767px) {
    .library-hall-about { grid-template-columns:1fr; gap:var(--space-4) }
    .about-flow { display:none }
    .illustration-logo { margin-inline:auto }
  }

  .deco-moon { font-size:.85em; opacity:.9 }
  .deco-pencil { font-size:.85em; opacity:.75 }
  .deco-coffee { font-size:.85em; opacity:.9 }
  .wander-link small { letter-spacing:.02em }

  /* ---- 微动效 1：首屏问候语/标题/副句依次淡入 ---- */
  @keyframes notebook-rise {
    from { opacity:0; transform:translateY(8px) }
    to   { opacity:1; transform:translateY(0) }
  }
  .notebook-greeting {
    opacity:0;
    animation:notebook-rise .6s ease-out 0s forwards
  }
  #library-hall-title {
    opacity:0;
    animation:notebook-rise .6s ease-out .2s forwards
  }
  .notebook-sub {
    opacity:0;
    animation:notebook-rise .6s ease-out .4s forwards
  }

  /* ---- 微动效 2：随机文章骰子 hover 旋转 15° ---- */
  .wander-illustration {
    inline-size:64px;
    block-size:64px;
    color:var(--text-secondary);
    transform-origin:center;
    transition:transform .3s ease-out
  }
  .wander-link:hover .wander-illustration { transform:rotate(15deg) }

  /* ---- 微动效 3：插画 hover 放大（仅桌面端）---- */
  .illustration-logo,
  .about-illustration,
  .about-flow {
    transform-origin:center;
    transition:transform .3s ease-out
  }
  @media(hover:hover) and (pointer:fine) {
    .illustration-logo:hover,
    .about-illustration:hover,
    .about-flow:hover { transform:scale(1.05) }
  }

  /* ---- 尊重 prefers-reduced-motion ---- */
  @media(prefers-reduced-motion:reduce) {
    .notebook-greeting,
    #library-hall-title,
    .notebook-sub { opacity:1; animation:none }
    .wander-illustration,
    .illustration-logo,
    .about-illustration,
    .about-flow { transition:none }
    .wander-link:hover .wander-illustration,
    .illustration-logo:hover,
    .about-illustration:hover,
    .about-flow:hover { transform:none }
  }

  /* ---- 签退区：手账最后一页（订阅/签名/日期）---- */
  .about-signoff {
    margin-top:var(--space-7);
    padding-top:var(--space-5);
    border-top:var(--stroke-hairline) dashed var(--border-subtle);
    text-align:center
  }
  .signoff-actions {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:baseline;
    gap:var(--space-3);
    margin-bottom:var(--space-5);
    color:var(--text-secondary)
  }
  .signoff-link {
    color:var(--text-secondary);
    font:500 14px/1 var(--font-reading);
    letter-spacing:.04em;
    text-decoration:none;
    border-bottom:1px dashed var(--border-subtle);
    padding-bottom:1px;
    transition:color .2s, border-color .2s
  }
  .signoff-link:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }
  .signoff-link.is-static { color:var(--text-muted); border-bottom-color:transparent; cursor:default }
  .signoff-dot { color:var(--text-muted); font-size:12px }

  .signoff-card {
    display:inline-flex;
    align-items:center;
    gap:var(--space-3);
    padding:var(--space-2) var(--space-4);
    background:var(--bg-soft, rgba(232, 184, 138, .08));
    border-radius:14px;
    transform:rotate(-.6deg)
  }
  .signoff-mark {
    inline-size:56px;
    block-size:56px;
    color:var(--accent-warm);
    opacity:.85
  }
  .signoff-line {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    margin:0;
    line-height:1.5
  }
  .signoff-handwriting {
    color:var(--text-primary);
    font:italic 600 16px/1.3 var(--font-reading);
    letter-spacing:.08em
  }
  .signoff-date {
    color:var(--text-muted);
    font:400 11px/1 var(--font-reading);
    letter-spacing:.15em;
    margin-top:2px
  }
  @media(max-width:767px) {
    .signoff-actions { gap:var(--space-2) }
    .signoff-link { font-size:13px }
    .signoff-card { transform:none; padding:var(--space-2) var(--space-3) }
    .signoff-mark { inline-size:48px; block-size:48px }
  }

  /* ---- 静室代表作：3+3 网格，前 3 篇带插图 ---- */
  .library-hall-featured {
    margin-top:var(--space-7);
    padding-top:var(--space-5);
    border-top:var(--stroke-hairline) solid var(--border-subtle)
  }
  .featured-grid {
    list-style:none;
    margin:var(--space-5) 0 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-4)
  }
  .featured-card {
    background:var(--bg-card, rgba(255, 251, 244, .7));
    border:1px solid var(--border-subtle);
    border-radius:8px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
  }
  .featured-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(120, 80, 40, .12);
    border-color:var(--accent-warm)
  }
  .featured-link {
    display:flex;
    flex-direction:column;
    color:inherit;
    text-decoration:none;
    block-size:100%
  }
  .featured-art {
    display:block;
    aspect-ratio:2/1;
    background:var(--bg-soft, rgba(232, 184, 138, .1));
    overflow:hidden
  }
  .featured-art img {
    inline-size:100%;
    block-size:100%;
    object-fit:contain;
    color:var(--text-primary);
    opacity:.9
  }
  .featured-body {
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-3) var(--space-4);
    flex:1
  }
  .featured-number {
    font:500 10px/1 var(--font-ui);
    letter-spacing:.12em;
    color:var(--text-muted)
  }
  .featured-title {
    font:600 15px/1.4 var(--font-reading);
    color:var(--text-primary);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
  }
  .featured-card--with-art .featured-title { font-size:16px }
  .featured-excerpt {
    font:400 12px/1.6 var(--font-prose);
    color:var(--text-secondary);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
  }
  .featured-meta {
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-2);
    padding-top:var(--space-2);
    font:500 11px/1 var(--font-ui);
    color:var(--text-muted)
  }
  .featured-category {
    padding:2px 8px;
    border-radius:99px;
    background:var(--bg-soft, rgba(232, 184, 138, .15));
    color:var(--text-secondary)
  }
  @media(max-width:900px) {
    .featured-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) }
  }
  @media(max-width:600px) {
    .featured-grid { grid-template-columns:1fr; gap:var(--space-3) }
    .featured-art { aspect-ratio:2.4/1 }
  }

  /* ---- 专栏页：手账风封面 + 卡片列表 ---- */
  .series-page {
    max-width:980px;
    margin:0 auto;
    padding:var(--space-5) var(--gutter) var(--space-7)
  }
  .series-hero {
    display:grid;
    grid-template-columns:minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap:var(--space-6);
    align-items:center;
    margin-bottom:var(--space-7);
    padding:var(--space-5) var(--space-4);
    background:linear-gradient(180deg, rgba(232, 184, 138, .07) 0%, transparent 100%);
    border-radius:14px;
    border:1px dashed var(--border-subtle)
  }
  .series-art {
    text-align:center
  }
  .series-art img {
    inline-size:100%;
    max-width:300px;
    block-size:auto;
    color:var(--text-primary);
    opacity:.92;
    transform:rotate(-1.5deg)
  }
  .series-hero-text { display:flex; flex-direction:column; gap:var(--space-3) }
  .series-hero h1 {
    margin:0;
    font:600 clamp(32px, 4.5vw, 48px)/1.1 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .series-tagline {
    margin:0;
    font:italic 400 15px/1.6 var(--font-reading);
    color:var(--text-secondary);
    letter-spacing:.02em
  }
  .series-emphasis {
    color:var(--accent-warm);
    font-weight:600;
    text-decoration:underline;
    text-decoration-style:wavy;
    text-underline-offset:3px;
    text-decoration-color:var(--accent-warm)
  }
  .series-intro p {
    margin:0 0 var(--space-2);
    color:var(--text-secondary);
    font:400 14px/1.75 var(--font-prose)
  }
  .series-count {
    margin:var(--space-2) 0 0;
    color:var(--text-muted);
    font:500 12px/1 var(--font-ui);
    letter-spacing:.06em
  }
  .series-count b { color:var(--accent-warm); font-weight:600 }
  .series-crosslink { margin:var(--space-2) 0 0 }
  .series-crosslink a {
    color:var(--text-secondary);
    text-decoration:none;
    border-bottom:1px dashed var(--border-subtle);
    padding-bottom:1px;
    font:500 13px/1 var(--font-ui)
  }
  .series-crosslink a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }

  /* ---- 慢读变体：淡墨绿、更安静、留白多 ---- */
  .series-hero--慢读 {
    background:linear-gradient(180deg, rgba(120, 150, 130, .06) 0%, transparent 100%);
    border-color:rgba(120, 150, 130, .3);
    padding-block:var(--space-6)
  }
  .series-hero--慢读 .series-art img {
    transform:rotate(1deg);
    color:#5e7a68
  }
  .series-hero--慢读 h1 {
    color:#3a4f44;
    letter-spacing:.06em
  }
  .series-hero--慢读 .series-tagline {
    color:#56695e;
    font-style:italic
  }
  .series-hero--慢读 .series-count b { color:#5e7a68 }
  .series-hero--慢读 .series-crosslink a:hover { color:#5e7a68; border-bottom-color:#5e7a68 }
  .series-hero--慢读 .series-card:hover {
    border-color:#7a9686;
    box-shadow:0 6px 18px rgba(60, 90, 70, .12)
  }
  .series-hero--慢读 .series-card-category { background:rgba(120, 150, 130, .12) }
  .series-hero--慢读 .series-card-featured { color:#5e7a68 }
  .series-hero--慢读 .series-back a:hover { color:#5e7a68; border-bottom-color:#5e7a68 }

  .series-list {
    list-style:none;
    margin:0 0 var(--space-6);
    padding:0;
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-4)
  }
  .series-card {
    background:var(--bg-card, rgba(255, 251, 244, .7));
    border:1px solid var(--border-subtle);
    border-radius:8px;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
  }
  .series-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(120, 80, 40, .12);
    border-color:var(--accent-warm)
  }
  .series-card-link {
    display:flex;
    flex-direction:column;
    gap:var(--space-2);
    padding:var(--space-3) var(--space-4) var(--space-4);
    color:inherit;
    text-decoration:none;
    block-size:100%
  }
  .series-card-no {
    font:500 10px/1 var(--font-ui);
    letter-spacing:.12em;
    color:var(--text-muted)
  }
  .series-card-title {
    font:600 16px/1.4 var(--font-reading);
    color:var(--text-primary);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden
  }
  .series-card-excerpt {
    font:400 12px/1.65 var(--font-prose);
    color:var(--text-secondary);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden
  }
  .series-card-meta {
    margin-top:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:var(--space-2);
    padding-top:var(--space-2);
    font:500 11px/1 var(--font-ui);
    color:var(--text-muted)
  }
  .series-card-category {
    padding:2px 8px;
    border-radius:99px;
    background:var(--bg-soft, rgba(232, 184, 138, .15));
    color:var(--text-secondary)
  }
  .series-card-featured {
    color:var(--accent-warm);
    font-size:14px;
    line-height:1
  }
  .series-back {
    text-align:center;
    color:var(--text-muted)
  }
  .series-back a {
    color:var(--text-secondary);
    text-decoration:none;
    border-bottom:1px dashed var(--border-subtle);
    padding-bottom:1px
  }
  .series-back a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }
  @media(max-width:760px) {
    .series-hero { grid-template-columns:1fr; gap:var(--space-4); padding:var(--space-4) }
    .series-art img { max-width:200px }
    .series-list { grid-template-columns:1fr }
  }

  /* ---- 馆主的小习惯：手账贴纸墙 ---- */
  .library-hall-corner {
    margin-top:var(--space-5);
    padding-block:var(--space-4)
  }
  .corner-stickers {
    list-style:none;
    margin:var(--space-3) 0 0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2);
    justify-content:center
  }
  .corner-sticker {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    background:rgba(255, 247, 232, .9);
    border:1px dashed rgba(180, 120, 60, .35);
    border-radius:6px;
    color:var(--text-secondary);
    font:400 13px/1.4 var(--font-reading);
    letter-spacing:.02em;
    transform:rotate(-1deg);
    transition:transform .25s ease, background .25s ease
  }
  .corner-sticker:nth-child(even) { transform:rotate(1.2deg); background:rgba(252, 240, 220, .85) }
  .corner-sticker:nth-child(3n) { transform:rotate(-.4deg) }
  .corner-sticker:hover {
    transform:rotate(0) scale(1.04);
    background:rgba(255, 235, 200, .95)
  }
  .corner-emoji {
    font-size:14px;
    line-height:1;
    filter:saturate(.95)
  }

  /* ---- 系统 A：「现在」3 卡 ---- */
  .library-hall-now {
    margin-top:var(--space-6);
    padding-block:var(--space-4)
  }
  .now-grid {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-4)
  }
  .now-card {
    background:var(--bg-card, rgba(255, 251, 244, .7));
    border:1px solid var(--border-subtle);
    border-radius:10px;
    padding:var(--space-4);
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease
  }
  .now-card:hover {
    transform:translateY(-3px);
    box-shadow:0 6px 18px rgba(120, 80, 40, .1);
    border-color:var(--accent-warm)
  }
  .now-card-title {
    margin:0 0 var(--space-3);
    font:600 15px/1.4 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .now-card-empty {
    margin:0;
    padding:var(--space-4) 0;
    color:var(--text-muted);
    font:italic 400 13px/1.6 var(--font-reading);
    text-align:center
  }
  /* 现在在读：书 */
  .now-books { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3) }
  .now-book { display:flex; gap:var(--space-3); align-items:flex-start }
  .now-book-cover {
    flex:0 0 auto;
    inline-size:42px;
    block-size:56px;
    border-radius:3px;
    background:var(--accent-warm);
    box-shadow:1px 1px 0 rgba(0,0,0,.08)
  }
  .now-book-meta { display:flex; flex-direction:column; gap:2px; min-width:0; padding-top:2px }
  .now-book-title { color:var(--text-primary); font:600 13px/1.3 var(--font-reading); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
  .now-book-author { color:var(--text-muted); font:400 11px/1 var(--font-ui); letter-spacing:.04em }
  .now-book-note { color:var(--text-secondary); font:italic 400 12px/1.5 var(--font-prose); margin-top:4px }
  /* 现在在听：列表 */
  .now-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-2) }
  .now-list li { padding-left:14px; position:relative; color:var(--text-secondary); font:400 13px/1.65 var(--font-prose) }
  .now-list li::before { content:"·"; position:absolute; left:0; color:var(--accent-warm); font-weight:700 }
  /* 现在在想：问号列表，更窄、更斜 */
  .now-thoughts { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3) }
  .now-thoughts li { padding:0; color:var(--text-secondary); font:italic 400 13px/1.7 var(--font-prose); border-left:2px solid var(--accent-warm); padding-left:10px }

  @media(max-width:900px) { .now-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
  @media(max-width:600px) { .now-grid { grid-template-columns:1fr; gap:var(--space-3) } }

  /* ---- 系统 B：所有入口（4 张）---- */
  .library-hall-entries {
    margin-top:var(--space-7);
    padding-top:var(--space-5);
    border-top:var(--stroke-hairline) solid var(--border-subtle)
  }
  .entries-title {
    margin:0 0 var(--space-4);
    font:600 16px/1.4 var(--font-reading);
    color:var(--text-primary);
    text-align:center;
    letter-spacing:.06em
  }
  .entries-grid {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--space-3)
  }
  .entry-card { margin:0 }
  .entry-link, .entry-link.is-static {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    padding:var(--space-3) var(--space-2);
    background:rgba(255, 247, 232, .6);
    border:1px dashed rgba(180, 120, 60, .3);
    border-radius:8px;
    color:inherit;
    text-decoration:none;
    text-align:center;
    transition:transform .2s ease, background .2s ease, border-color .2s ease
  }
  .entry-link:hover {
    transform:translateY(-2px) rotate(-.5deg);
    background:rgba(255, 235, 200, .85);
    border-color:var(--accent-warm)
  }
  .entry-link.is-static { cursor:default; color:var(--text-muted) }
  .entry-icon { font-size:22px; line-height:1 }
  .entry-name { font:600 13px/1.3 var(--font-reading); color:var(--text-primary) }
  .entry-why { font:400 11px/1.5 var(--font-prose); color:var(--text-muted) }
  @media(max-width:900px) { .entries-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
  @media(max-width:480px) { .entries-grid { grid-template-columns:1fr } }

  /* ---- 系统 C：边界与承诺（嵌在 about 内部）---- */
  .about-boundaries {
    margin-top:var(--space-5);
    padding-top:var(--space-4);
    border-top:1px dashed var(--border-subtle)
  }
  .about-boundaries-title {
    margin:0 0 var(--space-3);
    font:600 14px/1.4 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .about-boundaries-list {
    margin:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-3)
  }
  .boundary-item {
    display:grid;
    grid-template-columns:120px minmax(0, 1fr);
    gap:var(--space-3);
    align-items:baseline
  }
  .boundary-item dt {
    color:var(--text-secondary);
    font:500 12px/1.4 var(--font-ui);
    letter-spacing:.05em
  }
  .boundary-item dd {
    margin:0;
    color:var(--text-secondary);
    font:400 13px/1.7 var(--font-prose)
  }
  @media(max-width:600px) { .boundary-item { grid-template-columns:1fr; gap:4px } }

  /* ---- 联系页：留白 + 安静 ---- */
  .contact-page {
    max-width:520px;
    margin:0 auto;
    padding:var(--space-6) var(--gutter) var(--space-7);
    text-align:center
  }
  .contact-art { font-size:42px; margin-bottom:var(--space-3); opacity:.7 }
  .contact-page h1 {
    margin:0 0 var(--space-5);
    font:600 clamp(24px, 3.6vw, 32px)/1.3 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .contact-line { margin:0 0 var(--space-3); color:var(--text-secondary); font:400 14px/1.75 var(--font-prose) }
  .contact-quiet { margin:0 0 var(--space-2); color:var(--text-muted); font:italic 400 13px/1.7 var(--font-prose) }
  .contact-rss { margin-top:var(--space-5) !important; padding-top:var(--space-4); border-top:1px dashed var(--border-subtle); font-size:13px !important }
  .contact-mail { color:var(--accent-warm); text-decoration:none; border-bottom:1px dashed var(--accent-warm); padding-bottom:1px }
  .contact-back { margin-top:var(--space-6); color:var(--text-muted) }
  .contact-back a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dashed var(--border-subtle); padding-bottom:1px }
  .contact-back a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }

  /* ---- /why-rss 长文页 ---- */
  .why-rss-page {
    max-width:680px;
    margin:0 auto;
    padding:var(--space-6) var(--gutter) var(--space-7)
  }
  .why-rss-hero {
    text-align:center;
    margin-bottom:var(--space-6)
  }
  .why-rss-art {
    display:block;
    inline-size:100%;
    max-width:360px;
    block-size:auto;
    margin:0 auto var(--space-3);
    color:var(--text-primary);
    opacity:.85;
    transform:rotate(-1deg)
  }
  .why-rss-page h1 {
    margin:0 0 var(--space-2);
    font:600 clamp(28px, 4vw, 38px)/1.25 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .why-rss-sub {
    margin:0 0 var(--space-5);
    color:var(--text-secondary);
    font:italic 400 15px/1.5 var(--font-reading)
  }
  .why-rss-body h2 {
    margin:var(--space-6) 0 var(--space-3);
    color:var(--text-primary);
    font:600 18px/1.4 var(--font-reading);
    border-top:1px dashed var(--border-subtle);
    padding-top:var(--space-4)
  }
  .why-rss-body h2:first-of-type { border-top:0; padding-top:0; margin-top:0 }
  .why-rss-body p { margin:0 0 var(--space-3); color:var(--text-secondary); font:400 15px/1.85 var(--font-prose) }
  .why-rss-body p b { color:var(--text-primary); font-weight:600 }
  .why-rss-body ul { margin:0 0 var(--space-3); padding-left:1.5em; color:var(--text-secondary); font:400 15px/1.85 var(--font-prose) }
  .why-rss-body li { margin-bottom:6px }
  .why-rss-body code {
    font:400 13px/1.4 ui-monospace, monospace;
    background:var(--bg-soft, rgba(232, 184, 138, .1));
    padding:1px 6px;
    border-radius:3px;
    color:var(--text-primary)
  }
  .why-rss-body a {
    color:var(--accent-warm);
    text-decoration:underline;
    text-decoration-style:dashed;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    text-decoration-color:rgba(200, 138, 74, .55)
  }
  .why-rss-body a:hover { text-decoration-style:solid; text-decoration-thickness:2px }
  .why-rss-back { margin-top:var(--space-7); text-align:center; color:var(--text-muted) }
  .why-rss-back a {
    color:var(--text-secondary);
    text-decoration:none;
    border-bottom:1px dashed var(--border-subtle);
    padding-bottom:1px
  }
  .why-rss-back a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }

  /* ---- D.3 反算法 / D.4 数据收集 / D.6 徽章 ---- */
  .about-anti-algorithm, .about-data {
    margin-top:var(--space-5);
    padding-top:var(--space-4);
    border-top:1px dashed var(--border-subtle)
  }
  .about-anti-algorithm-title, .about-data-title {
    margin:0 0 var(--space-3);
    font:600 14px/1.4 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .about-anti-algorithm-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-2)
  }
  .about-anti-algorithm-list li {
    padding-left:14px;
    position:relative;
    color:var(--text-secondary);
    font:400 13px/1.7 var(--font-prose)
  }
  .about-anti-algorithm-list li::before {
    content:"·";
    position:absolute;
    left:0;
    color:var(--accent-warm);
    font-weight:700
  }
  .about-anti-algorithm-list b { color:var(--text-primary); font-weight:600 }
  .about-data p { margin:0 0 var(--space-2); color:var(--text-secondary); font:400 13px/1.7 var(--font-prose) }
  .about-data p b { color:var(--text-primary); font-weight:600 }
  /* D.6 无追踪徽章 */
  .about-no-tracking-badge {
    margin:var(--space-5) 0 0;
    padding:var(--space-3) var(--space-4);
    text-align:center;
    color:var(--accent-warm);
    font:600 13px/1.4 var(--font-ui);
    letter-spacing:.08em;
    border-top:1px dashed var(--border-subtle)
  }

  /* ---- 新首页（Julia Evans + 阮一峰风）---- */
  .library-hall-head--minimal {
    margin:0 0 var(--space-3);
    padding:var(--space-5) 0 var(--space-3)
  }
  .notebook-greeting-main {
    margin:0 0 var(--space-2);
    font:italic 600 clamp(28px, 4vw, 38px)/1.25 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.02em
  }
  .notebook-sub-main {
    margin:0;
    color:var(--text-secondary);
    font:400 15px/1.6 var(--font-reading)
  }
  .top-nav {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-4);
    padding:var(--space-3) 0;
    margin-bottom:var(--space-5);
    border-block:1px solid var(--border-subtle)
  }
  .top-nav-link {
    color:var(--text-secondary);
    text-decoration:none;
    font:500 14px/1 var(--font-ui);
    letter-spacing:.04em;
    padding:2px 0
  }
  .top-nav-link:hover { color:var(--accent-warm) }

  /* ---- 筛选框（高亮/淡化，不隐藏）---- */
  .library-filter { margin:0 0 4px }
  .library-filter-input {
    inline-size:100%;
    max-inline-size:520px;
    padding:8px 12px;
    background:var(--bg-soft, rgba(232, 184, 138, .06));
    border:1px solid var(--border-subtle);
    border-radius:6px;
    color:var(--text-primary);
    font:400 13px/1.4 var(--font-reading);
    letter-spacing:.02em;
    transition:border-color .2s ease, background .2s ease
  }
  .library-filter-input:focus {
    outline:none;
    border-color:var(--accent-warm);
    background:var(--bg-card, rgba(255, 251, 244, .9))
  }
  .library-filter-input::placeholder { color:var(--text-muted); font-style:italic }
  .library-filter-hint {
    margin:0 0 var(--space-4);
    color:var(--text-muted);
    font:400 12px/1.5 var(--font-ui);
    min-block-size:18px
  }
  /* 筛选：命中的不淡，未命中的淡化（不 display:none，Ctrl+F 仍能找到） */
  .recent-link.is-dim, .starred-link.is-dim, .index-post-link.is-dim {
    opacity:.18;
    transition:opacity .15s ease
  }
  .recent-link.is-dim:hover, .starred-link.is-dim:hover, .index-post-link.is-dim:hover {
    opacity:.4
  }
  .recent-link, .starred-link, .index-post-link { transition:opacity .15s ease }

  /* ---- 最近 10 篇（纯列表）---- */
  .recent-block { margin-bottom:var(--space-5) }
  .recent-title {
    margin:0 0 var(--space-2);
    font:600 14px/1.3 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.06em
  }
  .recent-list { list-style:none; margin:0; padding:0 }
  .recent-item { margin:0 }
  .recent-link {
    display:grid;
    grid-template-columns:88px 1fr;
    gap:var(--space-2);
    align-items:baseline;
    padding:3px 0;
    color:inherit;
    text-decoration:none;
    font:400 13px/1.5 var(--font-reading)
  }
  .recent-link:hover { color:var(--accent-warm) }
  .recent-date { color:var(--text-muted); font:400 14px/1.5 ui-monospace, monospace }
  .recent-post-title { color:var(--text-secondary) }
  .recent-link:hover .recent-post-title { color:var(--accent-warm) }

  /* ---- "现在在想" 1 行（缩）---- */
  .now-thoughts-inline {
    margin:0 0 var(--space-3);
    padding:var(--space-2) 0;
    color:var(--text-muted);
    font:italic 400 13px/1.6 var(--font-reading);
    border-block:1px dashed var(--border-subtle)
  }
  .now-thoughts-inline a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dashed var(--border-subtle); padding-bottom:1px }
  .now-thoughts-inline a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }

  /* ---- 规模数字（阮一峰风）---- */
  .scale-line {
    margin:0 0 var(--space-4);
    color:var(--text-muted);
    font:400 12px/1.6 var(--font-ui);
    letter-spacing:.04em
  }

  /* ---- 分类索引 TOC（纯文字）---- */
  .index-toc { margin:0 0 var(--space-4) }
  .index-toc-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-1) var(--space-3)
  }
  .index-toc-link {
    color:var(--text-secondary);
    text-decoration:none;
    font:400 13px/1.5 var(--font-reading);
    padding:2px 0
  }
  .index-toc-link:hover { color:var(--accent-warm) }

  .starred-block {
    margin-bottom:var(--space-7);
    padding-bottom:var(--space-4);
    border-bottom:1px solid var(--border-subtle)
  }
  .starred-title {
    margin:0 0 var(--space-2);
    font:600 16px/1.4 var(--font-reading);
    color:var(--accent-warm);
    letter-spacing:.06em
  }
  .starred-sub { margin:0 0 var(--space-3); color:var(--text-muted); font:400 13px/1.5 var(--font-reading) }
  .starred-sub a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dashed var(--border-subtle) }
  .starred-sub a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }
  .starred-list {
    list-style:none;
    margin:0;
    padding:0;
    columns:2;
    column-gap:var(--space-5)
  }
  .starred-item {
    margin:0 0 6px;
    break-inside:avoid
  }
  .starred-link {
    display:flex;
    align-items:baseline;
    gap:8px;
    padding:2px 0;
    color:inherit;
    text-decoration:none
  }
  .starred-link:hover { color:var(--accent-warm) }
  .starred-star { color:var(--accent-warm); flex:0 0 auto }
  .starred-title-text { color:var(--text-primary); font:500 14px/1.4 var(--font-reading); flex:1 1 auto }
  .starred-cat {
    font:400 11px/1 var(--font-ui);
    color:var(--text-muted);
    padding:2px 6px;
    border-radius:3px;
    background:var(--bg-soft, rgba(232, 184, 138, .12))
  }
  .starred-item--featured .starred-title-text { font-weight:600 }
  .starred-extra { margin:var(--space-3) 0 0; color:var(--text-secondary); font:400 13px/1.5 var(--font-reading) }
  .starred-extra a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dashed var(--border-subtle) }
  .starred-extra a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }
  @media(max-width:600px) { .starred-list { columns:1 } }

  .full-index { margin-bottom:var(--space-6) }
  .index-title {
    margin:0 0 var(--space-3);
    font:600 16px/1.4 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.06em
  }
  .index-toc {
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-2) var(--space-3);
    padding:var(--space-3);
    margin-bottom:var(--space-5);
    background:var(--bg-soft, rgba(232, 184, 138, .05));
    border-radius:6px
  }
  .index-toc-link {
    display:inline-flex;
    align-items:center;
    gap:4px;
    color:var(--text-secondary);
    text-decoration:none;
    font:500 13px/1.3 var(--font-reading);
    padding:2px 0
  }
  .index-toc-link:hover { color:var(--accent-warm) }
  .index-toc-link small { color:var(--text-muted); font-weight:400 }
  .index-toc-color {
    inline-size:10px;
    block-size:10px;
    border-radius:2px;
    display:inline-block
  }
  .index-categories {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-5)
  }
  .index-category { scroll-margin-top:80px }
  .index-cat-details { margin:0 }
  .index-cat-details > summary {
    list-style:none;
    cursor:pointer;
    padding:6px 0;
    margin:0 0 var(--space-2);
    border-bottom:1px solid var(--border-subtle)
  }
  .index-cat-details > summary::-webkit-details-marker { display:none }
  .index-cat-details > summary::before {
    content:"▸";
    display:inline-block;
    width:14px;
    color:var(--text-muted);
    font-size:11px;
    transition:transform .15s ease
  }
  .index-cat-details[open] > summary::before { transform:rotate(90deg) }
  .index-cat-details > summary:hover::before { color:var(--accent-warm) }
  .index-cat-name { display:inline-flex; align-items:baseline; gap:var(--space-2); font:600 15px/1.3 var(--font-reading); color:var(--text-primary); letter-spacing:.04em }
  .index-cat-color {
    inline-size:12px;
    block-size:12px;
    border-radius:3px;
    display:inline-block
  }
  .index-cat-count { color:var(--text-muted); font:400 12px/1 var(--font-ui) }
  .index-posts {
    list-style:none;
    margin:0;
    padding:0;
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-1) 0
  }
  .index-post { margin:0 }
  .index-post-link {
    display:grid;
    grid-template-columns:88px 1fr;
    gap:var(--space-3);
    align-items:baseline;
    padding:6px 0;
    color:inherit;
    text-decoration:none;
    font:400 1.125rem/1.5 var(--font-reading);
    border-bottom:1px dotted transparent
  }
  .index-post-link:hover { background:var(--bg-soft, rgba(232, 184, 138, .08)); border-radius:3px }
  .index-post-date { color:var(--text-muted); font:400 14px/1.5 ui-monospace, monospace }
  .index-post-title { color:var(--text-secondary) }
  .index-post-link:hover .index-post-title { color:var(--accent-warm) }
  .index-post-star { color:var(--accent-warm); font-size:11px }
  .index-post--starred .index-post-title { color:var(--text-primary); font-weight:600 }
  @media(max-width:760px) {
    .index-post-link { grid-template-columns:72px 1fr }
  }

  .library-hall-footer {
    margin-top:var(--space-7);
    padding-top:var(--space-4);
    border-top:1px dashed var(--border-subtle);
    text-align:center;
    color:var(--text-muted);
    font:400 12px/1.8 var(--font-ui)
  }
  .library-hall-footer a { color:var(--text-secondary); text-decoration:none; border-bottom:1px dashed var(--border-subtle); padding-bottom:1px }
  .library-hall-footer a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }
  .footer-sep { color:var(--text-muted); margin:0 4px }

  /* ---- 人格化推荐位（Julia 风页脚）---- */
  .persona-recs {
    margin-top:var(--space-7);
    padding-top:var(--space-4);
    border-top:1px dashed var(--border-subtle)
  }
  .persona-recs-title {
    margin:0 0 var(--space-3);
    font:italic 600 14px/1.4 var(--font-reading);
    color:var(--text-primary);
    letter-spacing:.04em
  }
  .persona-recs-list {
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px
  }
  .persona-recs-list li { font:400 13px/1.7 var(--font-prose); color:var(--text-secondary) }
  .persona-recs-list a { color:var(--text-primary); text-decoration:none; border-bottom:1px dashed var(--border-subtle); padding-bottom:1px; font-weight:500 }
  .persona-recs-list a:hover { color:var(--accent-warm); border-bottom-color:var(--accent-warm) }

  /* ---- 首页时间线：阮式简洁列表（日期+标题+一行摘要）---- */
  .library-hall-timeline { margin-top:var(--space-7) }
  .timeline-list {
    margin:0;
    padding:0;
    list-style:none
  }
  .timeline-entry {
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    gap:var(--space-2) var(--space-5);
    padding:14px 4px;
    border-bottom:1px dashed var(--border-subtle)
  }
  .timeline-entry:last-child { border-bottom:0 }
  .timeline-entry time {
    color:var(--text-muted);
    font:400 var(--font-size--2)/1.9 var(--font-ui);
    letter-spacing:.02em;
    white-space:nowrap;
    padding-top:3px
  }
  .timeline-title {
    color:var(--text-primary);
    text-decoration:none;
    font:500 clamp(15px,1.6vw,17px)/1.55 var(--font-reading)
  }
  .timeline-title:hover { color:var(--color-warm-hover) }
  .timeline-excerpt {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:4px 0 0;
    color:var(--text-muted);
    font:400 var(--font-size--1)/1.65 var(--font-ui)
  }

  /* ---- 文章配图：自适应宽度 + lightbox ---- */
  .article-body figure.article-image {
    margin:2.2em auto;
    max-inline-size:100%;
    overflow:hidden
  }
  .article-body figure.article-image img {
    display:block;
    inline-size:100%;
    height:auto;
    border-radius:2px;
    cursor:zoom-in
  }
  .article-body figure.article-image img:hover { opacity:.94 }
  .lightbox-overlay {
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    padding:var(--space-6);
    background:color-mix(in srgb, #000 82%, transparent);
    cursor:zoom-out
  }
  .lightbox-overlay[hidden] { display:none }
  .lightbox-overlay img {
    max-inline-size:min(96vw, 1400px);
    max-block-size:92vh;
    object-fit:contain;
    box-shadow:0 8px 60px rgba(0,0,0,.5)
  }
}