/* =========================================================
 *  theme.css —— 主题层（切换按钮 + SYNAPSE 皮肤）
 *  ---------------------------------------------------------
 *  两套主题，同一个 DOM、同一套布局：
 *
 *    · 默认（KISARA）—— 深藏青 + 玫红，原有设计，一像素不动
 *    · SYNAPSE        —— 深空紫罗兰 + 白字 + 玻璃卡片
 *
 *  参考：scrolltide.co/templates/synapse（模板预览视频 + 海报）
 *    · 紫罗兰渐变场 / 近黑段落 / 一段米白亮场，三段交替
 *    · 超大无衬线标题（紧字距、负字距），小字用等宽
 *    · 卡片是半透明玻璃 + 一圈很细的亮边 + 柔和大投影
 *    · 强调色只出现两种：紫罗兰 #7c3aed / 洋红 #c026d3
 *  这里只取「气质」不抄 3D：本站没有 three.js，动效仍然走
 *  CSS + 现有滚动变量，版本轻、不会拖慢。
 *
 *  怎么切换：
 *    顶栏右上角那个胶囊按钮。点一下换主题，选择存在
 *    localStorage 的 `irinsho:theme` 里，下次打开还是它。
 *    也可以 ?theme=synapse / ?theme=kisara 直接进。
 *
 *  ⚠ 首帧不闪：
 *    Base.astro 的 <head> 里有一段内联脚本，在 CSS 之前就把
 *    data-theme 写到 <html> 上了。
 *
 *  ⚠ 本文件必须最后加载（放在 glass.css 之后）：
 *    所有覆盖都带 html[data-theme="synapse"] 前缀，
 *    默认主题下本文件只有顶栏那个按钮的样式生效。
 * ========================================================= */

/* =========================================================
 *  ① 切换按钮（两套主题共用）
 *  ---------------------------------------------------------
 *  胶囊里写的是「点下去会切到哪」：现在 KISARA，就显示 SYNAPSE。
 *  窄屏只留图标，省出顶栏宽度。
 * ======================================================= */
.theme-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1;
  cursor: pointer;
  flex: none;
  transition: color .22s ease, border-color .22s ease, background .22s ease,
    box-shadow .22s ease;
}

.theme-btn .theme-glyph {
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  color: var(--rose);
  font-size: 12px;
  line-height: 1;
  transition: transform .55s cubic-bezier(.22, .61, .36, 1);
}

/* 悬停时那个小方块转半圈 —— 只是"这个按钮能换形状"的暗示，不抢戏 */
@media (hover: hover) {
  .theme-btn:hover {
    color: var(--ink);
    border-color: var(--rose);
    box-shadow: 0 0 0 3px var(--rose-dim);
  }
  .theme-btn:hover .theme-glyph { transform: rotate(180deg); }
}
.theme-btn:active .theme-glyph { transform: rotate(180deg) scale(.86); }
.theme-btn:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

