:root {
  color-scheme: dark;
  --ink: #050505; --paper: #f3f3ec; --soft: #dcdcd2; --mist: #a9a9a0; --dim: #6f6f69;
  --line: #d9d9d0; --line-soft: rgba(217, 217, 208, .45); --line-faint: rgba(217, 217, 208, .15);
  --gold: #e8cf6a; --gold-deep: #d8b83a; --good: #3fe090; --bad: #ff5f5f;
  --pick: linear-gradient(90deg, rgba(196, 164, 40, .96), rgba(158, 128, 24, .82) 55%, rgba(120, 96, 12, .2));
  --pick-top: #f4e9a8;
  --win: linear-gradient(180deg, rgba(10, 10, 10, .86), rgba(0, 0, 0, .82));
  --knot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cg fill='none' stroke='%23d9d9d0' stroke-width='1.5'%3E%3Crect x='1' y='1' width='9' height='9'/%3E%3Crect x='6' y='6' width='9' height='9'/%3E%3C/g%3E%3C/svg%3E");
  --f: "Noto Serif SC", "Songti SC", "STSong", "SimSun", "MS Mincho", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
/* 字号随画框宽度自适应：手机 16px，画廊铺满一屏约 20px，更宽封顶 22px；其余尺寸都用 rem/em，跟着一起缩放。
   只看宽度（vw）：阅读视图里 iframe 高度随内容变化，用 vh 会互相放大 */
html { background: var(--ink); font-size: clamp(16px, calc(8px + 1.1vw), 22px); }
body { font: 500 1rem/1.9 var(--f); letter-spacing: .04em; color: var(--paper);
  max-width: 45rem; margin: 0 auto; padding: 1.4rem 1.5rem 1.75rem; overflow-wrap: anywhere; }
::selection { background: rgba(196, 164, 40, .6); color: #fff; }

/* ---- 文字 ---- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: .16em; line-height: 1.5; margin: 1.3em 0 .6em; padding-bottom: .4em; border-bottom: 2px solid var(--line); }
h1 { font-size: 1.375rem; } h2 { font-size: 1.1875rem; } h3 { font-size: 1rem; border-bottom-width: 1px; }
h4 { font-size: .9375rem; border: 0; padding: 0; color: var(--gold); letter-spacing: .12em; }
:is(h1, h2, h3, h4):first-child { margin-top: 0; }
p { margin: .7em 0; }
a { color: var(--gold); text-underline-offset: 3px; }
strong, b { color: #fff; font-weight: 700; }
em { color: var(--gold); font-style: normal; }
small, .meta { color: var(--mist); font-size: .8125rem; }
.meta { display: block; margin: -.3em 0 1em; letter-spacing: .06em; }
.lede { font-size: 1.125rem; line-height: 1.85; color: #fff; margin: 0 0 1em; }
.muted { color: var(--mist); }
.center { text-align: center; }
mark { background: var(--pick); color: #fff; padding: 0 .25em; box-shadow: inset 0 1px 0 var(--pick-top); }
code, kbd { font: .875rem var(--mono); color: var(--gold); letter-spacing: 0; }
pre { font: .84rem/1.7 var(--mono); letter-spacing: 0; color: var(--soft); background: rgba(255, 255, 255, .04);
  border: 1px solid var(--line-faint); padding: .75rem .875rem; overflow: auto; }
pre code { color: inherit; font-size: inherit; }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 1.6em 0; }

/* 用户原话：blockquote；可加 <cite> 标注出处 */
blockquote { margin: 0 0 1.1em; padding: .125rem 0 .125rem 1rem; border-left: 2px solid var(--line); color: var(--soft); }
blockquote cite { display: block; font-style: normal; color: var(--mist); font-size: .8125rem; margin-top: .3em; }
blockquote cite::before { content: "—— "; }

/* ---- 列表 / 表格 ---- */
ul, ol { padding-left: 1.4em; } li { margin: .2em 0; } li::marker { color: var(--gold); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: .8em 0; }
th { text-align: left; font-weight: 500; color: var(--mist); font-size: .8125rem; padding: .125rem .625rem .375rem; border-bottom: 2px solid var(--line); }
td { padding: .375rem .625rem; border-top: 1px solid var(--line-faint); }
tr.pick, td.pick { background: var(--pick); color: #fff; } tr.pick td, td.pick { box-shadow: inset 0 1px 0 var(--pick-top); }
.num { text-align: right; font-variant-numeric: tabular-nums; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1.125rem; margin: .8em 0; }
dl.kv dt { color: var(--mist); font-size: .875rem; } dl.kv dd { margin: 0; }

/* ---- 媒体 ---- */
img, video, svg, canvas { max-width: 100%; height: auto; }
img, video { display: block; border: 1px solid var(--line-soft); }
figure { margin: 1.2em 0; } figure > img, figure > video { margin: 0 auto; }
figcaption { color: var(--mist); font-size: .8125rem; text-align: center; margin-top: .375rem; }

/* ---- 窗口：与站点同款的黑底、灰白边框、回纹角花 ---- */
.win { position: relative; margin: 1em 0; padding: .875rem 1.125rem;
  background: var(--knot) left top / 15px no-repeat, var(--knot) right top / 15px no-repeat, var(--win);
  background-origin: border-box; border: 2px solid var(--line); box-shadow: 0 0 0 1px rgba(0, 0, 0, .85); }
.win > :first-child { margin-top: 0; } .win > :last-child { margin-bottom: 0; }
.win > :is(h2, h3):first-child { font-size: 1rem; padding: 0 .25rem .375rem; margin: 0 -.25rem .625rem; }

/* 提示 / 旁注：整理、延伸、疑问放这里 */
.note { margin: 1em 0; padding: .625rem .875rem; border-left: 2px solid var(--gold); background: rgba(232, 207, 106, .06); }
.note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; }
.note.q { border-left-color: var(--line); background: rgba(217, 217, 208, .05); }
.note.q::before { content: "？"; color: var(--gold); font-weight: 700; margin-right: .3em; }

/* ---- 布局 ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .75rem; margin: 1em 0; }
:is(.grid, .cols) > .win { margin: 0; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1em 0; }
@media (max-width: 560px) { body { padding: 1.125rem 1rem 1.5rem; } .cols { grid-template-columns: 1fr; } }

/* ---- 数据 ---- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 1.75rem; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.stat > span { color: var(--mist); font-size: .8125rem; }
.up, .down { font-variant-numeric: tabular-nums; }
.up { color: var(--good); } .up::before { content: "▲ "; font-size: .8em; }
.down { color: var(--bad); } .down::before { content: "▼ "; font-size: .8em; }
/* 数据条：<div class="bar" style="--v:62%"></div> */
.bar { height: .375rem; border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .04); margin: 6px 0; }
.bar::before { content: ""; display: block; height: 100%; width: var(--v, 0%); background: var(--gold-deep); }
.tag { display: inline-block; font-size: .75rem; line-height: 1.5; padding: 0 .45em; border: 1px solid currentColor; color: var(--gold);
  letter-spacing: .04em; white-space: nowrap; margin: 0 .25rem .25rem 0; }

/* 时间线 / 步骤：<ol class="steps"><li><b>标题</b> 说明</li></ol> */
ol.steps { list-style: none; padding: 0; margin: 1em 0; }
ol.steps li { position: relative; padding: 0 0 .9em 1.375rem; margin: 0; border-left: 1px solid var(--line-soft); margin-left: .3rem; }
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before { content: ""; position: absolute; left: calc(-.28rem - .5px); top: .55em; width: .5625rem; height: .5625rem;
  background: var(--gold); box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--line); }
ol.steps time { display: block; color: var(--mist); font-size: .8125rem; }

/* 折叠 */
details { border: 1px solid var(--line-soft); padding: .375rem .875rem; margin: 1em 0; }
summary { cursor: pointer; color: var(--gold); letter-spacing: .1em; }
details[open] summary { margin-bottom: .4em; }

/* 按钮（交互式 artifact 用） */
button, .btn { display: inline-flex; align-items: center; gap: 6px; background: rgba(0, 0, 0, .78); border: 1px solid var(--line);
  color: var(--paper); padding: .25rem .875rem; font: 600 .875rem/1.5 var(--f); letter-spacing: .12em; cursor: pointer; }
button:hover:not(:disabled), .btn:hover, button.on { background: var(--pick); border-color: #fff; color: #fff; }
input, select, textarea { font: inherit; color: var(--paper); background: rgba(0, 0, 0, .6); border: 1px solid var(--line-soft); padding: .25rem .5rem; }