/* Geist Mono 自托管：国内直连谷歌字体不通，放页头会让手机白屏等超时。可变字重，一个文件覆盖 400–700 */
@font-face {
    font-family: "Geist Mono";
    font-display: swap;
    font-style: normal;
    font-weight: 400 700;
    src: url("/assets/fonts/geist-mono-latin.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;
}

@font-face {
    font-family: "Geist Mono";
    font-display: swap;
    font-style: normal;
    font-weight: 400 700;
    src: url("/assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 首页数字点阵专用：思源黑体 Bold（SIL OFL）只裁 0-9 和逗号，1.9KB；0 不带斜杠，压成点阵后 0 和 8 分得开 */
@font-face {
    font-family: "Source Han Sans SC Digits";
    font-display: block;
    font-style: normal;
    font-weight: 700;
    src: url("/assets/fonts/source-han-sans-sc-bold-digits.woff2") format("woff2");
    unicode-range: U+002C, U+0030-0039;
}

/* 静态大字和数字均自托管；新增宋体标题后重跑 scripts/subset-site-fonts.py。 */
@font-face {
    font-family: "FB Serif SC";
    font-display: swap;
    font-style: normal;
    font-weight: 200 900;
    src: url("/assets/fonts/fb-serif-sc.woff2") format("woff2");
}

@font-face {
    font-family: "FB Newsreader";
    font-display: swap;
    font-style: italic;
    font-weight: 200 800;
    src: url("/assets/fonts/fb-newsreader-italic.woff2") format("woff2");
    unicode-range: U+0020-007E, U+00B7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026;
}

:root {
    color-scheme: dark;
    /* 第 20 版配色 B · 光（DD 2026-11-08 选定）：深色是偏冷的靛蓝黑，不做旧；取值见 docs/design/第20版第二轮交付-配色B-2026-11-08/README.md */
    --bg: #12141E;
    --bg2: #191C29;
    --bg3: #232738;
    --raise: #232738;
    --ink: #F2F2F8;
    --ink2: #B6B8CC;
    --ink3: #8C8FA6;
    --line: rgba(242, 242, 248, 0.09);
    --line2: rgba(242, 242, 248, 0.2);
    --action: #F2F2F8;
    --action-ink: #12141E;
    --header: rgba(18, 20, 30, 0.8);
    --scrim: rgba(18, 20, 30, 0.62);
    --glass-bg: rgba(18, 20, 30, 0.18);
    --glass-filter: blur(20px) saturate(0.72) brightness(0.62);
    /* 场色：回答「除了白就黑」的那一层颜色，只给案头这类主角块；场色上的第三级墨色单独调亮才过 4.5:1 */
    --field: #2D2957;
    --field-a: rgba(45, 41, 87, 0.58);
    --field-ink: #F2F2F8;
    --field-ink3: #A9AAC8;
    /* 背景光：遮罩只给形状，颜色在这里；遮罩本身最深约 28%–40%，所以叠满也只是一层淡光 */
    --glow: #6E76FF;
    --glow-o: 1;
    --ribbon-1: #6E76FF;
    --ribbon-2: #9CC8FF;
    --ribbon-3: #BFE3FF;
    --ribbon-4: #F2F2F8;
    --shade: rgba(0, 0, 0, 0.55);
    /* 舞台底色：只有深色版的插画（I-30、I-70、I-71）和光门画布在浅色模式下也放在这块深色上；透明版插画按 #12141E 反算颜色，换别的底会露晕边 */
    --stage: #12141E;
    --stage-ink: #F2F2F8;
    --stage-ink2: #B6B8CC;
    --stage-ink3: #8C8FA6;
    /* 磨砂玻璃装裱：只在背后有光的地方加背景模糊，平底上用同样的填充色即可（名录几百张卡片加模糊手机会卡） */
    --glass-fill: rgba(255, 255, 255, 0.07);
    --glass-edge: rgba(255, 255, 255, 0.1);
    --desk-edge: rgba(255, 255, 255, 0.08);
    --vis: #FD721C;
    --vis-text: #FF9044;
    --ctadot: var(--vis);
    /* 结果语义色：成功绿、失败红、提醒琥珀，与品牌橙同一 oklch 体系、同一档饱和度；只上图标和色条，文字仍走黑白灰。
       橙留给按钮和点缀，不兼任「结果」 */
    --ok: oklch(0.8 0.17 152);
    --danger: oklch(0.7 0.19 22);
    --warn: oklch(0.85 0.15 85);
    /* 结果图标：实心圆 / 圆角三角 + 细线圆头镂空，形状各不相同，色弱和灰度下也分得出 */
    --ic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='white'/%3E%3Cpath d='M6.4 10.2L8.8 12.6L13.6 7.6' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/mask%3E%3Crect width='20' height='20' mask='url(%23m)'/%3E%3C/svg%3E");
    --ic-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='white'/%3E%3Cpath d='M7.4 7.4L12.6 12.6M12.6 7.4L7.4 12.6' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/mask%3E%3Crect width='20' height='20' mask='url(%23m)'/%3E%3C/svg%3E");
    --ic-warn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Cpath d='M10 3.4L17.3 16H2.7Z' fill='white' stroke='white' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M10 7.9V11.2' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='10' cy='13.7' r='1' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' mask='url(%23m)'/%3E%3C/svg%3E");
    --ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cmask id='m'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='white'/%3E%3Cpath d='M10 9.2V13.6' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3Ccircle cx='10' cy='6.6' r='1' fill='black'/%3E%3C/mask%3E%3Crect width='20' height='20' mask='url(%23m)'/%3E%3C/svg%3E");
    --display: "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
    --sans: "PingFang SC", "HarmonyOS Sans SC", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
    --mono: "Geist Mono", ui-monospace, Menlo, Consolas, "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", monospace;
    /* 模板里写死的大字（口号、页名、区块名）用宋体粗细交替，数字用 Newsreader 斜体；两套字都自托管裁字，国内连不上谷歌字体 */
    --serif: "FB Serif SC", "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", serif;
    --num: "FB Newsreader", "Iowan Old Style", Georgia, serif;
    --m-bg1: url("/assets/images/site-v10/bg/BG-1-mask.webp?v=2");
    --m-bg2: url("/assets/images/site-v10/bg/BG-2-mask.webp?v=2");
    --m-bg3: url("/assets/images/site-v10/bg/BG-3-mask.webp?v=2");
    /* 背景光的颜色上叠一层极淡的随机白点（透明度 0–5%）：屏幕只有 8 位色，深色上很淡的大渐变会显出一圈圈台阶（DD 11-08「有断层纹」），在屏幕像素这一层抖动才打得散；被遮罩压过后只差约 ±1 个色阶，看不出颗粒 */
    --glow-fill: url("/assets/images/site-v10/bg/dither.webp") 0 0 / 128px 128px repeat, var(--glow);
    /* 圆角照 iOS 的连续曲率（cornerCurve .continuous）：转弯从更早处慢慢开始，看不出直线接圆弧的折点。
       iOS 曲线按 PaintCode 公开的贝塞尔常数拟合成 superellipse(1.356)、范围放大 1.22 倍，最大偏差 0.3% 半径；
       不支持 corner-shape 的浏览器（Safari 到 27 版都不支持）退回同样大小的普通圆角，位置偏差约 1% 半径。
       用法：圆角矩形写 border-radius: var(--r-*); corner-shape: var(--corner);
       嵌套的内层要同心：内层半径 = calc(外层 - 内缩距离 * var(--r-k))；胶囊和圆仍写 999px / 50%，不加 corner-shape */
    --r-k: 1;
    --corner: superellipse(1.356);
    --r-xs: calc(6px * var(--r-k));
    --r-sm: calc(10px * var(--r-k));
    --r-md: calc(12px * var(--r-k));
    --r-lg: calc(16px * var(--r-k));
    --r-xl: calc(20px * var(--r-k));
    --r-2xl: calc(30px * var(--r-k));
}

@supports (corner-shape: superellipse(2)) {
    :root {
        --r-k: 1.22;
    }
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #FFFFFF;
    --bg2: #F4F4F9;
    --bg3: #EBEBF3;
    --raise: #FFFFFF;
    --ink: #11121A;
    --ink2: #4A4C5E;
    --ink3: #6A6C80;
    --line: rgba(17, 18, 26, 0.08);
    --line2: rgba(17, 18, 26, 0.18);
    --action: #11121A;
    --action-ink: #FFFFFF;
    --header: rgba(255, 255, 255, 0.78);
    --scrim: rgba(255, 255, 255, 0.8);
    --glass-bg: rgba(255, 255, 255, 0.62);
    --glass-filter: blur(24px) saturate(0.9) brightness(1.1);
    --field: #E6E6FF;
    --field-a: rgba(230, 230, 255, 0.62);
    --field-ink: #11121A;
    --field-ink3: #5B5D73;
    --glow: #5C5CFF;
    --glow-o: 1;
    /* 浅色丝带只做背景光，按首页背景光的淡紫取色（原色 45% 混白），不抢标题（DD 2026-11-08「太抢了视觉重心」） */
    --ribbon-1: #C4B8EA;
    --ribbon-2: #B6B6FF;
    --ribbon-3: #ACC4F5;
    --ribbon-4: #A3D0E6;
    --shade: rgba(40, 36, 120, 0.22);
    --glass-fill: rgba(255, 255, 255, 0.5);
    --glass-edge: rgba(255, 255, 255, 0.8);
    --desk-edge: rgba(255, 255, 255, 0.6);
    /* 浅色的点缀直接用 logo 橙（DD 11-08：压暗的焦橙 #C23F00「好脏」）；小字上对比度约 2.9:1，只用在数字、圆点这类点缀，不做正文链接色 */
    --vis: #FE5D03;
    --vis-text: #FE5D03;
    --ctadot: var(--vis);
    --ok: oklch(0.64 0.17 150);
    --danger: oklch(0.58 0.215 25);
    --warn: oklch(0.72 0.17 70);
}

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

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background: var(--bg);
}

body {
    /* 舞台全宽时也沿用顶栏的版心；手机各页原有的局部边距仍由各自断点持有。 */
    --content-width: 1440px;
    --content-pad: clamp(20px, 5.5vw, 80px);
    --g: max(var(--content-pad), calc((100vw - var(--content-width)) / 2 + var(--content-pad)));
    margin: 0;
    min-width: 320px;
    overflow-x: clip;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.35s, color 0.35s;
}

/* 灰度挂在根元素上：挂在 body 上会让 body 成为 fixed 元素的包含块，顶栏、横幅、底部按钮跟着页面滚走（根元素例外） */
html.is-mourning {
    filter: grayscale(1);
}

body.is-menu-open {
    overflow: hidden;
}

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

h1,
h2,
h3 {
    text-wrap: balance;
}

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

button {
    border: 0;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

img {
    -webkit-user-drag: none;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
}

::selection {
    background: color-mix(in oklch, var(--vis) 40%, transparent);
}

:focus-visible {
    outline: 2px solid var(--vis);
    outline-offset: 3px;
}

/* 搜索提交到结果页之间的顶部进度条：给整页跳转一个即时反馈 */
.site-search-progress {
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--vis);
    box-shadow: 0 0 8px var(--vis);
    transition: width 2.4s cubic-bezier(0.1, 0.6, 0.2, 1);
}

.site-search-progress.is-active {
    width: 92%;
}

/* 触屏上可点的元素关掉「双击缩放」：浏览器不必等第二下，轻点一次立即生效（双指缩放不受影响） */
a,
button,
label,
summary,
input,
select,
textarea,
[role="button"] {
    touch-action: manipulation;
}

fb-ic {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 0;
}

fb-ic svg {
    display: block;
}

[hidden] {
    display: none !important;
}

.theme-logo {
    display: block;
    width: auto;
}

.theme-logo--dark {
    display: none;
}

:root[data-theme="dark"] .theme-logo--dark {
    display: block;
}

:root[data-theme="dark"] .theme-logo--light {
    display: none;
}

.site-header {position:fixed;z-index:60;top:0;right:0;left:0;background:var(--header);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);transition:background-color .35s;
}

.site-header.is-solid {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
}

.site-header__inner {display:flex;align-items:center;max-width:var(--content-width);margin:0 auto;height:76px;gap:30px;padding:0 max(var(--content-pad),env(safe-area-inset-left,0px));
}

.site-logo {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 8px 0;
}

.site-logo img {height:26px;
}

.site-nav {display:flex;align-items:center;gap:22px;font-size:14.5px;letter-spacing:0;
}

.site-nav a {position:relative;display:inline-flex;align-items:center;min-height:40px;gap:6px;white-space:nowrap;color:var(--ink2);transition:color .2s;
}

/* 顶栏不画下划线，选中、悬停都只提亮文字；当前页用圆点标记（DD 2026-10-03） */
.site-nav a[aria-current="page"] {color:var(--ink);font-weight:600;
}

@media (hover: hover) {
    .site-nav a:hover {
        color: var(--ink);
    }
}

.site-nav i,
.site-menu nav i {
    width: 5px;
    height: 5px;
    background: currentColor;
    border-radius: 50%;
}

/* 定稿只给当前页打色块，其余项不留方块 */
.site-nav a:not([aria-current="page"]) i {
    display: none;
}

.site-nav a[aria-current="page"] i {position:absolute;left:-10px;top:50%;margin-top:-2px;background:var(--vis-text);
}

/* 导航项后的推荐小标签（DD 10-11）：顶栏与手机菜单共用，第 20 版改用中性色。 */
/* 导航「推荐」小标签：椭圆胶囊，与「编辑推荐」同一个样子（DD 10-11） */
.site-tag {display:inline-block;margin-left:0;padding:3px 6px;border-radius:var(--r-xs);corner-shape:var(--corner);background:var(--bg3);color:var(--ink2);font:700 10px/1 var(--sans);font-style:normal;letter-spacing:0;
}

.site-tools {display:flex;align-items:center;gap:18px;margin-left:auto;color:var(--ink2);font-size:14px;
}

.site-search {display:flex;align-items:center;gap:8px;width:210px;color:var(--ink3);
}

.site-search input,
.site-mobile-search input {
    flex: 1;
    min-width: 0;
    letter-spacing: 0;
}

/* 顶栏与手机菜单里的「退出登录」是一个只含按钮的表单，表单本身不占版面 */
.site-logout {
    display: contents;
}

.site-menu__actions .site-logout button {
    width: 100%;
    border: 0;
    background: var(--bg3);
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    letter-spacing: 0;
    cursor: pointer;
}

.site-text-button {display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;color:inherit;white-space:nowrap;cursor:pointer;transition:color .2s;
}

@media (hover: hover) {
    .site-text-button:hover {
        color: var(--ink);
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

.site-mobile-tools,
.site-mobile-search,
.site-menu {
    display: none;
}

.site-mobile-tools {
    margin-left: auto;
    align-items: center;
    gap: 4px;
}

.site-mobile-tools .site-button {
    position: relative;
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
    white-space: nowrap;
}

/* 手机顶栏按钮看着要小（DD 2026-11-08「手机端顶部的按钮同理」太大），透明区域把触屏命中高度补到 44px。 */
.site-mobile-tools .site-button::after {
    content: "";
    position: absolute;
    inset: -6px 0;
}

.site-mobile-tools button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    justify-content: center;
    background: none;
    cursor: pointer;
}

.site-announcement {
    position: relative;
    z-index: 50;
    margin: 72px 0 -72px;
    background: var(--header);
    box-shadow: inset 0 -1px 0 var(--line);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

/* 访客关过的这一条：页头脚本在画面出来前打的标记（layouts/site.blade.php），不等页尾脚本 */
html[data-notice-closed] .site-announcement {
    display: none;
}

.site-announcement__summary,
.site-announcement__body {
    max-width: 1440px;
    margin: 0 auto;
    padding-right: clamp(16px, 3.4vw, 48px);
    padding-left: clamp(16px, 3.4vw, 48px);
}

.site-announcement__summary {
    display: flex;
    align-items: center;
    height: 44px;
    gap: 16px;
}

.site-announcement__summary > button:first-of-type {
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
    height: 44px;
    gap: 14px;
    padding: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.site-announcement__summary > button:first-of-type span {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-announcement__summary b {
    flex: 0 0 auto;
    color: var(--ink2);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.site-announcement__summary > button:last-child {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: center;
    background: none;
    color: var(--ink2);
    cursor: pointer;
}

.site-announcement__body {
    padding-top: 18px;
    padding-bottom: 24px;
    box-shadow: inset 0 1px 0 var(--line);
}

.site-announcement__body p {
    max-width: 46em;
    margin: 0 0 18px;
    white-space: pre-line;
}

/* 公告横幅「去查看」按钮 */
.site-announcement__cta {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--vis);
    color: var(--bg);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.site-announcement__body-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* 首页公告横幅：固定在 header 下方（top 由 JS 按 header 高度设定），默认滑出屏外，屏幕里没有钉住的动画段时才滑入 */
.site-announcement[data-announcement-reveal] {
    position: fixed;
    left: 0;
    right: 0;
    margin: 0;
    transform: translateY(-130%);
    transition: transform 0.45s ease;
    will-change: transform;
}

.site-announcement[data-announcement-reveal].is-revealed {
    transform: translateY(0);
}

.site-kicker {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    color: var(--ink2);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.site-kicker i {
    width: 5px;
    height: 5px;
    background: var(--vis);
}

.site-button {display:inline-flex;align-items:center;justify-content:center;min-height:44px;gap:8px;padding:0 18px;border:0;border-radius:var(--r-md);corner-shape:var(--corner);font:600 14.5px/1.35 var(--sans);letter-spacing:0;cursor:pointer;transition:transform .2s,background-color .2s,color .2s,box-shadow .2s;
}

@media (hover: hover) {
    .site-button:hover {
    }
}

.site-button:active {
    transform: scale(0.97);
}

/* 「显示更多」等按钮的加载态转圈：点击反馈，PC 与手机都要、不门控 hover（DD 2026-10-03 要求恢复按钮动画） */
@keyframes fb-spin {
    to {
        transform: rotate(1turn);
    }
}

.site-button.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

.site-button.is-loading::before {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: fb-spin 0.7s linear infinite;
    content: "";
}
/* 首页「随机去一个还在更新的博客」虫洞按钮 icon 持续慢转（穿越虫洞的观感），hover 时加速 */


@media (hover: hover) {


}

@media (prefers-reduced-motion: reduce) {

.site-button.is-loading::before {
        animation: none;
    }
}

.site-button--solid {
    background: var(--action);
    color: var(--action-ink);
}

:root[data-theme="light"] .site-button--solid fb-ic[dot="accent"] {
    --ctadot: var(--action-ink);
    color: inherit;
}

.site-button--glass {background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);
}

.home {
    overflow: clip;
    background: var(--bg);
}

.home-hero {
    position: relative;
    height: 460svh;
    background: var(--bg);
}

.home-hero__sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 620px;
    overflow: hidden;
}

.home-hero__sticky::before {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    left: 0;
    height: 136px;
    background: linear-gradient(color-mix(in srgb, var(--bg) 90%, transparent) 0 60px, transparent 136px);
    content: "";
    pointer-events: none;
}

.home-hero__sphere,
.home-hero__groups,
.home-stats-glass,
.home-stats {
    position: absolute;
    inset: 0;
}

.home-hero__sphere {
    z-index: 1;
    transition: opacity 0.4s;
}



.home-hero__groups {
    z-index: 4;
    opacity: 0;
    pointer-events: none;
}

.home-group-label {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 5px;
    width: var(--group-width);
    color: var(--topic-color);
    font-size: 12.5px;
    line-height: 1;
    white-space: nowrap;
    transform: translate(var(--group-x), var(--group-y));
}

.home-group-label b {
    margin-left: auto;
    padding-left: 4px;
    color: var(--ink2);
    font: 11px/1 var(--mono);
}







.home-hero h1,
.home-door h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    letter-spacing: 0;
    text-wrap: balance;
}

.home-hero h1 {
    font-size: clamp(32px, 4.6vw, 74px);
    line-height: 1.16;
}









@media (hover: hover) {


}































.home-stats-glass {
    z-index: 7;
    opacity: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-filter);
    -webkit-backdrop-filter: var(--glass-filter);
    pointer-events: none;
}

.home-stats {
    z-index: 8;
    display: flex;
    align-items: center;
    padding: 96px calc(clamp(16px, 4vw, 64px) + clamp(92px, 11vw, 150px)) 64px clamp(16px, 4vw, 64px);
    opacity: 0;
    pointer-events: none;
}











.home-stats__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 24px clamp(20px, 3vw, 44px);
    margin-top: clamp(28px, 6vh, 72px);
}

/* 等分栏会把位数最多的数字缩到点阵难辨；宽屏按字符数分栏（--stat-columns 由模板算），窄屏仍走上面的自动换行 */
@media (min-width: 900px) {
    .home-stats__cards {
        grid-template-columns: var(--stat-columns, repeat(auto-fit, minmax(min(100%, 260px), 1fr)));
    }
}

.home-stat {
    display: block;
    min-width: 0;
    padding-top: 18px;
    box-shadow: inset 0 1px 0 var(--line2);
}

.home-stat canvas {
    display: block;
    width: 100%;
    height: clamp(66px, 11vh, 126px);
}

.home-stat strong {
    display: block;
    font: 500 clamp(42px, 6vw, 92px)/1 var(--mono);
    letter-spacing: 0;
}

.home-stat.is-dot-ready strong {
    display: none;
}

.home-stat p {
    margin: 14px 0 0;
    color: var(--ink2);
    font-size: 13.5px;
    line-height: 1.7;
}



.home-blog-dialog {
    width: min(1180px, calc(100% - 32px));
    max-width: none;
    max-height: calc(100svh - 64px);
    padding: 0;
    border: 0;
    background: var(--bg);
    color: var(--ink);
    box-shadow: 0 36px 100px var(--scrim);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.home-blog-dialog::backdrop {
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(12px);
}

.home-blog-dialog > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: var(--bg2);
    object-fit: cover;
    object-position: top;
}

.home-blog-dialog__close {
    position: absolute;
    z-index: 2;
    top: 16px;
    right: 16px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--glass-edge);
    background: var(--shade);
    color: var(--ink);
    letter-spacing: 0;
    cursor: pointer;
    backdrop-filter: blur(6px);
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

.home-blog-dialog__body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
}

.home-blog-dialog__body h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(24px, 2.4vw, 34px);
}