/* 窄屏：只留圆形的图标按钮 */
@media (max-width: 720px) {
  .theme-btn {
    width: 34px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .theme-btn .theme-label { display: none; }
}

/* 换主题的一瞬间，给背景和文字一个很短的过渡，
   免得大面积换色像"啪"地闪屏。只作用在最外层，不动组件自己的动效。 */
html.theme-swap,
html.theme-swap body {
  transition: background-color .4s ease, color .4s ease;
}

/* =========================================================
 *  ② SYNAPSE 的设计 token
 *  ---------------------------------------------------------
 *  只改「颜色 / 字体角色」这一层：布局、间距、动效全部沿用。
 *  参考站的三段明度：紫罗兰场 → 近黑 → 米白；
 *  这里把「紫罗兰场」放在首页首屏和深色页，
 *  「米白」留给首页的纸面段落与个人页。
 * ======================================================= */
html[data-theme='synapse'] {
  color-scheme: dark;

  --bg:        #07050c;
  --bg-2:      #0b0714;
  --bg-3:      rgba(20, 12, 32, .72);
  --panel:     #100a1c;
  --ink:       #f6f2ff;
  --ink-2:     #b4a8c9;
  --ink-3:     #7f7396;
  --line:      rgba(196, 170, 255, .16);
  --line-2:    rgba(196, 170, 255, .08);

  /* 强调色：紫罗兰 / 洋红。--rose 在深底上要够亮，所以取浅一档 */
  --rose:      #b98cff;
  --rose-2:    #dcc9ff;
  --rose-deep: #7c3aed;
  --rose-dim:  rgba(167, 120, 255, .14);

  /* 米白纸面（参考站第四段那种暖白，不是冷白） */
  --paper-ink:   #17121f;
  --paper-ink-2: #6f677c;
  --paper-line:  rgba(23, 18, 31, .13);
  --paper-rose:  #7c3aed;

  /* 标题字体：衬线 → 紧字距的无衬线（Bricolage / Inter 那种）
     ⚠ 本站没有自托管这两款字体，先走系统里最接近的；
       将来想完全一致，把字体文件放进 public/assets/fonts/ 再换这里。 */
  --font-serif: 'Bricolage Grotesque', 'Inter Display', 'Segoe UI Variable Display',
    'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
}

/* 选中文字：紫罗兰底 + 白字 */
html[data-theme='synapse'] ::selection {
  background: #7c3aed;
  color: #fff;
}

/* =========================================================
 *  ③ 整页底：近黑 + 左上一团紫罗兰光
 *  ---------------------------------------------------------
 *  参考站的紫不是平涂，是「光从左上打进来」的径向渐变。
 *  全部用 background-image 叠层，没有额外元素；
 *  fixed 让光停在视口里，内容从它前面滚过去。
 * ======================================================= */
html[data-theme='synapse'] body {
  background-color: #07050c;
  background-image:
    radial-gradient(72% 52% at 12% -12%, rgba(124, 58, 237, .42), transparent 72%),
    radial-gradient(46% 38% at 92% -4%, rgba(192, 38, 211, .22), transparent 74%),
    radial-gradient(40% 34% at 52% 38%, rgba(91, 33, 182, .12), transparent 76%);
  background-size: auto, auto, auto;
  background-attachment: fixed;
}

/* 个人页（/me/）：换成参考站那种米白亮场（第四段） */
html[data-theme='synapse'] body[data-view='me'] {
  background-color: #f2eeee;
  background-image:
    radial-gradient(64% 48% at 10% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 62%),
    radial-gradient(52% 42% at 96% 6%, rgba(167, 120, 255, .20), transparent 72%),
    linear-gradient(165deg, #f6f2f1 0%, #f1eceb 54%, #ebe5e4 100%);
  background-size: auto, auto, auto;
  background-attachment: fixed;
}

/* =========================================================
 *  ④ 顶栏：改成参考站那种「悬浮黑色胶囊」
 *  ---------------------------------------------------------
 *  原来是一条贴边的长条；SYNAPSE 下收成居中的圆角胶囊，
 *  离顶部 12px，滚动时悬在内容上方。宽度、内边距都在这里调，
 *  不动 .topbar-inner 的布局属性（那些是两套主题共用的）。
 * ======================================================= */
html[data-theme='synapse'] .topbar {
  position: sticky;
  top: 12px;
  width: min(1240px, calc(100% - 32px));
  margin: 12px auto 0;
  border-radius: 999px;
  background:
    linear-gradient(102deg,
      rgba(255, 255, 255, .06) 0%,
      rgba(255, 255, 255, .015) 40%,
      rgba(192, 38, 211, .05) 100%),
    rgba(9, 6, 15, .78);
  border: 1px solid rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 20px 60px rgba(0, 0, 0, .55);
}
html[data-theme='synapse'] .topbar-inner {
  max-width: none;
  padding: 0 10px 0 18px;
  gap: 18px;
}
html[data-theme='synapse'] .brand-text b {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -.01em;
}
/* 品牌图标：菱形 → 参考站那颗四角星 */
html[data-theme='synapse'] .brand-mark {
  font-size: 0;
  color: var(--rose-2);
  filter: drop-shadow(0 0 10px rgba(185, 140, 255, .65));
}
html[data-theme='synapse'] .brand-mark::before {
  content: '✦';
  font-size: 17px;
}
html[data-theme='synapse'] .brand-text b em { color: var(--rose-2); }
html[data-theme='synapse'] .brand-sub { color: var(--ink-3); }

/* 导航：参考站没有下划线，当前项靠亮度区分 */
html[data-theme='synapse'] .nav-ind { display: none; }
html[data-theme='synapse'] .tab { padding: 7px 10px; border-radius: 999px; }
html[data-theme='synapse'] .tab.active {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
html[data-theme='synapse'] .tab-no { color: var(--ink-3); }
html[data-theme='synapse'] .tab:hover .tab-no,
html[data-theme='synapse'] .tab.active .tab-no { color: var(--rose-2); }

/* 窄屏下拉菜单：黑玻璃面板，圆角下沿 */
@media (max-width: 860px) {
  html[data-theme='synapse'] .tabs {
    background: rgba(9, 6, 15, .95);
    border: 1px solid rgba(196, 170, 255, .16);
    border-radius: 20px;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 24px 60px rgba(0, 0, 0, .6);
  }
  html[data-theme='synapse'] .tab { border-radius: 12px; }
}

/* 头像圆环：紫罗兰细圈 */
html[data-theme='synapse'] .avatar-btn {
  border-color: rgba(185, 140, 255, .45);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .10),
    0 0 18px rgba(124, 58, 237, .25);
}
@media (hover: hover) {
  html[data-theme='synapse'] .avatar-btn:hover {
    border-color: var(--rose-2);
    box-shadow:
      0 0 0 3px rgba(185, 140, 255, .14),
      0 0 26px rgba(124, 58, 237, .4);
  }
}

/* 切换按钮在 SYNAPSE 下：当前主题是深色，按钮做浅一档 */
html[data-theme='synapse'] .theme-btn[aria-pressed='true'] {
  color: var(--ink);
  border-color: rgba(196, 170, 255, .35);
  background: rgba(255, 255, 255, .06);
}

/* =========================================================
 *  ⑤ 首屏：紫罗兰场
 *  ---------------------------------------------------------
 *  主视觉还是那张插画，但压成紫罗兰单色调（sepia + hue-rotate
 *  是纯 CSS 最稳的「双色调」做法），上面再叠一层紫光。
 *  标题保持白字、紧字距 —— 这是参考站最醒目的那一笔。
 * ======================================================= */
html[data-theme='synapse'] .gate {
  background: #0b0714;
}
/* 内页首屏：顶栏是悬浮胶囊，占了顶部 ~110px。原来 gate 还是整 100svh，
   结果首屏底边掉到视口外面，标题贴着折线、下面留一条黑带。
   收掉这一截，首屏正好落在第一屏之内。 */
html[data-theme='synapse'] .gate--page,
html[data-theme='synapse'] .gate--page .gate-inner {
  min-height: 100vh;
  min-height: calc(100svh - 110px);
}
/* ⚠ 主视觉保持原色（用户要求）：不再做紫罗兰双色调。
   紫只从「光」来 —— 左上角一团紫光、底部压暗，插画本身的颜色不动。 */
html[data-theme='synapse'] .gate-hero {
  filter: none;
}
html[data-theme='synapse'] .gate-veil {
  background:
    radial-gradient(80% 64% at 16% 0%, rgba(124, 58, 237, .34) 0%, rgba(124, 58, 237, 0) 64%),
    radial-gradient(60% 52% at 90% 16%, rgba(192, 38, 211, .14) 0%, rgba(192, 38, 211, 0) 72%),
    linear-gradient(180deg,
      rgba(12, 5, 24, .06) 0%,
      rgba(12, 5, 24, .04) 42%,
      rgba(7, 5, 12, .66) 100%);
}
html[data-theme='synapse'] .gate-title {
  font-family: var(--font-serif);
  font-weight: 800;
  letter-spacing: -.035em;
  text-shadow: 0 12px 60px rgba(0, 0, 0, .45);
}
html[data-theme='synapse'] .gate-kicker { color: var(--rose-2); }
html[data-theme='synapse'] .gate-sub { color: rgba(236, 226, 255, .78); }

/* 参考站那颗发光的四角星：放在首屏右上，纯 CSS 星形 + 辉光 */
html[data-theme='synapse'] .gate-inner::before {
  content: '';
  position: absolute;
  /* 星放在左上，避开右侧的 Live session 卡 */
  left: clamp(24px, 8vw, 120px);
  right: auto;
  top: clamp(90px, 14vh, 180px);
  width: clamp(42px, 5.4vw, 78px);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, #fff 0%, #e9d5ff 34%, rgba(185, 140, 255, .35) 62%, transparent 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 34px rgba(167, 120, 255, .55));
  pointer-events: none;
}

/* =========================================================
 *  ⑤b 「Live session」玻璃卡（仅 SYNAPSE）
 *  ---------------------------------------------------------
 *  参考站首屏右侧那张卡，本站的对应物：
 *    · 黑玻璃 + 一圈很细的亮边 + 大投影
 *    · 中间一团洋红呼吸光（.syn-orb + .syn-card::before 两条关键帧）
 *    · 一条会自动换词的 prompt 条（JS 在 index.astro 底部）
 *    · 波形线 + Context assembled + 42 ms 小字
 *    · CSS 3D：向内侧转一点，指针移动时跟着倾（变量由 JS 写）
 *
 *  ⚠ 纯 CSS 3D，没有 three.js，也不占首屏加载：
 *    这块只是一个 <aside> + 几十行 CSS，没有 canvas、没有贴图。
 *  ⚠ 纯装饰：aria-hidden + pointer-events:none，
 *    不抢首屏的点击，也不进读屏顺序。
 * ======================================================= */
.syn-card { display: none; }

html[data-theme='synapse'] .syn-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: absolute;
  z-index: 3;
  top: 46%;
  /* 贴着主视觉卡片的右边缘放，而不是贴视口右边。
     ⚠ 用 right:3% 的话，大屏上卡片会比右侧留白还宽，又压回人物脸上。 */
  left: calc(79% + 6px);
  right: auto;
  width: clamp(196px, 17vw, 246px);
  aspect-ratio: .70;
  padding: 14px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .16);
  background:
    radial-gradient(120% 70% at 40% 0%, rgba(255, 255, 255, .10), transparent 55%),
    linear-gradient(165deg, rgba(42, 18, 72, .90), rgba(10, 5, 18, .97));
  box-shadow:
    0 50px 110px rgba(0, 0, 0, .60),
    0 0 70px rgba(124, 58, 237, .22),
    inset 0 1px 0 rgba(255, 255, 255, .18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  overflow: hidden;
  transform:
    /* 滚动视差：往下滚时卡片比画面慢半拍（--gate-p 由 index.astro 的脚本写） */
    translateY(calc(-50% + var(--gate-p, 0) * 54px))
    perspective(1200px)
    rotateY(var(--syn-ry, -11deg))
    rotateX(var(--syn-rx, 4deg));
  transform-origin: 100% 50%;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1);
  pointer-events: none;
}

