/*
 * 璃光主题前端主样式。
 *
 * 这份文件从设计稿 .superpowers/brainstorm/20261002-235446-55324/content/glass-v3.html
 * 的 <style> 块移植而来。移植时只删掉展示稿专用的多页面切换外壳类名
 * （tv、tv-bar、view、views、main、note）以及所有靠 radio 选中态触发的规则，
 * 其余选择器和数值保持原样，包括计划三才用到的五个独立页面样式。
 *
 * 与设计稿的差异只有下面十处，写在这里免得后来的人以为是抄漏了：
 *
 * 1. 深浅模式：设计稿靠 radio 的选中态切换，这里改成 html.dark，
 *    由 header.php 里那段内联脚本在样式生效前加上，避免深色用户看到一帧白屏。
 * 2. 强调色：设计稿写死 #3b57c4 与 #93a4ff，这里改成 oklch 并且色相走 var(--hue)，
 *    亮度和彩度是从设计稿的目标色反解出来的：浅色 #3b57c4 对应 oklch(0.50 0.175 270)，
 *    深色 #93a4ff 对应 oklch(0.75 0.14 270)。色相 270 时四个颜色与设计稿的色差都在个位数以内。
 *    后台「强调色相」改的正是这个变量，色相一动整站配色跟着走。
 *    --acc2 是渐变的第二个色停，设计文档没有定义，亮度和彩度按设计稿的 #7b8bf0 与 #6d7fe8 反解。
 * 3. 归档页头部：设计稿的 m1、m2、m3 三套改名成 .m-mosaic、.m-plain、.m-photo，和选项取值对齐。
 * 4. 文章页栏宽：设计稿的 v-post 栏改成 body.is-post .col。设计稿里收窄的只有 v-post，
 *    独立页面与各种列表页都是宽栏，所以这个类只发给文章。
 * 5. 标签行：设计稿里的标签是静态 span，主题里是真链接，所以选择器补上 a。
 * 6. 首页卡片标题和分页同理：设计稿里的标题与分页项都是静态文本，主题里标题是真
 *    链接、分页项是 Typecho 盒状分页输出的 a，所以补了 .hc-t a 那条，并给 .pager
 *    的两条选择器加上 a。颜色和装饰都继承卡片自己的设定，不引入新的值。
 * 7. 阅读进度条：设计稿的 38% 是静态示意值，脚本一接手就不成立了，改成整条轨道
 *    宽 100% 加 transform:scaleX(0)，进度由 theme.js 只写 transform 推进。
 * 8. 404 卡（.nf）：设计稿里没有这一页，整块是计划二任务 8 新加的。只用既有的
 *    变量与 .glass 底座，没有引入新颜色。
 * 9. 说说卡片的元信息行（.nt-h a、.nt img）：设计稿的笔记卡只有一行时间，
 *    没有通往文章的链接也没有评论数，正文里的图片则是被单独挑出来排成 .nt-imgs 网格的。
 *    计划三任务 1 补了前两样，并让正文里的图片原地渲染，字号与颜色全部取自
 *    .nt-h time 与既有变量，没有引入新的值。
 * 10. 相册的年月分组与年份胶囊：设计稿的相册是整片平铺的，年月标题是静态 div，
 *    年份胶囊是静态 span。计划三任务 2 把每一组收进 <details>，默认只展开最近一组，
 *    收起的组浏览器不会去请求里面的图，这是几百张图时首屏不跟着涨的原因；年月标题
 *    因此变成 summary，年份胶囊变成真链接，多了一条 .gbar a 与去掉下划线的设定。
 *    字号、颜色、间距全部取自 .gm 与既有变量，没有引入新的值。
 * 11. 代码复制按钮、固定音乐播放器、导航「更多」菜单：设计稿里没有这三样东西，
 *    按同一套语言补的。代码复制按钮用玻璃片而不是 .copy 的深色片：真实文章的代码块
 *    是裸 pre（Typecho 不产出 .code-bar 那条栏），深色片在浅色底上读不清；
 *    音乐播放器直接复用设计稿右栏「正在听」卡片的 .mp 系列，外面加一层 .mp-fix
 *    固定到左下角（右栏在 1200px 以下整块隐藏，窄屏读者否则永远看不到它）；
 *    「更多」菜单沿用 .glass 底座与导航项的字号、圆角。
 *
 * 设计稿里写死的 rgba(59,87,196,.x) 光晕保持字面值不动：它们是低透明度的强调色投影，
 * 色相差在投影上看不出来，没必要为了统一再引入一个变量。
 */

/* 正文字体「霞鹜文楷 屏幕版」本地化：整包取自 registry.npmmirror.com 的
   lxgw-wenkai-screen-web@1.522.0，只留页面真正用到的 lxgwwenkaiscreen 这一套
   （248 个文件、13.4 MB，含 244 个按 unicode-range 切分的 woff2 与这张 210 KB 的表）。
   不依赖 CDN：国内不稳，而且外链会把访客 IP 送给第三方。升级字体时整个目录换掉、
   这里跟着改版本号。 */
@import url('vendor/lxgw-wenkai-screen/result.css?v=1.522.0');

/* ============ 页面外壳 ============ */
/* 设计稿是一段页面片段，它外面那一层（html/body 的边距和底色）是宿主页给的。
   主题里 .site 是整页容器，所以这几条要自己补：body 不归零会出现默认的 8px 白边；
   .site 不设 min-height 时，内容短的页面下方会露出 body 的白底。 */
html,body{margin:0;padding:0}
body{background-color:#e9ecf7}
html.dark body{background-color:#0f1119}
.site{min-height:100vh}

/* ============ 视觉系统 ============ */
.site{
  --ink:#12152a; --dim:#4e5670; --faint:#61697b;
  --line:rgba(255,255,255,.66); --line2:rgba(18,28,58,.08);
  --glass:rgba(255,255,255,.46); --glass-strong:rgba(255,255,255,.58);
  --acc:oklch(0.50 0.175 var(--hue,270)); --acc2:oklch(0.67 0.15 var(--hue,270)); --fade:#e9ecf7;
  background-color:#e9ecf7;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.34'/%3E%3C/svg%3E"),
    radial-gradient(1100px 780px at 6% -10%, #b9cbff 0%, rgba(185,203,255,0) 56%),
    radial-gradient(920px 840px at 96% 2%, #a8e2ee 0%, rgba(168,226,238,0) 58%),
    radial-gradient(1040px 760px at 42% 108%, #d6c7fb 0%, rgba(214,199,251,0) 56%),
    radial-gradient(700px 620px at 78% 62%, #ffd9e8 0%, rgba(255,217,232,0) 60%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat,no-repeat;
  border:1px solid rgba(18,28,58,.07); border-radius:18px; overflow:clip; position:relative;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif; color:var(--ink);
}
html.dark .site{
  --ink:#eef1f8; --dim:#aab2c6; --faint:#9199b4;
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.075);
  --glass:rgba(24,28,44,.42); --glass-strong:rgba(24,28,44,.6);
  --acc:oklch(0.75 0.14 var(--hue,270)); --acc2:oklch(0.63 0.16 var(--hue,270)); --fade:#0f1119;
  background-color:#0f1119;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E"),
    radial-gradient(1100px 780px at 6% -10%, #2b3a7a 0%, rgba(43,58,122,0) 56%),
    radial-gradient(920px 840px at 96% 2%, #0d4a58 0%, rgba(13,74,88,0) 58%),
    radial-gradient(1040px 760px at 42% 108%, #3a2a6e 0%, rgba(58,42,110,0) 56%);
  background-repeat:repeat,no-repeat,no-repeat,no-repeat;
}
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 10px rgba(18,30,72,.05);
  border-radius:16px;
}
html.dark .glass{box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 2px 10px rgba(0,0,0,.28)}

/* 浮动玻璃胶囊导航 */
.topbar{display:flex;justify-content:center;padding:16px 20px 4px}
.pill{position:relative;display:flex;align-items:center;gap:20px;padding:9px 12px 9px 10px;border-radius:999px;
  background:var(--glass-strong);-webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 4px 16px rgba(18,30,72,.09)}
html.dark .pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 12px 36px rgba(0,0,0,.4)}
.pill .mark{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--acc2),var(--acc));
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:0 0 auto;text-decoration:none}
/* 自定义标志：去掉生成圆标的渐变底，图片按自身比例放在同一个 34px 高度里。
   宽标志靠 max-width 与 object-fit:contain 压住，不会被拉变形，也不会把胶囊撑开。 */
.pill .mark.logo{width:auto;max-width:170px;height:34px;border-radius:0;background:none;padding:0}
.pill .mark.logo img{display:block;height:34px;width:auto;max-width:170px;object-fit:contain}
.pill .mark.logo .logo-dark{display:none}
html.dark .pill .mark.logo .logo-light{display:none}
html.dark .pill .mark.logo .logo-dark{display:block}
.pill nav{display:flex;gap:4px}
.pill nav a{font-size:13.5px;color:var(--dim);text-decoration:none;padding:7px 13px;border-radius:999px;transition:.18s;white-space:nowrap}
.pill nav a:hover{color:var(--ink)}
.pill nav a.on{color:var(--ink);font-weight:650;background:rgba(255,255,255,.72);box-shadow:0 2px 8px rgba(18,30,72,.08)}
html.dark .pill nav a.on{background:rgba(255,255,255,.12)}
.pill .tools{display:flex;gap:7px;margin-left:4px}
/* 顶栏那两个工具（搜索、深浅模式）。设计稿是 30 像素的圆，里面一个汉字；站长说边缘不清、
   看不出点了有没有反应、也不知道现在处在哪一态，所以改成「图标 + 文字」的胶囊：
   同一个高度（30）与圆角（999）保持在设计稿的形状语言里，多出来的是可点的边界、
   悬停与按下的反馈，以及深浅模式那颗写着自己当前状态的文字。 */
.tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;
  background:rgba(255,255,255,.5);border:1px solid var(--line);color:var(--dim);
  font-size:12px;font-family:inherit;line-height:1;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s,transform .12s,box-shadow .18s}
html.dark .tool{background:rgba(255,255,255,.07)}
.tool:hover{background:rgba(255,255,255,.85);border-color:var(--acc);color:var(--acc);
  box-shadow:0 2px 8px -2px rgba(59,87,196,.35)}
html.dark .tool:hover{background:rgba(255,255,255,.16)}
.tool:active{transform:scale(.94)}
.tool:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.tool[disabled]{opacity:.5;cursor:default;transform:none;box-shadow:none}
.tool-t{white-space:nowrap}
.tool-ico{display:none;width:14px;height:14px;flex:0 0 auto}
.tool-ico svg{display:block}
.tool-search .tool-ico{display:block}
.tool-mode[data-mode="auto"] .ico-auto,
.tool-mode[data-mode="dark"] .ico-dark,
.tool-mode[data-mode="light"] .ico-light{display:block}

.shell{display:flex;justify-content:center;align-items:flex-start;gap:24px;padding:18px 30px 44px;max-width:1670px;box-sizing:border-box;margin:0 auto}
.side{flex:0 0 252px;min-width:0;display:grid;gap:13px;align-content:start}
.col{flex:1 1 700px;min-width:0;max-width:1120px}
body.is-post .col{max-width:920px}
.rail{flex:0 0 190px;min-width:0;display:grid;gap:13px;align-content:start;position:sticky;top:74px}
@media(max-width:1200px){.rail{display:none}}
@media(max-width:1020px){.side{display:none}}

/* 置顶通栏 */
.hero{position:relative;border-radius:16px;overflow:hidden;margin-bottom:16px;display:block;text-decoration:none;
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 3px 12px rgba(18,30,72,.07)}
.hero img{width:100%;display:block;aspect-ratio:16/5;object-fit:cover}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;pointer-events:none;
  background:linear-gradient(to top,rgba(10,14,30,.78),rgba(10,14,30,.12) 62%,transparent)}
.hero-in{position:absolute;left:18px;right:18px;bottom:15px;z-index:2;display:flex;align-items:center;gap:12px;
  font-size:12.5px;color:rgba(255,255,255,.92)}
.pin{background:linear-gradient(120deg,var(--acc),var(--acc2));color:#fff;font-size:11.5px;font-weight:650;
  border-radius:8px;padding:4px 10px;box-shadow:0 6px 18px rgba(59,87,196,.45);flex:0 0 auto}
.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}

/* 宽卡片 */
.hc{background:var(--glass);-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 10px rgba(18,30,72,.05);
  border-radius:16px;overflow:hidden;display:flex;margin-bottom:15px;transition:transform .2s,box-shadow .2s}
.hc:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 7px 20px rgba(18,30,72,.1)}
html.dark .hc{box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.26)}
/* 封面这一块必须由正文那边决定卡片高度：图片原来是 `height:100%`，而百分比高度对一个
   没有确定高度的盒子算不出来，于是图片按自己的原始比例撑开，竖图会把整张卡片拉成 500 高、
   正文右侧留一大片空白（2026-10-11 线上实测，本地一直是 640x360 的自动封面所以没露出来）。
   给图片 position:absolute;inset:0，它就退出布局，卡片高度只看 .hc-body，封面再由 object-fit
   裁进这块地方。别的卡片族（.aitem .th 固定 42px、.wk-cov 是 16/10、.hero 是 16/5）本来就有
   确定高度，不受这一条影响。 */
