/*
 * ================================================================
 * cute-style.css — 可爱化视觉层（纯装饰，不改变内容与布局）
 * ================================================================
 *
 * 本文件只做四件事：
 * 1. 本地托管 Nunito 圆体（latin 子集、可变字重），配合 font-display: swap，
 *    不阻塞首屏渲染；中文仍走 PingFang SC / 系统字体。
 * 2. 给容器加纯 CSS 小装饰（伪元素/背景，pointer-events: none），
 *    不影响任何文字内容的显示与点击。
 * 3. 给 MathJax 展示公式加一个柔和的圆角虚线小卡片，让公式区更可爱。
 *    注意：MathJax v2 SVG 输出的字形是内置数学字体的矢量路径，
 *    无法用 CSS 换成 Nunito；这里通过颜色与容器风格做视觉协调。
 * 4. 全部装饰遵守主栏对齐约定：不旋转、不位移外层卡片，
 *    装饰元素都位于卡片共享边缘之内或卡片间隙之上。
 *
 * 回滚：在 _config.stellar-lei.yml 的 inject.head 中移除本文件的
 * <link> 与字体 preload，并恢复 style.font-family.body 原值即可。
 * 详见 .codebuddy/memory/2026-09-16-cute-style/rollback/。
 */

/* ---------- 1. 手写体字体（Google Fonts latin 子集，本地托管） ---------- */
/* Shantell Sans：专为可读性设计的手写体，作正文/UI 主字体（可变字重 300-700） */
@font-face {
  font-family: 'Shantell Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/handwritten/shantell-sans-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Caveat：更活泼的手写笔刷体，仅用于站点标题等点缀 */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/handwritten/caveat-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 站点标题（左侧栏 logo 文字）使用 Caveat，略微放大保持视觉平衡 */
.logo-wrap .title .main {
  font-family: 'Caveat', 'Shantell Sans', 'PingFang SC', cursive;
  font-size: 1.22em;
  letter-spacing: 0.01em;
}

/*
 * 手写体字形偏宽，手机端 hero 大标题的长单词（如 mathematics）可能被
 * 容器裁切。允许大标题在任意位置断词，仅影响极端窄屏的兜底换行。
 */
/*
 * Shantell Sans 在 700+ 字重下笔画偏粗、标题显得拥挤。把各类标题
 * 统一到 600：保留标题层级感，但笔画更清爽。
 */
#lei-home-title,
h1.text.title,
.l_body .l_main .post-list .post-card .post-title,
.md-text.content h1,
.md-text.content h2,
.md-text.content h3 {
  font-weight: 600;
}

h1.text.title,
#lei-home-title {
  overflow-wrap: anywhere;
}

/*
 * 手机端介绍卡的蕾丝边框宽 24px，原内边距（16–22px）小于边框宽度，
 * 文字会伸到边框下面被切断（旧字体下同样存在）。把内边距加大到
 * 超过边框宽度，让标题和简介完整落在框内。
 */
@media screen and (max-width: 667px) {
  .lei-site-layout .lei-home-intro {
    padding: 26px 28px;
  }
}

/*
 * 首页卡片是 205px 固定高度的两栏布局。手写体标题更宽，三行标题会
 * 把两行摘要挤到元信息行上被中途裁切。略微加高卡片并收紧摘要行高，
 * 保证标题、摘要、日期行都完整显示；卡片仍是整宽，不影响主栏对齐。
 */
.post-list .post-card .lei-post-card {
  height: 224px;
  min-height: 224px;
}

.post-list .post-card .post-cover {
  min-height: 224px;
}

.post-list .post-card .excerpt p {
  line-height: 1.5;
  /* 摘要与正文统一手写体：英文 Shantell Sans，中文龙藏体 */
  font-family: "Shantell Sans", "Long Cang", "Songti SC", system-ui, sans-serif;
}

/* ---------- 7. 花边改造：去掉对称蕾丝，换成"随手撒落"的小涂鸦 ---------- */
/*
 * 用户反馈：整圈重复的扇贝形蕾丝太对称、不够可爱。现在：
 * - 隐藏所有地方的旧蕾丝边框（hero、合集页头、侧栏开关）；
 * - 每种容器用不同的装饰语言：
 *   hero 介绍卡  → 不对称撒落的小星星/爱心/圆点/小花（多层背景一次绘制）；
 *   合集页头     → 手账风虚线描边 + 右上角一颗歪的小星星；
 *   展示公式卡   → 虚线描边上沿贴一颗小星星贴纸；
 *   文章卡片     → 保留原有 emoji 贴纸 + 卡片间隙小星星。
 * 全部为内联 SVG 背景，零额外请求；位置故意不对称，营造随意感。
 */

