/* ============================================================
   Mae的小站 · 低饱和简约科技风
   零框架 / 零外部字体 / 零外部图片请求 / 冷灰蓝 + 深色双主题
   三套界面风格：flat 扁平 / glass 毛玻璃（默认） / skeuo 拟物
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  --bg:          #eef0f3;
  --surface:     #f7f8fa;
  --surface-2:   #e6e9ee;
  --surface-3:   #d9dee5;
  --ink:         #232a33;
  --ink-2:       #4b5563;
  --ink-3:       #5c6675;
  --line:        rgba(35, 45, 60, .13);
  --line-soft:   rgba(35, 45, 60, .07);
  --accent:      #4a6079;
  --accent-2:    #7a948c;
  --on-accent:   #f5f7f9;
  --accent-wash: rgba(74, 96, 121, .10);
  --accent-edge: rgba(74, 96, 121, .34);
  --ring:        rgba(74, 96, 121, .18);
  --glow-1:      rgba(90, 115, 140, .15);
  --glow-2:      rgba(120, 150, 140, .11);
  --dot-glow:    rgba(122, 148, 140, .26);
  --head-bg:     rgba(238, 240, 243, .82);
  --shadow-sm:   0 1px 2px rgba(35, 45, 60, .05), 0 8px 24px -20px rgba(35, 45, 60, .30);
  --shadow-lg:   0 24px 56px -24px rgba(35, 45, 60, .38), 0 2px 8px rgba(35, 45, 60, .05);

  --bg-base:     var(--bg);
  --bg-veil:     transparent;
  --bg-image:    none;

  /* 实底专用：承载文字列表的下拉 / 粘性底栏，防止半透明穿透内容 */
  --dropdown-bg:  #f7f8fa;
  --danger:       #8c5b5b;
  --danger-wash:  rgba(140, 91, 91, .10);
  /* 公告 / 宫格语义别名，用 var() 引用，自动跟随夜间主题 */
  --notice-bg:      var(--surface-2);
  --notice-ink:     var(--ink-2);
  --notice-edge:    var(--accent-edge);
  --notice-wash:    var(--accent-wash);
  --tile-bg:        var(--surface);
  --tile-bg-hover:  var(--surface-2);
  --tile-ink:       var(--ink);
  --tile-edge:      var(--line);
  /* 公告条与搜索栏左右边缘严格对齐 */
  --notice-w:       var(--content-w);
  /* 滚动条 */
  --scroll-thumb:       rgba(92, 102, 117, .30);
  --scroll-thumb-hover: rgba(92, 102, 117, .48);
  --scroll-track:       transparent;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --serif: var(--sans);
  /* 时钟数字用更简约的无衬线，保留 tabular-nums 对齐；不再用等宽 mono 的科技感 */
  --num: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;

  --head-h: 4.25rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --maxw: 78rem;
  --content-w: 48rem;   /* 搜索栏与公告条共用同一个内容宽度 */
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

[data-theme="night"] {
  --bg:          #0e131a;
  --surface:     #161d27;
  --surface-2:   #1d2632;
  --surface-3:   #27323f;
  --ink:         #dfe4ea;
  --ink-2:       #a7b1be;
  --ink-3:       #8b97a6;
  --line:        rgba(180, 198, 218, .13);
  --line-soft:   rgba(180, 198, 218, .07);
  --accent:      #9fb2c9;
  --accent-2:    #a6bdb4;
  --on-accent:   #121a24;
  --accent-wash: rgba(159, 178, 201, .14);
  --accent-edge: rgba(159, 178, 201, .40);
  --ring:        rgba(159, 178, 201, .22);
  --glow-1:      rgba(120, 150, 175, .12);
  --glow-2:      rgba(140, 175, 155, .10);
  --dot-glow:    rgba(166, 189, 180, .24);
  --head-bg:     rgba(14, 19, 26, .82);
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -20px rgba(0, 0, 0, .65);
  --shadow-lg:   0 26px 60px -24px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .3);

  --dropdown-bg:  #161d27;
  --danger:       #c39a9a;
  --danger-wash:  rgba(195, 154, 154, .14);
  --scroll-thumb:       rgba(139, 151, 166, .30);
  --scroll-thumb-hover: rgba(139, 151, 166, .48);
  color-scheme: dark;
}

html[data-bg="on"] { --bg-base: transparent; }

/* ---------- 1b. 界面风格变量 ----------
   浮层 / 卡片 / 输入框只引用下面这组变量。box-shadow 里已含内高光，
   flat 直接置 none；skeuo 用双向阴影做浮雕。切换只改 html[data-style]。 */
/* ---------- 1b. 界面风格变量 ---------- */
:root {
  --panel-bg:      rgba(247, 249, 251, .56);
  --panel-border:  rgba(255, 255, 255, .60);
  --panel-shadow:  0 22px 58px -24px rgba(35, 47, 64, .30),
                   0 2px 10px rgba(35, 47, 64, .045),
                   inset 0 1px 0 rgba(255, 255, 255, .62),
                   inset 0 0 0 1px rgba(255, 255, 255, .10),
                   inset 0 -1px 0 rgba(35, 47, 64, .035);
  --panel-blur:    blur(28px) saturate(140%) brightness(1.02);
  --panel-radius:  18px;
  --card-bg:       rgba(247, 249, 251, .48);
  --card-border:   rgba(35, 45, 60, .10);
  --card-shadow:   0 8px 22px -16px rgba(35, 47, 64, .28),
                   inset 0 1px 0 rgba(255, 255, 255, .55),
                   inset 0 0 0 1px rgba(255, 255, 255, .08);
  --card-radius:   12px;
  --field-bg:      rgba(240, 243, 246, .62);
  --field-shadow:  inset 0 1px 2px rgba(35, 47, 64, .05),
                   inset 0 1px 0 rgba(255, 255, 255, .55);
  --btn-bg:        rgba(247, 249, 251, .58);
  --btn-shadow:    inset 0 1px 0 rgba(255, 255, 255, .70),
                   0 2px 8px -4px rgba(35, 47, 64, .22);
  --head-blur:     blur(20px) saturate(125%);
}
[data-theme="night"] {
  --panel-bg:      rgba(22, 29, 39, .58);
  --panel-border:  rgba(190, 208, 228, .15);
  --panel-shadow:  0 24px 60px -24px rgba(0, 0, 0, .72),
                   0 2px 10px rgba(0, 0, 0, .28),
                   inset 0 1px 0 rgba(190, 208, 228, .10),
                   inset 0 0 0 1px rgba(190, 208, 228, .045),
                   inset 0 -1px 0 rgba(0, 0, 0, .30);
  --card-bg:       rgba(29, 38, 50, .50);
  --card-border:   rgba(180, 198, 218, .13);
  --card-shadow:   0 8px 24px -14px rgba(0, 0, 0, .58),
                   inset 0 1px 0 rgba(190, 208, 228, .075),
                   inset 0 0 0 1px rgba(190, 208, 228, .04);
  --field-bg:      rgba(12, 18, 26, .56);
  --field-shadow:  inset 0 1px 3px rgba(0, 0, 0, .30),
                   inset 0 1px 0 rgba(190, 208, 228, .05);
  --btn-bg:        rgba(29, 38, 50, .56);
  --btn-shadow:    inset 0 1px 0 rgba(190, 208, 228, .07),
                   0 3px 10px -6px rgba(0, 0, 0, .60);
}

html[data-style="flat"] {
  --panel-bg:      var(--surface);
  --panel-border:  var(--line);
  --panel-shadow:  0 8px 26px -18px rgba(35, 47, 64, .18);
  --panel-blur:    none;
  --panel-radius:  8px;
  --card-bg:       var(--surface);
  --card-border:   var(--line);
  --card-shadow:   none;
  --card-radius:   8px;
  --field-bg:      var(--surface-2);
  --field-shadow:  none;
  --btn-bg:        var(--surface);
  --btn-shadow:    none;
  --head-blur:     none;
  --head-bg:       var(--bg);
  --dropdown-bg:   var(--surface);
}
html[data-style="flat"][data-theme="night"] {
  --panel-shadow:  0 8px 26px -18px rgba(0, 0, 0, .72);
}

