@font-face {
    font-family: "Alimama ShuHeiTi";
    font-display: swap;
    font-style: normal;
    font-weight: 700;
    src: url("https://at.alicdn.com/wf/webfont/kfq1sgJFWQ6g/cPCrTL8ewntCCMPMNgo40.woff2") format("woff2");
}

/* 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;
}

:root {
    color-scheme: dark;
    --bg: #000;
    --bg2: #0b0b0c;
    --bg3: #161618;
    --ink: #edeae3;
    --ink2: #a8a49b;
    --ink3: #6e6b65;
    --line: rgba(237, 234, 227, 0.12);
    --line2: rgba(237, 234, 227, 0.26);
    --action: #edeae3;
    --action-ink: #000;
    --header: rgba(0, 0, 0, 0.72);
    --scrim: rgba(0, 0, 0, 0.62);
    --glass-bg: rgba(0, 0, 0, 0.18);
    --glass-filter: blur(20px) saturate(0.72) brightness(0.62);
    --vis: oklch(0.71 0.225 44);
    --vis-text: oklch(0.71 0.225 44);
    --ctadot: var(--vis);
    --display: "Alimama ShuHeiTi", "PingFang SC", "HarmonyOS Sans SC", "Noto Sans SC", 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, monospace;
}

:root[data-theme="light"] {
    color-scheme: light;
    --bg: #fff;
    --bg2: #f4f4f5;
    --bg3: #e9e9ec;
    --ink: #0a0a0a;
    --ink2: #3c3c41;
    --ink3: #68686f;
    --line: rgba(10, 10, 10, 0.1);
    --line2: rgba(10, 10, 10, 0.22);
    --action: var(--vis);
    --action-ink: #0a0a0a;
    --header: rgba(255, 255, 255, 0.84);
    --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);
    --vis-text: oklch(0.58 0.19 42);
    --ctadot: var(--vis);
}

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

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

body {
    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.is-mourning {
    filter: grayscale(1);
}

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

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

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

button {
    border: 0;
}

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

input::placeholder {
    color: var(--ink3);
}

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);
    box-shadow: 0 1px 0 var(--line);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    transition: background-color 0.35s, box-shadow 0.35s;
}

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

.site-header__inner {
    display: flex;
    align-items: center;
    height: 72px;
    gap: clamp(14px, 2vw, 34px);
    padding-right: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-right, 0px));
    padding-left: max(clamp(16px, 3.4vw, 48px), env(safe-area-inset-left, 0px));
}

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

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

.site-nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.9vw, 30px);
    font-size: 13px;
    letter-spacing: 0.16em;
}

.site-nav a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    white-space: nowrap;
    color: var(--ink2);
    transition: color 0.6s;
}

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

@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 {
    background: var(--vis);
}

.site-tools {
    display: flex;
    align-items: center;
    gap: clamp(16px, 1.9vw, 28px);
    margin-left: auto;
    color: var(--ink2);
    font-size: 13px;
    letter-spacing: 0.16em;
}

.site-search {
    display: flex;
    align-items: center;
    width: clamp(170px, 15vw, 240px);
    height: 40px;
    gap: 10px;
    box-shadow: inset 0 -1px 0 var(--line2);
}

.site-search input,
.site-mobile-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font-size: 13px;
    letter-spacing: 0.04em;
}

.site-text-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border: 0;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    color: inherit;
    letter-spacing: 0.16em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-size 0.8s cubic-bezier(0.19, 1, 0.22, 1), color 0.6s;
}

@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;
}

.site-mobile-tools button {
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    place-items: 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);
}

.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,
.home-global-notice__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,
.home-global-notice__summary > button:first-of-type span {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.site-announcement__summary > button:last-child,
.home-global-notice__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: #0b0b0c;
    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 高度设定），默认滑出屏外，滑过首屏(第2屏)后滑入 */
.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.2em;
}

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

.site-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    gap: 10px;
    padding: 0 22px;
    border: 0;
    font-size: 14px;
    letter-spacing: 0.08em;
    cursor: pointer;
    transition: border-radius 0.9s cubic-bezier(0.19, 1, 0.22, 1), letter-spacing 0.9s cubic-bezier(0.19, 1, 0.22, 1), transform 0.25s;
}

@media (hover: hover) {
    .site-button:hover {
        border-radius: 20px;
        letter-spacing: 0.14em;
    }
}

.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 时加速 */
.home-hero__actions .site-button--solid fb-ic {
    animation: fb-spin 7s linear infinite;
}