/* 顶部那层呼吸光：比 orb 更大、更散，压在卡片上层但很淡 */
html[data-theme='synapse'] .syn-card::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -20%;
  width: 130%;
  aspect-ratio: 1;
  translate: -50% 0;
  background: radial-gradient(closest-side,
    rgba(216, 70, 239, .40),
    rgba(124, 58, 237, .16) 48%,
    transparent 72%);
  filter: blur(18px);
  animation: synBreath 8s ease-in-out infinite;
  pointer-events: none;
}

.syn-card-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.syn-card-badge,
.syn-card-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(12, 6, 22, .55);
  border: 1px solid rgba(255, 255, 255, .10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: rgba(244, 236, 255, .92);
  white-space: nowrap;
}
.syn-card-badge i { font-style: normal; color: #f0abfc; }
.syn-card-live { padding: 5px 8px; }
.syn-card-live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a3e635;
  box-shadow: 0 0 8px #a3e635;
}

.syn-card-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
.syn-orb {
  position: absolute;
  left: 50%;
  top: 2%;
  width: 128%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(232, 121, 249, .55),
    rgba(124, 58, 237, .22) 46%,
    transparent 72%);
  filter: blur(16px);
  opacity: .75;
  animation: synBreath 9s ease-in-out infinite;
  pointer-events: none;
}

.syn-prompt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(16, 8, 28, .70);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.syn-prompt-text {
  flex: 1;
  min-width: 0;
  font-size: 11.5px;
  letter-spacing: .01em;
  color: #f1e8ff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity .32s ease, transform .32s ease;
}
.syn-prompt.is-out .syn-prompt-text { opacity: 0; transform: translateY(6px); }
.syn-send {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  color: #180b2a;
  font-size: 12px;
  line-height: 1;
}
.syn-send svg { width: 12px; height: 12px; display: block; }

.syn-wave { display: flex; gap: 4px; padding: 0 2px; }
.syn-wave i {
  flex: 1;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .80);
}
.syn-wave i:nth-child(2) { background: rgba(255, 255, 255, .50); }
.syn-wave i:nth-child(3) { background: rgba(255, 255, 255, .30); }
.syn-wave i:nth-child(4) { background: rgba(255, 255, 255, .16); }

.syn-caption { margin: 0; display: flex; flex-direction: column; gap: 3px; }
.syn-caption b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  color: #fff;
}
.syn-caption span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .06em;
  color: rgba(216, 196, 245, .72);
}

.syn-fine {
  position: relative;
  z-index: 1;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.7;
  letter-spacing: .05em;
  color: rgba(210, 190, 240, .50);
  text-align: right;
}

@keyframes synBreath {
  0%, 100% { transform: scale(.90); opacity: .55; }
  50%      { transform: scale(1.08); opacity: .95; }
}

/* 窄屏：它是桌面端的陪衬，压到正文上只会碍事 */
@media (max-width: 1099px) {
  html[data-theme='synapse'] .syn-card { display: none; }
}



/* 窄屏的星正好压在人物脸上，收掉 —— 桌面端留着当记号 */
@media (max-width: 760px) {
  html[data-theme='synapse'] .gate-inner::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='synapse'] .syn-card::before,
  .syn-orb { animation: none; }
  .syn-prompt-text { transition: none; }
}

/* 矮屏（笔记本 768/800 高）时，分格屏的内容放不下；
   把网格和友链压一档，保证整屏不裁切。 */
@media (min-width: 900px) and (max-height: 820px) {
  html[data-theme='synapse'] .syn-panel--index .syn-panel-inner {
    padding: 20px;
    gap: 6px;
  }
  html[data-theme='synapse'] .syn-panel--index .panels {
    grid-template-rows: repeat(2, minmax(140px, 1fr));
  }
  html[data-theme='synapse'] .syn-panel--index .panel { min-height: 140px; }
  html[data-theme='synapse'] .syn-panel--index .panel-home { min-height: 292px; }
  html[data-theme='synapse'] .syn-panel--index .friend-entry {
    margin-top: 18px;
    padding: 14px 18px;
  }
}

/* 减少动效：面板还在（布局是滚动吸附，不算动画），
   但不做缩放/淡出、不做首屏失焦位移。 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme='synapse'] .syn-panel-inner {
    transform: none;
    opacity: 1;
  }
  html[data-theme='synapse'] .syn-panel--hero .gate-inner {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* =========================================================
 *  ⑤c Shader 紫场 + 卡片视差（仅首页 · SYNAPSE）
 *  ---------------------------------------------------------
 *  · <canvas class="syn-field"> 铺满整个首屏，three.js 在
 *    syn-field.js 里按需加载（只在切到 SYNAPSE 时才下载）
 *  · 主视觉从「铺满全屏」变成右侧一张大卡片，原色保留；
 *    卡片外面露出的是流动的紫场
 *  · 滚动时：卡片、标题、Live session 卡各自以不同速度位移
 *    （--gate-p 是现成的滚动进度，0~1）
 *  · 分格区的插画用原生 view() 时间线做视差，不写 JS
 * ======================================================= */
.syn-field { display: none; }