html[data-style="skeuo"] {
  --panel-bg:      linear-gradient(145deg, rgba(255,255,255,.30), transparent 46%),
                   linear-gradient(145deg, #f4f6f9 0%, #e6ebf0 100%);
  --panel-border:  rgba(255, 255, 255, .55);
  --panel-shadow:  -4px -4px 12px rgba(255, 255, 255, .42),
                    6px  6px 16px rgba(35, 47, 64, .12),
                    0 16px 36px -24px rgba(35, 47, 64, .28),
                    inset  1px  1px 0 rgba(255, 255, 255, .38),
                    inset -1px -1px 0 rgba(35, 47, 64, .05);
  --panel-blur:    none;
  --panel-radius:  20px;
  --card-bg:       linear-gradient(145deg, #f6f8fa, #e8edf2);
  --card-border:   rgba(255, 255, 255, .50);
  --card-shadow:   -2px -2px 6px rgba(255, 255, 255, .42),
                    3px  3px  8px rgba(35, 47, 64, .10),
                    inset  1px  1px 0 rgba(255, 255, 255, .36),
                    inset -1px -1px 0 rgba(35, 47, 64, .04);
  --card-radius:   14px;
  --field-bg:      #e9edf2;
  --field-shadow:  inset  2px  2px 5px rgba(35, 47, 64, .10),
                   inset -2px -2px 5px rgba(255, 255, 255, .55);
  --btn-bg:        linear-gradient(145deg, #f7f9fb, #e5ebf1);
  --btn-shadow:    -2px -2px 4px rgba(255, 255, 255, .42),
                    2px  2px  5px rgba(35, 47, 64, .12);
  --head-blur:     none;
  --head-bg:       var(--bg);
  --dropdown-bg:   #edf1f5;
  --press-shadow:  inset 2px 2px 5px rgba(35, 47, 64, .12),
                   inset -2px -2px 5px rgba(255, 255, 255, .48);
}
html[data-style="skeuo"][data-theme="night"] {
  --panel-bg:      linear-gradient(145deg, rgba(190,208,228,.055), transparent 46%),
                   linear-gradient(145deg, #1a2330 0%, #101720 100%);
  --panel-border:  rgba(190, 208, 228, .075);
  --panel-shadow:  -5px -5px 14px rgba(150, 175, 205, .11),
                    8px  8px 20px rgba(0, 0, 0, .60),
                    0 18px 40px -26px rgba(0, 0, 0, .70),
                    inset  1px  1px 0 rgba(190, 208, 228, .075),
                    inset -1px -1px 0 rgba(0, 0, 0, .35);
  --card-bg:       linear-gradient(145deg, #1b2431, #111823);
  --card-border:   rgba(190, 208, 228, .07);
  --card-shadow:   -3px -3px 8px rgba(150, 175, 205, .10),
                    5px  5px 12px rgba(0, 0, 0, .58),
                    inset  1px  1px 0 rgba(190, 208, 228, .06),
                    inset -1px -1px 0 rgba(0, 0, 0, .30);
  --field-bg:      #0d131c;
  --field-shadow:  inset  2px  2px 5px rgba(0, 0, 0, .55),
                   inset -2px -2px 5px rgba(150, 175, 205, .11);
  --btn-bg:        linear-gradient(145deg, #1d2735, #101720);
  --btn-shadow:    -2px -2px 5px rgba(150, 175, 205, .11),
                    3px  3px  7px rgba(0, 0, 0, .58);
  --dropdown-bg:   #121a24;
  --press-shadow:  inset 2px 2px 5px rgba(0, 0, 0, .55),
                   inset -2px -2px 5px rgba(150, 175, 205, .12);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }

::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: fixed;
  top: .6rem; left: .6rem;
  z-index: 100;
  padding: .5rem .9rem;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .78rem;
  border-radius: 6px;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform .3s var(--ease);
}
.skip:focus { transform: none; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- 3. Backdrop: soft glow + optional photo ---------- */
/* 背景只用几团很淡的柔光，不铺网格；毛玻璃浮层靠这些色块才看得出折射。
   背景图是独立的固定层，默认 --bg-image:none，不启用时不会发起任何图片请求。 */
.bg-photo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity .55s var(--ease);
}
.bg-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-veil);
}
html[data-bg="on"] .bg-photo { opacity: 1; }

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(56% 48% at 16% 8%,  var(--glow-1), transparent 72%),
    radial-gradient(48% 44% at 86% 14%, var(--glow-2), transparent 72%),
    radial-gradient(70% 58% at 52% 104%, var(--glow-1), transparent 76%),
    var(--bg-base);
}

/* main 必须高于页脚：常用入口浮层在 main 内部，否则页脚会画到卡片上面。
   但首页例外：main 一旦带数值 z-index 就生成层叠上下文，会把内部
   .links-panel{z-index:40} 锁死在 2 层，反被 body 级公告条(35)/箭头(36)盖住。
   首页改成 z-index:auto（不生成层叠上下文），让浮层按自身 z-index 参与 root 层比较：
   40 > 公告条 35 > 页头 30 > 页脚 1；公告条仍高于 main，点击/悬浮不受影响。
   进入二级界面时 main 有 opacity<1，会重新成为层叠上下文，不会穿透 tiles-view(50)。 */
.site-head, main { position: relative; }
main { z-index: 2; }
body[data-page="home"] main { z-index: auto; }
html.settings-open .site-head { z-index: 75; }

/* 首页用 flex 把页脚压在屏幕底部：整页高度恰好 = 100svh，不出现滚动条 */
body[data-page="home"] {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}
body[data-page="home"] main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* 成对负 margin：margin box 总高仍是 C + --home-mb（不增加 scrollHeight），
   border box 却相对 flex 居中位置精确上移 --home-lift，给入口浮层留空间。 */
body[data-page="home"] main > .wrap {
  --home-mb: clamp(2.6rem, 6vh, 4rem);
  --home-lift: clamp(11vh, 15vh, 18vh);   /* 上移到约页面 1/3 处 */
  width: 100%;
  margin-top: calc(-1 * var(--home-lift));
  margin-bottom: calc(var(--home-mb) + var(--home-lift));
}
body[data-page="home"] .start { min-height: 0; }

/* ---------- 4. Header ---------- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--head-h);
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .35s var(--ease), border-color .35s var(--ease),
              transform .36s var(--ease), opacity .36s var(--ease), filter .36s var(--ease);
}
.site-head.is-stuck {
  background: var(--head-bg);
  -webkit-backdrop-filter: var(--head-blur);
  backdrop-filter: var(--head-blur);
  border-bottom-color: var(--line);
}

.head-inner {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2.5vw, 2.5rem);
  height: 100%;
}

.brand {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  text-decoration: none;
}
.brand-mark {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent-edge);
  border-radius: 8px;
  background: var(--accent-wash);
  color: var(--accent);
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 600;
  line-height: 1;
}
.brand-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; line-height: 1.15; }
.brand-text strong {
  font-size: .96rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.8rem);
  margin-left: auto;
}
.site-nav a {
  position: relative;
  padding: .25rem 0;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--ink-2);
  text-decoration: none;
  transition: color .3s var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .4s var(--ease);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after { transform: scaleX(1); }
.site-nav a[aria-current="page"] { color: var(--accent); }

/* 设为默认主页：低调的虚线胶囊，紧挨「首页」出现 */
.homepage-hint {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .18rem .55rem;
  border: 1px dashed var(--accent-edge);
  border-radius: 999px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .72rem;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: .82;
  transition: opacity .25s, background-color .25s, color .25s;
}
.homepage-hint:hover { opacity: 1; background: var(--accent); color: var(--on-accent); }
.homepage-hint svg { width: 12px; height: 12px; flex: none; }

/* 设为默认主页：弹出可操作浮层（复制网址 + 分步指引 + 可拖拽主页链接） */
.homepage-wrap { position: relative; display: inline-flex; }
.homepage-panel {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 57;
  width: 17rem; max-width: min(86vw, 17rem); padding: .85rem .9rem;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--dropdown-bg); box-shadow: var(--shadow-lg);
  color: var(--ink-2); font-size: .82rem; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.homepage-panel.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.hp-title { font-size: .92rem; font-weight: 600; color: var(--ink); margin-bottom: .3rem; }
.hp-desc { margin: 0 0 .55rem; color: var(--ink-3); }
.hp-url { display: flex; gap: .4rem; margin-bottom: .6rem; }
.hp-url input {
  flex: 1; min-width: 0; padding: .4rem .5rem; font-size: .76rem;
  border: 1px solid var(--card-border); border-radius: 7px;
  background: var(--field-bg); color: var(--ink);
}
.hp-copy {
  flex: none; padding: .4rem .6rem; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--accent); color: var(--on-accent); font-size: .76rem;
  transition: filter .2s;
}
.hp-copy:hover { filter: brightness(1.06); }
.hp-steps { margin: 0 0 .55rem; padding-left: 1.1rem; }
.hp-steps li { margin: .18rem 0; }
.hp-drag {
  display: block; text-align: center; margin-bottom: .5rem; padding: .45rem;
  border: 1px dashed var(--accent-edge); border-radius: 8px;
  color: var(--accent); font-size: .78rem; text-decoration: none; cursor: grab;
  background: var(--accent-wash);
}
.hp-drag:active { cursor: grabbing; }
.hp-dismiss {
  width: 100%; padding: .4rem; border: 0; border-radius: 7px; cursor: pointer;
  background: var(--surface-2); color: var(--ink-3); font-size: .76rem;
  transition: color .2s, background-color .2s;
}
.hp-dismiss:hover { color: var(--ink); background: var(--surface-3, var(--surface-2)); }

.head-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: none;
}
.icon-btn {
  width: 2.05rem; height: 2.05rem;
  display: grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover, .icon-btn[aria-expanded="true"] { border-color: var(--accent-edge); color: var(--accent); }
.icon-btn[aria-expanded="true"] { background: var(--accent-wash); }

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  padding: .4rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .06em;
  cursor: pointer;
  transition: border-color .3s, color .3s, background-color .3s;
}
.theme-toggle:hover { border-color: var(--accent-edge); color: var(--accent); }
.theme-toggle .dot {
  width: .6rem; height: .6rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ---------- 5. Start page shell ---------- */
.start {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.1rem, 2.2vh, 1.7rem);
  width: 100%;
  max-width: var(--content-w);
  min-height: calc(100svh - var(--head-h));
  margin-inline: auto;
  padding-block: clamp(1.2rem, 3vh, 2rem);
}

.start-top { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .7rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .1em;
  color: var(--ink-3);
}
/* 首页顶部日期默认关闭，在「设置 → 时间」里可打开；
   文章页/404 页的 .eyebrow 不受影响。 */