/* 涂鸦素材：颜色取全站粉彩系（粉/紫/奶黄/薄荷） */
:root {
  --lei-doodle-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3a2c3' d='M12 1.8c.7 4.9 3.3 7.5 8.2 8.2-4.9.7-7.5 3.3-8.2 8.2-.7-4.9-3.3-7.5-8.2-8.2 4.9-.7 7.5-3.3 8.2-8.2z'/%3E%3C/svg%3E");
  --lei-doodle-sparkle-tilt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(28 12 12)'%3E%3Cpath fill='%23b9a7e6' d='M12 1.8c.7 4.9 3.3 7.5 8.2 8.2-4.9.7-7.5 3.3-8.2 8.2-.7-4.9-3.3-7.5-8.2-8.2 4.9-.7 7.5-3.3 8.2-8.2z'/%3E%3C/g%3E%3C/svg%3E");
  --lei-doodle-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-14 12 12)'%3E%3Cpath fill='%23f6cf8f' d='M12 2.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 8.8l6.1-.7z'/%3E%3C/g%3E%3C/svg%3E");
  --lei-doodle-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-9 12 12)'%3E%3Cpath fill='%23f6a8c6' d='M12 20.5C6.5 16 3.5 12.7 3.5 9.1 3.5 6.4 5.6 4.5 8 4.5c1.6 0 3.1.9 4 2.3.9-1.4 2.4-2.3 4-2.3 2.4 0 4.5 1.9 4.5 4.6 0 3.6-3 6.9-8.5 11.4z'/%3E%3C/g%3E%3C/svg%3E");
  --lei-doodle-dot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='5' fill='%239fd9c8'/%3E%3C/svg%3E");
  --lei-doodle-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23f9c1d9'%3E%3Ccircle cx='12' cy='6' r='4'/%3E%3Ccircle cx='18.5' cy='10.7' r='4'/%3E%3Ccircle cx='16' cy='18' r='4'/%3E%3Ccircle cx='8' cy='18' r='4'/%3E%3Ccircle cx='5.5' cy='10.7' r='4'/%3E%3C/g%3E%3Ccircle cx='12' cy='12.5' r='3.2' fill='%23fbe08f'/%3E%3C/svg%3E");

  /* --- 追加饰品：形状更杂，位置沿卡片边缘环绕（见 7e） --- */
  /* 水滴与海浪曲线：呼应本站水波主题 */
  --lei-doodle-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238ccddd' d='M12 2.4c3.6 4.4 6 7.6 6 10.4a6 6 0 1 1-12 0c0-2.8 2.4-6 6-10.4z'/%3E%3Ccircle cx='10' cy='11.6' r='1.7' fill='%23ffffff' fill-opacity='.65'/%3E%3C/svg%3E");
  --lei-doodle-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%238ccddd' stroke-width='2.6' stroke-linecap='round' d='M1.6 13.6q3.4-4.6 6.8 0t6.8 0t6.8 0'/%3E%3C/svg%3E");
  --lei-doodle-fish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='13.2' cy='12' rx='7.4' ry='4.8' fill='%23f6a8c6'/%3E%3Cpath fill='%23f6a8c6' d='M6.8 12 2.2 8.4v7.2z'/%3E%3Ccircle cx='16.8' cy='10.6' r='1.1' fill='%23ffffff'/%3E%3C/svg%3E");
  --lei-doodle-bubble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.2' fill='none' stroke='%238ccddd' stroke-width='1.8'/%3E%3Ccircle cx='9' cy='9' r='2.4' fill='%23ffffff' fill-opacity='.85'/%3E%3C/svg%3E");

  /* 云朵与彩虹 */
  --lei-doodle-cloud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b7d4ee' d='M7.4 18.6h9.4a4 4 0 0 0 .6-7.95 5.6 5.6 0 0 0-10.7-.85A3.85 3.85 0 0 0 7.4 18.6z'/%3E%3C/svg%3E");
  --lei-doodle-rainbow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath stroke='%23f6a8c6' stroke-width='2.8' d='M3.6 19.4a8.4 8.4 0 0 1 16.8 0'/%3E%3Cpath stroke='%23fbe08f' stroke-width='2.8' d='M6.4 19.4a5.6 5.6 0 0 1 11.2 0'/%3E%3Cpath stroke='%239fd9c8' stroke-width='2.8' d='M9.2 19.4a2.8 2.8 0 0 1 5.6 0'/%3E%3C/g%3E%3C/svg%3E");

  /* 蝴蝶、弯月、音符 */
  --lei-doodle-butterfly: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23b9a7e6'%3E%3Cellipse cx='7.2' cy='9.4' rx='4.6' ry='3.6' transform='rotate(-24 7.2 9.4)'/%3E%3Cellipse cx='16.8' cy='9.4' rx='4.6' ry='3.6' transform='rotate(24 16.8 9.4)'/%3E%3Cellipse cx='8.4' cy='15.6' rx='3.2' ry='2.6' transform='rotate(22 8.4 15.6)' opacity='.75'/%3E%3Cellipse cx='15.6' cy='15.6' rx='3.2' ry='2.6' transform='rotate(-22 15.6 15.6)' opacity='.75'/%3E%3C/g%3E%3Crect x='11.3' y='6.6' width='1.4' height='11.4' rx='.7' fill='%238d7ac4'/%3E%3C/svg%3E");
  --lei-doodle-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f6cf8f' d='M15.2 2.8A10 10 0 1 0 15.2 21.2A11 11 0 0 1 15.2 2.8z'/%3E%3C/svg%3E");
  --lei-doodle-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='8.6' cy='18' rx='4.4' ry='3.3' transform='rotate(-20 8.6 18)' fill='%23b9a7e6'/%3E%3Cpath fill='%23b9a7e6' d='M13 4.4c3.4.6 5.6 2.2 6.6 4.8-1.4-1.4-3.4-2.1-6.6-2.1z'/%3E%3Cpath fill='none' stroke='%23b9a7e6' stroke-width='2' stroke-linecap='round' d='M13 18V4.4'/%3E%3C/svg%3E");

  /* 嫩芽、樱桃、蝴蝶结 */
  --lei-doodle-sprout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%237fc4ab' stroke-width='1.9' stroke-linecap='round' d='M12 21.4V11'/%3E%3Cpath fill='%239fd9c8' d='M12 12.6C12 7.8 8.6 4.6 3.6 4.2c-.4 5.4 3 8.8 8.4 8.4z'/%3E%3Cpath fill='%23b7e3d4' d='M12 14.6c0-3.8 2.8-6.4 7-6.8.4 4.4-2.6 7.2-7 6.8z'/%3E%3C/svg%3E");
  --lei-doodle-cherry: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%238fc9a8' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9.4 20C9.4 14 8.6 9.4 6.8 5.6'/%3E%3Cpath d='M15.2 19.4c.4-4.4 1.8-8.6 4.4-11.8'/%3E%3C/g%3E%3Ccircle cx='9.4' cy='20' r='3.1' fill='%23f6a8c6'/%3E%3Ccircle cx='15.2' cy='19.4' r='3.1' fill='%23f6a8c6'/%3E%3C/svg%3E");
  --lei-doodle-bow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f9c1d9' d='M11.2 12 3.4 7.2A2.6 2.6 0 0 0 1 9.5v5a2.6 2.6 0 0 0 2.4 2.3z'/%3E%3Cpath fill='%23f9c1d9' d='M12.8 12l7.8-4.8A2.6 2.6 0 0 1 23 9.5v5a2.6 2.6 0 0 1-2.4 2.3z'/%3E%3Ccircle cx='12' cy='12' r='2.4' fill='%23f3a2c3'/%3E%3C/svg%3E");

  /* 同一形状的第二种配色，避免整圈颜色重复 */
  --lei-doodle-sparkle-mint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%239fd9c8' d='M12 1.8c.7 4.9 3.3 7.5 8.2 8.2-4.9.7-7.5 3.3-8.2 8.2-.7-4.9-3.3-7.5-8.2-8.2 4.9-.7 7.5-3.3 8.2-8.2z'/%3E%3C/svg%3E");
  --lei-doodle-star-sky: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(12 12 12)'%3E%3Cpath fill='%238ccddd' d='M12 2.5l2.6 5.6 6.1.7-4.5 4.2 1.2 6-5.4-3-5.4 3 1.2-6L3.3 8.8l6.1-.7z'/%3E%3C/g%3E%3C/svg%3E");
}