@media (hover: hover) {
    .home-hero__actions .site-button--solid:hover fb-ic {
        animation-duration: 1.6s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-button.is-loading::before,
    .home-hero__actions .site-button--solid fb-ic {
        animation: none;
    }
}

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

:root[data-theme="light"] .site-button--solid fb-ic[dot="accent"] {
    --ctadot: #0a0a0a;
    color: inherit;
}

.site-button--glass {
    background: var(--header);
    box-shadow: inset 0 0 0 1px var(--line2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.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__scrim,
.home-hero__groups,
.home-stats-glass,
.home-stats {
    position: absolute;
    inset: 0;
}

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

.home-hero__scrim {
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(1100px, 120vw);
    height: min(700px, 90vh);
    transform: translate(-50%, -50%);
    background: radial-gradient(closest-side, var(--scrim), transparent);
    pointer-events: none;
}

.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__copy {
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: min(840px, calc(100% - 32px));
    gap: clamp(16px, 2.2vw, 24px);
    text-align: center;
    text-shadow: 0 0 34px var(--bg), 0 0 12px var(--bg);
    transform: translate(-50%, -50%);
    will-change: opacity, transform;
}

.home-hero__brand {
    position: relative;
    display: block;
    height: clamp(30px, 2.6vw, 40px);
}

.home-hero__brand img {
    height: 100%;
}

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

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

.home-hero__search {
    display: flex;
    align-items: center;
    width: min(520px, 100%);
    height: 56px;
    gap: 14px;
    padding: 0 18px;
    border: 0;
    background: var(--header);
    box-shadow: inset 0 0 0 1px var(--line2);
    color: var(--ink3);
    text-align: left;
    text-shadow: none;
    cursor: text;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: border-radius 0.9s cubic-bezier(0.19, 1, 0.22, 1), box-shadow 0.7s;
}

.home-hero__search input {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: inherit;
    letter-spacing: inherit;
}

.home-hero__search input::placeholder {
    color: var(--ink3);
}

.home-hero__search input:focus {
    outline: none;
}

@media (hover: hover) {
    .home-hero__search:hover {
        border-radius: 28px;
        box-shadow: inset 0 0 0 1px var(--ink);
    }
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    text-shadow: none;
}

.home-hero__actions .site-button {
    min-height: 56px;
    font-size: 15px;
}

.home-hero__promise {
    position: absolute;
    z-index: 5;
    bottom: 40px;
    left: clamp(16px, 3.4vw, 48px);
    display: flex;
    flex-direction: column;
    width: min(340px, 26vw);
    gap: 14px;
    padding: 16px 18px;
    background: var(--header);
    box-shadow: inset 0 0 0 1px var(--line);
    text-shadow: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: none;
}

.home-hero__hover {
    position: absolute;
    z-index: 6;
    bottom: 40px;
    left: 50%;
    padding: 10px 16px;
    opacity: 0;
    background: var(--header);
    box-shadow: inset 0 0 0 1px var(--line);
    font-size: 15px;
    font-weight: 600;
    pointer-events: none;
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.home-hero__hover.is-visible {
    opacity: 1;
}

.home-hero__promise p {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    color: var(--ink2);
    font-size: 13px;
    line-height: 1.7;
}

.home-hero__promise p:nth-child(-n + 2) {
    color: var(--ink);
    font-size: 14px;
    line-height: 1.6;
}

.home-hero__promise small {
    color: var(--ink3);
    font: 11px/1.6 var(--mono);
    letter-spacing: 0.24em;
}

.home-hero__progress {
    position: absolute;
    z-index: 6;
    top: 50%;
    right: clamp(16px, 3.4vw, 48px);
    display: grid;
    grid-template-columns: 1px auto;
    align-items: stretch;
    gap: 18px;
    transform: translateY(-50%);
}

.home-hero__progress > i {
    display: block;
    overflow: hidden;
    width: 1px;
    background: var(--line2);
}

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

.home-hero__progress ol {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 210px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.home-hero__progress li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink3);
    font-size: 12.5px;
    letter-spacing: 0.08em;
    transition: color 0.35s;
}

.home-hero__progress li.is-current {
    color: var(--ink);
}

.home-hero__progress li span {
    font: 11px/1 var(--mono);
}

.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__inner {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
}

.home-stats__intro {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    align-items: end;
    gap: 16px 64px;
}

.home-stats__intro h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(28px, 3.4vw, 50px);
    font-weight: 700;
    line-height: 1.22;
}

.home-stats__intro p {
    max-width: 30em;
    margin: 0;
    color: var(--ink2);
    font-size: 15px;
    line-height: 1.85;
}

.home-stats__intro .topic-label {
    display: inline-flex;
    vertical-align: baseline;
}

.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);
}

.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.06em;
}

.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-stat__try {
    display: inline-flex;
    margin: -12px -2px;
    padding: 12px 2px;
    color: var(--ink);
    box-shadow: inset 0 -1px 0 currentColor;
    white-space: nowrap;
}

.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 rgba(0, 0, 0, 0.7);
}

.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 rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    letter-spacing: 0.14em;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.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-latest {
    position: relative;
    height: 300svh;
}

.home-latest__sticky {
    position: sticky;
    top: 0;
    display: flex;
    overflow: hidden;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    height: 100svh;
    min-height: 600px;
    gap: clamp(24px, 5vh, 56px);
}

.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.3em;
    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.12em;
    white-space: nowrap;
}

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

.home-latest__track {
    display: flex;
    width: max-content;
    padding: 0 clamp(16px, 3.4vw, 48px);
    will-change: transform;
}

.home-latest-card {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    width: min(664px, calc(100vw - 96px));
    gap: 16px;
    padding: 0 clamp(16px, 2vw, 28px);
    box-shadow: inset 1px 0 0 var(--line);
}

.home-latest-card__meta {
    display: flex;
    justify-content: space-between;
    color: var(--ink3);
    font: 12px/1 var(--mono);
}

.home-latest-card__meta b {
    color: var(--vis-text);
}

.home-latest-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--bg2);
    object-fit: cover;
    object-position: top;
    transition: border-radius 0.9s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .home-latest-card:hover > img {
        border-radius: 28px;
    }
}

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

