/* ============================================================
DEEP-SPACE BEACON · 深空信标
档案 · 孤寂 · 铅与铁 —— 一座从深空持续广播的沉重信标
尼采式的太阳奉献：在绝对的寒冷里，保留一丝被磨损的暖意。
============================================================ */
/* ---------- 1. 设计令牌 / Design Tokens ----------
理念：绝对的虚空黑 + 低照明冷钢蓝(数据) + 氧化铜绿锈(唯一的暖, 经牺牲)。
Nietzsche 的太阳：不亮不暖，被风化、被腐蚀，中毒般的美。—— 一座 1978 年起
就在广播的失修机器。拒绝径向渐变、拒绝边缘柔光、拒绝数字洁净。 */
:root {
/* 层 (失修航站内部) —— 仍然是深空, 但不再是压到窒息的黑 */
--void: #0a0b0e; /* 绝对虚空黑 · 抬升一阶显影 */
--void-2: #0f1116; /* 面板黑，废气尘埃 */
--panel: #14171d; /* 数据面，砂光铝 */
--panel-2: #1b1f27; /* 加工面 / 抬高面 */
/* 数据 (冷钢蓝 · 抬升降亮度, 让标签/数据可读) */
--ice: #5f6d84; /* 主色，冷钢蓝 */
--ice-2: #93a2b4; /* 悬停 / 略亮 */
--ice-dim: rgba(96,110,130,.85);
--ice-faint: rgba(96,110,130,.40);
/* 点缀 (氧化铜绿锈 5c4f3a · 整页仅用两处) */
--amber: #6b5c42; /* 氧化铜绿锈 —— Nietzsche 的太阳 */
--amber-dim: rgba(107,92,66,.78);
--parchment: #a89a7c; /* 石墨纸灰褐，尘埃，略微提亮 */
--parchment-dim:rgba(168,154,124,.62);
/* 磷光 (CRT 阳极磷光 · 极低亮度的绿) */
--phos: #74a07c; /* 早期磷光绿 */
--phos-dim: rgba(116,160,124,.6);
/* 告警 (极少使用) */
--signal: #8a6457;
/* 光谱 —— 六个模块色相。原先全站只有一种点缀色(氧化铜),读起来像同一块金属;
这里给每个模块一个身份色,但都按同一明度/饱和度调过,不会跳成玩具。 */
--spec-proj: #6ea8e0; /* 天蓝 · 项目 */
--spec-log: #58c2ab; /* 松绿 · 日志 */
--spec-thought:#a98fdb; /* 紫堇 · 思考 */
--spec-poem: #e090ae; /* 桃红 · 诗歌 */
--spec-ai: #d9b368; /* 赤金 · AI 导引 */
--spec-about: #7ec8e8; /* 冰青 · 关于 */
/* 灰阶 / 墨 —— 正文与次级文字均提亮, 弱光下可读 */
--ink: #c9cfd7; /* 正文 冷灰 */
--muted: #8b94a1; /* 次级文字 钢灰 (对比约 5.6:1) */
--line: rgba(96,110,130,.18);
--line-strong: rgba(96,110,130,.36);
/* 画布主题桥接(昼间协议 2026-10-18): 星域/星尘/流星的 RGB 基色。
夜态默认值即此处; 昼态由 override.css [data-theme="day"] 覆盖。
JS(main.js initStars / anim.js)经 getComputedStyle 读取, 监听
beacon:theme 事件刷新 —— CSS 是唯一真相源, JS 内置同值仅兜底。 */
--star-rgb: 150,158,166; /* 星域 · 冷白 */
--dust-rgb: 158,170,188; /* 星尘 · 冷灰 */
--meteor-rgb: 180,196,216; /* 流星头 · 冷蓝 */
--meteor-tail-rgb: 116,160,124; /* 流星尾 · 磷光绿 */
/* 字体 */
--mono: "JetBrains Mono","SFMono-Regular","Cascadia Code",Consolas,"Noto Sans Mono SC",monospace;
--tech: "Space Grotesk","DIN 1451","DIN Alternate","Bahnschrift","Noto Sans SC","Microsoft YaHei",sans-serif;
--sans: "Noto Sans SC","HarmonyOS Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
/* 阴影 —— 硬边 + 深影 (铸铁深度), 无发光 */
--glow-ice: 0 0 0 1px var(--line-strong), 0 16px 40px -18px rgba(0,0,0,.9);
--glow-amber: 0 0 0 1px rgba(92,79,58,.4), 0 16px 40px -18px rgba(0,0,0,.9);
--gutter: clamp(20px, 5vw, 64px);
/* 窗口圆角 —— 全站一块"圆角玻璃窗",不再是铁皮箱 */
--radius: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
}
/* ---------- 2. 基础重置 ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
background:var(--void);
color:var(--ink);
font-family:var(--sans);
font-size:15.5px;
line-height:1.8;
overflow-x:hidden;
min-height:100vh;
}
::selection{ background:var(--parchment); color:var(--void); }
/* 键盘焦点 —— 氧化铜刻痕, 非浏览器默认蓝圈, 符合档案仪器 */
:focus{ outline:none; }
:focus-visible{ outline:1.5px solid rgba(92,79,58,.85); outline-offset:2px; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:1.5px solid rgba(92,79,58,.9); outline-offset:3px;
}
a{ color:var(--ice); text-decoration:none; border-bottom:1px solid transparent; transition:.2s; }
a:hover{ color:var(--parchment); border-bottom-color:var(--line-strong); }
img{ max-width:100%; display:block; }
/* 滚动条 —— 铸铁质感 */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--void); }
::-webkit-scrollbar-thumb{ background:linear-gradient(var(--ice-faint),transparent); border:2px solid var(--void); border-radius:999px; }
::-webkit-scrollbar-thumb:hover{ background:var(--ice-dim); }
/* ---------- 3. 全局背景层 (虚空黑 · 静止颗粒 · 无渐变) ---------- */
.space-bg{ position:fixed; inset:0; z-index:-3; background:var(--void); contain:paint; }
#stars{ position:absolute; inset:0; width:100%; height:100%; }
/* 网格覆盖 → 几乎不可见的机舱检修线 (比元素更低一层的底色) */
.grid-overlay{
position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.1;
background:
linear-gradient(var(--line) .5px, transparent .5px),
linear-gradient(90deg, var(--line) .5px, transparent .5px);
background-size:72px 72px;
mask-image:radial-gradient(ellipse at 60% 0%, #000 5%, transparent 62%);
-webkit-mask-image:radial-gradient(ellipse at 60% 0%, #000 5%, transparent 62%);
}
/* 35mm 胶片颗粒 · 4% 透明度, 静止不搅动 —— 看得见, 非装饰 */
.scanlines{
position:fixed; inset:0; z-index:58; pointer-events:none; opacity:.04;
background-image:url("data:image/svg+xml;utf8,");
background-size:180px 180px;
mix-blend-mode:soft-light;
contain:paint;
}
/* 顶部压暗 —— 被压紧的机舱顶, 非柔光 (线性, 无径向) */
.crt-vignette{
position:fixed; inset:0; z-index:57; pointer-events:none;
background:linear-gradient(180deg, rgba(0,0,0,.16) 0%, transparent 14%),
linear-gradient(0deg, rgba(0,0,0,.10) 0%, transparent 10%);
contain:paint;
}
/* 尼采水印 + 档案戳记 (main.js 注入) */
.archive-marks{ position:fixed; inset:0; z-index:56; pointer-events:none; overflow:hidden; }
.archive-marks i{ position:absolute; font-style:normal; }
/* 尼采手迹水印 —— 沿左边距垂挂, 淡到 3%, 如档案信纸上的幽灵 */
.wm-nietzsche{
writing-mode:vertical-rl; top:8vh; left:2.1vw;
font-family:"Caveat","Shadows Into Light","Kaiti SC",cursive;
font-style:italic; font-size:15px; letter-spacing:9px; line-height:2;
color:rgba(148,133,106,.035); font-weight:400;
transform:rotate(180deg);
}
/* 档案戳记 (氧化铜印泥 + 手工编号) */
.stamp{
font-family:var(--mono); font-size:10px; letter-spacing:3px; text-transform:uppercase;
border:1px solid rgba(92,79,58,.3); color:rgba(92,79,58,.36);
padding:4px 9px;
}
.stamp-a{ bottom:9vh; right:4vw; transform:rotate(-7deg); }
.stamp-b{ bottom:13vh; left:3vw; transform:rotate(4deg); color:rgba(74,85,104,.2); border-color:rgba(74,85,104,.18); }
.stamp-a::after{ content:" H-0147"; opacity:.7; }
/* ---------- 3.5 矢量测绘版 (vector-bg.js 注入) ----------
一张手工排版的深空观测底图,压在正文之下。三层视差:轨道族 / 方位环 / 星座网。
全部描边由 CSS 上色,JS 只管几何 —— 改浓淡、改色相只动这一节的变量。
--vb-* 是总闸门:.vector-bg 的 opacity 决定整体存在感,
中心用 mask 压到两成,让正文所在的中央列永远是画面最干净的地方。 */
.vector-bg{
position:fixed; inset:0; z-index:-2; pointer-events:none; overflow:hidden; contain:paint;
opacity:.72;
--vb-line: rgba(96,110,130,.30); /* 结构线 冷钢 */
--vb-line-dim: rgba(96,110,130,.17); /* 次要线 更淡 */
--vb-line-faint:rgba(96,110,130,.10); /* 长扫掠线,几乎只靠余光能看见 */
--vb-hue: color-mix(in oklab, var(--h, var(--ice-2)) 66%, var(--ice)); /* 本页模块色 */
--vb-copper: rgba(107,92,66,.40); /* 氧化铜 —— 太阳独占用色 */
--vb-txt: rgba(139,148,161,.24); /* 仪器标注 */
-webkit-mask-image:radial-gradient(ellipse 60% 44% at 50% 45%, rgba(0,0,0,.16), #000 68%);
mask-image:radial-gradient(ellipse 60% 44% at 50% 45%, rgba(0,0,0,.16), #000 68%);
}
.vector-bg .vb-layer{ position:absolute; inset:0; will-change:transform; }
.vector-bg .vb-svg{ display:block; width:100%; height:100%; }
.vector-bg path,.vector-bg circle,.vector-bg ellipse{
fill:none; stroke:var(--vb-line); stroke-width:.8; stroke-linecap:round;
}
.vb-dashed{ stroke-dasharray:3 9; }
/* far · 轨道族 */
.vb-orbit{ stroke:var(--vb-line-dim); }
.vb-focus{ stroke:var(--vb-line); stroke-width:1; }
.vb-trail{ stroke:var(--vb-hue); stroke-width:1.3; opacity:.5; }
/* mid · 方位环与波前 */
.vb-ring{ stroke:var(--vb-line); stroke-width:.9; }
.vb-ring-strong{ stroke:var(--vb-line); stroke-width:1.2; opacity:.8; }
.vb-tick{ stroke:var(--vb-line-dim); stroke-width:.7; }
.vb-tick-long{ stroke:var(--vb-line); stroke-width:.9; }
.vb-wave{ stroke:var(--vb-line-dim); stroke-width:.9; }
/* near · 星座网 */
.vb-net{ stroke:var(--vb-line-dim); stroke-width:.7; }
.vb-node-ring{ stroke:var(--vb-hue); stroke-width:1; }
.vb-node-dot{ stroke:none; fill:var(--vb-hue); }
.vb-ret-ring{ stroke:var(--vb-line); stroke-width:.8; }
.vb-ret-cross{ stroke:var(--vb-line); stroke-width:.8; }
.vb-ruler{ stroke:var(--vb-line-dim); stroke-width:.7; }
.vb-ruler-v{ stroke:var(--vb-line-faint); }
/* near · 被风化的太阳：两层错位虚线圆,像被辐射吹蚀过的边缘 */
.vb-sun{ stroke:var(--vb-copper); stroke-width:1.1; stroke-dasharray:11 5 3 7; }
.vb-sun-2{ stroke-dasharray:5 9 13 4; opacity:.55; }
.vb-sun-core{ stroke:none; fill:var(--vb-copper); opacity:.5; }
.vb-sun-meridian{ stroke:var(--vb-copper); stroke-width:.6; opacity:.3; }
/* near · 标注 */
.vector-bg text{
font-family:var(--mono); font-size:9px; letter-spacing:.22em;
fill:var(--vb-txt); stroke:none; text-transform:uppercase;
}
.vb-mark{ font-size:11px; letter-spacing:.3em; fill:var(--vb-txt); }
.vb-sub{ font-size:8.5px; letter-spacing:.24em; opacity:.75; }
.vb-copper{ fill:var(--vb-copper); opacity:.6; }
.vb-tick-txt{ font-size:8px; letter-spacing:.16em; opacity:.6; }
/* ---------- 4. 自定义光标 (改为冷钢, 去辉光) ----------
性能: 由 CSS 自定义属性 --cx/--cy/--rx/--ry 驱动 transform, JS 只更新变量,
不触碰 left/top, 避免 mousemove 高频触发重排。 */
.cursor-dot,.cursor-ring{
position:fixed; top:0; left:0; z-index:90; pointer-events:none;
transform:translate(-50%,-50%); border-radius:50%;
will-change:transform;
}
.cursor-dot{ width:3px; height:3px; background:var(--ice); transform:translate(calc(var(--cx,0px) - 50%), calc(var(--cy,0px) - 50%)); }
.cursor-ring{
width:26px; height:26px; border:1px solid var(--ice-dim);
transition:width .18s, height .18s, border-color .18s;
transform:translate(calc(var(--rx,0px) - 50%), calc(var(--ry,0px) - 50%));
}
.cursor-ring.active{ width:44px; height:44px; border-color:var(--amber); opacity:.7; }
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }
/* ---------- 5. 主容器 ---------- */
.wrap{ max-width:1280px; margin:0 auto; padding:0 var(--gutter); }
/* ---------- 6. 顶部 HUD 导航 (铸铁档案条) ---------- */
.hud{
position:sticky; top:0; z-index:50;
border-bottom:1px solid var(--line);
/* 铸铝档案条 —— 实体, 非玻璃。拒绝 backdrop-blur 的 SaaS 感 */
background:rgba(6,6,9,.96);
}
.hud::after{ content:""; position:absolute; left:0; right:0; top:-1px; height:2px; opacity:.45;
background:linear-gradient(90deg, transparent 0%, rgba(92,79,58,.4) 50%, rgba(92,79,58,.22) 60%, transparent 100%); }
.hud-inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:12px 0; }
.brand{ display:flex; align-items:baseline; gap:10px; font-family:var(--mono); }
.brand-orb{
width:8px; height:8px; border-radius:50%; margin:0 2px 0 6px; align-self:center;
background:var(--amber); opacity:.85; box-shadow:inset 0 1px 2px rgba(0,0,0,.6);
}
.brand-name{ font-size:12px; letter-spacing:3px; color:var(--muted); white-space:nowrap; font-weight:400; }
.brand-name b{ color:var(--ink); font-weight:500; }
.hud-clock{ font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:1px; white-space:nowrap; }
.nav{ display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.nav a{
position:relative; font-family:var(--mono); font-size:12px; letter-spacing:1.5px;
color:var(--muted); padding:7px 14px; border:1px solid transparent;
transition:.2s; white-space:nowrap; border-radius:999px;
}
.nav a .idx{ color:var(--amber-dim); margin-right:6px; font-size:10px; }
.nav a:hover{ color:var(--ink); background:rgba(143,163,181,.05); border-color:var(--line); }
.nav a.active{
color:var(--ice); border-color:var(--line); background:rgba(143,163,181,.06);
box-shadow: inset 0 -1px 0 var(--amber);
}
.nav a.active .idx{ color:var(--amber); }
.mobile-nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--ice); padding:8px 14px; font-family:var(--mono); cursor:pointer; border-radius:999px; }
.mobile-nav-toggle:hover{ border-color:var(--line-strong); }
@media (max-width:860px){
.nav{ position:fixed; inset:0 0 auto 0; top:54px; flex-direction:column; align-items:stretch; gap:0;
background:rgba(8,8,12,.97); padding:10px var(--gutter) 16px; border-bottom:1px solid var(--line);
transform:translateY(-120%); transition:.35s; z-index:49; }
.nav.open{ transform:translateY(0); }
.nav a{ border:1px solid var(--line); border-radius:12px; margin:3px 0; }
.mobile-nav-toggle{ display:block; }
.brand-name{ font-size:11px; }
}
/* ---------- 7. 排版基底 ---------- */
h1,h2,h3,h4{ font-family:var(--tech); font-weight:700; color:#d8dde2; line-height:1.12; letter-spacing:.5px; }
.mono{ font-family:var(--mono); }
.label{
font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--muted); text-transform:uppercase;
}
.amber{ color:var(--amber); }
.ice{ color:var(--ice); }
.hud-kicker{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--mono); font-size:11px; letter-spacing:4px; color:var(--ice-dim);
margin-bottom:20px; text-transform:uppercase;
}
.hud-kicker::before{ content:""; width:30px; height:2px; background:var(--amber); opacity:.8; }
/* ---------- 8. 首页 · 非对称 Hero ----------
巨型左标题 + 右下信标终端。足够留白, 如档案陈列。 */
.hero{
min-height:86vh; display:flex; flex-direction:column; justify-content:flex-start;
padding:clamp(48px,8vh,96px) 0 40px; position:relative;
}
.hero-rail{ position:relative; }
.hero-main{ max-width:780px; position:relative; padding-right:clamp(28px,4vw,56px); }
/* 垂直划痕线 —— 0.5px 氧化铜, 把标题区与虚空分隔 */
.hero-main::after{
content:""; position:absolute; top:6px; bottom:6px; right:6px; width:.5px;
background:linear-gradient(180deg, rgba(92,79,58,0) 0%, rgba(92,79,58,.7) 30%, rgba(92,79,58,.7) 70%, rgba(92,79,58,0) 100%);
opacity:.55;
}
/* 冲压铝铭牌标题 —— DIN 风格, 铸造且略微磨损, 非数字渲染 */
.hero-title{
font-size:clamp(40px,7vw,92px); letter-spacing:.5px; font-weight:700;
display:flex; flex-direction:column;
-webkit-text-stroke:.6px rgba(10,10,12,.55); /* 冲压深边的墨层 */
text-shadow:0 1px 0 rgba(0,0,0,.75), 0 -1px 0 rgba(120,130,145,.05),
1px 0 0 rgba(0,0,0,.45), -1px 0 0 rgba(0,0,0,.45); /* 铸造成型的钤印暗边 */
}
.hero-title .en{
font-size:.5em; letter-spacing:.2em; color:var(--muted); font-weight:400; margin-bottom:8px;
transform:translateX(-1.5px); /* 与中文基线 0.5px 的刻意错位 */
-webkit-text-stroke:.4px rgba(10,10,12,.4);
}
.hero-title .zh{
color:#97a2ae; /* 冷钢灰, 不发光 */
transform:translateY(.5px) translateX(.5px); /* 拉丁/汉基线微观错位 (有意) */
-webkit-text-stroke:.7px rgba(10,10,12,.6);
text-shadow:0 1px 0 rgba(0,0,0,.7), 1px 0 0 rgba(0,0,0,.5), 0 -1px 0 rgba(120,130,145,.04);
}
/* 冲压加工线 (标题下方) */
.hero-title .zh::after{ content:""; display:block; width:100%; height:1px; margin-top:8px;
background:linear-gradient(90deg, var(--line-strong) 0%, transparent 88%); opacity:.5; }
/* 副标题 —— 故意的"错误": 基线比中文低 2px */
.hero-title .glow-line{
display:block; font-size:.27em; letter-spacing:.18em; color:var(--parchment); font-weight:400; margin-top:20px;
transform:translateY(2px);
text-transform:uppercase;
}
.hero-sub{ margin-top:20px; color:var(--muted); max-width:520px; font-size:15px; }
/* 信标终端 —— 一块 1978 年的真件: 阳极氧化铝, 非软件窗口 */
.relay{ width:min(420px,94%); margin:clamp(48px,10vh,96px) 0 0 auto; position:relative; }
.relay-panel{
position:relative;
background:
linear-gradient(200deg, #0f1218 0%, #0a0c11 45%, #090b0e 100%),
var(--panel);
border:1px solid #23262d;
border-radius:var(--radius-lg);
padding:20px 22px 24px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.055),
inset 0 -2px 3px rgba(0,0,0,.65),
0 20px 44px -22px rgba(0,0,0,.9),
0 3px 0 rgba(0,0,0,.28);
contain:layout style paint;
}
/* 边缘微氧化 —— 阳极铝沿口的绿色锈 (极淡, 无渐变光) */
.relay-panel::before{
content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
box-shadow: inset 0 0 0 1px rgba(92,79,58,.16), inset -1px 0 0 rgba(70,90,70,.05), inset 0 -1px 0 rgba(92,79,58,.06);
}
/* 砂光拉丝 + 加工刀痕 */
.relay-panel::after{
content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
background:repeating-linear-gradient(92deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}
/* 右下油脂污渍 + 指纹 (物质痕迹) */
.relay-panel .smudge{
position:absolute; right:-8px; bottom:-14px; width:110px; height:90px; pointer-events:none;
background:radial-gradient(60% 55% at 60% 45%, rgba(45,40,30,.18), rgba(30,28,22,.08) 55%, transparent 78%);
transform:rotate(-20deg); opacity:.5;
border-radius:60% 40% 50% 50%;
}
/* Torx 螺丝 (内六角星形) —— 收进圆角内侧,不再骑在角上 */
.relay-panel .screw{ position:absolute; width:9px; height:9px; border-radius:50%;
background: radial-gradient(circle at 40% 35%, #4a5058, #24282e 66%, #111419);
box-shadow: 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(0,0,0,.85), inset 1px 1px 2px rgba(0,0,0,.9); }
.relay-panel .screw1{ top:9px; left:11px; } .relay-panel .screw2{ top:9px; right:11px; }
.relay-panel .screw3{ bottom:9px; left:11px; } .relay-panel .screw4{ bottom:9px; right:11px; }
.screw::after{
content:""; position:absolute; inset:1.5px;
background-image:url("data:image/svg+xml;utf8,");
background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.85;
}
.relay-head{
display:flex; justify-content:space-between; align-items:baseline;
padding-bottom:10px; border-bottom:1px solid #1e2229; margin-bottom:12px;
}
/* 蚀刻金属铭牌标签 —— 冲压下凹 + 加工纹 */
.relay-title{
font-family:var(--mono); font-size:10px; letter-spacing:.28em; color:#4a5568; font-weight:500; text-transform:uppercase;
text-shadow:0 1px 1px rgba(0,0,0,.8), 0 -1px 0 rgba(150,160,175,.06); /* 蚀刻入铝 */
background:repeating-linear-gradient(90deg, rgba(255,255,255,.01) 0 1px, rgba(0,0,0,.04) 1px 2px);
}
.relay-rec{ font-family:var(--mono); font-size:8px; letter-spacing:.22em; color:var(--phos); opacity:.75; text-transform:uppercase; }
.relay-rec::before{ content:"●"; margin-right:5px; font-size:7px; animation:blink 3s steps(1) infinite; }
/* 磷光 CRT 日志 —— 极低照度, 字符磨损不匀 (--wy/--op/--bloom 由 js 写入) */
#boot{ min-height:224px; font-family:var(--mono); font-size:12px; line-height:1.9; color:rgba(140,168,140,.7); }
#boot .ok { color:rgba(146,180,146,.66); }
#boot .warn{ color:rgba(186,188,150,.62); }
#boot .user{ color:rgba(140,168,140,.46); }
#boot .dim { color:rgba(140,168,140,.32); }
#boot .cursor{ display:inline-block; width:6px; height:11px; background:rgba(150,180,150,.5); vertical-align:-2px; animation:blink 1.1s steps(1) infinite; }
/* 逐字符缺陷: 基线摇晃(±1px) + 磷光不均(亮度) + 高能字母右向横晕 */
#boot span{
display:inline-block;
transform:translateY(var(--wy,0));
opacity:var(--op,1);
text-shadow:var(--bloom,none);
}
#boot span.cc{ color:inherit; }
/* 指标条 */
.hero-metrics{ margin-top:clamp(40px,8vh,72px); display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.metric{ background:var(--void-2); padding:18px 20px; }
.metric .num{ font-family:var(--mono); font-size:25px; color:var(--ice); display:block; letter-spacing:1px; }
.metric .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); text-transform:uppercase; }
.metric:hover .num{ text-shadow:0 0 0; color:var(--parchment); }
/* ---------- 9. 区块排布 ---------- */
section.block{ padding:70px 0; position:relative; content-visibility:auto; contain-intrinsic-size:auto 300px; }
.block-head{ display:flex; align-items:baseline; justify-content:space-between; border-top:1px solid var(--line); padding-top:14px; margin-bottom:38px; flex-wrap:wrap; gap:10px; }
.block-head::before{ content:""; width:10px; height:10px; background:var(--amber); opacity:.75; box-shadow:inset 0 1px 2px rgba(0,0,0,.6); }
.block-title{ font-size:clamp(22px,3vw,34px); letter-spacing:1px; }
.block-title .en{ display:block; font-size:.5em; letter-spacing:5px; color:var(--muted); font-weight:400; margin-top:5px; font-family:var(--mono); }
.sec-no{ font-family:var(--mono); font-size:11px; color:var(--amber-dim); letter-spacing:2px; }
/* ---------- 10. 数据模块卡片 (档案盒) ---------- */
.dm{ position:relative; background:var(--panel); border:1px solid var(--line); padding:24px; transition:.25s; contain:layout style paint; }
.dm::before{ content:""; position:absolute; top:0; left:0; width:3px; height:100%; background:var(--ice-faint); transition:.25s; }
.dm:hover{ border-color:var(--line-strong); transform:translateY(-2px); box-shadow:6px 6px 0 rgba(0,0,0,.42); }
.dm:hover::before{ background:var(--amber); }
.dm-led{ width:6px; height:6px; background:var(--amber); position:absolute; top:18px; right:18px; opacity:.7; }
.dm-tag{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--amber-dim); }
.dm-title{ font-size:20px; margin:11px 0 8px; font-family:var(--tech); font-weight:700; letter-spacing:.5px; }
.dm-body{ color:var(--muted); font-size:14px; line-height:1.7; }
.dm-link{ display:inline-block; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--ice); letter-spacing:1px; }
.dm-link::after{ content:" ▸"; color:var(--amber); }
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
/* 项目 (发射记录) 变体 */
.dm.launch{ overflow:hidden; }
.dm.launch .dm-status{
position:absolute; top:0; left:0; right:0; height:3px;
background:linear-gradient(90deg,var(--ice),var(--amber)); opacity:.8;
}
.launch-meta{ display:flex; gap:14px; margin-top:12px; font-family:var(--mono); font-size:11px; color:var(--muted); }
.launch-meta b{ color:var(--ice); font-weight:500; }
.stack{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.stack span{
font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--ice-dim);
border:1px solid var(--line); padding:2px 8px; background:rgba(143,163,181,.03);
}
/* ---------- 11. 哲思 · 思考信标 ---------- */
.thought{ border-left:2px solid var(--amber); background:linear-gradient(90deg,rgba(92,79,58,.06),transparent 60%); padding:26px 28px; margin-bottom:22px; contain:layout style paint; }
.thought blockquote{ font-family:var(--tech); font-size:clamp(18px,2.5vw,24px); color:var(--parchment); line-height:1.7; font-weight:500; }
.thought .meta{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--amber-dim); margin-top:14px; }
.thought .note{ margin-top:14px; color:var(--muted); font-size:14px; border-top:1px dashed var(--line); padding-top:12px; }
.thought:hover{ border-left-color:var(--parchment); }
/* ---------- 12. AI 导引 · 反射引擎 ---------- */
.guide-layout{ display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; }
@media (max-width:940px){ .guide-layout{ grid-template-columns:1fr; } }
.guide-panel{
background:var(--panel); border:1px solid var(--line);
display:flex; flex-direction:column; height:min(70vh,620px); position:relative; overflow:hidden;
border-radius:var(--radius-lg);
}
.guide-panel::before,.guide-panel::after{ content:""; position:absolute; width:14px; height:14px; }
.guide-panel::before{ top:7px; left:7px; border-top:2px solid var(--amber); border-left:2px solid var(--amber); border-top-left-radius:9px; }
.guide-panel::after{ bottom:7px; right:7px; border-bottom:2px solid var(--amber); border-right:2px solid var(--amber); border-bottom-right-radius:9px; }
.guide-head{ padding:16px 20px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; background:var(--void-2); }
.guide-core{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--ice-dim); }
.guide-core .orb{ width:8px; height:8px; border-radius:50%; background:var(--amber); opacity:.8; }
.guide-logs{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:14px; }
.msg{ max-width:82%; font-size:14px; line-height:1.7; }
.msg.bot{ align-self:flex-start; }
.msg.bot .bubble{ background:rgba(143,163,181,.05); border:1px solid var(--line); border-left:2px solid var(--ice); padding:12px 16px; color:var(--ink); }
.msg.user{ align-self:flex-end; text-align:right; }
.msg.user .bubble{ background:rgba(92,79,58,.07); border:1px solid var(--line); border-right:2px solid var(--amber); padding:12px 16px; color:var(--parchment); }
.msg .who{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--muted); margin-bottom:6px; }
.msg.user .who{ color:var(--amber-dim); }
.msg-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.msg-links a{
font-family:var(--mono); font-size:11px; letter-spacing:1px; text-decoration:none;
color:var(--ice); background:rgba(143,163,181,.05); border:1px solid var(--line);
padding:5px 10px; transition:.2s;
}
.msg-links a:hover{ border-color:var(--amber); color:var(--amber); }
.guide-input button:disabled{ opacity:.45; cursor:default; }
.guide-input{ border-top:1px solid var(--line); padding:14px 16px; display:flex; gap:10px; background:var(--void-2); }
.guide-input input{
flex:1; background:var(--void); border:1px solid var(--line); color:var(--ink);
font-family:var(--mono); font-size:13px; padding:11px 14px; outline:none; transition:.2s;
}
.guide-input input:focus{ border-color:var(--line-strong); }
.guide-input button{
background:var(--amber); color:var(--void); border:none;
font-family:var(--mono); font-size:12px; letter-spacing:1px; padding:0 20px; cursor:pointer; transition:.2s;
}
.guide-input button:hover{ background:var(--parchment); }
/* 快捷信标 (快捷键) */
.fastbeacons{ display:flex; flex-direction:column; gap:12px; position:sticky; top:110px; }
.fastbeacons p{ font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--muted); margin-bottom:8px; text-transform:uppercase; }
.beacon{
background:var(--panel); border:1px solid var(--line); padding:13px 16px;
font-family:var(--mono); font-size:12px; color:var(--ink); cursor:pointer; text-align:left; transition:.2s;
}
.beacon:hover{ border-color:var(--line-strong); color:var(--amber); transform:translateX(3px); }
.beacon small{ display:block; color:var(--muted); margin-top:3px; font-size:11px; }
/* ---------- 13. 关于 · 设备清单 ---------- */
.about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:start; }
@media (max-width:900px){ .about-grid{ grid-template-columns:1fr; } }
.device{ display:flex; align-items:center; gap:16px; padding:16px 0; border-bottom:1px dashed var(--line); }
.device .ico{ width:44px; height:44px; flex:none; border:1px solid var(--line); display:grid; place-items:center; color:var(--ice); background:var(--void-2); position:relative; }
.device .ico svg{ width:22px; height:22px; }
.device .meta{ flex:1; }
.device .name{ font-family:var(--mono); font-size:14px; color:var(--ink); }
.device .role{ font-size:12px; color:var(--muted); }
.device .stats{ font-family:var(--mono); font-size:11px; color:var(--amber); text-align:right; }
.device .stats small{ display:block; color:var(--muted); }
.device:hover .ico{ border-color:var(--line-strong); color:var(--parchment); }
/* 联系 / 身份信标 */
.id-card{
background:linear-gradient(160deg,var(--panel),var(--void-2)); border:1px solid var(--line);
padding:30px; position:relative; overflow:hidden;
}
.id-card::before{ content:"ARCHIVE"; position:absolute; right:-20px; bottom:-8px; font-family:var(--mono); font-size:64px; letter-spacing:6px; color:rgba(143,163,181,.04); font-weight:700; }
.contact-list{ list-style:none; margin-top:8px; }
.contact-list li{ display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px dashed var(--line); font-family:var(--mono); font-size:13px; }
.contact-list li .k{ color:var(--muted); min-width:64px; letter-spacing:2px; }
.contact-list li .v{ color:var(--ice); word-break:break-all; }
.contact-list li .v::before{ content:"▸ "; color:var(--amber); }
/* ---------- 14. 页脚 ---------- */
.footer{ border-top:1px solid var(--line); margin-top:40px; padding:36px 0 60px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.footer-mono{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); }
.footer-heart{ display:inline-block; width:6px; height:6px; background:var(--amber); margin-right:8px; opacity:.8; }
/* ---------- 14.5 品牌 · 信标宣言 ---------- */
.manifesto{
position:relative; border:1px solid var(--line); overflow:hidden;
background:var(--void-2);
padding:clamp(28px,5vw,52px);
}
.manifesto::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; opacity:.6;
background:linear-gradient(90deg,var(--ice),var(--amber)); }
.manifesto-grid{ position:relative; display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,4vw,48px); align-items:center; }
.symbol-ring{ width:96px; height:96px; color:var(--amber); opacity:.9; filter:drop-shadow(0 2px 2px rgba(0,0,0,.6)); }
.manifesto-title{ font-size:clamp(26px,4vw,42px); line-height:1.18; margin:10px 0 16px; font-weight:700; }
.manifesto-body{ color:var(--muted); max-width:660px; font-size:15.5px; }
@media (max-width:720px){ .manifesto-grid{ grid-template-columns:1fr; } .symbol-ring{ width:72px; height:72px; } }
/* 最近动态 */
.news-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); }
.news-item{ display:flex; align-items:center; gap:18px; background:var(--void-2); padding:18px 20px; text-decoration:none; transition:.25s; }
.news-item:hover{ background:var(--panel); }
.news-item:hover .news-title{ color:var(--parchment); }
.news-item .nt{ font-family:var(--mono); font-size:10px; letter-spacing:2px; padding:3px 8px; border:1px solid var(--line); flex:none; }
.news-item .nt.p{ color:var(--ice); border-color:rgba(143,163,181,.3); }
.news-item .nt.j{ color:var(--amber); border-color:rgba(92,79,58,.3); }
.news-item .nt.t{ color:var(--muted); border-color:var(--line); }
.news-item .nt.m{ color:var(--phos); border-color:rgba(116,160,124,.3); }
.news-title{ flex:1; color:var(--ink); font-size:15px; }
.news-date{ font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; }
.news-arr{ text-align:right; color:var(--amber); font-family:var(--mono); flex:none; }
@media (max-width:640px){ .news-item{ flex-wrap:wrap; gap:8px 14px; } .news-date{ width:auto; } }
/* 关于页 · 站点故事 */
.story-block{
position:relative; display:flex; gap:26px; align-items:flex-start;
border:1px solid var(--line);
background:var(--void-2);
padding:clamp(24px,4vw,40px); overflow:hidden;
}
.story-block .symbol-ring{ width:76px; height:76px; flex:none; color:var(--amber); opacity:.9; }
.story-tag{ font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--amber-dim); }
.story-title{ font-size:clamp(24px,3vw,34px); margin:8px 0 14px; }
.story-body{ color:var(--muted); max-width:640px; font-size:15.5px; }
@media (max-width:640px){ .story-block{ flex-direction:column; } }
/* 页脚品牌行 + RSS */
.footer-tagline{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--ice-dim); }
.footer-tagline b{ color:var(--ice); font-weight:500; }
.rss-link{
font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--muted);
border:1px solid var(--line); padding:4px 12px; display:inline-flex; align-items:center; gap:6px;
}
.rss-link:hover{ color:var(--amber); border-color:var(--line-strong); }
.footer-brand{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
/* ---------- 15. 动效关键帧 (克制, 非霓虹) ---------- */
@keyframes beacon{ 0%,100%{ opacity:.9; } 50%{ opacity:.4; } }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes grain{
0%{ transform:translate(0,0);} 25%{ transform:translate(-14px,10px);} 50%{ transform:translate(10px,-8px);} 75%{ transform:translate(-6px,-14px);} 100%{ transform:translate(0,0);}
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(18px);} to{ opacity:1; transform:none;} }
@keyframes riseIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
/* 偏好减少动效 —— 档案是静态的; 熄掉一切运动 */
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation:none !important; transition:none !important; }
html{ scroll-behavior:auto; }
.ri{ opacity:1; }
.stagger{ animation:none !important; opacity:1; }
}
/* 滚动入场 */
.ri{ opacity:0; }
.ri.in{ animation:fadeUp .7s ease forwards; }
/* 打字机下的普通段落入场 */
.stagger{ animation:riseIn .6s ease both; }
.stagger:nth-child(2){ animation-delay:.06s; }
.stagger:nth-child(3){ animation-delay:.12s; }
.stagger:nth-child(4){ animation-delay:.18s; }
.stagger:nth-child(5){ animation-delay:.24s; }
/* 提示选择器 */
.suggest-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px; margin-top:20px; }
.suggest-card{ background:var(--panel); border:1px dashed var(--line); color:var(--muted); text-align:left; padding:16px; font-size:13px; cursor:pointer; transition:.2s; }
.suggest-card:hover{ border-style:solid; border-color:var(--amber); color:var(--parchment); }
@media (max-width:900px){
.hero-rail{ }
.relay{ margin-left:0; width:100%; }
.guide-layout{ grid-template-columns:1fr; }
.fastbeacons{ position:static; }
}
/* ============ 16. 筛选条 chips ============ */
.filterbar{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.chip{
font-family:var(--mono); font-size:12px; letter-spacing:1px; color:var(--muted);
border:1px solid var(--line); background:transparent; padding:7px 16px; cursor:pointer; transition:.2s;
}
.chip:hover{ color:var(--ink); border-color:var(--line-strong); }
.chip.active{ color:var(--void); background:var(--ice); border-color:var(--ice); font-weight:500; }
/* ============ 17. 项目多链接 ============ */
.proj-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.p-link{
display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12px; letter-spacing:.5px;
border:1px solid var(--line); padding:6px 12px; color:var(--ice-dim); transition:.2s; background:var(--void-2);
}
.p-link:hover{ border-color:var(--ice); color:var(--parchment); background:rgba(143,163,181,.06); }
.p-ic{ color:var(--amber); line-height:1; }
.p-link.github .p-ic{ color:var(--ice); }
.p-link.cloud .p-ic{ color:var(--ice); }
.p-link.demo .p-ic{ color:var(--amber); }
.p-link.docs .p-ic{ color:var(--muted); }
.launch-meta{ justify-content:space-between; }
.drawer-open-link{ color:var(--ice); cursor:pointer; transition:.2s; }
.drawer-open-link:hover{ color:var(--parchment); }
/* ============ 18. 项目详情抽屉 ============ */
.drawer-back{ position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:.3s; }
.drawer-back.on{ opacity:1; pointer-events:auto; }
.drawer{
position:fixed; top:0; right:0; bottom:0; width:min(520px,96vw); z-index:71; background:var(--void-2);
border-left:1px solid var(--line-strong); transform:translateX(102%); transition:.38s cubic-bezier(.2,.8,.2,1);
display:flex; flex-direction:column; box-shadow:-12px 0 0 rgba(0,0,0,.42);
}
.drawer.open{ transform:translateX(0); }
.drawer-head{ display:flex; justify-content:space-between; align-items:center; padding:18px 24px; border-bottom:1px solid var(--line); }
.drawer-close{ background:none; border:1px solid var(--line); color:var(--muted); width:34px; height:34px; cursor:pointer; font-size:14px; transition:.2s; }
.drawer-close:hover{ color:var(--parchment); border-color:var(--line-strong); }
.drawer-body{ overflow-y:auto; padding:26px 24px 40px; }
.drawer-title{ font-size:26px; line-height:1.2; margin:8px 0 6px; }
.drawer-date{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:18px; }
.drawer-desc{ color:var(--ink); font-size:15px; margin:16px 0; }
.drawer-links{ display:flex; flex-direction:column; gap:10px; }
.drawer-perma{ margin-top:18px; border-top:1px dashed var(--line); padding-top:16px; }
.drawer-perma .p-link{ cursor:pointer; }
.drawer-perma .p-link .p-ic{ color:var(--amber); }
.drawer-link{
display:flex; align-items:center; gap:14px; text-decoration:none; padding:13px 16px;
border:1px solid var(--line); transition:.2s; background:var(--panel);
}
.drawer-link:hover{ border-color:var(--line-strong); }
.drawer-link .p-ic{ font-size:18px; flex:none; }
.dl-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.dl-label{ color:var(--ink); font-family:var(--mono); font-size:13px; }
.dl-url{ color:var(--muted); font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dl-go{ color:var(--amber); flex:none; }
/* ============ 19. 日志模块 ============ */
.journal-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:26px; }
.jsearch{ width:min(320px,100%); }
.jsearch .input{ padding:10px 14px; }
.journal-card{
position:relative; padding:26px 28px; margin-bottom:18px; background:var(--panel);
border:1px solid var(--line); border-left:2px solid var(--ice); transition:.25s; cursor:pointer;
contain:layout style paint;
}
.journal-card:hover{ border-left-color:var(--amber); transform:translateX(3px); }
.jmeta{ display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11px; letter-spacing:2px; margin-bottom:10px; }
.jcat{ color:var(--ice); border:1px solid var(--line-strong); padding:2px 10px; }
.jdate{ color:var(--muted); }
.jtime{ color:var(--amber-dim); }
.post-actions{ margin-top:16px; }
.post-actions .btn{ font-family:var(--mono); font-size:12px; }
/* 通用按钮(访客端) */
.btn{ font-family:var(--mono); font-size:12px; letter-spacing:1px; padding:11px 20px; border:1px solid var(--line-strong); background:transparent; color:var(--ice); cursor:pointer; transition:.2s; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn:hover{ background:var(--ice); color:var(--void); }
.btn.ghost{ border-color:var(--line); color:var(--muted); }
.btn.ghost:hover{ color:var(--ink); background:transparent; border-color:var(--line-strong); }
.jtitle{ font-family:var(--tech); font-size:22px; color:var(--ink); font-weight:700; margin-bottom:8px; }
.jexcerpt{ color:var(--muted); font-size:14px; line-height:1.7; }
.jtags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:14px; }
.jtag{ font-family:var(--mono); font-size:11px; color:var(--amber-dim); border:1px dashed var(--line); padding:2px 9px; }
.jread{ display:inline-block; margin-top:16px; font-family:var(--mono); font-size:12px; color:var(--ice); letter-spacing:1px; }
.jread:hover{ color:var(--parchment); }
.post-article{ margin-top:24px; }
.post-head{ padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:26px; }
.post-title{ font-size:clamp(26px,3.6vw,40px); margin:10px 0 14px; line-height:1.25; }
.post-content.md{ color:var(--ink); font-size:15.5px; line-height:2; }
.post-content.md p{ margin-bottom:18px; }
.post-content.md h1,.post-content.md h2,.post-content.md h3{ margin:26px 0 12px; color:var(--parchment); }
.post-content.md h1{ font-size:24px; } .post-content.md h2{ font-size:20px; } .post-content.md h3{ font-size:17px; }
.post-content.md ul,.post-content.md ol{ margin:0 0 18px 1.4em; }
.post-content.md li{ margin-bottom:6px; }
.post-content.md blockquote{ border-left:2px solid var(--amber); background:rgba(92,79,58,.06); margin:0 0 18px; padding:12px 18px; color:var(--parchment); }
.post-content.md pre{ background:var(--void); border:1px solid var(--line); padding:16px; overflow-x:auto; margin-bottom:18px; }
.post-content.md code{ font-family:var(--mono); font-size:.9em; }
.post-content.md pre code{ color:var(--ice); }
.post-content.md :not(pre) > code{ background:rgba(143,163,181,.06); border:1px solid var(--line); padding:2px 6px; color:var(--ice); }
.post-content.md a{ color:var(--ice); border-bottom:1px solid var(--line-strong); }
.post-content.md hr{ margin:26px 0; border:none; border-top:1px dashed var(--line); }
/* 日志正文图片 —— 档案扫描件气质:窄边框,硬阴影 */
.post-content.md img{ display:block; max-width:100%; height:auto; margin:22px auto; border:1px solid var(--line-strong); padding:6px; background:var(--void-2); box-shadow:4px 4px 0 rgba(0,0,0,.5); }
/* ============ 20. 全站搜索 (Ctrl+K) ============ */
.search-toggle{
font-family:var(--mono); font-size:11px; letter-spacing:1px; color:var(--muted); cursor:pointer;
border:1px solid var(--line); padding:6px 12px; display:inline-flex; align-items:center; gap:8px; transition:.2s; background:none;
}
.search-toggle:hover{ color:var(--ice); border-color:var(--line-strong); }
.search-toggle kbd{ font-family:var(--mono); font-size:10px; border:1px solid var(--line); padding:1px 5px; color:var(--amber); }
.search-overlay{ position:fixed; inset:0; z-index:80; background:rgba(5,6,9,.82); display:none; align-items:flex-start; justify-content:center; padding:9vh 20px 40px; }
.search-overlay.open{ display:flex; animation:riseIn .22s ease; }
.search-box{ width:min(680px,100%); }
.search-box .input{ font-size:16px; padding:16px 18px; background:var(--panel); }
.search-results{ margin-top:12px; max-height:56vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }
.sr-item{
display:flex; align-items:baseline; gap:14px; padding:13px 18px; background:var(--panel); border:1px solid var(--line); cursor:pointer; transition:.15s; text-decoration:none;
}
.sr-item:hover{ border-color:var(--line-strong); }
.sr-type{ font-family:var(--mono); font-size:10px; letter-spacing:1px; color:var(--amber); flex:none; min-width:56px; }
.sr-title{ color:var(--ink); font-size:14px; }
.sr-ex{ color:var(--muted); font-size:12px; margin-left:auto; text-align:right; }
.search-empty{ padding:30px; text-align:center; color:var(--muted); font-family:var(--mono); font-size:13px; }
/* 回到顶部 */
.to-top{ position:fixed; right:22px; bottom:22px; z-index:60; width:44px; height:44px; border:1px solid var(--line-strong); background:rgba(8,8,12,.82); color:var(--ice); cursor:pointer; font-size:18px; opacity:0; pointer-events:none; transform:translateY(10px); transition:.25s; }
.to-top:hover{ border-color:var(--amber); color:var(--amber); }
.to-top.on{ opacity:1; pointer-events:auto; transform:none; }
/* ============ 21. 访客留言 · 信号回响 ============ */
.sig-sub{ color:var(--muted); font-size:13.5px; line-height:1.7; margin:8px 0 0; }
.sig-form{ display:flex; flex-direction:column; gap:10px; max-width:600px; margin-top:18px; }
.sig-form .input{
width:100%; background:var(--void); border:1px solid var(--line); color:var(--ink);
font-family:var(--mono); font-size:13.5px; padding:11px 14px; transition:.2s;
}
.sig-form .input:focus{ border-color:var(--line-strong); outline:none; }
.sig-form textarea.sig-text{ min-height:96px; resize:vertical; line-height:1.7; }
.sig-foot{ display:flex; align-items:center; gap:14px; }
.sig-note{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.5px; }
.sig-note.ok{ color:var(--phos); }
.sig-note.warn{ color:var(--signal); }
.sig-list{ margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.sig-item{ border:1px solid var(--line); background:var(--panel); padding:14px 18px; }
.sig-item:hover{ border-color:var(--line-strong); }
.sig-meta{ display:flex; justify-content:space-between; gap:12px; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.6px; margin-bottom:8px; }
.sig-meta b{ color:var(--ice-2); font-weight:500; }
.sig-item p{ margin:0; color:var(--ink); font-size:14px; line-height:1.8; white-space:pre-wrap; word-break:break-word; }
.sig-empty{ font-family:var(--mono); font-size:12.5px; color:var(--muted); padding:16px 0; letter-spacing:.5px; }
/* 日志详情页的评论区标题 */
.post-comments{ margin-top:44px; border-top:1px solid var(--line); padding-top:26px; }
.post-comments .pc-title{ font-family:var(--tech); font-size:18px; color:var(--ink); font-weight:700; margin-bottom:2px; }
.post-comments .pc-title .en{ font-size:.6em; letter-spacing:3px; color:var(--muted); font-weight:400; margin-left:10px; }
/* ============ 21.5 访客端输入框基底 ============
日志搜索 / 搜索浮层 / 留言表单共用(admin.css 另有后台覆盖) */
.input{
width:100%; background:var(--void); border:1px solid var(--line); color:var(--ink);
font-family:var(--mono); font-size:13.5px; padding:11px 14px; transition:border-color .2s;
}
.input::placeholder{ color:var(--muted); opacity:.7; }
.input:focus{ border-color:var(--line-strong); outline:none; }
/* 联系方式里的可点击项(邮箱/GitHub/Telegram) */
.contact-list a{ color:var(--ice); text-decoration:none; border-bottom:1px solid var(--line-strong); transition:.15s; }
.contact-list a:hover{ color:var(--parchment); border-bottom-color:var(--amber); }
/* ============ 22. 阅读增强 · 进度条 / 目录 / 灯箱 / 文章导航 ============ */
/* 阅读进度条 —— 磷光绿信号传输线,仅详情视图点亮 */
.read-progress{
position:fixed; top:0; left:0; z-index:90; height:2px; width:0;
background:var(--phos); opacity:0; pointer-events:none;
box-shadow:0 0 0 rgba(0,0,0,0); /* 无发光,实体细线 */
transition:opacity .3s;
}
.read-progress.on{ opacity:.9; }
/* 详情布局:正文 + 档案目录侧栏(桌面端) */
.detail-layout{ display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:44px; align-items:start; }
.post-toc{
position:sticky; top:86px; max-height:calc(100vh - 130px); overflow-y:auto;
border-left:1px solid var(--line); padding:6px 0 6px 18px;
font-family:var(--mono); font-size:12px;
}
.toc-title{ letter-spacing:2px; color:var(--amber); margin-bottom:12px; font-size:11px; }
.toc-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.toc-list a{
display:block; padding:5px 8px; color:var(--muted); text-decoration:none;
border-left:2px solid transparent; line-height:1.5; transition:.15s;
}
.toc-lv2 a{ padding-left:20px; }
.toc-list a:hover{ color:var(--ink); }
.toc-list a.on{ color:var(--phos); border-left-color:var(--phos); background:rgba(116,160,124,.05); }
/* 正文标题锚点定位时避开粘性 HUD */
.post-content.md h1,.post-content.md h2,.post-content.md h3{ scroll-margin-top:96px; }
/* 代码块复制按钮 —— 对标 GitHub,档案打字机风格 */
.post-content.md pre{ position:relative; }
.code-copy{
position:absolute; top:8px; right:8px;
font-family:var(--mono); font-size:11px; letter-spacing:1px;
color:var(--muted); background:var(--void-2); border:1px solid var(--line);
padding:4px 10px; cursor:pointer; transition:.15s; opacity:0;
}
.post-content.md pre:hover .code-copy{ opacity:1; }
.code-copy:hover{ color:var(--ink); border-color:var(--line-strong); }
.code-copy.done{ color:var(--phos); border-color:rgba(116,160,124,.4); }
/* 图片灯箱 —— 档案放大镜 */
.lightbox{
position:fixed; inset:0; z-index:110; background:rgba(4,5,8,.94);
display:none; align-items:center; justify-content:center; flex-direction:column; gap:16px;
cursor:zoom-out;
}
.lightbox.on{ display:flex; }
.lightbox img{ max-width:92vw; max-height:84vh; border:1px solid var(--line-strong); background:var(--void-2); padding:8px; }
.lightbox .lb-cap{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:1px; }
/* 文章导航:上/下一篇 + 档案关联 */
.post-nav{ margin-top:44px; }
.pn-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.pn-card{
text-align:left; background:var(--panel); border:1px solid var(--line);
padding:16px 18px; cursor:pointer; transition:.2s;
display:flex; flex-direction:column; gap:8px; font-family:inherit;
}
.pn-card.next{ text-align:right; }
.pn-card:hover{ border-color:var(--line-strong); transform:translateY(-2px); }
.pn-card.empty{ visibility:hidden; }
.pn-dir{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--amber-dim); }
.pn-title{ color:var(--ink); font-size:14.5px; line-height:1.5; font-weight:500; }
.pn-related{ margin-top:18px; border-top:1px dashed var(--line); padding-top:18px; }
.pn-rel-title{ font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--muted); margin-bottom:12px; }
.pn-rel-item{
display:flex; align-items:center; gap:14px; width:100%; text-align:left;
background:transparent; border:1px solid transparent; border-bottom:1px solid var(--line);
padding:11px 6px; cursor:pointer; transition:.15s; font-family:inherit;
}
.pn-rel-item:hover{ border-bottom-color:var(--amber); }
.pn-rel-item .jdate{ margin-left:auto; }
/* 页面切换过渡 —— View Transitions API(Chrome 126+ 渐进增强,旧浏览器无感) */
@view-transition{ navigation:auto; }
@media (max-width:1100px){
.detail-layout{ grid-template-columns:1fr; }
.post-toc{ display:none !important; }
}
@media (max-width:720px){
.journal-toolbar{ flex-direction:column; align-items:stretch; }
.jsearch{ width:100%; }
.drawer{ width:100vw; }
.pn-row{ grid-template-columns:1fr; }
.pn-card.empty{ display:none; }
.pn-card.next{ text-align:left; }
.code-copy{ opacity:.7; }
}