.home-blog-dialog__body p {
    margin: 4px 0 0;
    color: var(--ink2);
    font-family: var(--mono);
    font-size: 12px;
}

.home-blog-dialog__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}





.home-section-line {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 24px);
    padding: 0 clamp(16px, 3.4vw, 48px);
}

.home-section-line h2 {
    margin: 0;
    color: var(--ink2);
    font: 400 12px/1 var(--mono);
    letter-spacing: 0;
    white-space: nowrap;
}

.home-section-line > span {
    flex: 1;
    height: 1px;
    background: var(--line2);
}

.home-section-line > span i {
    display: block;
    width: 0;
    height: 1px;
    background: var(--ink);
}

.home-section-line b,
.home-section-line a {
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
    white-space: nowrap;
}

.home-section-line a {
    font-family: var(--sans);
    font-size: 13px;
}











@media (hover: hover) {


}

.topic-label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    color: var(--ink2);
    font-size: 12.5px;
}

.topic-label::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--topic-color, var(--ink3));
}

@media (hover: hover) {


}

[data-category="美食"],
.home-group-label[data-category="美食"] { --topic-color: oklch(0.595 0.24 24); }
[data-category="读书"],
.home-group-label[data-category="读书"] { --topic-color: oklch(0.56 0.15 66); }
[data-category="生活"],
.home-group-label[data-category="生活"] { --topic-color: oklch(0.545 0.19 138); }
[data-category="财经"],
.home-group-label[data-category="财经"] { --topic-color: oklch(0.54 0.149 165); }
[data-category="旅行"],
.home-group-label[data-category="旅行"] { --topic-color: oklch(0.55 0.126 218); }
[data-category="摄影"],
.home-group-label[data-category="摄影"] { --topic-color: oklch(0.57 0.245 258); }
[data-category="技术"],
.home-group-label[data-category="技术"] { --topic-color: oklch(0.585 0.25 288); }
[data-category="视觉"],
.home-group-label[data-category="视觉"] { --topic-color: oklch(0.6 0.28 322); }
[data-category="影音"],
.home-group-label[data-category="影音"] { --topic-color: oklch(0.595 0.25 356); }
[data-category="未分类"],
.home-group-label[data-category="未分类"] { --topic-color: var(--ink2); }

.home-door {
    position: relative;
    height: 200svh;
    background: var(--bg);
    color: var(--ink);
}

:root[data-theme="light"] .home-door {
    background: var(--bg);
}

.home-door__sticky {
    transition: clip-path 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

.home-door__sticky {
    position: sticky;
    top: 0;
    overflow: hidden;
    height: 100svh;
    min-height: 640px;
    background: var(--bg);
}

.home-door__sticky > img,
.home-door__sticky > canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.home-door__sticky > img {
    object-fit: cover;
    object-position: 66% 50%;
}

.home-door__copy {
    position: absolute;
    top: clamp(96px, 20%, 190px);
    left: var(--g);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: min(500px, calc(100% - 32px));
    gap: 22px;
}

.home-dark-kicker {
    padding: 9px 16px;
    background: var(--raise);
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}

.home-door h2 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.2;
}

.home-door__copy p {
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.85;
}

.home-door__copy .site-button {
    min-height: 56px;
    background: var(--ink);
    color: var(--bg);
    font-size: 15px;
}

.home-door__copy small {
    color: var(--ink3);
    font: 11.5px/1.8 var(--mono);
    letter-spacing: 0;
}

















@media (hover: hover) {


}




/* 长标题在留出的宽度里换行（手机上截断），NEW 旗始终贴在第一行右边，不被挤到下一行 */

.notice-row h2 > span:has(+ .site-flag) {
    max-width: calc(100% - 80px);
}



.notice-row h2 > .site-flag {
    margin-top: calc((clamp(20px, 2vw, 29px) * 1.35 - 26px) / 2);
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}







.home-empty {
    margin: 0;
    padding: 32px clamp(16px, 3.4vw, 48px);
    color: var(--ink2);
}

































@media (hover: hover) {


}



/* 页脚上沿不加线：各页正文底下都已留出 100px 以上的空白（设计规范 · 版面通用原则，DD 2026-10-07） */
.site-footer {
    background: var(--bg);
}

.site-footer__support,
.site-footer__main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 1440px;
    margin: 0 auto;
    gap: 16px 40px;
    padding-right: clamp(20px,5.5vw,80px);
    padding-left: clamp(20px,5.5vw,80px);
}

.site-footer__support {
    padding-top: 36px;
    padding-bottom: 36px;
    box-shadow: inset 0 -1px 0 var(--line);
}

.site-footer__support p {
    max-width: 40em;
    margin: 0;
    color: var(--ink2);
    font-size: 14px;
}

.site-footer__support a {display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-md);corner-shape:var(--corner);box-shadow:inset 0 0 0 1px var(--line2);font-size:14px;
}

.site-footer__main {
    padding-top: 40px;
    padding-bottom: 88px;
}

.site-footer__logo img {
    height: 26px;
}

.site-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    color: var(--ink2);
    font-size: 13px;
    letter-spacing: 0;
}

.site-footer nav a,
.site-footer__legal a {
    padding: 6px 0;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    transition: background-size 0.8s, color 0.6s;
}

/* 手机上「条约」「TG」这类短链接字宽不足 44px，补足点按宽度，不改字号 */
@media (max-width: 819px) {
    .site-footer nav a,
    .site-footer__legal a {
        display: inline-block;
        min-width: 44px;
        text-align: center;
    }
}

@media (hover: hover) {
    .site-footer nav a:hover,
    .site-footer__legal a:hover {
        color: var(--ink);
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    /* 按文字基线对齐：备案号链接带上下内边距，按顶边对齐会比版权文字低半行 */
    align-items: baseline;
    gap: 8px 14px;
    margin: 0;
    color: var(--ink3);
    font: 11.5px/1.5 var(--mono);
    letter-spacing: 0;
}

@media (max-width: 1180px) {
    .site-nav,
    .site-tools {
        display: none;
    }

    .site-mobile-tools {
        display: flex;
    }

    .site-mobile-search {
        align-items: center;
        flex: none;
        height: 52px;
        gap: 8px;
        margin-bottom: 18px;
        padding: 0 4px 0 14px;
        border-radius: var(--r-md);
        corner-shape: var(--corner);
        background: var(--bg2);
        color: var(--ink2);
    }

    .site-mobile-search:not([hidden]) {
        display: flex;
    }

    .site-mobile-search input {
        font-size: 16px;
    }

    .site-mobile-search button {
        display: grid;
        flex: none;
        width: 44px;
        height: 44px;
        padding: 0;
        place-items: center;
        background: none;
        cursor: pointer;
    }

    .site-menu:not([hidden]) {
        position: fixed;
        z-index: 59;
        inset: 72px 0 0;
        display: flex;
        overflow: auto;
        flex-direction: column;
        padding: 28px 20px 32px;
        background: var(--bg);
    }

    .site-menu nav {
        display: flex;
        flex-direction: column;
    }

    .site-menu nav a {
        display: flex;
        align-items: center;
        min-height: 60px;
        gap: 14px;
        font-family: var(--display);
        font-size: 30px;
        font-weight: 700;
    }

    .site-menu nav a[aria-current="page"] i {
        background: var(--vis);
    }

    .site-menu__actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
        margin-top: auto;
        padding-top: 28px;
    }

    .site-menu__actions > * {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 52px;
        gap: 8px;
        padding: 0;
        background: var(--bg3);
        color: var(--ink);
        font-size: 14px;
        letter-spacing: 0;
    }









    .home-stats {
        padding-right: 70px;
        padding-left: 24px;
    }
}

/* 触屏设备（平板）1300 宽以下，左下角竖排的承诺卡会压住首屏的按钮或搜索框（2026-10-06 用户反馈「点不了」）；
   这一段改成贴底的横条：两句承诺左右并排、第三句同手机一样不显示；矮屏时横条与按钮之间放不下悬停提示，提示挪到顶栏下。
   PC 端保持原样（DD 2026-10-07）；触屏判据与 site.js 的 touchQuery 一致 */
@media (min-width: 820px) and (max-width: 1299px) and (hover: none), (min-width: 820px) and (max-width: 1299px) and (any-pointer: coarse) {








}

@media (max-width: 720px) {
    .site-header__inner {
        height: 64px;
    }

    .site-logo img {
        height: 26px;
    }

    .site-menu:not([hidden]) {
        top: 64px;
    }

    .site-announcement {
        margin-top: 64px;
        margin-bottom: -64px;
    }

    .home-hero {
        height: 420svh;
    }



    .home-hero h1 {
        font-size: clamp(30px, 10vw, 46px);
    }











    .home-stats {
        overflow: auto;
        align-items: center;
        padding: 96px 32px 32px;
    }



    .home-stats__cards {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    .home-stat {
        padding: 18px 12px 22px;
        box-shadow: inset 0 1px 0 var(--line2);
    }

    .home-stat canvas {
        height: 64px;
    }

    .home-blog-dialog__body,
    .home-blog-dialog__actions {
        align-items: stretch;
        flex-direction: column;
    }



    .home-section-line b {
        display: none;
    }

    .home-door__sticky > img {
        object-position: 50% 60%;
    }

    .home-door__copy {
        top: 90px;
    }

    .home-door__copy p {
        max-width: 22em;
        font-size: 14px;
    }















    .site-footer__main {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* 第 2 批 · 虫洞、成员、详情、文章流与存档 */
.page-shell {
    max-width: 1440px;
    margin: 0 auto;
    padding-right: clamp(16px, 3.4vw, 48px);
    padding-left: clamp(16px, 3.4vw, 48px);
}

.page-kicker {
    display: inline-flex;
    padding: 9px 16px;
    background: var(--bg3);
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}

.page-back-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    gap: 10px;
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    transition: color 0.6s, background-size 0.8s;
}

@media (hover: hover) {
    .page-back-link:hover {
        color: var(--ink);
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

.page-empty {
    margin: 56px 0 0;
    padding: 56px 0;
    color: var(--ink2);
}

.page-empty--action {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
}

.page-empty--action strong {
    color: var(--ink);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 600;
}

.page-loader {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 14px;
    margin-top: 52px;
}

.page-loader p {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 14.5px;
}

.page-loader p::before {
    width: 6px;
    height: 6px;
    background: var(--vis);
    content: "";
}

.page-loader p button {
    padding: 4px 0;
    background: none;
    box-shadow: none;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.page-loader > span {
    color: var(--ink3);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
}

.wormhole-page {
    position: relative;
    overflow: hidden;
    height: 100svh;
    min-height: 640px;
    background: var(--bg);
    color: var(--ink);
    transition: clip-path 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

/* 浅色光门是淡紫舞台（I-71-l 2026-11-08 重画），裁成圆角面板，与首页案头同一种场色卡片 */
:root[data-theme="light"] .wormhole-page {
    clip-path: inset(calc(72px + clamp(16px, 3.4vw, 48px)) clamp(16px, 3.4vw, 48px) clamp(16px, 3.4vw, 48px) round var(--r-2xl));
}

:root[data-theme="light"] .wormhole-page.is-expanded {
    clip-path: inset(0);
}

.wormhole-page__backdrop,
.wormhole-page__door {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.wormhole-page__backdrop {
    object-fit: cover;
    object-position: 66% 50%;
}

.wormhole-page__door {
    cursor: pointer;
}

.wormhole-page .theme-illustration--light {
    display: none;
}

/* 落点与光门共用当前主题；旧舞台的反色值不能再给浅色落点当底色。 */
:root[data-theme="light"] .wormhole-page .wormhole-result__shot,
:root[data-theme="light"] .wormhole-page .wormhole-result__panel {
    background: var(--bg);
}

:root[data-theme="light"] .wormhole-page .wormhole-result__panel {
    box-shadow: inset 0 0 0 1px var(--line);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

:root[data-theme="light"] .wormhole-page .wormhole-result__latest a {
    color: var(--ink);
    box-shadow: inset 0 -1px 0 var(--line);
}

:root[data-theme="light"] .wormhole-page :is(.wormhole-result__identity > span, .wormhole-result__identity > b, .wormhole-result__message) {
    color: var(--ink2);
}

:root[data-theme="light"] .wormhole-page :is(.wormhole-result__shot span, .wormhole-result__latest small, .wormhole-result__reason, .wormhole-result__latest time, .wormhole-result__facts small) {
    color: var(--ink3);
}

:root[data-theme="light"] .wormhole-page :is(.wormhole-result__reason, .wormhole-result__facts) {
    box-shadow: inset 0 1px 0 var(--line);
}

:root[data-theme="light"] .wormhole-page .wormhole-result__facts > span {
    box-shadow: inset 0 -1px 0 var(--line);
}

:root[data-theme="light"] .wormhole-page .wormhole-result__message {
    box-shadow: inset 1px 0 0 var(--line2);
}

:root[data-theme="light"] .wormhole-page .wormhole-result__rhythm i {
    border-color: var(--line2);
}

:root[data-theme="light"] .wormhole-page .wormhole-result__rhythm i.is-active {
    border-color: var(--ink);
    background: var(--ink);
}

:root[data-theme="light"] .wormhole-page :is(.wormhole-message, .wormhole-result__countdown) {
    background: var(--bg);
    box-shadow: inset 0 0 0 1px var(--line);
}

:root[data-theme="light"] .wormhole-page .wormhole-message::before {
    background: var(--bg);
}

:root[data-theme="light"] .wormhole-page :is(.wormhole-message p, .wormhole-result__countdown span) {
    color: var(--ink2);
}

:root[data-theme="light"] .wormhole-page .site-button--glass {
    background: var(--bg);
    color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--line2);
}

.wormhole-page__copy {
    position: absolute;
    z-index: 3;
    top: clamp(96px, 22%, 220px);
    left: var(--g);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: min(500px, calc(100% - 32px));
    gap: 22px;
    pointer-events: none;
}

.wormhole-page__copy h1,
.wormhole-result h2,
.wormhole-message h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
}

.wormhole-page__copy h1 {
    font-size: clamp(32px, 4vw, 60px);
    line-height: 1.2;
}

.wormhole-page__copy p {
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.85;
}

.wormhole-page__copy button {
    min-height: 56px;
    pointer-events: auto;
}

.wormhole-page__copy small,
.wormhole-result__panel > small {
    color: var(--ink3);
    font: 11.5px/1.8 var(--mono);
    letter-spacing: 0;
}

/* 场景自身虚化并变淡，结果层保持透明；电脑与手机共用，不依赖插画内容。 */
.wormhole-page:is([data-wormhole-state="landed"], [data-wormhole-state="empty"], [data-wormhole-state="error"]) :is(.wormhole-page__backdrop, .wormhole-page__door) {
    filter: blur(14px);
    opacity: 0.6;
    transition: filter 0.6s, opacity 0.6s;
    pointer-events: none;
}

.wormhole-result {
    position: absolute;
    z-index: 5;
    inset: 0;
    overflow: auto;
    background: transparent;
}

.wormhole-result__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    align-items: center;
    min-height: 100%;
    max-width: 1440px;
    margin: 0 auto;
    gap: 28px clamp(28px, 4vw, 72px);
    padding: 100px clamp(16px, 5vw, 80px) 48px;
}

.wormhole-result__shot {
    position: relative;
    display: grid;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--glass-fill);
    box-shadow: inset 0 0 0 1px var(--glass-edge), 0 20px 44px -28px var(--shade);
    place-items: center;
    padding: 6px;
    border-radius: var(--r-lg);
    corner-shape: var(--corner);
}

.wormhole-result__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: calc(var(--r-lg) - 6px * var(--r-k));
    corner-shape: var(--corner);
}

.wormhole-result__shot span {
    color: light-dark(var(--bg), var(--ink3));
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.wormhole-result__panel {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    max-width: 560px;
    min-width: 0;
    gap: 14px;
    padding: 24px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.wormhole-result__identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wormhole-result__identity h2 {
    font-family: var(--sans);
    font-size: clamp(28px, 3vw, 44px);
    line-height: 1.15;
}

.wormhole-result__identity > span {
    overflow-wrap: anywhere;
    color: light-dark(var(--bg), var(--ink2));
    font: 12.5px/1.6 var(--mono);
}

.wormhole-result__identity > b {
    color: light-dark(var(--bg), var(--ink2));
    font: 500 12.5px/1.6 var(--mono);
}

.wormhole-result__latest {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.wormhole-result__latest small,
.wormhole-result__reason {
    color: light-dark(var(--bg), var(--ink3));
    font: 11px/1.6 var(--mono);
    letter-spacing: 0;
}

/* 落点最近 5 篇：一行一篇，标题截断、日期靠右，整行是点击区 */
.wormhole-result__latest ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wormhole-result__latest a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-height: 36px;
    padding: 7px 0;
    color: light-dark(var(--bg), var(--ink));
    box-shadow: inset 0 -1px 0 light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
}

.wormhole-result__latest a span {
    overflow: hidden;
    min-width: 0;
    font-size: 15px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wormhole-result__latest time {
    flex: 0 0 auto;
    color: light-dark(var(--bg), var(--ink3));
    font: 11.5px/1.5 var(--mono);
}

/* 落点列了 5 篇之后卡片变高：电脑上屏幕不够高时收紧行距，让「进入这个博客 / 再来一个」留在一屏里（手机上按钮本就吸底） */
@media (min-width: 820px) and (max-height: 1000px) {
    .wormhole-result__inner {
        padding-top: 88px;
        padding-bottom: 20px;
    }

    .wormhole-result__panel {
        gap: 9px;
        padding: 20px 22px;
    }

    .wormhole-result h2 {
        font-size: clamp(30px, 3vw, 40px);
    }

    .wormhole-result__latest a {
        min-height: 28px;
        padding: 4px 0;
    }

    .wormhole-result__facts > span {
        padding: 6px 0;
    }

    .wormhole-result__actions .site-button {
        min-height: 48px;
    }
}

@media (hover: hover) {
    .wormhole-result__latest a:hover span {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.wormhole-result__reason {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    box-shadow: inset 0 1px 0 light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
}

.wormhole-result__facts {
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
}

.wormhole-result__facts > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    box-shadow: inset 0 -1px 0 light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
    font-size: 14px;
}

.wormhole-result__facts small {
    margin-left: auto;
    color: light-dark(var(--bg), var(--ink3));
    font: 12px/1 var(--mono);
}

.wormhole-result__message {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    padding-left: 14px;
    box-shadow: inset 1px 0 0 light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line2));
    color: light-dark(var(--bg), var(--ink2));
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.wormhole-result__rhythm {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
}

.wormhole-result__rhythm i {
    height: 13px;
    border: 1px solid light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line2));
}

.wormhole-result__rhythm i.is-active {
    border-color: light-dark(var(--bg), var(--ink));
    background: light-dark(var(--bg), var(--ink));
}

.wormhole-result__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 6px;
}

.wormhole-result__actions .site-button {
    min-height: 60px;
}

.wormhole-result__actions .site-button--glass {
    background: light-dark(var(--ink), var(--bg3));
    box-shadow: none;
}

.wormhole-message {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    width: min(520px, 100%);
    margin: 0 auto;
    gap: 18px;
    padding: 96px 16px 40px;
    background: light-dark(var(--ink), var(--scrim));
}

.wormhole-message::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: light-dark(var(--ink), var(--scrim));
    content: "";
}

.wormhole-message h2 {
    font-size: 32px;
}

.wormhole-message p {
    margin: 0;
    color: light-dark(var(--bg), var(--ink2));
    font-size: 16px;
}

.wormhole-message > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 10px;
}

.wormhole-message__door {
    width: 100%;
    aspect-ratio: 16 / 7;
    background: radial-gradient(ellipse at 50% 70%, rgba(255, 235, 205, 0.7), transparent 42%), linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, 0.86) 39% 40%, transparent 41% 59%, rgba(255, 255, 255, 0.86) 60% 61%, transparent 62%);
    box-shadow: inset 0 0 0 1px light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
}