html[data-show-date="off"] .start-top .eyebrow { display: none; }
html[data-show-date="on"] .start-top .eyebrow { margin-bottom: .55rem; }
.pulse {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px var(--dot-glow);
}
@media (prefers-reduced-motion: no-preference) {
  .pulse { animation: pulse 2.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { opacity: .4; box-shadow: 0 0 0 7px transparent; } }

/* 三列网格：左右列等宽(1fr)，中间列是 HH:MM。
   秒位放在右侧列且不参与居中计算，所以开/关秒位时分针位置完全不动。 */
.clock {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  width: 100%;
  font-family: var(--num);
  font-size: clamp(3.4rem, 8vw, 5.6rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -.055em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.clock-main { grid-column: 2; }
.clock .sec {
  grid-column: 3;
  justify-self: start;
  margin-left: .5rem;
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  visibility: hidden;              /* 默认不显秒，但位置仍保留 */
}
html[data-show-sec="on"] .clock .sec { visibility: visible; }
[data-theme="night"] .clock { text-shadow: 0 0 48px rgba(159, 178, 201, .12); }


/* ---------- 6. Search ---------- */
/* z-index 必须高于下方展开的常用入口浮层：入场动画曾给兄弟节点留下 transform
   层叠上下文，导致下拉框被盖住（视觉上像「透明」）。 */
.search { position: relative; z-index: 55; }

/* 搜索引擎并入放大镜：放大镜+引擎名+小箭头组成一个按钮，点击弹出引擎下拉菜单 */
.search-icon {
  flex: none; height: 30px;
  display: flex; align-items: center; gap: .32rem;
  padding: 0 .42rem 0 .28rem;
  border: 0; border-radius: 8px; background: none;
  color: var(--ink-3); cursor: pointer;
  transition: color .25s, background-color .25s;
}
.search-icon:hover { color: var(--accent); background: var(--surface-2); }
.search-icon[aria-expanded="true"] { color: var(--accent); background: var(--accent-wash); }
.search-icon > svg:first-child { width: 17px; height: 17px; flex: none; }
.engine-name {
  font-family: var(--sans);
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink-2);
  white-space: nowrap;
}
.search-icon:hover .engine-name { color: var(--accent); }
.engine-caret { width: 11px; height: 11px; flex: none; opacity: .7; transition: transform .22s var(--ease); }
.search-icon[aria-expanded="true"] .engine-caret { transform: rotate(180deg); }

/* 引擎下拉：放大镜下方的小菜单，与搜索历史同材质（实底不穿透） */
.engine-menu {
  position: absolute; top: calc(100% + .45rem); left: 0; z-index: 57;
  min-width: 8.5rem; padding: .3rem;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--dropdown-bg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
}
.engine-menu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.engine-item {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; padding: .48rem .6rem; border: 0; border-radius: 7px;
  background: none; color: var(--ink-2); font-size: .85rem; cursor: pointer;
  text-align: left; transition: background-color .2s, color .2s;
}
.engine-item:hover { background: var(--surface-2); color: var(--ink); }
.engine-item[aria-pressed="true"] { color: var(--accent); }
.engine-item[aria-pressed="true"]::after { content: "✓"; font-size: .8rem; color: var(--accent); }

.search-field {
  position: relative;          /* 引擎下拉菜单以此为定位基准 */
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .55rem .5rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.search-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-edge), 0 0 0 3px var(--ring), var(--shadow-sm);
}
/* 聚焦时只保留一层安静的描边与微光，不再绕圈跑光。
   点击搜索框会从鼠标位置跳出一条小鱼，落到「→」处消失（见 main.js）。 */
.fish {
  position: fixed;
  left: 0; top: 0;
  width: 34px; height: 21px;
  color: var(--accent);
  pointer-events: none;
  z-index: 68;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(-200px, -200px);
}
.fish svg { display: block; width: 100%; height: 100%; }

.search-field input {
  flex: 1;
  min-width: 0;
  padding: .2rem 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  letter-spacing: .01em;
}
.search-field input:focus { outline: none; }
.search-field input::placeholder { color: var(--ink-3); opacity: .9; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }

.search-go {
  flex: none;
  width: 2.35rem; height: 2.35rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: transform .3s var(--ease), filter .3s;
}
.search-go svg { width: 16px; height: 16px; }
.search-go:hover { filter: brightness(1.1); transform: translateX(2px); }

/* 搜索历史：--dropdown-bg 实底 + 独立层叠上下文；.is-open 控制进/出过渡。
   transition 只列 opacity/transform/visibility/box-shadow，绝不列 background-color，
   否则 flat↔glass 切换的中间帧半透会透出搜索框文字。 */
.search-history {
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + .5rem);
  z-index: 25;
  padding: .5rem .55rem .6rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s var(--ease), transform .22s var(--ease),
              visibility .22s, box-shadow .22s var(--ease);
}
.search-history.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.sh-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .15rem .4rem .45rem;
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.sh-head button {
  padding: .15rem .25rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--ink-3);
  cursor: pointer;
}
.sh-head button:hover { color: var(--accent); background: var(--accent-wash); }
.sh-list { display: flex; flex-direction: column; }
.sh-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem .45rem;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 6px;
  background: transparent;
  text-align: left;
  font-size: .82rem;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.sh-item:first-child { border-top: 0; }
.sh-item:hover { background: var(--surface-2); color: var(--accent); }
.sh-item svg { width: 12px; height: 12px; opacity: .5; flex: none; }

/* ---------- 7. Quick links: hover dock ---------- */
/* 低调的公共触发条：默认半透明，悬浮后才变亮，不抢搜索框的视觉重心 */
.dock-trigger {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  height: 2.15rem;   /* 与下滑圆形按钮等高；.to-tiles 用相同尺寸保证视觉对齐 */
  padding: .34rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--ink-3);
  cursor: pointer;
  opacity: .7;
  transition: opacity .3s, color .3s, border-color .3s, background-color .3s;
}
[data-theme="night"] .dock-trigger { opacity: .8; }
.dock-trigger b { font-weight: 500; opacity: .75; }
.dock-trigger .pulse { width: 5px; height: 5px; box-shadow: 0 0 0 3px var(--dot-glow); }
.dock-trigger svg { width: 11px; height: 11px; transition: transform .3s var(--ease); }
.dock-trigger:hover,
.is-open > .dock-trigger {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent-edge);
}
.is-open > .dock-trigger svg { transform: rotate(180deg); }

.links-dock {
  position: relative;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.7rem;   /* 仅为布局留白；展开只由 .dock-trigger 触发 */
}
/* 展开时提到浮层档(66)，高于搜索框(55)/底部条(64)，盖住一切常驻控件 */
.links-dock.is-open { z-index: 66; }
.links-panel {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0; right: 0;
  z-index: 40;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  isolation: isolate;
  /* 矮屏时不要让浮层超出视口，多余内容在卡片内滚动 */
  max-height: calc(100svh - var(--dock-bottom, 70svh) - 1.2rem);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* 透明桥 1（功能版）：dock 上的伪元素不受 .links-panel 的 overflow-y:auto 裁切，
   覆盖按钮与面板之间的 .55rem 间隙；仅展开时可命中，鼠标经过不会误触发收起。 */
.links-dock::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: .7rem;
  pointer-events: none;
}
.links-dock.is-open::after { pointer-events: auto; }
/* 透明桥 2（规范 2.3 要求的面板侧桥）：与 dock 桥并存。面板有 overflow 时该伪元素会被裁切，
   功能由 dock 桥保证；这条保证面板不带 overflow 的未来变体也有桥接。 */
.links-panel::before {
  content: "";
  position: absolute;
  top: -.7rem; left: 0; right: 0;
  height: .7rem;
  pointer-events: none;
}
.links-dock.is-open .links-panel::before { pointer-events: auto; }
.links-dock.is-open .links-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

.links-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .7rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.links-tools { display: flex; gap: .9rem; }
.links-tools button {
  padding: .15rem .2rem;
  border: 0;
  border-radius: 4px;
  background: none;
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  cursor: pointer;
}
.links-tools button:hover { color: var(--accent); background: var(--accent-wash); }
.links-tools button[hidden] { display: none; }   /* 只有保存过自定义才显示「恢复默认」 */

