/*! LENS_0 · 深青（lens0 v1.0.0）
 *  由 lynux ThemeTool 按 theme.json 拼装，别手改这个文件：改 css/ 下的源文件后重新生成。
 */
/* ===== css/base.css ===== */
/* lens0 · 基础样式（重置 + LENS_0 调色板 + 外壳高度）
 *
 * 移植自 lynuxbak/public/assets/css/base.css（那一份又移植自 Hermes 0.14 的 LENS_0）。
 * 移植时的两处改动：
 *   1) 字体 token 挪到 fonts.css（主题自带 woff2，不再回落到系统栈）；
 *   2) url() 一律写成相对路径（../fonts、../img）——主题打包后的整份 CSS 放在
 *      本目录（css/theme.css），相对路径与源文件同一层，不必重写。
 *
 * 调色关系（LENS_0 的数学定义）：
 *   C_bg  = #041c1c 深青底 / C_mid = #ffe6cb 奶油字 / C_glow = rgba(255,189,56,.35) 暖橙光
 *   card = color-mix(C_mid 4%, C_bg) · border = color-mix(C_mid 15%, transparent)
 */

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

:root,
:root[data-theme="dark"] {
    /* 告诉浏览器「这一页是深色」：表单控件 / 滚动条 / 自动填充底色都跟着走 */
    color-scheme: dark;

    /* 画布 */
    --color-bg:            #041c1c;
    --color-bg-subtle:    color-mix(in srgb, #ffe6cb 8%,  #041c1c);
    --color-bg-elevated:  color-mix(in srgb, #ffe6cb 4%,  #041c1c);

    /* 文本 */
    --color-text:         #ffe6cb;
    --color-text-subtle:  color-mix(in srgb, #ffe6cb 55%, transparent);

    /* 链接与点缀 */
    --color-link:          #ffe6cb;
    --color-link-hover:    #ffd49a;
    --color-accent:        color-mix(in srgb, #ffe6cb 10%, #041c1c);

    /* 边框 */
    --color-border:       color-mix(in srgb, #ffe6cb 15%, transparent);
    --color-code-bg:      color-mix(in srgb, #ffe6cb 6%,  #041c1c);

    /* shadcn 兼容 token */
    --color-card:               color-mix(in srgb, #ffe6cb 4%, #041c1c);
    --color-card-foreground:    #ffe6cb;
    --color-muted:              color-mix(in srgb, #ffe6cb 8%, #041c1c);
    --color-muted-foreground:   color-mix(in srgb, #ffe6cb 55%, transparent);
    --color-ring:               #ffe6cb;
    --color-input:              color-mix(in srgb, #ffe6cb 15%, transparent);

    /* 语义色 */
    --color-destructive:  #fb2c36;
    --color-success:      #4ade80;
    --color-warning:      #ffbd38;
    --color-text-primary:   var(--color-text);
    --color-text-secondary: color-mix(in srgb, #ffe6cb 80%, transparent);
    --color-text-tertiary:  color-mix(in srgb, #ffe6cb 55%, transparent);

    /* Backdrop 专属（噪点透明度倍数） */
    --warm-glow:          rgba(255, 189, 56, 0.35);
    --noise-opacity-mul:  1;

    --container-max: 720px;
    --container-shell: min(1100px, calc(100% - 40px));
    --radius: 6px;

    --surface-card: color-mix(in srgb, var(--color-bg-elevated) 55%, transparent);
    --surface-card-border: color-mix(in srgb, var(--color-text) 12%, transparent);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
}

/* 外壳（app shell）：视口高度锁死、整页不滚，滚动权交给 .site-main。
 * 效果 = 页眉钉顶、页脚钉底、中部上下滚。与 lynuxbak 一致；打印时还原成文档流。 */
html {
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;

    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

a { color: var(--color-link); text-decoration: none; }
a:hover { color: var(--color-link-hover); text-decoration: underline; }

code, pre {
    font-family: var(--font-mono);
    background: var(--color-code-bg);
    border-radius: 4px;
    color: var(--color-text);
}

code { padding: 0.125rem 0.375rem; font-size: 0.875em; }
pre { padding: var(--space-4); overflow-x: auto; }
pre code { background: transparent; padding: 0; }

img { max-width: 100%; }

/* ===== css/fonts.css ===== */
/* lens0 · 字体（7 个 woff2 / 5 个字体族）
 *
 * 移植自 lynuxbak/public/assets/css/fonts.css（原文件指向 /assets/fonts/）。
 * 这里改成相对路径 ../fonts/：主题打包后的整份 CSS 落在同级目录 css/theme.css，
 * 相对路径不变，所以源文件与产物用同一份 url()。
 *
 *   Collapse         400/700  正文
 *   Rules Compressed 400/600  标签、徽章、h3
 *   Rules Expanded   400/700  标题、h1/h2
 *   Mondwest         400      元信息、导航、页脚（大写 + 字间距）
 */

@font-face {
    font-family: 'Collapse';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Collapse-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Collapse';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Collapse-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Rules Compressed';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/RulesCompressed-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Rules Compressed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/RulesCompressed-Medium.woff2') format('woff2');
}

@font-face {
    font-family: 'Rules Expanded';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/RulesExpanded-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Rules Expanded';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/RulesExpanded-Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Mondwest';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Mondwest-Regular.woff2') format('woff2');
}

/* 字体角色 token：中文走系统 CJK 栈兜底（woff2 里没有汉字） */
:root,
:root[data-theme="dark"] {
    --font-sans: 'Collapse', -apple-system, BlinkMacSystemFont, "PingFang SC",
                 "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --font-rules-compressed: 'Rules Compressed', var(--font-sans);
    --font-rules-expanded: 'Rules Expanded', var(--font-sans);
    --font-mondwest: 'Mondwest', var(--font-sans);
}

/* ===== css/backdrop.css ===== */
/* lens0 · 三层叠加背景（移植自 lynuxbak/public/assets/css/backdrop.css）
 *
 *   z=0  body 背景 = --color-bg
 *   z=1  .bg-filler  反相纹理 3.3%（difference）
 *   z=2  .bg-glow    左上→右下暖橙径向光（lighten）
 *   z=3  .bg-noise   SVG fractalNoise 噪点（color-dodge）
 *
 * 主页面的所有内容（.site-header/.site-main/.site-footer）通过 z-index:10 浮在上面。
 * 三层都写在同一份 CSS 里：主题换掉时这几层的颜色/纹理跟着换，标记不用动。
 */

/* 三层同号显式分层（1/2/3），与后台 console.css 的叠法一致：
   谁在上不靠 DOM 顺序，靠 z-index 说清楚。 */
.bg-filler, .bg-glow, .bg-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.bg-filler { z-index: 1; }
.bg-glow   { z-index: 2; }
.bg-noise  { z-index: 3; }

.bg-filler {
    background-image: url('../img/filler-bg0.webp');
    background-size: cover;
    background-position: top left;
    background-repeat: no-repeat;
    filter: invert(1);
    opacity: 0.033;
    mix-blend-mode: difference;
}

.bg-glow {
    background: radial-gradient(ellipse at 0% 0%, transparent 60%, var(--warm-glow) 100%);
    opacity: 0.22;
    mix-blend-mode: lighten;
}

.bg-noise {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' fill='%23eaeaea' filter='url(%23n)' opacity='0.6'/></svg>");
    background-size: 512px 512px;
    opacity: calc(0.55 * var(--noise-opacity-mul, 1));
    mix-blend-mode: color-dodge;
}

/* 可访问性：低运动偏好 → 关掉纹理层 */
@media (prefers-reduced-motion: reduce) {
    .bg-noise { display: none; }
    .bg-filler { opacity: 0; }
}

.site-header,
.site-footer,
.site-main {
    position: relative;
    z-index: 10;
}

:root:not([data-theme="light"]) body .site-header {
    background: color-mix(in srgb, var(--color-bg) 88%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ===== css/layout.css ===== */
/* lens0 · 布局（外壳三段 + 容器）
 * 移植自 lynuxbak/public/assets/css/layout.css，只保留站点通用的部分：
 * 首页两栏版式（.container:has(.home-hero)）属于那一版的首页，本站首页是决策页，未移植。
 */

.container {
    max-width: var(--container-shell);
    margin: 0 auto;
    padding: 0 var(--space-4);
    width: 100%;
}

.site-header {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    flex: 0 0 auto;
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: nowrap;
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.site-brand:hover { text-decoration: none; }

.site-brand__logo {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
}

.site-title {
    font-family: var(--font-rules-expanded);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
}

.site-nav {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-header__spacer { flex: 1 1 auto; }

/* 当前用户：头像字 + 名字 / 状态。匿名时整个块是登录入口。 */
.site-user {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    padding: 4px 9px 4px 4px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg-elevated) 70%, transparent);
    text-decoration: none;
    color: var(--color-text);
}

.site-user:hover { text-decoration: none; border-color: color-mix(in srgb, var(--color-text) 30%, transparent); }

.site-user__avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--font-rules-expanded);
    font-size: 12px;
    color: var(--on-accent, #1a1206);
    background: linear-gradient(135deg, var(--color-warning, #ffbd38), var(--color-text));
}

.site-user__meta { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.site-user__meta b { font-size: 11.5px; font-weight: 600; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-user__meta small { font-family: var(--font-mondwest); font-size: 8.5px; letter-spacing: .12em; color: var(--color-text-tertiary); text-transform: uppercase; }
.site-user--guest .site-user__avatar { background: color-mix(in srgb, var(--color-text) 10%, transparent); color: var(--color-text-secondary); }

.site-admin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: var(--radius);
    border: 1px solid color-mix(in srgb, var(--color-warning, #ffbd38) 38%, transparent);
    background: color-mix(in srgb, var(--color-warning, #ffbd38) 8%, transparent);
    font-family: var(--font-mondwest);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-warning, #ffbd38);
    white-space: nowrap;
}

.site-admin:hover { text-decoration: none; background: color-mix(in srgb, var(--color-warning, #ffbd38) 16%, transparent); color: var(--color-text); }

.site-nav a {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.site-nav a:hover { color: var(--color-link); text-decoration: none; }

/* 滚动区：全宽滚动（滚动条贴窗口右缘），限宽交给内层 .container */
.site-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: var(--space-8) 0 var(--space-12);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-6) 0;
    flex: 0 0 auto;
    color: var(--color-text-tertiary);
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-align: center;
}

/* 页面标题区（列表页 / 搜索结果页共用） */
.page-header {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--space-6);
    margin-bottom: var(--space-8);
}

.page-title {
    font-family: var(--font-rules-expanded);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
}

.page-sub {
    margin-top: var(--space-2);
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

@media (max-width: 820px) {
    .site-header .container { flex-wrap: wrap; }
    .site-header__spacer { display: none; }
    .site-nav { order: 3; width: 100%; gap: var(--space-4); }
    .site-user { margin-left: auto; }
    .site-user__meta small { display: none; }
    .site-admin { padding: 6px 9px; }
}

@media (max-width: 520px) {
    .site-header { padding: var(--space-3) 0; }
    .site-user__meta b { max-width: 64px; }
    .site-user { padding: 3px 8px 3px 3px; }
    .site-admin { font-size: 9px; padding: 6px 8px; }
}

/* 打印：固定外壳会把超出首屏的内容裁掉，还原成普通文档流 */
@media print {
    html,
    body {
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
    }
    .site-header,
    .site-footer { position: static; flex: none; }
    .site-main { overflow: visible; height: auto; padding: 0; }
    .bg-filler,
    .bg-glow,
    .bg-noise { display: none; }
}

/* ===== css/components.css ===== */
/* lens0 · 组件（移植自 lynuxbak/public/assets/css/components.css）
 * 对应 Hermes 0.14 的 shadcn 组件：Card / Badge / Label / Input / Separator。
 * 本站用到的是 Card（首页决策卡）与 Badge（标签），其余保留给后续页面复用。
 */

.card {
    background: color-mix(in srgb, var(--color-card) 80%, transparent);
    border: 1px solid var(--color-border);
    color: var(--color-card-foreground);
    border-radius: var(--radius);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    /* 0.14 切角（10px 等腰直角） */
    clip-path: polygon(
        10px 0, 100% 0,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        0 100%, 0 10px
    );
}

.card-header {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-family: var(--font-rules-expanded);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-card-foreground);
    margin: 0;
    mix-blend-mode: plus-lighter;
}

.card-description {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    color: var(--color-muted-foreground);
    margin: 0;
}

.card-content { padding: 1rem; }

.badge {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-rules-compressed);
    font-size: 0.75rem;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    white-space: nowrap;
}

.badge--default {
    background: color-mix(in srgb, var(--color-card-foreground) 7.5%, transparent);
    color: var(--color-card-foreground);
    border: 1px solid color-mix(in srgb, var(--color-card-foreground) 30%, transparent);
}

.badge--outline {
    background: transparent;
    color: color-mix(in srgb, var(--color-card-foreground) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-card-foreground) 30%, transparent);
}

.badge--secondary {
    background: color-mix(in srgb, var(--color-card-foreground) 8%, transparent);
    color: var(--color-card-foreground);
    border: 1px solid color-mix(in srgb, var(--color-card-foreground) 15%, transparent);
}

.badge--success {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
    border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
}

.badge--warning {
    background: color-mix(in srgb, var(--color-warning) 15%, transparent);
    color: var(--color-warning);
    border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent);
}

.badge--destructive {
    background: color-mix(in srgb, var(--color-destructive) 15%, transparent);
    color: var(--color-destructive);
    border: 1px solid color-mix(in srgb, var(--color-destructive) 30%, transparent);
}

.label {
    display: block;
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--color-muted-foreground);
}

.input {
    display: flex;
    height: 2.25rem;
    width: 100%;
    padding: 0.25rem 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 40%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.input::placeholder { color: var(--color-muted-foreground); }

.input:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--color-text) 25%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 30%, transparent);
}

.separator { flex-shrink: 0; background: var(--color-border); }
.separator--horizontal { height: 1px; width: 100%; }
.separator--vertical { height: 100%; width: 1px; }

/* ===== css/article.css ===== */
/* lens0 · 文章正文（移植自 lynuxbak/public/assets/css/article.css）
 *
 * 字体分工（0.14 的 typography 约定）：
 *   .article-header h1 / .article-body h2 → Rules Expanded 700（display）
 *   .article-meta                          → Mondwest + 大写 + 字间距（label）
 *   .article-body h3                       → Rules Compressed（label）
 *   正文                                    → Collapse（base.css 的 --font-sans）
 *
 * 与 lynuxbak 的差别：来源块用 .src（站内既有的类名，HtmlGuardTool 也认这个），
 * 页脚链接用 .article-footer。
 */

.article { max-width: var(--container-max); margin: 0 auto; }

.article-header {
    margin-bottom: var(--space-8);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.article-header h1 {
    font-family: var(--font-rules-expanded);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.03em;
    margin-bottom: var(--space-3);
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
}

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

.article-meta > * {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.article-meta a { color: var(--color-text-secondary); text-decoration: none; }
.article-meta a:hover { color: var(--color-text); text-decoration: underline; }

.article-meta .tag,
.article-meta .date {
    background: var(--color-muted);
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
}

/* 来源块：站外导入的文章必须保留（HtmlGuardTool 校验 class="src"） */
.src {
    background: color-mix(in srgb, var(--color-card) 50%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: var(--space-4) var(--space-6);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius);
    margin-bottom: var(--space-6);
    color: var(--color-text-secondary);
    font-family: var(--font-mondwest);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    line-height: 1.75;
}

.src b { color: var(--color-text); }
.src a { color: var(--color-text); word-break: break-all; }

.article-body {
    line-height: 1.85;
    font-size: 1rem;
    color: var(--color-text);
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    font-weight: 700;
    color: var(--color-text);
}

.article-body h2 {
    font-family: var(--font-rules-expanded);
    font-size: 1.5rem;
    letter-spacing: 0.03em;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
}

.article-body h3 {
    font-family: var(--font-rules-compressed);
    font-size: 1.05rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.article-body p { margin-bottom: var(--space-4); }

.article-body ul,
.article-body ol { margin-bottom: var(--space-4); padding-left: var(--space-6); }
.article-body li { margin-bottom: var(--space-2); }

.article-body blockquote {
    border-left: 3px solid var(--color-border);
    padding: var(--space-2) var(--space-4);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    background: color-mix(in srgb, var(--color-muted) 40%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
    font-size: 0.95rem;
}

.article-body th,
.article-body td {
    border: 1px solid var(--color-border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

/* 列宽按"角色"固定，而不是让浏览器按内容博弈：
   四列文档表（命令/语法/参数/功能）在 auto 布局下会把"参数"挤成几十像素的一条，
   行高被撑到几百像素。前两列给定比例，其余列平分剩余空间；两列表自然成为 16/84。 */
.article-body table { table-layout: fixed; }
.article-body th:first-child,
.article-body td:first-child { width: 16%; }
.article-body th:nth-child(2),
.article-body td:nth-child(2) { width: 26%; }

/* 三列命令索引：类别/命令列加宽，避免命令名在 ".php" 中间断行。
   仅命中恰好三列的文章表，不影响四列命令表与两列约定表。 */
.article-body table:has(> thead > tr > th:nth-child(3):last-child) { font-size: 0.9rem; }
.article-body table:has(> thead > tr > th:nth-child(3):last-child) th:first-child,
.article-body table:has(> thead > tr > th:nth-child(3):last-child) td:first-child { width: 19%; }
.article-body table:has(> thead > tr > th:nth-child(3):last-child) th:nth-child(2),
.article-body table:has(> thead > tr > th:nth-child(3):last-child) td:nth-child(2) { width: 33%; }
.article-body table:has(> thead > tr > th:nth-child(3):last-child) td:nth-child(2) code { font-size: 0.84em; }

/* 表格外层滚动容器：窄屏整表横向滚动，而不是把某列挤成一条或撑破版面。
   容器由 ArticleRenderTool 在渲染时包上（.table-scroll），此处只负责滚动。 */
.article-body .table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4);
}
.article-body .table-scroll table { margin-bottom: 0; }
@media (max-width: 720px) {
    .article-body .table-scroll table { min-width: 680px; }
}

.article-body th {
    background: color-mix(in srgb, var(--color-muted) 60%, transparent);
    font-family: var(--font-rules-compressed);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 11px;
}

.article-body img { border-radius: var(--radius); }
.article-body hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }

.article-footer {
    margin-top: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: 0.875rem;
}

.article-footer a { color: var(--color-link); font-weight: 500; }

/* Markdown 方言：图片 / 视频 / 图集（结构由 MarkdownTool 产出） */
.article-body figure.media { margin: var(--space-6) 0; }
.article-body figure.media img,
.article-body figure.media video {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}
.article-body figcaption {
    margin-top: var(--space-2);
    font-size: 0.875rem;
    text-align: center;
    opacity: 0.7;
}
.article-body .gallery { display: grid; gap: var(--space-2); margin: var(--space-6) 0; }
.article-body .gallery-1 { grid-template-columns: 1fr; }
.article-body .gallery-2 { grid-template-columns: repeat(2, 1fr); }
.article-body .gallery-3 { grid-template-columns: repeat(3, 1fr); }
.article-body .gallery-4 { grid-template-columns: repeat(4, 1fr); }
.article-body .gallery figure { margin: 0; }
.article-body .gallery img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 4px;
}

@media (max-width: 640px) {
    .article-header h1 { font-size: 1.6rem; }
    .article-body .gallery-3,
    .article-body .gallery-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ===== css/list.css ===== */
/* lens0 · 文章列表（/posts/index.html）
 * DOM 契约：ul.post-list > li.post-item > a.post-title + div.post-date + p.post-summary
 */

.post-list { list-style: none; margin: 0; padding: 0; }

.post-item {
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.post-item:last-child { border-bottom: none; }

.post-title {
    font-family: var(--font-rules-expanded);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
    text-decoration: none;
    mix-blend-mode: plus-lighter;
}

.post-title:hover { color: var(--color-link-hover); text-decoration: none; }

.post-date {
    margin-top: var(--space-2);
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.post-summary {
    margin-top: var(--space-2);
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.post-empty {
    padding: var(--space-8) 0;
    color: var(--color-text-tertiary);
    font-family: var(--font-mondwest);
    letter-spacing: 0.1em;
}

/* ===== css/search.css ===== */
/* lens0 · 搜索页（/search.php）与站内阅读页（/read.php）共用的小件
 *
 * DOM 契约（两页一致）：
 *   .search-form > .search-input + .search-btn
 *   .tabs > .tab(.on)
 *   .result-meta / .note / .empty / .err
 *   .hit > .hit-title + .hit-badge + .hit-url + .hit-snippet
 *   .hit-media > .hit-thumb + 正文
 */

.search-form {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.search-input {
    flex: 1;
    height: 2.75rem;
    padding: 0 var(--space-4);
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 55%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    outline: none;
}

.search-input:focus {
    border-color: color-mix(in srgb, var(--color-text) 30%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-text) 22%, transparent);
}

.search-btn {
    height: 2.75rem;
    padding: 0 var(--space-6);
    font-family: var(--font-rules-compressed);
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-bg);
    background: var(--color-text);
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
}

.search-btn:hover { background: var(--color-link-hover); }

.tabs {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-6);
}

.tab {
    padding: 0.4rem 0.8rem;
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    text-decoration: none;
}

.tab:hover { color: var(--color-link-hover); text-decoration: none; }

.tab.on {
    color: var(--color-bg);
    background: var(--color-text);
    border-color: transparent;
}

.result-meta {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-6);
    font-variant-numeric: tabular-nums;
}

.hit {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-card) 70%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: var(--space-4) var(--space-6);
    margin-bottom: var(--space-3);
}

.hit-title {
    font-family: var(--font-rules-expanded);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
    text-decoration: none;
}

.hit-title:hover { color: var(--color-link-hover); text-decoration: none; }

.hit-badge {
    display: inline-block;
    margin-left: var(--space-2);
    padding: 0.1rem 0.5rem;
    font-family: var(--font-rules-compressed);
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    vertical-align: 2px;
    text-decoration: none;
}

.hit-url {
    display: block;
    margin: var(--space-1) 0 var(--space-2);
    font: 0.7rem var(--font-mono);
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hit-snippet {
    margin: 0;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.hit-media { display: flex; gap: var(--space-4); align-items: flex-start; }

.hit-thumb {
    flex: 0 0 96px;
    height: 66px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border);
    display: grid;
    place-items: center;
    color: var(--color-text-tertiary);
}

.hit-thumb img { width: 100%; height: 100%; object-fit: cover; }

mark {
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    color: var(--color-text);
    border-radius: 3px;
    padding: 0 2px;
}

.note {
    border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent);
    background: color-mix(in srgb, var(--color-warning) 7%, transparent);
    color: var(--color-warning);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-4);
    font-size: 0.8rem;
    margin-bottom: var(--space-4);
}

.empty {
    padding: var(--space-8) 0;
    color: var(--color-text-tertiary);
    font-size: 0.9rem;
    line-height: 1.9;
}

.err { color: var(--color-destructive); }

/* 站内阅读页顶部条 */
.read-top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-4);
}

.read-top a { color: var(--color-text-secondary); text-decoration: none; }
.read-top a:hover { color: var(--color-link-hover); }

/* ===== css/page.css ===== */
/* lens0 · 首页（准入决策页）专用
 *
 * 首页的 DOM 由 public/templates/page.html 固定，这里只负责把它画成 LENS_0 的样子：
 * 深青玻璃卡 + 奶油字 + Rules/Mondwest 的标签排印。卡片本体来自 components.css 的 .card。
 */

.home-canvas { max-width: 860px; margin: 0 auto; }

.home-hero {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.home-hero h1 {
    font-family: var(--font-rules-expanded);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
}

.home-hero .sub {
    font-family: var(--font-mondwest);
    font-size: 0.75rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.home-hero .spacer { flex: 1; }

.card + .card { margin-top: var(--space-4); }

.card h2,
.card .card-title {
    font-family: var(--font-rules-expanded);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
    mix-blend-mode: plus-lighter;
}

.card .card-content { padding: var(--space-4) var(--space-6); }

.row {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.cell .k {
    font-family: var(--font-mondwest);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-1);
}

.cell .v {
    font-family: var(--font-rules-expanded);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--color-text);
}

.arrow { color: var(--color-text-tertiary); font-size: 1.1rem; }

.action.ok { color: var(--color-success); }
.action.info { color: var(--color-text); }
.action.warn { color: var(--color-warning); }
.action.danger { color: var(--color-destructive); }

.meta-line {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-family: var(--font-mondwest);
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.meta-line b { color: var(--color-text); font-weight: 400; }

/* 后验分布表 */
table.post {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 0.78rem;
}

table.post td {
    padding: 0.25rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-border) 45%, transparent);
    vertical-align: middle;
}

table.post tr:last-child td { border-bottom: none; }

td.a { width: 130px; color: var(--color-text-secondary); }
tr.chosen td.a { color: var(--color-text); font-weight: 700; }
td.bar-cell span {
    display: block;
    height: 7px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-text) 22%, transparent);
    min-width: 2px;
}
tr.chosen td.bar-cell span { background: var(--color-warning); }
td.p { width: 56px; text-align: right; color: var(--color-text-tertiary); }

.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.chip {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-bg) 40%, transparent);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.35rem 0.7rem;
}

.chip:hover { border-color: var(--color-text); text-decoration: none; }
.chip.active { border-color: var(--color-warning); color: var(--color-warning); }

.hint {
    color: var(--color-text-tertiary);
    font-size: 0.75rem;
    margin-top: var(--space-3);
    line-height: 1.8;
}

.honest ul {
    margin: 0;
    padding-left: var(--space-4);
    color: var(--color-text-secondary);
    font-size: 0.85rem;
    line-height: 1.9;
}

.honest li { margin: 0.2rem 0; }
.honest a { color: var(--color-link); }

.degraded { color: var(--color-warning); font-size: 0.8rem; margin-top: var(--space-3); }

.raw {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-tertiary);
    font-size: 0.68rem;
    word-break: break-all;
    font-family: var(--font-mono);
    opacity: 0.7;
}

.badge.rule { color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 35%, transparent); }
.badge.neural { color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 35%, transparent); }

/* ===== css/home.css ===== */
/* lens0 · 前台首页（page-front）
 *
 * 结构：面包屑 → Hero（首屏主视觉）→ 重大事件轮播 → 最新文章方形卡片。
 * 外壳仍由 base.css 锁死：页眉/页脚固定，只有 .site-main 滚动。
 *
 * Hero 不是轮播，也不是导航：它是一屏之内说清“这是哪里、为什么值得看”的主视觉区。
 * 这里的 Hero 右侧把微 LLM 的决策链路画成轨道与终端读数，文案和数据都来自服务端。
 */

.page-front .site-main { padding: 22px 0 54px; }

/* ── 面包屑 ─────────────────────────────────────────────── */
.front-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-family: var(--font-mondwest);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}

.front-crumb a { color: var(--color-text-secondary); }
.front-crumb a:hover { color: var(--color-text); text-decoration: none; }
.front-crumb .sep { opacity: .45; }
.front-crumb [aria-current] { color: var(--color-warning, #ffbd38); }

/* ── Hero ──────────────────────────────────────────────── */
.front-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    gap: clamp(20px, 4vw, 52px);
    align-items: center;
    min-height: 430px;
    padding: clamp(26px, 4.6vw, 54px);
    margin: 0 0 34px;
    border: 1px solid var(--color-border);
    border-radius: 24px;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 8% 0%, color-mix(in srgb, var(--color-warning, #ffbd38) 17%, transparent), transparent 55%),
        radial-gradient(ellipse at 100% 100%, color-mix(in srgb, #4da3ff 12%, transparent), transparent 52%),
        linear-gradient(130deg, color-mix(in srgb, var(--color-text) 5%, var(--color-bg)), var(--color-bg) 58%);
    box-shadow: 0 30px 80px -50px color-mix(in srgb, var(--color-warning, #ffbd38) 45%, transparent);
}

.front-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 5%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 72% 45%, #000 12%, transparent 68%);
    opacity: .55;
}

.front-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -120px;
    top: -140px;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-warning, #ffbd38) 26%, transparent), transparent 68%);
    filter: blur(10px);
    pointer-events: none;
}

.hero-copy { position: relative; z-index: 2; min-width: 0; }

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 18px;
    padding: 5px 11px 5px 8px;
    border: 1px solid color-mix(in srgb, var(--color-warning, #ffbd38) 30%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-warning, #ffbd38) 7%, transparent);
    font-family: var(--font-mondwest);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--color-warning, #ffbd38);
}

.hero-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--color-success, #8fd08a); box-shadow: 0 0 10px var(--color-success, #8fd08a); animation: hero-pulse 1.9s infinite; }
@keyframes hero-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }

.hero-title {
    margin: 0 0 18px;
    font-family: var(--font-rules-expanded);
    font-size: clamp(2rem, 3.4vw, 3.15rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .015em;
    color: var(--color-text);
    mix-blend-mode: plus-lighter;
    text-wrap: balance;
}

.hero-title br { display: block; }

.hero-lead {
    max-width: 54ch;
    margin: 0 0 25px;
    color: var(--color-text-secondary);
    font-size: clamp(.94rem, 1.1vw, 1.03rem);
    line-height: 1.88;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 27px; }

.hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 19px;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: color-mix(in srgb, var(--color-text) 4%, transparent);
    color: var(--color-text);
    font-size: 13px;
    letter-spacing: .02em;
    transition: transform .16s ease, border-color .2s, background .2s, box-shadow .2s;
}
.hero-btn:hover { text-decoration: none; transform: translateY(-1px); border-color: color-mix(in srgb, var(--color-text) 32%, transparent); }
.hero-btn--primary { border-color: transparent; color: var(--on-accent, #1a1206); background: linear-gradient(115deg, var(--color-warning, #ffbd38), var(--color-text)); font-weight: 700; }
.hero-btn--primary:hover { box-shadow: 0 14px 36px -16px color-mix(in srgb, var(--color-warning, #ffbd38) 80%, transparent); }
.hero-btn .arr { transition: transform .18s ease; }
.hero-btn:hover .arr { transform: translateX(3px); }

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
}
.hero-stats > div { padding: 14px 14px 0 0; min-width: 0; }
.hero-stats > div + div { padding-left: 16px; border-left: 1px solid var(--color-border); }
.hero-stats dt { margin: 0 0 3px; font-family: var(--font-mondwest); font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--color-text-tertiary); white-space: nowrap; }
.hero-stats dd { margin: 0; font-family: var(--font-mono); font-size: clamp(1rem, 1.7vw, 1.36rem); font-weight: 600; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-stats dd small { font-size: 9.5px; font-weight: 400; color: var(--color-text-tertiary); }

/* Hero 右：微 LLM 轨道 */
.hero-visual {
    position: relative;
    z-index: 1;
    min-height: 372px;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.hero-orbit { position: relative; width: min(100%, 360px); aspect-ratio: 1; }
.hero-ring {
    position: absolute;
    inset: 50%;
    border: 1px solid color-mix(in srgb, var(--color-text) 16%, transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.hero-ring.r1 { width: 48%; height: 48%; border-style: dashed; border-color: color-mix(in srgb, var(--color-warning, #ffbd38) 48%, transparent); animation: orbit-spin 26s linear infinite; }
.hero-ring.r2 { width: 72%; height: 72%; border-color: color-mix(in srgb, var(--color-text) 20%, transparent); }
.hero-ring.r3 { width: 96%; height: 96%; border-color: color-mix(in srgb, var(--color-text) 10%, transparent); border-style: dashed; animation: orbit-spin 46s linear infinite reverse; }
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.hero-core {
    position: absolute;
    left: 50%; top: 50%;
    width: 116px; height: 116px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--color-text) 22%, transparent), color-mix(in srgb, var(--color-bg) 88%, transparent) 62%);
    border: 1px solid color-mix(in srgb, var(--color-warning, #ffbd38) 55%, transparent);
    box-shadow: 0 0 0 9px color-mix(in srgb, var(--color-warning, #ffbd38) 5%, transparent), 0 0 60px -8px color-mix(in srgb, var(--color-warning, #ffbd38) 55%, transparent), inset 0 0 35px color-mix(in srgb, var(--color-warning, #ffbd38) 18%, transparent);
}
.hero-core b { font-family: var(--font-rules-expanded); font-size: 43px; line-height: 1; color: var(--color-warning, #ffbd38); text-shadow: 0 0 22px color-mix(in srgb, var(--color-warning, #ffbd38) 65%, transparent); }
.hero-core span { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--color-success, #8fd08a); right: 14px; top: 18px; box-shadow: 0 0 12px var(--color-success, #8fd08a); }

.hero-node {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-bg) 82%, transparent);
    backdrop-filter: blur(5px);
    font-family: var(--font-mondwest);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
    white-space: nowrap;
}
.hero-node i { width: 4px; height: 4px; border-radius: 50%; background: var(--color-warning, #ffbd38); }
.hero-node.n1 { left: 3%; top: 16%; }
.hero-node.n2 { right: 2%; top: 25%; }
.hero-node.n3 { right: 5%; bottom: 16%; }
.hero-node.n4 { left: 0; bottom: 39%; }

.hero-terminal {
    position: absolute;
    right: 53%; bottom: -12px;
    width: 218px;
    padding: 9px 11px;
    border: 1px solid color-mix(in srgb, var(--color-text) 17%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-bg) 84%, transparent);
    backdrop-filter: blur(8px);
    box-shadow: 0 16px 44px -24px #000;
    font-family: var(--font-mono);
    font-size: 9px;
    line-height: 1.75;
    color: var(--color-text-secondary);
}
.hero-terminal .ln { display: flex; justify-content: space-between; gap: 8px; }
.hero-terminal .ln b { font-weight: 400; color: var(--color-text-tertiary); }
.hero-terminal .ok { color: var(--color-success, #8fd08a); }
.hero-terminal .warn { color: var(--color-warning, #ffbd38); }
.hero-terminal .cursor { display: inline-block; width: 5px; height: 9px; vertical-align: -1px; background: var(--color-warning, #ffbd38); animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── 区块标题 ───────────────────────────────────────────── */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 15px;
    flex-wrap: wrap;
}
.section-head h2 {
    margin: 0;
    font-family: var(--font-rules-expanded);
    font-size: clamp(1.25rem, 2vw, 1.62rem);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--color-text);
}
.section-head h2 span { color: var(--color-warning, #ffbd38); }
.section-head p { margin: 0; font-family: var(--font-mondwest); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-tertiary); }
.section-head .more { font-family: var(--font-mondwest); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-secondary); }
.section-head .more:hover { color: var(--color-warning, #ffbd38); text-decoration: none; }

/* ── 重大事件轮播 ───────────────────────────────────────── */
.home-carousel { margin: 0 0 38px; }

.news-carousel {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    overflow: hidden;
    background: var(--color-bg-elevated);
    box-shadow: 0 26px 70px -52px #000;
}

.carousel-track {
    display: flex;
    transition: transform .65s cubic-bezier(.22, .8, .24, 1);
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    min-height: 360px;
    overflow: hidden;
    isolation: isolate;
}

.carousel-link { display: block; min-height: 360px; color: inherit; text-decoration: none; }
.carousel-link:hover { text-decoration: none; }

.carousel-media { position: absolute; inset: 0; z-index: 0; }
.carousel-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) contrast(1.04) brightness(.58);
    transform: scale(1.015);
    transition: transform 7s ease, filter .5s ease;
}
.carousel-slide.is-active .carousel-media img { transform: scale(1.055); }
.carousel-link:hover .carousel-media img { filter: saturate(.95) contrast(1.05) brightness(.66); }

.carousel-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, color-mix(in srgb, #031414 90%, transparent) 0%, color-mix(in srgb, #031414 58%, transparent) 48%, transparent 78%),
        linear-gradient(0deg, color-mix(in srgb, #031414 92%, transparent) 0%, transparent 58%);
}

.carousel-body {
    position: relative;
    z-index: 2;
    max-width: 660px;
    min-height: 360px;
    padding: clamp(28px, 5vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
}

.carousel-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 13px;
    padding: 4px 9px;
    border: 1px solid color-mix(in srgb, var(--color-warning, #ffbd38) 48%, transparent);
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-warning, #ffbd38) 12%, transparent);
    font-family: var(--font-mondwest);
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--color-warning, #ffbd38);
}
.carousel-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.carousel-title {
    margin: 0 0 10px;
    font-family: var(--font-rules-expanded);
    font-size: clamp(1.5rem, 3.5vw, 2.55rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: .02em;
    color: #fff4e6;
    text-shadow: 0 2px 26px rgba(0,0,0,.4);
    text-wrap: balance;
}

.carousel-summary {
    max-width: 58ch;
    margin: 0 0 16px;
    color: color-mix(in srgb, #ffe6cb 82%, transparent);
    font-size: 13.5px;
    line-height: 1.82;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.carousel-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-family: var(--font-mondwest);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: color-mix(in srgb, #ffe6cb 50%, transparent);
}
.carousel-meta .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
.carousel-meta .go { color: var(--color-warning, #ffbd38); }

.carousel-nav {
    position: absolute;
    z-index: 5;
    right: 22px;
    top: 22px;
    display: flex;
    gap: 8px;
}
.carousel-btn {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #fff 26%, transparent);
    background: color-mix(in srgb, #031414 52%, transparent);
    color: #ffe6cb;
    backdrop-filter: blur(7px);
    cursor: pointer;
    transition: background .18s, border-color .18s, transform .18s;
}
.carousel-btn:hover { background: color-mix(in srgb, var(--color-warning, #ffbd38) 22%, transparent); border-color: var(--color-warning, #ffbd38); transform: translateY(-1px); }
.carousel-btn:focus-visible { outline: 2px solid var(--color-warning, #ffbd38); outline-offset: 2px; }

.carousel-dots {
    position: absolute;
    z-index: 5;
    right: 24px;
    bottom: 24px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.carousel-dot {
    width: 22px; height: 3px;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, #ffe6cb 30%, transparent);
    padding: 0;
    cursor: pointer;
    transition: width .3s, background .3s;
}
.carousel-dot.is-on { width: 40px; background: var(--color-warning, #ffbd38); }
.carousel-dot:focus-visible { outline: 2px solid var(--color-warning, #ffbd38); outline-offset: 3px; }

.carousel-progress { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 2px; background: color-mix(in srgb, #fff 10%, transparent); }
.carousel-progress i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--color-warning, #ffbd38), var(--color-text)); }
.news-carousel.is-playing .carousel-progress i { animation: carousel-progress 6.4s linear forwards; }
@keyframes carousel-progress { from { width: 0; } to { width: 100%; } }

/* ── 最新文章：方形卡片 ─────────────────────────────────── */
.latest { margin: 0 0 8px; }

.story-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.story-card {
    position: relative;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border: 1px solid var(--color-border);
    border-radius: 17px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-text) 4%, var(--color-bg));
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.story-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--color-warning, #ffbd38) 38%, transparent); box-shadow: 0 26px 56px -38px color-mix(in srgb, var(--color-warning, #ffbd38) 55%, transparent); }

.story-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.story-link:hover { text-decoration: none; }

.story-thumb { position: relative; flex: 0 0 54%; overflow: hidden; background: var(--color-bg); }
.story-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.82) brightness(.86); transition: transform .6s ease, filter .3s ease; }
.story-card:hover .story-thumb img { transform: scale(1.045); filter: saturate(1) brightness(.94); }
.story-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--color-bg) 72%, transparent), transparent 52%); pointer-events: none; }

.story-index {
    position: absolute;
    left: 14px;
    top: 12px;
    z-index: 2;
    font-family: var(--font-mondwest);
    font-size: 9px;
    letter-spacing: .14em;
    color: color-mix(in srgb, #ffe6cb 75%, transparent);
    padding: 3px 7px;
    border: 1px solid color-mix(in srgb, #ffe6cb 24%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, #031414 40%, transparent);
    backdrop-filter: blur(4px);
}

.story-tag {
    position: absolute;
    right: 13px;
    top: 12px;
    z-index: 2;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mondwest);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-warning, #ffbd38);
}

.story-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 15px 17px 14px;
}

.story-date { font-family: var(--font-mondwest); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: 5px; }

.story-title {
    margin: 0 0 7px;
    font-family: var(--font-rules-expanded);
    font-size: clamp(.98rem, 1.25vw, 1.12rem);
    font-weight: 700;
    line-height: 1.36;
    letter-spacing: .015em;
    color: var(--color-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-summary {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 11.5px;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.story-foot {
    margin-top: auto;
    padding-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 9%, transparent);
    font-family: var(--font-mondwest);
    font-size: 8.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
}
.story-foot .read { color: var(--color-warning, #ffbd38); }

.story-empty {
    grid-column: 1 / -1;
    padding: 44px 20px;
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: 16px;
    color: var(--color-text-tertiary);
    font-family: var(--font-mondwest);
    letter-spacing: .12em;
}

/* ── 页脚补充 ───────────────────────────────────────────── */
.page-front .site-footer .container { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width: 980px) {
    .front-hero { grid-template-columns: 1fr; min-height: 0; }
    .hero-visual { min-height: 330px; order: 2; }
    .hero-terminal { right: auto; left: 50%; transform: translateX(-50%); bottom: -16px; }
    .story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .carousel-slide, .carousel-link, .carousel-body { min-height: 330px; }
}

@media (max-width: 680px) {
    .page-front .site-main { padding-top: 16px; }
    .front-hero { padding: 24px 20px 28px; border-radius: 18px; }
    .hero-title { font-size: 1.8rem; line-height: 1.16; }
    .hero-visual { min-height: 300px; }
    .hero-orbit { width: min(100%, 300px); }
    .hero-terminal { width: 196px; font-size: 8.5px; }
    .hero-stats > div { padding-top: 11px; }
    .hero-stats > div + div { padding-left: 10px; }
    .hero-stats dd { font-size: .98rem; }
    .story-grid { grid-template-columns: 1fr; }
    .story-card { aspect-ratio: 1 / 1; max-width: 430px; width: 100%; }
    .carousel-body { padding: 24px 20px 46px; min-height: 340px; }
    .carousel-summary { -webkit-line-clamp: 3; }
    .carousel-nav { right: 14px; top: 14px; }
    .carousel-dots { right: 16px; bottom: 17px; }
    .section-head { align-items: flex-start; flex-direction: column; gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-ring, .hero-pulse, .hero-terminal .cursor { animation: none; }
    .carousel-track { transition: none; }
    .carousel-slide.is-active .carousel-media img { transform: none; }
    .news-carousel.is-playing .carousel-progress i { animation: none; width: 100%; }
    .story-card, .hero-btn { transition: none; }
}

/* 无 JS / JS 未就绪：轨道横向可滚，不把其余新闻藏死 */
.news-carousel:not(.is-ready) .carousel-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.news-carousel:not(.is-ready) .carousel-slide { scroll-snap-align: start; }
.news-carousel:not(.is-ready) .carousel-nav,
.news-carousel:not(.is-ready) .carousel-dots,
.news-carousel:not(.is-ready) .carousel-progress { display: none; }