.roster-page,
.archive-page,
.feeds-page {
    min-height: 100svh;
    padding-top: clamp(120px, 13vw, 176px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.roster-page__header,
.feeds-page__header,
.archive-page__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px 48px;
}

.roster-page__header > div:first-child,
.feeds-page__header > div:first-child,
.archive-page__header > div:first-child {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
}

.roster-page h1,
.feeds-page h1,
.archive-page h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(40px, 5vw, 80px);
    line-height: 1.08;
}

.roster-page__header small,
.feeds-page__header small,
.archive-page__header span {
    color: var(--ink3);
    font: 12.5px/1 var(--mono);
    letter-spacing: 0;
}

.roster-legend {display:block;grid-column:1/-1;margin-top:22px;
}

.roster-legend > summary {display:none;
}

.roster-legend > div {display:flex;flex-wrap:wrap;gap:10px 30px;
}

.roster-status {display:inline-flex;align-items:center;gap:7px;color:var(--ink2);font-size:13px;white-space:nowrap;
}

.roster-status i {display:block;flex:0 0 auto;width:10px;height:10px;border:1.5px solid var(--ink3);border-radius:50%;background:transparent;
}

.roster-status--live i {border-color:var(--ok);background:var(--ok); }
.roster-status--stale i { border-style: solid; }
.roster-status--nofeed i { border-style: dashed; }
.roster-status--down i { border-style: dotted; }
.roster-status--end i {height:6px;border:0;border-radius:0;background:var(--ink3); }

.roster-status b {
    color: var(--ink);
    font-weight: 500;
}

.roster-status small {
    color: var(--ink3);
    font-size: 12px;
}

.roster-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin-top: clamp(40px, 5vw, 64px);
    padding-bottom: 10px;
    box-shadow: inset 0 -1px 0 var(--line);
}

.roster-filters__categories {
    display: flex;
    flex: 1 1 760px;
    flex-wrap: wrap;
    gap: 4px 6px;
}

.roster-filters__categories a {
    display: inline-flex;
    align-items: center;
    height: 44px;
    gap: 8px;
    padding: 0 12px;
    color: var(--ink2);
    font-size: 14px;
    letter-spacing: 0;
    box-shadow: none;
    transition: color 0.2s, background-color 0.2s;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

.roster-filters__categories a.is-active {
    color: var(--ink);
    box-shadow: none;
    background: var(--bg2);
}

@media (hover: hover) {
}

.roster-filters__categories a small {
    color: var(--ink3);
    font: 12px/1 var(--mono);
}

.roster-filters__year {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink2);
    font-size: 13px;
}

.roster-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px;margin-top:34px;
}

.roster-card {position:relative;display:flex;min-width:0;flex-direction:column;gap:0;transition:transform .2s;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.roster-card__shot {position:relative;display:block;overflow:hidden;padding:6px;border-radius:var(--r-lg);corner-shape:var(--corner);background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-edge),0 20px 44px -28px var(--shade);
}

@media (hover: hover) {
}

.roster-card__shot > img:not(.roster-card__badge) {display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:calc(var(--r-lg) - 6px * var(--r-k));corner-shape:var(--corner);
}

@media (hover: hover) {
}

/* 徽章挂在框顶的直线段，让开圆角，并将牌身上提以少遮挡站点招牌。 */
.roster-card__badge {position:absolute;z-index:2;left:20px;top:-16px;display:block;width:32px;height:auto;filter:drop-shadow(0 6px 10px var(--shade));pointer-events:none;
}

/* 没抓到截图的博客：用 DD 的「暂无首页截图」占位图（深/浅两版），填满卡槽、和真实截图一致的裁剪方式 */
.roster-card__placeholder {position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:16/10;border-radius:calc(var(--r-lg) - 6px * var(--r-k));corner-shape:var(--corner);background:var(--bg2);
}

.roster-card__placeholder img {width:100%;height:100%;object-fit:cover;
}

.roster-card__years {display:inline-flex;flex-wrap:wrap;align-items:baseline;align-self:flex-start;gap:4px;margin-top:14px;color:var(--ink3);font:12.5px/1.5 var(--sans);
}

.roster-card__years i {display:none;
}

.roster-card__years b {padding:2px 4px;border-radius:var(--r-xs);corner-shape:var(--corner);background:var(--bg2);color:var(--ink);font-weight:600;
}

.roster-card__years.is-muted {
    color: var(--ink3);
}

.roster-card__heading {display:block;margin-top:1px;
}

.roster-card__heading > strong {display:block;overflow-wrap:anywhere;font:600 17px/1.4 var(--sans);
}

@media (hover: hover) {
}

.roster-card__meta {display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-top:6px;color:var(--ink2);font:13px/1.6 var(--sans);
}

/* 日期保留完整值，数字排版由模板和追加卡片共用的标记控制。 */
.roster-card__date {display:block;margin-left:auto;color:var(--ink3);white-space:nowrap;
}

.roster-card__meta .topic-label {margin-left:0;font-family:var(--sans);white-space:nowrap;
}

/* 手机窄卡的日期独占一行，避免长状态挤压日期。 */
@media (max-width: 819px) {
}

.archive-entry {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 8px 0;
    color: var(--ink2);
    box-shadow: inset 0 -1px 0 var(--line2);
    font-size: 13.5px;
    letter-spacing: 0;
}

.archive-entry > i {
    width: 9px;
    height: 9px;
    background: var(--ink3);
}

.archive-page > .page-back-link {
    margin-bottom: 20px;
}

.archive-page h1 {
    font-size: clamp(36px, 4.4vw, 68px);
}

.archive-page__header > p {
    max-width: 30em;
    margin: 0;
    color: var(--ink2);
    font-size: 14.5px;
    line-height: 1.85;
}

.roster-grid.roster-grid--archive {
    grid-template-columns: var(--one, repeat(auto-fill, minmax(min(100%, 340px), 1fr)));
    gap: 14px;
    margin-top: clamp(40px, 5vw, 64px);
}

/* 已离开的博客：头像 + 名字/状态 + 一句事实的紧凑卡，不占整屏（DD 2026-10-03）；保留原色，不再置灰（DD 2026-11-02） */
.roster-card--archive {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 6px 14px;
    padding: 16px;
    box-shadow: inset 0 0 0 1px var(--line);
    opacity: 0.82;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.roster-card__avatar {
    grid-row: 1 / span 2;
    overflow: hidden;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg2);
}

.roster-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.roster-card--archive .roster-card__heading {
    grid-column: 2;
    grid-row: 1;
}

.roster-card--archive .roster-card__fact {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
}

.roster-card__fact {
    color: var(--ink2);
    font-size: 14.5px;
    line-height: 1.7;
}

.blog-detail-hero {padding-top:92px;padding-bottom:0;
}

.blog-detail-hero__grid {display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start;gap:56px;margin-top:10px;
}

.blog-detail-hero__shot {position:relative;display:block;overflow:visible;padding:6px;border-radius:var(--r-lg);corner-shape:var(--corner);background:var(--glass-fill);box-shadow:inset 0 0 0 1px var(--glass-edge),0 20px 44px -28px var(--shade);
}

.blog-detail-hero__shot img:not(.roster-card__badge) {display:block;width:100%;height:auto;aspect-ratio:16/10;margin:0;object-fit:cover;object-position:50% 0;border-radius:calc(var(--r-lg) - 6px * var(--r-k));corner-shape:var(--corner);
}

/* 无截图时的占位插图：整张居中显示、不裁切（hero 比名录卡更宽，用 contain 不用 cover） */
.blog-detail-hero__placeholder {position:relative;display:block;overflow:hidden;width:100%;aspect-ratio:16/10;border-radius:calc(var(--r-lg) - 6px * var(--r-k));corner-shape:var(--corner);background:var(--bg2);
}

.blog-detail-hero__shot .blog-detail-hero__placeholder img {width:100%;height:100%;margin:0;object-fit:contain;
}

.blog-detail-hero__copy {display:flex;min-width:0;flex-direction:column;gap:0;
}

.blog-detail-hero__copy h1 {margin:0;overflow-wrap:anywhere;font:600 clamp(32px,3vw,44px)/1.2 var(--sans);
}

.blog-detail-hero__host {display:block;margin-top:6px;overflow-wrap:anywhere;color:var(--ink2);font:400 20px/1.3 var(--sans);
}

.blog-detail-hero__copy > div:first-child > p {margin:20px 0 0;color:var(--ink2);font-size:15px;line-height:1.85;overflow-wrap:anywhere;
}

/* 博主自己的话是读者认识这个人的入口，长寄语也要能读完，不能只留省略号。 */
.blog-detail-hero__copy > div:first-child > p:not(.blog-detail-hero__intro) {display: block; overflow: visible; white-space: normal; -webkit-line-clamp: unset; margin-top:14px;padding:14px 18px;border-radius: var(--r-xl);corner-shape: var(--corner);background:var(--field);color:var(--field-ink);line-height:1.75;white-space:normal;
}

.blog-detail-hero__identity {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:13.5px;
}

.blog-detail-years {display:inline-flex;align-items:center;gap:6px;color:var(--ink);
}

.blog-detail-years.is-muted {
    color: var(--ink3);
}

/* 详情页文章保持统一行高，长标题可折行，日期独占右侧。 */
.blog-recent-feeds {display:flex;flex-direction:column;gap:2px;margin-top:42px;
}

.blog-recent-feeds small,
.blog-rhythm > small {color:var(--ink2);font:600 14px/1.4 var(--sans);
}

.blog-recent-feeds ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.blog-recent-feeds a {display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:44px;padding:12px 0;color:var(--ink);
}

.blog-recent-feeds strong {display:block;min-width:0;overflow-wrap:anywhere;font:400 15px/1.5 var(--sans);
}

.blog-recent-feeds time {flex:0 0 auto;color:var(--ink3);font:400 15px/1.5 var(--sans);
}

.blog-recent-feeds li.is-first a {align-items:baseline;
}

.blog-recent-feeds li.is-first strong {font:400 15px/1.5 var(--sans);
}

@media (hover: hover) {
}

/* 手机上每行点击区 ≥44px（「进入这个博客」在手机上本来就是吸底按钮栏，不用挪位置） */
@media (max-width: 819px) {
    .wormhole-result__latest a {
        min-height: 44px;
    }
}

.blog-rhythm {display:flex;flex-direction:column;gap:8px;margin-top:26px;
}

.blog-rhythm > div {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 4px;
}

