/* ============================================================
   笔迹 biji.bj — 基础设计系统
   ============================================================ */

:root {
  /* 底色家族先各存一份「不染」的原色，护眼纸色只在它上面再染一层。
     导航、卡片、写作纸、公开页、分享页、手册页都取 --bg / --surface 这一组值，
     所以染这一层是整页一起变，不是只换编辑框那张纸。 */
  --bg-base: #f6f4ef;
  --bg-deep-base: #efece5;
  --surface-base: #fffefb;
  --surface-2-base: #faf8f3;
  --surface-3-base: #f1eee6;
  --surface-4-base: #e9e5dc;
  --line-base: #e7e2d7;
  --line-strong-base: #d7d0c2;
  --code-bg-base: #1e1c22;
  --code-line-base: #2c2933;
  --bg: var(--bg-base);
  --bg-deep: var(--bg-deep-base);
  --surface: var(--surface-base);
  --surface-2: var(--surface-2-base);
  --surface-3: var(--surface-3-base);
  --surface-4: var(--surface-4-base);
  --line: var(--line-base);
  --line-strong: var(--line-strong-base);
  --ink: #23211f;
  --ink-2: #4d4843;
  --muted-base: #756d62;
  --muted: var(--muted-base);
  --faint: #9a9184;
  --accent: #5b4be0;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 6%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 84%, #000 16%);
  --coral: #ff7a5c;
  --danger: #cc4a42;
  --danger-soft: rgba(204, 74, 66, 0.1);
  --ok: #2f8a63;
  --ok-soft: rgba(47, 138, 99, 0.12);
  --shadow-sm: 0 1px 2px rgba(41, 35, 24, 0.05);
  --shadow-md: 0 12px 32px -16px rgba(41, 35, 24, 0.22);
  --shadow-lg: 0 36px 90px -36px rgba(41, 35, 24, 0.32);
  --radius-sm: 9px;
  --radius: 14px;
  --radius-lg: 22px;
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-mono: "SFMono-Regular", "Cascadia Code", "JetBrains Mono", Consolas, "Liberation Mono", monospace;
  /* 手写一档：楷/行楷优先，系统没有就退到宋 serif，绝不下载外部字体 */
  --font-hand: "Xingkai SC", "STXingkai", "Kaiti SC", "STKaiti", "KaiTi", "DFKai-SB", "Noto Serif SC", serif;
  --paper-y: 0px;
  /* 自己调一张纸时交上来的那个颜色；只有 data-tint="custom" 会读到它 */
  --tint-custom: #e6ecdd;
  /* 夜间台灯灯泡的颜色：暖黑档默认琥珀，选了护眼纸色会跟着换成同族的光 */
  --lamp: #f6c85f;
  --editor-size: 16px;
  --paper-width: 760px;
  --editor-font: var(--font-ui);
  --editor-leading: 1.9;
  --nav-h: 72px;
  --code-bg: var(--code-bg-base);
  --code-line: var(--code-line-base);
  --code-ink: #e6e2ee;
  --code-muted: #8a8298;
}

