/* ============================================================
《承重》 LOAD-BEARING — 写给回归者的 Android 架构小书
设计系统:建筑蓝图 · 结构剖面
冷白蓝图纸底(等距网格)、蓝=结构/新制/状态下行,橙=事件上行/变更点,
绿=承重(没变的部分),红=拆除(作废的 API),琥珀=坑。
三个参考项目(NIA / Mihon / DroidKaigi)有专属徽章,贯穿全书。
亮色 only(用户眼睛受不了暗色)。零依赖,系统字体栈。
============================================================ */
:root {
/* —— 纸与墨(冷白蓝图纸) —— */
--paper: #F4F7FA;
--paper-2: #E9EFF5;
--paper-3: #D9E2EC;
--ink: #15202B;
--ink-body: #3B4A59;
--ink-faint: #7C8B9A;
--line: #D2DBE5;
--line-strong: #B8C5D2;
/* —— 主角:蓝(新制/结构/状态下行) —— */
--blue: #1B5FB0;
--blue-deep: #0F406F;
--blue-mist: #E3EDF9;
/* —— 主角:橙(事件上行/变更点) —— */
--orange: #C25A15;
--orange-deep: #8C3E0B;
--orange-mist: #FAECDE;
/* —— 承重:绿(没变的部分,你原来会的仍然作数) —— */
--green: #1E7A4C;
--green-deep: #145636;
--green-mist: #E2F1E8;
/* —— 拆除:红(作废的 API) —— */
--red: #B93B33;
--red-deep: #8A2822;
--red-mist: #FAE6E4;
/* —— 坑:琥珀 —— */
--amber: #A9791A;
--amber-deep: #7C570F;
--amber-mist: #F7EFDA;
/* —— 三个参考项目的识别色 —— */
--nia: #1E7A4C; /* Now in Android:官方绿 */
--mihon: #7B4BC9; /* Mihon:紫 */
--dk: #C25A15; /* DroidKaigi:橙 */
/* —— 语言色(代码纸顶条) —— */
--kt: #7F52FF; --kt-mist: #F1ECFF; /* Kotlin */
--toml: #2C7A7B; --toml-mist: #E2F1F1; /* TOML / 版本目录 */
--xml: #4B8F6A; --xml-mist: #E7F1EB; /* XML / Gradle */
/* —— 代码 token —— */
--tok-kw: #A8362C;
--tok-ty: #1C6478;
--tok-str: #1E7A4C;
--tok-num: #A65A1E;
--tok-com: #93A0AD;
--tok-op: #6B45B8;
--tok-fn: #15202B;
--tok-ann: #A9791A;
--serif: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", Georgia, "Times New Roman", serif;
--sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
--mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace;
--topbar-h: 56px;
--maxw: 800px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: hidden; }
body {
font-family: var(--sans);
background-color: var(--paper);
/* 蓝图纸:等距网格,粗线每 5 格 */
background-image:
linear-gradient(rgba(27, 95, 176, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(27, 95, 176, 0.07) 1px, transparent 1px),
linear-gradient(rgba(27, 95, 176, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(27, 95, 176, 0.035) 1px, transparent 1px);
background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
color: var(--ink-body);
line-height: 1.9;
font-size: 16.5px;
padding-top: var(--topbar-h);
}
::selection { background: rgba(27, 95, 176, 0.18); }
a { color: var(--blue-deep); text-decoration: none; border-bottom: 1px solid rgba(27, 95, 176, 0.35); }
a:hover { color: var(--orange); border-bottom-color: var(--orange); }
code {
font-family: var(--mono);
font-size: 0.855em;
background: rgba(21, 32, 43, 0.06);
border-radius: 4px;
padding: 0.1em 0.4em;
color: var(--ink);
word-break: break-word;
}
strong { color: var(--ink); }
em { font-style: normal; color: var(--blue-deep); font-weight: 600; }
/* ============ 顶部条(fixed):图纸标题栏 ============ */
.topbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 90;
height: var(--topbar-h);
background: rgba(244, 247, 250, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line);
display: flex; align-items: center; gap: 14px;
padding: 0 18px;
}
.topbar .brand {
font-family: var(--serif);
font-weight: 700; font-size: 19px; letter-spacing: 0.2em;
color: var(--ink); border: none; white-space: nowrap;
display: flex; align-items: center; gap: 9px;
}
.topbar .brand:hover { color: var(--blue-deep); }
.topbar .brand .mark {
font-family: var(--mono); font-weight: 700; font-size: 13px;
color: #fff; background: var(--blue);
width: 24px; height: 24px; border-radius: 6px;
display: inline-flex; align-items: center; justify-content: center;
letter-spacing: 0; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35);
}
/* 阅读进度:一叠楼层(读过=蓝,当前=橙,未读=灰) */
.topbar .floors {
flex: 1; min-width: 60px; height: 100%;
display: flex; align-items: center; gap: 3px; overflow: hidden;
}
.topbar .floors i {
flex: 1 1 0; min-width: 0; height: 11px; border-radius: 2px;
background: var(--paper-3);
transition: background 0.2s ease;
}
.topbar .floors i.done { background: var(--blue); }
.topbar .floors i.cur { background: var(--orange); box-shadow: 0 0 0 2px rgba(194, 90, 21, 0.22); }
.topbar .ch-pos {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
color: var(--ink-faint); white-space: nowrap;
}
.topbar .ch-pos b { color: var(--blue-deep); font-weight: 600; }
.topbar .toc-btn {
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em;
color: var(--ink); background: transparent;
border: 1px solid var(--line-strong); border-radius: 6px;
padding: 6px 13px; cursor: pointer; white-space: nowrap;
}
.topbar .toc-btn:hover { border-color: var(--blue); color: var(--blue-deep); background: var(--blue-mist); }
@media (max-width: 640px) {
.topbar { gap: 10px; padding: 0 12px; }
.topbar .ch-pos { display: none; }
}
/* ============ 目录覆盖层:图纸目录 ============ */
.toc-overlay {
position: fixed; inset: 0; z-index: 200;
background: rgba(244, 247, 250, 0.985);
overflow-y: auto;
opacity: 0; pointer-events: none;
transition: opacity 0.22s ease;
}
.toc-overlay.open { opacity: 1; pointer-events: auto; }
.toc-inner { max-width: 730px; margin: 0 auto; padding: 60px 22px 90px; }
.toc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.toc-head h2 {
font-family: var(--serif); font-size: 30px; letter-spacing: 0.26em;
color: var(--ink); font-weight: 700;
}
.toc-head .close {
font-family: var(--mono); font-size: 12px; color: var(--ink-faint);
background: none; border: 1px solid var(--line-strong); border-radius: 6px;
padding: 6px 12px; cursor: pointer;
}
.toc-head .close:hover { color: var(--orange); border-color: var(--orange); }
.toc-sub { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); margin-bottom: 34px; }
.toc-vol { position: relative; padding-left: 34px; margin-bottom: 8px; }
.toc-vol::before {
content: ""; position: absolute; left: 10px; top: 6px; bottom: -8px;
width: 3px; border-radius: 2px;
background: linear-gradient(to bottom, var(--green) 0%, var(--blue) 55%, var(--orange) 100%);
opacity: 0.45;
}
.toc-vol:last-child::before { bottom: 12px; }
.toc-vol::after {
content: ""; position: absolute; left: 4px; top: 8px;
width: 15px; height: 15px; border-radius: 3px;
background: var(--paper); border: 3px solid var(--blue);
}
.toc-vol .vol-name {
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em;
color: var(--blue-deep); font-weight: 700; margin-bottom: 2px;
}
.toc-vol .vol-desc { font-size: 13px; color: var(--ink-faint); margin-bottom: 12px; }
.toc-vol ol { list-style: none; margin-bottom: 26px; }
.toc-vol li a {
display: flex; align-items: baseline; gap: 12px;
padding: 7px 10px; border: none; border-radius: 7px;
color: var(--ink-body); font-size: 15px;
}
.toc-vol li a:hover { background: var(--blue-mist); color: var(--blue-deep); }
.toc-vol li a .no { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); min-width: 22px; }
.toc-vol li a .demo-tag {
margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
color: var(--orange); border: 1px solid rgba(194, 90, 21, 0.4);
border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}
.toc-vol li a.cur { background: var(--blue-mist); color: var(--blue-deep); font-weight: 600; }
.toc-vol li a.cur .no { color: var(--blue); }
/* ============ 章节页骨架 ============ */
.content { display: block; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.chapter-head { padding: 58px 0 10px; }
.chapter-head .kicker {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
color: var(--ink-faint); margin-bottom: 18px;
}
.chapter-head .kicker .vol { color: var(--blue-deep); font-weight: 700; }
.chapter-head .kicker .heat { color: var(--orange); }
.chapter-head .kicker .sep { width: 24px; height: 1px; background: var(--line-strong); }
.chapter-head h1 {
font-family: var(--serif); font-size: 40px; line-height: 1.35;
color: var(--ink); font-weight: 700; letter-spacing: 0.01em;
margin-bottom: 20px;
}
.chapter-head h1 em { font-style: normal; color: var(--blue); }
.chapter-head .lede {
font-size: 17px; line-height: 2.0; color: var(--ink-body);
border-left: 3px solid transparent;
border-image: linear-gradient(to bottom, var(--blue), var(--orange)) 1;
padding-left: 18px;
margin-bottom: 22px;
}
.chapter-head .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.chapter-head .tags span {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
color: var(--blue-deep); background: var(--blue-mist);
border-radius: 5px; padding: 3px 10px;
}
.headrule {
border: none; height: 3px; margin: 34px 0 8px; border-radius: 2px;
background: linear-gradient(to right, var(--blue), var(--orange) 60%, rgba(194, 90, 21, 0) 100%);
opacity: 0.65;
}
/* ============ 正文排印 ============ */
.prose { padding-bottom: 30px; }
.prose h2 {
font-family: var(--serif); font-size: 26px; color: var(--ink);
font-weight: 700; line-height: 1.5;
margin: 54px 0 18px; padding-bottom: 10px;
border-bottom: 1px solid var(--line);
position: relative;
}
.prose h2::after {
content: ""; position: absolute; left: 0; bottom: -1px;
width: 62px; height: 2px;
background: linear-gradient(to right, var(--blue), var(--orange));
}
.prose h3 {
font-family: var(--serif); font-size: 20px; color: var(--ink);
font-weight: 700; margin: 38px 0 14px;
display: flex; align-items: center; gap: 10px;
}
.prose h3::before { content: "▍"; color: var(--orange); font-size: 15px; }
.prose p { margin: 0 0 18px; }
.prose ul, .prose ol { margin: 0 0 18px; padding-left: 26px; }
.prose li { margin-bottom: 8px; }
.prose li::marker { color: var(--blue); font-family: var(--mono); font-size: 0.9em; }
.prose hr { border: none; border-top: 1px dashed var(--line-strong); margin: 40px 0; }
.prose table {
width: 100%; border-collapse: collapse; margin: 22px 0;
font-size: 14.5px; line-height: 1.75;
background: rgba(255, 255, 255, 0.66);
}
.prose th, .prose td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; vertical-align: top; }
.prose th {
font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em;
color: var(--ink); background: var(--paper-2); font-weight: 600;
white-space: nowrap;
}
.prose td.y { color: var(--green-deep); font-weight: 600; }
.prose td.n { color: var(--red-deep); font-weight: 600; }
.prose td.u { color: var(--blue-deep); font-weight: 600; }
.table-scroll { overflow-x: auto; }
.table-scroll table { min-width: 620px; }
/* ============================================================
项目徽章 —— 三个参考项目,贯穿全书
Now in Android
============================================================ */
.proj {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
font-weight: 600; color: #fff;
border-radius: 5px; padding: 1px 8px; white-space: nowrap;
vertical-align: 0.1em;
}
.proj::before { content: "◈"; font-size: 9px; opacity: 0.85; }
.proj.nia { background: var(--nia); }
.proj.mihon { background: var(--mihon); }
.proj.dk { background: var(--dk); }
.proj.ghost { background: transparent; color: var(--ink-faint); border: 1px solid var(--line-strong); }
.proj.ghost::before { content: "◇"; }
/* ============================================================
变更行 —— 「你错过的 18 个月」的一等公民
NavHost + 字符串路由
你自己持有 back stack
2025-11
============================================================ */
.diff {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
border: 1px solid var(--line); border-radius: 9px;
background: rgba(255, 255, 255, 0.72);
padding: 11px 15px; margin: 14px 0;
}
.diff .old {
font-family: var(--mono); font-size: 12.5px;
color: var(--red-deep); background: var(--red-mist);
border-radius: 5px; padding: 2px 9px;
text-decoration: line-through; text-decoration-color: rgba(185, 59, 51, 0.5);
}
.diff .arr { flex: none; width: 26px; height: 2px; background: var(--line-strong); position: relative; }
.diff .arr::after {
content: ""; position: absolute; right: -1px; top: -3px;
border-left: 7px solid var(--line-strong);
border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.diff .new {
font-family: var(--mono); font-size: 12.5px; font-weight: 600;
color: var(--blue-deep); background: var(--blue-mist);
border-radius: 5px; padding: 2px 9px;
}
.diff .when {
margin-left: auto; font-family: var(--mono); font-size: 10.5px;
letter-spacing: 0.08em; color: var(--ink-faint); white-space: nowrap;
}
.diff .note { flex-basis: 100%; font-size: 13px; color: var(--ink-faint); line-height: 1.7; }
/* ============================================================
结构剖面 —— 分层架构画成一栋楼
============================================================ */
.strata { margin: 24px 0; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-strong); }
.strata .layer {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding: 14px 18px;
border-bottom: 1px solid var(--line);
background: rgba(255, 255, 255, 0.72);
}
.strata .layer:last-child { border-bottom: none; }
.strata .layer b {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em;
min-width: 92px; flex: none;
}
.strata .layer span { font-size: 14px; color: var(--ink-body); line-height: 1.75; flex: 1; min-width: 200px; }
.strata .layer .tag {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
border-radius: 4px; padding: 1px 7px; flex: none;
border: 1px solid var(--line-strong); color: var(--ink-faint); background: #fff;
}
.strata .layer.ui { border-left: 4px solid var(--blue); }
.strata .layer.ui b { color: var(--blue-deep); }
.strata .layer.domain { border-left: 4px solid var(--amber); background: rgba(247, 239, 218, 0.4); }
.strata .layer.domain b { color: var(--amber-deep); }
.strata .layer.data { border-left: 4px solid var(--green); }
.strata .layer.data b { color: var(--green-deep); }
.strata .layer.found { border-left: 4px solid var(--ink-faint); background: var(--paper-2); }
.strata .layer.found b { color: var(--ink); }
/* ============ callout 卡 ============ */
.co {
border-radius: 10px; padding: 16px 20px 14px; margin: 24px 0;
border: 1px solid; border-left-width: 4px;
background: rgba(255, 255, 255, 0.6);
font-size: 15.2px; line-height: 1.95;
}
.co .co-t {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.co p { margin-bottom: 10px; }
.co p:last-child { margin-bottom: 2px; }
.co code { background: rgba(21, 32, 43, 0.06); }
.co ul, .co ol { margin: 0 0 10px; padding-left: 22px; }
.co li { margin-bottom: 6px; }
/* ◆ 判词:必须带走的结论(蓝) */
.co.core { border-color: rgba(27, 95, 176, 0.4); border-left-color: var(--blue); background: var(--blue-mist); }
.co.core .co-t { color: var(--blue-deep); }
/* ▣ 承重:这部分没变,你原来会的仍然作数(绿) */
.co.keep { border-color: rgba(30, 122, 76, 0.4); border-left-color: var(--green); background: var(--green-mist); }
.co.keep .co-t { color: var(--green-deep); }
/* ✂ 拆除:作废的 API / 过时的心智模型(红) */
.co.gone { border-color: rgba(185, 59, 51, 0.4); border-left-color: var(--red); background: var(--red-mist); }
.co.gone .co-t { color: var(--red-deep); }
/* ⚠ 坑:会咬人的地方(琥珀) */
.co.trap { border-color: rgba(169, 121, 26, 0.42); border-left-color: var(--amber); background: var(--amber-mist); }
.co.trap .co-t { color: var(--amber-deep); }
/* ⌗ 现场:真实项目里它长什么样(橙) */
.co.real { border-color: rgba(194, 90, 21, 0.4); border-left-color: var(--orange); background: var(--orange-mist); }
.co.real .co-t { color: var(--orange-deep); }
/* ✚ 动手(绿描边 + 纸底) */
.co.try { border-color: rgba(30, 122, 76, 0.4); border-left-color: var(--green); background: rgba(226, 241, 232, 0.5); }
.co.try .co-t { color: var(--green-deep); }
/* ============ 代码块 ============ */
pre {
font-family: var(--mono); font-size: 13.5px; line-height: 1.8;
border-radius: 10px; padding: 18px 20px; margin: 22px 0;
overflow-x: auto; position: relative;
white-space: pre; tab-size: 4;
}
pre .tag-corner {
position: absolute; top: 0; right: 0;
font-size: 9.5px; letter-spacing: 0.12em; font-weight: 600;
padding: 3px 10px; border-radius: 0 9px 0 8px;
user-select: none; color: #fff;
}
pre.kt { background: #FFFFFF; color: var(--ink-body); border: 1px solid var(--line); border-top: 3px solid var(--kt); }
pre.kt .tag-corner { background: var(--kt); }
pre.toml { background: var(--toml-mist); color: var(--ink-body); border: 1px solid rgba(44, 122, 123, 0.3); border-top: 3px solid var(--toml); }
pre.toml .tag-corner { background: var(--toml); }
pre.xml { background: var(--xml-mist); color: var(--ink-body); border: 1px solid rgba(75, 143, 106, 0.3); }
pre.xml .tag-corner { background: var(--xml); }
pre.sh { background: var(--paper-2); color: var(--ink-body); border: 1px solid var(--line); }
pre.sh .tag-corner { background: var(--ink); }
pre.tree { background: #FBFCFD; color: var(--ink-body); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); }
pre.tree .tag-corner { background: var(--ink-faint); }
pre.tree .oerr { color: var(--red-deep); font-weight: 600; }
pre.tree .ook { color: var(--green-deep); }
pre.tree .odim { color: var(--ink-faint); }
/* 高亮 token */
.tk-kw { color: var(--tok-kw); font-weight: 600; }
.tk-ty { color: var(--tok-ty); font-weight: 600; }
.tk-st { color: var(--tok-str); }
.tk-nu { color: var(--tok-num); }
.tk-co { color: var(--tok-com); font-style: italic; }
.tk-op { color: var(--tok-op); }
.tk-fn { color: var(--tok-fn); font-weight: 600; }
.tk-an { color: var(--tok-ann); font-weight: 600; }
.tk-sec { color: var(--toml); font-weight: 700; } /* TOML [section] */
.hl-bad { background: rgba(185, 59, 51, 0.14); border-radius: 3px; }
.hl-good { background: rgba(30, 122, 76, 0.16); border-radius: 3px; }
.hl-new { background: rgba(27, 95, 176, 0.14); border-radius: 3px; }
.hl-hot { background: rgba(194, 90, 21, 0.16); border-radius: 3px; }
/* ============ Demo 部件 ============ */
.demo {
border: 1.5px solid var(--blue); border-radius: 12px;
margin: 30px 0; background: #fff;
box-shadow: 0 2px 0 rgba(15, 64, 111, 0.13);
overflow: hidden;
}
.demo-head {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(to right, var(--blue-mist), rgba(250, 236, 222, 0.55));
border-bottom: 1px solid rgba(27, 95, 176, 0.22);
padding: 9px 16px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
color: var(--blue-deep); font-weight: 700;
}
.demo-head .led {
width: 9px; height: 9px; border-radius: 50%; flex: none;
background: var(--blue);
box-shadow: 0 0 0 3px rgba(27, 95, 176, 0.16);
animation: led-pulse 2.2s ease-in-out infinite;
}
@keyframes led-pulse {
0%, 100% { box-shadow: 0 0 0 3px rgba(27, 95, 176, 0.16); opacity: 1; }
50% { box-shadow: 0 0 0 5px rgba(27, 95, 176, 0.05); opacity: 0.72; }
}
.demo-head .d-hint { margin-left: auto; color: var(--ink-faint); font-weight: 400; letter-spacing: 0.06em; font-size: 10px; }
.demo-body { padding: 16px; }
.d-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.d-row:last-child { margin-bottom: 0; }
.d-btn {
font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em;
background: var(--blue); color: #fff;
border: none; border-radius: 7px; padding: 7px 15px; cursor: pointer;
}
.d-btn:hover { background: var(--blue-deep); }
.d-btn:disabled { background: var(--paper-3); color: var(--ink-faint); cursor: not-allowed; }
.d-btn.ghost { background: transparent; color: var(--blue-deep); border: 1px solid var(--blue); }
.d-btn.ghost:hover { background: var(--blue-mist); }
.d-btn.hot { background: var(--orange); }
.d-btn.hot:hover { background: var(--orange-deep); }
.d-btn.bad { background: var(--red); }
.d-btn.bad:hover { background: var(--red-deep); }
.d-btn.ok { background: var(--green); }
.d-btn.ok:hover { background: var(--green-deep); }
.d-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.d-chip {
font-family: var(--mono); font-size: 11.5px;
border: 1px solid var(--line-strong); border-radius: 999px;
background: #fff; color: var(--ink-body);
padding: 5px 13px; cursor: pointer; white-space: nowrap;
transition: all 0.14s ease;
}
.d-chip:hover { border-color: var(--blue); color: var(--blue-deep); }
.d-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
.d-chip.on.orange { background: var(--orange); border-color: var(--orange); }
.d-chip.on.purple { background: var(--mihon); border-color: var(--mihon); }
.d-chip.on.green { background: var(--green); border-color: var(--green); }
.d-in, .d-sel, textarea.d-in {
font-family: var(--mono); font-size: 13px;
border: 1px solid var(--line-strong); border-radius: 7px;
background: var(--paper); color: var(--ink);
padding: 7px 11px; outline: none;
}
.d-in:focus, .d-sel:focus { border-color: var(--blue); background: #fff; }
.d-note { font-size: 12.5px; color: var(--ink-faint); line-height: 1.75; }
.d-note b { color: var(--ink); }
.d-note .bad { color: var(--red-deep); font-weight: 600; }
.d-note .good { color: var(--green-deep); font-weight: 600; }
.d-note .new { color: var(--blue-deep); font-weight: 600; }
/* 滑块 */
.d-slider { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); }
.d-slider input[type=range] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 2px; background: var(--paper-3); outline: none; width: 150px; }
.d-slider input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none; appearance: none; width: 14px; height: 14px;
border-radius: 50%; background: var(--blue); cursor: pointer; border: 2px solid #fff;
box-shadow: 0 0 0 1px var(--blue);
}
.d-slider input[type=range]::-moz-range-thumb {
width: 12px; height: 12px; border-radius: 50%; background: var(--blue); cursor: pointer; border: 2px solid #fff;
}
.d-slider b { color: var(--blue-deep); font-weight: 600; min-width: 44px; display: inline-block; }
/* SVG 舞台 */
.d-stage { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); overflow: hidden; }
.d-stage svg { display: block; width: 100%; height: auto; }
/* 结果面板 */
.d-panel {
border: 1px solid var(--line); border-radius: 8px;
background: var(--paper); padding: 11px 14px;
font-family: var(--mono); font-size: 12.5px; line-height: 1.8;
color: var(--ink-body);
}
.d-panel b { color: var(--blue-deep); }
.d-panel .big { font-size: 19px; font-weight: 700; color: var(--orange); }
.d-panel .big.g { color: var(--green); }
.d-out {
font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
border: 1px solid var(--line); border-radius: 8px;
background: #FBFCFD; padding: 11px 13px;
white-space: pre-wrap; word-break: break-word;
max-height: 300px; overflow-y: auto; color: var(--ink-body);
}
.d-out.err { border-left: 3px solid var(--red); }
.d-out .err { color: var(--red-deep); font-weight: 600; }
.d-out .ok { color: var(--green-deep); }
.d-out .dim { color: var(--ink-faint); }
.d-out .hot { color: var(--orange-deep); font-weight: 600; }
.d-out .new { color: var(--blue-deep); font-weight: 600; }
/* 步进器 */
.d-steps { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); flex-wrap: wrap; }
.d-steps .cur { color: var(--orange); font-weight: 700; }
.d-dots { display: flex; gap: 5px; }
.d-dots i { width: 9px; height: 9px; border-radius: 2px; display: block; background: var(--paper-3); cursor: pointer; }
.d-dots i.on { background: var(--orange); }
.d-dots i.done { background: var(--blue); }
/* 左右对照 */
.d-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d-split > div { min-width: 0; }
.d-split3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.d-split3 > div { min-width: 0; }
.d-pane-t {
font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
color: var(--ink-faint); margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
}
.d-pane-t .dot { width: 7px; height: 7px; border-radius: 2px; flex: none; }
.d-pane-t .dot.a { background: var(--nia); }
.d-pane-t .dot.b { background: var(--mihon); }
.d-pane-t .dot.c { background: var(--dk); }
.d-pane {
font-family: var(--mono); font-size: 12px; line-height: 1.7;
border-radius: 8px; padding: 12px 13px;
overflow-x: auto; white-space: pre; tab-size: 4;
border: 1px solid var(--line); background: #fff;
min-height: 90px;
}
.d-pane.b { background: var(--paper); }
@media (max-width: 700px) { .d-split3 { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .d-split { grid-template-columns: 1fr; } }
/* 徽章 */
.d-badge {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
border-radius: 5px; padding: 2px 8px; white-space: nowrap;
}
.d-badge.ok { color: var(--green-deep); background: var(--green-mist); border: 1px solid rgba(30, 122, 76, 0.4); }
.d-badge.bad { color: var(--red-deep); background: var(--red-mist); border: 1px solid rgba(185, 59, 51, 0.4); }
.d-badge.info { color: var(--blue-deep); background: var(--blue-mist); border: 1px solid rgba(27, 95, 176, 0.35); }
.d-badge.warn { color: var(--amber-deep); background: var(--amber-mist); border: 1px solid rgba(169, 121, 26, 0.4); }
.d-badge.hot { color: var(--orange-deep); background: var(--orange-mist); border: 1px solid rgba(194, 90, 21, 0.4); }
/* 决策树 / 判词 */
.d-tree-q { font-size: 15px; color: var(--ink); margin-bottom: 10px; font-weight: 600; }
.d-path { font-family: var(--mono); font-size: 11.5px; color: var(--ink-faint); margin-bottom: 10px; }
.d-path span { color: var(--blue-deep); }
.d-verdict { border: 1px solid var(--blue); border-radius: 9px; padding: 13px 15px; background: var(--blue-mist); }
.d-verdict .vt { font-family: var(--mono); font-size: 16px; color: var(--blue-deep); font-weight: 700; margin-bottom: 6px; }
/* 条形图 */
.d-bars { display: flex; flex-direction: column; gap: 7px; }
.d-bar { display: flex; align-items: center; gap: 9px; }
.d-bar .bl { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); min-width: 84px; text-align: right; flex: none; }
.d-bar .bt { flex: 1; height: 22px; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.d-bar .bt i { display: block; height: 100%; transition: width 0.3s ease; }
.d-bar .bt i.blue { background: var(--blue); }
.d-bar .bt i.orange { background: var(--orange); }
.d-bar .bt i.green { background: var(--green); }
.d-bar .bt i.red { background: var(--red); }
.d-bar .bv { font-family: var(--mono); font-size: 11px; color: var(--ink-body); min-width: 52px; flex: none; }
/* ============================================================
Demo 专用:手机/平板画布(Nav3 返回栈模拟器、状态持有者)
============================================================ */
.d-device {
border: 2px solid var(--ink); border-radius: 12px;
background: #fff; overflow: hidden;
display: flex; flex-direction: column;
transition: max-width 0.32s ease;
margin: 0 auto;
}
.d-device .dv-bar {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
background: var(--ink); color: #fff; padding: 3px 10px;
display: flex; justify-content: space-between; align-items: center;
}
.d-device .dv-body { display: flex; min-height: 190px; }
.d-device .dv-pane { flex: 1; padding: 12px 13px; min-width: 0; border-right: 1px solid var(--line); }
.d-device .dv-pane:last-child { border-right: none; }
.d-device .dv-pane.detail { background: var(--paper); }
.d-device .dv-pane .pt {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
color: var(--ink-faint); margin-bottom: 7px;
border-bottom: 1px dashed var(--line-strong); padding-bottom: 5px;
}
.d-device .dv-pane .pc { font-size: 13px; color: var(--ink-body); line-height: 1.7; }
.d-device .dv-pane .pc .item {
padding: 3px 7px; border-radius: 5px; margin-bottom: 3px;
background: var(--paper-2); font-size: 12px;
}
.d-device .dv-pane .pc .item.sel { background: var(--blue-mist); color: var(--blue-deep); font-weight: 600; }
.d-device .dv-empty {
flex: 1; display: flex; align-items: center; justify-content: center;
font-family: var(--mono); font-size: 11px; color: var(--ink-faint);
}
/* 返回栈的可视化 */
.d-stack { display: flex; flex-direction: column-reverse; gap: 4px; }
.d-stack .fr {
font-family: var(--mono); font-size: 11.5px;
border: 1px solid var(--line-strong); border-left: 3px solid var(--blue);
border-radius: 6px; padding: 5px 10px; background: #fff;
display: flex; align-items: center; gap: 8px;
}
.d-stack .fr.top { border-left-color: var(--orange); background: var(--orange-mist); font-weight: 600; }
.d-stack .fr .ix { color: var(--ink-faint); font-size: 10px; min-width: 16px; }
.d-stack .fr .vm {
margin-left: auto; font-size: 9px; letter-spacing: 0.06em;
color: var(--green-deep); background: var(--green-mist);
border: 1px solid rgba(30, 122, 76, 0.35); border-radius: 4px; padding: 0 6px;
}
.d-stack .fr .vm.dead { color: var(--red-deep); background: var(--red-mist); border-color: rgba(185, 59, 51, 0.35); }
.d-stack .fr.gone { border-left-color: var(--red); background: var(--red-mist); opacity: 0.8; }
.d-stack .fr.gone .ix { color: var(--red); }
/* ============ 折叠问答 ============ */
.qa {
border: 1px solid var(--line); border-left: 4px solid var(--blue);
border-radius: 9px; margin: 12px 0; background: rgba(255, 255, 255, 0.68);
overflow: hidden;
}
.qa > summary {
cursor: pointer; padding: 13px 18px; list-style: none;
font-size: 15.5px; color: var(--ink); font-weight: 600;
display: flex; align-items: baseline; gap: 10px;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
content: "点开看答案"; margin-left: auto; flex: none;
font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em;
color: var(--ink-faint); font-weight: 400;
}
.qa[open] > summary::after { content: "收起"; }
.qa[open] > summary { border-bottom: 1px dashed var(--line-strong); }
.qa > summary:hover { background: var(--blue-mist); }
.qa > summary .qn { font-family: var(--mono); font-size: 12px; color: var(--orange); font-weight: 700; flex: none; }
.qa .qbody { padding: 14px 18px 6px; font-size: 15.2px; line-height: 1.95; }
.qa .qbody pre { margin: 12px 0; }
.qa .qbody .hit {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
color: var(--blue-deep); background: var(--blue-mist);
border-radius: 5px; padding: 2px 9px; display: inline-block; margin-bottom: 8px;
}
/* ============ 翻页 ============ */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 56px 0 30px; }
.pager a {
border: 1px solid var(--line); border-radius: 10px;
padding: 15px 18px; background: rgba(255, 255, 255, 0.7);
display: block; color: var(--ink-body);
}
.pager a:hover { border-color: var(--blue); background: var(--blue-mist); }
.pager a .dir {
font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
color: var(--ink-faint); display: block; margin-bottom: 5px;
}
.pager a .t { font-size: 14.5px; color: var(--ink); font-weight: 600; }
.pager a.next { text-align: right; }
.pager a.none { visibility: hidden; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager a.next { text-align: left; } }
.foot {
border-top: 1px solid var(--line);
padding: 22px 0 46px; text-align: center;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
color: var(--ink-faint);
}
.foot a { color: var(--blue-deep); border: none; }
/* ============ 总览页(index) ============ */
.hero { padding: 72px 0 30px; position: relative; }
.hero .surv {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em;
color: var(--orange); margin-bottom: 22px;
display: flex; align-items: center; gap: 12px;
}
.hero .surv::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.hero h1 {
font-family: var(--serif); font-size: 76px; letter-spacing: 0.1em;
color: var(--ink); font-weight: 700; line-height: 1.15; margin-bottom: 6px;
}
.hero h1 .sig {
background: linear-gradient(135deg, var(--blue), var(--orange));
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: var(--blue);
}
.hero .en {
font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.4em;
color: var(--ink-faint); margin-bottom: 30px;
}
.hero .pitch { font-size: 17.5px; line-height: 2.05; max-width: 670px; margin-bottom: 14px; }
.hero .pitch strong { color: var(--blue-deep); }
.hero-scope { margin: 36px 0 8px; }
.hero-scope svg { width: 100%; height: auto; display: block; }
.hero .meta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; align-items: center; }
.hero .meta-row span {
font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
color: var(--ink); background: rgba(255, 255, 255, 0.75);
border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px;
}
.hero .meta-row span b { color: var(--orange); font-weight: 600; }
@media (max-width: 640px) { .hero h1 { font-size: 54px; } }
.station { margin: 46px 0 12px; position: relative; }
.station .st-kick {
display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--blue-deep); font-weight: 700;
}
.station .st-kick .dot {
width: 13px; height: 13px; border-radius: 3px; flex: none;
background: var(--paper); border: 3px solid var(--blue);
}
.station .st-kick .bar {
flex: 1; height: 3px; border-radius: 2px;
background: linear-gradient(to right, rgba(27, 95, 176, 0.5), rgba(194, 90, 21, 0.08));
}
.station h2 { font-family: var(--serif); font-size: 27px; color: var(--ink); font-weight: 700; margin-bottom: 4px; }
.station .st-desc { font-size: 14.5px; color: var(--ink-faint); margin-bottom: 20px; }
.ch-list { display: grid; gap: 12px; margin-bottom: 14px; }
.ch-card {
display: flex; gap: 16px; align-items: baseline;
border: 1px solid var(--line); border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
padding: 15px 18px; color: var(--ink-body);
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ch-card:hover { border-color: var(--blue); background: var(--blue-mist); transform: translateX(4px); }
.ch-card .no { font-family: var(--mono); font-size: 13px; color: var(--orange); font-weight: 600; min-width: 30px; }
.ch-card .body { flex: 1; }
.ch-card .t { font-size: 16.5px; color: var(--ink); font-weight: 600; margin-bottom: 3px; display: block; }
.ch-card .d { font-size: 13.5px; color: var(--ink-faint); line-height: 1.75; display: block; }
.ch-card .demo-tag {
font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
color: var(--orange); border: 1px solid rgba(194, 90, 21, 0.4);
border-radius: 4px; padding: 2px 7px; white-space: nowrap; align-self: center;
}
/* ============ 杂项 ============ */
.kbd {
font-family: var(--mono); font-size: 0.82em;
border: 1px solid var(--line-strong); border-bottom-width: 2px;
border-radius: 5px; padding: 0.05em 0.45em;
background: #fff; color: var(--ink);
}
.small-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--ink-faint); }
@media (max-width: 640px) {
body { font-size: 15.5px; }
.chapter-head h1 { font-size: 30px; }
.prose h2 { font-size: 22px; }
pre { font-size: 12.5px; padding: 14px 14px; }
.strata .layer b { min-width: 100%; }
}