.blog-rhythm > div > span {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.blog-rhythm i {
    height: 22px;
    border: 1px solid var(--line2);
}

.blog-rhythm i.is-active {
    border-color: var(--ink);
    background: var(--ink);
}

.blog-rhythm b {
    color: var(--ink3);
    font: 10px/1 var(--mono);
    text-align: center;
}

.blog-detail-hero__controls {display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:26px;}

.blog-detail-hero__actions {display:flex;flex-wrap:wrap;gap:8px;margin:0;
}

.blog-detail-hero__actions .site-button {min-height:44px;
}

/* 订阅与动作在电脑上并排，但不进手机的吸底按钮栏，避免第三个按钮把字挤成竖排（REQ-66）。 */
.blog-detail-hero__subscribe {
    margin: 0;
}

.blog-detail-hero__subscribe .daily-subscribe {
    display: inline-block;
}

/* 和上面的首屏之间已有大段留白，下面两栏的小标题又各自带下沿线，所以上沿不再加分割线（DD 2026-10-07） */
.blog-detail-lower {
    display: grid;
    grid-template-columns: var(--one, minmax(0, 1fr) minmax(0, 1.35fr));
    align-items: start;
    gap: 48px clamp(32px, 5vw, 96px);
    padding-top: clamp(48px, 6vw, 88px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.blog-detail-history {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 20px;
    padding-bottom: 14px;
    box-shadow: inset 0 -1px 0 var(--line2);
}

.section-heading h2 {
    margin: 0;
    color: var(--ink2);
    font: 400 12px/1 var(--mono);
    letter-spacing: 0;
}

.section-heading span {
    color: var(--ink3);
    font: 12px/1 var(--mono);
}

.dateline-item {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 0 18px;
    /* 个人中心「看这条大事记」带 #dateline-{id} 跳来，别让固定顶栏压住 */
    scroll-margin-top: 104px;
}

.dateline-item > i {
    position: relative;
    margin-left: 6px;
    box-shadow: inset 1px 0 0 var(--line2);
}

.dateline-item > i::before {
    position: absolute;
    top: 26px;
    left: -4px;
    width: 9px;
    height: 9px;
    background: var(--ink);
    content: "";
}

.dateline-item > div {
    padding: 20px 0;
}

.dateline-item time {
    color: var(--ink3);
    font: 12px/1.6 var(--mono);
}

.dateline-item h3 {
    margin: 6px 0 0;
    font-size: 16px;
}

.dateline-item > div > div {
    color: var(--ink2);
    font-size: 15px;
    line-height: 1.8;
}

.dateline-item p {
    margin: 6px 0 0;
}

.section-empty {
    margin: 0;
    padding: 22px 0;
    color: var(--ink2);
}

.certificate-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 18px;
    margin-top: 28px;
    padding: 22px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: border-radius 0.8s, box-shadow 0.6s;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

@media (hover: hover) {
    .certificate-entry:hover {
        border-radius: var(--r-xl);
        corner-shape: var(--corner);
        box-shadow: inset 0 0 0 1px var(--ink);
    }
}

.certificate-entry > fb-ic:first-child {
    color: var(--ink2);
}

.certificate-entry span {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.certificate-entry small {
    color: var(--ink3);
    font: 12px/1.4 var(--mono);
}

/* 评论区：结构照 DD 2026-10-07 给的参考图（表单在上、列表上方写条数和排序、回复单写「回复 @谁」、长楼收起），
   头像 DD 2026-10-08 要求放回（参考图里没有、重排时去掉过）；
   样式一律用本站自己的：等宽小字标签、填充输入框和统一按钮；第 20 版表单外观由共享规则定义 */
.site-comments {
    display: flex;
    max-width: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 28px;
    text-align: left;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.site-comments__empty {
    margin: 0;
    font-size: 17px;
}

/* 列表头：条数在左、胶囊排序在右，用填充色明确当前顺序，避免圆角底线 */
.site-comments__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
    margin-top: 20px;
}

.site-comments__bar h3 {
    margin: 0;
    padding-bottom: 0;
    color: var(--ink2);
    font: 400 12px/1 var(--mono);
    letter-spacing: 0;
}

.site-comments__order {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--bg2);
    border-radius: 999px;
}

.site-comments__order a {
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 16px;
    color: var(--ink2);
    font-size: 14px;
    letter-spacing: 0;
    box-shadow: none;
    transition: color 0.2s, background-color 0.2s;
    border-radius: 999px;
}

.site-comments__order a[aria-current] {
    color: var(--bg);
    box-shadow: none;
    background: var(--ink);
}

@media (hover: hover) {
    .site-comments__order a:not([aria-current]):hover {
        color: var(--ink);
        box-shadow: none;
        background: var(--bg3);
    }
}

.site-comments__list {
    display: flex;
    flex-direction: column;
}

/* 头像在左，名字、正文、回复一栏在右；尺寸同重排前：一楼 40、回复 32 */
.site-comment,
.site-comment__reply {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 16px;
}

.site-comment {
    padding: 22px 0;
    box-shadow: inset 0 -1px 0 var(--line);
    border-radius: 0;
}

.site-comment__reply {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 14px;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

/* 底色是图还没取到时的占位；没设头像的取到默认人形图 */
.site-comment__avatar {
    width: 40px;
    height: 40px;
    background: var(--bg3);
    object-fit: cover;
    border-radius: 50%;
}

.site-comment__reply .site-comment__avatar {
    width: 32px;
    height: 32px;
}

.site-comment__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.site-comment__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.site-comment__name {
    font-size: 15px;
    font-weight: 600;
}

.site-comment__head > b {
    align-self: center;
    padding: 3px 6px;
    background: var(--bg3);
    font: 10.5px/1 var(--mono);
    letter-spacing: 0;
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}

.site-comment__head time {
    color: var(--ink3);
    font: 11.5px/1 var(--mono);
}

/* 点按区域 44px 高，上下负边距抵掉，不把名字那一行撑高 */
.site-comment__head > button {
    display: inline-flex;
    align-self: center;
    align-items: center;
    min-height: 44px;
    margin: -12px 0 -12px auto;
    padding: 0;
    background: none;
    color: var(--ink2);
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s;
}

@media (hover: hover) {
    .site-comment__head > button:hover {
        color: var(--ink);
    }
}

.site-comment__content {
    overflow-wrap: anywhere;
    font-size: 15px;
    line-height: 1.8;
}

.site-comment__content p {
    margin: 8px 0 0;
}

.site-comment__sticker {
    /* 单独占一行：和文字排在同一行时文字会被挤到图片底边；尺寸 DD 10-15 定 100px */
    display: block;
    width: 100px;
    max-width: 100%;
    height: auto;
    margin: 8px 0;
}

.site-comment__replies {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 14px;
    padding: 2px 0 2px 18px;
    box-shadow: inset 1px 0 0 var(--line2);
}

.site-comment__to {
    margin: 0;
    color: var(--ink2);
    font-size: 13px;
}

.site-comment__more > summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.site-comment__more > summary::-webkit-details-marker {
    display: none;
}

.site-comment__more > summary > .site-button {
    min-height: 44px;
}

.site-comment__more[open] > summary {
    display: none;
}

.site-comment__more > .site-comment__reply + .site-comment__reply {
    margin-top: 20px;
}

/* 回复时表单挪进楼里，和上下文字拉开一点 */
.site-comment .site-comments__composer {
    margin: 10px 0 6px;
}

.site-comments__success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line2);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.site-comments__success button,
.site-comment-form__reply button {
    margin-left: auto;
    padding: 6px 0;
    background: none;
    color: var(--ink2);
    box-shadow: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.site-comment-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.site-comment-form__reply {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
}

.site-comment-form__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 28px;
}

.site-comment-form label {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
}

/* 标签行：左边字段名，右边补充（字数）；同申请页的字段 */
.site-comment-form label > span {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    color: var(--ink3);
    font: 12px/1.5 var(--mono);
    letter-spacing: 0;
    align-items: baseline;
    min-height: 18px;
}

.site-comment-form label > span b {
    font-weight: 400;
}

.site-comment-form label > span small {
    font: inherit;
    letter-spacing: 0;
}

.site-comment-form__count.is-over {
    color: var(--ink);
}

.site-comment-form input,
.site-comment-form textarea {
    width: 100%;
}

.site-comment-form__editor {
    position: relative;
}

.site-comment-form__editor textarea {
    display: block;
}

.site-comment-form__sticker {
    position: absolute;
    bottom: 10px;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    color: var(--ink2);
    cursor: pointer;
}

/* 遮罩复用首页弹窗，关闭按钮跟随表情弹窗的底色，只让表情网格在框内滚动。 */
.site-comment-stickers[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.site-comment-stickers .home-blog-dialog__close {
    border-color: var(--line2);
    background: var(--bg2);
    color: var(--ink);
    backdrop-filter: none;
}

.site-comment-stickers .home-blog-dialog__body {
    flex: 0 0 auto;
    min-height: 0;
    padding: 24px 100px 24px 24px;
}

.site-comment-stickers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(120px, calc((100% - 24px) / 3)), 1fr));
    gap: 20px 12px;
    min-height: 0;
    padding: 0 24px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.site-comment-stickers__item {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 0;
    background: none;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer;
}

.site-comment-stickers__item img {
    width: 120px;
    max-width: 100%;
    height: auto;
}

.site-comment-form label > small {
    min-height: 1.5em;
    color: var(--ink);
    font-size: 12.5px;
}

.site-comment-form label.has-error > small::before {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background: var(--danger);
    content: "";
}

.site-comment-form__server-error {
    margin: 0;
    font-size: 14px;
}

.site-comment-form__submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 18px;
    flex-direction: row;
}

.site-comment-form__submit > span {
    color: var(--ink3);
    font-size: 12.5px;
    flex: 1 1 0;
    line-height: 1.6;
}

.site-comments__closed {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--ink2);
}

.site-comments__closed i {
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
}

.feeds-page__header .page-search {
    width: min(460px, 100%);
}

.page-search {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-search input {
    flex: 1;
    min-width: 0;
}

.feeds-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: clamp(36px, 4vw, 56px);
    box-shadow: none;
}

.feeds-tabs a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    color: var(--ink2);
    font-size: 14.5px;
    letter-spacing: 0;
    box-shadow: none;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
    transition: color 0.2s, background-color 0.2s;
}

.feeds-tabs a[aria-current="page"] {
    color: var(--ink);
    box-shadow: none;
    background: var(--bg2);
}

@media (hover: hover) {
    .feeds-tabs a:hover {
        color: var(--ink);
        box-shadow: none;
        background: var(--bg2);
    }
}

.feeds-list {
    margin-top: 28px;
}

/* 文章流右下角悬浮按钮：「接着看《…》」或「回到最新 · 第 N 页」。读到半路才会用到，所以跟着屏幕走。
   用全站实心按钮（浅色主题下随 --action 变橙），一眼看得出能点；放右下角而不是正中，不压正文阅读区，
   也是手机拇指够得着的位置（DD 2026-10-07：描边条和正文一个颜色看不出来、压在中间位置不对）。
   滑到「加载更多」那段时由脚本让开。
   五年回顾页的「返回个人中心」（.page-float，site.js bindPageFloat）也是读到半路才用的，同一个位置同一套规则 */
.feeds-float,
.page-float {
    position: fixed;
    z-index: 50;
    right: clamp(16px, 3vw, 40px);
    bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
    display: flex;
    max-width: calc(100vw - 32px);
    gap: 8px;
    filter: drop-shadow(0 10px 24px var(--shade));
}

.feeds-float .site-button,
.page-float .site-button {
    min-height: 48px;
}

.feeds-float a {
    min-width: 0;
}

.feeds-float a span {
    overflow: hidden;
    max-width: 22em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feeds-float small {
    opacity: 0.68;
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
}

/* 电脑：贴内容列的右边缘，不贴屏幕边。宽屏上内容列居中、两侧大片留白，贴屏幕边就离阅读区太远、容易被忽略
   （DD 2026-10-07）。对齐 .page-shell：最大 1440px 居中、内边距 clamp(16px, 3.4vw, 48px)。触屏不动，仍贴屏幕右下 */
@media (hover: hover) and (pointer: fine) {
    .feeds-float,
    .page-float {
        right: max(clamp(16px, 3vw, 40px), calc((100vw - 1440px) / 2 + clamp(16px, 3.4vw, 48px)));
    }
}

/* 宽屏两侧留白放得下按钮时，放到内容列外侧、紧贴列的右边缘，不压文章（DD 2026-10-07）。
   内容列右缘 = 视口中线 + 720px - 48px 内边距；留白不足 1800px 宽时仍按上一条贴在列内右下 */
@media (hover: hover) and (pointer: fine) and (min-width: 1800px) {
    .feeds-float,
    .page-float {
        right: auto;
        left: calc(50% + 688px);
        max-width: calc(50% - 688px - 24px);
    }
}

/* 压住「加载更多」或页脚链接时让开；用 visibility 而不是 hidden，脚本才量得到它的位置判断还压不压 */
.feeds-float.is-tucked {
    visibility: hidden;
    pointer-events: none;
}

/* 同一个向前箭头，「回到最新」转成朝上 */
.feeds-float[data-mode="position"] fb-ic {
    transform: rotate(-90deg);
}

.feeds-float button {
    flex: none;
    width: 48px;
    padding: 0;
    /* 实底：玻璃底在悬浮时会透出下面的正文 */
    background: var(--bg);
}

/* 「接着看」落点：别让固定顶栏压住那篇 */
.feed-row {
    scroll-margin-top: 104px;
    border-radius: 0;
}

.page-loader__count {
    color: var(--ink3);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
}

/* 折叠同博主：同一博主其余文章收进可展开的 <details>，默认收起、不占屏，点一下展开。
   分割线画在行底，按钮若排在首行分割线之后会被读成下一篇的附属；
   所以首行让出底线、改由折叠组收底，按钮落在所属博主那一格里，靠行右缘对齐（按钮宽度随博主名变化，贴左对齐配图会宽窄不一） */
.feed-row:has(+ .feeds-group__more) {
    box-shadow: none;
}
.feeds-group__more {
    box-shadow: inset 0 -1px 0 var(--line);
}
.feeds-group__more > summary {
    display: flex;
    justify-content: flex-end;
    margin: -10px 0 0;
    padding: 0 8px 18px;
    list-style: none;
    cursor: pointer;
}
.feeds-group__more > summary::-webkit-details-marker {
    display: none;
}
/* 描边小按钮：看得出能点，但不填色、不用强调色，不跟标题抢 */
.feeds-group__more > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    transition: color 0.3s, border-color 0.3s;
}
.feeds-group__more > summary > span::after {
    content: "· 展开";
}
.feeds-group__more[open] > summary > span::after {
    content: "· 收起";
}
.feeds-group__more > summary:hover > span,
.feeds-group__more > summary:focus-visible > span,
.feeds-group__more[open] > summary > span {
    border-color: var(--ink3);
    color: var(--ink);
}
.feeds-group__more > summary:focus-visible {
    outline: none;
}
.feeds-group__more > summary:focus-visible > span {
    outline: 2px solid var(--ink3);
    outline-offset: 2px;
}

@media (max-width: 819px) {
    .feeds-group__more > summary {
        padding: 0 4px 18px;
    }
}

.feed-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 250px 96px;
    align-items: baseline;
    gap: 8px 28px;
    padding: 22px 8px;
    box-shadow: inset 0 -1px 0 var(--line);
    transition: background-color 0.8s;
}

@media (hover: hover) {
    .feed-row:hover {
        background: var(--bg2);
    }
}

.feed-row > time {
    color: var(--ink3);
    font: 12.5px/1.6 var(--mono);
}

.feed-row__article,
.feed-row__blog {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.feed-row__article > a {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.5;
}

.feed-row__article > a fb-ic {
    margin-left: 8px;
    vertical-align: -1px;
    color: var(--ink3);
}

.feed-row__article p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.feed-row__blog > a {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feed-row__blog > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink2);
    font: 11px/1 var(--mono);
}

.feed-row__blog i {
    width: 5px;
    height: 5px;
    background: var(--ink3);
}

/* 最新文章行里的题材标签容器：一个博客最多 2 个题材，包一层放进第 4 格，放不下就换行堆叠 */
.feed-row__topics {
    display: flex;
    flex-wrap: wrap;
    align-self: baseline;
    gap: 6px 10px;
}

/* 每句字前面都标明是谁说的：编辑推荐 / 原文（DD 10-11「这段话谁说的？什么立场说的？」） */
.daily-text-tag {
    display: inline-block;
    margin-right: 10px;
    padding: 3px 6px;
    box-shadow: inset 0 0 0 1px var(--line2);
    color: var(--ink2);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
    vertical-align: 2px;
}

.daily-text-tag:not(.daily-text-tag--editor) {
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}

/* 推荐仍保留胶囊识别；第 20 版橙色只表示今天、当前位置和正在操作的状态。 */
.daily-text-tag--editor {
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: none;
    background: var(--bg3);
    color: var(--ink2);
    font: 600 11px/1 var(--sans);
    letter-spacing: 0;
}

/* 博客名 + 在约第几年：沿用最新文章页每一行右侧那一栏的写法 */
.daily-blog {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.daily-blog > a {
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily-blog > span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--ink2);
    font: 11px/1 var(--mono);
}

.daily-blog i {
    width: 5px;
    height: 5px;
    background: var(--ink3);
}

.feed-row__blog > span.is-muted,
.daily-blog > span.is-muted {
    color: var(--ink3);
}

.daily-section {
    padding-bottom: clamp(88px, 10vw, 160px);
}

.daily-section > .home-section-line {
    padding: 0;
    margin-bottom: clamp(32px, 4vw, 56px);
}

/* 还没接入订阅的博客：卡片网格。卡片高度对齐「最新文章」一行（约 124px，含分割线间距），
   桌面 4-5 列、平板 2-3 列、手机 1 列自适应（auto-fill），切 tab 时与最新文章视觉衔接顺滑 */
.no-rss-note {
    margin-top: clamp(18px, 2.2vw, 26px);
    max-width: 760px;
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.75;
}

.no-rss-grid {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    column-gap: clamp(20px, 3vw, 44px);
}

.no-rss-card {
    display: flex;
    align-items: center;
    min-height: 124px;
    padding: 20px 8px;
    gap: 14px;
    box-shadow: inset 0 -1px 0 var(--line);
    transition: background-color 0.8s;
    border-radius: 0;
}

.no-rss-card__avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--bg2);
}