[data-theme="dark"] {
  --bg-base: #141315;
  --bg-deep-base: #0f0e10;
  --surface-base: #1b1a1d;
  --surface-2-base: #201f23;
  --surface-3-base: #27252a;
  --surface-4-base: #302d33;
  --line-base: #2c2a2f;
  --line-strong-base: #3b373e;
  --ink: #ece8e0;
  --ink-2: #c8c1b6;
  --muted-base: #938b80;
  --faint: #6e675e;
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-softer: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-strong: color-mix(in srgb, var(--accent) 62%, #fff 38%);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 14px 36px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 40px 100px -36px rgba(0, 0, 0, 0.75);
  --danger-soft: rgba(204, 74, 66, 0.18);
  --ok-soft: rgba(47, 138, 99, 0.2);
  --code-bg-base: #100f13;
  --code-line-base: #2a272f;
  --code-ink: #d9d3e4;
  --code-muted: #7d7590;
}

/* 纯黑：去掉纸上的暖气，换成干净的中性灰；适合 OLED 屏与深夜 */
[data-theme="dark"][data-dark="pure"] {
  --bg-base: #0b0b0c;
  --bg-deep-base: #070708;
  --surface-base: #131315;
  --surface-2-base: #171719;
  --surface-3-base: #1d1d20;
  --surface-4-base: #252528;
  --ink: #ededee;
  --ink-2: #c3c3c6;
  --muted-base: #8c8c90;
  --faint: #67676b;
  --line-base: #232326;
  --line-strong-base: #323236;
  --code-bg-base: #0a0a0b;
  --code-line-base: #26262a;
  --code-ink: #dcdce0;
  --code-muted: #77777c;
}

/* ============================================================
   护眼纸色 —— 白天收一收刺眼的白，夜里把漆黑抬一点起来
   ------------------------------------------------------------
   每张纸色交出自己那一套底色（--tp-* = tint palette），
   上面那三套原色（--*-base）只做「不染」的底子。
   全站都从 --bg / --surface / --line 这一组取值，
   所以选一张纸色是连导航、侧栏、卡片、写作纸、公开页、分享页、
   手册页一起换，不是只换编辑框那张纸。
   --tint-strength 是染色浓度：0% 完全是原来的纸，100% 是这张纸本来的样子。
   「不染」那一对默认值就是原色，所以没选过的人看到的还是今天这个样子；
   不认 color-mix 的旧浏览器整个 @supports 不生效，也照原样出。
   深色这一侧由 [data-theme="dark"] 换一套目标色，与深浅两档（暖黑 / 纯黑）互不干扰。
   ============================================================ */
@supports (color: color-mix(in srgb, red 50%, blue)) {

  :root {
    --tint-strength: 100%;
  }

  /* 这两组也在 .tint-scope 上重算一遍：设置里那九颗预览自己挂 data-tint，
     于是同一套规则在小小的预览块里再走一次，颜色由这张纸自己算出来，JS 不必抄一份色值表。
     --tint-strength 仍然只跟 :root 走（继承进来），所以拖动浓度滑杆时预览跟着一起变。 */
  :root,
  .tint-scope {
    /* 不染：目标色就等于原色 */
    --tp-bg: var(--bg-base);
    --tp-bg-deep: var(--bg-deep-base);
    --tp-surface: var(--surface-base);
    --tp-surface-2: var(--surface-2-base);
    --tp-surface-3: var(--surface-3-base);
    --tp-surface-4: var(--surface-4-base);
    --tp-line: var(--line-base);
    --tp-line-strong: var(--line-strong-base);
    --tp-muted: var(--muted-base);

    --bg: color-mix(in srgb, var(--tp-bg) var(--tint-strength), var(--bg-base));
    --bg-deep: color-mix(in srgb, var(--tp-bg-deep) var(--tint-strength), var(--bg-deep-base));
    --surface: color-mix(in srgb, var(--tp-surface) var(--tint-strength), var(--surface-base));
    --surface-2: color-mix(in srgb, var(--tp-surface-2) var(--tint-strength), var(--surface-2-base));
    --surface-3: color-mix(in srgb, var(--tp-surface-3) var(--tint-strength), var(--surface-3-base));
    --surface-4: color-mix(in srgb, var(--tp-surface-4) var(--tint-strength), var(--surface-4-base));
    --line: color-mix(in srgb, var(--tp-line) var(--tint-strength), var(--line-base));
    --line-strong: color-mix(in srgb, var(--tp-line-strong) var(--tint-strength), var(--line-strong-base));
    /* 纸暗一档，次要文字跟着深一点，免得「次要」变成「看不见」 */
    --muted: color-mix(in srgb, var(--tp-muted) var(--tint-strength), var(--muted-base));
  }

  /* ---------- 七张纸 · 浅的那一面 ---------- */
  [data-tint="cream"] {
    --tp-bg: #f0e8d5; --tp-bg-deep: #e9dfc9;
    --tp-surface: #fbf5e6; --tp-surface-2: #f4ecdb; --tp-surface-3: #ece2cc; --tp-surface-4: #e2d6bb;
    --tp-line: #ded2b8; --tp-line-strong: #cabd9f; --tp-muted: #6b6353;
  }

  [data-tint="tea"] {
    --tp-bg: #e9dcc2; --tp-bg-deep: #e0d0b2;
    --tp-surface: #f6ecd8; --tp-surface-2: #efe1c9; --tp-surface-3: #e6d5b8; --tp-surface-4: #dbc9a8;
    --tp-line: #d6c3a2; --tp-line-strong: #c2ae8b; --tp-muted: #6a5f4c;
  }

  [data-tint="sage"] {
    --tp-bg: #e6ecdd; --tp-bg-deep: #dde5d2;
    --tp-surface: #f3f7ec; --tp-surface-2: #ecf1e3; --tp-surface-3: #e2e9d7; --tp-surface-4: #d7e0c9;
    --tp-line: #cfdac0; --tp-line-strong: #bccbb0; --tp-muted: #5d6753;
  }

  [data-tint="celadon"] {
    --tp-bg: #e2ebe8; --tp-bg-deep: #d8e4e0;
    --tp-surface: #f1f7f5; --tp-surface-2: #e9f1ee; --tp-surface-3: #dfe9e5; --tp-surface-4: #d3e0db;
    --tp-line: #cbdad5; --tp-line-strong: #b6cac4; --tp-muted: #566660;
  }

  [data-tint="mist"] {
    --tp-bg: #e6eaef; --tp-bg-deep: #dde3ea;
    --tp-surface: #f3f6fa; --tp-surface-2: #ecf0f5; --tp-surface-3: #e2e8ef; --tp-surface-4: #d7dfe8;
    --tp-line: #d0d8e2; --tp-line-strong: #bdc8d4; --tp-muted: #5b6470;
  }

  [data-tint="lotus"] {
    --tp-bg: #ece4ea; --tp-bg-deep: #e4dae1;
    --tp-surface: #f8f2f6; --tp-surface-2: #f1e9ef; --tp-surface-3: #e8dee5; --tp-surface-4: #ded2da;
    --tp-line: #d8cbd4; --tp-line-strong: #c7b8c3; --tp-muted: #6d626b;
  }

  [data-tint="stone"] {
    --tp-bg: #e9e8e4; --tp-bg-deep: #e1e0db;
    --tp-surface: #f6f5f2; --tp-surface-2: #efeee9; --tp-surface-3: #e6e5df; --tp-surface-4: #dcdad3;
    --tp-line: #d8d6cf; --tp-line-strong: #c6c4bc; --tp-muted: #6a6862;
  }

  /* 自己调一张：只交一个颜色（--tint-custom），各层的明度在这里定死。
     选到的颜色只借色相与饱和度，明度由这几档说了算——
     不会出现「挑了张太白，把夜里的纸也挑成白的」，也不用 JS 再算一遍：
     深浅属性一切换，这里自己跟着换。饱和度上限由 JS 在交颜色时收好（见 app.js）。
     这段依赖 hsl 的相对颜色写法：浏览器不认就没有这些规则，
     设置里也就不给这颗（见 app.js 的 canPickTint）。
     注意别在色相/饱和度/明度这三格里写 min() 之类的算式，Chrome 不认。 */
  @supports (color: hsl(from red h s l)) {
    [data-tint="custom"] {
      --tp-bg: hsl(from var(--tint-custom) h s 95.6%);
      --tp-bg-deep: hsl(from var(--tint-custom) h s 92.4%);
      --tp-surface: hsl(from var(--tint-custom) h s 99.2%);
      --tp-surface-2: hsl(from var(--tint-custom) h s 97.6%);
      --tp-surface-3: hsl(from var(--tint-custom) h s 93.2%);
      --tp-surface-4: hsl(from var(--tint-custom) h s 89.4%);
      --tp-line: hsl(from var(--tint-custom) h s 88.4%);
      --tp-line-strong: hsl(from var(--tint-custom) h s 80.2%);
      /* 次要文字不跟挑的颜色跑明度：只往墨里兑一点那支色，
         挑得再浅，这一格也不会淡到看不见（饱和度也不能在这格里算，所以用 color-mix） */
      --tp-muted: color-mix(in srgb, var(--tint-custom) 22%, #241f18);
      --lamp: hsl(from var(--tint-custom) h s 72%);
    }

    [data-theme="dark"][data-tint="custom"] {
      --tp-bg: hsl(from var(--tint-custom) h s 10.5%);
      --tp-bg-deep: hsl(from var(--tint-custom) h s 7.5%);
      --tp-surface: hsl(from var(--tint-custom) h s 14.5%);
      --tp-surface-2: hsl(from var(--tint-custom) h s 17.5%);
      --tp-surface-3: hsl(from var(--tint-custom) h s 21%);
      --tp-surface-4: hsl(from var(--tint-custom) h s 25%);
      --tp-line: hsl(from var(--tint-custom) h s 19.5%);
      --tp-line-strong: hsl(from var(--tint-custom) h s 28%);
      --tp-muted: color-mix(in srgb, var(--tint-custom) 45%, #ffffff);
      --lamp: hsl(from var(--tint-custom) h s 52%);
    }
  }

  /* ---------- 七张纸 · 深的那一面：比原来的黑抬起来一档 ---------- */
  [data-theme="dark"][data-tint="cream"] {
    --tp-bg: #241f16; --tp-bg-deep: #1b1710;
    --tp-surface: #2b251b; --tp-surface-2: #322b20; --tp-surface-3: #3a3225; --tp-surface-4: #443b2c;
    --tp-line: #37301f; --tp-line-strong: #4a4130; --tp-muted: #a89c86;
    --lamp: #f2dcae;
  }

  [data-theme="dark"][data-tint="tea"] {
    --tp-bg: #271f18; --tp-bg-deep: #1d1610;
    --tp-surface: #302720; --tp-surface-2: #372d24; --tp-surface-3: #40352a; --tp-surface-4: #4a3d31;
    --tp-line: #3b3126; --tp-line-strong: #4e4235; --tp-muted: #ab9d8b;
    --lamp: #e9c99a;
  }

  [data-theme="dark"][data-tint="sage"] {
    --tp-bg: #1d2419; --tp-bg-deep: #161c13;
    --tp-surface: #242d1f; --tp-surface-2: #2b3426; --tp-surface-3: #323d2c; --tp-surface-4: #3b4634;
    --tp-line: #2f3a28; --tp-line-strong: #3f4d36; --tp-muted: #9aab8f;
    --lamp: #cfe3ae;
  }

  [data-theme="dark"][data-tint="celadon"] {
    --tp-bg: #182422; --tp-bg-deep: #121c1a;
    --tp-surface: #1f2c29; --tp-surface-2: #26332f; --tp-surface-3: #2d3b37; --tp-surface-4: #354541;
    --tp-line: #293733; --tp-line-strong: #374743; --tp-muted: #94aba3;
    --lamp: #bfe0d4;
  }

  [data-theme="dark"][data-tint="mist"] {
    --tp-bg: #18202a; --tp-bg-deep: #121821;
    --tp-surface: #1f2833; --tp-surface-2: #26303c; --tp-surface-3: #2d3846; --tp-surface-4: #354250;
    --tp-line: #28323f; --tp-line-strong: #354252; --tp-muted: #97a6b8;
    --lamp: #c2d8f2;
  }

  [data-theme="dark"][data-tint="lotus"] {
    --tp-bg: #241a22; --tp-bg-deep: #1c1419;
    --tp-surface: #2c2129; --tp-surface-2: #332830; --tp-surface-3: #3b2f38; --tp-surface-4: #453742;
    --tp-line: #372a33; --tp-line-strong: #473843; --tp-muted: #ab95a6;
    --lamp: #e8c4de;
  }

  [data-theme="dark"][data-tint="stone"] {
    --tp-bg: #202022; --tp-bg-deep: #191919;
    --tp-surface: #28282a; --tp-surface-2: #2f2f31; --tp-surface-3: #37373a; --tp-surface-4: #404043;
    --tp-line: #313134; --tp-line-strong: #3f3f43; --tp-muted: #a2a2a6;
    --lamp: #dcdcd6;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* 让 body::before（夜间台灯）正好压在纸面上、正文下方 */
  isolation: isolate;
}

/* 全站纸张：一层固定在视口上的极淡噪点 + 几根纤维，
   浅色是米白纸，深色把纹理反相成「夜色里的纸」；只做底纹，不接收点击。
   --paper-y 由 nav.js 跟着滚动写入：底纹走得比内容慢，才有翻纸的错觉。 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%2323211f' stroke-width='.7' stroke-linecap='round' opacity='.09'%3E%3Cpath d='M28 44c18 10 30 24 38 44'/%3E%3Cpath d='M186 26c-10 18-14 34-12 54'/%3E%3Cpath d='M64 196c22-6 40-4 58 6'/%3E%3Cpath d='M212 148c-16 6-28 16-36 30'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.05'/%3E%3C/svg%3E");
  background-size: 260px 260px, 180px 180px;
  background-position: 0 var(--paper-y), 0 calc(var(--paper-y) * 1.9);
}

[data-theme="dark"] body::after {
  filter: invert(1);
  opacity: 0.42;
}

/* 夜间台灯：暖黑档在纸面上方压一盏很淡的暖光，纯黑档不亮灯。
   做成贴在纸面的一层（body::before），不写进 body 的 background——
   写进 background-image 会把公开页、剪藏页自己那条渐变整条顶掉，
   背景色只剩透明，页底就翻成雪白。
   灯泡色读 --lamp：不选护眼纸色是原来那颗琥珀，选了一张纸就换成同族的光。 */
[data-theme="dark"]:not([data-dark="pure"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(126% 74% at 50% -14%,
    color-mix(in srgb, var(--lamp) 8%, transparent),
    transparent 58%);
}

/* 白天那张灯：选了护眼纸色后，页顶再压一层同纸色的浅淡渐变，
   整页不是平涂一块色——底部仍是纸的本色，视线往下走时最安静。
   只在真的选了纸色时出现，没选的人（data-tint 缺省或 none）一个字都不变。 */
[data-tint]:not([data-tint="none"]) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tp-bg-deep) 55%, transparent),
    transparent 62%);
}

[data-theme="dark"]:not([data-dark="pure"])[data-tint]:not([data-tint="none"]) body::before {
  background: radial-gradient(126% 74% at 50% -14%,
    color-mix(in srgb, var(--lamp) 8%, transparent),
    transparent 58%);
}

/* 深夜纸灯：过了零点，灯泡从琥珀换成更暖的橘红，光再压柔一点，
   像夜里换了一盏更暗更暖的小灯。只跟着「日落后自动深色」出现。 */
[data-lamp="midnight"] {
  --lamp: #ff9a62;
}

[data-theme="dark"]:not([data-dark="pure"])[data-lamp="midnight"] body::before {
  background: radial-gradient(126% 74% at 50% -14%,
    color-mix(in srgb, var(--lamp) 12%, transparent),
    transparent 62%);
}

/* 纯黑档既不亮台灯，也不该铺白天那层浅淡渐变：往上那一压是更深的纸底，
   在纯黑上看不出「一张纸」，只会让页顶比页脚更闷。挑了纸也只要干净的黑。 */
[data-theme="dark"][data-dark="pure"][data-tint]:not([data-tint="none"]) body::before {
  content: none;
}

/* 后台与安装页不是「纸」，不铺这层。
   上面台灯与白天那层灯的权重会随 data-tint 变化，这里用 !important 一次性收干净。 */
body.adm-body::before,
body.adm-body::after,
body.install-body::before,
body.install-body::after {
  content: none !important;
}

/* 直接 Ctrl+P 也要出一份干净的纸：不靠导出功能，把屏幕上的装饰全部收掉 */
@media print {
  @page { margin: 18mm 16mm; }

  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #111;
    font-size: 12pt;
    line-height: 1.75;
  }
  body::after,
  body::before { content: none !important; }

  .site-nav,
  .site-footer,
  .to-top,
  .reading-progress,
  .nav-cta,
  .btn,
  .icon-btn,
  .code-copy,
  .md-code .code-tools,
  .site-announce,
  .toast,
  .modal,
  .command-panel {
    display: none !important;
  }

  main,
  .markdown-body,
  .markdown-body.is-prose {
    max-width: none;
    width: auto;
    padding: 0;
    margin: 0;
    color: #111;
  }

  .markdown-body a {
    color: #111;
    text-decoration: none;
  }
  /* 打印出去别人要能看到出处，所以把真实地址补在链接后面 */
  .markdown-body a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.72em;
    color: #666;
    word-break: break-all;
  }

  .markdown-body h1,
  .markdown-body h2,
  .markdown-body h3 {
    break-after: avoid-page;
    page-break-after: avoid;
  }
  .markdown-body img,
  .markdown-body .md-figure,
  .markdown-body .md-code,
  .markdown-body blockquote,
  .markdown-body .md-table-wrap {
    break-inside: avoid;
    page-break-inside: avoid;
    box-shadow: none;
  }
  .markdown-body .md-code {
    border-color: #ccc;
    background: #f7f7f7;
  }
  .markdown-body .md-code pre code { color: #111; }
  .markdown-body mark { background: transparent; }
  .markdown-body .task-box { border-color: #666; color: #111; }
  .markdown-body .task-item.is-done .task-box { background: transparent; }

  body {
    background-image: none !important;
  }
}

img,
svg {
  vertical-align: middle;
}

img {
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: color-mix(in srgb, var(--accent) 24%, transparent);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 32%, transparent);
  border-radius: 20px;
  border: 3px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--muted) 52%, transparent);
  background-clip: content-box;
}