.hc-cover{flex:0 0 32%;position:relative;background:rgba(255,255,255,.3);overflow:hidden}
.hc-cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;filter:blur(22px) saturate(150%);transform:scale(1.45)}
.hc-body{padding:19px 21px 20px;min-width:0}
.hc-cat{font-size:11.5px;letter-spacing:.05em;color:var(--faint);margin-bottom:8px}
.hc-t{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:21px;font-weight:600;line-height:1.42;margin:0 0 9px;letter-spacing:-.008em}
.hc-t a{color:inherit;text-decoration:none}
.hc-d{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:13.5px;line-height:1.74;color:var(--dim);margin:0 0 12px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-m{font-size:12px;color:var(--faint);display:flex;gap:12px;flex-wrap:wrap}
.hc-m .a{color:var(--acc);font-weight:600}
.pager{display:flex;gap:8px;justify-content:center;padding:8px 0 4px}
.pager span,.pager a{min-width:36px;height:36px;border-radius:12px;background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);text-decoration:none;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--dim)}
.pager span.on,.pager a.on{background:linear-gradient(120deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;font-weight:650}
/* 「上一页 / 下一页」是文字按钮，不是页码，给它自己的左右内边距。
   2026-10-10 量的现状：它跟页码一样只有 min-width:36px、没有内边距，盒子实测 41px 宽，
   而「上一页」三个字在 13px 字号下就要 39px，字贴着框边看着局促。加上内边距之后是 67px，
   高度、圆角、底色与页码仍然一致。 */
.pager .pn{min-width:0;padding:0 14px;white-space:nowrap}

/* 侧栏 */
.rl{padding:17px 17px 18px}
.rl-t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:13px}
.rl-prof{text-align:center}
.av{width:64px;height:64px;border-radius:50%;margin:0 auto 10px;background:linear-gradient(140deg,var(--acc2),var(--acc));
  display:flex;align-items:center;justify-content:center;font-size:20px;color:#fff;font-weight:650;
  box-shadow:0 10px 26px rgba(59,87,196,.4)}