.no-rss-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.no-rss-card__body {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

@media (hover: hover) {
    .no-rss-card:hover {
        background: var(--bg2);
    }
}

.no-rss-card__body > strong {
    overflow-wrap: anywhere;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.no-rss-card__host {
    overflow: hidden;
    color: var(--ink3);
    font: 12px/1.5 var(--mono);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.no-rss-card__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink2);
    font-size: 12.5px;
}

@media (max-width: 900px) {

    .feed-row {
        grid-template-columns: 90px minmax(0, 1fr) 190px;
    }

    .feed-row > .feed-row__topics {
        display: none;
    }
}

@media (max-width: 720px) {
    .wormhole-page__backdrop {
        content: url("/assets/images/site-v10/I-71-d-v.webp?v=20t");
        object-position: 50% 60%;
    }

    .wormhole-page__copy {
        top: 90px;
    }

    .wormhole-page__copy p {
        max-width: 22em;
        font-size: 14px;
    }

    .wormhole-result__inner {
        align-content: start;
        padding-top: 84px;
    }

    .wormhole-result__panel {
        padding: 20px;
    }

    .blog-rhythm > div {
        gap: 2px;
    }

    .site-comment-form__fields {
        grid-template-columns: 1fr;
    }

    .feed-row {
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 8px 16px;
    }

    .feed-row__blog {
        grid-column: 2;
    }
}

/* 第 3 批 · 公告、单页、规则、登录与错误页 */
.content-page {
    min-height: 100svh;
    overflow: clip;
}

.content-ribbon {
    position: relative;
    display: flex;
    min-height: clamp(420px, 56svh, 580px);
    overflow: hidden;
    background: var(--bg);
    isolation: isolate;
}

.content-ribbon--detail {
    min-height: clamp(480px, 64svh, 660px);
}

.content-ribbon--document {
    min-height: clamp(430px, 58svh, 600px);
}

.content-ribbon__canvas {
    position: absolute;
    z-index: -1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.content-ribbon__inner {
    position: relative;
    display: flex;
    width: 100%;
    padding-top: clamp(132px, 17vh, 188px);
    padding-bottom: clamp(52px, 7vw, 92px);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 20px;
}

.content-ribbon__inner h1,
.document-visual h1,
.rules-page h1,
.five-year-hero h1,
.friend-page h1,
.login-page h1,
.error-page h1,
.maintenance-page h1 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(42px, 5.6vw, 88px);
    font-weight: 700;
    line-height: 1.06;
}

.content-ribbon__inner > p {
    max-width: 36em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

.content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    color: var(--ink2);
    font: 12px/1.6 var(--mono);
    letter-spacing: 0;
}

.content-meta > * + *::before {
    margin-right: 24px;
    color: var(--ink3);
    content: "·";
}

.notice-index {
    padding-top: clamp(42px, 6vw, 82px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.notice-index > .roster-filters {
    margin-top: 0;
}

.notice-row {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) max-content;
    align-items: start;
    gap: 28px;
    padding: 28px 8px;
    box-shadow: inset 0 -1px 0 var(--line);
    transition: padding 0.9s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.9s;
    border-radius: 0;
}

@media (hover: hover) {
    .notice-row:hover {
        padding-right: 24px;
        padding-left: 24px;
        background: var(--bg2);
    }
}

.notice-row > time {
    padding-top: 7px;
    color: var(--ink3);
    font: 12px/1.5 var(--mono);
    letter-spacing: 0;
}

.notice-row h2 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 14px;
    font-family: var(--sans);
    font-size: clamp(20px, 2vw, 29px);
    font-weight: 600;
    line-height: 1.35;
}

.notice-row p {
    max-width: 54em;
    margin: 10px 0 0;
    color: var(--ink2);
    font-size: 14.5px;
    line-height: 1.85;
}

.notice-row__more {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
    color: var(--ink2);
    font-size: 13px;
    white-space: nowrap;
}

@media (hover: hover) {
    .notice-row:hover .notice-row__more {
        color: var(--ink);
    }
}

.notice-index__empty {
    max-width: none;
    padding: 72px 24px;
    text-align: center;
}

.content-pagination {
    margin-top: 44px;
}

.content-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.content-pagination .page-link {
    display: grid;
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: var(--bg2);
    color: var(--ink2);
    place-items: center;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

.content-pagination .active .page-link {
    background: var(--action);
    color: var(--action-ink);
}

@media (hover: hover) {
    .content-pagination a.page-link:hover {
        background: var(--action);
        color: var(--action-ink);
    }
}

.article-reading {
    padding-top: clamp(52px, 7vw, 96px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.article-reading__body {
    max-width: 760px;
    margin: 0 auto;
}

/* 上面已有大段留白，不再压分割线：评论的小标题自带下沿线，两根线夹一个小标题纯属干扰（DD 2026-10-07） */
.article-reading__comments {
    max-width: 960px;
    margin: clamp(72px, 9vw, 128px) auto 0;
}

/* 公告翻页：放在标题与正文之间（DD 2026-10-07 照参考图），左边下一篇、右边上一篇、中间返回列表；不放配图 */
/* 翻页紧跟标题区，和正文之间留得比和标题之间宽，看得出它属于页头 */
.content-ribbon--detail .content-ribbon__inner {
    padding-bottom: clamp(32px, 4vw, 52px);
}

.article-pager {
    padding-top: clamp(20px, 2.4vw, 32px);
}

.article-pager__inner {
    display: grid;
    grid-template-areas: "next back previous";
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 20px clamp(24px, 4vw, 64px);
    padding: clamp(26px, 3.6vw, 48px) clamp(22px, 4vw, 64px);
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.article-pager__link {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.article-pager__link--next {
    grid-area: next;
    align-items: flex-start;
}

.article-pager__link--previous {
    grid-area: previous;
    align-items: flex-end;
    text-align: right;
}

.article-pager__link small {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0;
}

.article-pager__link--previous small {
    align-items: flex-end;
}

.article-pager__link small::before {
    width: 56px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: width 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.article-pager__link strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(16px, 1.4vw, 19px);
    font-weight: 600;
    line-height: 1.55;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

@media (hover: hover) {
    .article-pager__link:hover small::before {
        width: 96px;
    }
}

.article-pager__back {
    grid-area: back;
}

.rich-content {
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.95;
}

.rich-content > :first-child {
    margin-top: 0 !important;
}

.rich-content > :last-child {
    margin-bottom: 0 !important;
}

.rich-content h1,
.rich-content h2,
.rich-content h3,
.rich-content h4 {
    color: var(--ink);
    font-family: var(--display);
    line-height: 1.35;
    scroll-margin-top: 104px;
}

.rich-content h1 {
    margin: 2.5em 0 0.8em;
    font-size: 36px;
}

.rich-content h2 {
    margin: 2.2em 0 0.75em;
    font-size: clamp(24px, 2.2vw, 32px);
}

.rich-content h3 {
    margin: 2em 0 0.7em;
    font-size: 22px;
}

.rich-content p,
.rich-content ul,
.rich-content ol,
.rich-content blockquote,
.rich-content pre,
.rich-content table {
    margin-top: 0;
    margin-bottom: 1.25em;
}

.rich-content a {
    box-shadow: inset 0 -1px 0 var(--line2);
}

@media (hover: hover) {
    .rich-content a:hover {
        color: var(--ink2);
    }
}

.rich-content img {
    max-width: 100%;
    height: auto;
}

.rich-content blockquote {
    padding: 18px 24px;
    background: var(--bg2);
    color: var(--ink2);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.rich-content pre {
    overflow: auto;
    padding: 20px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 12.5px/1.8 var(--mono);
    white-space: pre-wrap;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.rich-content table {
    /* !important 覆盖后台粘贴进来的内联固定宽（如捐赠记录表 width:904px），否则手机横向溢出、金额/留言列被挤出屏（DD 2026-10-03） */
    width: 100% !important;
    max-width: 100%;
    border-collapse: collapse;
}

.rich-content th,
.rich-content td {
    padding: 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* 后台编辑器常在格子里多包一层段落、末尾多带一个换行：段落不留边距、格子顶对齐，同一行的字才对得齐（捐赠名单，DD 2026-10-07） */
.rich-content th > p,
.rich-content td > p {
    margin: 0;
}

@media (max-width: 819px) {
    .rich-content th,
    .rich-content td {
        padding: 8px 6px;
        font-size: 13px;
    }
}

/* 留言、捐赠页的插图页头按内容高度排，标题与插图上下居中。原先至少 820px 高、内容贴底，大屏上顶部空出三四百像素（DD 2026-10-07） */
.document-visual {
    display: grid;
    padding-top: clamp(112px, 11vw, 152px);
    padding-bottom: clamp(32px, 4vw, 56px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: center;
    gap: 32px clamp(32px, 5vw, 96px);
}

.document-visual__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.document-visual__copy p {
    max-width: 30em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

.document-visual picture {
    display: block;
}

.document-visual__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
}

/* 插图原图是 16:9，四周是大片空底：捐赠的球占画面七成五高，只裁上下各一窄条；
   留言的三张卡片只占中间四成高，裁成 8:3，按卡片的位置（偏下）取景 */
.document-page--message .document-visual__image {
    aspect-ratio: 8 / 3;
    object-position: 50% 56%;
}

.theme-illustration--light {
    display: none;
}

:root[data-theme="light"] .theme-illustration--dark {
    display: none;
}

:root[data-theme="light"] .theme-illustration--light {
    display: block;
}

.document-body {
    display: grid;
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(72px, 8vw, 120px);
    grid-template-columns: var(--one, minmax(0, 240px) minmax(0, 760px));
    gap: 48px clamp(32px, 6vw, 120px);
}

.document-page--donate .document-body,
.document-page--message .document-body {
    padding-top: 0;
    /* 这两页没有 TOC（正文无章节）：用单列居中。原来是 1fr+960px 两列，TOC 被 hidden(display:none) 后正文自动落进 1fr 窄列、右边 960px 空出来，PC 上就是「左窄右空」（DD 2026-10-03 留言页实测） */
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.document-toc {
    position: sticky;
    top: 104px;
    display: flex;
    align-self: start;
    flex-direction: column;
    gap: 2px;
}

.document-toc > span {
    padding-bottom: 12px;
    color: var(--ink3);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.document-toc a {
    display: flex;
    gap: 14px;
    padding: 9px 0;
    box-shadow: inset 0 -1px 0 var(--line);
    color: var(--ink2);
    font-size: 14px;
    transition: color 0.6s, padding 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .document-toc a:hover {
        padding-left: 8px;
        color: var(--ink);
    }
}

.document-toc b {
    flex: 0 0 32px;
    color: var(--ink3);
    font: 12px/1.7 var(--mono);
    font-weight: 400;
}

.document-body__content {
    min-width: 0;
}

.treaty-join {
    display: grid;
    padding-bottom: clamp(80px, 9vw, 140px);
    grid-template-columns: var(--one, minmax(0, 240px) minmax(0, 760px));
    gap: 48px clamp(32px, 6vw, 120px);
}

.treaty-join > div {
    display: flex;
    grid-column: 2;
    padding-top: 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.treaty-join p {
    margin: 0;
    font-size: 18px;
    line-height: 1.9;
}

.treaty-join small {
    color: var(--ink2);
    font-size: 14px;
}

.treaty-join .site-button {
    width: 100%;
    min-height: 72px;
    font-size: 16px;
}

/* 条约正文：按设计稿拆成「条 + 款」，款号悬挂在左栏、正文对齐右栏（App\Queries\TreatyPage） */
.treaty-toc b {
    flex-basis: 44px;
}

.treaty-toc small {
    padding-top: 14px;
    color: var(--ink3);
    font: 11px/1.7 var(--mono);
}

.treaty-doc {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 52px;
    font-size: 17px;
    line-height: 1.95;
}

.treaty-doc__lead {
    margin: 0;
    font-size: clamp(20px, 1.7vw, 24px);
    line-height: 1.8;
}

.treaty-clause {
    display: flex;
    flex-direction: column;
    gap: 14px;
    scroll-margin-top: 96px;
}

.treaty-clause h2 {
    display: flex;
    margin: 0;
    align-items: baseline;
    gap: 18px;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.3;
}

.treaty-clause h2 span {
    flex: 0 0 auto;
    color: var(--ink3);
    font: 400 13px/1 var(--mono);
    letter-spacing: 0;
}

.treaty-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 0 8px;
}

.treaty-item > span {
    color: var(--ink3);
    font: 14px/1.95 var(--mono);
}

.treaty-item p {
    margin: 0;
    overflow-wrap: anywhere;
}

.treaty-item a {
    box-shadow: inset 0 -1px 0 var(--line2);
}

.treaty-item--sub {
    grid-template-columns: 52px 44px minmax(0, 1fr);
    color: var(--ink2);
    font-size: 16px;
}

/* 子款的第一栏留空，让编号落在第二栏 */
.treaty-item--sub::before {
    content: "";
}

.treaty-item--sub > span {
    font-size: 13px;
}

.document-comments {
    display: grid;
    padding-bottom: clamp(80px, 9vw, 140px);
    grid-template-columns: var(--one, minmax(0, 240px) minmax(0, 960px));
    gap: 48px clamp(32px, 6vw, 120px);
}

/* 同公告页：正文下面已有大段留白，评论区上沿不再加分割线（DD 2026-10-07） */
.document-comments > .site-comments {
    grid-column: 2;
}

/* donate/message 没有 TOC：评论也用单列居中，与正文（.document-body 的 donate 覆盖）同宽对齐，
   不再沿用「240 空列 + 960 右列」而把评论顶到右边、左边留空（DD 2026-10-03 捐赠页实测） */
.document-page--donate .document-comments,
.document-page--message .document-comments {
    grid-template-columns: minmax(0, 820px);
    justify-content: center;
}

.document-page--donate .document-comments > .site-comments,
.document-page--message .document-comments > .site-comments {
    grid-column: 1;
}

.rules-page,
.friend-page,
.login-page {
    min-height: 100svh;
    padding-top: clamp(120px, 12vw, 168px);
    padding-bottom: clamp(80px, 9vw, 140px);
}

.friend-page > header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.rules-page__index {
    position: sticky;
    top: 104px;
    display: flex;
    align-self: start;
    flex-direction: column;
}

.rules-page__index > span {
    padding-bottom: 12px;
    color: var(--ink3);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.rules-page__index a {
    display: grid;
    padding: 9px 0;
    grid-template-columns: 32px 1fr;
    box-shadow: inset 0 -1px 0 var(--line);
    color: var(--ink2);
    font-size: 14px;
}

.rules-page__index b {
    color: var(--ink3);
    font: 12px/1.7 var(--mono);
    font-weight: 400;
}

.rule-formula {
    max-width: none;
    padding: 24px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line2);
    font: clamp(22px, 2.4vw, 34px)/1.4 var(--mono);
    text-align: center;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.rule-callout {
    padding-left: 20px;
    border-left: 3px solid var(--line2);
    font-size: 20px;
}

.rule-list {
    display: flex;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.rule-list li {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
}

.rule-list li::before {
    width: 6px;
    height: 6px;
    margin-top: 0.8em;
    background: var(--ink);
    content: "";
}

/* 关于页与虫洞规则页：DD 2026-10-02 定稿配图版式。 */
.ill {
    position: relative;
    min-width: 0;
    margin: 0;
    line-height: 0;
}

.ill img {
    width: 100%;
    height: auto;
}

.ill canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.doc-grid {
    display: grid;
    padding-top: clamp(56px, 7vw, 96px);
    padding-bottom: clamp(80px, 9vw, 140px);
    grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
    gap: 48px clamp(32px, 5vw, 96px);
}

.doc-flow {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: clamp(72px, 8vw, 112px);
}

.doc-sec {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    scroll-margin-top: 96px;
    overflow-wrap: anywhere;
    font-size: 17px;
    line-height: 1.95;
}

.doc-sec > *,
.doc-sec__text > * {
    max-width: 760px;
    margin: 0;
}

.doc-sec h2 {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
    margin: 0 0 2px;
    font-family: var(--display);
    font-size: clamp(24px, 2.2vw, 32px);
    font-weight: 700;
    line-height: 1.35;
}

.doc-sec h2 span {
    color: var(--ink3);
    font: inherit;
    font-weight: inherit;
}

.rules-page .doc-sec h2 {
    gap: 0;
}

.doc-sec a:not(.site-button) {
    box-shadow: inset 0 -1px 0 var(--line2);
    transition: box-shadow 0.4s;
}

@media (hover: hover) {
    .doc-sec a:not(.site-button):hover {
        box-shadow: inset 0 -1px 0 var(--ink);
    }
}

.doc-sec--fig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 32px clamp(32px, 4vw, 64px);
}

.doc-sec > .doc-sec--fig,
.doc-sec > .rule-formula,
.doc-sec > .score-block,
.doc-sec > .score-tables,
.doc-sec > .badge-pair,
.doc-sec > .people,
.doc-sec > .join-flow {
    max-width: none;
}

.doc-sec__text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
}

.doc-sub + .doc-sub {
    padding-top: clamp(40px, 5vw, 64px);
}

.rules-page.rules-page--illustrated {
    padding-bottom: 0;
}

.rules-hero {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: end;
    gap: 40px clamp(32px, 5vw, 96px);
}

.rules-hero__copy {
    display: flex;
    padding-bottom: clamp(24px, 3vw, 48px);
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.rules-hero__copy h1 {
    white-space: nowrap;
}

.rules-hero__copy p {
    max-width: 30em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

.rules-hero .ill img,
.about-hero .ill img {
    aspect-ratio: 21 / 9;
}

.score-block {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.score-tables {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
    overflow: clip;
}

.score-table {
    min-width: 0;
    padding: 20px 24px 12px;
    background: var(--bg2);
    border-radius: 0;
}

.score-table h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
    margin: 0 0 8px;
    font-size: 17px;
}

.score-table h3 small {
    color: var(--ink3);
    font: 11px/1.7 var(--mono);
    font-weight: 400;
}

.score-table div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    box-shadow: inset 0 -1px 0 var(--line);
    color: var(--ink2);
    font-size: 15px;
}

.score-table div:last-child {
    box-shadow: none;
}

.score-table strong {
    flex: 0 0 auto;
    color: var(--ink);
    font: 14px/1.7 var(--mono);
    font-weight: 400;
}

.weight-bar {
    width: min(560px, 100%);
}

.weight-bar__cells {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
}

.weight-bar__cells i {
    height: 14px;
    box-shadow: inset 0 0 0 1px var(--line2);
}

.weight-bar__cells i.is-base {
    background: var(--ink);
    box-shadow: none;
}

.weight-bar__labels {
    display: grid;
    padding-top: 10px;
    grid-template-columns: 2fr 4fr;
    gap: 4px;
    color: var(--ink3);
    font: 11px/1.6 var(--mono);
    letter-spacing: 0;
}

.rule-history h3 {
    margin: 0 0 6px;
    color: var(--ink3);
    font: 11px/1 var(--mono);
    font-weight: 400;
    letter-spacing: 0;
}

.rule-history div {
    display: grid;
    padding: 14px 0;
    grid-template-columns: 160px minmax(0, 1fr);
    gap: 16px;
    box-shadow: inset 0 -1px 0 var(--line);
    font-size: 15px;
}

.rule-history span:first-child {
    color: var(--ink3);
    font: 12px/1.9 var(--mono);
}

.about-opening {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-opening .about-opening__lead {
    max-width: none;
    margin: 0;
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.35;
}

.about-opening p {
    max-width: 760px;
    margin: 0;
    color: var(--ink2);
    font-size: 17px;
    line-height: 1.95;
}

.about-hero {
    display: grid;
    padding-top: clamp(48px, 6vw, 88px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: 40px clamp(32px, 5vw, 96px);
}

.doc-sec .site-button {
    align-self: flex-start;
}

.about-quote {
    padding-left: 24px;
    border-left: 3px solid var(--line2);
    font-family: var(--display);
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.6;
}

.people {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
    overflow: clip;
}

.people a {
    display: flex;
    min-width: 0;
    padding: 20px 20px 18px;
    flex-direction: column;
    gap: 6px;
    background: var(--bg2);
    box-shadow: none !important;
    transition: background 0.4s;
    border-radius: 0;
}

@media (hover: hover) {
    .people a:hover {
        background: var(--bg3);
    }
}

.people img {
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--bg3);
    object-fit: cover;
}

.people strong {
    font-size: 17px;
}

.people span {
    color: var(--ink3);
    font-size: 13px;
}

.people small {
    overflow: hidden;
    color: var(--ink2);
    font: 12px/1.6 var(--mono);
    text-overflow: ellipsis;
}

.doc-small {
    color: var(--ink2);
    font-size: 15px !important;
}

/* 关于页第 9 节与上线公告共用：公告正文不在 .doc-sec 里，网格不能挂在它下面 */
.bren-stickers__wall {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px;
}

.doc-sec > .bren-stickers__wall {
    max-width: none;
}

.bren-stickers__item {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.bren-stickers__item img {
    width: 120px;
    height: 120px;
}

.bren-stickers__item > span {
    color: var(--ink2);
    font-size: 14px;
}

.bren-stickers__item > code {
    color: var(--ink3);
    font: 12px/1.7 var(--mono);
}

/* 微信版扫码图：限宽到不压过上面的表情图墙；带 img 是为了盖过公告正文的 .rich-content img 撑满全宽 */
img.bren-stickers__qr {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
}

.bren-stickers__integration > summary {
    display: flex;
    list-style: none;
    cursor: pointer;
}

.bren-stickers__integration > summary::-webkit-details-marker {
    display: none;
}

.bren-stickers__integration > summary > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--line2);
    border-radius: 999px;
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: 0;
    transition: color 0.3s, border-color 0.3s;
}

.bren-stickers__integration > summary > span::after {
    content: "· 展开";
    flex-shrink: 0;
}

.bren-stickers__integration[open] > summary > span::after {
    content: "· 收起";
}

.bren-stickers__integration > summary:hover > span,
.bren-stickers__integration > summary:focus-visible > span,
.bren-stickers__integration[open] > summary > span {
    border-color: var(--ink3);
    color: var(--ink);
}

.bren-stickers__integration > summary:focus-visible {
    outline: none;
}

.bren-stickers__integration > summary:focus-visible > span {
    outline: 2px solid var(--ink3);
    outline-offset: 2px;
}

/* 公告正文没有关于页段落自带的间距，折叠项会挤在一起、图墙下一行字会贴着图名 */
.rich-content .bren-stickers__integration {
    margin: 0 0 12px;
}

.rich-content .bren-stickers__wall {
    margin-bottom: 1.25em;
}

.bren-stickers__instructions {
    display: grid;
    gap: 16px;
    padding-top: 16px;
}

.badge-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.badge {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.badge > span {
    color: var(--ink2);
    font-size: 14px;
}

.badge__foot {
    display: flex;
    min-height: 112px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 24px;
    font: 12px/1 var(--mono);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.badge__foot--light {
    background: #FFFFFF;
    box-shadow: inset 0 0 0 1px #E7E7EF;
    color: #4A4C5E;
}

.badge__foot--dark {
    background: #12141E;
    box-shadow: none;
    color: #B6B8CC;
}

.badge__foot img {
    max-width: calc(100% - 96px);
    width: auto;
    height: 32px;
    object-fit: contain;
}

.badge__code {
    position: relative;
    padding: 16px 18px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.badge__code code {
    display: block;
    padding-right: 64px;
    color: var(--ink2);
    font: 12px/1.7 var(--mono);
    white-space: pre-wrap;
    word-break: break-all;
}

.badge__code button {
    position: absolute;
    top: 10px;
    right: 10px;
    min-height: 32px;
    padding: 0 12px;
    border: 0;
    background: var(--bg3);
    color: var(--ink);
    font-size: 13px;
    cursor: pointer;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

.join-flow {
    display: grid;
    margin: 8px 0 !important;
    padding: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    box-shadow: inset 0 0 0 1px var(--line);
    list-style: none;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
    overflow: clip;
}

.join-flow li {
    position: relative;
    display: flex;
    min-width: 0;
    padding: 24px 28px 26px;
    flex-direction: column;
    gap: 6px;
    background: var(--bg2);
    border-radius: 0;
}

.join-flow b {
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.1;
}

.join-flow strong {
    font-size: 18px;
}

.join-flow span {
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.7;
}

.home-door--static {
    height: auto;
    padding-bottom: clamp(80px, 9vw, 140px);
    background: var(--bg);
    color: var(--ink);
}

.home-door--static .home-door__sticky {
    position: relative;
    top: auto;
    height: min(86svh, 760px);
    clip-path: none !important;
}

@media (max-width: 819px) {
    .doc-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
    }

    .doc-grid > .rules-page__index,
    .doc-grid > .document-toc {
        position: static;
        display: flex;
        overflow-x: auto;
        max-width: 100%;
        flex-direction: row;
        gap: 0 18px;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .doc-grid > .rules-page__index::-webkit-scrollbar,
    .doc-grid > .document-toc::-webkit-scrollbar {
        display: none;
    }

    .doc-grid > .rules-page__index > span,
    .doc-grid > .document-toc > span {
        display: none;
    }

    .doc-grid > .rules-page__index a,
    .doc-grid > .document-toc a {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .doc-sec--fig,
    .rules-hero,
    .about-hero,
    .score-tables,
    .badge-pair,
    .join-flow,
    .people {
        grid-template-columns: minmax(0, 1fr);
    }

    .rules-hero__copy {
        padding-bottom: 0;
    }

    .rules-hero__copy h1 {
        white-space: normal;
    }

    .rule-history div {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .home-door--static .home-door__sticky {
        min-height: 620px;
    }
}

.friend-page h1 {
    font-size: clamp(40px, 5vw, 80px);
}

.friend-links {
    margin-top: clamp(40px, 5vw, 64px);
}

.friend-links a {
    display: flex;
    align-items: baseline;
    gap: 28px;
    padding: 26px 8px;
    box-shadow: inset 0 -1px 0 var(--line);
    transition: padding 0.9s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.9s;
    border-radius: 0;
}

@media (hover: hover) {
    .friend-links a:hover {
        padding-left: 32px;
        background: var(--bg2);
    }
}

.friend-links strong {
    font-size: clamp(22px, 2vw, 30px);
}

.friend-links span {
    color: var(--ink3);
    font: 13px/1 var(--mono);
}

.friend-links fb-ic {
    margin-left: auto;
}

.login-page {
    display: grid;
    padding-top: clamp(120px, 14vh, 168px);
    grid-template-columns: var(--one, minmax(0, 1fr) minmax(0, 520px));
    align-items: start;
    gap: 48px clamp(40px, 8vw, 160px);
}

.login-page__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.login-page__notice {
    margin: 0;
    padding: 10px 16px;
    box-shadow: inset 0 0 0 1px var(--line2);
    color: var(--ink2);
    font-size: 14px;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.login-page__intro h1 {
    font-size: clamp(40px, 5vw, 80px);
}

.login-page__intro p {
    max-width: 26em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

.login-page__intro small {
    color: var(--ink3);
    font-size: 14px;
}

.login-page__intro small a {
    color: var(--ink);
    box-shadow: inset 0 -1px 0 var(--line2);
}

.login-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.login-steps {
    display: grid;
    margin: 0;
    padding: 0;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    list-style: none;
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.login-steps li {
    padding: 12px 14px;
    box-shadow: none;
    color: var(--ink3);
    border-radius: var(--r-md);
    corner-shape: var(--corner);
}

.login-steps li[aria-current="step"] {
    box-shadow: none;
    color: var(--ink);
    background: var(--bg2);
    font-weight: 600;
}

.login-form,
.login-form__code,
.login-form label {
    display: flex;
    flex-direction: column;
}

.login-form,
.login-form__code {
    gap: 28px;
}

.login-form label {
    gap: 8px;
}

.login-form label > span {
    display: flex;
    justify-content: space-between;
    color: var(--ink3);
    font: 11px/1 var(--mono);
    letter-spacing: 0;
}

.login-form label > span b,
.login-form label > span em {
    font: inherit;
    font-style: normal;
}

.login-form label > span em {
    letter-spacing: 0;
}

.input-action,
.login-form__email {
    display: grid;
    align-items: start;
    gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto;
}

.login-form input {
    min-width: 0;
}

.login-form__email button {
    flex: 0 0 auto;
    height: 48px;
    padding: 0 16px;
    background: var(--action);
    color: var(--action-ink);
    font-size: 13.5px;
    letter-spacing: 0;
    cursor: pointer;
}

.login-form__email button:disabled {
    background: var(--bg3);
    color: var(--ink3);
    cursor: default;
}

/* 发验证码时邮箱以前退过信的提醒（登录、申请、改邮箱共用 FB10_BOUNCE_WARNING）：文字留正文色，琥珀色只上图标 */
.bounce-warning {
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    line-height: 1.7;
}

.bounce-warning::before {
    content: "";
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    margin-right: 0.45em;
    vertical-align: -0.24em;
    background: var(--warn);
    -webkit-mask: var(--ic-warn) center / contain no-repeat;
    mask: var(--ic-warn) center / contain no-repeat;
}

.bounce-warning a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.login-form__code input {
    letter-spacing: 0;
    text-transform: uppercase;
}

.login-form label > small {
    display: flex;
    min-height: 1.5em;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.login-form label.has-error > small::before {
    width: 6px;
    height: 6px;
    background: var(--danger);
    content: "";
}

.login-form__submit {
    min-height: 64px;
    font-size: 15px;
    letter-spacing: 0;
}

.login-form__back {
    align-self: flex-start;
    padding: 4px 0;
    background: none;
    box-shadow: none;
    color: var(--ink2);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.error-page {
    display: grid;
    min-height: 100svh;
    padding-top: 120px;
    padding-bottom: 64px;
    grid-template-columns: var(--one, minmax(0, 0.9fr) minmax(0, 1.1fr));
    align-items: center;
    gap: 48px clamp(32px, 6vw, 100px);
}

.error-page__copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.error-page__copy > span {
    color: var(--ink3);
    font: 500 clamp(64px, 9vw, 140px)/1 var(--mono);
    letter-spacing: 0;
}

.error-page h1 {
    font-size: clamp(30px, 3.4vw, 52px);
    line-height: 1.25;
}

.error-page__copy > p {
    max-width: 30em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

.error-page__copy > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.error-page__art img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

.error-page__art .theme-illustration--light {
    display: none;
}

:root[data-theme="light"] .error-page__art .theme-illustration--dark {
    display: none;
}

:root[data-theme="light"] .error-page__art .theme-illustration--light {
    display: block;
}

.maintenance-body {
    overflow: hidden;
}

.maintenance-page {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    color: var(--ink);
    isolation: isolate;
}

.maintenance-page > section {
    position: relative;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    text-align: center;
}

.maintenance-page .theme-logo {
    height: 34px;
}

.maintenance-page h1 {
    font-size: clamp(36px, 4.4vw, 68px);
    line-height: 1.15;
}

.maintenance-page p {
    max-width: 28em;
    margin: 0;
    color: var(--ink2);
    font-size: 16px;
    line-height: 1.9;
}

@media (max-width: 900px) {
    .notice-row {
        grid-template-columns: 92px minmax(0, 1fr);
    }

    .notice-row__more {
        display: none;
    }

    .document-visual,
    .login-page,
    .error-page {
        grid-template-columns: 1fr;
    }

    .document-visual {
        padding-top: 128px;
    }

    .document-body {
        grid-template-columns: minmax(0, 1fr);
    }

    .document-body > .document-toc {
        position: static;
        display: none;
    }

    /* 条约的条款目录在手机上放在正文上方（设计稿），不像其他单页那样藏起来 */
    .document-body > .treaty-toc {
        display: flex;
    }

    .treaty-toc a {
        min-height: 44px;
        align-items: center;
        font-size: 15px;
    }

    .treaty-doc {
        gap: 44px;
    }

    .treaty-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0 6px;
    }

    .treaty-item--sub {
        grid-template-columns: 44px 36px minmax(0, 1fr);
    }

    .treaty-join,
    .document-comments {
        grid-template-columns: 1fr;
    }

    .treaty-join > div,
    .document-comments > .site-comments {
        grid-column: 1;
    }

    .error-page__art {
        grid-row: 1;
        max-width: 720px;
    }
}

@media (max-width: 620px) {
    .content-ribbon,
    .content-ribbon--detail,
    .content-ribbon--document {
        min-height: 520px;
    }

    .content-ribbon__inner h1 {
        font-size: clamp(36px, 11vw, 58px);
    }

    .content-meta > * + *::before {
        margin-right: 10px;
    }

    .content-meta {
        gap: 6px 10px;
    }

    /* 手机上三栏放不下：返回列表单占一行，下一篇、上一篇并排，标题最多三行 */
    .article-pager__inner {
        grid-template-areas: "back back" "next previous";
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 14px 20px;
        padding: 18px 20px 24px;
    }

    .article-pager__back {
        justify-self: center;
    }

    .article-pager__link strong {
        font-size: 15px;
        -webkit-line-clamp: 3;
    }

    .notice-row {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 24px 0;
    }

    @media (hover: hover) {
        .notice-row:hover {
            padding-right: 12px;
            padding-left: 12px;
        }
    }

    .document-visual {
        gap: 24px;
    }

    .document-page--donate .document-body,
    .document-page--message .document-body {
        grid-template-columns: 1fr;
    }

    .friend-links a {
        flex-wrap: wrap;
        gap: 10px 18px;
    }

    .friend-links fb-ic {
        margin-left: 0;
    }

    .login-form label > span {
        gap: 8px;
        flex-direction: column;
    }

    .error-page {
        padding-top: 104px;
    }
}

/* 第 10 版 v2：窄屏的排版只看宽度，触屏手势由脚本按输入方式决定。 */
html[data-narrow="true"] {
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.site-header.is-home-hero .site-search {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}























.home[data-flat="true"] .home-hero,
.home[data-flat="true"] .home-door {
    height: auto;
}

.home[data-flat="true"] .home-hero__sticky,
.home[data-flat="true"] .home-door__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
}

.home[data-flat="true"] .home-hero__sticky {
    overflow: visible;
    padding-top: 100svh;
}

.home[data-flat="true"] .home-stats-glass {
    display: none;
}

.home[data-flat="true"] .home-stat canvas {
    display: none;
}

.home[data-flat="true"] .home-stat.is-dot-ready strong {
    display: block;
}

.home[data-flat="true"] .home-stats {
    position: relative;
    inset: auto;
    visibility: visible !important;
    min-height: 0;
    padding: clamp(56px, 9vw, 96px) clamp(16px, 4vw, 64px);
    opacity: 1 !important;
    pointer-events: auto !important;
}







.home[data-flat="true"] .home-door__sticky {
    height: 100svh;
    min-height: 600px;
}

@media (max-width: 819px) {
    :root {
        --mobile-header-height: 60px;
        --mobile-page-x: 16px;
    }

    body {
        overflow-wrap: break-word;
    }

    button,
    input,
    select,
    textarea {
        font-size: 16px;
    }

    a,
    button,
    summary,
    select,
    input[type="checkbox"],
    input[type="radio"] {
        touch-action: manipulation;
    }

    .site-header__inner {
        height: var(--mobile-header-height);
        padding-right: max(var(--mobile-page-x), env(safe-area-inset-right, 0px));
        padding-left: max(var(--mobile-page-x), env(safe-area-inset-left, 0px));
    }

    .site-logo {
        min-height: 44px;
    }

    .site-menu:not([hidden]) {
        top: var(--mobile-header-height);
        padding-right: max(20px, env(safe-area-inset-right, 0px));
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px));
        padding-left: max(20px, env(safe-area-inset-left, 0px));
    }

    .site-announcement {
        margin-top: var(--mobile-header-height);
        margin-bottom: calc(-1 * var(--mobile-header-height));
        padding-right: max(12px, env(safe-area-inset-right, 0px));
        padding-left: max(12px, env(safe-area-inset-left, 0px));
    }

    .site-button,
    .site-tools button,
    .site-mobile-tools button,
    .site-menu a,
    .page-back-link,
    .feeds-tabs a,
    .site-footer nav a,
    .site-footer__legal a,
    .site-comments__order a,
    .site-comments__success button,
    .site-comment-form__reply button {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .rich-text a:not(.site-button),
    .site-comment__content a:not(.site-button),
    .site-comment__head > a {
        margin: -12px -8px;
        padding: 12px 8px;
    }

    .page-shell {
        padding-right: max(var(--mobile-page-x), env(safe-area-inset-right, 0px));
        padding-left: max(var(--mobile-page-x), env(safe-area-inset-left, 0px));
    }

    .home[data-swipe="true"] .home-hero {
        height: 320svh;
    }

    .home[data-flat="true"] .home-hero {
        height: auto;
    }





    .home-hero h1 {
        font-size: clamp(30px, 9.8vw, 44px);
        line-height: 1.16;
    }



















    .home-stats {
        overflow: visible;
        align-items: flex-start;
        padding: 88px 16px 76px;
    }

    .home-stats-glass {
        background: var(--shade);
    }

    :root[data-theme="light"] .home-stats-glass {
        background: var(--glass-edge);
    }





    .home-stats__cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-top: 20px;
    }

    .home-stat {
        padding: 12px 0 14px;
    }

    /* 点距下限 4px，画布 50px 只够 8 行点，9 和 8 分不开；76px 约 19 行，与桌面密度一致 */
    .home-stat canvas {
        height: 76px;
    }



    .home-section-line {
        padding: 0 16px;
    }







    .home-door__copy {
        top: 84px;
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        width: calc(100% - 32px);
        gap: 14px;
    }

    .home-door h2 {
        font-size: 28px;
    }

    .home-door__copy p {
        font-size: 15px;
    }

    .home-door__copy .site-button {
        width: 100%;
        min-height: 52px;
        margin-top: auto;
        justify-content: center;
    }

    .home-door__copy small {
        width: 100%;
        text-align: center;
    }

    .home-door__sticky > img,
    .wormhole-page__backdrop {
        content: url("/assets/images/site-v10/I-71-d-v.webp?v=20t");
        object-position: 50% 60%;
    }

    :root[data-theme="light"] .wormhole-page__backdrop {
        content: url("/assets/images/site-v10/I-71-l-v.webp?v=20u");
    }

    :root[data-theme="light"] .home-door__sticky,
    :root[data-theme="light"] .wormhole-page {
        clip-path: inset(calc(var(--mobile-header-height) + 8px) 8px 8px round var(--r-xl));
    }
















    .notice-row h2 > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }













    .home-blog-dialog {
        width: 100%;
        max-height: 94svh;
        margin: auto 0 0;
    }

    .home-blog-dialog > img {
        max-height: 44svh;
        object-fit: cover;
    }

    .home-blog-dialog__body {
        align-items: flex-start;
        min-height: 230px;
        padding: 20px 16px calc(94px + env(safe-area-inset-bottom, 0px));
        flex-direction: column;
    }

    .home-blog-dialog__actions,
    .wormhole-result__actions {
        position: fixed;
        z-index: 70;
        right: 0;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0;
        padding: var(--m-bar-padding, 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)));
        background: color-mix(in srgb, var(--bg) 90%, transparent);
        box-shadow: inset 0 1px 0 var(--line);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .home-blog-dialog__actions > *,
    .wormhole-result__actions > * {
        flex: 1 1 0;
        min-width: 0;
        min-height: 54px;
        padding-right: 10px;
        padding-left: 10px;
        justify-content: center;
        text-align: center;
    }

    /* 手机上的落点走整页滚动（同成员详情页）：一屏高的页面里再套一层滚动区，苹果手机上常常滑不动 */
    .wormhole-page.is-expanded {
        height: auto;
        min-height: 100svh;
        overflow: visible;
    }

    .wormhole-page.is-expanded .wormhole-page__backdrop,
    .wormhole-page.is-expanded .wormhole-page__door {
        position: fixed;
    }

    .wormhole-page.is-expanded .wormhole-result {
        position: relative;
        overflow: visible;
    }

    .wormhole-result__inner {
        padding: 84px 16px calc(94px + env(safe-area-inset-bottom, 0px));
    }

    /* 面板不用毛玻璃：带背景模糊的元素会成为固定定位的参照框，底部按钮栏会被钉在面板底部而不是屏幕底部 */
    .wormhole-result__panel {
        max-width: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* 底部按钮栏与成员详情页同一套：两键等高 54，次按钮是玻璃质感 */
    .wormhole-result__actions .site-button {
        min-height: 54px;
    }

    .wormhole-result__actions .site-button--glass {
        background: var(--header);
        box-shadow: inset 0 0 0 1px light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line2));
        color: light-dark(var(--bg), var(--ink));
    }

    .wormhole-result__message {
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    /* 手机上题材全部摆出来、一次点选（DD 2026-10-03：横滑在手机上找不到后面的题材）；三列放得下「图标 + 两字 + 人数」 */

    /* 关于页维护者：手机上一人一行横排（头像 · 名字与分工 · 网址），五个人不再占一屏多（DD 2026-10-03） */
    .people a {
        display: grid;
        grid-template-columns: 40px minmax(0, 1fr) auto;
        align-items: center;
        gap: 2px 12px;
        padding: 12px 14px;
    }

    .people img {
        grid-row: 1 / 3;
        grid-column: 1;
        width: 40px;
        height: 40px;
        margin: 0;
    }

    .people strong {
        grid-row: 1;
        grid-column: 2;
        font-size: 16px;
        line-height: 1.4;
    }

    .people span {
        grid-row: 2;
        grid-column: 2;
        line-height: 1.4;
    }

    .people small {
        grid-row: 1 / 3;
        grid-column: 3;
        max-width: 34vw;
    }

    /* 手机上成员列表两列，一行一个太占屏（DD 2026-10-03）；已离开用自己的多列规则，不受这条影响 */

    .feeds-page__header,
    .content-page__header,
    .archive-page__header {
        padding-top: 96px;
    }

    .feed-row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto auto;
        align-items: center;
        gap: 8px 12px;
        min-height: 118px;
        padding: 16px 4px;
    }

    .feed-row > time {
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
    }

    .feed-row__article {
        display: contents;
    }

    .feed-row__article > a {
        grid-column: 1 / -1;
        grid-row: 2;
        overflow: hidden;
        font-size: 17px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .feed-row__article > p {
        display: none;
    }

    .feed-row__blog {
        grid-column: 1 / -1;
        grid-row: 3;
        align-items: center;
        flex-direction: row;
        gap: 12px;
    }

    .feed-row__blog > a {
        min-width: 44px;
        padding: 9px 0;
    }

    .feed-row > .feed-row__topics {
        display: flex;
        grid-column: 1;
        grid-row: 1;
    }

    .notice-row {
        grid-template-columns: minmax(0, 1fr);
    }

    .error-page,
    .login-page,
    .document-visual {
        padding-top: 96px;
    }

    .error-page__art {
        grid-row: auto;
    }

    .rich-text,
    .document-content,
    .site-comment-content {
        overflow-wrap: anywhere;
    }

    .rich-text img,
    .document-content img,
    .site-comment-content img,
    .rich-text iframe,
    .document-content iframe {
        max-width: 100%;
        height: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notice-row,
    .friend-links a,
    .site-button {
        transition: none;
    }
}

/* ===== 虫洞落点·无截图占位插图 + 12 秒自动前往倒计时（2026-10-03） ===== */
/* 落点左列：倒计时条堆在截图预览区正上方，预览区本身样式不变 */
.wormhole-result__shotcol {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* 无截图时的占位：复用成员详情页那张深/浅插图，铺满预览区。
   插图自带深色底与「暂未抓取到网站截图」字样，用 contain 不裁掉底部文案，深色留边与预览区底色自然融合 */
.wormhole-result__shot [data-wormhole-placeholder] {
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--r-lg) - 6px * var(--r-k));
    corner-shape: var(--corner);
    overflow: hidden;
}

.wormhole-result__shot [data-wormhole-placeholder] img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 倒计时条：等宽数字 + 强调色 + 偏大字号，穿越后一眼注意到 */
.wormhole-result__countdown {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 16px;
    background: light-dark(var(--ink), var(--shade));
    box-shadow: inset 0 0 0 1px light-dark(color-mix(in srgb, var(--bg) 20%, transparent), var(--line));
    border-radius: var(--r-xl);
    corner-shape: var(--corner);
}

.wormhole-result__countdown b {
    min-width: 1.5em;
    color: var(--vis);
    font: 500 clamp(34px, 5vw, 52px)/1 var(--mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    text-align: center;
    text-shadow: 0 0 20px color-mix(in srgb, var(--vis) 55%, transparent);
}

.wormhole-result__countdown span {
    color: light-dark(var(--bg), var(--ink2));
    font-size: 13.5px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .wormhole-result__countdown b {
        font-size: 40px;
    }
}

/* 文章列表配图（DD 2026-10-04 定插图即截图）：标题左边一格截图，文章截图优先、没有就用博客截图，都没有留空底不塌行。
   同构：resources/views/layouts/feeds/_row.blade.php 与 public/assets/js/site-v10/feeds.js 的 renderRow */
.feed-row {
    grid-template-columns: 112px 128px minmax(0, 1fr) 250px 96px;
}

.feed-row__shot {
    display: block;
    overflow: hidden;
    align-self: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: var(--r-lg);
    corner-shape: var(--corner);
    background: var(--glass-fill);
    padding: 6px;
    box-shadow: inset 0 0 0 1px var(--glass-edge), 0 20px 44px -28px var(--shade);
}

.feed-row__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: calc(var(--r-lg) - 6px * var(--r-k));
    corner-shape: var(--corner);
}

@media (max-width: 900px) {
    .feed-row {
        grid-template-columns: 90px 112px minmax(0, 1fr) 190px;
    }
}

@media (max-width: 819px) {
    .feed-row {
        grid-template-columns: minmax(0, 1fr) 96px;
    }

    .feed-row__shot {
        grid-column: 2;
        grid-row: 2 / span 2;
    }

    .feed-row__article > a,
    .feed-row__blog {
        grid-column: 1;
    }
}

/* 个人中心「网站截图」一行：缩略图在左、状态与按钮在右，手机上上下排 */
.profile-screenshot {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    align-items: start;
    gap: 20px;
}

.profile-screenshot__frame {
    display: block;
    padding: 6px;
    border-radius: var(--r-lg);
    corner-shape: var(--corner);
    width: 200px;
    aspect-ratio: 16 / 10;
    background: var(--glass-fill);
    box-shadow: inset 0 0 0 1px var(--glass-edge);
}

.profile-screenshot__thumb {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--r-lg) - 6px * var(--r-k));
    corner-shape: var(--corner);
    background: var(--bg2);
    object-fit: cover;
    object-position: top;
}

.profile-screenshot__thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink3);
    font-size: 13px;
}

.profile-screenshot__body > p {
    margin: 0;
}

.profile-screenshot__body .profile-inline-status {
    margin-top: 8px;
}

.profile-screenshot__body .profile-inline-status.is-warning {
    color: var(--ink);
}

.profile-screenshot__form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 14px;
}

.profile-screenshot__form .form-status {
    min-height: 0;
}

.profile-screenshot__body > small {
    display: block;
    margin-top: 8px;
    color: var(--ink3);
    font-size: 12px;
}

@media (max-width: 720px) {
    .profile-screenshot {
        grid-template-columns: minmax(0, 1fr);
    }

    .profile-screenshot__frame {
        width: 100%;
        max-width: 280px;
    }
}

/* 成员详情页：截图框和它下方那行「截图没抓到」提示包成一列，占原来截图框的那一格 */
.blog-detail-hero__media {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 10px;
}

.blog-detail-hero__shot-note {
    margin: 0;
    color: var(--ink3);
    font: 13px/1.7 var(--sans);
}

.blog-detail-hero__shot-note a {
    color: var(--ink2);
    text-decoration: underline;
    text-underline-offset: 3px;
}
/* REQ-43 · /telegram.html「Telegram 博主群」（设计稿第 16 版修订 FB11Telegram）：细线行、无卡片底，写法同规则页与公告列表 */
.tg-page {
    --tg-pad: clamp(16px, 3.4vw, 48px);
}

.tg-page code {
    padding: 1px 6px;
    background: var(--bg3);
    box-shadow: inset 0 0 0 1px var(--line);
    font: 0.92em/1.6 var(--mono);
    color: var(--ink);
    border-radius: var(--r-xs);
    corner-shape: var(--corner);
}

.tg-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    min-height: clamp(620px, 92svh, 880px);
}

.tg-hero__wall {
    position: relative;
    order: 1;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 32%);
    mask-image: linear-gradient(90deg, transparent 0%, var(--bg) 32%);
}

.tg-hero__grid {
    position: absolute;
    top: -36px;
    left: 0;
    right: -120px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tg-hero__grid img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    background: var(--glass-fill);
    opacity: 0.36;
    transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    border-radius: var(--r-lg);
    corner-shape: var(--corner);
    padding: 6px;
    box-shadow: inset 0 0 0 1px var(--glass-edge);
}

:root[data-theme="light"] .tg-hero__grid img {
    opacity: 0.5;
}

.tg-hero__grid img.is-hot {
    opacity: 1;
}

.tg-hero__ribbon {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tg-hero__copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 24px;
    padding: clamp(128px, 14vw, 176px) 24px clamp(48px, 8vh, 88px) max(var(--tg-pad), calc(50vw - 672px));
}

/* 从个人中心来的返回入口：文案块贴底，返回入口单独放在首屏第一行（和其他页的返回入口同高） */
.tg-hero__back {
    position: absolute;
    top: 84px;
    left: max(var(--tg-pad), calc(50vw - 672px));
}

@media (max-width: 720px) {
    .tg-hero__back {
        top: 72px;
    }
}

.tg-hero__copy h1 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(44px, 5vw, 80px);
    line-height: 1.06;
    white-space: nowrap;
}

.tg-hero__copy p {
    margin: 0;
    max-width: 22em;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: 1.75;
    text-wrap: pretty;
}

.tg-join {
    min-height: 56px;
    padding: 0 26px;
    font-size: 15px;
}

.tg-join--wide {
    width: 100%;
    min-height: 72px;
    margin-top: clamp(22px, 2.6vw, 32px);
    font-size: 16px;
    letter-spacing: 0;
}

.tg-split,
.tg-gains {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(72px, 9vw, 128px) var(--tg-pad) 0;
}

.tg-split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 28px clamp(32px, 5vw, 96px);
}

.tg-split--top {
    align-items: start;
}

.tg-split--last {
    padding-bottom: clamp(96px, 11vw, 160px);
}

.tg-split > h2,
.tg-gains h2 {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    line-height: 1.25;
}

.tg-split > h2 {
    max-width: 11em;
    font-size: clamp(28px, 3.2vw, 48px);
    text-wrap: balance;
}

.tg-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.tg-lines li {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 16px;
    align-items: baseline;
    padding: clamp(20px, 2.4vw, 30px) 0;
    box-shadow: inset 0 -1px 0 var(--line);
}

.tg-lines li > span:first-child {
    font: 500 13px/1 var(--mono);
    letter-spacing: 0;
    color: var(--ink3);
}

.tg-lines li > span:last-child {
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 600;
    line-height: 1.5;
    text-wrap: pretty;
}

.tg-lines--steps li {
    padding: clamp(18px, 2.2vw, 26px) 0;
}

.tg-lines--steps p {
    margin: 0;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.tg-lines--steps a,
.tg-fine a {
    text-decoration: underline;
    text-decoration-color: var(--vis);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
}

.tg-lines--steps a {
    font-family: var(--mono);
}

.tg-note {
    margin: clamp(22px, 2.6vw, 32px) 0 0;
    display: flex;
    align-items: baseline;
    gap: 14px;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.75;
}

.tg-note i,
.tg-gains__col h2 i {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    background: var(--ink3);
    transform: translateY(-3px);
}

/* 两栏只用留白分开：原先 1px 间隙露出底色当竖线，两侧本来就各有 48px 留白（设计规范 · 版面通用原则，DD 2026-10-07） */
.tg-gains__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 56px clamp(48px, 6vw, 96px);
}

.tg-gains__col {
    display: flex;
    flex-direction: column;
}

.tg-gains__col h2 {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    font-size: clamp(22px, 2vw, 30px);
    line-height: 1.35;
}

.tg-gains__col h2 i {
    width: 8px;
    height: 8px;
    transform: none;
}

.tg-item {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 6px 16px;
    padding: clamp(18px, 2vw, 24px) 0;
    box-shadow: inset 0 1px 0 var(--line);
}

.tg-item > span {
    grid-row: 1 / span 3;
    padding-top: 4px;
    color: var(--ink2);
}

.tg-item h3 {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: clamp(17px, 1.4vw, 19px);
    font-weight: 600;
    line-height: 1.5;
}

.tg-item p {
    margin: 0;
    max-width: 34em;
    font-size: 15.5px;
    line-height: 1.85;
    color: var(--ink2);
    text-wrap: pretty;
}

.tg-item .tg-item__aside {
    margin-top: 6px;
    padding: 2px 0 2px 14px;
    box-shadow: inset 2px 0 0 var(--line2);
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--ink);
}

/* 状态旗：实心橙旗（右端燕尾缺口），不做成灰掉的禁用态。TG 页「即将开始」、公告 NEW 共用 */
.site-flag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 18px 0 10px;
    background: var(--vis);
    clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%);
    color: var(--bg);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
}

.tg-promise {
    margin: clamp(40px, 5vw, 64px) 0 0;
    padding: clamp(28px, 3.4vw, 44px) 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-promise strong {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(24px, 2.8vw, 42px);
    line-height: 1.3;
    text-wrap: balance;
}

.tg-promise span {
    font-size: clamp(16px, 1.3vw, 18px);
    line-height: 1.8;
    color: var(--ink2);
}

.tg-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 32px 16px;
}

.tg-shots figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tg-shots figcaption {
    font-size: 14px;
    color: var(--ink2);
}

/* 3:4 截图框：上线后换成机器人真实回复的截图（config telegram.members.showcase_images），框不变；框里的字随框宽缩放，和一张图一样 */
.tg-shot {
    container-type: inline-size;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--glass-fill);
    box-shadow: inset 0 0 0 1px var(--glass-edge);
    border-radius: var(--r-lg);
    corner-shape: var(--corner);
}

img.tg-shot {
    display: block;
    width: 100%;
    object-fit: cover;
    object-position: top;
    padding: 6px;
}

/* 外框做尺寸容器，里面这一层才能用 cqi（容器单位参照的是祖先容器，写在容器自己身上会落空） */
.tg-shot__in {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 3cqi;
    padding: 5cqi;
}

.tg-shot__bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqi;
    font: 3.2cqi/1.4 var(--mono);
    color: var(--ink3);
}

.tg-shot__bar span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tg-shot__bar code {
    font-size: 3.2cqi;
}

div.tg-shot .tg-shot__in > img {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: top;
    background: var(--bg3);
    box-shadow: 0 0 0 1px var(--line);
    border-radius: var(--r-sm);
    corner-shape: var(--corner);
}

div.tg-shot .tg-shot__in > strong {
    flex: 0 0 auto;
    font-size: 4.8cqi;
    font-weight: 600;
    line-height: 1.3;
}

.tg-shot dl {
    flex: 0 0 auto;
    margin: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    font-size: 4.2cqi;
    line-height: 1.45;
}

.tg-shot dt,
.tg-shot dd {
    margin: 0;
    padding: 2cqi 0;
    box-shadow: inset 0 1px 0 var(--line);
}

.tg-shot dt {
    padding-right: 3.4cqi;
    color: var(--ink2);
}

.tg-shot dd {
    display: flex;
    align-items: center;
    gap: 2cqi;
}

.tg-shot dd i {
    flex: 0 0 auto;
    width: 2.2cqi;
    height: 2.2cqi;
    background: var(--ink);
}

.tg-shot dl > :nth-last-child(-n + 2) {
    box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line);
}

div.tg-shot .tg-shot__in > p:not(.tg-shot__foot) {
    flex: 0 0 auto;
    margin: 0;
    padding-left: 2.6cqi;
    box-shadow: inset 0.5cqi 0 0 var(--line2);
    font-size: 3.8cqi;
    line-height: 1.6;
    color: var(--ink2);
}

.tg-shot ul {
    flex: 1 1 0;
    min-height: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
}

.tg-shot li {
    flex: 1 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: 30cqi minmax(0, 1fr);
    gap: 3.4cqi;
    align-items: center;
    box-shadow: inset 0 1px 0 var(--line);
}

.tg-shot li img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top;
    background: var(--bg3);
    border-radius: var(--r-sm);
    corner-shape: var(--corner);
}

.tg-shot li > span {
    display: flex;
    flex-direction: column;
    gap: 1cqi;
    min-width: 0;
}

.tg-shot li b {
    font-size: 4cqi;
    font-weight: 400;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tg-shot li small {
    display: flex;
    align-items: center;
    gap: 1.6cqi;
    min-width: 0;
    font-size: 3.3cqi;
    line-height: 1.4;
    color: var(--ink2);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.tg-shot li em {
    flex: 0 0 auto;
    font-style: normal;
    color: var(--topic-color, var(--ink2));
}

.tg-shot__foot {
    padding-top: 2cqi;
    box-shadow: inset 0 1px 0 var(--line);
    font: 3.1cqi/1.4 var(--mono);
    color: var(--ink3);
}

.tg-fine {
    margin-top: clamp(24px, 3vw, 36px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px clamp(24px, 3vw, 48px);
}

.tg-fine p {
    margin: 0;
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink2);
    text-wrap: pretty;
}

.tg-fine a {
    color: var(--ink);
}

@media (max-width: 819px) {
    .tg-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .tg-hero__wall {
        order: 0;
        /* 顶栏是浮在页面上的，截图墙从顶栏下面开始，第一排不被盖住 */
        margin-top: 64px;
        height: 210px;
        -webkit-mask-image: linear-gradient(180deg, var(--bg) 55%, transparent 100%);
        mask-image: linear-gradient(180deg, var(--bg) 55%, transparent 100%);
    }

    .tg-hero__grid {
        top: 0;
        right: 0;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .tg-hero__copy {
        padding: 8px 16px 40px;
    }

    .tg-hero__copy h1 {
        white-space: normal;
        text-wrap: balance;
    }

    .tg-join {
        width: 100%;
    }

    .tg-split,
    .tg-gains__cols,
    .tg-fine {
        grid-template-columns: minmax(0, 1fr);
    }

    .tg-item p,
    .tg-item .tg-item__aside {
        font-size: 15px;
    }

    /* 句中链接在手机上补够 44px 点按区域，下划线跟着字走 */
    .tg-lines--steps a,
    .tg-fine a {
        padding: 14px 4px;
        margin: -14px -4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tg-hero__grid img {
        transition: none;
    }
}

/* 找回页沿用登录版式；三步条、长网址和网站码在手机上也要能完整读出。 */
.email-recovery-page .login-panel { min-width: 0; overflow-wrap: anywhere; }
.email-recovery-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.email-recovery-steps li { line-height: 1.7; letter-spacing: 0; }
.email-recovery-page .login-form input { width: 100%; }
.email-recovery-code { display: block; padding: 14px; border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.8; border-radius:var(--r-xl); corner-shape:var(--corner); }

/* 首页与成员页共用的订阅下拉。 */
.daily-subscribe { position: relative; }
.daily-subscribe summary { cursor: pointer; list-style: none; }
.daily-subscribe summary::-webkit-details-marker { display: none; }
.daily-subscribe__panel { position: absolute; right: 0; top: calc(100% + 12px); z-index: 5; width: min(360px, calc(100vw - 40px)); padding: 18px; background: var(--bg2); border: 1px solid var(--line2); border-radius:var(--r-xl); corner-shape:var(--corner); }
.daily-subscribe__buttons, .daily-subscribe__copy { display: flex; flex-wrap: wrap; gap: 10px; }
.daily-subscribe__copy { margin-top: 12px; }
.daily-subscribe__copy code { width: 100%; overflow-wrap: anywhere; color: var(--ink2); }
.daily-subscribe__panel p { margin: 14px 0 0; font-size: 12px; line-height: 1.7; color: var(--ink3); }
/* 周信与 RSS 是两种订阅方式，用留白分开，不加分割线 */
.daily-subscribe__weekly { margin-bottom: 22px; }
.daily-subscribe__weekly form { margin-top: 12px; }
/* 手机上订阅小块不浮在页面上（按钮靠右时会伸出屏幕左边），展开后占一整行往下排 */
@media (max-width: 767px) {
    .daily-subscribe[open] { flex-basis: 100%; }
    .daily-subscribe__panel { position: static; width: auto; margin-top: 12px; }
}
.email-recovery-method h2 { margin: 0 0 8px; font-size: 18px; }
.email-recovery-method p, .email-recovery-address { margin: 0; line-height: 1.8; }
.email-recovery-page details .login-form { margin-top: 20px; }
@media (max-width: 600px) { .email-recovery-steps { grid-template-columns: minmax(0, 1fr); } }
.roster-page__header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 24px;}
.roster-page__header > div:first-child{display:contents;}
/* 第 20 版：数字的斜体只包数字；中文和动态标题保持黑体。 */
.site-number{font-family:var(--num);font-style:italic;font-weight:400;font-variant-numeric:lining-nums;font-feature-settings:"lnum";letter-spacing:0;}
.site-serif-title,.archive-page h1,.section-heading h2,.document-page--about .content-ribbon h1,.document-page--treaty .content-ribbon h1,.document-visual h1,.join-page .join-intro h1,.login-page h1,.rules-page.rules-page--illustrated .rules-hero__copy h1{font-family:var(--serif);font-weight:200;letter-spacing:0;}
.site-serif-title strong{font-weight:900;}
:root[data-theme="dark"] :is(.site-serif-title,.archive-page h1,.section-heading h2,.document-page--about .content-ribbon h1,.document-page--treaty .content-ribbon h1,.document-visual h1,.join-page .join-intro h1,.login-page h1,.rules-page.rules-page--illustrated .rules-hero__copy h1){font-weight:300;}
.site-tools .site-button{min-height:38px;padding:0 14px;font-size:13.5px;}
.site-menu__actions .site-button{background:var(--action);color:var(--action-ink);padding:0 14px;}
.site-search:focus-within{box-shadow:inset 0 0 0 1px var(--line2);}
.site-mobile-search:focus-within{box-shadow:inset 0 0 0 1px var(--line2);}
.site-menu nav a:not([aria-current]) i{display:none;}
.site-menu nav a[aria-current]{color:var(--vis-text);}
.site-menu nav a[aria-current] i{display:none;}
.site-menu{transform-origin:calc(100% - 30px) 30px;transform:scale(.2);opacity:0;pointer-events:none;transition:transform .3s cubic-bezier(.4,0,.6,1),opacity .22s ease;}
.is-menu-open .site-menu{transform:none;opacity:1;pointer-events:auto;transition:transform .45s cubic-bezier(.2,.9,.2,1),opacity .25s ease;}
.roster-page,.blog-detail-hero{position:relative;isolation:isolate;max-width:1440px;padding-right:clamp(20px,5.5vw,80px);padding-left:clamp(20px,5.5vw,80px);}
/* 遮罩只有形状，主题色集中由变量决定；平底截图框不做背景模糊。 */
.roster-page::before,.blog-detail-hero::before{content:"";position:absolute;z-index:-1;top:0;left:calc((100% - 100vw)/2);width:100vw;height:520px;background:var(--glow-fill);-webkit-mask:var(--m-bg1) center top/100% 100% no-repeat;mask:var(--m-bg1) center top/100% 100% no-repeat;opacity:var(--glow-o);pointer-events:none;}
.roster-page{padding-top:116px;padding-bottom:80px;}
.roster-page h1{margin:0;font:200 clamp(46px,4.6vw,68px)/1.04 var(--serif);}
.roster-page__header small{align-self:end;color:var(--ink2);font:15px/1.7 var(--sans);}
.roster-page__header small .site-number{margin:0 4px;color:var(--ink);font-size:34px;line-height:1;}
.roster-legend b{font-weight:600;}
.roster-legend small{font:13px/1.6 var(--sans);color:var(--ink3);}
.roster-legend .roster-status{gap:7px;color:var(--ink);font-weight:600;}
.roster-page .roster-filters{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px;margin-top:24px;padding:8px;border-radius:var(--r-xl);corner-shape:var(--corner);background:var(--bg2);box-shadow:none;}
.roster-page .roster-filters__categories{flex:1 1 auto;gap:4px;}
.roster-page .roster-filters__categories a{height:40px;gap:2px;padding:0 14px;border-radius:calc(var(--r-xl) - 8px * var(--r-k));corner-shape:var(--corner);letter-spacing:0;box-shadow:none;white-space:nowrap;transition:background-color .2s,color .2s,transform .2s;}
.roster-page .roster-filters__categories a.is-active{background:var(--bg3);color:var(--ink);box-shadow:0 1px 2px var(--line);}
.roster-page .roster-filters__categories a small{margin-left:6px;font:italic 400 13.5px/1 var(--num);}
.roster-page .roster-filters__year{flex:0 0 auto;gap:10px;white-space:nowrap;}
.topic-dot{display:inline-block;flex:0 0 auto;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--topic-color,var(--ink3));}
.roster-card__media{position:relative;display:block;}
.roster-card__topics{display:flex;flex-wrap:wrap;gap:0 12px;margin-top:2px;color:var(--ink2);font:12.5px/1.6 var(--sans);}
.roster-card__years .site-number{color:var(--ink);font-size:16px;}
:root[data-theme="dark"] :is(.roster-card__shot,.blog-detail-hero__shot) img:not(.theme-illustration){filter:brightness(.86);}
.blog-detail-hero__shot>.roster-card__badge{left:20px;top:-20px;width:48px;}
.blog-detail-hero__identity>:is(.blog-detail-years,.roster-status,.blog-detail-topics){min-height:34px;padding:0 12px;border-radius:var(--r-xs);corner-shape:var(--corner);background:var(--bg2);}
.blog-detail-topics{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.blog-detail-hero__identity .site-number{margin:0 2px;font-size:15px;}
.blog-detail-hero__actions .site-button{white-space:nowrap;}
@media(hover:hover){.roster-card:not(.roster-card--archive):hover{transform:translateY(-4px)}.roster-page .roster-filters__categories a:not(.is-active):hover{background:var(--raise);color:var(--ink);box-shadow:none;}}
@media(max-width:1180px){
.site-header__inner{gap:20px;padding-right:max(var(--header-page-x,var(--mobile-page-x,clamp(20px,5.5vw,80px))),env(safe-area-inset-right,0px));padding-left:max(var(--header-page-x,var(--mobile-page-x,clamp(20px,5.5vw,80px))),env(safe-area-inset-left,0px));}
:root:has(.home-v18,.roster-page,.blog-detail-hero) .site-header__inner{--header-page-x:clamp(20px,5.5vw,80px);}
.site-menu:not([hidden]){inset:auto;top:8px;right:8px;width:min(330px,calc(100vw - 16px));max-height:calc(100svh - 16px);padding:72px 26px 22px;border-radius:var(--r-xl);corner-shape:var(--corner);background:var(--raise);box-shadow:0 30px 80px -30px var(--shade),0 0 0 1px var(--line);}
.site-menu nav a{min-height:48px;font:600 22px/1.3 var(--sans);gap:0;}
.site-menu__actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:30px;padding-top:0;}
.site-menu__actions>*{min-height:44px;background:none;padding:0;font-size:14px;}
.site-menu__actions .site-logout button{background:none;min-height:44px;}
.roster-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.roster-page .roster-filters{flex-wrap:wrap;}
.blog-detail-hero__grid{gap:32px;}
}
@media(max-width:760px){
.site-header__inner{height:60px;}
:root:has(.home-v18) .site-header__inner{--header-page-x:5.5vw;}
.site-logo img{height:22px;}
.site-footer__main{align-items:flex-start;flex-direction:column;gap:24px;padding-bottom:48px;}
.site-footer nav{gap:4px 20px;}
.roster-page{padding-top:80px;}
.roster-page h1{font-size:46px;}
.roster-page__header{grid-template-columns:minmax(0,1fr);gap:8px;}
.roster-page__header small{font-size:15px;}
.roster-page__header small .site-number{font-size:26px;}
.roster-legend{margin-top:8px;}
.roster-legend>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;}
.roster-legend .roster-status{font-size:12.5px;}
.roster-legend small{display:none;}
.roster-page .roster-filters{flex-direction:column;align-items:stretch;gap:8px;margin-top:16px;padding:6px;border-radius:var(--r-xl);corner-shape:var(--corner);}
.roster-page .roster-filters__categories{display:flex;flex-wrap:wrap;gap:2px;}
.roster-page .roster-filters__categories a{min-width:0;height:44px;padding:0 9px;font-size:13.5px;border-radius:calc(var(--r-xl) - 6px * var(--r-k));corner-shape:var(--corner);}
.roster-page .roster-filters__categories a small{margin-left:4px;font-size:12.5px;}
.roster-page .roster-filters__year{width:100%;justify-content:space-between;}
.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;}
.roster-grid.roster-grid--archive{grid-template-columns:minmax(0,1fr);gap:12px;}
.roster-card__heading>strong{font-size:15px;}
.roster-card__meta{row-gap:0;}
.roster-card__date{flex-basis:100%;margin-left:0;font-size:12.5px;}
.roster-card__shot{padding:6px;}
.roster-card__badge{top:-14px;width:28px;}
.blog-detail-hero{padding-top:66px;}
.blog-detail-hero__grid{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:4px;}
.blog-detail-hero__copy h1{font-size:28px;}
.blog-detail-hero__host{font-size:18px;}
.blog-detail-hero__shot>.roster-card__badge{left:20px;top:-18px;width:42px;}
.blog-detail-hero__actions{position:fixed;z-index:55;left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:8px;margin:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--header);box-shadow:0 -1px 0 var(--line);}
.blog-detail-hero__actions .site-button{min-width:0;min-height:48px;padding:0 10px;font-size:14px;}
.blog-detail-page{padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));}
}
@media(prefers-reduced-motion:reduce){.site-menu:not([hidden]){transition:none}.roster-card{transition:none}}
.site-menu__actions button{border-radius:var(--r-md);corner-shape:var(--corner);}
.blog-detail-hero>.blog-recent-feeds{margin-top:64px;}
.blog-detail-hero>.blog-recent-feeds+.blog-recent-feeds{margin-top:40px;}
.blog-detail-hero>.blog-recent-feeds time{white-space:nowrap;}
@media(max-width:760px){.blog-detail-hero>.blog-recent-feeds a{gap:12px;}.blog-detail-hero>.blog-recent-feeds time{font-size:13px;}}
/* 旧版每日页的数字类只含拉丁字符；中文期名和动态文章标题继续使用黑体。 */
.daily-v19 .dv19-num,.daily-v19 .dv19-mh-no b,.daily-v19 .dv19-st-n b,.daily-v19 .dv19-pg-n b{font-family:var(--num);font-style:italic;letter-spacing:0;}
.daily-v19 :is(.dv19-btn,.dv19-btn2,.dv19-mh-t,.dv19-pg-t,.dv19-tag-e,.dv19-tag-o){letter-spacing:0;}

:root:not([data-theme="light"]) :is(.roster-card__placeholder,.blog-detail-hero__placeholder) .theme-illustration--light{display:none;}
:root:not([data-theme="light"]) :is(.roster-card__placeholder,.blog-detail-hero__placeholder) .theme-illustration--dark{mix-blend-mode:screen;}
/* 画布与透明插画使用同一个页面底色，深浅切换时一起更新。 */
.site-body{--door-bg:var(--bg);}
.wormhole-page .site-button--solid{background:var(--action);color:var(--action-ink);}
.wormhole-page .site-button--glass{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line2);}

/* 两拍变叉：先合到中线再旋转；关闭时先回正，再分开，状态仍由同一个菜单按钮持有。 */
.site-menu-icon {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
}
.site-menu-icon i {
    position: absolute;
    left: 2px;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .16s ease, top .16s ease .16s;
}
.site-menu-icon i:first-child { top: 6px; }
.site-menu-icon i:last-child { top: 14px; }
[data-menu-toggle][aria-expanded="true"] .site-menu-icon i {
    top: 10px;
    transition: top .16s ease, transform .2s ease .16s;
}
[data-menu-toggle][aria-expanded="true"] .site-menu-icon i:first-child { transform: rotate(45deg); }
[data-menu-toggle][aria-expanded="true"] .site-menu-icon i:last-child { transform: rotate(-45deg); }

/* 触屏只点标题，划过大图不会误进；链接本身仍可用键盘和读屏访问。 */
@media (hover: none), (pointer: coarse) {
    .roster-card:not(.roster-card--archive) { pointer-events: none; }
    .roster-card:not(.roster-card--archive) .roster-card__heading { pointer-events: auto; }
}
@media (max-width: 760px) {
    .roster-card:not(.roster-card--archive) .roster-card__heading {
        padding: 12px 0;
        margin: -11px 0 -12px;
    }
}

/* 第 20 版：输入表面只在这里定义，避免页面组件把圆角框改回底线；隐藏域和选择开关保留原语义。 */
:root :is(input:where(:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="color"], [type="file"], [type="image"])), textarea, select),
:root :is(.site-search, .site-mobile-search, .page-search) {
    min-width: 0;
    min-height: 48px;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: var(--r-md);
    corner-shape: var(--corner);
    outline: 0;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line2);
    color: var(--ink);
    font: 16px/1.5 var(--sans);
    transition: box-shadow 0.2s;
}