/* 7a. 隐藏旧蕾丝边框
 * 注意：hero 的 .lei-home-intro__lace 不再隐藏——它被复用为"左右边饰品"层，
 * 具体见 7e。这里只关掉仍在用边框图的两处。
 */
.lei-lace-panel > .lei-lace-border,
.lei-sidebar-switch__lace {
  display: none !important;
}

/* 7b. hero 介绍卡：只保留柔和的粉彩底
 * 原本这里还铺了一圈手绘抖线 SVG 边框（--lei-frame-hero），已按要求整条删除：
 * 那个变量和这里的 background 图层都不再存在，卡片现在没有可见描边，
 * 只剩下面这层很淡的斜向渐变做底。沿边框环绕的小饰品统一放在 7e。 */
.lei-site-layout .lei-home-intro {
  background: linear-gradient(120deg, #fffbfe99, #f7f8ff80);
}

/* 7c. 合集页头（Archives / Topics / Guides / Guide 概述）：手账虚线卡 + 歪星星 */
.lei-lace-panel {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 38%, transparent);
}

/* 同样要重置主题 ::after 点状条的尺寸与位置 */
.lei-collection-intro.lei-lace-panel::after,
.lei-guide-intro.lei-lace-panel::after {
  display: block;
  content: '';
  position: absolute;
  inset: auto;
  top: 11px;
  right: 16px;
  bottom: auto;
  left: auto;
  width: 16px;
  height: 16px;
  opacity: 0.85;
  background: var(--lei-doodle-sparkle-tilt) center / contain no-repeat;
  pointer-events: none;
}