.link-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.link-grid[hidden], .links-editor[hidden] { display: none; }
.links-empty {
  padding: 1.4rem 0;
  text-align: center;
  font-size: .78rem;
  color: var(--ink-3);
}
.link {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  min-width: 0;
  min-height: 6.2rem;
  padding: .95rem 1rem 1rem;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  box-shadow: var(--card-shadow);
  color: var(--ink);
  text-decoration: none;
  transition: transform .32s var(--ease), border-color .32s, box-shadow .32s;
}
.link:hover {
  transform: translateY(-2px);
  border-color: var(--accent-edge);
  box-shadow: 0 12px 28px -20px var(--accent), var(--card-shadow);
}
.link-mark {
  width: 1.9rem; height: 1.9rem;
  display: grid;
  place-items: center;
  margin-bottom: .3rem;
  border-radius: 7px;
  background: var(--accent-wash);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  transition: background-color .3s;
}
.link:hover .link-mark { background: var(--accent); color: var(--on-accent); }
.link-name {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link:hover .link-name { color: var(--accent); }
.link-desc {
  font-size: .66rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 自定义编辑器 */
.le-tip { margin-bottom: .5rem; font-size: .7rem; color: var(--ink-3); }
.le-head, .le-row {
  display: grid;
  grid-template-columns: 3rem 1fr 1.15fr 1.9fr 1.7rem;
  gap: .4rem;
  align-items: center;
}
.le-head {
  margin-bottom: .3rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.le-head span { padding-left: .15rem; }
.le-list { display: flex; flex-direction: column; gap: .4rem; }
.le-row {
  display: grid;
  grid-template-columns: 3rem 1fr 1.15fr 1.9fr 1.7rem;
  gap: .4rem;
  align-items: center;
}
.le-row input {
  min-width: 0;
  padding: .4rem .5rem;
  border: 1px solid var(--card-border);
  border-radius: 6px;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  color: var(--ink);
  font-size: .72rem;
}
.le-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--ring); }
.le-del {
  width: 1.7rem; height: 1.7rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  font-size: 1rem;
  cursor: pointer;
}
.le-del:hover { background: var(--surface-2); color: var(--accent); }
.le-actions {
  position: sticky;
  bottom: -1rem;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin: .85rem -1rem -1rem;
  padding: .7rem 1rem .8rem;
  border-top: 1px solid var(--line-soft);
}
.le-actions button {
  padding: .35rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  font-size: .72rem;
  color: var(--ink-2);
  cursor: pointer;
}
.le-actions button:hover { border-color: var(--accent-edge); color: var(--accent); }
.le-actions .primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.le-actions .primary:hover { filter: brightness(1.08); color: var(--on-accent); }

/* ---------- 8. Status: bottom-right dock ---------- */
/* 底部居中条：向下翻页 + 站点状态并排，移到屏幕底部中间 */
.bottom-bar {
  position: fixed; left: 0; right: 0; bottom: clamp(.9rem, 2.4vh, 1.5rem);
  z-index: 64;
  display: flex; justify-content: center; align-items: center; gap: .9rem;
  pointer-events: none;
}
.bottom-bar > * { pointer-events: auto; }
.bottom-bar .status-dock { position: relative; right: auto; bottom: auto; align-items: flex-end; }
.bottom-bar .to-tiles { position: static; left: auto; right: auto; margin-inline: 0; }

.status-dock {
  position: fixed;
  right: clamp(.9rem, 2.5vw, 1.8rem);
  bottom: clamp(.9rem, 2.4vh, 1.5rem);
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
/* 站点状态浮窗向上展开，要盖过搜索框(55)；.status-dock 在 .bottom-bar(64) 内，
   对外已是 64 层，这里只确保展开时在底部条内部排到最前 */
.status-dock.is-open { z-index: 64; }
.status-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + .55rem);
  width: min(21rem, calc(100vw - 2rem));
  padding: .85rem .9rem .95rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
/* 下方桥：status 面板在按钮上方，桥向下延伸覆盖 .55rem 间隙；
   .status-panel 无 overflow，伪元素不会被裁切；pointer-events 继承面板（仅展开时为 auto） */
.status-panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.7rem;
  height: .7rem;
}
.status-dock.is-open .status-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.status-mini-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .6rem;
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.status-mini-head span:last-child { opacity: .75; }

/* 状态浮窗底部：版权 + 备案号（备案号也显示在折叠按钮里，这里提供可点击链接） */
.status-foot {
  margin-top: .7rem; padding-top: .6rem;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-direction: column; gap: .2rem;
  font-size: .62rem; line-height: 1.7; color: var(--ink-3);
  letter-spacing: .02em;
}
.status-foot .status-copy { white-space: nowrap; }
.status-icp {
  color: var(--ink-3); text-decoration: none;
  border-bottom: 1px solid transparent; align-self: flex-start;
  transition: color .3s, border-color .3s;
}
.status-icp:hover { color: var(--accent); border-color: var(--accent-edge); }

/* 折叠按钮里顺带显示的备案号（纯展示，可点击链接在浮窗内） */
.dock-icp {
  font-size: .56rem; letter-spacing: .03em; opacity: .82;
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--card-border);
  border-radius: 10px;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  overflow: hidden;
}
.stat {
  padding: .7rem .85rem;
  border-left: 1px solid var(--line-soft);
}
.stat:nth-child(odd) { border-left: 0; }
.stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }
.stat dt {
  margin-bottom: .25rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.stat dd {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--num);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat dd small {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

/* ---------- 10. Footer（已移除：版权/备案号移入站点状态浮窗，见 .status-foot） ---------- */

/* ---------- 11. Page header (notes / 404) ---------- */
.page-head {
  padding-block: clamp(2.6rem, 7vh, 4.6rem) clamp(1.4rem, 4vh, 2.2rem);
  border-bottom: 1px solid var(--line);
}
.page-title {
  margin: .8rem 0 1rem;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -.01em;
  text-wrap: balance;
}
.page-sub {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.filters { display: flex; flex-wrap: wrap; gap: .45rem; padding-block: 1.4rem; }
.filter {
  padding: .3rem .75rem;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background-color .25s, border-color .25s, color .25s;
}
.filter:hover { color: var(--ink); border-color: var(--accent-edge); }
.filter[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.filter-note {
  margin-bottom: 1.3rem;
  font-size: .76rem;
  letter-spacing: .02em;
  color: var(--ink-3);
}
.filter-note[hidden] { display: none; }
.filter-note a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-edge);
}

.year-block { margin-bottom: 2.5rem; }
.year-label {
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--ink-3);
}
.year-block .posts { border-top: 0; }

.empty {
  padding: clamp(3rem, 8vh, 5rem) 0;
  text-align: center;
  font-size: 1rem;
  color: var(--ink-2);
}
.empty span {
  display: block;
  margin-top: .5rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-3);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .3s, gap .3s var(--ease);
}
.back-link:hover { color: var(--accent); gap: .7rem; }
.page-foot { margin-top: 2.6rem; }

.notfound {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100svh - var(--head-h));
  padding-block: clamp(3rem, 8vh, 6rem);
}
.notfound .page-title { margin-top: 1rem; }
.notfound .page-sub { max-width: 34ch; line-height: 1.9; }
.notfound-actions { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; margin-top: 2.4rem; }

/* ---------- 12. Post list ---------- */
.posts { border-top: 1px solid var(--line); }
.post-row {
  display: grid;
  grid-template-columns: 6.4rem minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: 1.25rem .2rem;
  border-bottom: 1px solid var(--line);
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
  transition: padding-left .45s var(--ease), background-color .3s;
}
.post-date {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.post-main { min-width: 0; }
.post-title {
  display: block;
  font-size: clamp(1rem, 1.6vw, 1.14rem);
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--ink);
  transition: color .3s;
}
.post-excerpt {
  display: block;
  margin-top: .25rem;
  font-size: .77rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.post-tag {
  padding: .16rem .55rem;
  border: 1px solid var(--card-border);
  border-radius: 5px;
  background: var(--btn-bg);
  font-size: .63rem;
  letter-spacing: .08em;
  color: var(--ink-3);
  white-space: nowrap;
  transition: color .3s, border-color .3s;
}
.post-row:hover { padding-left: .7rem; background: var(--surface); }
.post-row:hover .post-title { color: var(--accent); }
.post-row:hover .post-tag { color: var(--accent); border-color: var(--accent-edge); }

/* ---------- 13. Article ---------- */
.article {
  max-width: 43rem;
  margin-inline: auto;
  padding-block: clamp(2.4rem, 6vh, 3.6rem) clamp(3rem, 7vh, 5rem);
}
.article-head {
  padding-bottom: clamp(1.6rem, 4vh, 2.4rem);
  margin-bottom: clamp(1.8rem, 4vh, 2.6rem);
  border-bottom: 1px solid var(--line);
}
.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.article-meta .tag {
  font-family: var(--sans);
  font-size: .64rem;
  letter-spacing: .08em;
  padding: .14rem .5rem;
  border: 1px solid var(--line);
  border-radius: 5px;
}
.article-meta .dot { width: 3px; height: 3px; background: var(--ink-3); border-radius: 50%; opacity: .6; }
.article-title {
  font-size: clamp(1.8rem, 4.2vw, 2.55rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  text-wrap: balance;
}

.prose {
  font-size: clamp(1rem, 1.35vw, 1.075rem);
  line-height: 2.05;
  color: var(--ink);
}
.prose p { margin-bottom: 1.45em; text-wrap: pretty; }
.prose h2 {
  position: relative;
  margin: 2.3em 0 .8em;
  padding-left: .85rem;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
}
.prose h2::before {
  content: "";
  position: absolute;
  left: 0; top: .42em;
  width: 3px; height: .95em;
  border-radius: 2px;
  background: var(--accent);
}
.prose blockquote {
  margin: 1.9em 0;
  padding: 1rem 1.25rem;
  border-left: 2px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--surface);
  color: var(--ink-2);
  font-size: .98em;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul { margin: 0 0 1.5em; padding-left: .1rem; list-style: none; }
.prose li { position: relative; padding-left: 1.35rem; margin-bottom: .5em; }
.prose li::before {
  content: "";
  position: absolute;
  left: .1rem; top: .85em;
  width: .7rem; height: 2px;
  border-radius: 1px;
  background: var(--accent);
  opacity: .7;
}
.prose strong {
  font-weight: 600;
  color: var(--accent);
}

.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  text-decoration: none;
  color: var(--ink-2);
  transition: color .3s;
}
.pager a:last-child { text-align: right; align-items: flex-end; }
.pager a:hover { color: var(--accent); }
.pager span {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .1em;
  color: var(--ink-3);
}
.pager strong { font-weight: 500; font-size: .92rem; line-height: 1.6; }

/* ---------- 14. Toast & noscript ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 90;
  max-width: calc(100vw - 2.4rem);
  padding: .65rem 1.1rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  color: var(--ink);
  font-size: .78rem;
  letter-spacing: .02em;
  line-height: 1.6;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, 1.4rem);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.noscript {
  margin: 2rem auto;
  max-width: 36rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: .82rem;
  color: var(--ink-2);
}

/* ---------- 14b. Settings panel ---------- */
/* 打开设置时给页面加一层很淡的遮罩：面板与搜索框有少量位置重叠，
   有遮罩时读起来就是「弹层在前」，而不是内容互相穿透。 */
.settings-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(35, 45, 60, .09);
  opacity: 0;
  pointer-events: none;
  transition: opacity .24s var(--ease);
}
[data-theme="night"] .settings-scrim { background: rgba(0, 0, 0, .22); }
html.settings-open .settings-scrim { opacity: 1; pointer-events: auto; }