:root :is(input, textarea)::placeholder {
    color: var(--ink3);
    opacity: 1;
}

:root :is(input, textarea, select):focus,
:root :is(.site-search, .site-mobile-search, .page-search):focus-within {
    box-shadow: inset 0 0 0 1px var(--ink);
}

:root :is(.has-error input, .has-error textarea, input[aria-invalid="true"], textarea[aria-invalid="true"]) {
    box-shadow: inset 0 0 0 2px var(--ink);
}

:root textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    resize: vertical;
}

/* 原生控件保留键盘行为；箭头只由同一 SVG 蒙版绘制，跟随文字的主题色。 */
:root select {
    appearance: none;
    padding-right: 44px;
    background-image: none;
}

:root :has(> select:not([multiple])) {
    position: relative;
}

:root :has(> select:not([multiple]))::after {
    content: "";
    position: absolute;
    right: 14px;
    bottom: 16px;
    width: 16px;
    height: 16px;
    background: var(--ink2);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
    pointer-events: none;
}

/* 搜索图标与文字共用一个表面，内层输入不再另画一层框。 */
:root :is(.site-search, .site-mobile-search, .page-search) input {
    height: 100%;
    min-height: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

:root .site-mobile-search {
    margin: 0 16px 14px;
}

/* 留出固定的表情工具区，长评论和拖高后的文本都不会压住按钮。 */
:root .site-comment-form__editor textarea {
    min-height: 164px;
    padding-bottom: 64px;
}

.site-comment-form__submit > button {
    flex: 0 0 auto;
    min-height: 48px;
}

:root :is(input, textarea, select):disabled {
    color: var(--ink3);
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    :root :is(input, textarea, select, .site-search, .site-mobile-search, .page-search) {
        transition: none;
    }
}

/* 同一行的输入与动作共用 48px 节奏，提示文字留在行外，避免把按钮往下挤。 */
.input-action > button,
.daily-subscribe__weekly form > button {
    height: 48px;
    min-height: 48px;
}

.daily-subscribe__weekly form {
    gap: 12px;
}

@media (max-width: 600px) {
    .input-action,
    .login-form__email {
        grid-template-columns: minmax(0, 1fr);
    }

    .input-action > button,
    .login-form__email > button {
        width: 100%;
    }
}

@media (min-width: 820px) {
    .page-shell { padding-inline: var(--content-pad); }
    .tg-page { --tg-pad: var(--content-pad); }
    .tg-hero__copy { padding-left: var(--g); }
    .tg-hero__back { left: var(--g); }
    .wormhole-result__inner { padding-inline: var(--content-pad); }
}
@media (max-width: 819px) {
    .wormhole-page__copy { left: clamp(16px, 5vw, 80px); }
}

/* 顶栏搜索属于紧凑导航；页面搜索和菜单搜索仍使用 48px 的表单规格。 */
:root .site-search {
    height: 40px;
    min-height: 40px;
    font-size: 13.5px;
}
:root .site-search input { font-size: inherit; }