1449 lines
76 KiB
CSS
1449 lines
76 KiB
CSS
/* ==================================================================
|
||
Natural Memory — site.css
|
||
|
||
设计系统见项目根目录 DESIGN.md（设计动作的产物，写在动效之前）。
|
||
本文件按 motion-web skill 重建：
|
||
|
||
调色 data/visual-bank.json → p-07「Bold Black + Signal Accent」
|
||
纯黑地面 #000000 · 骨白 #fffef4 · 次级 #9a9a92 · 三级 #5c5c56
|
||
信号色 #00ff6a —— 每页只出现一次（原型原文：one per page max）
|
||
渐变全部删除（获奖站 15/15 都不用渐变做背景）
|
||
|
||
字体 两个家族（获奖站中位数 2）：
|
||
Archivo Variable（wght 100–900 · wdth 62–125%）—— 显示、正文拉丁、全部数字
|
||
Geist Mono —— 标签、代码、字段名
|
||
中文回落系统 CJK，不额外加载 CJK 字体
|
||
|
||
字阶 落差就是设计（page-design.md §4）：
|
||
mega 200px / display 104px 对 body 14px = 14× / 7.4×
|
||
中文大字与拉丁大字参数不同（§4 明确点名）：
|
||
拉丁 .dsp--lat lh .90 ls -.045em 700 stretch 92%
|
||
中文 .dsp lh 1.28 ls -.005em 500
|
||
|
||
版面 全幅页面、逐元素 measure（获奖站 15/15 都没有 body 全局 max-width）
|
||
间距不是常数：tight / normal / wide 三档按语义给
|
||
================================================================== */
|
||
|
||
/* ---------- 1. 字体 ---------- */
|
||
@font-face {
|
||
font-family: "Archivo Variable"; font-style: normal; font-weight: 100 900;
|
||
font-stretch: 62% 125%; font-display: swap;
|
||
src: url("../fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations");
|
||
}
|
||
@font-face {
|
||
font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
|
||
src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations");
|
||
}
|
||
|
||
/* ---------- 2. 令牌 ---------- */
|
||
:root {
|
||
/* 颜色 · p-07 —— 三个灰 + 一个信号色，不再有别的色相 */
|
||
--canvas: #000000;
|
||
--canvas-soft: #0e0e0e; /* 悬停/激活面 */
|
||
--canvas-card: #000000; /* 卡片与地面同色：层次只靠发丝线 */
|
||
--canvas-mid: #262623; /* 轨道底 */
|
||
--hairline: #1f1f1c;
|
||
--btn-border: rgba(255, 255, 255, .28);
|
||
--ink: #fffef4; /* 骨白，不是纯白 */
|
||
--ink-hover: #ffffff;
|
||
--on-primary: #000000;
|
||
--body: #9a9a92;
|
||
--mute: #5c5c56;
|
||
--signal: #00ff6a; /* 每页只用一次：首屏画布里那颗目标记录 */
|
||
|
||
/* 圆角：p-07 是硬边原型，圆角压到最小 */
|
||
--r-sm: 2px;
|
||
--r-pill: 9999px;
|
||
|
||
/* 间距 —— 4px 基数 */
|
||
--sp-xxs: 2px;
|
||
--sp-xs: 4px;
|
||
--sp-sm: 8px;
|
||
--sp-md: 12px;
|
||
--sp-lg: 16px;
|
||
--sp-xl: 24px;
|
||
--sp-2xl: 32px;
|
||
--sp-3xl: 48px;
|
||
--sp-4xl: 64px;
|
||
|
||
/* 版式 */
|
||
--font-sans: "Archivo Variable", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
|
||
--font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
|
||
|
||
/* 字阶 —— mega ÷ body = 14×，display ÷ body = 7.4× */
|
||
--fs-mega: clamp(72px, 12vw, 200px);
|
||
--fs-display: clamp(44px, 7vw, 104px);
|
||
--fs-display-xl: var(--fs-display);
|
||
--fs-display-lg: clamp(32px, 4.6vw, 64px);
|
||
--fs-display-md: clamp(26px, 3.2vw, 44px);
|
||
--fs-display-sm: 24px;
|
||
--fs-display-xs: 18px;
|
||
--fs-lede: 1.125rem;
|
||
--fs-body: 0.875rem; /* 14px */
|
||
--fs-small: 0.875rem; /* 连续正文：不为了「看起来精致」压到 13px */
|
||
--fs-label: 0.75rem; /* 12px，标签/注释/字段名 */
|
||
|
||
--lh-lat: .90; /* 拉丁巨字 */
|
||
--lh-cjk: 1.28; /* 中文巨字：行高更大、负字距要收 */
|
||
--ls-lat: -.045em;
|
||
--ls-cjk: -.005em;
|
||
--ls-display: var(--ls-cjk);
|
||
--font-stretch-display: 92%;
|
||
|
||
/* 版面 */
|
||
--container: 1440px; /* 内层栅格上限，不是 body 的 max-width */
|
||
--measure: 62ch;
|
||
--measure-wide: 88ch;
|
||
--nav-h: 66px;
|
||
|
||
/* 段落留白 —— 三档，按「两块该不该被读成一组」给 */
|
||
--band-tight: clamp(48px, 6vw, 80px);
|
||
--band: clamp(80px, 10vw, 152px);
|
||
--band-wide: clamp(120px, 16vw, 248px);
|
||
|
||
/* 动效令牌（motion-tokens.md） */
|
||
--dur-fast: 160ms;
|
||
--dur-std: 300ms;
|
||
--dur-med: 460ms;
|
||
--dur-slow: 700ms;
|
||
--dur-cine: 1200ms;
|
||
--ease-exp: cubic-bezier(.16, 1, .3, 1);
|
||
--ease-sharp: cubic-bezier(.65, 0, .45, 1);
|
||
--ease-circ: cubic-bezier(0, .55, .45, 1);
|
||
--ease-in-expo: cubic-bezier(.7, 0, .84, 0);
|
||
--ease: var(--ease-exp); /* 兼容旧引用 */
|
||
}
|
||
|
||
/* ---------- 3. 基础 ---------- */
|
||
*, *::before, *::after { box-sizing: border-box; }
|
||
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
|
||
|
||
body {
|
||
margin: 0;
|
||
background: var(--canvas);
|
||
color: var(--body);
|
||
font-family: var(--font-sans);
|
||
font-size: var(--fs-body);
|
||
line-height: 1.7;
|
||
font-weight: 400;
|
||
letter-spacing: 0;
|
||
font-synthesis-weight: none;
|
||
text-wrap: pretty;
|
||
-webkit-font-smoothing: antialiased;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
|
||
::selection { background: var(--ink); color: var(--on-primary); }
|
||
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
|
||
|
||
/* 行内代码 */
|
||
code {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.9em;
|
||
color: var(--ink);
|
||
background: var(--canvas-soft);
|
||
padding: 1px 5px;
|
||
border-radius: var(--r-sm);
|
||
}
|
||
/* pre 必须显式指定：UA 样式表给的是 font-family: monospace，
|
||
不覆盖的话代码块会掉回浏览器默认等宽字体（此前全站就是这样）。 */
|
||
pre {
|
||
margin: 0;
|
||
font-family: var(--font-mono);
|
||
font-size: var(--fs-label);
|
||
line-height: 1.75;
|
||
tab-size: 2;
|
||
}
|
||
pre code { background: none; padding: 0; font-size: inherit; border-radius: 0; }
|
||
|
||
.wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 56px); }
|
||
.wrap--narrow { max-width: none; }
|
||
.skip { position: absolute; left: -9999px; }
|
||
.skip:focus {
|
||
left: var(--sp-lg); top: var(--sp-lg); z-index: 99;
|
||
background: var(--ink); color: var(--on-primary);
|
||
padding: var(--sp-sm) var(--sp-lg);
|
||
}
|
||
|
||
/* ---------- 4. 排版：落差就是设计 ---------- */
|
||
h1, h2, h3, h4 { margin: 0; font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
|
||
|
||
/* 中文大字：行高放大、负字距收回，层级靠字重（page-design.md §4） */
|
||
.dsp {
|
||
font-size: var(--fs-display); line-height: var(--lh-cjk);
|
||
letter-spacing: var(--ls-cjk); font-weight: 500;
|
||
}
|
||
/* 拉丁/数字巨字：同一量级但可以收紧 */
|
||
.dsp--lat {
|
||
font-size: var(--fs-display); line-height: var(--lh-lat);
|
||
letter-spacing: var(--ls-lat); font-weight: 700;
|
||
font-stretch: var(--font-stretch-display);
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
/* 超巨：只给真正的头号数字。数字是拉丁字形，可以推到 200px 而不变成一块黑体方块 ——
|
||
这正好绕开 page-design §4 说的「中文大字过大就成实心块」的问题，
|
||
所以移动端撑住 display ÷ body 落差的是它，不是中文标题。 */
|
||
.mega {
|
||
font-size: clamp(84px, 26vw, 200px); line-height: .86; letter-spacing: -.05em;
|
||
font-weight: 700; font-stretch: 88%; color: var(--ink);
|
||
font-variant-numeric: tabular-nums; display: block;
|
||
}
|
||
.mega--cjk { font-size: var(--fs-display); line-height: var(--lh-cjk); letter-spacing: var(--ls-cjk); font-weight: 500; font-stretch: 100%; }
|
||
|
||
.h1 { font-size: var(--fs-display); line-height: var(--lh-cjk); letter-spacing: var(--ls-cjk); }
|
||
.h2 { font-size: var(--fs-display-md); line-height: 1.16; letter-spacing: -.012em; }
|
||
.h3 { font-size: var(--fs-display-sm); line-height: 1.3; letter-spacing: -.008em; }
|
||
.doc__h { font-size: clamp(56px, 10.5vw, 100px); line-height: 1.14; letter-spacing: var(--ls-cjk); }
|
||
|
||
strong, b { font-weight: 600; color: var(--ink); }
|
||
em { font-style: italic; }
|
||
|
||
.lede, .lede2 { font-size: var(--fs-lede); line-height: 1.65; color: var(--body); max-width: var(--measure); }
|
||
.small { font-size: var(--fs-small); line-height: 1.65; color: var(--body); max-width: var(--measure-wide); }
|
||
.tiny { font-size: var(--fs-label); line-height: 1.6; color: var(--mute); max-width: 96ch; }
|
||
.mono { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.4px; }
|
||
.src { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px; color: var(--mute); }
|
||
|
||
/* 签名式眉标：等宽大写 + 正字距 */
|
||
.eyebrow, .kicker, .shead__idx {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--fs-label);
|
||
line-height: 1.6;
|
||
font-weight: 400;
|
||
letter-spacing: 1.8px;
|
||
text-transform: uppercase;
|
||
color: var(--mute);
|
||
margin: 0;
|
||
display: block;
|
||
}
|
||
.arrow { color: var(--mute); padding-inline: 6px; }
|
||
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
|
||
.serif-it { color: var(--ink); }
|
||
|
||
/* 正文区的小节节奏：统一用 48px 上留白，避免各页内联边距不一致 */
|
||
#doc h2, #doc h3, #doc h4 { margin-top: var(--sp-3xl); }
|
||
#doc > *:first-child, .card h2, .card h3, .card h4,
|
||
.panel h2, .panel h3, .panel h4, .ex h3 { margin-top: 0; }
|
||
#doc > p + h2, #doc > p + h3 { margin-top: var(--sp-3xl); }
|
||
#doc > p { margin: 0 0 var(--sp-lg); }
|
||
#doc > p.small, #doc > p.tiny { margin-bottom: var(--sp-md); }
|
||
|
||
/* ---------- 5. 顶栏（nav-bar: padding 12 24） ---------- */
|
||
.site {
|
||
position: sticky; top: 0; z-index: 50;
|
||
background: var(--canvas);
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.site.is-stuck { border-bottom-color: var(--hairline); }
|
||
|
||
.topbar {
|
||
display: flex; align-items: center; gap: var(--sp-lg);
|
||
height: var(--nav-h); max-width: var(--container); margin-inline: auto;
|
||
padding-inline: var(--sp-xl);
|
||
}
|
||
.topbar__spacer { flex: 1 1 auto; }
|
||
|
||
.brand { display: flex; align-items: center; gap: var(--sp-sm); flex: none; }
|
||
.brand__mark { width: 22px; height: 22px; flex: none; }
|
||
.brand__mark .dim { fill: var(--canvas-mid); }
|
||
.brand__mark .on { fill: var(--ink); }
|
||
.brand__name { font-size: 14px; line-height: 20px; color: var(--ink); }
|
||
|
||
/* 药丸：整个交互形状系统 */
|
||
.pill, .chip, .kbd {
|
||
display: inline-flex; align-items: center; gap: var(--sp-sm);
|
||
border: 1px solid var(--btn-border);
|
||
border-radius: var(--r-pill);
|
||
color: var(--ink);
|
||
white-space: nowrap;
|
||
}
|
||
.pill { height: 28px; padding: 0 var(--sp-md); font-size: 12px; letter-spacing: 1.2px; font-family: var(--font-mono); }
|
||
.pill--acc { border-color: var(--ink); }
|
||
.dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }
|
||
|
||
.crumb { display: flex; align-items: baseline; gap: var(--sp-sm); min-width: 0; }
|
||
.crumb__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.crumb__t { font-size: 14px; line-height: 20px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||
|
||
.progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 0; background: var(--ink); }
|
||
|
||
/* ---------- 6. 骨架：侧栏 + 内容（容器 1200px） ---------- */
|
||
.shell {
|
||
display: grid; grid-template-columns: 232px minmax(0, 1fr);
|
||
gap: var(--sp-4xl);
|
||
max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-xl);
|
||
overflow-x: clip;
|
||
}
|
||
.side {
|
||
position: sticky; top: var(--nav-h); align-self: start;
|
||
max-height: calc(100vh - var(--nav-h)); overflow-y: auto;
|
||
padding: var(--sp-2xl) 0 var(--sp-3xl);
|
||
border-right: 1px solid var(--hairline);
|
||
}
|
||
.side__in { padding-right: var(--sp-lg); }
|
||
.side, .side__in, .side__list, .side__a { min-width: 0; }
|
||
|
||
.side__grp {
|
||
margin: var(--sp-xl) 0 var(--sp-sm); padding-left: var(--sp-md);
|
||
font-family: var(--font-mono); font-size: 12px; line-height: 16px;
|
||
letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute);
|
||
}
|
||
.side__grp:first-child { margin-top: 0; }
|
||
.side__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-xxs); }
|
||
/* ex-app-shell-row：active 用 primary 作为指示条 */
|
||
.side__a {
|
||
display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-sm);
|
||
align-items: baseline; padding: var(--sp-sm) var(--sp-md);
|
||
border-radius: var(--r-sm); border-left: 1px solid transparent;
|
||
transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.side__a:hover { background: var(--canvas-soft); }
|
||
.side__a.is-on { background: var(--canvas-soft); border-left-color: var(--ink); }
|
||
.side__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.side__t { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
.side__a:hover .side__t { color: var(--ink); }
|
||
.side__a.is-on .side__t { color: var(--ink); }
|
||
.side__a.is-on .side__n { color: var(--ink); }
|
||
|
||
/* hero / content band */
|
||
.doc { position: relative; min-width: 0; max-width: 100%; padding: var(--band) 0 var(--band-tight); }
|
||
/* 页眉：标题左、头号数字右 —— 非对称分栏，不是居中标题块 */
|
||
.doc__hd {
|
||
display: grid; grid-template-columns: minmax(0, 1fr) auto;
|
||
gap: var(--sp-xl) clamp(24px, 5vw, 72px);
|
||
align-items: end;
|
||
margin-bottom: var(--band-tight); padding-bottom: var(--sp-xl);
|
||
border-bottom: 1px solid var(--hairline);
|
||
}
|
||
.doc__hd > .kicker { grid-column: 1 / -1; }
|
||
.doc__h { margin-top: var(--sp-lg); }
|
||
.doc__lede {
|
||
margin: var(--sp-xl) 0 0; max-width: var(--measure);
|
||
font-size: var(--fs-lede); line-height: 1.6; color: var(--body);
|
||
}
|
||
/* 头号数字：文档页自己先把最强的那条数字说出来 */
|
||
.doc__figure { margin: 0; text-align: right; display: grid; gap: var(--sp-md); justify-items: end; }
|
||
.doc__figure .mega { color: var(--ink); }
|
||
.doc__figure .mega small { font-size: .30em; letter-spacing: -.01em; margin-left: .04em; font-weight: 500; }
|
||
.doc__figure-n {
|
||
font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px;
|
||
color: var(--mute); max-width: 30ch; line-height: 1.8;
|
||
}
|
||
|
||
/* 文档页的章节标题不能停在 24px：页面标题 100px、正文 14px，
|
||
章节标题落在中间会让层级整个塌掉。片段里写的是 class="h3"，这里按上下文提上来。 */
|
||
#doc h2 { font-size: var(--fs-display-md); line-height: 1.14; letter-spacing: -.012em; }
|
||
|
||
@media (max-width: 900px) {
|
||
.doc__hd { grid-template-columns: minmax(0, 1fr); align-items: start; }
|
||
.doc__figure { text-align: left; justify-items: start; margin-top: var(--sp-xl); }
|
||
.doc__figure .mega { font-size: clamp(98px, 26vw, 140px); }
|
||
}
|
||
|
||
/* ---------- 7. 按钮：轮廓胶囊为常态，白色实底仅作极少数例外 ---------- */
|
||
.btn {
|
||
display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-sm);
|
||
padding: var(--sp-sm) var(--sp-lg);
|
||
background: transparent;
|
||
border: 1px solid var(--btn-border);
|
||
border-radius: var(--r-pill);
|
||
color: var(--ink);
|
||
font-size: 14px; line-height: 20px; font-weight: 400;
|
||
transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.btn:hover { background: var(--canvas-soft); border-color: var(--ink); }
|
||
.btn--pri { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
|
||
.btn--pri:hover { background: var(--ink-hover); border-color: var(--ink-hover); color: var(--on-primary); }
|
||
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }
|
||
|
||
.chip { height: 28px; padding: 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--body); }
|
||
.chip__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); }
|
||
.kbd { min-width: 26px; height: 26px; padding: 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--body); }
|
||
|
||
/* ---------- 8. 卡片：8px 圆角 · #191919 · 发丝线 · 零阴影 ---------- */
|
||
.grid { display: grid; gap: var(--sp-lg); }
|
||
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.g-2-1 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
|
||
|
||
.card {
|
||
background: var(--canvas-card);
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
padding: var(--sp-xl);
|
||
}
|
||
.card--flat { background: var(--canvas-card); }
|
||
/* 极性翻转：白底近黑字，规范里的 featured/active 处理 */
|
||
.card--acc { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
|
||
.card--acc .eyebrow, .card--acc .h3, .card--acc strong, .card--acc .small, .card--acc .tiny { color: var(--on-primary); }
|
||
.card--warn { background: var(--canvas-card); }
|
||
|
||
/* ---------- 9. KPI / 数值（mono 计数器，规范里的 metric counter） ---------- */
|
||
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.kpi { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-md); align-content: start; }
|
||
.kpi__k { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.kpi__v { font-family: var(--font-mono); font-size: 24px; line-height: 32px; color: var(--ink); letter-spacing: -.02em; }
|
||
.kpi__v--long { font-size: 20px; line-height: 28px; }
|
||
.kpi__v .to { color: var(--ink); }
|
||
.kpi__v .mid { color: var(--mute); }
|
||
.kpi__d { font-size: 14px; line-height: 20px; color: var(--mute); }
|
||
|
||
.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.stat { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-sm); align-content: start; }
|
||
.stat__k { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.stat__v { font-family: var(--font-mono); font-size: 28px; line-height: 32px; color: var(--ink); letter-spacing: -.02em; }
|
||
.stat__v small { font-size: 12px; letter-spacing: 1.2px; color: var(--mute); margin-left: var(--sp-xs); }
|
||
.stat--acc .stat__v { color: var(--ink); }
|
||
.stat__d { font-size: 14px; line-height: 20px; color: var(--mute); }
|
||
|
||
.mini { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.mini > div { background: var(--canvas-card); display: flex; justify-content: space-between; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); }
|
||
.mini span { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
.mini b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
|
||
.mini--lg > div { display: block; padding: var(--sp-lg); }
|
||
.mini--lg span { font-size: 16px; line-height: 24px; }
|
||
|
||
/* ---------- 10. 导航卡片 / 作者 ---------- */
|
||
.navcard {
|
||
display: grid; gap: var(--sp-sm); align-content: start;
|
||
background: var(--canvas-card); border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm); padding: var(--sp-xl);
|
||
transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.navcard:hover { background: var(--canvas-soft); border-color: var(--btn-border); }
|
||
.navcard__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.navcard__t { font-size: 20px; line-height: 28px; color: var(--ink); letter-spacing: -.01em; }
|
||
.navcard__d { font-size: 14px; line-height: 20px; color: var(--mute); }
|
||
.navcard--acc { border-color: var(--btn-border); }
|
||
|
||
.authorcard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xl); }
|
||
.authorcard__k { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.authorcard__a { font-size: 16px; line-height: 24px; color: var(--ink); border-bottom: 1px solid var(--btn-border); }
|
||
.authorcard__a:hover { border-bottom-color: var(--ink); }
|
||
.authorcard__v { margin: 0; font-family: var(--font-mono); font-size: 14px; color: var(--body); }
|
||
|
||
.author { display: grid; gap: var(--sp-sm); }
|
||
.author__a { display: inline-flex; align-items: baseline; gap: var(--sp-sm); }
|
||
.author__k { font-size: 14px; line-height: 20px; color: var(--mute); white-space: nowrap; }
|
||
.author__v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); border-bottom: 1px solid var(--btn-border); }
|
||
.author__a:hover .author__v { border-bottom-color: var(--ink); }
|
||
|
||
/* ---------- 11. 表格（ex-data-table-cell：表头 mono 大写、内容 body-sm） ---------- */
|
||
.tbl-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas-card); }
|
||
.dtable { width: 100%; border-collapse: collapse; }
|
||
.dtable th {
|
||
text-align: left; background: var(--canvas-soft);
|
||
font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 400;
|
||
letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute);
|
||
padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); white-space: nowrap;
|
||
}
|
||
.dtable td { padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); color: var(--body); font-size: 14px; line-height: 20px; vertical-align: baseline; }
|
||
.dtable tr:last-child td { border-bottom: 0; }
|
||
.dtable tr:hover td { background: var(--canvas-soft); }
|
||
.dtable td.n { font-family: var(--font-mono); color: var(--ink); white-space: nowrap; }
|
||
.dtable td.acc { color: var(--ink); }
|
||
.dtable td.bad { color: var(--mute); }
|
||
|
||
.gt { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.gt__h, .gt__r { display: grid; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); background: var(--canvas-card); align-items: baseline; }
|
||
.gt__h { background: var(--canvas-soft); }
|
||
.gt__h span { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.gt--4 .gt__h, .gt--4 .gt__r { grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, .75fr) minmax(0, 1.5fr); }
|
||
.gt--3 .gt__h, .gt--3 .gt__r { grid-template-columns: minmax(0, .75fr) minmax(0, 1fr) minmax(0, 1.95fr); }
|
||
.gt__r:hover { background: var(--canvas-soft); }
|
||
.gt__k { font-size: 16px; line-height: 24px; color: var(--ink); }
|
||
.gt__v { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
.gt__who { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.gt__who--acc { color: var(--ink); }
|
||
.gt__why { font-size: 14px; line-height: 22px; color: var(--mute); }
|
||
.scrollx { overflow-x: auto; border-radius: var(--r-sm); }
|
||
.scrollx > .gt { min-width: 720px; }
|
||
|
||
/* ---------- 12. 键值 / 容量 ---------- */
|
||
.kv { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.kv__r { background: var(--canvas-card); display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); }
|
||
.kv__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.kv__v { font-family: var(--font-mono); font-size: 14px; color: var(--body); word-break: break-all; }
|
||
|
||
.cap { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.cap__r { background: var(--canvas-card); display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
|
||
.cap__k { font-size: 16px; line-height: 24px; color: var(--body); }
|
||
.cap__k small { display: block; color: var(--mute); font-size: 14px; line-height: 20px; }
|
||
.cap__v { font-family: var(--font-mono); font-size: 16px; text-align: right; color: var(--ink); }
|
||
.cap__r--hi .cap__v { color: var(--ink); }
|
||
|
||
.pagemap { display: grid; grid-template-columns: repeat(64, 1fr); gap: 2px; }
|
||
.pagemap i { aspect-ratio: 1; background: var(--canvas-mid); border-radius: 1px; }
|
||
.pagemap i.on { background: var(--ink); }
|
||
|
||
/* ---------- 13. 账本 / 显存 ---------- */
|
||
.ledger { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.ledger__h, .ledger__r { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr) minmax(0, .85fr) minmax(0, .9fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
|
||
.ledger__h { background: var(--canvas-soft); }
|
||
.ledger__h span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.ledger__r { background: var(--canvas-card); }
|
||
.ledger__r:hover { background: var(--canvas-soft); }
|
||
.ledger__k { font-size: 16px; line-height: 24px; color: var(--body); }
|
||
.ledger__b, .ledger__n { font-family: var(--font-mono); font-size: 14px; color: var(--mute); }
|
||
.ledger__n { color: var(--ink); }
|
||
.ledger__d { font-family: var(--font-mono); font-size: 14px; text-align: right; color: var(--ink); }
|
||
.ledger__d.t-ok, .ledger__d.t-warn, .ledger__d.t-bad, .ledger__d.t-mute { color: var(--body); }
|
||
.ledger__d.t-bad, .ledger__d.t-mute { color: var(--mute); }
|
||
|
||
.vram { display: grid; gap: var(--sp-lg); }
|
||
.vram__row { display: grid; gap: var(--sp-sm); }
|
||
.vram__top { display: flex; justify-content: space-between; gap: var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.vram__top b { color: var(--ink); }
|
||
.vram__track { position: relative; height: 20px; background: var(--canvas-mid); border-radius: var(--r-pill); overflow: hidden; }
|
||
.vram__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); transition: width 700ms cubic-bezier(.16,1,.3,1); }
|
||
.vram__fill--base { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
|
||
.vram__fill--nm2 { background: var(--ink); }
|
||
.vram__mark { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--btn-border); }
|
||
.vram__card { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
|
||
/* ---------- 14. 条形对比（单色明度阶梯，不用彩色编码） ---------- */
|
||
.bars { display: grid; gap: var(--sp-xl); }
|
||
.barset { display: grid; gap: var(--sp-sm); }
|
||
.barset__top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-sm); }
|
||
.barset__t { font-size: 16px; line-height: 24px; color: var(--ink); }
|
||
.barset__n { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
|
||
.bar { display: grid; grid-template-columns: 108px minmax(0, 1fr) 108px; gap: var(--sp-md); align-items: center; }
|
||
.bar__l { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.bar__track { position: relative; height: 6px; background: var(--canvas-mid); border-radius: var(--r-pill); overflow: hidden; }
|
||
.bar__fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: var(--r-pill); transition: width 700ms cubic-bezier(.16,1,.3,1); }
|
||
.bar--base .bar__fill { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
|
||
.bar--a .bar__fill { background: var(--mute); }
|
||
.bar--rag .bar__fill { background: var(--mute); }
|
||
.bar--nm2 .bar__fill { background: var(--ink); }
|
||
.bar__v { font-family: var(--font-mono); font-size: 14px; color: var(--ink); text-align: right; }
|
||
.bar__v small { color: var(--mute); display: block; font-size: 12px; letter-spacing: 1.2px; }
|
||
|
||
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-lg); }
|
||
.legend span { display: inline-flex; align-items: center; gap: var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.legend i { width: 14px; height: 6px; border-radius: var(--r-pill); display: block; }
|
||
.legend i.l-base { background: repeating-linear-gradient(115deg, var(--mute) 0 3px, transparent 3px 7px); }
|
||
.legend i.l-a { background: var(--mute); }
|
||
.legend i.l-rag { background: var(--mute); }
|
||
.legend i.l-nm2 { background: var(--ink); }
|
||
|
||
.gap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.gap__c { background: var(--canvas-card); padding: var(--sp-xl); display: grid; gap: var(--sp-sm); }
|
||
.gap__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.gap__v { font-family: var(--font-mono); font-size: clamp(28px, 4vw, 40px); line-height: 1; letter-spacing: -.02em; }
|
||
.gap__c--recall .gap__v { color: var(--body); }
|
||
.gap__c--answer .gap__v { color: var(--ink); }
|
||
.gap__n { font-size: 14px; line-height: 20px; color: var(--mute); }
|
||
|
||
/* ---------- 15. 标签页（药丸） ---------- */
|
||
.tabs { display: flex; flex-wrap: wrap; gap: var(--sp-sm); max-width: 100%; }
|
||
.tab {
|
||
padding: var(--sp-sm) var(--sp-lg);
|
||
border: 1px solid var(--btn-border); border-radius: var(--r-pill);
|
||
color: var(--body); font-size: 14px; line-height: 20px; white-space: nowrap;
|
||
transition: background var(--dur-fast) var(--ease-exp), color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.tab:hover { background: var(--canvas-soft); color: var(--ink); }
|
||
.tab.is-on { background: var(--ink); border-color: var(--ink); color: var(--on-primary); }
|
||
.panel { display: none; }
|
||
.panel.is-on { display: block; }
|
||
|
||
/* ---------- 16. 机制：步进器 / 流程图 / 记录 ---------- */
|
||
.flow { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: var(--sp-2xl); align-items: start; }
|
||
.steps { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.step {
|
||
background: var(--canvas-card); text-align: left; width: 100%;
|
||
display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-md);
|
||
padding: var(--sp-md) var(--sp-lg); align-items: center;
|
||
transition: background var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.step:hover { background: var(--canvas-soft); }
|
||
.step__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.step__l { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
.step.is-on { background: var(--canvas-soft); }
|
||
.step.is-on .step__l { color: var(--ink); }
|
||
.step.is-on .step__i { color: var(--ink); }
|
||
.step.is-past .step__l { color: var(--mute); }
|
||
|
||
.flow__detail { position: sticky; top: calc(var(--nav-h) + var(--sp-lg)); }
|
||
.flow__stage { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.flow__title { margin: 0 0 var(--sp-md); font-size: 24px; line-height: 32px; letter-spacing: -.02em; }
|
||
.flow__body { margin: 0; color: var(--body); font-size: 14px; line-height: 22px; min-height: 88px; }
|
||
.flow__io { margin: var(--sp-lg) 0 0; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--mute); }
|
||
.flow__meta { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); display: grid; gap: var(--sp-sm); }
|
||
.flow__meta div { display: flex; justify-content: space-between; gap: var(--sp-lg); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.flow__meta b { color: var(--ink); font-weight: 400; }
|
||
|
||
.dgm { width: 100%; height: auto; display: block; overflow: visible; }
|
||
.dgm__box { fill: var(--canvas-card); stroke: var(--hairline); }
|
||
.dgm__box--acc { stroke: var(--btn-border); }
|
||
.dgm__n { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); letter-spacing: 1px; }
|
||
.dgm__l { font-size: 12px; fill: var(--ink); }
|
||
.dgm__s { font-family: var(--font-mono); font-size: 9px; fill: var(--mute); }
|
||
.dgm__a { stroke: var(--btn-border); stroke-width: 1; fill: none; }
|
||
.dgm__rule { stroke: var(--hairline); stroke-width: 1; }
|
||
.dgm__note { font-family: var(--font-mono); font-size: 9.5px; fill: var(--mute); letter-spacing: .6px; }
|
||
.dgm__note:first-of-type { fill: var(--ink); }
|
||
|
||
.rec { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.rec__f { background: var(--canvas-card); padding: var(--sp-md) var(--sp-lg); display: grid; gap: var(--sp-xxs); }
|
||
.rec__f:hover { background: var(--canvas-soft); }
|
||
.rec__k { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
|
||
.rec__d { font-size: 12px; line-height: 16px; color: var(--mute); }
|
||
|
||
.recjson { display: grid; gap: 1px; }
|
||
.recjson__r { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); align-items: baseline; }
|
||
.recjson__r:last-child { border-bottom: 0; }
|
||
.recjson__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.recjson__v { font-size: 14px; line-height: 20px; color: var(--ink); word-break: break-word; overflow-wrap: anywhere; }
|
||
|
||
.states { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.state { background: var(--canvas-card); display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: var(--sp-lg); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
|
||
.state__s { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
|
||
.state--mute .state__s, .state--bad .state__s { color: var(--mute); }
|
||
.state--warn .state__s { color: var(--body); }
|
||
.state__d { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
|
||
/* ---------- 17. 提示块 / 声明 / 局限 ---------- */
|
||
.callout {
|
||
background: var(--canvas-card);
|
||
border: 1px solid var(--btn-border);
|
||
border-radius: var(--r-sm);
|
||
padding: var(--sp-xl);
|
||
}
|
||
.callout--warn { border-color: var(--hairline); }
|
||
.callout__t { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 14px; line-height: 20px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--ink); }
|
||
.callout__b { margin: 0; font-size: 16px; line-height: 26px; color: var(--body); max-width: 78ch; }
|
||
|
||
.claims { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.claim { background: var(--canvas-card); display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: center; }
|
||
.claim:hover { background: var(--canvas-soft); }
|
||
.claim__x { font-family: var(--font-mono); font-size: 14px; color: var(--mute); }
|
||
.claim__t { font-size: 16px; line-height: 24px; color: var(--mute); text-decoration: line-through; text-decoration-color: var(--canvas-mid); }
|
||
.claim__s { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.claims--loose .claim__s { display: none; }
|
||
|
||
.lims { display: grid; gap: var(--sp-xl); }
|
||
.lim { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: var(--sp-md); }
|
||
.lim__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); padding-top: 3px; }
|
||
.lim__t { font-size: 20px; line-height: 28px; margin-bottom: var(--sp-sm); }
|
||
.lim__d { margin: 0; font-size: 14px; line-height: 22px; color: var(--mute); max-width: 76ch; }
|
||
|
||
.quote { border-left: 1px solid var(--btn-border); padding: var(--sp-xs) 0 var(--sp-xs) var(--sp-xl); margin: 0; }
|
||
.quote q { font-size: 24px; line-height: 34px; letter-spacing: -.02em; color: var(--ink); display: block; }
|
||
.quote cite { display: block; margin-top: var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); font-style: normal; }
|
||
|
||
.checks { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.check { background: var(--canvas-card); display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
|
||
.check__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.check__t { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
|
||
.road { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.road__r { background: var(--canvas-card); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); align-items: baseline; }
|
||
.road__r:hover { background: var(--canvas-soft); }
|
||
.road__i { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.road__t { font-size: 14px; line-height: 20px; color: var(--body); }
|
||
|
||
/* ---------- 18. 复现：代码块（规范：Canvas Mid 用作代码底） ---------- */
|
||
.code { background: var(--canvas-mid); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
|
||
.code__t { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.copy {
|
||
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px;
|
||
padding: var(--sp-xs) var(--sp-md);
|
||
background: transparent; border: 1px solid var(--btn-border); border-radius: var(--r-pill);
|
||
color: var(--ink);
|
||
transition: background var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.copy:hover { background: var(--canvas-card); }
|
||
.copy.is-done { border-color: var(--ink); }
|
||
.code pre { margin: 0; padding: var(--sp-xl); overflow-x: auto; }
|
||
.code code { font-family: var(--font-mono); font-size: 14px; line-height: 24px; color: var(--ink); white-space: pre; background: none; padding: 0; }
|
||
.code code .k { color: var(--ink); }
|
||
.code code .c { color: var(--mute); }
|
||
|
||
/* ---------- 19. 实测样例 ---------- */
|
||
.examples { display: grid; gap: var(--sp-xl); }
|
||
.ex { background: var(--canvas-card); border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.ex__hd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm); padding: var(--sp-md) var(--sp-xl); border-bottom: 1px solid var(--hairline); background: var(--canvas-soft); }
|
||
.ex__no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--ink); }
|
||
.ex__q { margin: 0; padding: var(--sp-xl) var(--sp-xl) var(--sp-md); font-size: 24px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); }
|
||
.ex__exp { margin: 0; padding: 0 var(--sp-xl) var(--sp-xl); font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--mute); word-break: break-word; }
|
||
.ex__exp span { color: var(--mute); margin-right: var(--sp-sm); }
|
||
.ex__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--hairline); }
|
||
.ex__col { padding: var(--sp-xl); min-width: 0; }
|
||
.ex__col + .ex__col { border-left: 1px solid var(--hairline); }
|
||
.ex__col--nm { background: rgba(255, 255, 255, .015); }
|
||
.ex__lab { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.ex__col--nm .ex__lab { color: var(--ink); }
|
||
.ex__ans { margin: 0 0 var(--sp-md); font-size: 14px; line-height: 22px; color: var(--body); white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; }
|
||
.ex__meta { margin: 0; padding-top: var(--sp-md); border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 12px; line-height: 20px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.v--ok { color: var(--ink); }
|
||
.v--no { color: var(--mute); }
|
||
.ex__ev { margin-top: var(--sp-lg); padding-top: var(--sp-md); border-top: 1px solid var(--hairline); }
|
||
.ex__evt { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.ex__evr { display: grid; gap: var(--sp-xs); padding: var(--sp-sm) 0; border-bottom: 1px solid var(--hairline); }
|
||
.ex__evr:last-child { border-bottom: 0; padding-bottom: 0; }
|
||
.ex__evk { font-family: var(--font-mono); font-size: 14px; color: var(--ink); word-break: break-word; }
|
||
.ex__evv { font-size: 14px; line-height: 20px; color: var(--body); word-break: break-word; }
|
||
.ex__evs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); word-break: break-all; }
|
||
|
||
/* ---------- 20. 上一节 / 下一节 ---------- */
|
||
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg); margin-top: var(--sp-4xl); padding-top: var(--sp-xl); border-top: 1px solid var(--hairline); }
|
||
.pn__a {
|
||
display: grid; gap: var(--sp-sm); padding: var(--sp-lg) var(--sp-xl); position: relative;
|
||
background: var(--canvas-card); border: 1px solid var(--hairline); border-radius: var(--r-sm);
|
||
transition: background var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.pn__a:hover { background: var(--canvas-soft); border-color: var(--btn-border); }
|
||
.pn__a--next { text-align: right; }
|
||
.pn__k { font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.pn__t { font-size: 20px; line-height: 28px; color: var(--ink); }
|
||
.pn__a .kbd { position: absolute; top: var(--sp-lg); right: var(--sp-lg); }
|
||
.pn__a--prev .kbd { right: auto; left: var(--sp-lg); }
|
||
.pn__x { display: block; }
|
||
|
||
/* ---------- 21. 页脚（footer band: padding 48 24） ---------- */
|
||
.footer { border-top: 1px solid var(--hairline); padding: var(--sp-3xl) 0; }
|
||
.footer__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: var(--sp-3xl); align-items: start; }
|
||
.footer__col--wide { min-width: 0; }
|
||
.footer__h { margin: 0 0 var(--sp-md); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.footer__note { margin: 0; font-size: 14px; line-height: 22px; color: var(--body); max-width: 64ch; }
|
||
.footer__meta { margin: var(--sp-lg) 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.readout { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
|
||
.readout > span {
|
||
display: inline-flex; align-items: center; padding: var(--sp-xs) var(--sp-md);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-pill);
|
||
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px; color: var(--mute);
|
||
}
|
||
|
||
/* ---------- 22. JS 渲染内容的淡入（只淡入，不位移 —— B2 的底线） ---------- */
|
||
.reveal { opacity: 0; transition: opacity var(--dur-std) var(--ease-exp); }
|
||
.reveal.is-in { opacity: 1; }
|
||
|
||
/* 分带标题：眉标 + 标题的间距走令牌，不再用行内 style */
|
||
.band__k { margin: 0 0 var(--sp-lg); }
|
||
.band__k + .h2, .band__k + .h3 { margin-bottom: var(--sp-2xl); }
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
html { scroll-behavior: auto; }
|
||
.reveal { opacity: 1; transform: none; transition: none; }
|
||
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
|
||
.bar__fill, .vram__fill { transition: none; }
|
||
/* B8：关掉动效时直接呈现终态，不允许有任何内容因为「还没入场」而消失 */
|
||
.js .arr-wipe { clip-path: none !important; }
|
||
.js .arr-num, .js .arr-cards > *, .js .teaser .dgm > g:not(.dgm__a) {
|
||
opacity: 1 !important; transform: none !important;
|
||
}
|
||
.js .teaser .dgm__a path { stroke-dashoffset: 0 !important; }
|
||
.rst__b { opacity: 1 !important; }
|
||
.pal__box { animation: none; }
|
||
.hero__cue { animation: none; opacity: .6; }
|
||
#doc h2.is-flash, #doc h3.is-flash { animation: none; box-shadow: inset 3px 0 0 var(--ink); }
|
||
/* 交叉淡入淡出全部关掉后，页面仍然是完整的一帧 */
|
||
}
|
||
|
||
/* ---------- 23. 响应式（<768：hero 96→48，网格 1 列） ---------- */
|
||
@media (min-width: 1120px) {
|
||
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
||
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||
}
|
||
@media (max-width: 1080px) {
|
||
/* 顶栏在窄屏必须能收：给导航一个可横向滚动的弹性列，
|
||
否则 7 个胶囊 + 检索按钮 + 状态胶囊会把整行撑出视口。 */
|
||
.topbar { gap: var(--sp-sm); }
|
||
.topbar__spacer { display: none; }
|
||
.topnav {
|
||
flex: 1 1 auto; min-width: 0;
|
||
flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
|
||
}
|
||
.topnav::-webkit-scrollbar { display: none; }
|
||
.brand__name { display: none; }
|
||
.shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
|
||
.side {
|
||
position: static; max-height: none; overflow: visible;
|
||
border-right: 0; border-bottom: 1px solid var(--hairline);
|
||
padding: var(--sp-lg) 0;
|
||
}
|
||
.side__in { display: flex; gap: var(--sp-sm); overflow-x: auto; padding-right: 0; scrollbar-width: none; }
|
||
.side__in::-webkit-scrollbar { display: none; }
|
||
.side__grp { display: none; }
|
||
.side__list { display: flex; gap: var(--sp-sm); }
|
||
.side__a { grid-template-columns: auto auto; white-space: nowrap; padding: var(--sp-sm) var(--sp-md); border-left: 0; border: 1px solid var(--hairline); border-radius: var(--r-pill); }
|
||
.side__a.is-on { border-color: var(--ink); }
|
||
.g-2-1 { grid-template-columns: minmax(0, 1fr); }
|
||
.statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
||
.authorcard { grid-template-columns: 1fr; }
|
||
.footer__in { grid-template-columns: 1fr; }
|
||
.crumb { display: none; }
|
||
.flow { grid-template-columns: minmax(0, 1fr); }
|
||
.flow__detail { position: static; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); }
|
||
.kpis { grid-template-columns: 1fr; }
|
||
.statrow { grid-template-columns: 1fr; }
|
||
.bar { grid-template-columns: 84px minmax(0, 1fr) 84px; gap: var(--sp-sm); }
|
||
.ledger__h { display: none; }
|
||
.ledger__r { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-xs) var(--sp-md); }
|
||
.ledger__b { grid-column: 1 / -1; }
|
||
.ledger__d { text-align: left; }
|
||
.cap__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
|
||
.cap__v { text-align: left; }
|
||
.state { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xs); }
|
||
.gap { grid-template-columns: 1fr; }
|
||
.ex__grid { grid-template-columns: 1fr; }
|
||
.ex__col + .ex__col { border-left: 0; border-top: 1px solid var(--hairline); }
|
||
.pn { grid-template-columns: 1fr; }
|
||
.pn__a--next { text-align: left; }
|
||
.recjson__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-xxs); }
|
||
.tabs { width: 100%; }
|
||
.tab { flex: 1 1 auto; text-align: center; }
|
||
.doc { padding-top: var(--sp-3xl); }
|
||
.scrollx > .gt { min-width: 0; }
|
||
.gt--4 .gt__h, .gt--3 .gt__h { display: none; }
|
||
.gt--4 .gt__r, .gt--3 .gt__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); padding: var(--sp-lg) var(--sp-md); }
|
||
.tbl-wrap, .scrollx {
|
||
background-image: linear-gradient(to left, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 40px);
|
||
background-repeat: no-repeat; background-position: right center; background-size: 40px 100%;
|
||
}
|
||
:root { --band-tight: 40px; --band: 64px; --band-wide: 88px; }
|
||
}
|
||
|
||
/* ==================================================================
|
||
24. 发布页版式（layout: release）
|
||
按研究/模型发布页的通行骨架：发布头 → teaser → 关键数字 → 摘要 →
|
||
发布清单 → 结果预览 → 深入阅读 → 边界 → 引用。
|
||
规范约束：页面表面只用 canvas，band 之间用 divider-hairline 分隔，
|
||
不引入第二种页面底色。
|
||
================================================================== */
|
||
.release { min-width: 0; }
|
||
|
||
/* 段落留白不是常数（page-design.md §6）：三档按语义给，
|
||
紧的地方两块属于一组，宽的地方是留给观众的呼吸。 */
|
||
.band { padding: var(--band) 0; }
|
||
.band + .band { border-top: 1px solid var(--hairline); }
|
||
.band--hero { padding-top: var(--band-tight); padding-bottom: var(--band-wide); }
|
||
.band--tight { padding: var(--band-tight) 0; }
|
||
.band--wide { padding: var(--band-wide) 0; }
|
||
.band--teaser { padding: var(--band-tight) 0 var(--band); }
|
||
.band--stats { padding: var(--band) 0; }
|
||
.band--alt { /* 命名钩子：p-07 只有一种地面，不分带换底 */ }
|
||
|
||
.wrap--narrow { max-width: 820px; }
|
||
|
||
/* 顶栏快速导航（胶囊行） */
|
||
.topnav { display: flex; flex-wrap: wrap; gap: var(--sp-sm); }
|
||
.topnav__a {
|
||
padding: var(--sp-xs) var(--sp-md);
|
||
border: 1px solid transparent; border-radius: var(--r-pill);
|
||
color: var(--mute); font-size: 13px; line-height: 20px;
|
||
transition: color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.topnav__a:hover { color: var(--ink); border-color: var(--hairline); }
|
||
.topnav__a.is-on { border-color: var(--btn-border); color: var(--ink); }
|
||
|
||
/* 侧栏返回发布页 */
|
||
.side__back {
|
||
display: inline-flex; align-items: center;
|
||
margin: 0 0 var(--sp-xl) var(--sp-md);
|
||
padding: var(--sp-xs) var(--sp-md);
|
||
border: 1px solid var(--btn-border); border-radius: var(--r-pill);
|
||
font-size: 12px; line-height: 20px; letter-spacing: 1.2px; font-family: var(--font-mono);
|
||
color: var(--body);
|
||
transition: background var(--dur-fast) var(--ease-exp), color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.side__back:hover { background: var(--canvas-soft); color: var(--ink); }
|
||
|
||
/* 发布头 */
|
||
.release__badge { margin-bottom: var(--sp-xl); color: var(--mute); }
|
||
.release__h1 { margin: 0 0 var(--sp-xl); max-width: 20ch; }
|
||
.release__byline {
|
||
margin: 0 0 var(--sp-xl);
|
||
font-size: 14px; line-height: 20px; color: var(--body);
|
||
display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-sm);
|
||
}
|
||
.release__byline a { color: var(--ink); border-bottom: 1px solid var(--btn-border); }
|
||
.release__byline a:hover { border-bottom-color: var(--ink); }
|
||
.release__by { color: var(--mute); }
|
||
.release__sep { color: var(--canvas-mid); }
|
||
.release__lede { max-width: 68ch; margin: 0 0 var(--sp-2xl); }
|
||
|
||
.linkrow { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; }
|
||
|
||
/* Teaser 全宽图 */
|
||
.teaser {
|
||
margin: 0;
|
||
background: var(--canvas-card);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-sm);
|
||
padding: var(--sp-xl);
|
||
}
|
||
.teaser .dgm { width: 100%; height: auto; }
|
||
.teaser__cap {
|
||
margin-top: var(--sp-lg); padding-top: var(--sp-md);
|
||
border-top: 1px solid var(--hairline);
|
||
font-size: 14px; line-height: 22px; color: var(--mute); max-width: 92ch;
|
||
}
|
||
.teaser__k {
|
||
display: inline-block; margin-right: var(--sp-sm);
|
||
font-family: var(--font-mono); font-size: 12px; line-height: 16px;
|
||
letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink);
|
||
}
|
||
|
||
/* 发布清单 */
|
||
.rel__k { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--mute); }
|
||
.rel__v { margin: 0 0 var(--sp-sm); font-family: var(--font-mono); font-size: 28px; line-height: 32px; letter-spacing: -.02em; color: var(--ink); }
|
||
.rel__v small { font-size: 12px; letter-spacing: 1.2px; color: var(--mute); margin-left: var(--sp-xs); }
|
||
.rel__d { margin: 0; font-size: 14px; line-height: 22px; color: var(--mute); }
|
||
|
||
/* 正文内链接 */
|
||
.linku { color: var(--ink); border-bottom: 1px solid var(--btn-border); }
|
||
.linku:hover { border-bottom-color: var(--ink); }
|
||
|
||
/* ==================================================================
|
||
24. 抵达编排 —— 三种不同的抵达方式，不是全页统一 fade-up
|
||
|
||
design-slop B2：所有区块都 `opacity 0→1, translateY 20px` 会让页面变成
|
||
一串相同的到达，读者到第三节就学会了无视它。所以这里只保留三处入场，
|
||
而且**三处的手势互不相同**（擦除 / 数字冲入 / 侧向错峰），
|
||
其余内容一律「本来就在那儿」。
|
||
|
||
初始隐藏态全部写在 .js 下：脚本挂了内容不会被藏起来。
|
||
================================================================== */
|
||
|
||
/* 1 · 编辑式擦除：给「一句结论」用（choreography-arc 的 editorial 弧） */
|
||
.js .arr-wipe {
|
||
clip-path: inset(0 0 106% 0);
|
||
transition: clip-path var(--dur-slow) cubic-bezier(.77, 0, .18, 1);
|
||
}
|
||
.arr-wipe.is-in { clip-path: inset(0 0 -2% 0); }
|
||
|
||
/* 2 · 数字冲入：只给头号数字，带一点点压缩再回弹 */
|
||
.js .arr-num {
|
||
opacity: 0; transform: translateY(16px) scale(.982);
|
||
transform-origin: 0 70%;
|
||
transition: opacity var(--dur-slow) var(--ease-exp), transform var(--dur-slow) var(--ease-sharp);
|
||
}
|
||
.arr-num.is-in { opacity: 1; transform: none; }
|
||
|
||
/* 3 · 侧向错峰：只给一处列表，手势是从装订线推出来，不是往上浮 */
|
||
.js .arr-cards > * {
|
||
opacity: 0; transform: translateX(-12px);
|
||
transition: opacity var(--dur-med) var(--ease-circ), transform var(--dur-med) var(--ease-circ);
|
||
}
|
||
.js .arr-cards.is-in > * { opacity: 1; transform: none; }
|
||
.js .arr-cards.is-in > *:nth-child(1) { transition-delay: 0ms; }
|
||
.js .arr-cards.is-in > *:nth-child(2) { transition-delay: 60ms; }
|
||
.js .arr-cards.is-in > *:nth-child(3) { transition-delay: 120ms; }
|
||
.js .arr-cards.is-in > *:nth-child(4) { transition-delay: 180ms; }
|
||
.js .arr-cards.is-in > *:nth-child(5) { transition-delay: 240ms; }
|
||
.js .arr-cards.is-in > *:nth-child(6) { transition-delay: 300ms; }
|
||
|
||
/* 读取路径图：连接线自左向右绘出，环节随后依次点亮 —— 这一处是内容自己的
|
||
语法（一条路径本来就是按顺序被走完的），所以保留，且它的手势与上面三种都不同 */
|
||
.js .teaser .dgm__a path {
|
||
stroke-dasharray: 1; stroke-dashoffset: 1;
|
||
transition: stroke-dashoffset var(--dur-slow) var(--ease-exp);
|
||
}
|
||
.js .teaser.is-in .dgm__a path { stroke-dashoffset: 0; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(1) { transition-delay: 60ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(2) { transition-delay: 130ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(3) { transition-delay: 200ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(4) { transition-delay: 270ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(5) { transition-delay: 340ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(6) { transition-delay: 410ms; }
|
||
.js .teaser.is-in .dgm__a path:nth-child(7) { transition-delay: 480ms; }
|
||
.js .teaser .dgm > g:not(.dgm__a) { opacity: 0; transition: opacity var(--dur-med) var(--ease-exp); }
|
||
.js .teaser.is-in .dgm > g:not(.dgm__a) { opacity: 1; }
|
||
.js .teaser.is-in .dgm > g:nth-child(2) { transition-delay: 120ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(3) { transition-delay: 200ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(4) { transition-delay: 280ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(5) { transition-delay: 360ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(6) { transition-delay: 440ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(7) { transition-delay: 520ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(8) { transition-delay: 600ms; }
|
||
.js .teaser.is-in .dgm > g:nth-child(9) { transition-delay: 680ms; }
|
||
|
||
/* ==================================================================
|
||
25. 重启实验装置
|
||
================================================================== */
|
||
.band--rst { padding-top: var(--sp-4xl); }
|
||
.rst__lede { margin-bottom: var(--sp-2xl); }
|
||
|
||
.rst {
|
||
border: 1px solid var(--hairline);
|
||
border-radius: var(--r-sm);
|
||
background: var(--canvas-card);
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* --- 顶部控制条 --- */
|
||
.rst__head {
|
||
display: flex; align-items: center; gap: var(--sp-lg);
|
||
padding: var(--sp-md) var(--sp-lg);
|
||
border-bottom: 1px solid var(--hairline);
|
||
flex-wrap: wrap;
|
||
}
|
||
.rst__file {
|
||
margin-left: auto; color: var(--mute); text-transform: none;
|
||
letter-spacing: 0; font-size: 11px;
|
||
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
|
||
}
|
||
.seg {
|
||
display: inline-flex; padding: var(--sp-xxs);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-pill);
|
||
background: var(--canvas);
|
||
}
|
||
.seg__b {
|
||
appearance: none; border: 0; cursor: pointer;
|
||
background: transparent; color: var(--mute);
|
||
font: inherit; font-size: 13px; letter-spacing: .01em;
|
||
padding: var(--sp-xs) var(--sp-lg); border-radius: var(--r-pill);
|
||
transition: color var(--dur-fast) var(--ease-exp), background-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.seg__b:hover { color: var(--body); }
|
||
.seg__b.is-on { background: var(--ink); color: var(--on-primary); }
|
||
.seg__b.is-on[data-v="before"] { background: var(--canvas-mid); color: var(--ink); }
|
||
.seg__b:focus-visible { outline: 2px solid var(--btn-border); outline-offset: 2px; }
|
||
|
||
.rst__play { padding: var(--sp-xs) var(--sp-lg); font-size: 13px; }
|
||
.rst__play::before {
|
||
content: ""; width: 0; height: 0; margin-right: var(--sp-sm);
|
||
border-left: 7px solid currentColor;
|
||
border-top: 5px solid transparent; border-bottom: 5px solid transparent;
|
||
display: inline-block; vertical-align: 1px;
|
||
}
|
||
.rst__play.is-playing::before { border-left-width: 6px; border-right: 6px solid currentColor; border-top-width: 6px; border-bottom-width: 6px; }
|
||
|
||
/* --- 主体两栏 --- */
|
||
.rst__grid {
|
||
display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
|
||
gap: 0;
|
||
}
|
||
|
||
/* --- 左栏：情境 + 状态 --- */
|
||
.rst__aside {
|
||
padding: var(--sp-xl);
|
||
border-right: 1px solid var(--hairline);
|
||
background: var(--canvas);
|
||
min-width: 0;
|
||
}
|
||
.rst__k {
|
||
margin: 0 0 var(--sp-sm);
|
||
font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
|
||
text-transform: uppercase; color: var(--mute);
|
||
}
|
||
.rst__k + .rst__quote { margin-bottom: var(--sp-xl); }
|
||
.rst__quote {
|
||
margin: 0; padding: 0 0 0 var(--sp-md);
|
||
border-left: 1px solid var(--btn-border);
|
||
font-size: 14px; line-height: 22px; color: var(--body);
|
||
text-wrap: pretty;
|
||
}
|
||
.rst__quote--q { color: var(--ink); }
|
||
|
||
.rst__gauges { display: grid; gap: var(--sp-xl); }
|
||
.rst__g { display: grid; gap: var(--sp-sm); }
|
||
.rst__gt { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-md); }
|
||
.rst__gt > span { font-size: 13px; color: var(--mute); }
|
||
.rst__gt > b { font-size: 15px; letter-spacing: 1px; color: var(--ink); font-weight: 400; }
|
||
.rst__gt > b small { font-size: 11px; color: var(--mute); letter-spacing: 1px; }
|
||
.rst__track {
|
||
position: relative; height: 4px; border-radius: var(--r-pill);
|
||
background: var(--canvas-mid); overflow: hidden;
|
||
}
|
||
.rst__fill {
|
||
position: absolute; inset: 0 auto 0 0; width: 0;
|
||
border-radius: var(--r-pill); background: var(--mute);
|
||
transition: width var(--dur-slow) var(--ease-exp), background-color var(--dur-std) var(--ease-exp);
|
||
}
|
||
.rst__fill--store { background: var(--ink); }
|
||
.rst__hint { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .6px; color: var(--mute); text-wrap: pretty; }
|
||
|
||
/* --- 右栏：四个节拍 --- */
|
||
.rst__beats { list-style: none; margin: 0; padding: 0; min-width: 0; }
|
||
.rst__b {
|
||
position: relative;
|
||
display: grid; grid-template-columns: 36px minmax(0, 1fr);
|
||
gap: var(--sp-lg);
|
||
padding: var(--sp-xl);
|
||
border-bottom: 1px solid var(--hairline);
|
||
opacity: .28;
|
||
transition: opacity var(--dur-med) var(--ease-exp), background-color var(--dur-med) var(--ease-exp);
|
||
}
|
||
.rst__b:last-child { border-bottom: 0; }
|
||
.rst__b.is-on { opacity: 1; background: var(--canvas-soft); }
|
||
.rst__b.is-past { opacity: .62; }
|
||
.rst__i {
|
||
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.4px;
|
||
color: var(--mute); padding-top: 3px;
|
||
}
|
||
.rst__b.is-on .rst__i { color: var(--ink); }
|
||
.rst__bt { margin: 0 0 var(--sp-sm); font-size: 16px; line-height: 22px; color: var(--ink); }
|
||
.rst__bd { margin: 0; font-size: 13px; line-height: 21px; color: var(--mute); text-wrap: pretty; }
|
||
/* 字段表始终参与布局：用 max-height 做展开动画在窄屏会截断较长的行，
|
||
而且会造成跳动，所以层级只用节拍自身的透明度表达。 */
|
||
.rst__data {
|
||
margin: var(--sp-md) 0 0; display: grid; gap: var(--sp-xs);
|
||
font-family: var(--font-mono); font-size: 12px; line-height: 19px;
|
||
letter-spacing: .4px; color: var(--body);
|
||
}
|
||
.rst__d { display: flex; gap: var(--sp-sm); }
|
||
.rst__d > i { font-style: normal; color: var(--mute); min-width: 132px; flex: 0 0 auto; }
|
||
.rst__d > span { min-width: 0; word-break: break-word; }
|
||
|
||
/* --- 底部：模型输出 --- */
|
||
.rst__out {
|
||
padding: var(--sp-xl);
|
||
border-top: 1px solid var(--hairline);
|
||
background: var(--canvas);
|
||
transition: opacity var(--dur-slow) var(--ease-exp);
|
||
}
|
||
.rst__out.is-idle { opacity: .38; }
|
||
.rst__outhead {
|
||
display: flex; align-items: center; gap: var(--sp-md); margin-bottom: var(--sp-md);
|
||
}
|
||
.rst__outhead > .mono { color: var(--mute); }
|
||
.rst__verdict { margin-left: auto; letter-spacing: 1.4px; }
|
||
.rst__verdict.is-ok { color: var(--ink); }
|
||
.rst__verdict.is-bad { color: var(--mute); }
|
||
.rst__resp {
|
||
margin: 0; font-size: 22px; line-height: 32px; letter-spacing: -.01em;
|
||
color: var(--ink); text-wrap: pretty;
|
||
min-height: 32px;
|
||
}
|
||
/* 「答对了」这一帧不再用信号色：p-07 原型写明 one per page max，
|
||
而信号色已经用在首屏画布里那颗目标记录上（accent 属于插图）。
|
||
这里的含义由 ✓ 字形承担，跟「修复前 / 修复后」的对比一样，靠文字不靠颜色。 */
|
||
.rst.is-payoff .rst__resp { color: var(--ink); }
|
||
.rst.is-payoff .rst__verdict::before { content: ""; }
|
||
.rst__kv {
|
||
display: flex; flex-wrap: wrap; gap: var(--sp-sm);
|
||
margin-top: var(--sp-lg); min-height: 26px;
|
||
}
|
||
.rst__kv > span {
|
||
display: inline-flex; align-items: baseline; gap: var(--sp-sm);
|
||
padding: var(--sp-xs) var(--sp-md);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-pill);
|
||
font-family: var(--font-mono); font-size: 11px; letter-spacing: 1px;
|
||
color: var(--mute);
|
||
}
|
||
.rst__kv > span b { font-weight: 400; color: var(--body); }
|
||
.rst__kv > span.is-hot { border-color: var(--btn-border); }
|
||
.rst__kv > span.is-hot b { color: var(--ink); }
|
||
|
||
.rst__note { margin-top: var(--sp-xl); max-width: 88ch; }
|
||
|
||
@media (max-width: 1080px) {
|
||
.rst__grid { grid-template-columns: minmax(0, 1fr); }
|
||
.rst__aside { border-right: 0; border-bottom: 1px solid var(--hairline); }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.rst__head { gap: var(--sp-md); }
|
||
/* 出处路径是证据本身，窄屏不截断，换行显示 */
|
||
.rst__file { margin-left: 0; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; word-break: break-all; }
|
||
.rst__aside, .rst__b, .rst__out { padding: var(--sp-lg); }
|
||
.rst__b { grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-md); }
|
||
.rst__d { flex-direction: column; gap: 0; }
|
||
.rst__d > i { min-width: 0; }
|
||
.rst__resp { font-size: 18px; line-height: 26px; }
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.band { padding: var(--band-tight) 0; }
|
||
.release__h1 { max-width: none; }
|
||
.release__lede { margin-bottom: var(--sp-xl); }
|
||
.linkrow .btn { flex: 1 1 auto; justify-content: center; }
|
||
.teaser { padding: var(--sp-lg); }
|
||
.rel__v { font-size: 24px; line-height: 28px; }
|
||
}
|
||
|
||
/* ==================================================================
|
||
29. 首屏：地址空间（本页的招牌机制）
|
||
版面取舍来自 page-design §1/§3：
|
||
· hero **不是**「徽标 + 标题 + 副标题 + 两个按钮」的文字块，
|
||
它就是这个机制本身，字被排进场景里（左上元信息 / 中间标题 / 右下读数）
|
||
· 不居中、没有按钮对、没有置顶徽标 —— A1 的四个特征一个都不占
|
||
机制层见 assets/js/space.js；机制借用 press-stack 的「进度从文档读回来」，
|
||
皮（配色 / 字体 / 结构）全部是本项目自己的。
|
||
================================================================== */
|
||
.hero { position: relative; height: 150vh; background: var(--canvas); }
|
||
.hero__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
|
||
.hero__cv { position: absolute; inset: 0; display: block; }
|
||
|
||
.hero__layer {
|
||
position: relative; z-index: 1;
|
||
height: 100%;
|
||
display: grid; grid-template-rows: auto 1fr auto;
|
||
padding: clamp(18px, 3.2vw, 44px) clamp(20px, 4vw, 56px) clamp(22px, 3.6vw, 48px);
|
||
pointer-events: none;
|
||
}
|
||
.hero__row { display: flex; min-width: 0; }
|
||
.hero__row--top { justify-content: space-between; align-items: baseline; gap: var(--sp-xl); }
|
||
.hero__row--mid { align-items: flex-end; justify-content: space-between; gap: clamp(24px, 5vw, 72px); }
|
||
.hero__row--bot { justify-content: space-between; align-items: flex-end; gap: clamp(24px, 5vw, 72px); }
|
||
|
||
.hero__geo { text-align: right; }
|
||
.hero__h { max-width: 14ch; margin: 0; font-size: clamp(56px, 15vw, 132px); }
|
||
|
||
/* 第一屏里的头号数字：读者不用滚三屏才知道这页在说什么 */
|
||
.hero__fig { margin: 0; display: grid; gap: var(--sp-md); justify-items: end; text-align: right; max-width: 34ch; }
|
||
.hero__fig-row { display: flex; align-items: baseline; gap: var(--sp-md); }
|
||
.hero__fig-v {
|
||
font-size: clamp(38px, 4.4vw, 84px); line-height: .95;
|
||
letter-spacing: -.04em; font-weight: 700; font-stretch: 92%;
|
||
color: var(--ink); font-variant-numeric: tabular-nums;
|
||
}
|
||
.hero__fig-v small { font-size: .38em; font-weight: 500; letter-spacing: 0; margin-left: .04em; }
|
||
.hero__fig-a { font-family: var(--font-mono); font-size: var(--fs-label); color: var(--mute); }
|
||
.hero__fig-n {
|
||
font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .8px;
|
||
line-height: 1.8; color: var(--mute);
|
||
}
|
||
.hero__lede-wrap { max-width: 44ch; min-width: 0; }
|
||
.hero__lede { margin: 0 0 var(--sp-md); font-size: var(--fs-lede); line-height: 1.6; color: var(--body); }
|
||
.hero__byline { margin: 0; color: var(--mute); }
|
||
|
||
.hero__hud { display: grid; gap: var(--sp-xs); min-width: 250px; max-width: 34ch; text-align: right; }
|
||
.hero__hud-i { color: var(--mute); }
|
||
.hero__hud-n { font-size: 1rem; line-height: 1.4; color: var(--ink); }
|
||
.hero__hud-v { color: var(--mute); }
|
||
.hero__hud-track { display: block; height: 1px; margin-top: var(--sp-sm); background: var(--hairline); }
|
||
.hero__hud-track > i { display: block; height: 100%; width: 0; background: var(--ink); }
|
||
|
||
.hero__cue {
|
||
position: absolute; left: 50%; bottom: clamp(22px, 3.6vw, 48px);
|
||
transform: translateX(-50%);
|
||
margin: 0; color: var(--mute); white-space: nowrap;
|
||
animation: cue 2.6s var(--ease-exp) infinite;
|
||
}
|
||
@keyframes cue { 0%, 100% { opacity: .30; } 45% { opacity: .95; } }
|
||
|
||
/* reduced-motion / 窄屏：不下降，就是一帧静态的地址空间 */
|
||
.space--still .hero { height: auto; }
|
||
.space--still .hero__pin { position: relative; height: 100vh; min-height: 560px; }
|
||
.space--still .hero__cue { display: none; }
|
||
|
||
@media (max-width: 900px) {
|
||
.hero { height: auto; }
|
||
.hero__pin { position: relative; height: auto; min-height: 92vh; padding-block: var(--sp-4xl); }
|
||
.hero__layer { grid-template-rows: auto auto auto; gap: var(--sp-3xl); }
|
||
.hero__row--mid { align-items: flex-start; flex-direction: column; }
|
||
.hero__fig { justify-items: start; text-align: left; max-width: none; }
|
||
.hero__fig-v { font-size: clamp(52px, 15vw, 84px); }
|
||
.hero__row--bot { flex-direction: column; align-items: flex-start; gap: var(--sp-xl); }
|
||
.hero__hud { text-align: left; min-width: 0; }
|
||
.hero__geo, .hero__cue { display: none; }
|
||
}
|
||
|
||
/* ==================================================================
|
||
26. 全站检索（命令面板）
|
||
================================================================== */
|
||
.palbtn {
|
||
display: inline-flex; align-items: center; gap: var(--sp-sm);
|
||
height: 30px; padding: 0 var(--sp-md);
|
||
appearance: none; cursor: pointer; flex: none;
|
||
background: transparent; color: var(--mute);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-pill);
|
||
font: inherit; font-size: 13px;
|
||
transition: color var(--dur-fast) var(--ease-exp), border-color var(--dur-fast) var(--ease-exp);
|
||
}
|
||
.palbtn:hover { color: var(--ink); border-color: var(--btn-border); }
|
||
.palbtn:focus-visible { outline: 2px solid var(--btn-border); outline-offset: 2px; }
|
||
.palbtn .kbd { min-width: 20px; height: 20px; font-size: 11px; }
|
||
|
||
html.pal-open { overflow: hidden; }
|
||
|
||
.pal { position: fixed; inset: 0; z-index: 80; }
|
||
.pal__mask {
|
||
position: absolute; inset: 0;
|
||
background: rgba(0, 0, 0, .72);
|
||
backdrop-filter: blur(3px);
|
||
}
|
||
.pal__box {
|
||
position: relative;
|
||
width: min(720px, calc(100vw - 32px));
|
||
margin: 12vh auto 0;
|
||
background: var(--canvas-card);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-sm);
|
||
overflow: hidden;
|
||
display: flex; flex-direction: column;
|
||
max-height: 70vh;
|
||
animation: palIn var(--dur-fast) var(--ease-exp);
|
||
}
|
||
@keyframes palIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
|
||
|
||
.pal__hd {
|
||
display: flex; align-items: center; gap: var(--sp-md);
|
||
padding: var(--sp-md) var(--sp-lg);
|
||
border-bottom: 1px solid var(--hairline);
|
||
}
|
||
.pal__ico {
|
||
width: 12px; height: 12px; flex: none;
|
||
border: 1.5px solid var(--mute); border-radius: 50%;
|
||
position: relative;
|
||
}
|
||
.pal__ico::after {
|
||
content: ""; position: absolute; right: -5px; bottom: -4px;
|
||
width: 6px; height: 1.5px; background: var(--mute);
|
||
transform: rotate(45deg);
|
||
}
|
||
.pal__in {
|
||
flex: 1 1 auto; min-width: 0;
|
||
appearance: none; background: transparent; border: 0; outline: 0;
|
||
color: var(--ink); font: inherit; font-size: 16px; letter-spacing: -.005em;
|
||
padding: var(--sp-sm) 0;
|
||
}
|
||
.pal__in::placeholder { color: var(--mute); }
|
||
|
||
.pal__list { overflow-y: auto; overscroll-behavior: contain; flex: 1 1 auto; }
|
||
.pal__i {
|
||
display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
|
||
gap: var(--sp-lg); align-items: baseline;
|
||
padding: var(--sp-md) var(--sp-lg);
|
||
border-bottom: 1px solid var(--hairline);
|
||
color: inherit;
|
||
}
|
||
.pal__i:last-child { border-bottom: 0; }
|
||
.pal__i.is-cur { background: var(--canvas-soft); }
|
||
.pal__i-n { color: var(--mute); font-size: 11px; }
|
||
.pal__i.is-cur .pal__i-n { color: var(--ink); }
|
||
.pal__i-b { display: grid; gap: var(--sp-xs); min-width: 0; }
|
||
.pal__i-h { font-size: 15px; line-height: 22px; color: var(--body); }
|
||
.pal__i.is-cur .pal__i-h { color: var(--ink); }
|
||
.pal__i-t {
|
||
font-size: 13px; line-height: 20px; color: var(--mute);
|
||
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
|
||
}
|
||
.pal__i-g { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.pal__i mark { background: transparent; color: var(--ink); box-shadow: inset 0 -1px 0 var(--ink); }
|
||
.pal__none { margin: 0; padding: var(--sp-xl) var(--sp-lg); font-size: 14px; color: var(--mute); }
|
||
.pal__ft {
|
||
display: flex; align-items: center; gap: var(--sp-lg);
|
||
padding: var(--sp-sm) var(--sp-lg);
|
||
border-top: 1px solid var(--hairline);
|
||
font-size: 12px; color: var(--mute);
|
||
}
|
||
.pal__ft .kbd { min-width: 20px; height: 20px; font-size: 11px; }
|
||
.pal__n { margin-left: auto; }
|
||
|
||
/* 检索跳转后闪一下目标标题 */
|
||
#doc h2.is-flash, #doc h3.is-flash {
|
||
animation: flash 1700ms var(--ease);
|
||
}
|
||
@keyframes flash {
|
||
0%, 100% { box-shadow: inset 3px 0 0 transparent; }
|
||
12% { box-shadow: inset 3px 0 0 var(--ink); }
|
||
70% { box-shadow: inset 3px 0 0 var(--ink); }
|
||
}
|
||
|
||
/* ==================================================================
|
||
27. 剂量曲线（NM2.1 页）
|
||
================================================================== */
|
||
.dose {
|
||
margin: var(--sp-xl) 0 var(--sp-2xl);
|
||
padding: var(--sp-xl);
|
||
border: 1px solid var(--hairline); border-radius: var(--r-sm);
|
||
background: var(--canvas-card);
|
||
}
|
||
.dose__hd { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: baseline; margin-bottom: var(--sp-lg); }
|
||
.dose__hd .mono { color: var(--ink); text-transform: none; letter-spacing: .6px; font-size: 12px; }
|
||
.dose__x, .dose__r {
|
||
display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
|
||
gap: var(--sp-lg); align-items: center;
|
||
}
|
||
.dose__x { margin-bottom: var(--sp-md); }
|
||
.dose__x > span {
|
||
font-family: var(--font-mono); font-size: 12px; letter-spacing: 1.2px;
|
||
color: var(--mute); text-align: center;
|
||
}
|
||
.dose__x > span.is-pick { color: var(--ink); }
|
||
.dose__r { padding: var(--sp-md) 0; border-top: 1px solid var(--hairline); }
|
||
.dose__l { font-size: 14px; line-height: 20px; color: var(--body); display: grid; gap: var(--sp-xxs); }
|
||
.dose__l small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; color: var(--mute); }
|
||
.dose__cells { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sp-xl); }
|
||
.dose__c { display: grid; gap: var(--sp-sm); justify-items: center; }
|
||
.dose__bar {
|
||
width: 100%; height: 6px; border-radius: var(--r-pill);
|
||
background: var(--canvas-mid); overflow: hidden;
|
||
}
|
||
.dose__fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--mute); }
|
||
.dose__c.is-pick .dose__fill { background: var(--ink); }
|
||
.dose__c b { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: .6px; color: var(--mute); }
|
||
.dose__c.is-pick b { color: var(--ink); }
|
||
.dose__note { margin: var(--sp-lg) 0 0; color: var(--body); max-width: 88ch; }
|
||
.dose__src { margin: var(--sp-sm) 0 0; color: var(--mute); }
|
||
|
||
/* ==================================================================
|
||
28. 真实评测台账
|
||
================================================================== */
|
||
.ledger-bar { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin: var(--sp-2xl) 0 var(--sp-lg); }
|
||
.ledger-bar .seg { flex-wrap: wrap; }
|
||
.ledger-count {
|
||
display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: baseline;
|
||
padding-bottom: var(--sp-lg); border-bottom: 1px solid var(--hairline);
|
||
}
|
||
.ledger-count .mono { color: var(--ink); text-transform: none; letter-spacing: .6px; }
|
||
.ledger { display: grid; }
|
||
.lg { padding: var(--sp-xl) 0; border-bottom: 1px solid var(--hairline); }
|
||
.lg:last-child { border-bottom: 0; }
|
||
.lg__hd { display: flex; flex-wrap: wrap; gap: var(--sp-md); align-items: center; margin-bottom: var(--sp-md); }
|
||
.lg__i { color: var(--mute); font-size: 11px; }
|
||
.lg__id { margin-left: auto; }
|
||
.lg__exp { margin: 0 0 var(--sp-sm); font-size: 14px; line-height: 22px; color: var(--mute); }
|
||
.lg__exp > span { margin-right: var(--sp-md); font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.2px; }
|
||
.lg__exp code { color: var(--body); }
|
||
.lg__rep {
|
||
margin: 0 0 var(--sp-md); font-size: 13px; line-height: 21px; color: var(--body);
|
||
padding-left: var(--sp-md); border-left: 1px solid var(--btn-border);
|
||
word-break: break-word;
|
||
}
|
||
.lg__meta { margin: 0; font-size: 11px; letter-spacing: .6px; color: var(--mute); }
|
||
.lg__meta b { font-weight: 400; color: var(--body); }
|
||
|
||
/* 发布页上「NM2.1」那一段的紧凑对照 */
|
||
.nm21grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--hairline); border-radius: var(--r-sm); overflow: hidden; }
|
||
.nm21grid > div { padding: var(--sp-xl); border-right: 1px solid var(--hairline); }
|
||
.nm21grid > div:last-child { border-right: 0; }
|
||
.nm21grid .rel__v { font-size: 30px; line-height: 34px; }
|
||
.nm21grid .rel__v em { font-style: normal; color: var(--mute); font-size: 20px; margin-right: var(--sp-sm); }
|
||
|
||
/* 头号数字（money frame）：整页唯一一个 .mega，放在 ~60% 滚动深度收网 */
|
||
.money {
|
||
margin-top: var(--band-tight);
|
||
padding: var(--band-tight) 0;
|
||
border-top: 1px solid var(--hairline);
|
||
border-bottom: 1px solid var(--hairline);
|
||
}
|
||
.money__row {
|
||
display: flex; align-items: baseline; flex-wrap: wrap;
|
||
gap: clamp(14px, 3vw, 44px); margin: var(--sp-lg) 0 0;
|
||
}
|
||
.money .mega { color: var(--ink); }
|
||
.money .mega small { font-size: .34em; letter-spacing: -.02em; margin-left: .03em; font-weight: 500; }
|
||
.money__from {
|
||
font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 1.2px;
|
||
color: var(--mute); max-width: 34ch; line-height: 1.8;
|
||
}
|
||
.money__cap { margin: var(--sp-xl) 0 0; max-width: var(--measure); font-size: var(--fs-small); line-height: 1.7; color: var(--body); }
|
||
|
||
@media (max-width: 1080px) {
|
||
.dose__x, .dose__r { grid-template-columns: minmax(0, 1fr); gap: var(--sp-sm); }
|
||
.dose__x .dose__x0 { display: none; }
|
||
.dose__x > span { text-align: left; }
|
||
.nm21grid { grid-template-columns: minmax(0, 1fr); }
|
||
.nm21grid > div { border-right: 0; border-bottom: 1px solid var(--hairline); }
|
||
.nm21grid > div:last-child { border-bottom: 0; }
|
||
}
|
||
@media (max-width: 768px) {
|
||
.palbtn__t { display: none; }
|
||
.pal__box { margin-top: 6vh; max-height: 82vh; }
|
||
.pal__i { grid-template-columns: 26px minmax(0, 1fr); }
|
||
.pal__i-g { display: none; }
|
||
.dose, .lg { padding-left: 0; padding-right: 0; }
|
||
.dose { padding: var(--sp-lg); }
|
||
}
|