/* 7d. 展示公式卡：上沿贴一颗小星星贴纸（探出边框一点点，像手贴上去的） */
.MathJax_SVG_Display {
  position: relative;
}

.MathJax_SVG_Display::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 14px;
  width: 14px;
  height: 14px;
  background: var(--lei-doodle-star) center / contain no-repeat;
  pointer-events: none;
}

/* 7e. hero 介绍卡：沿容器边框环绕的小饰品
 *
 * 目标：不再是几颗孤零零撒在卡片内部的涂鸦，而是沿四条边"绕"卡片一圈的
 * 小挂件，像贴在卡片边缘的一圈贴纸。
 *
 * 两层分工（两层都是 inset: 0 的覆盖层，只画背景、不参与布局）：
 *   .lei-home-intro__lace   → 左边 + 右边（两条竖边）
 *   .lei-home-intro::after  → 上边 + 下边（两条横边）
 * __lace 是主题里本来就有的空 span，借它当第二层，因此无需改动 EJS。
 *
 * 定位约定：background-position 的百分比是相对"容器尺寸 - 图片尺寸"算的，
 * 所以 0% / 100% 正好把饰品贴死在盒子内边缘。卡片左右各有 22px 内边距，
 * 正文与右侧 cavity 面板都够不到那里，饰品因此落在边缘缝隙里，不会压到字。
 *
 * 层叠约定：z-index: -1 让饰品压在卡片背景（那层淡粉彩底）之上、正文与
 * cavity 面板之下，所以面板附近的饰品会被面板挡住而不是糊在滑块上。卡片在
 * _lei-cavity.styl 里是 isolation: isolate，自成一个层叠上下文，
 * 因此 -1 不会把饰品甩到页面背景后面去。
 * 两层都 pointer-events: none，不拦截 cavity 滑块与链接的点击。
 *
 * 注：卡片原本还有一圈手绘抖线边框给饰品作参照，该边框已删除（见 7b），
 * 所以现在饰品是贴着卡片无形边缘排布的一圈；若要重新给它一个可见边界，
 * 在 7b 里补一层 border / box-shadow 即可，7e 不用动。
 */