.settings-panel {
  position: fixed;
  top: calc(var(--head-h) + .55rem);
  right: clamp(1rem, 4vw, 3rem);
  z-index: 70;
  width: min(21rem, calc(100vw - 2rem));
  max-height: calc(100svh - var(--head-h) - 1.5rem);
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  font-size: .8rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.985);
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .28s var(--ease),
              visibility .28s, box-shadow .28s var(--ease);
}
.settings-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}
.sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.sp-close {
  width: 1.5rem; height: 1.5rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ink-3);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.sp-close:hover { background: var(--surface-2); color: var(--accent); }
.sp-group { padding: .9rem 1rem; border-bottom: 1px solid var(--line-soft); }
.sp-group h2 {
  margin: 0 0 .65rem;
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-3);
}
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.sp-row > span { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.sp-row b { font-size: .8rem; font-weight: 500; color: var(--ink); }
.sp-row em { font-style: normal; font-size: .66rem; line-height: 1.55; color: var(--ink-3); }

.sp-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sp-switch i {
  position: relative;
  flex: none;
  width: 2.1rem; height: 1.15rem;
  border: 1px solid var(--card-border);
  border-radius: 999px;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  cursor: pointer;
  transition: background-color .25s, border-color .25s;
}
.sp-switch i::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: .8rem; height: .8rem;
  border-radius: 50%;
  background: var(--ink-3);
  transition: transform .28s var(--ease), background-color .25s;
}
.sp-switch input:checked + i { background: var(--accent); border-color: var(--accent); }
.sp-switch input:checked + i::after { transform: translateX(.9rem); background: var(--on-accent); }
.sp-switch input:focus-visible + i { outline: 2px solid var(--accent); outline-offset: 2px; }

.sp-select select,
.sp-field input {
  width: 100%;
  padding: .42rem .6rem;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
  color: var(--ink);
  font-family: var(--sans);
  font-size: .76rem;
}
.sp-select select { width: 8.2rem; flex: none; }
.sp-select select:focus, .sp-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.sp-field, .sp-range { display: flex; flex-direction: column; gap: .32rem; margin-top: .75rem; font-size: .7rem; color: var(--ink-3); }
.sp-range span { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.sp-range input[type="range"] { width: 100%; accent-color: var(--accent); }
.sp-range b { font-family: var(--mono); font-weight: 500; color: var(--accent); }
.sp-hint { margin: .5rem 0 0; font-size: .66rem; line-height: 1.6; color: var(--ink-3); }

/* 界面风格：分段选择器 */
.sp-seg { display: flex; gap: .35rem; }
.sp-seg button {
  flex: 1;
  padding: .42rem .2rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--ink-2);
  font-size: .74rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .25s, border-color .25s, background-color .25s;
}
.sp-seg button:hover { color: var(--accent); border-color: var(--accent-edge); }
.sp-seg button[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

/* 背景：本机图片按钮 / 拖放 / 预览 */
.sp-file-row { display: flex; align-items: center; gap: .45rem; margin-top: .6rem; }
.sp-file-row input[type="file"] { display: none; }
.sp-file-btn, .sp-clear-btn {
  flex: none;
  padding: .4rem .7rem;
  border: 1px solid var(--card-border);
  border-radius: 7px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--ink-2);
  font-size: .72rem;
  cursor: pointer;
}
.sp-file-btn:hover, .sp-clear-btn:hover { color: var(--accent); border-color: var(--accent-edge); }
.sp-file-hint { flex: 1; min-width: 0; font-size: .64rem; color: var(--ink-3); line-height: 1.4; }
.sp-drop.is-dropping { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; }
.sp-preview {
  display: none;
  height: 4.2rem;
  margin-top: .65rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background-image: var(--bg-image, none);
  background-size: cover;
  background-position: center;
  box-shadow: var(--field-shadow);
}
html[data-bg="on"] .sp-preview { display: block; }

.sp-about { padding: .75rem 1rem; border-bottom: 1px solid var(--line-soft); }
.sp-about button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  padding: .5rem .65rem;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--ink);
  font-size: .78rem;
  cursor: pointer;
}
.sp-about button:hover { color: var(--accent); border-color: var(--accent-edge); }
.sp-about button span { font-size: .66rem; color: var(--ink-3); }
.sp-note { margin: 0; padding: .8rem 1rem; font-size: .66rem; line-height: 1.65; color: var(--ink-3); }