.home-latest-card > strong {
    display: -webkit-box;
    overflow: hidden;
    min-height: 2.8em;
    font-family: var(--sans);
    font-size: clamp(19px, 1.8vw, 26px);
    font-weight: 600;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.home-latest-card__author {
    align-self: flex-start;
    color: var(--ink2);
    font-size: 13.5px;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    transition: background-size 0.8s;
}

@media (hover: hover) {
    .home-latest-card:hover .home-latest-card__author {
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

[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: #000;
    color: #edeae3;
}

: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: #000;
}

.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: clamp(16px, 5vw, 80px);
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    width: min(500px, calc(100% - 32px));
    gap: 22px;
}

.home-dark-kicker {
    padding: 9px 16px;
    background: #1c1c1e;
    color: #a8a49b;
    font: 12px/1 var(--mono);
    letter-spacing: 0.3em;
}

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

.home-door__copy p {
    margin: 0;
    color: #a8a49b;
    font-size: 16px;
    line-height: 1.85;
}

.home-door__copy .site-button {
    min-height: 56px;
    background: #edeae3;
    color: #000;
    font-size: 15px;
}

.home-door__copy small {
    color: #6e6b65;
    font: 11.5px/1.8 var(--mono);
    letter-spacing: 0.06em;
}

.home-notices {
    max-width: 1440px;
    margin: 0 auto;
    padding: clamp(88px, 10vw, 150px) clamp(16px, 3.4vw, 48px) clamp(72px, 8vw, 120px);
}

.home-notices > .home-section-line {
    padding: 0 0 18px;
    box-shadow: inset 0 -1px 0 var(--line2);
}

.home-global-notice {
    box-shadow: inset 0 -1px 0 var(--line);
}

.home-global-notice__summary {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 0 14px 8px;
}

.home-global-notice__summary .site-kicker {
    flex-basis: 72px;
}

.home-global-notice__body {
    padding: 0 8px 26px 108px;
}

.home-global-notice__body p {
    max-width: 46em;
    margin: 0 0 18px;
    white-space: pre-line;
}

.home-notices__list > a {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 28px;
    row-gap: 6px;
    padding: 24px 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;
}

@media (hover: hover) {
    .home-notices__list > a:hover {
        padding-left: 32px;
        background: var(--bg2);
    }
}

.home-notices__list > a > span {
    flex: 0 0 72px;
    color: var(--vis-text);
    font: 12.5px/1.6 var(--mono);
}

.home-notices__list strong {
    flex: 1 1 300px;
    min-width: 0;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.5;
}

.home-notices__list p {
    display: -webkit-box;
    overflow: hidden;
    flex: 2 1 420px;
    min-width: 0;
    margin: 0;
    color: var(--ink2);
    font-size: 13.5px;
    line-height: 1.75;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

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

.home-join {
    display: grid;
    grid-template-columns: var(--one, repeat(2, minmax(0, 1fr)));
    background: #000;
    color: #edeae3;
}

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

:root[data-theme="light"] .home-join__visual {
    margin: clamp(16px, 3.4vw, 48px);
    background: #000;
}

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

:root[data-theme="light"] .home-join__copy p {
    color: var(--ink2);
}

:root[data-theme="light"] .home-join__copy .home-join__note,
:root[data-theme="light"] .home-join__copy > small {
    color: var(--ink3);
}

:root[data-theme="light"] .home-join__copy > a {
    background: var(--action);
    color: var(--action-ink);
}

.home-join__visual {
    position: relative;
    overflow: hidden;
    min-height: max(560px, 78svh);
    background: #000;
}

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

.home-join__visual img {
    object-fit: contain;
}

.home-join__copy {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: center;
    padding: clamp(56px, 7vw, 112px) clamp(20px, 5vw, 96px);
}

.home-join__copy .home-dark-kicker {
    align-self: flex-start;
    background: #262626;
    color: #cfcbc2;
}

.home-join h2 {
    margin-top: 36px;
    font-size: clamp(36px, 4.4vw, 68px);
    line-height: 1.14;
}

.home-join__copy p {
    max-width: 32em;
    margin: 30px 0 0;
    color: #a8a49b;
    font-size: 15.5px;
    line-height: 1.9;
}

.home-join__copy .home-join__note {
    margin-top: 14px;
    color: #6e6b65;
    font-size: 13px;
    line-height: 1.8;
}

.home-join__copy > a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    gap: 12px;
    margin-top: 40px;
    background: var(--action);
    color: var(--action-ink);
    font-size: 15px;
    letter-spacing: 0.1em;
    transition: border-radius 0.9s cubic-bezier(0.19, 1, 0.22, 1), background-color 0.9s, letter-spacing 0.9s;
}

@media (hover: hover) {
    .home-join__copy > a:hover {
        border-radius: 36px;
        background: color-mix(in srgb, var(--action) 88%, white);
        letter-spacing: 0.16em;
    }
}

.home-join__copy > small {
    margin-top: 18px;
    color: #6e6b65;
    font: 12px/1 var(--mono);
    letter-spacing: 0.2em;
    text-align: center;
}

.site-footer {
    background: var(--bg);
    box-shadow: inset 0 1px 0 var(--line);
}

.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(16px, 3.4vw, 48px);
    padding-left: clamp(16px, 3.4vw, 48px);
}

.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;
    height: 48px;
    padding: 0 22px;
    box-shadow: inset 0 0 0 1px var(--line2);
    font-size: 14px;
    letter-spacing: 0.12em;
}

.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.12em;
}

.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.08em;
}

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

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

    .site-mobile-search {
        align-items: center;
        height: 62px;
        gap: 10px;
        padding: 0 16px 14px;
        background: var(--header);
        box-shadow: inset 0 -1px 0 var(--line);
    }

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

    .site-mobile-search input {
        box-shadow: inset 0 -1px 0 var(--line2);
        font-size: 16px;
    }

    .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:first-child 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.08em;
    }

    .home-hero__promise {
        bottom: 28px;
        width: min(300px, 36vw);
    }

    .home-hero__progress {
        right: 20px;
    }

    .home-hero__progress li {
        font-size: 0;
    }

    .home-hero__progress li span {
        font-size: 11px;
    }

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

