@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=VT323&display=swap");
:root {
  color-scheme: light;
  --ink: #fff; --paper: #000; --soft: #222; --mist: #4a4a4a; --dim: #808080;
  --face: #c0c0c0; --hi: #dfdfdf; --shade: #808080; --desk: #008080;
  --gold: #000080; --gold-deep: #000080; --cyan: #008080; --good: #008000; --bad: #c00000;
  --line: #808080; --line-soft: rgba(0, 0, 0, .35); --line-faint: rgba(0, 0, 0, .14);
  --pick: #000080; --pick-top: #000080;
  --title: linear-gradient(90deg, #000080, #1084d0); --title-off: linear-gradient(90deg, #808080, #b5b5b5);
  --tip: #ffffe1;
  --f: Tahoma, "Microsoft Sans Serif", "MS Sans Serif", "SimSun", "宋体", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --d: Tahoma, "Microsoft Sans Serif", "SimSun", "Noto Sans SC", sans-serif;
  --mono: "VT323", "Fixedsys", "Lucida Console", "Courier New", monospace; }
* { box-sizing: border-box; }
/* 字号随画框宽度自适应，和另外几套一致：只看宽度，不用 vh */
html { font-size: clamp(15px, calc(8px + 1vw), 20px); background: #fff; }
body { font: 400 1rem/1.75 var(--f); color: #000; max-width: 45rem; margin: 0 auto; padding: 1.25rem 1.5rem 1.6rem; overflow-wrap: anywhere; }
::selection { background: #000080; color: #fff; }

/* ---- 文字 ---- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.4; margin: 1.3em 0 .55em; }
h1 { font-size: 1.45rem; padding-bottom: .25em; box-shadow: 0 2px 0 -1px #fff, 0 1px 0 #808080; }
/* h2：前面一个文件夹图标 */
h2 { font-size: 1.15rem; display: flex; align-items: center; gap: .45em; }
h2::before { content: ""; width: 1em; height: 1em; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20d%3D'M1.5%203.5h5l1%201.5h7v9.5h-13z'%20fill%3D'%23ffff80'%20stroke%3D'%23808000'%2F%3E%3Cpath%20d%3D'M1.5%206.5h13v8h-13z'%20fill%3D'%23ffd84a'%20stroke%3D'%23808000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
/* h3：一条灰色的分组标题，像对话框里的分组框标签 */
h3 { font-size: 1rem; display: flex; align-items: center; gap: .5em; }
h3::after { content: ""; flex: 1; height: 2px; box-shadow: inset 0 1px #808080, inset 0 -1px #fff; background: #fff; }
h4 { font-size: .95rem; color: #000080; }
:is(h1, h2, h3, h4):first-child { margin-top: 0; }
p { margin: .65em 0; }
a { color: #0000ff; text-decoration: underline; }
a:visited { color: #800080; }
a:hover { color: #ff0000; }
strong, b { font-weight: 700; }
em { font-style: italic; color: #000080; }
small, .meta { color: var(--mist); font-size: .8125rem; }
.meta { display: block; margin: -.3em 0 1em; color: var(--mist); }
.lede { font-size: 1.15rem; line-height: 1.75; margin: 0 0 .9em; }
.muted { color: var(--mist); }
.center { text-align: center; }
mark { background: #000080; color: #fff; padding: 0 .15em; }
code, kbd { font: 1.05em var(--mono); color: #000; background: #f0f0f0; padding: 0 .2em; }
kbd { background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; padding: 0 .4em; }
/* 代码块：一扇 MS-DOS 窗口 */
pre { font: 1.05rem/1.35 var(--mono); color: #c0c0c0; background: #000; padding: .6rem .8rem; overflow: auto;
  border: 3px solid #c0c0c0; box-shadow: 0 0 0 1px #808080, inset 0 0 0 1px #0a0a0a; }
pre code { color: inherit; font: inherit; background: none; padding: 0; }
hr { border: 0; height: 2px; box-shadow: inset 0 1px #808080, inset 0 -1px #dfdfdf; margin: 1.6em 0; }

/* 用户原话：黄色的提示框 */
blockquote { margin: 0 0 1.1em; padding: .6rem .9rem; background: var(--tip); color: #000; border: 1px solid #000; box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }
blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; }
blockquote cite { display: block; font-style: normal; color: var(--mist); font-size: .8125rem; margin-top: .4em; }
blockquote cite::before { content: "— "; }

/* ---- 列表 / 表格 ---- */
ul, ol { padding-left: 1.4em; } li { margin: .2em 0; }
ul { list-style: square; }
/* 表格：详细信息视图，表头是一排凸起的列标题按钮 */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; margin: .9em 0;
  background: #fff; padding: 2px; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; font-size: .9375rem; }
th { text-align: left; font-weight: 400; padding: .2rem .6rem; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; white-space: nowrap; }
td { padding: .25rem .6rem; }
tr.pick, td.pick { background: #000080; color: #fff; }
tr.pick b, td.pick b, tr.pick a, td.pick a { color: #fff; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 键值：属性对话框，左边标签，右边一格只读的白框 */
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem .8rem; align-items: center; margin: .9em 0; padding: .8rem; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
dl.kv dt { font-size: .9375rem; }
dl.kv dt::after { content: "："; }
dl.kv dd { margin: 0; padding: .1rem .5rem; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; min-height: 1.6em; }

/* ---- 媒体：凹进去的相框 ---- */
img, video, svg, canvas { max-width: 100%; height: auto; }
video { width: 100%; background: #000; }
audio { width: 100%; margin: .6em 0; }
img, video { display: block; border: 2px solid; border-color: #808080 #fff #fff #808080; outline: 1px solid #c0c0c0; }
figure { margin: 1.2em 0; } figure > img, figure > video { margin: 0 auto; }
figcaption { color: var(--mist); font-size: .8125rem; text-align: center; margin-top: .45rem; }
figure video { display: block; margin: 0 auto; max-width: 100%; height: auto; background: #000; }
figure.portrait video { max-height: 720px; width: auto; }

/* ---- 窗口：灰色小窗口；第一个标题变成藏青标题栏 ---- */
.win { position: relative; margin: 1em 0; padding: .7rem .9rem; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
.win > :first-child { margin-top: 0; } .win > :last-child { margin-bottom: 0; }
.win > :is(h2, h3):first-child { margin: -.55rem -.75rem .7rem; padding: .15rem 3.6rem .15rem .4rem; font-size: .9375rem; color: #fff; position: relative;
  background: var(--title); box-shadow: none; }
.win > :is(h2, h3):first-child::before { content: ""; width: 1em; height: 1em; flex: none; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20d%3D'M2.5%20.5h8l3%203v12h-11z'%20fill%3D'%23fff'%20stroke%3D'%23000'%2F%3E%3Cpath%20d%3D'M10.5%20.5v3h3'%20fill%3D'%23c0c0c0'%20stroke%3D'%23000'%2F%3E%3Crect%20x%3D'4'%20y%3D'5'%20width%3D'7'%20height%3D'1'%20fill%3D'%23000080'%2F%3E%3Crect%20x%3D'4'%20y%3D'7'%20width%3D'8'%20height%3D'1'%20fill%3D'%23808080'%2F%3E%3Crect%20x%3D'4'%20y%3D'9'%20width%3D'6'%20height%3D'1'%20fill%3D'%23808080'%2F%3E%3Crect%20x%3D'4'%20y%3D'11'%20width%3D'8'%20height%3D'1'%20fill%3D'%23808080'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.win > :is(h2, h3):first-child::after { content: ""; position: absolute; right: .25rem; top: 50%; margin-top: -7px; width: 50px; height: 14px; flex: none; box-shadow: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2050%2014'%20shape-rendering%3D'crispEdges'%3E%3Cg%20transform%3D'translate(0%200)'%3E%3Crect%20width%3D'16'%20height%3D'14'%20fill%3D'%23000'%2F%3E%3Crect%20width%3D'15'%20height%3D'13'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'14'%20height%3D'12'%20fill%3D'%23808080'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'13'%20height%3D'11'%20fill%3D'%23dfdfdf'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'12'%20height%3D'10'%20fill%3D'%23c0c0c0'%2F%3E%3Crect%20x%3D'4'%20y%3D'9'%20width%3D'6'%20height%3D'2'%20fill%3D'%23000'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(16%200)'%3E%3Crect%20width%3D'16'%20height%3D'14'%20fill%3D'%23000'%2F%3E%3Crect%20width%3D'15'%20height%3D'13'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'14'%20height%3D'12'%20fill%3D'%23808080'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'13'%20height%3D'11'%20fill%3D'%23dfdfdf'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'12'%20height%3D'10'%20fill%3D'%23c0c0c0'%2F%3E%3Crect%20x%3D'3'%20y%3D'2'%20width%3D'9'%20height%3D'2'%20fill%3D'%23000'%2F%3E%3Crect%20x%3D'3'%20y%3D'2'%20width%3D'1'%20height%3D'9'%20fill%3D'%23000'%2F%3E%3Crect%20x%3D'11'%20y%3D'2'%20width%3D'1'%20height%3D'9'%20fill%3D'%23000'%2F%3E%3Crect%20x%3D'3'%20y%3D'10'%20width%3D'9'%20height%3D'1'%20fill%3D'%23000'%2F%3E%3C%2Fg%3E%3Cg%20transform%3D'translate(34%200)'%3E%3Crect%20width%3D'16'%20height%3D'14'%20fill%3D'%23000'%2F%3E%3Crect%20width%3D'15'%20height%3D'13'%20fill%3D'%23fff'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'14'%20height%3D'12'%20fill%3D'%23808080'%2F%3E%3Crect%20x%3D'1'%20y%3D'1'%20width%3D'13'%20height%3D'11'%20fill%3D'%23dfdfdf'%2F%3E%3Crect%20x%3D'2'%20y%3D'2'%20width%3D'12'%20height%3D'10'%20fill%3D'%23c0c0c0'%2F%3E%3Cpath%20d%3D'M4%203h2l1%201%201%201h0l1-1%201-1h2v1l-1%201-1%201-1%201%201%201%201%201%201%201v1h-2l-1-1-1-1-1%201-1%201H4v-1l1-1%201-1%201-1-1-1-1-1-1-1z'%20fill%3D'%23000'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") center / 50px 14px no-repeat; }

/* 旁注：整理是“信息”消息框，疑问是“?”消息框 */
.note { position: relative; margin: 1em 0; padding: .7rem .9rem .7rem 3.4rem; min-height: 3.4rem; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; }
.note::before { content: ""; position: absolute; left: .8rem; top: .7rem; width: 2rem; height: 2rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20d%3D'M16%202C8%202%203%207%203%2013c0%205%203%209%209%2010l-1%206%207-6c7-1%2011-5%2011-10%200-6-5-11-13-11z'%20fill%3D'%23fff'%20stroke%3D'%23000'%2F%3E%3Crect%20x%3D'14'%20y%3D'6'%20width%3D'4'%20height%3D'3'%20fill%3D'%2300f'%2F%3E%3Crect%20x%3D'14'%20y%3D'11'%20width%3D'4'%20height%3D'9'%20fill%3D'%2300f'%2F%3E%3Crect%20x%3D'12'%20y%3D'11'%20width%3D'2'%20height%3D'2'%20fill%3D'%2300f'%2F%3E%3Crect%20x%3D'12'%20y%3D'19'%20width%3D'8'%20height%3D'2'%20fill%3D'%2300f'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; }
.note.q::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2032%2032'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20d%3D'M16%202C8%202%203%207%203%2013c0%205%203%209%209%2010l-1%206%207-6c7-1%2011-5%2011-10%200-6-5-11-13-11z'%20fill%3D'%23fff'%20stroke%3D'%23000'%2F%3E%3Cpath%20d%3D'M11%209q0-4%205-4t5%204q0%203-3%204-2%201-2%203v1'%20fill%3D'none'%20stroke%3D'%2300f'%20stroke-width%3D'3'%20shape-rendering%3D'geometricPrecision'%2F%3E%3Crect%20x%3D'14'%20y%3D'19'%20width%3D'4'%20height%3D'3'%20fill%3D'%2300f'%2F%3E%3C%2Fsvg%3E"); }

/* ---- 布局：分组框 ---- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: .7rem; 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: 1rem 1rem 1.4rem; } .cols { grid-template-columns: 1fr; } }

/* ---- 数据：数字是粗体，.bar 是一格一格的进度条 ---- */
.stat { display: flex; flex-direction: column; gap: 1px; }
.stat b { font: 700 1.75rem/1.2 var(--d); 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; }
.bar { position: relative; height: 1.1rem; margin: 6px 0; padding: 3px; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080; }
.bar::before { content: ""; display: block; height: 100%; width: var(--v, 0%);
  background: repeating-linear-gradient(90deg, #000080 0 .55rem, transparent .55rem .7rem); }
.tag { display: inline-block; font-size: .75rem; line-height: 1.6; padding: 0 .5em; background: #c0c0c0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; white-space: nowrap; margin: 0 .25rem .25rem 0; }

/* 时间线：资源管理器左边的树，虚线连起来，每个节点一个文件夹 */
ol.steps { list-style: none; padding: 0; margin: 1em 0 1em .5rem; }
ol.steps li { position: relative; padding: 0 0 .8em 1.9rem; margin: 0; border-left: 1px dotted #808080; }
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li:last-child::after { content: ""; position: absolute; left: -1px; top: 0; height: .85em; border-left: 1px dotted #808080; }
ol.steps li::before { content: ""; position: absolute; left: 0; top: .85em; width: .6rem; border-top: 1px dotted #808080; }
ol.steps time { display: block; color: #000080; font-size: .8125rem; position: relative; }
ol.steps time::before { content: ""; position: absolute; left: -1.25rem; top: .1em; width: 1rem; height: 1rem; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2016%2016'%20shape-rendering%3D'crispEdges'%3E%3Cpath%20d%3D'M1.5%203.5h5l1%201.5h7v9.5h-13z'%20fill%3D'%23ffff80'%20stroke%3D'%23808000'%2F%3E%3Cpath%20d%3D'M1.5%206.5h13v8h-13z'%20fill%3D'%23ffd84a'%20stroke%3D'%23808000'%2F%3E%3C%2Fsvg%3E") center / contain no-repeat; }

/* 折叠：树节点的 [+] / [-] 方框 */
details { margin: 1em 0; padding: .4rem .7rem; background: #fff; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5em; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; display: grid; place-items: center; width: .9em; height: .9em; flex: none; font: 700 .8em/1 var(--f); border: 1px solid #808080; background: #fff; }
details[open] summary::before { content: "−"; }
details[open] summary { margin-bottom: .4em; }

/* 按钮、输入框（交互式 artifact 用） */
button, .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 75px; min-height: 23px; padding: .2rem .8rem;
  background: #c0c0c0; color: #000; border: 0; border-radius: 0; box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff; font: 400 .875rem/1.4 var(--f); cursor: pointer; }
button:active, .btn:active, button.on { box-shadow: inset -1px -1px #fff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080; }
button:focus-visible, .btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
button:disabled { color: #808080; text-shadow: 1px 1px #fff; cursor: default; }
input, select, textarea { font: inherit; color: #000; background: #fff; border: 0; border-radius: 0; padding: .2rem .4rem; box-shadow: inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a; }
input:focus, select:focus, textarea:focus { outline: none; }