/* 「关于」悬浮窗：和设置面板共用同一组风格变量 */
.about-scrim {
  position: fixed;
  inset: 0;
  z-index: 78;
  background: rgba(35, 45, 60, .26);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
[data-theme="night"] .about-scrim { background: rgba(0, 0, 0, .46); }
.about-scrim[hidden], .about-panel[hidden] { display: none; }
.about-panel {
  position: fixed;
  left: 50%; top: 50%;
  z-index: 82;
  width: min(31rem, calc(100vw - 2rem));
  max-height: min(34rem, calc(100svh - 3rem));
  overflow-y: auto;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  transform: translate(-50%, -50%);
  animation: pop .3s var(--ease) backwards;
}
@keyframes pop {
  from { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.ap-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 1.1rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.ap-close {
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border: 0; border-radius: 6px;
  background: none; color: var(--ink-3);
  font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.ap-close:hover { background: var(--surface-2); color: var(--accent); }
.ap-body { padding: 1.1rem 1.2rem 1.35rem; }
.ap-hero { display: flex; align-items: center; gap: .85rem; }
.ap-avatar {
  flex: none;
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border: 1px solid var(--accent-edge);
  border-radius: 12px;
  background: var(--accent-wash);
  color: var(--accent);
  font-size: 1.15rem; font-weight: 600;
}
.ap-hero strong { display: block; font-size: .98rem; font-weight: 600; }
.ap-hero em { display: block; margin-top: .1rem; font-style: normal; font-size: .7rem; color: var(--ink-3); }
.ap-intro { margin: .9rem 0 1rem; font-size: .78rem; line-height: 1.85; color: var(--ink-2); }
.ap-facts {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: .4rem .9rem;
  padding: .8rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--field-bg);
  box-shadow: var(--field-shadow);
}
.ap-facts dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; color: var(--ink-3); }
.ap-facts dd { font-size: .74rem; color: var(--ink-2); }
.ap-log-title {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 1.3rem 0 .7rem;
  font-size: .84rem; font-weight: 600;
}
.ap-log-title small { font-family: var(--mono); font-size: .66rem; font-weight: 400; color: var(--ink-3); }
.ap-log { list-style: none; margin: 0; padding: 0; }
.ap-log > li {
  position: relative;
  padding: 0 0 1rem 1.1rem;
  border-left: 1px solid var(--line);
  margin-left: .25rem;
}
.ap-log > li:last-child { border-left-color: transparent; padding-bottom: .2rem; }
.ap-log > li::before {
  content: "";
  position: absolute; left: -4px; top: .4rem;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.ap-log time { font-family: var(--mono); font-size: .64rem; letter-spacing: .08em; color: var(--ink-3); }
.ap-log b { display: block; margin: .15rem 0 .4rem; font-size: .8rem; font-weight: 600; }
.ap-log .ap-items { display: flex; flex-direction: column; gap: .18rem; }
.ap-log .ap-items span { font-size: .71rem; line-height: 1.65; color: var(--ink-2); }
.ap-log .ap-items span::before { content: "· "; color: var(--accent); }
.ap-foot { margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--line-soft); font-size: .66rem; line-height: 1.7; color: var(--ink-3); }

/* ---------- 15. Motion ---------- */
/* 用 backwards 而非 both：动画结束后不残留 transform，避免生成多余的层叠上下文 */
@media (prefers-reduced-motion: no-preference) {
  .start > * {
    animation: rise .85s var(--ease) backwards;
  }
  .start > *:nth-child(2) { animation-delay: .06s; }
  .start > *:nth-child(3) { animation-delay: .14s; }
  .start > *:nth-child(4) { animation-delay: .22s; }
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 16. Responsive ---------- */
@media (max-width: 1024px) {
  .start { max-width: 44rem; }
  .clock { font-size: clamp(3.4rem, 11vw, 5.6rem); }
}

@media (max-width: 700px) {
  :root { --head-h: 3.9rem; }
  body { font-size: 15.5px; }
  .brand-text strong { font-size: .92rem; }
  .site-nav { gap: 1rem; }
  .site-nav a { font-size: .78rem; }
  .theme-toggle { padding: .35rem .55rem; }

  .link-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { padding: .85rem .9rem; }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line-soft); }

  .post-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .3rem 1rem;
    padding-block: 1.1rem;
  }
  .post-date { grid-column: 1 / -1; order: -1; }
  .post-excerpt { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .pager { grid-template-columns: 1fr; gap: 1.2rem; }
  .pager a:last-child { text-align: left; align-items: flex-start; }
}

@media (max-width: 600px) {
  :root { --head-h: 5.4rem; }
  .head-inner {
    flex-wrap: wrap;
    align-content: center;
    gap: 0;
    padding-block: .5rem .45rem;
  }
  .brand { order: 1; }
  .head-actions { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 1.5rem;
    padding-top: .45rem;
    border-top: 1px solid var(--line-soft);
  }
  .site-nav a { font-size: .8rem; }
}

@media (max-width: 480px) {
  .start { gap: 1.35rem; padding-block: 1.8rem 2.2rem; }
  .brand-mark { width: 1.8rem; height: 1.8rem; font-size: .84rem; }
  .clock { font-size: clamp(3rem, 16vw, 4.2rem); }
  .clock .sec { font-size: .8rem; margin-left: .2rem; }
  .search-field { padding-left: .8rem; gap: .5rem; }
  .link { padding: .85rem .8rem .9rem; min-height: 5.4rem; }
  .link-name { font-size: .78rem; }
  .link-desc { font-size: .62rem; }
  .article { padding-block: 1.8rem 3rem; }
}

/* 矮屏（常见 1366×768 笔记本）再收紧一档，尽量让整页落在首屏内。
   入口浮层是绝对定位，卡片变高不会把首屏撑出滚动条。 */
@media (max-height: 820px) and (min-width: 701px) {
  .start { gap: .95rem; padding-block: 1.2rem 1.5rem; }
  .clock { font-size: clamp(3rem, 7vw, 4.6rem); }
  .eyebrow { margin-bottom: .45rem; }
  .links-head { margin-bottom: .5rem; }
  .link { min-height: 5.5rem; padding: .8rem .9rem .85rem; }
  .link-mark { width: 1.65rem; height: 1.65rem; margin-bottom: .2rem; }
  .stat { padding: .65rem .9rem; }
}

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

/* ---------- 17. Touch / narrow screens ----------
   触屏没有 hover，常用入口改为「常驻、在文档流内」：不会遮挡内容，
   也不会出现「点一下就展开、再点一下又收起」的困惑。
   站点状态仍是右下角小按钮，改为点击展开（点击 = 钉住）。 */
@media (max-width: 700px), (hover: none) and (pointer: coarse) {
  .links-dock { display: block; min-height: 0; }
  .links-dock > .dock-trigger { display: none; }
  .links-panel {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    box-shadow: var(--card-shadow);
  }
  .links-dock::after { display: none; }
  .le-head { display: none; }
  .le-row { grid-template-columns: 2.6rem minmax(0, 1fr) 1.7rem; }
  .le-row input[data-f="mark"] { grid-column: 1; grid-row: 1; }
  .le-row input[data-f="name"] { grid-column: 2; grid-row: 1; }
  .le-row input[data-f="desc"] { grid-column: 1 / 3; grid-row: 2; }
  .le-row input[data-f="url"]  { grid-column: 1 / 3; grid-row: 3; }
  .le-row .le-del { grid-column: 3; grid-row: 1 / 4; }
}

@media (max-width: 600px) {
  .status-dock { right: .7rem; bottom: .7rem; }
  .status-dock .dock-trigger { padding: .28rem .6rem; font-size: .62rem; }
  .settings-panel { right: .7rem; width: min(20rem, calc(100vw - 1.4rem)); }
  .about-panel { width: calc(100vw - 1.4rem); }
}

/* 中等高度屏幕：浮层略收紧，但入口卡片保持纵向、保留说明，不再压成矮条 */
@media (max-height: 950px) and (min-width: 701px) {
  .links-panel { padding: .85rem 1rem .9rem; }
  .links-head { margin-bottom: .55rem; }
  .link-grid { gap: .55rem; }
  .link { min-height: 5.6rem; padding: .8rem .9rem .85rem; }
  .link-mark { width: 1.7rem; height: 1.7rem; margin-bottom: .2rem; font-size: .8rem; }
}

/* 极矮屏（如 1024×600、800×600）再收紧，优先保证一屏看完 */
@media (max-height: 700px) and (min-width: 701px) {
  :root { --head-h: 3.6rem; }
  body[data-page="home"] .start { gap: .7rem; padding-block: .7rem; }
  .clock { font-size: clamp(2.7rem, 6.5vw, 4rem); }
  .eyebrow { margin-bottom: .3rem; }
  .links-dock { min-height: 2.1rem; }
  .links-panel { padding: .6rem .8rem .65rem; }
  .link { min-height: 4.6rem; padding: .6rem .8rem .65rem; }
  .link-mark { width: 1.45rem; height: 1.45rem; margin-bottom: .1rem; }
}


/* ============================================================
   18. 时钟三风格（paint-only；刻意不写 font-size、不加伪元素/transform，
       三列网格 1fr auto 1fr 与四档响应式字号全部保持不变）
   ============================================================ */
html[data-style="flat"] .clock { color: var(--ink); text-shadow: none; font-weight: 400; letter-spacing: -.04em; }
html[data-style="flat"] .clock-main { color: inherit; background: none; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; }
html[data-style="flat"] .start-top { background: none; }
html[data-style="flat"][data-theme="night"] .clock { color: #eef1f5; text-shadow: none; }

html[data-style="glass"] .clock { color: var(--ink); text-shadow: none; font-weight: 460; letter-spacing: -.05em; }
html[data-style="glass"] .start-top {
  background: radial-gradient(48% 72% at 50% 58%, rgba(74, 96, 121, .10), transparent 70%);
  background-repeat: no-repeat;
}
html[data-style="glass"] .clock-main { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; -webkit-text-stroke: 0; }
/* 毛玻璃时钟改用纯色墨色（见上方 .clock-main 已设 var(--ink)）；
   不再用 background-clip:text 渐变——Chromium 在 letter-spacing 下会裁掉首尾字形边缘。 */
html[data-style="glass"][data-theme="night"] .clock { color: var(--ink); text-shadow: none; }
html[data-style="glass"][data-theme="night"] .start-top {
  background: radial-gradient(48% 72% at 50% 58%, rgba(159, 178, 201, .12), transparent 70%);
  background-repeat: no-repeat;
}
/* 秒位不参与渐变/描边，只继承强调色；几何属性一律不动 */
html[data-style] .clock .sec { -webkit-text-fill-color: var(--accent); color: var(--accent); text-shadow: none; -webkit-text-stroke: 0; }

html[data-style="skeuo"] .clock {
  color: #3a4657; font-weight: 500; letter-spacing: -.045em;
  text-shadow: -1px -1px 0 rgba(255,255,255,.32), 1px 1px 0 rgba(35,47,64,.20), 1px 2px 4px rgba(35,47,64,.12);
}
html[data-style="skeuo"] .clock-main { background: none; -webkit-text-fill-color: currentColor; -webkit-text-stroke: .35px rgba(35,47,64,.28); paint-order: stroke fill; }
html[data-style="skeuo"] .start-top { background: radial-gradient(52% 78% at 50% 55%, rgba(35,47,64,.055), transparent 72%); background-repeat: no-repeat; }
html[data-style="skeuo"][data-theme="night"] .clock {
  color: #cdd7e3;
  text-shadow: -1px -1px 0 rgba(190,208,228,.16), 1px 1px 0 rgba(0,0,0,.55), 2px 3px 7px rgba(0,0,0,.50);
}
html[data-style="skeuo"][data-theme="night"] .clock-main { -webkit-text-stroke: .4px rgba(190,208,228,.22); paint-order: stroke fill; }
html[data-style="skeuo"][data-theme="night"] .start-top { background: radial-gradient(52% 78% at 50% 55%, rgba(190,208,228,.075), transparent 72%); background-repeat: no-repeat; }

/* ============================================================
   19. 背景层（bg-photo + backdrop 柔光；极光已移除）
   ============================================================ */

/* ============================================================
   20. skeuo 按压 / 选中态（只用 inset，刻意不加 transform）
   ============================================================ */
html[data-style="skeuo"] .icon-btn:active,
html[data-style="skeuo"] .theme-toggle:active,
html[data-style="skeuo"] .dock-trigger:active,
html[data-style="skeuo"] .sp-file-btn:active,
html[data-style="skeuo"] .sp-clear-btn:active,
html[data-style="skeuo"] .sp-about button:active,
html[data-style="skeuo"] .le-actions button:active,
html[data-style="skeuo"] .engine-item[aria-pressed="true"],
html[data-style="skeuo"] .filter[aria-pressed="true"],
html[data-style="skeuo"] .sp-seg button[aria-checked="true"] {
  box-shadow: var(--press-shadow);
  background: var(--field-bg);
  color: var(--accent);
}

/* 所有弹出窗口共用 --panel-* 这一组材质：风格、透明度、模糊完全一致，
   毛玻璃下不会再出现「搜索框半透、最近搜索却是实底」的撕裂感。
   .le-actions 是编辑器内部吸底操作栏，仍用实底盖住下方滚动的列表。 */
.search-history {
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur);
  backdrop-filter: var(--panel-blur);
  border-color: var(--panel-border);
}
.le-actions {
  background: var(--dropdown-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ============================================================
   21. 圆角滚动条（枚举式宿主）
       .le-list 只纳入选择器组、不新增 overflow，避免与 .le-actions sticky 底栏叠出双滚动条
   ============================================================ */
html, .links-panel, .settings-panel, .about-panel, .tiles-view, .notice-full, .le-list {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
html::-webkit-scrollbar, .links-panel::-webkit-scrollbar, .settings-panel::-webkit-scrollbar,
.about-panel::-webkit-scrollbar, .tiles-view::-webkit-scrollbar, .notice-full::-webkit-scrollbar,
.le-list::-webkit-scrollbar { width: 10px; height: 10px; }
html::-webkit-scrollbar-track, .links-panel::-webkit-scrollbar-track, .settings-panel::-webkit-scrollbar-track,
.about-panel::-webkit-scrollbar-track, .tiles-view::-webkit-scrollbar-track, .notice-full::-webkit-scrollbar-track,
.le-list::-webkit-scrollbar-track {
  background: var(--scroll-track); border-radius: 999px;
}
html::-webkit-scrollbar-thumb, .links-panel::-webkit-scrollbar-thumb, .settings-panel::-webkit-scrollbar-thumb,
.about-panel::-webkit-scrollbar-thumb, .tiles-view::-webkit-scrollbar-thumb, .notice-full::-webkit-scrollbar-thumb,
.le-list::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb); border-radius: 999px;
  border: 3px solid transparent; background-clip: padding-box;
}
html::-webkit-scrollbar-thumb:hover, .links-panel::-webkit-scrollbar-thumb:hover, .settings-panel::-webkit-scrollbar-thumb:hover,
.about-panel::-webkit-scrollbar-thumb:hover, .tiles-view::-webkit-scrollbar-thumb:hover, .notice-full::-webkit-scrollbar-thumb:hover,
.le-list::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover); border: 3px solid transparent; background-clip: padding-box;
}