@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__copy {
        top: 45%;
    }

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

    .home-hero__actions {
        width: 100%;
    }

    .home-hero__actions .site-button {
        flex: 1 1 100%;
    }

    .home-hero__promise {
        right: 68px;
        bottom: 18px;
        left: 16px;
        width: auto;
        gap: 8px;
    }

    .home-hero__promise p:last-child {
        display: none;
    }

    .home-hero__progress {
        right: 12px;
    }

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

    .home-stats__intro p {
        display: none;
    }

    .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-latest-card {
        width: min(82vw, 360px);
    }

    .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;
    }

    .home-global-notice__summary {
        gap: 10px;
        padding-left: 0;
    }

    .home-global-notice__summary .site-kicker {
        flex-basis: auto;
    }

    .home-global-notice__body {
        padding-left: 0;
    }

    .home-notices__list > a > span {
        flex-basis: 42px;
    }

    .home-join {
        grid-template-columns: 1fr;
    }

    .home-join__visual {
        min-height: 70svh;
    }

    .home-join__visual img {
        content: url("/assets/images/site-v10/I-70-d-v.webp");
        object-fit: cover;
    }

    .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.3em;
}

.page-back-link {
    display: inline-flex;
    align-items: center;
    height: 44px;
    gap: 10px;
    color: var(--ink2);
    font: 12px/1 var(--mono);
    letter-spacing: 0.24em;
    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);
    box-shadow: inset 0 1px 0 var(--line);
}

.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: inset 0 -1px 0 currentColor;
    cursor: pointer;
}

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

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

: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));
}

: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__copy {
    position: absolute;
    z-index: 3;
    top: clamp(96px, 22%, 220px);
    left: clamp(16px, 5vw, 80px);
    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: #a8a49b;
    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: #6e6b65;
    font: 11.5px/1.8 var(--mono);
    letter-spacing: 0.06em;
}

.wormhole-result {
    position: absolute;
    z-index: 5;
    inset: 0;
    overflow: auto;
    background: rgba(0, 0, 0, 0.6);
}

.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: #0b0b0c;
    box-shadow: 0 0 0 1px rgba(237, 234, 227, 0.18), 0 40px 120px -30px rgba(255, 240, 220, 0.18);
    place-items: center;
}

.wormhole-result__shot img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

.wormhole-result__shot span {
    color: #6e6b65;
    font: 11px/1 var(--mono);
    letter-spacing: 0.12em;
}

.wormhole-result__panel {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    max-width: 560px;
    min-width: 0;
    gap: 14px;
    padding: 24px;
    background: rgba(0, 0, 0, 0.48);
    box-shadow: inset 0 0 0 1px rgba(237, 234, 227, 0.12);
    backdrop-filter: blur(20px) saturate(0.72) brightness(0.68);
    -webkit-backdrop-filter: blur(20px) saturate(0.72) brightness(0.68);
}

.wormhole-result__panel .home-dark-kicker {
    align-self: flex-start;
    background: #262626;
    color: #cfcbc2;
}

.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: #a8a49b;
    font: 12.5px/1.6 var(--mono);
}

.wormhole-result__identity > b {
    color: var(--vis);
    font: 500 12.5px/1.6 var(--mono);
}

.wormhole-result__latest {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}

.wormhole-result__latest small,
.wormhole-result__reason {
    color: #6e6b65;
    font: 11px/1.6 var(--mono);
    letter-spacing: 0.12em;
}

.wormhole-result__latest a {
    overflow: hidden;
    color: #edeae3;
    font-size: 16px;
    line-height: 1.5;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wormhole-result__reason {
    display: flex;
    justify-content: space-between;
    padding-top: 10px;
    box-shadow: inset 0 1px 0 rgba(237, 234, 227, 0.14);
}

.wormhole-result__facts {
    display: flex;
    flex-direction: column;
    box-shadow: inset 0 1px 0 rgba(237, 234, 227, 0.14);
}

.wormhole-result__facts > span {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    box-shadow: inset 0 -1px 0 rgba(237, 234, 227, 0.08);
    font-size: 14px;
}

.wormhole-result__facts small {
    margin-left: auto;
    color: #6e6b65;
    font: 12px/1 var(--mono);
}

.wormhole-result__message {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    padding-left: 14px;
    box-shadow: inset 1px 0 0 rgba(237, 234, 227, 0.3);
    color: #cfcbc2;
    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 rgba(237, 234, 227, 0.25);
}

.wormhole-result__rhythm i.is-active {
    border-color: #edeae3;
    background: #edeae3;
}

.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: #2a2a2a;
    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: rgba(0, 0, 0, 0.72);
}

.wormhole-message::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    content: "";
}

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

.wormhole-message p {
    margin: 0;
    color: #a8a49b;
    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 rgba(237, 234, 227, 0.12);
}

.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.08em;
}

.roster-legend {
    display: block;
}

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

.roster-legend > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, auto));
    gap: 10px 28px;
}

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

.roster-status i {
    display: block;
    width: 10px;
    height: 10px;
    border: 1px solid var(--ink2);
    background: transparent;
}

.roster-status--live i { border-color: var(--ink); background: var(--ink); }
.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 { border-color: var(--ink3); 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.06em;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color 0.5s, box-shadow 0.5s;
}

.roster-filters__categories a.is-active {
    color: var(--ink);
    box-shadow: inset 0 -2px 0 currentColor;
}