::-webkit-scrollbar-track {
  background: transparent;
}

:focus-visible {
  /* 墨线圈：一圈实线描边，外带一点洇开的墨晕 */
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent),
    0 0 14px -3px color-mix(in srgb, var(--accent) 30%, transparent);
}

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

/* ---------- 图标 ---------- */
.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- 品牌 ---------- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}

.brand-mark {
  display: block;
  border-radius: 11px;
  box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--accent) 60%, transparent);
  flex: none;
}

.brand-word {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}

.brand-word b {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.brand-word em {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}

.eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--coral) 16%, transparent);
}

/* ============================================================
   全站导航栏 — 首页 / 笔记 / 登录 / 分享 / 公开 / 条款 / 更新记录 共用
   ============================================================ */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  flex: none;
}

.site-nav.is-scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 10px 30px -28px rgba(0, 0, 0, 0.4);
}

/* ---------- 墨迹滚动进度：贴着导航下沿的一条紫→珊瑚细线 ---------- */
.reading-progress {
  position: fixed;
  inset: var(--nav-h) auto auto 0;
  z-index: 90;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--coral));
  transition: width 0.12s linear;
}

/* 读到哪，墨就滴到哪：进度条末端挂一滴墨 */
.reading-progress::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -2px;
  width: 7px;
  height: 7px;
  border-radius: 99px 99px 99px 20%;
  transform: rotate(45deg);
  background: var(--coral);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--coral) 45%, transparent);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.reading-progress.is-ink::after {
  opacity: 1;
}