.lei-site-layout .lei-home-intro__lace {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  border: 0;
  border-image: none;
  opacity: 1;
  pointer-events: none;
  animation: lei-ornament-drift 7.5s ease-in-out infinite;
  background:
    var(--lei-doodle-moon) no-repeat 100% 13% / 15px 15px,
    var(--lei-doodle-fish) no-repeat 100% 46% / 17px 17px,
    var(--lei-doodle-sparkle) no-repeat 100% 63% / 14px 14px,
    var(--lei-doodle-sparkle-mint) no-repeat 100% 80% / 15px 15px,
    var(--lei-doodle-bubble) no-repeat 0% 22% / 16px 16px,
    var(--lei-doodle-butterfly) no-repeat 0% 54% / 17px 17px,
    var(--lei-doodle-rainbow) no-repeat 0% 83% / 18px 18px;
}

/* 主题的 ::after 原本是底部点状装饰条，必须显式重置其宽高与位置 */
.lei-site-layout .lei-home-intro::after {
  display: block;
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  opacity: 1;
  pointer-events: none;
  animation: lei-ornament-twinkle 9s ease-in-out infinite;
  background:
    /* 上边：从左到右随手撒 */
    var(--lei-doodle-drop) no-repeat 5.5% 0% / 17px 17px,
    var(--lei-doodle-wave) no-repeat 22% 0% / 25px 25px,
    var(--lei-doodle-star) no-repeat 39% 0% / 14px 14px,
    var(--lei-doodle-sparkle-tilt) no-repeat 54% 0% / 15px 15px,
    var(--lei-doodle-bow) no-repeat 66% 0% / 16px 16px,
    var(--lei-doodle-cloud) no-repeat 78% 0% / 21px 21px,
    var(--lei-doodle-star-sky) no-repeat 91% 0% / 13px 13px,
    /* 下边 */
    var(--lei-doodle-sprout) no-repeat 8% 100% / 18px 18px,
    var(--lei-doodle-heart) no-repeat 26% 100% / 16px 16px,
    var(--lei-doodle-note) no-repeat 45% 100% / 18px 18px,
    var(--lei-doodle-flower) no-repeat 64% 100% / 17px 17px,
    var(--lei-doodle-cherry) no-repeat 86% 100% / 18px 18px,
    var(--lei-doodle-dot) no-repeat 94% 100% / 10px 10px;
}

/* 两层的动效刻意错开，让整圈饰品像被微风轻轻吹着，而不是整齐划一地一起闪：
 *   竖边（__lace）  → 极缓慢地上下漂 2px，横向不动，因此永远不会挪出卡片；
 *   横边（::after） → 只做明暗呼吸，完全不位移，避免上边饰品浮到卡片外面。
 * 幅度都取到肉眼刚能察觉的程度，不做抢眼的动画。 */
@keyframes lei-ornament-drift {
  0%, 100% { transform: translateY(0); opacity: .8; }
  50%      { transform: translateY(-2px); opacity: 1; }
}

@keyframes lei-ornament-twinkle {
  0%, 100% { opacity: .68; }
  50%      { opacity: 1; }
}