html[data-theme='synapse'] .syn-field {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* < 1100px 不跑 shader：首屏回归整张插画，canvas 也没必要留着。
   ⚠ 这条必须写在 display:block 之后，否则会被它盖掉。 */
@media (max-width: 1099px) {
  html[data-theme='synapse'] .syn-field { display: none; }
}

/* 没有 WebGL 时的兜底：静态紫场，不是一块黑 */
html[data-theme='synapse'] .gate--home {
  background:
    radial-gradient(80% 70% at 22% 0%, #4c1d95 0%, transparent 62%),
    radial-gradient(60% 55% at 88% 18%, #86198f 0%, transparent 66%),
    #0a0414;
}

@media (min-width: 1100px) {
  /* 首屏高度要扣掉顶栏和 main 的上边距，否则 100vh 的底部会被推出视口，
     卡片的圆角下沿永远看不到（Zen 里最明显）。 */
  html[data-theme='synapse'] .gate--home {
    min-height: calc(100vh - 110px);
    min-height: calc(100svh - 110px);
    height: calc(100svh - 110px);
  }

  /* 主视觉变成右侧的大卡片：原色、圆角、细亮边、大投影 */
  html[data-theme='synapse'] .gate--home .gate-bg {
    left: 31%;
    right: 21%;
    top: 7%;
    bottom: 7%;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow:
      0 50px 120px rgba(0, 0, 0, .55),
      0 0 80px rgba(124, 58, 237, .16);
    background: #0b0714;
    transform: translate3d(0, calc(var(--gate-p, 0) * -34px), 0);
    will-change: transform;
  }

  /* 标题让出右侧卡片的位置，只占左边那一栏 */
  html[data-theme='synapse'] .gate--home .gate-inner {
    padding-right: 32%;
    transform: translate3d(0, calc(var(--gate-p, 0) * 22px), 0);
  }

  html[data-theme='synapse'] .gate--home .gate-title {
    text-shadow: 0 10px 60px rgba(10, 4, 24, .55);
  }

  /* 指纹视差：卡片比画面慢、标题比画面快，滚动时有层次 */
  html[data-theme='synapse'] .gate--home .gate-veil {
    background:
      radial-gradient(80% 70% at 30% 0%, rgba(124, 58, 237, .22), transparent 66%),
      linear-gradient(180deg, rgba(12, 5, 24, .04) 0%, rgba(12, 5, 24, .10) 46%, rgba(7, 5, 12, .42) 100%);
  }
}

/* 1100–1199 这一档，卡片再往右让一点，别顶到标题的最后一个字 */
@media (min-width: 1100px) and (max-width: 1199px) {
  html[data-theme='synapse'] .gate--home .gate-bg { left: 34%; }
}

/* 分格区：插画随滚动轻微漂移（Chrome / 新版 Safari 原生支持，其余浏览器静止） */
@supports (animation-timeline: view()) {
  html[data-theme='synapse'] .panel-art {
    animation: synPanelDrift linear both;
    animation-timeline: view();
    animation-range: entry -10% exit 110%;
  }
}

@keyframes synPanelDrift {
  from { translate: 0 -16px; }
  to   { translate: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='synapse'] .panel-art { animation: none; }
  html[data-theme='synapse'] .gate--home .gate-bg { transform: none; }
  html[data-theme='synapse'] .gate--home .gate-inner { transform: none; }
}

/* =========================================================
 *  ⑤d 整屏面板堆叠 + 首屏编舞（仅 SYNAPSE · 桌面端）
 *  ---------------------------------------------------------
 *  KISARA 下这三层包裹全是 display:contents，等于不存在；
 *  SYNAPSE 下每块变成一张 sticky 的整屏圆角卡，滚动时后一张
 *  压住前一张 —— 和参考站 1.40s / 16.00s 那两帧一个机制。
 *
 *  --enter / --cover 由 index.astro 底部的 initSynPanels() 写：
 *    enter 0→1：这张卡从下方进入视口
 *    cover 0→1：下一张卡盖住它的程度（旧内容缩小、变淡）
 * ======================================================= */
.syn-stack,
.syn-panel,
.syn-panel-inner { display: contents; }

@media (min-width: 900px) {
  html[data-theme='synapse'] .syn-stack {
    display: block;
    /* 主区有 34px 上边距，而浮顶栏只占 76px；拉回 22px，
       第一张面板正好从 88px 开始，首屏不漏底。 */
    margin-top: -22px;
  }

  html[data-theme='synapse'] .syn-panel {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 88px;                              /* 浮在顶栏下面 */
    height: calc(100svh - 88px);
    border-radius: 30px;
    overflow: clip;
    isolation: isolate;
    background: #07050c;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .08),
      0 -40px 90px rgba(0, 0, 0, .55);
  }

  html[data-theme='synapse'] .syn-panel-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-height: 0;
    transform:
      translateY(calc((1 - var(--enter, 1)) * 60px))
      scale(calc(1 - var(--cover, 0) * .035));
    opacity: calc(1 - var(--cover, 0) * .55);
    transform-origin: 50% 12%;
    will-change: transform, opacity;
  }

  /* 首屏：让 gate 填满整张面板，而不是再按视口算一次 */
  html[data-theme='synapse'] .syn-panel--hero .gate {
    height: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 0;
  }
  html[data-theme='synapse'] .syn-panel--hero .gate-inner {
    min-height: 100%;
  }

  /* 分格 / 纸面：留一圈内边距，内容垂直居中 */
  html[data-theme='synapse'] .syn-panel--index .syn-panel-inner,
  html[data-theme='synapse'] .syn-panel--signals .syn-panel-inner {
    padding: clamp(16px, 2.4vw, 34px);
    gap: 8px;
  }
  html[data-theme='synapse'] .syn-panel--index {
    background:
      radial-gradient(70% 50% at 12% 0%, rgba(124, 58, 237, .18), transparent 70%),
      #07050c;
  }
  html[data-theme='synapse'] .syn-panel--index .panels { margin: 0; }

  /* 纸面这一屏整屏变成参考站那种"白面板"，而不是深底上一张白卡 */
  html[data-theme='synapse'] .syn-panel--signals {
    background:
      radial-gradient(120% 90% at 10% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
      linear-gradient(168deg, #f7f3f2 0%, #f1eceb 60%, #ebe5e4 100%);
    color: var(--paper-ink);
  }
  html[data-theme='synapse'] .syn-panel--signals .paper-band {
    margin: 0;
    width: 100%;
    max-height: 100%;
    overflow: auto;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: clamp(10px, 2vw, 26px) 0;
  }

  /* 终幕：整张图铺满面板 */
  html[data-theme='synapse'] .syn-panel--finale .syn-panel-inner {
    padding: 0;
  }
  html[data-theme='synapse'] .syn-panel--finale .finale {
    margin: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
  }
  html[data-theme='synapse'] .syn-panel--finale .finale-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* 接缝条是给"连续长页"用的，面板堆叠里不需要 */
  html[data-theme='synapse'] .seam { display: none; }

  /* 首屏编舞：标题先走（上移 + 失焦 + 淡出），
     主视觉卡和 Live 卡各自滞后 —— Live 卡在 .syn-card 里已经带 +54px。 */
  html[data-theme='synapse'] .syn-panel--hero .gate-inner {
    justify-content: flex-start;
    padding-top: clamp(36px, 7vh, 80px);
    opacity: calc(1 - var(--gate-p, 0) * .95);
    filter: blur(calc(var(--gate-p, 0) * 5px));
    transform: translate3d(0, calc(var(--gate-p, 0) * -38px), 0);
  }

  /* 标题移到左上（参考站的构图），星星让到左下角，别和字打架 */
  html[data-theme='synapse'] .syn-panel--hero .gate-inner::before {
    top: auto;
    bottom: clamp(56px, 10%, 120px);
    left: clamp(40px, 10vw, 160px);
  }
}

/* =========================================================
 *  ⑤e 路由切换：整屏圆角面板擦除（仅 SYNAPSE）
 *  ---------------------------------------------------------
 *  参考站没有真正的路由（单页），但 13.5s 那块整屏白面板、
 *  16.0s 那块紫色面板给了一个可复用的语言：换页时让一块
 *  圆角面板从下往上盖住，再往上抽走，露出新页面。
 *  导航栏 z-index 更高，所以它全程不动 —— 和参考站一致。
 *
 *  元素由 Base.astro 的 initSynWipe() 在第一次换页时插到 <html> 上；
 *  它挂在 <html> 而不是 body，Astro 换 body 时不会被清掉。
 * ======================================================= */
.syn-wipe { display: none; }

html[data-theme='synapse'] .syn-wipe {
  display: block;
  position: fixed;
  /* 上边多出 40px：面板落到位时圆角跑到视口外面，
     顶角不会露出底下的页面（滑动过程中那条圆角边还在，是"入场"的那一刀） */
  inset: -40px 0 0 0;
  /* 55 < 顶栏的 60：面板从胶囊底下滑过去，导航全程露着（对齐参考站）。
     以前设 100 是为了压住 Astro 的换页残影 —— 现在 SYNAPSE 已经改成
     整页跳转，没有快照层了，这条限制可以撤掉。 */
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(80% 60% at 20% 0%, #4c1d95 0%, transparent 62%),
    radial-gradient(60% 50% at 92% 8%, #86198f 0%, transparent 66%),
    #0a0414;
  border-radius: 34px 34px 0 0;
  transform: translateY(101%);
  will-change: transform;
  box-shadow: 0 -30px 80px rgba(0, 0, 0, .55);
}

/* 顶栏抬到面板之上：换页时胶囊不动，紫色面板从它下面穿过去 */
html[data-theme='synapse'] .topbar { z-index: 70; }

html[data-theme='synapse'] .syn-wipe.is-covering {
  /* 一上一下各 0.15s 左右，整段擦除 ≈ 0.33s（参考站 13.5s 那个换页的节奏） */
  transform: translateY(0);
  transition: transform .15s cubic-bezier(.5, 0, .3, 1);
}



html[data-theme='synapse'] .syn-wipe.is-out {
  transform: translateY(-101%);
  transition: transform .18s cubic-bezier(.5, 0, .3, 1);
}

/* 面板挂久了（网络慢）就点一颗呼吸的点：让「等」看起来是有意为之，
   而不是卡死。0.35s 之后才出现，正常的 0.3s 换页根本看不到它。 */
html[data-theme='synapse'] .syn-wipe::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 999px;
  background: #efe4ff;
  opacity: 0;
  animation: synWipeWait .9s ease-in-out .35s infinite;
}
@keyframes synWipeWait {
  0%   { opacity: 0;   transform: scale(.55); }
  45%  { opacity: .8;  transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme='synapse'] .syn-wipe { display: none !important; }
}

/* =========================================================
 *  ⑥ 分格 / 标牌：深紫玻璃卡
 *  ---------------------------------------------------------
 *  标牌从「白纸贴纸」换成「玻璃铭牌」：半透明深紫、细亮边、
 *  柔和投影，和参考站的 Live session 卡一个语言。
 * ======================================================= */
html[data-theme='synapse'] .panel {
  border: 1px solid rgba(196, 170, 255, .16);
  border-radius: 24px;
  background: linear-gradient(145deg, #140c24, #090611);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
/* 图片保持原色；只垫一层很淡的紫光 + 底部压暗，
   让亮色插画和深色主题能接上，同时白字标牌仍然压得住。 */
html[data-theme='synapse'] .panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 18% 0%, rgba(124, 58, 237, .12), transparent 62%),
    linear-gradient(180deg, rgba(12, 5, 24, .04) 0%, rgba(12, 5, 24, .38) 100%);
  pointer-events: none;
}
html[data-theme='synapse'] .panel::after { opacity: .08; }
html[data-theme='synapse'] .panel-art {
  filter: none;
  opacity: .96;
}
html[data-theme='synapse'] .panel:hover .panel-art {
  filter: none;
  opacity: 1;
}

html[data-theme='synapse'] .panel-plate {
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, .07) 0%,
      rgba(255, 255, 255, .015) 46%,
      rgba(255, 255, 255, 0) 68%),
    rgba(9, 5, 16, .90);
  color: var(--ink);
  border: 1px solid rgba(220, 200, 255, .18);
  border-radius: 18px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 18px 44px rgba(0, 0, 0, .45);
}
html[data-theme='synapse'] .p-num { color: var(--ink-3); }
html[data-theme='synapse'] .p-name {
  font-style: normal;
  font-weight: 800;
  letter-spacing: -.01em;
}
html[data-theme='synapse'] .p-name i { color: var(--rose-2); }
html[data-theme='synapse'] .p-sub { color: var(--ink-3); }

/* 章节条：细线 + 紫罗兰编号 */
html[data-theme='synapse'] .chapters { border-color: var(--line); }
html[data-theme='synapse'] .chapters-label { color: var(--rose-2); }

/* 1280 这一档，首屏右侧的 Live 卡会和章节竖轨抢位置；
   竖轨只是辅助，先让位（只影响首页，因为竖轨只出现在首页）。 */
@media (max-width: 1360px) {
  html[data-theme='synapse'] .chaprail { display: none; }
}

/* 右侧章节竖轨：玻璃底色也跟着换成紫黑 */
html[data-theme='synapse'] .chaprail {
  background: rgba(11, 6, 20, .74);
  border: 1px solid rgba(196, 170, 255, .14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 18px 44px rgba(0, 0, 0, .4);
}

/* =========================================================
 *  ⑦ 友链接口 / 接缝条
 *  ---------------------------------------------------------
 *  玫红 → 紫罗兰 / 洋红的两条斜带，和参考站的光色一致。
 * ======================================================= */
html[data-theme='synapse'] .friend-entry {
  border-color: rgba(196, 170, 255, .22);
  background:
    linear-gradient(150deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .01) 42%, rgba(192, 38, 211, .06) 100%),
    #0b0714;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 22px 54px rgba(0, 0, 0, .5);
}
html[data-theme='synapse'] .friend-entry:hover {
  border-color: rgba(196, 170, 255, .45);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 30px 70px rgba(0, 0, 0, .55),
    0 0 40px rgba(124, 58, 237, .18);
}
html[data-theme='synapse'] .friend-entry::before { background: rgba(124, 58, 237, .22); }
html[data-theme='synapse'] .friend-entry::after { background: rgba(192, 38, 211, .14); }

html[data-theme='synapse'] .friend-icon {
  border-color: rgba(196, 170, 255, .38);
  background: linear-gradient(150deg, rgba(124, 58, 237, .22), rgba(192, 38, 211, .08));
  color: var(--rose-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
html[data-theme='synapse'] .friend-entry:hover .friend-icon {
  border-color: var(--rose-2);
  background: linear-gradient(150deg, #7c3aed, #c026d3);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .3),
    0 10px 26px rgba(124, 58, 237, .35);
}
html[data-theme='synapse'] .friend-text::before {
  background: linear-gradient(180deg, var(--rose-2), rgba(124, 58, 237, .06));
}
html[data-theme='synapse'] .friend-entry:hover .friend-text::before {
  background: linear-gradient(180deg, #fff, rgba(192, 38, 211, .14));
  box-shadow: 0 0 12px rgba(192, 38, 211, .45);
}
html[data-theme='synapse'] .friend-eyebrow { color: rgba(220, 201, 255, .82); }
html[data-theme='synapse'] .friend-title {
  background-image: linear-gradient(98deg, #ffffff 0%, #f3e8ff 40%, #c9a6ff 72%, #e879f9 100%);
  filter: drop-shadow(0 4px 20px rgba(192, 38, 211, .22));
}
html[data-theme='synapse'] .friend-entry:hover .friend-title {
  filter: drop-shadow(0 5px 26px rgba(192, 38, 211, .45));
}
html[data-theme='synapse'] .friend-entry:hover .friend-arrow {
  border-color: var(--rose-2);
  color: var(--rose-2);
  background: rgba(124, 58, 237, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 0 22px rgba(192, 38, 211, .3);
}

/* 终幕同样保持原色，只把上下压暗层调成紫黑 */
html[data-theme='synapse'] .finale-art { filter: none; }
html[data-theme='synapse'] .finale-veil {
  background: linear-gradient(180deg, rgba(12, 5, 24, .12), transparent 34%, rgba(7, 5, 12, .68) 100%);
}

/* 接缝条：紫罗兰 / 洋红 */
html[data-theme='synapse'] .seam {
  --band-a: #7c3aed;
  --band-b: #c026d3;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(124, 58, 237, .10) 44%,
    rgba(192, 38, 211, .08) 56%,
    transparent 100%
  );
}
html[data-theme='synapse'] .seam--footer { --band-b: #a855f7; }

/* =========================================================
 *  ⑧ 米白亮场：首页「最近信号」+ 个人页
 *  ---------------------------------------------------------
 *  参考站的第四段是整页唯一亮场：暖白底、近黑大字。
 *  本站首页本来就有这一段（paper-band），正好对应。
 * ======================================================= */
html[data-theme='synapse'] .paper-band {
  background:
    radial-gradient(120% 90% at 10% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(168deg, #f7f3f2 0%, #f1eceb 60%, #ebe5e4 100%);
  color: var(--paper-ink);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(23, 18, 31, .05),
    0 30px 80px rgba(0, 0, 0, .42);
}
html[data-theme='synapse'] .paper-band .paper-title,
html[data-theme='synapse'] .paper-band h2 { letter-spacing: -.02em; }

/* 个人页 */
html[data-theme='synapse'] .me-quote {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: #17121f;
  letter-spacing: -.02em;
}
html[data-theme='synapse'] .me-bio { color: #4b4454; }
html[data-theme='synapse'] body[data-view='me'] { --paper-rose-deep: #6d28d9; }
html[data-theme='synapse'] body[data-view='me'] .me-links a,
html[data-theme='synapse'] body[data-view='me'] .me-friend {
  border-color: rgba(109, 40, 217, .16);
}
html[data-theme='synapse'] body[data-view='me'] .me-friend .mf-icon {
  border-color: rgba(109, 40, 217, .26);
}
html[data-theme='synapse'] body[data-view='me'] .footer {
  color: var(--paper-ink-2);
  border-top-color: var(--paper-line);
}

/* =========================================================
 *  ⑨ 控件：筛选胶囊 / 滚动条
 *  ---------------------------------------------------------
 *  参考站的主按钮是「白底黑字」，次按钮是半透明浅色。
 *  filter 的激活态就用白底黑字。
 * ======================================================= */
html[data-theme='synapse'] .filter.active {
  color: #140d1f;
  background: #fff;
  border-color: #fff;
  box-shadow: 0 0 24px rgba(255, 255, 255, .18);
}

html[data-theme='synapse'] ::-webkit-scrollbar-thumb {
  background: rgba(167, 120, 255, .32);
}
html[data-theme='synapse'] ::-webkit-scrollbar-thumb:hover {
  background: var(--rose);
}

/* =========================================================
 *  ⑩ 笔记列表：阶梯切角卡（对齐 Scrolltide 那张 01/02/03）
 *  ---------------------------------------------------------
 *  参考组件拆开看只有四件事：
 *
 *  ① 画框不是矩形。上沿宽、下沿窄：媒体区左边停在 20% 高度，
 *     右边多垂一块 34px 的「舌头」，两个转角都是内凹圆角。
 *     实现不用 SVG：媒体吃满整块，再拿一块和卡底色相同的
 *     ::after 从底部盖住左边 57% —— 切角、缺口、S 弯一次成型。
 *
 *  ② 序号在媒体下面，媒体长高它就往下走；标题固定在底部。
 *     用一个 --mh 变量同时驱动媒体高度和正文的 top，两边永远同步。
 *
 *  ③ 悬停时媒体从 20% 长到 46%，封面图从 0 淡到 1（放大 1.08 → 1）。
 *     卡片本身不动 —— 参考站全程没有位移，动的是画框和照片。
 *
 *  ④ 三张一循环：紫 / 米白 / 近黑，和三张参考卡一一对应。
 *     颜色走 --note-*，图片一律不加滤镜（保持原色）。
 *
 *  ⚠ --mh 用 @property 注册成 <percentage>，否则 CSS 变量不能过渡，
 *    悬停会变成瞬间跳变（Chrome 85+ / Safari 16.4+ / FF 128+ 都支持）。
 * ======================================================= */
@property --mh {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 28.5%;
}

html[data-theme='synapse'] .blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* 筛选条：搜索框和分类都收成胶囊，和顶栏同一套语言 */
html[data-theme='synapse'] .blog-bar {
  gap: 16px;
  padding-bottom: 18px;
  border-bottom-color: rgba(255, 255, 255, .08);
}
html[data-theme='synapse'] .blog-search {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
  padding: 10px 16px;
}
html[data-theme='synapse'] .blog-search:focus-within {
  border-color: rgba(196, 170, 255, .55);
  background: rgba(255, 255, 255, .07);
}
html[data-theme='synapse'] .blog-filters { gap: 4px; }
html[data-theme='synapse'] .blog-filters button {
  padding: 7px 13px;
  border-radius: 999px;
  text-transform: none;
}
html[data-theme='synapse'] .blog-filters button::after { display: none; }
html[data-theme='synapse'] .blog-filters button.active {
  color: #140d1f;
  background: #fff;
  box-shadow: 0 0 22px rgba(255, 255, 255, .16);
}

html[data-theme='synapse'] .post {
  --note-bg: #1b1140;
  --note-ink: #fff;
  --note-ink-2: rgba(255, 255, 255, .62);
  --note-line: rgba(255, 255, 255, .12);
  --poster:
    radial-gradient(120% 90% at 78% 0%, rgba(255, 255, 255, .45), transparent 58%),
    linear-gradient(158deg, #c3aaff 0%, #7c3aed 42%, #3d1a94 78%, #2a1470 100%);
  --mh: 28.5%;
  --tab: 34px;

  position: relative;
  display: block;
  container-type: inline-size;
  aspect-ratio: 300 / 404;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border-radius: 26px;
  background: var(--note-bg);
  color: var(--note-ink);
  box-shadow: 0 20px 54px rgba(0, 0, 0, .4);
  text-decoration: none;
  /* --mh 是唯一的时间轴：画框高度和正文 top 都读它，所以只要过渡它一个。
     参考站那段约 0.17s（30fps 5 帧），这里取 0.2s —— 鼠标扫过一排卡
     时不会追不上，也不至于像闪一下。 */
  transition: --mh .2s cubic-bezier(.22, .61, .36, 1), box-shadow .45s ease;
}

/* ⚠ display:block 会把 UA 的 [hidden]{display:none} 盖掉 ——
   搜索 / 分类筛选靠 el.hidden 隐藏卡片，必须显式补一条，
   否则在 SYNAPSE 下筛完还是满屏卡片。 */
html[data-theme='synapse'] .post[hidden] { display: none; }

/* 三套配色：紫 / 米白 / 近黑（顺序循环，和参考站三张卡一致） */
html[data-theme='synapse'] .post[data-fam='0'] {
  --note-bg: #1b1140;
  --note-ink: #fff;
  --note-ink-2: rgba(255, 255, 255, .6);
  --note-line: rgba(255, 255, 255, .12);
  --poster:
    radial-gradient(110% 80% at 76% 0%, rgba(255, 255, 255, .5), transparent 56%),
    linear-gradient(158deg, #c3aaff 0%, #8b5cf6 38%, #6d28d9 72%, #5b21b6 100%);
}
html[data-theme='synapse'] .post[data-fam='1'] {
  --note-bg: #f2efea;
  --note-ink: #141216;
  --note-ink-2: rgba(20, 18, 22, .58);
  --note-line: rgba(20, 18, 22, .14);
  --poster:
    radial-gradient(110% 85% at 82% 4%, rgba(255, 255, 255, .55), transparent 54%),
    linear-gradient(158deg, #ffb9a1 0%, #e8798a 34%, #b04a8c 68%, #7d2f78 100%);
}
html[data-theme='synapse'] .post[data-fam='2'] {
  --note-bg: #101216;
  --note-ink: #fff;
  --note-ink-2: rgba(255, 255, 255, .58);
  --note-line: rgba(255, 255, 255, .12);
  --poster:
    radial-gradient(110% 85% at 80% 2%, rgba(255, 255, 255, .75), transparent 58%),
    linear-gradient(158deg, #eef4fa 0%, #c2d0de 34%, #93a6bd 70%, #6b7f97 100%);
}

/* ---------- 画框：阶梯切角 ---------- */
html[data-theme='synapse'] .post-cover,
html[data-theme='synapse'] .post-cover:has(img) {
  position: absolute;
  top: 6px;
  left: 6px;
  right: 6px;
  width: auto;
  height: var(--mh);
  aspect-ratio: auto;
  border: 0;
  border-radius: 20px;
  overflow: hidden;
  background: var(--poster);
  box-shadow: none;
  transform: none;
  /* 高度跟着 --mh 走，这里不能再给 height 加过渡 ——
     那会变成「追一个正在变的数」，比参考站慢一倍。 */
}

/* ⚠ KISARA 的 .post:hover .post-cover 会加"掀起"位移 + 大片投影，
   选择器比上面这条更具体，必须在这里显式压掉 —— 否则悬停时会看到
   画框整体上移 5px、还带一层漫画书式的阴影。 */
html[data-theme='synapse'] .post:hover .post-cover,
html[data-theme='synapse'] .post:focus-visible .post-cover {
  transform: none;
  border-color: transparent;
  box-shadow: none;
}

/* 封面图：默认藏着，悬停才浮出来（原色，不加任何滤镜） */
html[data-theme='synapse'] .post-cover img,
html[data-theme='synapse'] .post-cover:has(img) img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transform: scale(1.08);
  filter: none !important;
  transition: opacity .18s ease, transform .45s cubic-bezier(.22, .61, .36, 1);
}

/* 切角：卡底色从底部盖住左边 57%，右上角内凹 → 就是那块「舌头」 */
html[data-theme='synapse'] .post-cover::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  width: 57%;
  height: var(--tab);
  background: var(--note-bg);
  background-image: none;
  mix-blend-mode: normal;
  opacity: 1;
  border-top-right-radius: 15px;
}
/* 舌头左下角的内凹补角（一个小方块的径向渐变，颜色跟卡底走）
   ⚠ inset 必须整条重置：上面 KISARA 那条 ::before 是 inset:0，
     只覆盖 left/bottom 会留下 top:0，方块会被钉在画框顶上。 */
html[data-theme='synapse'] .post-cover::before {
  content: '';
  position: absolute;
  inset: auto auto 0 57%;
  width: 16px;
  height: 16px;
  border-radius: 0;
  box-shadow: none;
  background: radial-gradient(circle at 100% 0%, transparent 15px, var(--note-bg) 15.4px);
  pointer-events: none;
  z-index: 2;
}

/* ---------- 正文：贴着切角站，标题沉到底 ---------- */
html[data-theme='synapse'] .post-body {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--mh) - var(--tab) + 6px + clamp(20px, 6.2cqw, 32px));
  bottom: 0;
  display: flex;
  flex-direction: column;
  padding: 0 clamp(18px, 6cqw, 26px) clamp(18px, 6cqw, 26px);
  color: var(--note-ink);
}

html[data-theme='synapse'] .post-no {
  display: block;
  font-family: var(--font-sans);
  font-size: 21cqw;
  font-weight: 700;
  line-height: .84;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
  color: var(--note-ink);
}

html[data-theme='synapse'] .post-arrow {
  display: grid;
  place-items: center;
  position: absolute;
  right: clamp(18px, 6cqw, 26px);
  top: calc(var(--tab) + 10px);
  width: 18px;
  height: 18px;
  color: var(--note-ink);
  opacity: .75;
  transition: transform .4s cubic-bezier(.22, .61, .36, 1), opacity .3s;
}
html[data-theme='synapse'] .post-arrow svg { width: 100%; height: 100%; }

html[data-theme='synapse'] .post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--note-ink-2);
}
html[data-theme='synapse'] .post-meta .pm-idx { display: none; }
html[data-theme='synapse'] .post-meta .pm-cat {
  color: var(--note-ink);
  opacity: .82;
}
html[data-theme='synapse'] .post-meta time { margin-left: auto; }

html[data-theme='synapse'] .post-title {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 650;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: var(--note-ink);
  transition: none;
}
html[data-theme='synapse'] .post:hover .post-title { color: var(--note-ink); }
html[data-theme='synapse'] .post-title::after { display: none; }

html[data-theme='synapse'] .post-sum {
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--note-ink-2);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* 生成底图（没有封面图的笔记）：序号和角标都收起来，
   画框只留渐变海报 —— 参考站没用封面图的卡就是这样。 */
html[data-theme='synapse'] .post-cover--gen b,
html[data-theme='synapse'] .post-cover .cover-tag { display: none; }
html[data-theme='synapse'] .post-cover--gen {
  display: block;
  background: var(--poster);
}

/* ---------- 悬停：画框长高 + 照片浮现 ---------- */
@media (hover: hover) {
  html[data-theme='synapse'] .post:hover {
    --mh: 52%;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  }
  html[data-theme='synapse'] .post:hover .post-cover img,
  html[data-theme='synapse'] .post:hover .post-cover:has(img) img {
    opacity: 1;
    transform: none;
    filter: none;
  }
  html[data-theme='synapse'] .post:hover .post-arrow {
    transform: translate(3px, -3px);
    opacity: 1;
  }
}
html[data-theme='synapse'] .post:focus-visible {
  --mh: 52%;
  outline: 2px solid rgba(196, 170, 255, .9);
  outline-offset: 3px;
}
html[data-theme='synapse'] .post:focus-visible .post-cover img { opacity: 1; transform: none; }

/* 两列 / 一列：媒体比例不变，字号跟着卡宽走（cqw） */
@media (max-width: 900px) {
  html[data-theme='synapse'] .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 620px) {
  html[data-theme='synapse'] .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  html[data-theme='synapse'] .post { aspect-ratio: 4 / 3.6; border-radius: 22px; }
}

/* 减少动效：画框直接切状态，不做过渡 */
@media (prefers-reduced-motion: reduce) {
  html[data-theme='synapse'] .post-cover,
  html[data-theme='synapse'] .post-cover img { transition: none !important; }
}

/* =========================================================
 *  ⑪ 「最近信号」：文件夹卡（对齐 Scrolltide 那张 01/02/03）
 *  ---------------------------------------------------------
 *  形状和参考站一致：两张同尺寸圆角矩形错开叠 —— 后一张往右上错
 *  (88, -43)，露出的右上角就是写分类名的标签页，左下多出来的一截
 *  让卡看着像压在另一张上面。
 *
 *  ⚠ 形状用 SVG mask 一次成型，而不是拿两个 div 叠：
 *     卡一旦「亮起来」要上对角渐变，两块独立元素的渐变会接不上，
 *     接缝正好在标签页那个角上，很难看。mask 是把整块背景一次裁出
 *     轮廓，渐变天然连续。
 *     viewBox 比例 = 卡片比例（307:415），所以不会把圆角拉变形。
 *
 *  悬停只做三件事：抬 6px、背景从暖纸渐变成紫罗兰、文字转白。
 *  参考站没有放大、没有外发光、其余两张也不联动 —— 这里一样。
 * ======================================================= */
@media (min-width: 900px) {
  html[data-theme='synapse'] .paper-inner {
    max-width: 1120px;
    margin-inline: auto;
  }

  html[data-theme='synapse'] .paper-shelf {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    border-bottom: 0;
  }

  html[data-theme='synapse'] .paper-card {
    --ink: #241a20;
    --ink-2: rgba(36, 26, 32, .6);
    --paper: linear-gradient(158deg, #ffffff 0%, #fbf7f2 56%, #f1eae3 100%);

    position: relative;
    display: block;
    aspect-ratio: 307 / 415;
    min-height: 0;
    padding: 0;
    border: 0;
    border-right: 0;
    border-radius: 0;
    background: var(--paper);
    color: var(--ink);
    text-decoration: none;
    transform: translateY(0);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1),
                color .3s ease,
                filter .3s ease;
    /* 两张圆角矩形叠出来的「文件夹」轮廓 */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307 415' preserveAspectRatio='none'%3E%3Crect x='88' width='219' height='415' rx='26'/%3E%3Crect y='43' width='228' height='333' rx='26'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307 415' preserveAspectRatio='none'%3E%3Crect x='88' width='219' height='415' rx='26'/%3E%3Crect y='43' width='228' height='333' rx='26'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
    filter:
      drop-shadow(0 0 .6px rgba(36, 26, 32, .3))
      drop-shadow(0 12px 24px rgba(36, 26, 32, .12));
  }

  /* 亮起来的那一层：紫罗兰渐变，从左上亮到右下深，和参考站同一个方向 */
  html[data-theme='synapse'] .paper-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(158deg, #9b7bf6 0%, #6d28d9 46%, #3b1080 100%);
    opacity: 0;
    transition: opacity .34s ease;
  }

  html[data-theme='synapse'] .paper-card:hover {
    --ink: #fff;
    --ink-2: rgba(255, 255, 255, .72);
    transform: translateY(-6px);
    filter: drop-shadow(0 22px 40px rgba(76, 29, 149, .28));
  }
  html[data-theme='synapse'] .paper-card:hover::before { opacity: 1; }

  /* ---------- 标签页：分类名 ---------- */
  html[data-theme='synapse'] .paper-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    position: absolute;
    top: 0;
    right: 7%;
    height: 12%;
    z-index: 2;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink);
    opacity: .82;
    transition: color .3s ease, opacity .3s ease;
  }
  html[data-theme='synapse'] .paper-tab i {
    width: 14px;
    height: 1px;
    background: currentColor;
    opacity: .7;
  }
  html[data-theme='synapse'] .paper-card:hover .paper-tab { opacity: 1; }

  /* ---------- 画框：黑底 + 封面 ---------- */
  html[data-theme='synapse'] .paper-card .paper-cover {
    position: absolute;
    left: 5.9%;
    right: 5.9%;
    top: 11.6%;
    height: 48%;
    aspect-ratio: auto;
    z-index: 1;
    margin: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #08070b;
    rotate: 0deg;
    box-shadow: none;
    transition: box-shadow .34s ease;
  }
  html[data-theme='synapse'] .paper-card:hover .paper-cover {
    rotate: 0deg;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
  }
  html[data-theme='synapse'] .paper-card .paper-cover img {
    transform: scale(1);
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
  }
  html[data-theme='synapse'] .paper-card:hover .paper-cover img { transform: scale(1.06); }

  /* ---------- 正文 ---------- */
  html[data-theme='synapse'] .paper-card .paper-body {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 61.5%;
    bottom: 12%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: auto;
  }

  /* 分类已经在标签页里了，这里只留日期 */
  html[data-theme='synapse'] .paper-card .paper-meta {
    order: 3;
    margin: auto 0 0;
    gap: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .14em;
    color: var(--ink-2);
    transition: color .3s ease;
  }
  html[data-theme='synapse'] .paper-card .paper-meta .paper-cat,
  html[data-theme='synapse'] .paper-card .paper-meta .paper-slash { display: none; }
  html[data-theme='synapse'] .paper-card .paper-meta time { color: var(--ink-2); }

  html[data-theme='synapse'] .paper-card .paper-card-title {
    order: 1;
    margin: 0;
    font-family: var(--font-sans);
    font-size: clamp(17px, 1.62vw, 22px);
    font-weight: 650;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--ink);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    transition: color .3s ease;
  }

  html[data-theme='synapse'] .paper-card .paper-excerpt {
    order: 2;
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--ink-2);
    -webkit-line-clamp: 2;
    line-clamp: 2;
    transition: color .3s ease;
  }

  /* READ SIGNAL 在这套卡里换成卡片本身可点 + 三颗点，收起来 */
  html[data-theme='synapse'] .paper-card .paper-read { display: none; }

  /* ---------- 三颗点：第几张 ---------- */
  html[data-theme='synapse'] .paper-dots {
    display: flex;
    gap: 6px;
    position: absolute;
    right: 7%;
    bottom: 11.6%;
    z-index: 2;
  }
  html[data-theme='synapse'] .paper-dots i {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--ink);
    opacity: .22;
    transition: opacity .3s ease, background .3s ease;
  }
  html[data-theme='synapse'] .paper-dots i:nth-child(1) { opacity: .22; }
  html[data-theme='synapse'] .paper-card[data-fam='0'] .paper-dots i:nth-child(1),
  html[data-theme='synapse'] .paper-card[data-fam='1'] .paper-dots i:nth-child(2),
  html[data-theme='synapse'] .paper-card[data-fam='2'] .paper-dots i:nth-child(3) { opacity: .85; }
  html[data-theme='synapse'] .paper-card:hover .paper-dots i { background: var(--ink); }
  html[data-theme='synapse'] .paper-card:hover .paper-dots i { opacity: .35; }
  html[data-theme='synapse'] .paper-card[data-fam='0']:hover .paper-dots i:nth-child(1),
  html[data-theme='synapse'] .paper-card[data-fam='1']:hover .paper-dots i:nth-child(2),
  html[data-theme='synapse'] .paper-card[data-fam='2']:hover .paper-dots i:nth-child(3) { opacity: 1; }

  /* 纸面这一屏本来就被下一张面板压住，卡片别再往里缩 */
  html[data-theme='synapse'] .syn-panel--signals .paper-band { padding-bottom: clamp(14px, 2vw, 28px); }
}

/* 减少动效 */
@media (prefers-reduced-motion: reduce) {
  .theme-btn .theme-glyph { transition: none !important; }
  .theme-btn:hover .theme-glyph { transform: none; }
}