/* ---------- 站内公告条（后台开关，前台顶部一条细横幅） ---------- */
.site-announce {
  position: relative;
  z-index: 55;
  overflow: hidden;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  background:
    linear-gradient(90deg,
      var(--accent-softer),
      color-mix(in srgb, var(--accent) 5%, var(--bg)) 48%,
      var(--accent-softer));
  color: var(--ink-2);
  font-size: 13px;
  animation: announce-in 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

.site-announce.is-closing {
  animation: announce-out 0.2s ease both;
}

@keyframes announce-out {
  to { opacity: 0; transform: translateY(-4px); }
}

@keyframes announce-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.announce-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 9px 32px;
}

.announce-inner p {
  margin: 0;
  line-height: 1.55;
  text-align: center;
  letter-spacing: 0.01em;
}

/* 公告标题：后台填了才出现，像一枚小章压在正文前 */
.announce-tag {
  display: inline-block;
  margin-right: 7px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.announce-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: announce-pulse 2.6s ease-in-out infinite;
}

@keyframes announce-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 4%, transparent); }
}

.announce-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.announce-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.announce-link svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.announce-close {
  position: absolute;
  top: 50%;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.15s ease, color 0.15s ease;
}

.announce-close:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.announce-close svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

@media (max-width: 720px) {
  .announce-inner {
    width: calc(100% - 24px);
    justify-content: flex-start;
    gap: 7px;
    padding: 8px 26px 8px 2px;
    font-size: 12.5px;
  }
  .announce-inner p {
    text-align: left;
  }
  .announce-close {
    right: -2px;
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: 22px;
  width: min(1180px, calc(100% - 48px));
  height: var(--nav-h);
  margin: 0 auto;
}

.site-nav .brand-lockup .icon,
.nav-links .icon {
  width: 15px;
  height: 15px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 19px;
  margin-left: 10px;
}

.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
  transition: color 0.16s ease;
}