/* 窄屏：卡片变高变窄，饰品等比缩小、每边只留两三颗避免拥挤 */
@media screen and (max-width: 667px) {
  .lei-site-layout .lei-home-intro__lace {
    background:
      var(--lei-doodle-moon) no-repeat 100% 20% / 14px 14px,
      var(--lei-doodle-fish) no-repeat 100% 72% / 15px 15px,
      var(--lei-doodle-bubble) no-repeat 0% 34% / 14px 14px,
      var(--lei-doodle-rainbow) no-repeat 0% 80% / 16px 16px;
  }

  .lei-site-layout .lei-home-intro::after {
    background:
      var(--lei-doodle-drop) no-repeat 7% 0% / 15px 15px,
      var(--lei-doodle-star) no-repeat 38% 0% / 12px 12px,
      var(--lei-doodle-cloud) no-repeat 72% 0% / 18px 18px,
      var(--lei-doodle-sprout) no-repeat 10% 100% / 16px 16px,
      var(--lei-doodle-flower) no-repeat 46% 100% / 15px 15px,
      var(--lei-doodle-cherry) no-repeat 82% 100% / 16px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lei-site-layout .lei-home-intro__lace,
  .lei-site-layout .lei-home-intro::after {
    animation: none;
  }
}
/* 四角小星星（✦），主色为柔和粉，与主题色 hsl(338 92% 74%) 接近 */
:root {
  --lei-sparkle-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f3a2c3' d='M12 1.8c.7 4.9 3.3 7.5 8.2 8.2-4.9.7-7.5 3.3-8.2 8.2-.7-4.9-3.3-7.5-8.2-8.2 4.9-.7 7.5-3.3 8.2-8.2z'/%3E%3C/svg%3E");
  --lei-sparkle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 1.8c.7 4.9 3.3 7.5 8.2 8.2-4.9.7-7.5 3.3-8.2 8.2-.7-4.9-3.3-7.5-8.2-8.2 4.9-.7 7.5-3.3 8.2-8.2z'/%3E%3C/svg%3E");
}

/* ---------- 3. 首页文章卡片之间的小星星分隔 ---------- */
/* 绝对定位在卡片间隙上，不占用布局空间，不影响卡片对齐 */
.post-list.post .post-card-wrap {
  position: relative;
}

.post-list.post .post-card-wrap + .post-card-wrap::before {
  content: '';
  position: absolute;
  z-index: 3;
  top: -15px;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translateX(-50%);
  background: var(--lei-sparkle-url) center / contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  animation: lei-sparkle-twinkle 4.2s ease-in-out infinite;
}

@keyframes lei-sparkle-twinkle {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) scale(0.86); }
  50%      { opacity: 0.95; transform: translateX(-50%) scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .post-list.post .post-card-wrap + .post-card-wrap::before {
    animation: none;
    opacity: 0.8;
  }
}

/* ---------- 4. 侧边栏小组件标题的小星星 ---------- */
/* 用 mask 让颜色跟随主题变量，深浅色模式都协调 */
.widget-wrapper .widget-header .item:first-child::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 7px;
  vertical-align: -1px;
  background: color-mix(in srgb, var(--theme) 62%, transparent);
  -webkit-mask: var(--lei-sparkle-mask) center / contain no-repeat;
  mask: var(--lei-sparkle-mask) center / contain no-repeat;
  pointer-events: none;
}

/* ---------- 5. 展示公式的圆角虚线小卡片 ---------- */
/*
 * MathJax v2 SVG 的公式字形无法换字体（矢量路径），但可以给展示公式
 * 一个柔和的粉彩小卡片，与全站圆润可爱的容器风格保持一致。
 * 保留原有的横向滚动能力（移动端规则不受影响）。
 */
.MathJax_SVG_Display {
  margin: 0.55em 0;
  padding-right: 0.9em;
  padding-left: 0.9em;
  border: 1.5px dashed color-mix(in srgb, var(--theme) 24%, transparent);
  border-radius: 14px;
  /* 极浅的粉彩底 + 柔和投影，卡片感但不抢眼 */
  background: color-mix(in srgb, var(--theme) 3%, #ffffff);
  box-shadow: 0 3px 14px color-mix(in srgb, var(--theme) 15%, transparent);
}

:root[data-theme="dark"] .MathJax_SVG_Display {
  background: color-mix(in srgb, var(--theme) 7%, transparent);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.28);
}

/* ---------- 6. 正文二级标题的柔和虚线下边 ---------- */
/* 轻盈的点线呼应全站的蕾丝/虚线语言，很低的对比度，不抢眼 */
.md-text.content h2 {
  padding-bottom: 7px;
  border-bottom: 2px dashed color-mix(in srgb, var(--theme) 26%, transparent);
}

/* ---------- 8. LITTLE CORNER：侧栏 Moments / Friends 两个入口的美化 ---------- */
/*
 * 这两个入口原来只有一层 1px 描边 + 近白底，跟侧栏其它组件的粉彩语言脱节。
 * 这里只重做表面质感，不加高也不加宽：
 *   - 单项：粉彩渐变底 + 手剪感圆角 + 内圈白边 + 柔和投影；
 *   - 配对色：Moments 走粉紫、Friends 走蓝青，沿用全站粉↔蓝的成对惯例
 *     （与 .lei-sidebar-switch 的渐变、以及 _lei.styl 里 ✦ / ♡ 的角标语义同一套）；
 *   - 图标：外面套一枚 26px 的圆形小徽章。用 padding 撑开视觉、再用等量负
 *     margin 抵消，徽章变大而 flex 占位不变，因此不会把按钮顶高；
 *   - 徽章右上角贴一颗小星星：直接画在徽章自身的 background 里（复用 7e 的
 *     内联 SVG 素材），所以不会被标题文字挤掉，也不需要额外的伪元素。
 *
 * 尺寸核对：单项仍是 min-height: 44px。图标内容 16px + 四周各 5px 内边距
 * = 26px 徽章，负 margin 让它在 flex 里的占位仍是 16px；竖向内边距由 10px
 * 收到 8px，于是内容高 16px + 16px = 32px，远小于 44px，按钮高度与原来一致。
 *
 * 层叠提醒：这些选择器与 _lei-layout.styl 里的同名规则特异性相同（都是
 * .lei-site-layout .l_left .lei-portal-item），靠本文件后加载取胜。
 */