/* ============================================================
   22. 公告条（fixed 细条，不参与文档高度；全文浮层用实底）
   ============================================================ */
.notice {
  position: fixed;
  /* 与页脚那条分割线之间留出约 1rem 空隙，不再紧贴 */
  bottom: calc(clamp(.9rem, 2.4vh, 1.5rem) + 4.5rem);
  /* 不用 transform 居中：否则会成为层叠上下文，锁死 .notice-full 的 z-index */
  left: var(--gutter); right: var(--gutter);
  width: min(var(--notice-w), calc(100vw - 2 * var(--gutter))); margin-inline: auto;
  height: 2.15rem;
  /* 公告条必须留在 root 层且高于 main，否则 main 的透明盒子会吃掉它的
     点击/悬浮事件（公告全文、关闭按钮都要用）。 */
  z-index: 35;
  display: flex; align-items: center; gap: .7rem;
  padding: 0 .6rem 0 .85rem;
  border: 1px solid var(--panel-border);
  border-radius: var(--panel-radius);
  background: var(--panel-bg);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
  color: var(--notice-ink);
  font-size: .8rem;
  box-shadow: var(--shadow-sm);
}
.notice[hidden] { display: none; }
/* .notice 是 fixed + 数值 z-index 的层叠上下文，子元素 z-index:58 会被锁死在 35 层；
   全文展开时把整条提到 58 层，才不会被 .links-panel(40)/.status-dock(45) 盖住。 */
.notice:has(.notice-full:not([hidden]), .notice-full.is-open) { z-index: 72; }
/* 不要圆形外框：纯文字【公告】加粗，与右侧正文落在同一基线 */
.notice-tag {
  flex: none; padding: 0; border: 0; background: none;
  color: var(--accent); font-family: var(--sans);
  font-size: .78rem; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
.notice-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; cursor: pointer; outline-offset: 3px; }
/* 无缝跑马灯：两份等宽副本，轨道宽度恰为 2×(文本+间距)，translateX(-50%) 正好
   平移一份的距离。用 -50% 而非 var()，避免自定义属性在 keyframes 里不随行内值重算
   的浏览器差异（规范 2.5 明确要求 0 → -50%）。 */
.notice-track { display: inline-flex; align-items: center; gap: 0; will-change: transform; }
.notice-track.is-marquee > span { flex: none; padding-right: 3rem; }
.notice-track.is-marquee { animation: notice-marquee linear infinite; }
@keyframes notice-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.notice:hover .notice-track, .notice:focus-within .notice-track { animation-play-state: paused; }
/* 原 44px 方形按钮比整条公告还高，会把文字顶歪；改成条内等高 */
.notice-close {
  flex: none; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border: 0; border-radius: 5px; background: none; color: var(--ink-3);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.notice-close:hover { color: var(--accent); }
.notice-full {
  position: absolute; bottom: calc(100% + .5rem); left: 0; right: 0;
  z-index: 58; padding: .7rem .85rem;
  max-height: min(40vh, 16rem); overflow-y: auto;
  border: 1px solid var(--panel-border); border-radius: var(--panel-radius);
  background: var(--panel-bg); color: var(--notice-ink);
  -webkit-backdrop-filter: var(--panel-blur); backdrop-filter: var(--panel-blur);
  box-shadow: var(--shadow-lg); font-size: .8rem; line-height: 1.75;
  white-space: normal; word-break: break-word;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), visibility .18s;
}
/* 用 visibility/opacity 处理 [hidden]，不用 display:none：保留 .18s 进/出过渡。
   作者样式 display:block 覆盖 UA 的 [hidden]{display:none}；隐藏态仍不可命中测试，
   展开态（:not([hidden]) / .is-open）必须可命中，鼠标才能移到向上展开的全文上。 */
.notice-full[hidden] { display: block; opacity: 0; visibility: hidden; pointer-events: none; }
.notice-full:not([hidden]), .notice-full.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ============================================================
   23. 向下箭头
   ============================================================ */
.to-tiles {
  position: fixed; bottom: clamp(.9rem, 2.4vh, 1.5rem);
  left: 0; right: 0; margin-inline: auto;
  z-index: 36; width: 2.15rem; height: 2.15rem;
  display: grid; place-items: center;
  border: 1px solid var(--card-border); border-radius: 999px;
  background: var(--btn-bg); box-shadow: var(--btn-shadow);
  color: var(--ink-3); cursor: pointer; opacity: .55;
  /* 过渡统一写在文件末尾（补丁 C 的 .4s 组之后的补全规则），避免同一元素三处声明 */
}
.to-tiles:hover, .to-tiles:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent-edge); }
.to-tiles svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) {
  .to-tiles svg { animation: nudge 2.8s ease-in-out infinite; }
  .to-tiles:hover svg { animation-play-state: paused; }
  @keyframes nudge { 50% { transform: translateY(4px); } }
}

/* ============================================================
   24. 二级界面（fixed 全屏覆盖层；首页 DOM 不动，单屏高度恒定）
   ============================================================ */
.tiles-view {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; overflow-x: hidden;
  background: var(--dropdown-bg);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(28px);
  transition: opacity .36s var(--ease), transform .36s var(--ease), visibility .36s;
}
html.tiles-open .tiles-view {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition-delay: .08s, .08s, 0s;
}
.tiles-inner { max-width: 60rem; margin-inline: auto; padding: clamp(1.5rem, 5vh, 3rem) var(--gutter); }
.tiles-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1.2rem;
  margin-bottom: clamp(1.2rem, 3vh, 2rem);
}
/* 第二屏只留主题按钮与齿轮设置按钮；标题旁那个不直观的方形按钮已删除。
   .icon-btn 必须单独声明：原 .tiles-actions button 是 (0,1,1)，会盖掉
   .icon-btn 的 (0,1,0)，把方形图标按钮撑成宽扁文字按钮，图标因此错位。 */
.tiles-actions .theme-toggle {
  padding: .4rem .8rem; border: 1px solid var(--card-border); border-radius: var(--card-radius);
  background: var(--btn-bg); box-shadow: var(--btn-shadow);
  color: var(--ink-2); font-size: .8rem; cursor: pointer;
  transition: color .25s, border-color .25s;
}
.tiles-actions .icon-btn {
  width: 2.05rem; height: 2.05rem; padding: 0;
  border-radius: var(--card-radius); background: var(--btn-bg);
  box-shadow: var(--btn-shadow); color: var(--ink-2);
}
.tiles-actions .icon-btn svg { width: 16px; height: 16px; }
.tiles-actions button:hover { color: var(--accent); border-color: var(--accent-edge); }
.tiles-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.tiles-sub { margin: 0; font-size: .82rem; color: var(--ink-3); }
.tiles-actions { display: flex; gap: .5rem; margin-left: auto; }
.tiles-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 46rem; margin-inline: auto;   /* 只剩两张卡时也不会被拉成通栏 */
}
.tile {
  display: flex; flex-direction: column; gap: .4rem;
  min-height: clamp(11rem, 26vh, 15rem);
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid var(--card-border); border-radius: var(--card-radius);
  background: var(--card-bg); box-shadow: var(--card-shadow);
  color: var(--tile-ink); text-decoration: none; text-align: left;
  cursor: pointer; transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.tile:hover { border-color: var(--accent-edge); transform: translateY(-2px); }
.tile-mark {
  width: 2.2rem; height: 2.2rem; display: grid; place-items: center;
  margin-bottom: .3rem; border-radius: var(--card-radius);
  background: var(--tile-bg); border: 1px solid var(--tile-edge);
  color: var(--accent); font-size: .95rem;
}
.tile-title { font-size: .94rem; font-weight: 500; color: var(--ink); }
.tile-desc { font-size: .72rem; line-height: 1.6; color: var(--ink-3); }
.tile-badge {
  align-self: flex-start; margin-top: auto; padding: .15rem .5rem;
  border-radius: 999px; background: var(--notice-bg); color: var(--notice-ink);
  font-family: var(--mono); font-size: .6rem; letter-spacing: .06em;
}
.tile.is-soon { color: var(--ink-3); cursor: default; }
.tile.is-soon .tile-title, .tile.is-soon .tile-desc, .tile.is-soon .tile-mark { color: var(--ink-3); }
.tile.is-soon:hover { transform: none; border-color: var(--card-border); }

@media (prefers-reduced-motion: no-preference) {
  .tiles-view.is-in .tile {
    animation: tile-in .42s var(--ease) backwards;
    animation-delay: calc(.16s + var(--i, 0) * 55ms);
  }
  @keyframes tile-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
}

/* 首页退出：opacity 常驻（reduced-motion 也生效 —— main 的 opacity<1 才会生成层叠上下文，
   把内部 .search{z-index:55} 隔离在 tiles-view(50) 之下）；位移/模糊只在 no-preference 下生效。
   fixed 层只淡 opacity，绝不加 transform/filter，否则会成为 fixed 背景层的 containing block 祖先。 */
/* 首页退出与二级界面淡入统一 .36s，转场节奏一致。
   关键：不能给 main 加 opacity/filter/transform —— main 里装着 .search-field 的
   backdrop-filter，祖先一旦在过渡期间成为 backdrop root，搜索框的模糊采样底会
   瞬间失效，毛玻璃下退回首页时就会出现「透明度不一致」的闪烁。
   所以只淡出 .site-head / .start-top / .links-dock，搜索框保持静止，
   反正它被 z50 的实底覆盖层挡住，进出时根本看不见。 */
.site-head, .start-top, .search, .links-dock {
  transition: transform .36s var(--ease), opacity .36s var(--ease), filter .36s var(--ease);
}
html.tiles-open .site-head, html.tiles-open .start-top, html.tiles-open .search,
html.tiles-open .links-dock {
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  html.tiles-open .site-head, html.tiles-open .start-top, html.tiles-open .search,
  html.tiles-open .links-dock {
    transform: translateY(-24px) scale(.985); filter: blur(4px);
  }
}
/* 背景层不再淡出：.tiles-view 是 z50 的实底全屏覆盖，本来就看不见背景。
   若把 .backdrop / .bg-photo 一起淡出，退回首页时它们会各自以
   .4s / .55s 淡入，搜索框 backdrop-filter 的采样底持续变化，
   于是出现「透明度一瞬间不一致」。保持恒定即从根上消除。 */
.status-dock, .notice, .to-tiles { transition: opacity .36s var(--ease); }
html.tiles-open .status-dock,
html.tiles-open .notice,
html.tiles-open .to-tiles { opacity: 0; pointer-events: none; }
/* 进入宫格时强制收起两个浮层，避免它们浮在宫格(50)之上 */
html.tiles-open .links-panel,
html.tiles-open .status-panel { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); }
html.tiles-open { overflow: hidden; }
/* 补丁 C 的 .4s 组会盖掉 .to-tiles 的基础过渡；这里补回 hover 三项，
   并保留 opacity .4s 作为首页退出淡出时长（同特异性、位置靠后，最终生效这一条）。 */