.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transition: right 0.2s ease;
}

.nav-links a:hover {
  color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
  right: 0;
}

.nav-links a.is-active {
  color: var(--accent);
  font-weight: 650;
}

.nav-links .nav-hot-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--coral);
  margin-left: 3px;
  transform: translateY(-6px);
}

/* 随机一篇：骰子比文字先被看见，悬停时轻轻转一下 */
.nav-links .nav-die {
  width: 14px;
  height: 14px;
  opacity: 0.72;
  transition: transform 0.25s ease, opacity 0.16s ease;
}

.nav-links a:hover .nav-die,
.nav-links a.is-active .nav-die {
  opacity: 1;
}

.nav-links a:hover .nav-die {
  transform: rotate(-14deg);
}

/* 首页与公开笔记的小图标：平时轻一点，悬停或选中时浮起来 */
.nav-links .nav-icon {
  width: 14px;
  height: 14px;
  opacity: 0.68;
  transition: opacity 0.16s ease, transform 0.2s ease;
}

.nav-links a:hover .nav-icon,
.nav-links a.is-active .nav-icon {
  opacity: 1;
}

.nav-links a:hover .nav-icon {
  transform: translateY(-1px);
}

/* 登录 / 注册按钮：宽屏走右侧按钮组，窄屏收进下拉面板 */
.nav-links .nav-mobile-actions {
  display: none;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
}

.nav-login {
  border-color: transparent;
  background: transparent;
  padding: 9px 12px;
}

.nav-cta {
  padding: 9px 17px;
  font-size: 13px;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.nav-burger span {
  display: block;
  height: 1.5px;
  border-radius: 2px;
  background: var(--ink-2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-burger.is-open span:first-child {
  transform: translateY(3.2px) rotate(45deg);
}

.nav-burger.is-open span:last-child {
  transform: translateY(-3.2px) rotate(-45deg);
}

/* 已登录时在导航右侧显示头像小圆点 */
.nav-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 13px;
  font-weight: 600;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.nav-user:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface);
}

.nav-user .nav-avatar {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex: none;
}

@media (max-width: 1040px) {
  .nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--nav-h);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 10px 24px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -30px rgba(0, 0, 0, 0.4);
    display: none;
  }

  .site-nav.nav-open .nav-links {
    display: flex;
  }

  .nav-links a {
    padding: 12px 0;
    font-size: 14px;
    border-bottom: 1px dashed var(--line);
  }

  .nav-links a::after {
    display: none;
  }

  .nav-links a.is-active {
    border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  }

  .nav-burger {
    display: flex;
  }

  .nav-actions .nav-login {
    display: none;
  }

  .nav-actions .nav-cta {
    display: none;
  }

  .nav-links .nav-mobile-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
  }

  .nav-links .nav-mobile-actions .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 18px;
    border-bottom: 0;
    font-size: 14px;
    color: var(--btn-ink);
  }

  .nav-links .nav-mobile-actions .btn::after {
    display: none;
  }

  .nav-inner {
    width: calc(100% - 32px);
    gap: 14px;
  }
}

@media (max-width: 720px) {
  :root {
    --nav-h: 64px;
  }

  .nav-inner {
    width: calc(100% - 28px);
  }

  .nav-user span:not(.nav-avatar) {
    display: none;
  }

  .nav-user {
    padding: 5px;
  }
}

/* ---------- 回到顶部（随全站导航条一起输出） ---------- */
.to-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 70;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.94);
  transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease,
    color 0.16s ease, border-color 0.16s ease;
}

.to-top.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong));
}

.to-top > svg {
  position: relative;
  z-index: 1;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.to-top-ring {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.to-top-ring svg {
  width: 42px;
  height: 42px;
  transform: rotate(-90deg);
}

.ttr-bg {
  fill: none;
  stroke: transparent;
  stroke-width: 2;
}

.ttr-fg {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 100.53;
  stroke-dashoffset: 100.53;
  transition: stroke-dashoffset 0.1s linear;
}

/* 笔记页是内部滚动，不需要这个按钮 */
body.app-body .to-top {
  display: none;
}

@media (max-width: 720px) {
  .to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }

  .to-top-ring svg {
    width: 38px;
    height: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top {
    transition: opacity 0.01s ease, visibility 0.01s ease;
    transform: none;
  }
}

/* ---------- 按钮 ---------- */
.btn {
  --btn-bg: transparent;
  --btn-ink: var(--ink);
  --btn-border: transparent;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 11px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, opacity 0.16s ease;
}

/* 笔尖落在纸上：悬停浮起，按下沉一点、墨在笔尖下聚一圈 */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 22%, transparent);
  transition: box-shadow 0.2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:hover::after {
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 7%, transparent);
}

.btn:active {
  transform: translateY(1px) scale(0.99);
  transition-duration: 0.07s;
}

.btn:active::after {
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  transition-duration: 0.07s;
}

.btn .icon {
  width: 16px;
  height: 16px;
}

.btn-primary {
  --btn-bg: var(--accent);
  --btn-ink: #fff;
  --btn-border: color-mix(in srgb, var(--accent) 70%, #000 30%);
  box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, #fff 10%);
}

.btn-ghost {
  --btn-border: var(--line-strong);
  --btn-bg: color-mix(in srgb, var(--surface) 65%, transparent);
}

.btn-ghost:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--muted) 40%, var(--line-strong));
}

.btn-soft {
  --btn-bg: var(--accent-soft);
  --btn-ink: var(--accent-strong);
  --btn-border: color-mix(in srgb, var(--accent) 14%, transparent);
}

.btn-soft:hover {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn-danger {
  --btn-bg: var(--danger);
  --btn-ink: #fff;
}

.btn-sm {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 9px;
}

.btn-lg {
  padding: 13px 24px;
  font-size: 15px;
  border-radius: 13px;
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.icon-btn .icon {
  width: 18px;
  height: 18px;
}

.icon-btn:hover {
  background: var(--surface-3);
  color: var(--ink);
}

.icon-btn:active {
  transform: translateY(1px) scale(0.94);
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 9%, transparent);
  transition-duration: 0.07s;
}

.icon-btn.is-active {
  color: var(--accent);
  background: var(--accent-soft);
}

.icon-btn.is-active .icon {
  fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .icon-btn {
    transition: background 0.01s linear, color 0.01s linear, border-color 0.01s linear, opacity 0.01s linear;
  }

  .btn:hover,
  .btn:active,
  .icon-btn:active {
    transform: none;
  }

  .btn:active::after {
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 20%, transparent);
  }
}