@media (hover: hover) {
    .roster-filters__categories a:hover {
        color: var(--ink);
        box-shadow: inset 0 -2px 0 currentColor;
    }
}

.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-filters__year select {
    height: 36px;
    padding: 0 28px 0 8px;
    border: 0;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line2);
    color: var(--ink);
    font: inherit;
}

.roster-grid {
    display: grid;
    grid-template-columns: var(--one, repeat(auto-fill, minmax(min(100%, 300px), 1fr)));
    gap: 48px 28px;
    margin-top: 36px;
}

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

.roster-card__shot {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--bg2);
    transition: border-radius 1s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .roster-card:hover .roster-card__shot {
        border-radius: 18px;
    }
}

.roster-card__shot > img:not(.roster-card__badge) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

@media (hover: hover) {
    .roster-card:hover .roster-card__shot > img:not(.roster-card__badge) {
        transform: scale(1.05);
    }
}

.roster-card__badge {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    display: block;
    width: auto;
    height: 60px;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
    pointer-events: none;
}

/* 没抓到截图的博客：用 DD 的「暂无首页截图」占位图（深/浅两版），填满卡槽、和真实截图一致的裁剪方式 */
.roster-card__placeholder {
    position: absolute;
    inset: 0;
}

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

.roster-card__years {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    color: var(--ink2);
    font: 11px/1 var(--mono);
    letter-spacing: 0.08em;
}

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

.roster-card__years b {
    padding: 4px 6px;
    background: var(--vis);
    color: #0a0a0a;
    font-weight: 700;
}

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

.roster-card__heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.roster-card__heading > strong {
    overflow: hidden;
    min-width: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: linear-gradient(currentColor, currentColor) 100% 100% / 0 1px no-repeat;
    transition: background-size 0.8s;
}

@media (hover: hover) {
    .roster-card:hover .roster-card__heading > strong {
        background-position: 0 100%;
        background-size: 100% 1px;
    }
}

.roster-card__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink3);
    font: 12px/1 var(--mono);
}

/* 日期：前面用时钟 icon 代替「更新」字样，整体不换行 */
.roster-card__date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.roster-card__meta .topic-label {
    margin-left: auto;
    font-family: var(--sans);
    /* 题材整体横排、与日期同一行对齐，不逐字折行也不掉到第二行（DD 2026-10-03：必须对齐、放不下就缩字号） */
    white-space: nowrap;
}

/* 手机窄卡：日期与题材保持同一行对齐，靠缩小字号放下（而不是换行错位）。「/」分隔已用半角无空格 */
@media (max-width: 819px) {
    .roster-card__meta {
        gap: 6px;
        font-size: 10.5px;
    }

    .roster-card__meta .topic-label {
        font-size: 10.5px;
    }
}

.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.08em;
}

.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） */
.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);
    filter: grayscale(1) contrast(0.86);
    opacity: 0.82;
}

.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 {
    min-height: min(100svh, 900px);
    padding-top: 84px;
    padding-bottom: 40px;
}

.blog-detail-hero__grid {
    display: grid;
    grid-template-columns: var(--one, repeat(2, minmax(0, 1fr)));
    align-items: start;
    gap: 24px clamp(28px, 4vw, 64px);
    margin-top: 10px;
}

.blog-detail-hero__shot {
    position: relative;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    height: min(50svh, 450px);
    padding: 24px;
    background: var(--bg2);
    box-shadow: inset 0 0 0 1px var(--line);
    color: var(--ink3);
    font: 12px/1 var(--mono);
}

.blog-detail-hero__shot.is-archived {
    filter: grayscale(1) contrast(0.86);
}

.blog-detail-hero__shot img {
    width: calc(100% + 48px);
    height: calc(100% + 48px);
    margin: -24px;
    object-fit: cover;
    object-position: top;
}

/* 无截图时的占位插图：整张居中显示、不裁切（hero 比名录卡更宽，用 contain 不用 cover） */
.blog-detail-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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: 18px;
}

.blog-detail-hero__copy h1 {
    margin: 0;
    font-family: var(--sans);
    font-size: clamp(34px, 4.2vw, 64px);
    line-height: 1.1;
}

.blog-detail-hero__host {
    display: block;
    margin-top: 10px;
    overflow-wrap: anywhere;
    color: var(--ink3);
    font: 13px/1.6 var(--mono);
    letter-spacing: 0.06em;
}

.blog-detail-hero__copy > div:first-child > p {
    overflow: hidden;
    margin: 10px 0 0;
    padding-left: 12px;
    box-shadow: inset 1px 0 0 var(--line2);
    color: var(--ink2);
    font-size: 14px;
    line-height: 1.7;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

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

.blog-detail-latest {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.blog-detail-latest small,
.blog-rhythm > small {
    color: var(--ink3);
    font: 11px/2 var(--mono);
    letter-spacing: 0.2em;
}

.blog-detail-latest strong {
    font-size: clamp(19px, 1.7vw, 24px);
    line-height: 1.5;
}

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

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

.blog-rhythm 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__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
}

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

.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);
    box-shadow: inset 0 1px 0 var(--line);
}

.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.3em;
}

.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-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;
}

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

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

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

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

.site-comments {
    display: flex;
    max-width: none;
    margin: 0;
    padding: 0;
    flex-direction: column;
    gap: 28px;
    text-align: left;
}

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

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

.site-comment {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 0 16px;
    padding: 20px 0;
    box-shadow: inset 0 -1px 0 var(--line);
}

.site-comment__avatar,
.site-comment__reply img {
    width: 40px;
    height: 40px;
    background: var(--bg3);
    object-fit: cover;
}