.to-tiles {
  transition: opacity .36s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}

@media (max-width: 700px) {
  .tiles-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
  .tile { min-height: 7.5rem; padding: .85rem .9rem; }
  .tile-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .notice { width: calc(100vw - 2 * var(--gutter)); }
}

/* ============================================================
   25. reduced-motion 补充（全局 .001ms 之外的显式兜底）
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .notice-track { animation: none !important; transform: none !important; }
  .notice-viewport { text-overflow: ellipsis; }
  .search-history, .settings-panel { transform: none !important; }
  .tiles-view { transform: none !important; }
  .to-tiles svg { animation: none !important; }
  .site-head, .start-top, .search, .links-dock { transform: none !important; filter: none !important; }
}

/* ============================================================
   26. 首页上移量断点覆盖（必须排在全部既有 media query 之后）
   ============================================================ */
/* 变量必须写在声明它们的同一个选择器上：写在 :root 会被 .wrap 自身的
   --home-mb / --home-lift 声明遮蔽，五档覆盖全部失效。 */
@media (max-height: 950px) and (min-width: 701px) {
  body[data-page="home"] main > .wrap { --home-lift: clamp(2rem, 4.6vh, 3rem); }
}
@media (max-height: 820px) and (min-width: 701px) {
  body[data-page="home"] main > .wrap { --home-lift: clamp(1.6rem, 3.8vh, 2.4rem); }
}
@media (max-height: 700px) and (min-width: 701px) {
  body[data-page="home"] main > .wrap { --home-lift: clamp(1rem, 2.6vh, 1.6rem); --home-mb: 1.6rem; }
}
@media (max-width: 700px) {
  body[data-page="home"] main > .wrap { --home-lift: clamp(.9rem, 2vh, 1.4rem); }
}
@media (max-width: 480px) {
  body[data-page="home"] main > .wrap { --home-lift: .6rem; }
}


/* ============================================================
   27. 字号档位：把原先 .6–.7rem 的小字统一抬到可读区间
   放在文件末尾，同特异性后者赢；不改动各断点里的几何尺寸。
   ============================================================ */
.eyebrow { font-size: .82rem; }
.brand-text strong { font-size: 1rem; }
.site-nav a { font-size: .9rem; }
.theme-toggle { font-size: .8rem; }
.sh-head { font-size: .95rem; letter-spacing: .08em; }
.sh-head button { font-size: .84rem; }
.sh-item { font-size: .94rem; }
.dock-trigger { font-size: .82rem; }
.sp-head { font-size: .8rem; }
.sp-group h2 { font-size: .7rem; }
.sp-row b { font-size: .84rem; }
.sp-row em, .sp-hint, .sp-note, .sp-about button span { font-size: .76rem; }
.sp-select select, .sp-field input { font-size: .86rem; }
.sp-field, .sp-range { font-size: .8rem; }
.sp-seg button { font-size: .84rem; }
.sp-file-btn, .sp-clear-btn { font-size: .76rem; }
.sp-file-hint { font-size: .74rem; }
.notice { font-size: .88rem; }
.notice-tag { font-size: .86rem; }
.notice-full { font-size: .86rem; }
.tiles-sub { font-size: .88rem; }
.tile-title { font-size: 1rem; }
.tile-desc { font-size: .86rem; }
.tile-badge { font-size: .8rem; }
.ap-facts dt, .ap-log time, .ap-foot { font-size: .74rem; }
.ap-intro { font-size: .82rem; }
.ap-log .ap-items span { font-size: .75rem; }

/* 搜索框与所有弹出层用同一组 --panel-* 材质，毛玻璃下不再撕裂 */
.search-field { background: var(--panel-bg); }

/* ============================================================
   28. 最近搜索：每条记录带独立删除按钮
   ============================================================ */
.sh-row { display: flex; align-items: center; border-top: 1px solid var(--line-soft); border-radius: 6px; }
.sh-row:first-child { border-top: 0; }
.sh-row:hover { background: var(--surface-2); }
.sh-item { flex: 1 1 auto; min-width: 0; border: 0; padding: .55rem .5rem; }
.sh-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sh-item:hover { background: transparent; color: var(--accent); }
.sh-del {
  flex: none; width: 1.85rem; height: 1.85rem; margin-right: .25rem;
  display: grid; place-items: center;
  border: 0; border-radius: 5px; background: transparent;
  color: var(--ink-3); cursor: pointer; opacity: .5;
  transition: opacity .2s, color .2s, background-color .2s;
}
.sh-row:hover .sh-del, .sh-del:focus-visible { opacity: 1; }
.sh-del:hover { color: var(--danger); background: var(--danger-wash); }
.sh-del svg { width: 13px; height: 13px; }

/* ============================================================
   29. 二级界面顶部的「上滑返回」：与首页底部下滑箭头成对
   ============================================================ */
.to-home {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 auto clamp(1rem, 2.6vh, 1.8rem);
  padding: .45rem 1.1rem;
  border: 1px solid var(--card-border); border-radius: 999px;
  background: var(--btn-bg); box-shadow: var(--btn-shadow);
  color: var(--ink-3); font-size: .8rem; letter-spacing: .02em;
  cursor: pointer; opacity: .72;
  transition: opacity .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .3s var(--ease);
}
.to-home:hover, .to-home:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent-edge); }
.to-home svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: no-preference) {
  .to-home svg { animation: nudge-up 2.8s ease-in-out infinite; }
  .to-home:hover svg { animation-play-state: paused; }
  @keyframes nudge-up { 50% { transform: translateY(-4px); } }
}
@media (prefers-reduced-motion: reduce) { .to-home svg { animation: none !important; } }

/* ============================================================
   30. 背景图下的文字保护
   与遮罩强度解耦：用户把遮罩调到 0% 时，标题、时间、引擎、
   顶部 tab、备案信息等裸文本仍然可读。
   只保留文字光晕/描边（text-shadow / drop-shadow），不再画椭圆背板或底板。
   ============================================================ */
html[data-bg="on"] {
  --text-halo: 0 1px 3px rgba(255, 255, 255, .75),
               0 1px 2px rgba(16, 24, 34, .30);
}
html[data-bg="on"][data-theme="night"] {
  --text-halo: 0 1px 3px rgba(8, 12, 18, .75),
               0 1px 2px rgba(0, 0, 0, .50);
}
html[data-bg="on"] .brand-text strong,
html[data-bg="on"] .site-nav a,
html[data-bg="on"] .homepage-hint,
html[data-bg="on"] .theme-toggle,
html[data-bg="on"] .eyebrow,
html[data-bg="on"] .clock,
html[data-bg="on"] .engine-item,
html[data-bg="on"] .engine-name,
html[data-bg="on"] .search-icon,
html[data-bg="on"] .dock-trigger,
html[data-bg="on"] .search-field input,
html[data-bg="on"] .to-tiles,
html[data-bg="on"] .tiles-head h2,
html[data-bg="on"] .tiles-sub,
html[data-bg="on"] .tile-title,
html[data-bg="on"] .tile-desc { text-shadow: var(--text-halo); }
/* glass 大时钟为纯色墨字，开启背景图时用 drop-shadow 作用在已绘制像素上做轮廓保护
   （比 text-shadow 更适合大字号数字）；浅/深主题各用对应色。 */
html[data-bg="on"][data-style="glass"] .clock-main {
  text-shadow: none;
  filter: drop-shadow(0 1px 2px rgba(16,24,34,.35)) drop-shadow(0 1px 3px rgba(255,255,255,.6));
}
html[data-bg="on"][data-theme="night"][data-style="glass"] .clock-main {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 1px 3px rgba(8,12,18,.8));
}
/* 遮罩只用文字光晕/描边（text-shadow / drop-shadow），不再画椭圆背板或文字底板：
   柔光板会在时钟下留一圈椭圆、给整段文字垫出「块状遮罩」，观感突兀，已全部移除。 */