/* ---------- 表单 ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 16px;
  min-width: 0;
}

.field > span:first-child {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}

.field small {
  font-weight: 400;
  color: var(--muted);
  font-size: 12px;
  margin-left: 4px;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select {
  background: var(--surface-2);
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--faint);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row {
  display: flex;
  gap: 12px;
}

.form-row > .field {
  flex: 1;
}

.form-row > .field-sm {
  flex: 0 0 110px;
}

.checkline {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}

.checkline input {
  appearance: none;
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.checkline input:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.checkline input:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(42deg) translate(-0.5px, -1px);
}

.checkline a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 12px;
}

.password-wrap {
  position: relative;
  display: block;
}

.password-wrap input {
  padding-right: 58px;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 7px;
}

.password-toggle:hover {
  color: var(--ink);
  background: var(--surface-3);
}

.strength {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}

.strength i {
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--line-strong);
  transition: background 0.2s ease;
}

.strength em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  margin-left: 4px;
}

.strength[data-level="1"] i.is-on { background: var(--danger); }
.strength[data-level="2"] i.is-on { background: #d18a35; }
.strength[data-level="3"] i.is-on { background: var(--accent); }
.strength[data-level="3"] i.is-on { background: var(--ok); }

.alert {
  padding: 12px 15px;
  border-radius: 11px;
  font-size: 13.5px;
  line-height: 1.65;
  margin-bottom: 18px;
}

.alert p {
  margin: 0;
}

.alert p + p {
  margin-top: 4px;
}

.alert-error {
  background: var(--danger-soft);
  color: color-mix(in srgb, var(--danger) 80%, var(--ink) 20%);
  border: 1px solid color-mix(in srgb, var(--danger) 24%, transparent);
}

.alert-info {
  background: var(--accent-softer);
  color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
}

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  background: var(--surface);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
}

kbd + kbd {
  margin-left: 2px;
}

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  transition: background 0.16s ease, color 0.16s ease;
}

.theme-toggle:hover {
  color: var(--accent);
  background: var(--surface-3);
}

.theme-toggle .icon {
  width: 17px;
  height: 17px;
}

[data-theme="light"] .theme-toggle .theme-icon-sun,
[data-theme="light"] .theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon,
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ---------- Markdown 排版 ---------- */
.markdown-body {
  font-family: var(--editor-font);
  font-size: var(--editor-size);
  line-height: var(--editor-leading);
  color: var(--ink-2);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.markdown-body > *:first-child {
  margin-top: 0;
}

.markdown-body > *:last-child {
  margin-bottom: 0;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  color: var(--ink);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 1.9em 0 0.7em;
}

.markdown-body h1 {
  font-size: 1.85em;
  letter-spacing: -0.02em;
  margin-top: 0.6em;
}

.markdown-body h2 {
  font-size: 1.42em;
}

.markdown-body h3 {
  font-size: 1.18em;
}

.markdown-body h4 {
  font-size: 1.04em;
}

.markdown-body h5,
.markdown-body h6 {
  font-size: 0.95em;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.markdown-body p {
  margin: 0 0 1.15em;
}

.markdown-body strong {
  color: var(--ink);
  font-weight: 650;
}

.markdown-body em {
  font-style: italic;
}

/* 荧光笔是一笔划过去的：中间略淡、两头出头，边缘不齐；深色下压成半透明的光 */
.markdown-body mark {
  background: linear-gradient(101deg,
      color-mix(in srgb, #f6c85f 30%, transparent) 0.6%,
      color-mix(in srgb, #f6c85f 52%, transparent) 5%,
      color-mix(in srgb, #f6c85f 34%, transparent) 48%,
      color-mix(in srgb, #f6c85f 54%, transparent) 95%,
      color-mix(in srgb, #f6c85f 26%, transparent) 99.4%);
  color: inherit;
  padding: 0.12em 0.3em;
  border-radius: 3px 7px 4px 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

[data-theme="dark"] .markdown-body mark {
  background: linear-gradient(101deg,
      color-mix(in srgb, #f6c85f 14%, transparent) 0.6%,
      color-mix(in srgb, #f6c85f 24%, transparent) 5%,
      color-mix(in srgb, #f6c85f 16%, transparent) 48%,
      color-mix(in srgb, #f6c85f 26%, transparent) 95%,
      color-mix(in srgb, #f6c85f 12%, transparent) 99.4%);
}

.markdown-body del {
  position: relative;
  color: var(--muted);
  text-decoration: none;
}

/* 划掉的是笔势：一道略微上扬的斜线，不居中正直 */
.markdown-body del::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  top: 55%;
  height: 1.6px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink-2) 62%, transparent);
  transform: rotate(-0.8deg);
}

.markdown-body a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 34%, transparent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

.markdown-body a:hover {
  text-decoration-color: var(--accent);
}

.markdown-body .wiki-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.08em 0.5em;
  margin: 0 0.06em;
  border-radius: 6px;
  background: var(--accent-softer);
  color: var(--accent-strong);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  font-weight: 550;
}

.markdown-body .wiki-link:hover {
  background: var(--accent-soft);
}

.markdown-body .wiki-link .icon,
.markdown-body .wiki-link svg {
  width: 11px;
  height: 11px;
}

.markdown-body .wiki-link.is-static {
  border-bottom-style: dashed;
}

.markdown-body ul,
.markdown-body ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}

.markdown-body ul li,
.markdown-body ol li {
  margin: 0.35em 0;
  padding-left: 0.15em;
}

/* 无序列表的点是蘸出来的：一颗不规则小墨，不是排版软件那种正圆 */
.markdown-body ul {
  list-style: none;
}

.markdown-body ul > li {
  position: relative;
}

.markdown-body ul > li::before {
  content: "";
  position: absolute;
  left: -1.05em;
  top: 0.62em;
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--accent) 58%, var(--ink) 42%);
  border-radius: 58% 42% 46% 54% / 46% 54% 58% 42%;
  opacity: 0.82;
}

.markdown-body ul ul > li::before {
  width: 5px;
  height: 5px;
  opacity: 0.6;
  background: var(--muted);
}

.markdown-body li.task-item::before {
  content: none;
}

.markdown-body ol li::marker {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.85em;
}

.markdown-body li > ul,
.markdown-body li > ol {
  margin: 0.35em 0 0.5em;
}

.markdown-body .task-item {
  list-style: none;
  margin-left: -1.5em;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}

.markdown-body .task-box {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-top: 6px;
  border: 1.5px solid var(--line-strong);
  border-radius: 5px;
  font-size: 10px;
  line-height: 1;
  color: #fff;
  flex: none;
  background: var(--surface);
}

.markdown-body button.task-box {
  padding: 0;
  cursor: pointer;
  transition: border-color .14s ease, box-shadow .14s ease, transform .1s ease;
}

.markdown-body button.task-box:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-softer);
}

.markdown-body button.task-box:active {
  transform: scale(.88);
}

.markdown-body .task-item.is-done .task-box {
  background: transparent;
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line-strong));
  color: var(--accent);
}

.markdown-body .task-item.is-done .task-text {
  color: var(--muted);
}

/* 勾掉不是方块变色，而是一笔划过去：线从左边起笔，收在右边 */
.markdown-body .task-text {
  position: relative;
}

.markdown-body .task-text::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 53%;
  height: 1.8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink-2) 58%, transparent);
  transform: rotate(-0.7deg);
  clip-path: inset(0 100% 0 0);
}

.markdown-body .task-item.is-done .task-text::after {
  clip-path: inset(0 0 0 0);
}

.markdown-body .task-item.is-striking .task-text::after {
  animation: penStrike 0.32s cubic-bezier(0.22, 0.7, 0.24, 1) both;
}

@keyframes penStrike {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

/* 引用块 = 页边批注：左边一支小铅笔，紧挨一条淡墨竖线，正文像被批在纸边 */
.markdown-body blockquote {
  position: relative;
  margin: 1.6em 0;
  padding: 0.15em 0 0.15em 2.5em;
  border: 0;
  background: none;
  color: var(--ink-2);
}

.markdown-body blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 15px;
  height: 15px;
  background: var(--faint);
  transform: rotate(-8deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16v4Z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L20 8l-4-4L4 16v4Z'/%3E%3Cpath d='M14 6l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

.markdown-body blockquote::after {
  content: "";
  position: absolute;
  left: 1.5em;
  top: 0.1em;
  bottom: 0.1em;
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--ink) 16%, transparent) 12%,
    color-mix(in srgb, var(--ink) 16%, transparent) 88%,
    transparent
  );
}