.site-comment header,
.site-comment__reply header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.site-comment header > a,
.site-comment header > strong {
    font-size: 15px;
    font-weight: 600;
}

.site-comment header > b {
    padding: 3px 6px;
    background: var(--bg3);
    font: 10.5px/1 var(--mono);
    letter-spacing: 0.12em;
}

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

.site-comment header button {
    margin-left: auto;
    padding: 4px 0;
    background: none;
    color: var(--ink2);
    box-shadow: inset 0 -1px 0 transparent;
    font-size: 13px;
    cursor: pointer;
}

@media (hover: hover) {
    .site-comment header button:hover {
        color: var(--ink);
        box-shadow-color: currentColor;
    }
}

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

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

.site-comment__reply {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0 14px;
    margin-top: 16px;
    padding: 14px 0 2px 18px;
    box-shadow: inset 1px 0 0 var(--line2);
}

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

.site-comments__pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-comments__pagination .page-link {
    display: grid;
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
    background: var(--bg2);
    place-items: center;
}

.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);
}

.site-comments__success button,
.site-comment-form__reply button {
    margin-left: auto;
    padding: 6px 0;
    background: none;
    color: var(--ink2);
    box-shadow: inset 0 -1px 0 currentColor;
    cursor: pointer;
}

.site-comment-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.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 {
    color: var(--ink3);
    font: 11px/1 var(--mono);
    letter-spacing: 0.2em;
}

.site-comment-form input,
.site-comment-form textarea {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    box-shadow: inset 0 -1px 0 var(--line2);
    color: var(--ink);
    font-size: 15px;
}

.site-comment-form input {
    height: 44px;
}

.site-comment-form textarea {
    padding: 12px 0;
    resize: vertical;
    line-height: 1.8;
}

.site-comment-form label.has-error input,
.site-comment-form label.has-error textarea {
    box-shadow: inset 0 -2px 0 var(--ink);
}

.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(--vis);
    content: "";
}

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

.site-comment-form__submit {
    display: flex;
    align-items: center;
    gap: 18px;
}

.site-comment-form__submit > span {
    color: var(--ink3);
    font-size: 12.5px;
}

.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;
    height: 56px;
    gap: 12px;
    padding: 0 4px;
    box-shadow: inset 0 -1px 0 var(--line2);
}

.page-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    font-size: 17px;
}

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

.feeds-tabs a {
    display: flex;
    align-items: center;
    height: 48px;
    padding: 0 14px;
    color: var(--ink2);
    font-size: 14.5px;
    letter-spacing: 0.06em;
    box-shadow: inset 0 -2px 0 transparent;
}

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

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

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

.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(--vis);
}

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