.lei-site-layout .l_left .lei-portal-item {
  padding: 8px 6px;
  border: 1px solid #f0d9e8;
  border-radius: 15px 17px 14px 18px;
  color: #8a7092;
  background: linear-gradient(135deg, #fffafd 0%, #f9f2ff 100%);
  box-shadow:
    inset 0 0 0 2px #fffdfe,
    0 3px 9px rgba(171, 142, 185, .1);
  transition:
    background .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    color .2s ease,
    transform .2s ease;
}

.lei-site-layout .l_left .lei-portal-item b {
  font-weight: 500;
  letter-spacing: .01em;
}

/* Friends：换成蓝青一套 */
.lei-site-layout .l_left .lei-portal-item:last-child {
  border-color: #d7e8f2;
  color: #6d8798;
  background: linear-gradient(135deg, #fafdff 0%, #eefaf7 100%);
}

/* 图标徽章：padding 撑开 + 等量负 margin 抵消，视觉 30px、flex 占位仍 16px，
 * 所以徽章变大也不会挤压标题文字、更不会把按钮顶高。 */
.lei-site-layout .l_left .lei-portal-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  box-sizing: content-box;
  padding: 7px;
  margin: -7px;
  border-radius: 50%;
  color: #cd7ea7;
  background:
    var(--lei-doodle-sparkle) no-repeat 70% 18% / 9px 9px,
    radial-gradient(circle at 34% 30%, #ffffff 0%, #fce9f5 62%, #f2d3e8 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .85),
    0 1px 4px rgba(190, 140, 175, .22);
  transition: transform .2s ease;
}

.lei-site-layout .l_left .lei-portal-item:last-child .lei-portal-icon {
  color: #5ea6c4;
  background:
    var(--lei-doodle-sparkle-mint) no-repeat 70% 18% / 9px 9px,
    radial-gradient(circle at 34% 30%, #ffffff 0%, #e8f5fc 62%, #d2e8f4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .85),
    0 1px 4px rgba(130, 175, 200, .22);
}

/* 悬停 / 当前页：轻微上浮 + 加大投影 + 徽章歪一下（沿用全站 -8° 的手法） */
.lei-site-layout .l_left .lei-portal-item:hover,
.lei-site-layout .l_left .lei-portal-item.active {
  color: #7a578f;
  border-color: #e5c8de;
  background: linear-gradient(135deg, #fffdfe 0%, #f6ecff 100%);
  box-shadow:
    inset 0 0 0 2px #fffdfe,
    0 6px 14px rgba(171, 142, 185, .17);
  transform: translateY(-2px);
}

.lei-site-layout .l_left .lei-portal-item:last-child:hover,
.lei-site-layout .l_left .lei-portal-item:last-child.active {
  color: #3d7c98;
  border-color: #c6e0ed;
  background: linear-gradient(135deg, #fcfeff 0%, #e8f7fd 100%);
}

.lei-site-layout .l_left .lei-portal-item:hover .lei-portal-icon,
.lei-site-layout .l_left .lei-portal-item.active .lei-portal-icon {
  transform: rotate(-8deg) scale(1.07);
}

/* 键盘聚焦：用跟随新圆角的外环，不要直角方框 */
.lei-site-layout .l_left .lei-portal-item:focus-visible {
  outline: 2px solid #b89bce;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lei-site-layout .l_left .lei-portal-item,
  .lei-site-layout .l_left .lei-portal-item .lei-portal-icon {
    transition: none;
  }

  .lei-site-layout .l_left .lei-portal-item:hover,
  .lei-site-layout .l_left .lei-portal-item.active {
    transform: none;
  }
}