/* 「现在的我」是系统补的，不是手写批注：保留原来那一点底色，不配铅笔 */
.markdown-body blockquote.md-echo {
  padding: 0.9em 1.2em;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
  border-radius: 0 10px 10px 0;
}

.markdown-body blockquote.md-echo::before,
.markdown-body blockquote.md-echo::after {
  content: none;
}

.markdown-body blockquote p {
  margin: 0;
}

/* 「现在的我」：那年今日补下的那几句，比正文轻一档，日期用等宽小字 */
.markdown-body .md-echo .echo-line {
  color: var(--muted);
}

.markdown-body .md-echo .echo-when {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .78em;
  letter-spacing: .02em;
  color: var(--accent-strong);
  margin-right: .55em;
}

/* 分隔线是横放的一笔：中间厚、两头收成纸丝，收笔处留一点珊瑚 */
.markdown-body hr {
  position: relative;
  box-sizing: border-box;
  width: 132px;
  height: 10px;
  margin: 2.6em auto;
  border: 0;
  background: color-mix(in srgb, var(--ink) 26%, transparent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12'%3E%3Cpath d='M4 6C38 3.2 96 3 136 6 96 9.2 38 9 4 6Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 132px 10px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 12'%3E%3Cpath d='M4 6C38 3.2 96 3 136 6 96 9.2 38 9 4 6Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / 132px 10px;
}

.markdown-body hr::after {
  content: "";
  position: absolute;
  left: calc(100% + 9px);
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--coral);
  opacity: 0.72;
}

.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  padding: 0.16em 0.4em;
  border-radius: 5px;
  background: var(--surface-3);
  color: color-mix(in srgb, var(--accent) 72%, var(--ink) 28%);
  border: 1px solid color-mix(in srgb, var(--line-strong) 55%, transparent);
}

.markdown-body .md-code {
  position: relative;
  margin: 1.6em 0;
  border-radius: 13px;
  background: var(--code-bg);
  border: 1px solid var(--code-line);
  overflow: hidden;
}

/* 语言名与复制都收在右上角：不占正文行，也不抢代码的眼 */
.markdown-body .md-code .code-tools {
  position: absolute;
  top: 7px;
  right: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.markdown-body .md-code .code-lang {
  font-family: var(--font-hand);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--code-muted) 78%, transparent);
}

.markdown-body .md-code .code-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid color-mix(in srgb, var(--code-line) 90%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--code-bg) 70%, transparent);
  color: var(--code-muted);
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.5;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.markdown-body .md-code:hover .code-copy,
.markdown-body .md-code:focus-within .code-copy {
  opacity: 1;
}

.markdown-body .md-code .code-copy:hover {
  color: var(--code-ink);
  border-color: color-mix(in srgb, var(--code-ink) 34%, transparent);
}

.markdown-body .md-code .code-copy .icon {
  width: 12px;
  height: 12px;
}

/* 复制成功：一滴墨从按钮上方坠进去 */
.markdown-body .md-code .code-copy.is-copied::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -7px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 52% 48% 50% 50%;
  background: var(--coral);
  animation: inkDrop 0.52s cubic-bezier(0.3, 0.6, 0.35, 1) both;
}

@keyframes inkDrop {
  0% { transform: translateY(-9px) scale(0.5); opacity: 0; }
  45% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(4px) scale(0.6); opacity: 0; }
}

.markdown-body .md-code pre {
  margin: 0;
  padding: 34px 18px 18px;
  overflow-x: auto;
}

.markdown-body .md-code code {
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--code-ink);
  font-size: 13px;
  line-height: 1.75;
}

.markdown-body .md-figure {
  display: block;
  margin: 1.8em 0;
}