.rl-name{font-size:15px;font-weight:650;margin-bottom:3px}
.rl-bio{font-size:12px;line-height:1.6;color:var(--faint)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tagrow span,.tagrow a{text-decoration:none;font-size:11.5px;color:var(--dim);background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:8px;padding:3px 9px}
html.dark .tagrow span,html.dark .tagrow a{background:rgba(255,255,255,.07)}
.lnk{display:grid;gap:9px}
.lnk a{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:13px;line-height:1.5;color:var(--dim);text-decoration:none;display:block}
.lnk a:hover{color:var(--acc)}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mini div{background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:11px;padding:9px 10px}
html.dark .mini div{background:rgba(255,255,255,.07)}
.mini b{display:block;font-size:17px;font-weight:650;letter-spacing:-.02em}
.mini span{font-size:11px;color:var(--faint)}

/* 文章页 */
.cover{position:relative;margin:0 24px;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.cover img{width:100%;display:block;aspect-ratio:21/7;object-fit:cover}
.cover::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,14,30,.06),rgba(10,14,30,.46))}
.pcol{max-width:100%;margin:0;padding:0 24px 48px;position:relative;z-index:3}
.phead{padding:28px 34px 26px;margin-bottom:18px}
.p-cat{font-size:12px;letter-spacing:.07em;color:var(--acc);font-weight:650;margin-bottom:12px}
.p-t{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:40px;line-height:1.24;font-weight:600;letter-spacing:-.016em;margin:0 0 15px}
.p-m{font-size:12.5px;color:var(--faint);display:flex;gap:13px;flex-wrap:wrap;align-items:center}
.p-m .r{width:26px;height:26px;border-radius:50%;background:linear-gradient(140deg,var(--acc2),var(--acc));color:#fff;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;font-weight:650;vertical-align:-8px;margin-right:-4px}
.pbody{padding:36px 60px 44px;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:18px;line-height:1.85}
.pbody p{margin:0 0 1.15em}
.pbody h2{font-size:24px;line-height:1.45;font-weight:600;margin:1.6em 0 .6em;padding-left:14px;position:relative}
.pbody h2::before{content:"";position:absolute;left:0;top:.16em;bottom:.16em;width:3px;border-radius:2px;
  background:linear-gradient(180deg,var(--acc),var(--acc2))}
.pbody a{color:var(--acc);text-decoration:underline;text-decoration-style:dashed;text-decoration-thickness:1px;text-underline-offset:4px}
.code{margin:1.3em 0;background:rgba(14,17,30,.9);border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;position:relative;
  font-family:ui-monospace,Menlo,monospace;font-size:13.5px;line-height:1.85}
.code-bar{display:flex;align-items:center;padding:8px 13px;background:rgba(255,255,255,.05);color:#9aa2b1;font-size:11.5px}
.copy{margin-left:auto;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);color:#c9d1de;border-radius:7px;padding:3px 10px;font-size:11px}
.code pre{margin:0;padding:14px 17px;color:#dfe3ea;overflow:auto}
/* 行号：号码由计数器画在每行前面（不再把数字写进代码文本里，复制就不会带上它们）。
   .cl 是服务端给每一行包的块，.cm 是注释色（旧主题时代留下的，现在没有生产者）。 */
.code pre{counter-reset:ln}
.code .cl{display:block;counter-increment:ln}
.code .cl::before{content:counter(ln);display:inline-block;width:20px;text-align:right;color:#565e70;
  margin-right:16px;user-select:none}
/* 代码类型标签：从 <code class="lang-xxx"> 里取，挂在卡片左上角（复制按钮在右上角）。
   有标签时给 pre 多留一行的高，免得标签压在首行代码上。 */
.code-lang{position:absolute;left:16px;top:9px;z-index:1;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:#8b97ad;pointer-events:none}
.code.has-lang pre{padding-top:32px}
/* 代码里的记号色。底是卡片那层深底：浅色模式下 rgba(14,17,30,.9) 压在页面上合成出 #242734，
   是两边里较亮的一侧（最坏情况），每个色都按 4.5:1 量过：
   正文 11.53、注释 5.04、关键字 7.49、字符串 10.21、数字 9.24、函数名 9.36、变量 8.69。 */
.code .cm{color:#8b97ad}
.code .kw{color:#c9a9ff}
.code .st{color:#a5e6a3}
.code .num{color:#ffc07a}
.code .fn{color:#8fd8f0}
.code .vr{color:#ffb0c8}
.tags{margin-top:28px;display:flex;gap:8px;flex-wrap:wrap}
.tags span{font-size:12.5px;color:var(--dim);background:rgba(255,255,255,.5);border:1px solid var(--line);border-radius:8px;padding:4px 11px}
html.dark .tags span{background:rgba(255,255,255,.07)}
.blk{margin-top:20px;padding:24px 26px 26px}
.blk-t{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:15px}
.rel{display:grid;gap:10px}
.rel a{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:14.5px;color:var(--ink);text-decoration:none;
  padding:12px 15px;background:rgba(255,255,255,.45);border:1px solid var(--line);border-radius:11px;display:block}
html.dark .rel a{background:rgba(255,255,255,.07)}
.rel a span{color:var(--faint);font-size:12px;margin-left:8px}
.cmt{display:flex;gap:12px;margin-bottom:13px}
.cmt-av{width:38px;height:38px;border-radius:50%;flex:0 0 38px;background:linear-gradient(140deg,#c2cffa,#9fb0f2)}
.cmt-n{font-size:13px;font-weight:600;margin-bottom:3px}
.cmt-n em{font-style:normal;font-weight:400;color:var(--faint);font-size:11.5px;margin-left:7px}
.cmt-b{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:14px;line-height:1.7;color:var(--dim)}
.frm{margin-top:16px}
.frm .row{display:flex;gap:10px;margin-bottom:10px}
.frm .fld{flex:1;height:38px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;padding:0 12px;
  font-size:13px;color:var(--faint);background:rgba(255,255,255,.45)}
.frm .area{height:78px;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:13px;color:var(--faint);background:rgba(255,255,255,.45)}
html.dark .frm .fld,html.dark .frm .area{background:rgba(255,255,255,.07)}
.frm .btn{margin-top:12px;display:inline-block;background:linear-gradient(120deg,var(--acc),var(--acc2));color:#fff;font-size:13px;
  font-weight:650;border-radius:10px;padding:9px 20px;box-shadow:0 8px 22px rgba(59,87,196,.36)}

/* ============ 站内搜索 ============ */
/* 顶栏那颗「搜」按钮旁边的输入框。设计稿里只有一个圆形按钮，所以默认收起来，
   点一下才展开（.ts-ready 与 .ts-open 都由 theme.js 加，脚本没跑时输入框是展开的，
   不影响直接使用）。宽度用 max-width 过渡，收起时不占位。 */
.ts{display:flex;align-items:center;gap:6px;margin:0}
.ts-in{width:100%;max-width:0;height:30px;padding:0;border:1px solid transparent;border-radius:999px;
  background:rgba(255,255,255,.5);color:var(--ink);font-size:12.5px;font-family:inherit;
  opacity:0;box-sizing:border-box;transition:max-width .2s,opacity .2s,padding .2s}
html.dark .ts-in{background:rgba(255,255,255,.07)}
.ts-ready .ts-in{pointer-events:none}
.ts-open .ts-in{max-width:160px;padding:0 12px;border-color:var(--line);opacity:1;pointer-events:auto}
.ts-in:focus{outline:2px solid var(--acc);outline-offset:1px}
.ts-in::-webkit-search-cancel-button{margin-right:2px}

/* 搜索页那张「换个词再搜」的卡片。输入框常驻，不受顶栏那套收起逻辑影响。 */
.sbox{display:flex;gap:10px;align-items:center}
.sbox input{flex:1;min-width:0;height:38px;padding:0 13px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.45);color:var(--ink);font-size:13.5px;font-family:inherit;box-sizing:border-box}
html.dark .sbox input{background:rgba(255,255,255,.07)}
.sbox input:focus{outline:2px solid var(--acc);outline-offset:1px}
.sbox .btn{margin-top:0;flex:0 0 auto;border:0;cursor:pointer;font-family:inherit}

/* 公式与图表。两个库由 lib/enhance.php 按需发出，这里只管它们在正文里的盒子：
   块级公式与图表都可能比正文列宽，超宽时横向滚动，不撑破卡片。
   行内公式跟着正文的字号走，稍微放大一点点，免得上下标糊成一团。 */
.pbody .katex{font-size:1.04em}
.pbody .katex-display{margin:1.2em 0;overflow-x:auto;overflow-y:hidden}
.pbody .mermaid{margin:1.3em 0;text-align:center;overflow-x:auto}
.pbody .mermaid svg{max-width:100%;height:auto}

/* 评论卡。上面那几条 .cmt*/.frm* 是从设计稿原样搬过来的展示样式：设计稿里的
   .cmt-av 是一个渐变圆点，.fld 是画着占位文字的假框。下面补的是把真实元素
   （img、input、textarea、列表）放进去之后必须有的那几条，以及设计稿没画的
   列表外壳、子评论缩进、空状态。规则只增不改，设计稿那几条的数值保持原样。 */
.cmt-av{object-fit:cover;display:block}
.cmt-m{flex:1;min-width:0}
.cmt-b{margin-top:2px;overflow-wrap:anywhere}
.cmt-b p{margin:0 0 .7em}
.cmt-b p:last-child{margin-bottom:0}
.cmt-b a{color:var(--acc)}
.cmt-b blockquote{margin:.6em 0;padding:2px 0 2px 12px;border-left:2px solid var(--line2);color:var(--faint)}
.cmt-b code{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;background:rgba(255,255,255,.55);
  border:1px solid var(--line);border-radius:6px;padding:1px 5px}
html.dark .cmt-b code{background:rgba(255,255,255,.08)}
.cmt-badge{font-size:10.5px;font-weight:650;color:var(--acc);background:rgba(59,87,196,.14);border-radius:6px;padding:1px 6px;margin-left:7px}
html.dark .cmt-badge{background:rgba(147,164,255,.18)}
.cmt-a{margin-top:7px;display:flex;align-items:center;gap:12px;font-size:11.5px;color:var(--faint)}
.cmt-a a{color:var(--acc);text-decoration:none}
.cmt-a a:hover{text-decoration:underline}
.cmt-wait{color:#b45309}
html.dark .cmt-wait{color:#fbbf24}
.cmt-list,.cmt-children{list-style:none;margin:0;padding:0}
.cmt-children{margin-top:12px}
.cmt-child{position:relative;padding-left:16px}
.cmt-child::before{content:"";position:absolute;left:0;top:4px;bottom:6px;width:2px;border-radius:1px;background:var(--line2)}
.cmt-empty{padding:14px 0 4px;font-size:13px;color:var(--faint)}
.frm .fld{width:100%;box-sizing:border-box;color:var(--ink);font-family:inherit}
.frm .area{width:100%;box-sizing:border-box;color:var(--ink);font-family:inherit;display:block;resize:vertical}
.frm .fld:focus,.frm .area:focus{outline:2px solid var(--acc);outline-offset:1px}
.frm .btn{border:0;cursor:pointer;font-family:inherit}
.frm-act{margin-top:12px;display:flex;align-items:center;gap:14px}
.frm-act a{font-size:12.5px;color:var(--acc);text-decoration:none}
.frm-who{font-size:12.5px;color:var(--faint);margin-bottom:10px}
.frm-who a{color:var(--acc)}

/* ============ 评论框里的表情与颜文字 ============
   工具条挂在 `.frm-act` 这一行的右端（那一行是 flex，靠 margin-left:auto 靠右），面板从按钮上方弹出。
   服务端渲染时就带着 hidden：没有脚本时页面上不该出现点不动的按钮，显出来与开关都在
   assets/theme.js 的 initCommentFaces() 里。清单在 lib/comments.php 的 lumira_comment_faces()。 */
.frm-emo{margin-left:auto;position:relative;display:flex;gap:8px;align-items:center}
.frm-emo-t{font:inherit;font-size:12.5px;line-height:1;color:var(--dim);background:rgba(140,155,200,.16);
  border:1px solid rgba(18,28,58,.10);border-radius:999px;padding:7px 12px;cursor:pointer;transition:background .18s,color .18s}
.frm-emo-t:hover{background:rgba(140,155,200,.26);color:var(--ink)}
.frm-emo-t.on{color:#fff;background:var(--acc);border-color:transparent}
html.dark .frm-emo-t{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
html.dark .frm-emo-t:hover{background:rgba(255,255,255,.17)}
html.dark .frm-emo-t.on{background:var(--acc);border-color:transparent}
.frm-emo-p{position:absolute;right:0;bottom:calc(100% + 10px);z-index:30;width:min(352px,84vw);
  border:1px solid var(--line);border-radius:14px;padding:10px 12px 12px;background:var(--glass-strong);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 10px 30px rgba(18,30,72,.14)}
html.dark .frm-emo-p{box-shadow:0 10px 30px rgba(0,0,0,.40)}
.frm-emo-p[hidden],.frm-emo-grid[hidden]{display:none}
.frm-emo-g{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:8px}
.frm-emo-g button{font:inherit;font-size:11.5px;line-height:1;color:var(--faint);background:rgba(140,155,200,.14);
  border:0;border-radius:999px;padding:5px 9px;cursor:pointer}
.frm-emo-g button.on{color:#fff;background:var(--acc)}
.frm-emo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px;max-height:196px;overflow:auto}
.frm-emo-grid button{font:inherit;font-size:19px;line-height:1;height:34px;border:0;border-radius:9px;background:none;
  cursor:pointer;color:var(--ink)}
.frm-emo-grid button:hover{background:rgba(140,155,200,.20)}
.frm-emo-p.kind-kaomoji{width:min(430px,88vw)}
.frm-emo-p.kind-kaomoji .frm-emo-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}
.frm-emo-p.kind-kaomoji .frm-emo-grid button{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 6px}
@media(max-width:640px){.frm-emo-p{right:-2px;width:min(320px,92vw)}}
@media(max-width:640px){.frm .row{flex-direction:column}}

/* ============ 归档页 ============ */
.arc-wrap{max-width:1670px;margin:16px auto 0;padding:0 30px;box-sizing:border-box}
.arc-hero{position:relative;margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--line);
  height:clamp(190px,15vw,270px);display:flex;align-items:flex-end}
.arc-hero .mosaic{position:absolute;inset:0;display:flex;background:#0d1020}
.arc-hero .mosaic i{min-width:0;overflow:hidden;position:relative}
.arc-hero .mosaic i:nth-child(1){flex:1.55 1 0}
.arc-hero .mosaic i:nth-child(2){flex:0.72 1 0}
.arc-hero .mosaic i:nth-child(3){flex:1.25 1 0}
.arc-hero .mosaic i:nth-child(4){flex:0.86 1 0}
.arc-hero .mosaic i:nth-child(5){flex:1.35 1 0}
.arc-hero .mosaic i:nth-child(6){flex:0.94 1 0}
.arc-hero .mosaic i+i{box-shadow:inset 1px 0 0 rgba(0,0,0,.16)}
.arc-hero .mosaic img{width:100%;height:100%;object-fit:cover;display:block;
  filter:blur(24px) saturate(132%) brightness(.94);transform:scale(1.5)}
.arc-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(9,12,26,.82) 0%,rgba(9,12,26,.56) 34%,rgba(9,12,26,.24) 64%,rgba(9,12,26,.46) 100%),
    linear-gradient(180deg,rgba(9,12,26,.2) 0%,transparent 30%,rgba(9,12,26,.26) 100%)}
.arc-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
.arc-hero .txt{position:relative;z-index:2;padding:26px 34px 30px;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.arc-hero h2{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:clamp(30px,3.4vw,50px);line-height:1.16;font-weight:600;
  color:#fff;margin:0 0 10px;letter-spacing:-.024em;text-shadow:0 2px 26px rgba(0,0,0,.42)}
.arc-hero p{margin:0;font-size:13px;color:rgba(255,255,255,.8);display:flex;align-items:center;gap:11px}
.arc-hero p::before{content:"";width:34px;height:1px;background:rgba(255,255,255,.5);display:block;flex:0 0 auto}
.arc-stats{display:flex;gap:26px;flex-wrap:wrap}
.arc-stats div{text-align:left}
.arc-stats b{display:block;font-family:ui-monospace,Menlo,monospace;font-size:clamp(18px,1.7vw,24px);font-weight:700;
  color:#fff;letter-spacing:-.03em;line-height:1;margin-bottom:5px;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.arc-stats span{font-size:11px;color:rgba(255,255,255,.72)}

.arc-hero.m-plain{background:transparent;border:0;border-bottom:1px solid var(--line2);border-radius:0;
  height:auto;min-height:0;padding:34px 0 26px;align-items:flex-end}
.arc-hero.m-plain::after,.arc-hero.m-plain::before{display:none}
.arc-hero.m-plain .txt{padding:0}
.arc-hero.m-plain h2{color:var(--ink);text-shadow:none}
.arc-hero.m-plain p{color:var(--faint)}
.arc-hero.m-plain p::before{background:var(--line2)}
.arc-hero.m-plain .arc-stats b{color:var(--acc);text-shadow:none}
.arc-hero.m-plain .arc-stats span{color:var(--faint)}
.arc-hero.m-photo .bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.ayear{display:flex;align-items:baseline;gap:11px;margin:30px 0 14px}
.ayear b{font-family:ui-monospace,Menlo,monospace;font-size:38px;font-weight:700;letter-spacing:-.045em;line-height:1;
  background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.ayear span{font-size:12.5px;color:var(--faint)}
.aitem{display:flex;align-items:center;gap:15px;padding:13px 16px;border-radius:14px;text-decoration:none;margin-bottom:9px;
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 9px rgba(18,30,72,.05);transition:transform .18s,box-shadow .18s}
.aitem:hover{transform:translateX(3px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 6px 18px rgba(18,30,72,.1)}
.aitem time{font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:var(--acc);font-weight:600;flex:0 0 48px}
.aitem b{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:15.5px;font-weight:600;line-height:1.5;color:var(--ink);flex:1;min-width:0}
.aitem em{font-style:normal;font-size:11.5px;color:var(--faint);flex:0 0 auto}
/* 浏览量。跟分类名同一档字号，但数字用等宽，翻页时那一列不会左右抖。 */
.aitem .vw{font-family:ui-monospace,Menlo,monospace;white-space:nowrap}
.aitem .th{flex:0 0 72px;height:42px;border-radius:9px;overflow:hidden;background:rgba(255,255,255,.35)}
.aitem .th img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(12px) saturate(145%);transform:scale(1.6)}
.rail-stat{display:grid;grid-template-columns:1fr 1fr;gap:10px;text-align:center}
.rail-stat div{padding:12px 6px;border-radius:12px;background:rgba(255,255,255,.45);border:1px solid var(--line)}
html.dark .rail-stat div{background:rgba(255,255,255,.07)}
.rail-stat b{display:block;font-size:24px;font-weight:700;letter-spacing:-.03em;
  background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rail-stat span{font-size:11px;color:var(--faint)}
.prog{height:3px;background:rgba(120,140,200,.16);position:relative}
.prog i{position:absolute;left:0;top:0;height:3px;width:100%;transform-origin:left center;transform:scaleX(0);
  background:linear-gradient(90deg,var(--acc),var(--acc2));display:block}
.rprog b{display:block;font-size:26px;font-weight:700;letter-spacing:-.03em;background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.rbar{height:4px;border-radius:2px;background:rgba(140,155,200,.22);margin:9px 0 7px;overflow:hidden}
.rbar i{display:block;height:4px;width:38%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.rprog span{font-size:11.5px;color:var(--faint)}
.nvl{display:grid;gap:1px;margin:-2px -7px 0}
.nvl a{display:block;font-size:13px;color:var(--dim);text-decoration:none;padding:7px 10px;border-radius:9px;transition:background .16s,color .16s}
.nvl a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
html.dark .nvl a:hover{background:rgba(255,255,255,.08)}
.nvl a.on{background:linear-gradient(120deg,var(--acc),var(--acc2));color:#fff;font-weight:650;box-shadow:0 6px 16px rgba(59,87,196,.3)}
.nvl-more{display:block;margin:2px -7px 0;padding:9px 10px 2px;border-top:1px solid var(--line2);font-size:12px;color:var(--acc);text-decoration:none}
.hot{display:grid;gap:3px;margin:-4px -8px 0}
.hot a{display:block;text-decoration:none;padding:8px 9px 9px;border-radius:10px;transition:background .16s}
.hot a:hover{background:rgba(255,255,255,.6)}
html.dark .hot a:hover{background:rgba(255,255,255,.08)}
.hot-h{display:flex;align-items:baseline;gap:8px;margin-bottom:7px}
.hot b{flex:0 0 auto;font-family:ui-monospace,Menlo,monospace;font-size:11px;font-weight:700;color:var(--acc);opacity:.55;width:9px}
.hot a:first-child b{opacity:1}
.hot span{flex:1;min-width:0;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:12.5px;line-height:1.48;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hot a:first-child span{color:var(--ink);font-weight:600}
.hot i{flex:0 0 auto;font-style:normal;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--faint)}
.hot-b{height:2px;border-radius:1px;background:transparent;overflow:hidden;margin-left:17px}
.hot-b em{display:block;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--acc),var(--acc2));opacity:.75}
.hot a:first-child .hot-b em{opacity:1}
.ss{position:relative;padding-left:16px;margin:-2px 0 0}
.ss::before{content:"";position:absolute;left:3.5px;top:7px;bottom:9px;width:1px;
  background:linear-gradient(180deg,var(--acc) 0%,rgba(140,155,200,.22) 70%,transparent 100%)}
.ss-i{position:relative;padding-bottom:15px}
.ss-i:last-child{padding-bottom:1px}
.ss-i::before{content:"";position:absolute;left:-16px;top:5px;width:8px;height:8px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 3px rgba(59,87,196,.16)}
html.dark .ss-i::before{box-shadow:0 0 0 3px rgba(147,164,255,.2)}
.ss-i:not(:first-child)::before{background:rgba(140,155,200,.5);box-shadow:none;width:6px;height:6px;left:-15px;top:6px}
.ss time{display:block;font-family:ui-monospace,Menlo,monospace;font-size:10.5px;color:var(--acc);margin-bottom:4px;letter-spacing:.02em}
.ss-i:not(:first-child) time{color:var(--faint)}
/* 右栏「最近说说」的时间戳是通往那条说说的链接（设计稿里它是纯文本）。
   样式照上面 .nt-h a 那一对写：颜色继承，于是与设计稿渲染出来一模一样，
   读者多一个能点的地方。 */
.ss time a{color:inherit;text-decoration:none;transition:color .18s}
.ss time a:hover{color:var(--acc)}
.ss p{margin:0;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:12.5px;line-height:1.62;color:var(--dim)}
/* 右栏「访问统计」那张卡：两列四个数，数字走等宽那一档（与 .hot 的排名号、.ss 的时间戳同源），
   标签小一号、用最淡的那一档颜色。数字与标签各占一行，读起来是「2 / 今日访客」。 */
.st{display:grid;grid-template-columns:1fr 1fr;gap:13px 10px;margin:-2px 0 0}
.st div{display:flex;flex-direction:column;gap:2px;min-width:0}
.st b{font-family:ui-monospace,Menlo,monospace;font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.st span{font-size:11.5px;line-height:1.4;color:var(--faint)}
.mp{display:flex;align-items:center;gap:10px}
.mp-play{width:30px;height:30px;border-radius:50%;flex:0 0 30px;position:relative;background:linear-gradient(140deg,var(--acc2),var(--acc));box-shadow:0 6px 16px rgba(59,87,196,.35)}
.mp-play::after{content:"";position:absolute;left:12px;top:10px;border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.mp-info{min-width:0}
.mp-info b{display:block;font-size:12.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-info span{font-size:11px;color:var(--faint)}
.mp-bar{height:3px;border-radius:2px;background:rgba(140,155,200,.24);margin-top:11px;overflow:hidden}
.mp-bar i{display:block;height:3px;width:42%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.toclist{list-style:none;margin:0;padding:0}
.toclist li a{display:block;font-size:12.5px;line-height:1.45;color:var(--dim);text-decoration:none;padding:6px 0 6px 11px;border-left:2px solid rgba(140,155,200,.22)}
.toclist li.on a{color:var(--acc);font-weight:650;border-left-color:var(--acc)}
.footnote{max-width:1670px;margin:8px auto 0;padding:18px 30px 22px;box-sizing:border-box;border-top:1px solid var(--line2);display:flex;justify-content:center;font-size:12.5px;color:var(--faint)}
/* 页脚居中成一块：版权、一行站内链接（RSS / 关于 / 网站地图）、驱动，备案那行由 .filing 排。
   链接按设计稿保持纯灰文字、不带下划线（2026-10-06 站长看过强调色加虚线下划线那一版之后
   要求回到设计稿：页脚是落款，不该抢眼）。悬停时只换颜色，作为「它能点」的唯一提示。 */
.fn-in{display:grid;gap:6px;justify-items:center;text-align:center}
.fn-text{line-height:1.7}
.fn-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 6px}
.fn-sep{color:var(--faint);opacity:.6}
.fn-by{line-height:1.7}
.footnote a{color:var(--faint);text-decoration:none;transition:color .18s}
.footnote a:hover{color:var(--acc)}
/* 站长自己贴的页脚 HTML（备案信息等）。居中的一行，排在版权、链接行与驱动三行的下面，
   没有内容时整块不输出（见 footer.php），所以这里不用管空盒子的间距。
   里面的链接与 .footnote 一样保持纯灰（2026-10-06 站长要求页脚整体回到设计稿的纯灰文字，
   第一版只改了 .footnote，漏了这一处，截图里备案号还是强调色加下划线）。 */
.filing{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 16px;font-size:12.5px;color:var(--faint);text-align:center}
.filing a{color:var(--faint);text-decoration:none;transition:color .18s}
.filing a:hover{color:var(--acc)}
/* 公安备案图标。官方素材是 36x40 的竖图，按高度缩放，跟着文字基线坐一点。 */
.filing img{height:16px;width:auto;vertical-align:-3px;margin-right:5px}

.pagehead{padding:24px 28px 22px;margin-bottom:18px}
.pagehead h2{font-size:30px;font-weight:650;letter-spacing:-.022em;margin:0 0 6px}
.pagehead p{margin:0;font-size:13px;color:var(--faint)}
.tl{position:relative;padding-left:22px}
.tl::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:linear-gradient(180deg,var(--acc),rgba(140,155,200,.18))}
.tl-y{position:relative;font-family:ui-monospace,Menlo,monospace;font-size:15px;font-weight:700;color:var(--acc);margin:22px 0 13px;letter-spacing:-.02em}
.tl-y:first-child{margin-top:2px}
.tl-y::before{content:"";position:absolute;left:-22px;top:5px;width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 4px rgba(59,87,196,.14)}
.nt{padding:15px 18px 17px;margin-bottom:12px;position:relative}
.nt::before{content:"";position:absolute;left:-22px;top:20px;width:7px;height:7px;border-radius:50%;background:rgba(140,155,200,.65)}
.nt-h{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.nt-h time{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;color:var(--faint)}
.nt p{margin:0;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:14.5px;line-height:1.78;color:var(--ink)}
.nt-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}
.nt-imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;display:block}
.nt-imgs img:only-child{grid-column:1/-1;aspect-ratio:16/9}
.nt-imgs:has(img:nth-child(2):last-child){grid-template-columns:repeat(2,1fr)}
/* 说说卡片的元信息行。设计稿的笔记卡里只有时间，没有通往文章的链接、也没有评论数；
   链接是计划三任务 1 补的（卡片本身得能点开），评论数在 2026-10-06 按设计稿删掉了。
   字号与颜色都取自上面那条 .nt-h time，不引入新的值。 */
.nt-h a{color:inherit;text-decoration:none;transition:color .18s}
.nt-h a:hover{color:var(--acc)}
/* 说说正文里的图片。设计稿把图片单独排成 .nt-imgs 网格，主题不拆正文里的 img 标签
   （正则改 HTML 太脆），改成让它们原地渲染并挡住溢出，卡片不会被子图撑破。 */
.nt img{max-width:100%;height:auto;border-radius:10px}
/* 正文里的图片。编辑器写进来的 width 属性有多大就画多大，会把卡片撑破：2026-10-11 线上实测
   一张 1280 宽的图从正文栏 403 伸到 1683，而卡片右边界是 1214。压到容器宽度以内，高度按比例。
   只加这两条，不加 display:block 与圆角：行内图（表情那类）的位置与卡片外的方角都没打算改。 */
.pbody img{max-width:100%;height:auto}
.gbar,.wfilter{display:flex;gap:7px;padding:11px 13px;margin-bottom:18px;flex-wrap:wrap}
.gbar span,.gbar a,.wfilter span{font-size:12.5px;padding:6px 15px;border-radius:999px;color:var(--dim);cursor:pointer;border:1px solid transparent;text-decoration:none}
.gbar span.on,.gbar a.on,.wfilter span.on{background:linear-gradient(120deg,var(--acc),var(--acc2));color:#fff;font-weight:650}
.gm{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--acc);font-weight:650;margin:20px 0 11px}
/* 相册按年月折起来。收起的一组里的图浏览器不会请求，几百张图的首屏才只剩最近那一组。
   .gm:first-of-type 那条上边距归零对 summary.gm 同样成立：每个 summary 都是自己那个
   details 里的第一个同类型元素。组与组之间的间距因此由 .gy 的下边距给。 */
.gy{margin:0 0 20px}
.gy:last-child{margin-bottom:0}
summary.gm{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none}
summary.gm::-webkit-details-marker{display:none}
summary.gm::before{content:"▸";font-size:11px;color:var(--faint)}
details.gy[open]>summary.gm::before{content:"▾"}
.gm em{font-style:normal;font-weight:400;font-size:11.5px;color:var(--faint)}
.gm:first-of-type{margin-top:0}
.ggrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media(max-width:760px){.ggrid{grid-template-columns:repeat(2,1fr)}}
.ggrid a{display:block;border-radius:12px;overflow:hidden;position:relative;background:rgba(255,255,255,.3)}
.ggrid img{width:100%;display:block;aspect-ratio:4/3;object-fit:cover;transition:transform .35s}
.ggrid a:hover img{transform:scale(1.06)}
.ggrid a::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,30,.46),transparent 48%);opacity:0;transition:opacity .25s}
.ggrid a:hover::after{opacity:1}
.ggrid time{position:absolute;left:11px;bottom:9px;z-index:2;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:#fff;opacity:0;transition:opacity .25s}
.ggrid a:hover time{opacity:1}
/* 作品页的卡片网格。设计稿画的是两列，计划三任务 3 第 3 步要的是三列，这里按任务书走：
   宽屏三列，往下依次两列、一列。两个断点借用布局自己的临界值（1020 隐藏左栏、760 是
   .ggrid 的临界值），不另外发明数字。 */
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:1020px){.wgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.wgrid{grid-template-columns:1fr}}
/* 一组里只有一两张卡时（作品集页的每组、作品页筛选之后），别把卡片挤在左边、右边空两格：
   用与三列一样的轨道宽度居中。只在三列那一档生效，≤1020px 的那些断点已经各有规矩。 */
@media(min-width:1021px){
  .wgrid-n1{grid-template-columns:minmax(0,calc((100% - 28px)/3));justify-content:center}
  .wgrid-n2{grid-template-columns:repeat(2,minmax(0,calc((100% - 28px)/3)));justify-content:center}
}
.wk{padding:18px 19px 19px;display:flex;flex-direction:column}
/* 作品封面。设计稿的 .wk 没有图，任务书要每张卡片带封面，所以补这几条：
   定宽高比 16/10，圆角跟 .ggrid 的格子一致，悬停轻微放大。
   这里不加 .hc-cover 那条 blur 滤镜：作品用的是带字版封面，封面上的标题要读得清。 */
.wk-cov{display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:rgba(255,255,255,.3);margin-bottom:13px}
.wk-cov img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}
.wk-cov:hover img{transform:scale(1.04)}
.wk-type{align-self:flex-start;font-size:10.5px;letter-spacing:.1em;font-weight:650;padding:3px 9px;border-radius:6px;margin-bottom:11px}
.wk-type.m{background:rgba(59,87,196,.15);color:var(--acc)}
.wk-type.c{background:rgba(0,140,110,.15);color:oklch(0.46 0.11 165)}
html.dark .wk-type.c{color:oklch(0.80 0.10 165)}
.wk-type.n{background:rgba(180,90,40,.15);color:oklch(0.48 0.12 45)}
html.dark .wk-type.n{color:oklch(0.82 0.10 60)}
.wk h3{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:19px;font-weight:600;margin:0 0 8px;line-height:1.4}
.wk h3 a{color:inherit;text-decoration:none}
.wk p{margin:0 0 13px;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:13px;line-height:1.72;color:var(--dim);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.wk-m{margin-top:auto;font-size:11.5px;color:var(--faint);display:flex;gap:11px;flex-wrap:wrap}
.wk-m .a{color:var(--acc);font-weight:600}
/* 类型小标签：与年份、状态同一行，用强调色的淡底把它和另外两个区分开。 */
.wk-m .k{color:var(--acc);background:rgba(63,86,197,.12);border-radius:6px;padding:1px 7px}

/* 作品集页（showcase.php）的类型导航与分组抬头。字号都取既有档位：抬头 19px 跟卡片标题
   （.wk h3）同一档，导航文字与数量 12.5px 跟页脚同一档；胶囊的底色与描边照 .pager。 */
.wknav{display:flex;flex-wrap:wrap;gap:8px;padding:14px 17px;margin:0 0 16px}
.wknav a{display:inline-flex;align-items:baseline;gap:7px;font-size:12.5px;color:var(--dim);background:var(--glass);
  border:1px solid var(--line);border-radius:12px;padding:6px 13px;text-decoration:none}
.wknav a:hover{color:var(--acc);border-color:var(--acc)}
.wknav a.on{color:var(--acc);border-color:var(--acc)}
.wknav a span{font-size:11px;color:var(--faint)}
.wksec{display:flex;align-items:baseline;gap:10px;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;
  font-size:19px;font-weight:600;margin:22px 2px 12px}
.wksec span{font-family:inherit;font-size:12.5px;font-weight:400;color:var(--faint)}

/* ============ 作品类型：章节目录与章节回链 ============
   目录排在标题卡与正文卡之间（post.php 里那个分支），只有小说 / 专栏 / 项目文档三类会画；
   章节页顶部那条回链让读者随时回到作品。样式都沿用 .blk 那张卡的几何。 */
.wktoc{margin:0 0 16px;padding:14px 17px}
.wktoc .blk-t{margin-bottom:8px}
.wktoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.wktoc li a{display:flex;gap:10px;align-items:baseline;text-decoration:none;color:var(--dim);
  font-size:13.5px;line-height:1.6;padding:7px 9px;border-radius:9px}
.wktoc li a:hover{background:rgba(140,155,200,.14);color:var(--ink)}
.wktoc .n{flex:0 0 26px;text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--faint)}
.wktoc .t{flex:1;min-width:0}
/* 目录里「最近三天更新」那个小标签：与作品卡上的类型标签（.wk-m .k）同一套配色与圆角。 */
.wktoc .s{flex:0 0 auto;font-size:11px;color:var(--acc);background:rgba(63,86,197,.12);border-radius:6px;padding:1px 7px}
.wkback{display:flex;align-items:baseline;gap:10px;padding:11px 17px;margin:0 0 14px;font-size:13px;color:var(--faint)}
.wkback a{color:var(--acc);text-decoration:none}
.wkback a:hover{text-decoration:underline}

/* 章节页的上下章：画在正文卡之后、相关文章与评论之前，所以上边距跟 .blk 那一族一样取 20px。
   跟上面那条回链同一族（同样的内边距、字号与两个颜色），只是多两条可点的路；
   两条各占一半、标题过长就地省略，不换行也不撑破卡片。 */
.wkstep{display:flex;gap:10px 18px;padding:11px 17px;margin:20px 0 0;font-size:13px}
.wkstep a{flex:1 1 0;min-width:0;color:var(--acc);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkstep a.next{text-align:right}
.wkstep a:hover{text-decoration:underline}
.wkstep .d{color:var(--faint);margin-right:7px}

/* 项目发布那两条链接（仓库 / 在线预览）：复用短代码那两档按钮的样式，只是换个容器。 */
.wklink{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:14px 17px;margin:0 0 16px}

/* ============ 作品页里的播放器（音乐作品） ============
   站点左下角那个是 .mp-fix，这里是正文里的一张卡：同一套 .mp-* 标记、同一份脚本（wirePlayer）。
   专辑多一条曲目列表与上一首/下一首；单曲只有一条播放条。播不动时 .mp-err 那句从 hidden 里出来。 */
.mp-work{padding:16px 19px 17px;margin:0 0 16px}
.mp-work .mp{display:flex;align-items:center;gap:12px}
.mp-work .mp-info{flex:1;min-width:0}
.mp-work .mp-prev,.mp-work .mp-next{font:inherit;font-size:12px;line-height:1;color:var(--dim);cursor:pointer;
  background:rgba(140,155,200,.16);border:1px solid rgba(18,28,58,.10);border-radius:999px;padding:7px 12px}
.mp-work .mp-prev:hover,.mp-work .mp-next:hover{background:rgba(140,155,200,.26);color:var(--ink)}
.mp-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.mp-list button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font:inherit;cursor:pointer;
  font-size:13.5px;line-height:1.6;color:var(--dim);background:none;border:0;border-radius:9px;padding:7px 9px}
.mp-list button:hover{background:rgba(140,155,200,.14);color:var(--ink)}
.mp-list button.on{background:rgba(63,86,197,.12);color:var(--acc)}
.mp-list .n{flex:0 0 22px;text-align:right;font-family:ui-monospace,Menlo,monospace;font-size:12px;color:var(--faint)}
.mp-list .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-list .s{flex:0 0 auto;font-size:11px;color:var(--faint)}
.mp-err{margin:10px 0 0;font-size:12.5px;color:var(--faint)}
.mp-err[hidden]{display:none}
.mp-err a{color:var(--acc)}
html.dark .mp-work .mp-prev,html.dark .mp-work .mp-next{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14)}
.wk-pl{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:13px;border-top:1px solid var(--line2)}
.wk-pl .pb{width:30px;height:30px;border-radius:50%;flex:0 0 30px;position:relative;background:linear-gradient(140deg,var(--acc2),var(--acc));box-shadow:0 6px 16px rgba(59,87,196,.35)}
.wk-pl .pb::after{content:"";position:absolute;left:12px;top:10px;border-left:9px solid #fff;border-top:5.5px solid transparent;border-bottom:5.5px solid transparent}
.wk-pl .pbar{flex:1;height:3px;border-radius:2px;background:rgba(140,155,200,.24);overflow:hidden}
.wk-pl .pbar i{display:block;height:3px;width:38%;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.wk-pl .pt{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--faint)}
.lkgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:820px){.lkgrid{grid-template-columns:1fr}}
.lk{padding:15px 17px;display:flex;align-items:center;gap:13px;text-decoration:none;transition:transform .18s,box-shadow .18s}
.lk:hover{transform:translateY(-2px)}
.lk > span:last-child{min-width:0}
.lk-av{width:44px;height:44px;border-radius:50%;flex:0 0 44px;background:linear-gradient(140deg,#c9d4f5,#a9b8ee)}
.lk b{display:block;font-size:14.5px;font-weight:650;color:var(--ink);margin-bottom:3px}
.lk span span{font-size:12px;line-height:1.55;color:var(--faint)}
/* 友链页。设计稿的 .lk-av 是一个渐变圆点（占位），真实页面里放的是对方的头像图，
   所以补一条 object-fit；背景渐变照旧留着，图没加载出来时那块不会是个窟窿。
   下面几组是申请区的正文样式与「被跳过的条目」提示，设计稿里没有对应标记。 */
img.lk-av{object-fit:cover;display:block}
.lkapply{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:13.5px;line-height:1.8;color:var(--dim)}
.lkapply p{margin:0 0 10px}
.lkapply p:last-child{margin-bottom:0}
.lkapply a{color:var(--acc)}
.lkapply ul,.lkapply ol{margin:0 0 10px;padding-left:22px}
.lkapply pre{margin:0;padding:14px 17px;color:#dfe3ea;overflow:auto;background:rgba(14,17,30,.9);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;line-height:1.8}
.lkapply-tip{margin:0;font-size:13.5px;line-height:1.8;color:var(--faint)}
.lkskip{margin:0;padding-left:20px;font-size:12.5px;line-height:1.9;color:var(--dim)}
.ab-top{display:flex;align-items:center;gap:18px}
.ab-av{width:76px;height:76px;border-radius:50%;flex:0 0 76px;background:linear-gradient(140deg,var(--acc2),var(--acc));
  display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;font-weight:650;box-shadow:0 10px 26px rgba(59,87,196,.4)}
.ab-top h2{font-size:28px;font-weight:650;letter-spacing:-.02em;margin:0 0 5px}
.ab-top p{margin:0 0 11px;font-size:13px;color:var(--faint)}
.ab-soc{display:flex;gap:7px;flex-wrap:wrap}
.ab-soc a{font-size:11.5px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.5);border:1px solid var(--line);color:var(--dim);text-decoration:none}
html.dark .ab-soc a{background:rgba(255,255,255,.07)}
.rail:empty{display:none}

/* ============ 404 ============ */
/* 设计稿里没有这一页，标记与样式是计划二任务 8 新加的，只用既有变量与 .glass 底座，
   没有引入新颜色。标记由 lib/archive-view.php 的 lumira_archive_notfound() 输出，
   404.php 与 archive.php 的 404 兜底共用同一份，两处样子永远一致。 */
.nf{padding:46px 26px 42px;text-align:center}
.nf-code{font-size:64px;line-height:1;font-weight:700;letter-spacing:-.04em;color:transparent;
  background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text}
.nf-t{font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:22px;font-weight:650;margin:14px 0 8px}
.nf-d{font-size:13.5px;line-height:1.7;color:var(--faint);margin:0 auto 22px;max-width:26em}
.nf-l{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.nf-l a{font-size:13px;padding:8px 20px;border-radius:999px;text-decoration:none;color:#fff;
  background:linear-gradient(120deg,var(--acc),var(--acc2));box-shadow:0 8px 20px rgba(59,87,196,.28)}
.nf-l a+a{color:var(--dim);background:rgba(255,255,255,.5);border:1px solid var(--line);box-shadow:none}
html.dark .nf-l a+a{background:rgba(255,255,255,.07)}

/* ============ 交互脚本新建的元素 ============ */
/* 这三组只给 assets/theme.js 用。回到顶部与灯箱的元素由脚本现建，选项关掉时
   根本不会建出来，对应的规则也就不会命中。 */
.btt{position:fixed;right:26px;bottom:26px;z-index:60;width:42px;height:42px;font-size:14px;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,transform .22s,visibility .22s}
.btt.on{opacity:1;visibility:visible;transform:none}

/* 目录：h3 缩一级挂在所属 h2 下面，左边那条竖线仍与 h2 对齐。 */
.toclist .sub{margin:0}
.toclist .sub li a{padding-left:26px;font-size:12px}

/* 图片灯箱：dialog 自带置顶、焦点管理与 Esc，这里只管铺满视口、居中放大图、压暗背景。 */
.lb{width:100%;height:100%;max-width:100%;max-height:100%;padding:0;border:0;background:transparent;overflow:hidden}
.lb[open]{display:flex;align-items:center;justify-content:center}
.lb::backdrop{background:rgba(8,11,24,.88)}
.lb img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(6,10,26,.5)}
.lb-x{position:fixed;top:20px;right:22px;z-index:1;padding:8px 16px;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:13px}
.lb-x:hover{background:rgba(255,255,255,.27)}

/* 代码复制按钮：浮在代码块右上角。真实文章的代码块是裸 pre（Typecho 不产出 .code
   卡片），脚本给它现建一层 .codewrap 当定位参照；已经有 .code 卡片的就直接挂上去。 */
.codewrap{position:relative}
.code-copy{position:absolute;top:8px;right:8px;z-index:1;cursor:pointer;font:inherit;font-size:11.5px;line-height:1;
  padding:5px 11px;border-radius:999px;color:var(--dim);background:var(--glass-strong);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background .16s,color .16s}
.code-copy:hover{color:var(--ink)}
.code-copy.ok{color:#fff;background:linear-gradient(120deg,var(--acc),var(--acc2));border-color:transparent}

/* 导航溢出：超出胶囊可用宽度的导航项收进「更多」菜单。菜单锚在胶囊上。 */
.pill nav .navmore{font:inherit;font-size:13.5px;color:var(--dim);background:none;border:0;padding:7px 13px;border-radius:999px;
  cursor:pointer;transition:.18s;white-space:nowrap}
.pill nav .navmore:hover{color:var(--ink)}
.pill nav .navmore[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.72);box-shadow:0 2px 8px rgba(18,30,72,.08)}
html.dark .pill nav .navmore[aria-expanded="true"]{background:rgba(255,255,255,.12)}
.navmore-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:148px;padding:6px;display:grid;gap:2px}
.navmore-menu[hidden]{display:none}
.navmore-menu a{display:block;font-size:13px;color:var(--dim);text-decoration:none;padding:8px 12px;border-radius:9px;
  white-space:nowrap;transition:background .16s,color .16s}
.navmore-menu a:hover{background:rgba(255,255,255,.6);color:var(--ink)}
html.dark .navmore-menu a:hover{background:rgba(255,255,255,.08)}

/* 音乐播放器：造型取自设计稿右栏的「正在听」卡片（.mp 系列），外面这一层把它固定到
   左下角。右下角是回到顶部按钮，两边不打架。 */
.mp-fix{position:fixed;left:26px;bottom:26px;z-index:60;width:238px;padding:13px 15px;box-sizing:border-box}
.mp-play{border:0;padding:0;cursor:pointer}
.mp-play.on::after{left:10px;top:9px;border:0;width:3px;height:12px;background:#fff;box-shadow:6px 0 0 #fff}
.mp-time{display:block;font-variant-numeric:tabular-nums}
@media(max-width:640px){.mp-fix{left:12px;bottom:12px;width:206px}}

/* ============ 短代码（第一批十二个） ============
   值来自 docs/superpowers/specs/2026-10-07-shortcodes-batch1.md 与那份设计稿：几何全部取自
   既有族（.aitem 的圆角、.frm .btn 的按钮、.rel a 的卡片、.ggrid a 的网格、.lk 的友链卡），
   新颜色只有三组：五色文本、四个语义 tone、以及控件那条冷灰染。对比度都量过（见规范第 3 节）。 */

/* 1 标签卡：卡面比正文卡亮 5.6%，投影按相邻表面那条规范给足 */
.sc-tabs{border:1px solid var(--line);border-radius:14px;background:var(--glass-strong);overflow:clip;
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);
  box-shadow:0 1px 3px rgba(0,0,0,.10), 0 8px 22px rgba(18,30,72,.06);margin:1.4em 0}
html.dark .sc-tabs{box-shadow:0 1px 3px rgba(0,0,0,.30), 0 8px 22px rgba(0,0,0,.26)}
.sc-tabs-bar{display:flex;gap:2px;padding:8px 10px 0;border-bottom:1px solid var(--line2);overflow-x:auto}
.sc-tabs-bar button{font:inherit;font-size:13px;color:var(--dim);background:none;border:0;padding:8px 12px 9px;
  border-radius:9px 9px 0 0;cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap}
.sc-tabs-bar button:hover{color:var(--ink)}
.sc-tabs-bar button.on{color:var(--ink);border-bottom-color:var(--acc)}
.sc-tab{padding:16px 20px;font-size:16px;line-height:1.85;color:var(--dim)}
.sc-tab[hidden]{display:none}
.sc-tab > :first-child{margin-top:0}
.sc-tab > :last-child{margin-bottom:0}

/* 2 提示与警告框：整块染色 + 每种 tone 一个图标 */
.sc-tip{display:flex;gap:11px;margin:1.3em 0;padding:13px 16px;border-radius:12px;font-size:15px;
  line-height:1.8;color:var(--dim);border:1px solid rgba(59,87,196,.28);background:rgba(59,87,196,.10)}
html.dark .sc-tip{border-color:rgba(147,164,255,.34);background:rgba(147,164,255,.16)}
.sc-tip > svg{flex:0 0 auto;margin-top:4px;color:var(--acc)}
.sc-tip > div > b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px}
.sc-tip > div > :last-child{margin-bottom:0}
.sc-tip.warning{border-color:oklch(0.72 0.15 75 / .42);background:oklch(0.72 0.15 75 / .14)}
.sc-tip.warning > svg{color:oklch(0.56 0.14 75)}
html.dark .sc-tip.warning{border-color:oklch(0.78 0.15 75 / .40);background:oklch(0.78 0.15 75 / .18)}
html.dark .sc-tip.warning > svg{color:oklch(0.82 0.14 75)}
.sc-tip.danger{border-color:oklch(0.62 0.19 25 / .40);background:oklch(0.62 0.19 25 / .12)}
.sc-tip.danger > svg{color:oklch(0.53 0.19 25)}
html.dark .sc-tip.danger{border-color:oklch(0.76 0.16 25 / .42);background:oklch(0.76 0.16 25 / .17)}
html.dark .sc-tip.danger > svg{color:oklch(0.82 0.15 25)}
.sc-tip.success{border-color:oklch(0.66 0.14 155 / .40);background:oklch(0.66 0.14 155 / .12)}
.sc-tip.success > svg{color:oklch(0.50 0.14 155)}
html.dark .sc-tip.success{border-color:oklch(0.78 0.13 155 / .38);background:oklch(0.78 0.13 155 / .17)}
html.dark .sc-tip.success > svg{color:oklch(0.82 0.13 155)}

/* 3 折叠框：原生 details，零 JS */
.sc-fold{border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.35);margin:1.2em 0;overflow:clip}
html.dark .sc-fold{background:rgba(255,255,255,.05)}
.sc-fold > summary{cursor:pointer;padding:11px 15px;font-size:13.5px;color:var(--ink);list-style:none;
  display:flex;align-items:center;gap:9px}
.sc-fold > summary::-webkit-details-marker{display:none}
.sc-fold > summary::after{content:"";margin-left:auto;width:7px;height:7px;border-right:1.5px solid var(--faint);
  border-bottom:1.5px solid var(--faint);transform:rotate(45deg);transition:transform .18s}
.sc-fold[open] > summary::after{transform:rotate(-135deg)}
.sc-fold > div{padding:12px 15px 14px;font-size:15px;line-height:1.8;color:var(--dim);border-top:1px solid var(--line2)}
.sc-fold > div > :first-child{margin-top:0}
.sc-fold > div > :last-child{margin-bottom:0}

/* 4 按钮样式的链接：两档，几何与字体都照 .frm .btn。
   `font-family` 必须显式写成界面栈、`line-height:normal` 必须写：
   按钮落在正文段落里，`.pbody` 用的是 LXGW 与 1.85 行高，两条一起把盒子从 34px 顶到 44px
   （主题自己的按钮是 34px）。同一个渐变拉在更高的盒子上，看起来就不是同一个东西了
   （2026-10-08 站长报的「两侧条状色差」，量到根子在这儿；`in oklch` 与噪点层两次尝试
   都是在治症状，已撤回）。 */
.sc-btn{display:inline-block;text-decoration:none;font-size:13px;font-weight:650;border-radius:10px;padding:9px 20px;
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;line-height:normal;border:0;
  color:#fff;margin:2px 0}
/* 主按钮：背景与 `.frm .btn` **逐字相同**。之前那两版（`in oklch` 插值、叠噪点层）
   都是在治症状：真正的原因是盒高（见上面 .sc-btn 那条注释），盒子对齐之后同一条渐变
   在两颗按钮上的表现就一致了。 */
.sc-btn-acc{background:linear-gradient(120deg,var(--acc),var(--acc2));box-shadow:0 8px 22px rgba(59,87,196,.36)}
.sc-btn-ghost{background:rgba(140,155,200,.16);border:1px solid rgba(18,28,58,.10);color:var(--dim);
  box-shadow:0 1px 2px rgba(18,30,72,.06)}
.sc-btn-ghost:hover{background:rgba(140,155,200,.26);color:var(--ink)}
html.dark .sc-btn-ghost{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);box-shadow:none}
html.dark .sc-btn-ghost:hover{background:rgba(255,255,255,.17)}

/* 5 点击复制：与次要按钮同一族（白色控件压在文章卡上分不出来，所以用冷灰染） */
.sc-copy{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12.5px;line-height:1;color:var(--dim);
  background:rgba(140,155,200,.16);border:1px solid rgba(18,28,58,.10);border-radius:999px;padding:6px 13px;cursor:pointer;
  box-shadow:0 1px 2px rgba(18,30,72,.06);transition:background .18s,color .18s;margin:2px 0}
.sc-copy:hover{background:rgba(140,155,200,.26);color:var(--ink)}
html.dark .sc-copy{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);box-shadow:none}
html.dark .sc-copy:hover{background:rgba(255,255,255,.17)}
.sc-copy.ok{color:#fff;background:linear-gradient(120deg,var(--acc),var(--acc2));border-color:transparent}
.sc-copy kbd{font:inherit;font-size:11px;color:var(--faint);border:1px solid rgba(18,28,58,.14);border-radius:5px;padding:1px 5px}
html.dark .sc-copy kbd{border-color:rgba(255,255,255,.18)}

/* 6 下载文件链接：与上面两档区分开，用强调色虚线描边 */
.sc-file{display:inline-flex;align-items:center;gap:8px;font-size:13px;line-height:normal;text-decoration:none;color:var(--acc);
  border:1px dashed var(--acc);border-radius:10px;padding:8px 15px;margin:1em 0}
.sc-file svg{flex:0 0 auto}

/* 7 调用文章卡：封面 + 眉标 + 标题 + 摘要 + 元信息行 */
.sc-post{display:block;text-decoration:none;border:1px solid var(--line);border-radius:14px;overflow:clip;
  background:var(--glass);margin:1.4em 0;transition:transform .18s,box-shadow .18s}
.sc-post:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(18,30,72,.10)}
html.dark .sc-post:hover{box-shadow:0 10px 26px rgba(0,0,0,.34)}
.sc-post-cov{position:relative;height:132px;background:linear-gradient(140deg,#c9d4f5,#a9b8ee)}
html.dark .sc-post-cov{background:linear-gradient(140deg,#2b3a7a,#3a2a6e)}
.sc-post-cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sc-post-cov i{position:absolute;left:15px;bottom:11px;font-style:normal;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;opacity:.92;text-shadow:0 1px 6px rgba(10,14,30,.45)}
.sc-post-in{padding:14px 18px 15px}
.sc-post-in b{display:block;font-family:"LXGW WenKai Screen","PingFang SC",sans-serif;font-size:16.5px;
  font-weight:650;color:var(--ink);line-height:1.5}
.sc-post-in p{margin:6px 0 0;font-size:13px;line-height:1.75;color:var(--faint)}
.sc-post-meta{display:flex;align-items:center;gap:10px;margin-top:11px;font-size:11.5px;color:var(--faint)}
.sc-post-meta em{font-style:normal;background:rgba(140,155,200,.16);border-radius:6px;padding:2px 8px}
.sc-post-meta span{margin-left:auto;color:var(--acc);font-size:12.5px}
.sc-post-none{border:1px dashed var(--line2);border-radius:12px;padding:12px 16px;margin:1.3em 0;
  font-size:13px;color:var(--faint)}

/* 8 对齐与文本样式 */
.sc-center{text-align:center;margin:1.2em 0}
.sc-right{text-align:right;margin:1.2em 0}
.sc-red{color:oklch(0.545 0.19 25)}
.sc-green{color:oklch(0.50 0.15 155)}
.sc-blue{color:oklch(0.52 0.17 250)}
.sc-yellow{color:oklch(0.52 0.15 85)}
.sc-purple{color:oklch(0.54 0.18 300)}
html.dark .sc-red{color:oklch(0.78 0.16 25)}
html.dark .sc-green{color:oklch(0.80 0.13 155)}
html.dark .sc-blue{color:oklch(0.76 0.13 250)}
html.dark .sc-yellow{color:oklch(0.82 0.14 85)}
html.dark .sc-purple{color:oklch(0.76 0.14 300)}
.sc-u{text-decoration:underline;text-underline-offset:3px}
.sc-uu{text-decoration:underline double;text-underline-offset:3px}
.sc-del{text-decoration:line-through;color:var(--faint)}

/* 9 登录可见：未登录时那一块是提示，登录后是原文 */
.sc-login{margin:1.2em 0;padding:12px 16px;border:1px dashed rgba(18,28,58,.42);border-radius:12px;
  font-size:13.5px;line-height:1.8;color:var(--dim);background:rgba(140,155,200,.10)}
html.dark .sc-login{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.32)}
.sc-login a{color:var(--acc);margin-left:8px}
.sc-login-in > :first-child{margin-top:0}
.sc-login-in > :last-child{margin-bottom:0}

/* 10 链接卡片：复用友链卡的几何，外面套一层网格 */
.sc-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.3em 0}
@media(max-width:760px){.sc-links{grid-template-columns:1fr}}
.sc-links .lk{margin:0}
.lk-av-t{display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;
  background:linear-gradient(140deg,var(--acc2),var(--acc))}

/* 11 图片网格与图文卡 */
.sc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:1.3em 0}
.sc-grid.a2{grid-template-columns:repeat(2,1fr)}
.sc-grid.a3{grid-template-columns:repeat(3,1fr)}
.sc-grid.a4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.sc-grid.a4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.sc-grid.a3,.sc-grid.a4{grid-template-columns:repeat(2,1fr)}}
.sc-grid img{width:100%;display:block;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.3)}
.sc-grid > p{margin:0}
.sc-card{border:1px solid var(--line);border-radius:12px;overflow:clip;background:rgba(255,255,255,.35);padding:12px}
html.dark .sc-card{background:rgba(255,255,255,.05)}
.sc-card > :first-child{margin-top:0}
.sc-card > :last-child{margin-bottom:0}
.sc-photo-t{font-size:13px;color:var(--faint);margin:1.2em 0 8px}

/* 12 时间线 */
.sc-tl{position:relative;margin:1.3em 0 1.3em 6px;padding-left:24px;border-left:1px solid var(--line2)}
.sc-tl > div{position:relative;margin:0 0 16px}
.sc-tl > div:last-child{margin-bottom:0}
.sc-tl > div::before{content:"";position:absolute;left:-30px;top:6px;width:9px;height:9px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px rgba(59,87,196,.14)}
.sc-tl b{display:block;font-size:13px;color:var(--ink);margin-bottom:3px}
.sc-tl p{margin:0;font-size:14.5px;line-height:1.8;color:var(--dim)}

/* 压过本文件第 228 行的 `.pbody a`：那条给正文链接配的是强调色 + 1px 虚线下划线（0-1-1），
   而短代码里的按钮、卡片、下载链接自带底色与字色，只要不声明就等于被那条染色
   （2026-10-07 站长报的「按钮文字变蓝、还有下划线」）。选择器写成 .pbody + a + 类，
   比那条多一个类，层叠里才赢；text-decoration 还要显式关掉，因为祖先的装饰会往子元素上传。 */
.pbody a.sc-btn,.pbody a.sc-post,.pbody a.sc-file,.pbody a.lk{text-decoration:none}
.pbody a.sc-btn-acc{color:#fff}
.pbody a.sc-btn-ghost{color:var(--dim)}
.pbody a.sc-post{color:inherit}
.pbody a.sc-file{color:var(--acc)}