/* 还没接入订阅的博客：卡片网格。卡片高度对齐「最新文章」一行（约 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;
}

.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) {
    .blog-detail-hero__grid,
    .blog-detail-lower {
        grid-template-columns: 1fr;
    }

    .blog-detail-hero__shot {
        height: min(50svh, 430px);
    }

    .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");
        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;
    }

    .roster-legend {
        grid-template-columns: 1fr;
    }

    .roster-legend small {
        display: none;
    }

    .roster-filters__year {
        width: 100%;
        justify-content: space-between;
    }

    .roster-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .blog-detail-hero {
        padding-top: 72px;
    }

    .blog-detail-hero__shot {
        height: 42svh;
    }

    .blog-detail-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }

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

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

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

    .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);
    box-shadow: inset 0 -1px 0 var(--line);
    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,
.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-ribbon__inner > .page-back-link {
    margin-bottom: auto;
}

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

.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-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;
}

.notice-row:first-child {
    box-shadow: inset 0 1px 0 var(--line2), inset 0 -1px 0 var(--line);
}

@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.06em;
}

.notice-row h2 {
    margin: 0;
    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;
    box-shadow: inset 0 1px 0 var(--line2), inset 0 -1px 0 var(--line);
    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;
}

.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;
}

.article-reading__comments {
    max-width: 960px;
    margin: clamp(72px, 9vw, 128px) auto 0;
    padding-top: 40px;
    box-shadow: inset 0 1px 0 var(--line2);
}

.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(--vis);
}

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

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

.rich-content blockquote {
    padding: 18px 24px;
    border-left: 3px solid var(--vis);
    background: var(--bg2);
    color: var(--ink2);
}

.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;
}

.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;
    overflow-wrap: anywhere;
}

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

.document-visual {
    display: grid;
    min-height: min(820px, 92svh);
    padding-top: clamp(132px, 16vh, 180px);
    padding-bottom: clamp(64px, 7vw, 104px);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: end;
    gap: 40px 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: 16 / 9;
}

.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.26em;
}

.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;
    box-shadow: inset 0 1px 0 var(--line2);
}

.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.1em;
}

.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(--vis);
}

.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);
}

.document-comments > .site-comments {
    grid-column: 2;
    padding-top: 40px;
    box-shadow: inset 0 1px 0 var(--line2);
}

/* 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.26em;
}

.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;
}

.rule-callout {
    padding-left: 20px;
    border-left: 3px solid var(--vis);
    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);
    box-shadow: inset 0 1px 0 var(--line);
}

.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);
}

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

.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.06em;
}

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

.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(--vis);
    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);
}

.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;
}

@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;
}

.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);
}

.badge__foot--light {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(10, 10, 10, 0.1);
    color: #68686f;
}

.badge__foot--dark {
    background: #161618;
    box-shadow: inset 0 0 0 1px rgba(237, 234, 227, 0.12);
    color: #a8a49b;
}

.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);
}

.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;
}

.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;
}

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

.join-flow b {
    color: var(--vis-text);
    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: #edeae3;
}

.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);
    box-shadow: inset 0 1px 0 var(--line2);
}

.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;
}

@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__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(--vis);
}

.login-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.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.16em;
}

.login-steps li {
    padding: 12px 0;
    box-shadow: inset 0 2px 0 var(--line2);
    color: var(--ink3);
}

.login-steps li[aria-current="step"] {
    box-shadow: inset 0 2px 0 var(--ink);
    color: var(--ink);
}

.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.2em;
}

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

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

.login-form__email {
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: inset 0 -1px 0 var(--line2);
}

.login-form input {
    min-width: 0;
    height: 52px;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    color: var(--ink);
    font-size: 17px;
}

.login-form__email input {
    flex: 1;
}

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

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

.login-form__code input {
    height: 60px;
    box-shadow: inset 0 -1px 0 var(--line2);
    font: 500 28px/1 var(--mono);
    letter-spacing: 0.5em;
    text-transform: uppercase;
}

.login-form label.has-error .login-form__email,
.login-form label.has-error > input {
    box-shadow: inset 0 -2px 0 var(--ink);
}

.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(--vis);
    content: "";
}

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

.login-form__back {
    align-self: flex-start;
    padding: 4px 0;
    background: none;
    box-shadow: inset 0 -1px 0 currentColor;
    color: var(--ink2);
    font-size: 13px;
    cursor: pointer;
}

.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.04em;
}

.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 {
        min-height: auto;
        padding-top: 128px;
    }

    .document-visual__image {
        max-height: 520px;
        object-fit: contain;
    }

    .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;
    }

    .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: 48px;
    }

    .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;
    }

    .login-form__email {
        align-items: stretch;
        flex-direction: column;
        box-shadow: none;
    }

    .login-form__email input {
        box-shadow: inset 0 -1px 0 var(--line2);
    }

    .login-form label.has-error .login-form__email {
        box-shadow: none;
    }

    .login-form label.has-error .login-form__email input {
        box-shadow: inset 0 -2px 0 var(--ink);
    }

    .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-swipe="true"] .home-latest {
    height: auto;
}

.home[data-swipe="true"] .home-hero__progress {
    top: auto;
    right: clamp(16px, 3.4vw, 48px);
    bottom: 22px;
    left: clamp(16px, 3.4vw, 48px);
    display: block;
    transform: none;
}

.home[data-swipe="true"] .home-hero__progress > i {
    display: block;
    width: 100%;
    height: 1px;
    background: var(--line2);
}

.home[data-swipe="true"] .home-hero__progress > i b {
    display: block;
    width: 0;
    height: 1px;
    background: var(--ink);
}

.home[data-swipe="true"] .home-hero__progress ol {
    display: none;
}

.home[data-swipe="true"] .home-latest__sticky {
    position: relative;
    top: auto;
    height: auto;
    min-height: 0;
    padding: clamp(56px, 9vw, 96px) 0;
}

.home[data-swipe="true"] .home-latest__track {
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    padding: 0 max(16px, calc((100vw - min(664px, calc(100vw - 72px))) / 2));
    scroll-padding-inline: max(16px, calc((100vw - min(664px, calc(100vw - 72px))) / 2));
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    will-change: auto;
    scrollbar-width: none;
}

.home[data-swipe="true"] .home-latest__track::-webkit-scrollbar {
    display: none;
}

.home[data-swipe="true"] .home-latest-card {
    width: min(664px, calc(100vw - 72px));
    padding: 0 14px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.home[data-swipe="true"] .home-latest-card > :not(img) {
    opacity: 0.24;
    transition: opacity 0.3s;
}

.home[data-swipe="true"] .home-latest-card.is-fully-visible > :not(img) {
    opacity: 1;
}

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

.home[data-flat="true"] .home-hero__sticky,
.home[data-flat="true"] .home-latest__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-latest__track {
    display: grid;
    overflow: visible;
    width: 100%;
    padding: 0 clamp(16px, 3.4vw, 48px);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 44px 24px;
    scroll-snap-type: none;
}

.home[data-flat="true"] .home-latest-card {
    width: auto;
    padding: 0;
    box-shadow: none;
}

.home[data-flat="true"] .home-latest-card > :not(img) {
    opacity: 1;
}

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

@media (max-width: 819px) {
    :root {
        --mobile-header-height: 64px;
        --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-mobile-search {
        height: 58px;
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        padding-left: max(16px, 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-comment header button,
    .site-comment header > 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) {
        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__copy {
        top: 88px;
        height: calc(100svh - 112px);
        justify-content: flex-start;
        transform: translateX(-50%);
    }

    .home-hero__brand {
        flex: 0 0 auto;
    }

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

    .home-hero__search {
        display: none;
    }

    .home-hero__actions {
        width: 100%;
        margin-top: auto;
        flex-wrap: nowrap;
    }

    .home-hero__actions .site-button {
        flex: 1 1 0;
        min-width: 0;
        height: 54px;
        padding: 0 12px;
        font-size: 13.5px;
        letter-spacing: 0.04em;
    }

    .home-hero__promise {
        right: 16px;
        bottom: 92px;
        left: 16px;
        width: auto;
        max-height: min(26svh, 190px);
        gap: 8px;
        padding: 12px 14px;
    }

    .home-hero__promise p {
        font-size: 13.5px;
        line-height: 1.55;
    }

    .home-hero__promise p:last-child,
    .home-hero__hover,
    .home-hero__progress ol {
        display: none;
    }

    .home-hero__progress {
        top: auto;
        right: 16px;
        bottom: calc(4px + env(safe-area-inset-bottom, 0px));
        left: 16px;
        display: block;
        transform: none;
    }

    .home-hero__progress i {
        display: block;
        width: 100%;
        height: 1px;
        background: var(--line2);
    }

    .home-hero__progress i b {
        display: block;
        width: 0;
        height: 1px;
        background: var(--ink);
    }

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

    .home-stats-glass {
        background: rgba(0, 0, 0, 0.42);
    }

    :root[data-theme="light"] .home-stats-glass {
        background: rgba(255, 255, 255, 0.74);
    }

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

    .home-stats__intro p {
        display: block;
        font-size: 15px;
    }

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

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

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

    .home-latest__sticky {
        gap: 20px;
    }

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

    .home[data-swipe="true"] .home-latest__track {
        padding-inline: 36px;
        scroll-padding-inline: 36px;
    }

    .home[data-swipe="true"] .home-latest-card {
        width: calc(100vw - 72px);
    }

    .home-latest-card > strong {
        font-size: 19px;
    }

    .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");
        object-position: 50% 60%;
    }

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

    .home-notices {
        padding: 72px 16px 64px;
    }

    .home-global-notice__summary {
        align-items: flex-start;
    }

    .home-global-notice__summary button:first-child,
    .home-global-notice__summary button:first-child > span {
        min-width: 0;
    }

    .home-global-notice__summary button:first-child > span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-global-notice__body {
        padding-left: 0;
    }

    .home-notices__list > a {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 6px 12px;
        padding: 20px 0;
    }

    .home-notices__list > a > span {
        grid-row: 1 / span 2;
        flex-basis: auto;
    }

    .home-notices__list > a > strong,
    .notice-row h2 {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .home-notices__list > a > p {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: var(--ink2);
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

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

    .home-join__visual {
        min-height: 58svh;
    }

    .home-join__visual img {
        content: url("/assets/images/site-v10/I-70-d-v.webp");
        object-fit: cover;
    }

    :root[data-theme="light"] .home-join__visual {
        margin: 8px;
    }

    .home-join__copy {
        padding: 36px 16px 64px;
    }

    .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,
    .blog-detail-hero__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 > *,
    .blog-detail-hero__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;
    }

    .blog-detail-page {
        padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    }

    .blog-detail-hero__copy > div:first-child > p {
        display: -webkit-box;
        overflow: hidden;
        text-overflow: initial;
        white-space: normal;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    /* 手机上的落点走整页滚动（同成员详情页）：一屏高的页面里再套一层滚动区，苹果手机上常常滑不动 */
    .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-page__backdrop,
    .wormhole-page.is-expanded .wormhole-page__door {
        filter: blur(14px);
        transition: filter 0.6s;
    }

    .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 var(--line2);
        color: var(--ink);
    }

    .wormhole-result__message {
        overflow: visible;
        -webkit-line-clamp: unset;
    }

    .roster-page {
        padding-top: 96px;
    }

    .roster-legend > div {
        grid-template-columns: minmax(0, 1fr);
    }

    .roster-legend summary {
        display: flex;
        align-items: center;
        min-height: 44px;
        color: var(--ink2);
        cursor: pointer;
        font-size: 14px;
        list-style: none;
        box-shadow: inset 0 -1px 0 var(--line2);
    }

    .roster-legend summary::after {
        margin-left: auto;
        content: "+";
        font: 16px/1 var(--mono);
    }

    .roster-legend[open] summary::after {
        content: "−";
    }

    /* 手机上题材全部摆出来、一次点选（DD 2026-10-03：横滑在手机上找不到后面的题材）；三列放得下「图标 + 两字 + 人数」 */
    .roster-filters__categories {
        display: grid;
        flex-basis: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .roster-filters__categories a {
        min-width: 0;
        min-height: 44px;
        gap: 6px;
        padding: 0 6px;
        box-shadow: inset 0 -1px 0 var(--line), inset 0 -2px 0 transparent;
        letter-spacing: 0.02em;
        white-space: nowrap;
    }

    .roster-filters__categories a.is-active {
        box-shadow: inset 0 -2px 0 currentColor;
    }

    /* 关于页维护者：手机上一人一行横排（头像 · 名字与分工 · 网址），五个人不再占一屏多（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;
    }

    .roster-filters__year select {
        font-size: 16px;
    }

    /* 手机上成员列表两列，一行一个太占屏（DD 2026-10-03）；已离开用自己的多列规则，不受这条影响 */
    .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__badge {
        /* 手机两列窄卡：徽章按 PC 比例(约卡宽 20%)等比缩小，够看清数字即可，不再压住截图（DD 2026-10-03） */
        height: 32px;
        top: 7px;
        left: 7px;
    }

    .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;
    }

    .login-form__email {
        align-items: center;
        flex-direction: row;
        box-shadow: inset 0 -1px 0 var(--line2);
    }

    .login-form__email input {
        min-width: 0;
        box-shadow: none;
    }

    .login-form__email button {
        flex: 0 0 auto;
        width: auto;
        min-height: 44px;
    }

    .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: 0;
}

.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: rgba(0, 0, 0, 0.42);
    box-shadow: inset 0 0 0 1px rgba(237, 234, 227, 0.14);
}

.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.04em;
    text-align: center;
    text-shadow: 0 0 20px color-mix(in srgb, var(--vis) 55%, transparent);
}

.wormhole-result__countdown span {
    color: #cfcbc2;
    font-size: 13.5px;
    line-height: 1.4;
}

@media (max-width: 720px) {
    .wormhole-result__countdown b {
        font-size: 40px;
    }
}