.markdown-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}

.markdown-body .md-figure figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  font-family: var(--font-hand);
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* 图下面先落一根很淡的引线，再写字：像用铅笔在纸角牵了一条线 */
.markdown-body .md-figure figcaption::before {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 0 auto 7px;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}

.markdown-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: 0.94em;
}

.markdown-body .md-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 1.6em 0;
}

.markdown-body .md-table-wrap table {
  margin: 0;
  min-width: 480px;
}

.markdown-body th,
.markdown-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

/* 竖着的隔栏淡到几乎看不见，只在行与行之间留一点「界」 */
.markdown-body th + th,
.markdown-body td + td {
  border-left: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}

.markdown-body th {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 650;
  font-size: 0.88em;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line-strong);
}

.markdown-body tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--ink) 2.4%, transparent);
}

.markdown-body tbody tr:last-child td {
  border-bottom: 0;
}

/* 悬停是一把尺子压在这一行上：两端各有一个墨头 */
.markdown-body tbody tr:hover td {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.markdown-body tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 46%, transparent);
}

.markdown-body tbody tr:hover td:last-child {
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--accent) 46%, transparent);
}

.markdown-body .ta-center { text-align: center; }
.markdown-body .ta-right { text-align: right; }

/* 首字下沉只给「成品」：公开页、合集页、导出稿。编辑器预览会随打字抖动，不开。 */
.markdown-body.is-prose > p:first-of-type::first-letter {
  float: left;
  font-size: 3.05em;
  font-weight: 700;
  line-height: 0.84;
  padding: 0.04em 0.1em 0 0;
  color: var(--ink);
}

/* ---------- 全站页脚：左边品牌，右边产品与说明两组紧挨着放 ---------- */
.site-footer {
  background: var(--surface-2);
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 64px;
  align-items: start;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 34px 0 30px;
  position: relative;
}

/* 中间空白放一张「纸上一笔」的小插画：三条纸线 + 手写笔触 + 珊瑚点。
   绝对定位在品牌块与链接组之间，不占文档流，页脚高度不会变。 */
.footer-art {
  position: absolute;
  left: 372px;
  right: 296px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.footer-art svg {
  display: block;
  width: min(280px, 100%);
  height: auto;
}

/* 节日换装：月亮轻轻悬着，灯笼慢慢晃，都是极缓的呼吸感 */
.footer-art-mid-autumn .fa-moon {
  transform-box: fill-box;
  transform-origin: center;
  animation: moonHang 7s ease-in-out infinite;
}

.footer-art-spring .fa-lantern {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: lanternSwing 5.2s ease-in-out infinite;
}

@keyframes moonHang {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes lanternSwing {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .footer-art-mid-autumn .fa-moon,
  .footer-art-spring .fa-lantern {
    animation: none;
  }
}

@media (max-width: 1000px) {
  .footer-art {
    display: none;
  }
}

.footer-links {
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 48px;
}

.footer-brand {
  min-width: 0;
}

.footer-brand .brand-lockup {
  margin-bottom: 12px;
}

.footer-brand > p {
  margin: 0 0 12px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
}

.footer-brand .footer-note {
  margin-bottom: 8px;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--faint);
}

.footer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.footer-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

.footer-count b {
  font-weight: 600;
  color: var(--muted);
}

.footer-col {
  min-width: 0;
}

.footer-col h4 {
  margin: 4px 0 10px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--faint);
  text-transform: uppercase;
}

.footer-col a {
  display: block;
  padding: 4px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-col a:hover {
  color: var(--accent-strong);
  transform: translateX(2px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 13px 0 18px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

@media (max-width: 860px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: 26px 40px;
    padding: 30px 0 24px;
  }

  .footer-links {
    justify-content: start;
  }
}

@media (max-width: 720px) {
  .footer-inner,
  .footer-bottom {
    width: calc(100% - 36px);
  }

  .footer-bottom {
    flex-direction: column;
    gap: 5px;
    padding: 11px 0 calc(16px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 460px) {
  .footer-links {
    column-gap: 28px;
  }

  .footer-brand > p {
    max-width: none;
  }
}

/* ---------- 通用动画 ---------- */
/* 结束帧用 none：translateY(0) 会让元素一直保留 transform，
   变成子级 position: fixed 的包含块，弹层就会被裁进正文里 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 换页：离开的纸往上抽走，新的一页从下方轻轻抬起。
   只有支持跨文档过渡的浏览器会走这一步，其余浏览器直接换页。 */
@view-transition {
  navigation: auto;
  types: page;
}

@keyframes biji-page-out {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.994);
  }
}

@keyframes biji-page-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.994);
  }
}

:root:active-view-transition-type(page)::view-transition-old(root) {
  animation: biji-page-out 220ms cubic-bezier(0.4, 0, 0.7, 0.2) both;
}

:root:active-view-transition-type(page)::view-transition-new(root) {
  animation: biji-page-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

/* 熄灯 / 开灯：只让新配色从按钮处散开，旧页面原地不动 */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 14.5px;
  }
}

/* 图片灯箱：点正文里的图，从它原来的位置铺满整屏；左右翻、Esc 或往下拖关掉 */
html.lb-open { overflow: hidden; }
.markdown-body img,
.share-content img,
.book-body img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 92;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(14, 12, 10, 0.88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.18s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-in { opacity: 1; }

.lb-stage {
  max-width: min(1180px, 92vw);
  max-height: 86vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lb-img {
  display: block;
  max-width: min(1180px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  border-radius: 4px;
  background: #1a1815;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.lb-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
  color: #f3efe8;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.34); }
.lb-btn:active { transform: scale(0.94); }
.lb-btn:focus-visible { outline: 2px solid #f3efe8; outline-offset: 3px; }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: max(14px, env(safe-area-inset-top)); right: 14px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.lb-prev:active,
.lb-next:active { transform: translateY(-50%) scale(0.94); }
.lightbox.is-single .lb-prev,
.lightbox.is-single .lb-next { display: none; }

.lb-count {
  position: absolute;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 720px) {
  .lb-btn { width: 38px; height: 38px; }
  .lb-close { top: max(10px, env(safe-area-inset-top)); right: 10px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
  .lb-img { max-height: 80vh; }
  .lb-stage { max-height: 80vh; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
  .lb-img { transition: none !important; }
}