@import url("https://fonts.googleapis.com/css2?family=Anton&family=Noto+Sans+SC:wght@500;700;900&display=swap");
:root {
  color-scheme: dark;
  --red: #0a84e0; --red-hi: #4cc9ff; --red-deep: #0a3d91; --black: #06102a; --white: #fff;
  --ink: #06102a; --paper: #fff; --soft: #ececec; --mist: #c4c4c4; --dim: #8e8e8e;
  --line: #fff; --line-soft: rgba(255, 255, 255, .5); --line-faint: rgba(255, 255, 255, .16);
  --gold: #4cc9ff; --gold-deep: #0a84e0; --good: #3ee07a; --bad: #ff5a7a;
  --pick: #0a84e0; --pick-top: #fff;
  --halftone: radial-gradient(circle, rgba(0, 0, 0, .38) 1.3px, transparent 1.8px) 0 0 / 9px 9px;
  --f: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
  --d: "Anton", "Impact", "Noto Sans SC", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
* { box-sizing: border-box; }
/* 字号随画框宽度自适应，和幻水版一致：只看宽度，不用 vh。黑底，右上角两道红斜线 */
html { font-size: clamp(16px, calc(8px + 1.1vw), 22px); background:
  linear-gradient(118deg, transparent 0 82%, var(--red) 82% 86%, transparent 86% 87.5%, var(--red) 87.5% 88.5%, transparent 88.5%) right top / 300px 150px no-repeat,
  var(--black); background-color: var(--black); }
body { font: 500 1rem/1.85 var(--f); letter-spacing: .02em; color: var(--paper);
  max-width: 45rem; margin: 0 auto; padding: 1.4rem 1.6rem 1.9rem; overflow-wrap: anywhere; }
::selection { background: var(--red); color: var(--white); }

/* ---- 文字：标题都是歪着的色块 ---- */
h1, h2, h3, h4 { font-weight: 900; line-height: 1.4; margin: 1.5em 0 .7em; letter-spacing: .04em; }
h1 { display: table; font-size: 1.6rem; padding: .1em .55em .15em; background: var(--red); color: var(--white); transform: rotate(-2deg) skewX(-8deg); box-shadow: .3rem .3rem 0 var(--white); }
h2 { display: table; font-size: 1.15rem; padding: .05em .6em .1em; background: var(--white); color: var(--black); transform: rotate(-1.5deg) skewX(-10deg); box-shadow: .25rem .25rem 0 var(--red); }
h3 { font-size: 1rem; color: var(--red-hi); }
h3::before { content: "▶ "; font-size: .8em; }
h4 { font-size: .9375rem; color: var(--white); border-left: .3em solid var(--red); padding-left: .5em; }
:is(h1, h2, h3, h4):first-child { margin-top: .2em; }
p { margin: .7em 0; }
a { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 3px; }
a:hover { background: var(--red); text-decoration: none; }
strong, b { color: var(--white); font-weight: 900; }
em { color: var(--red-hi); font-style: italic; font-weight: 700; }
small, .meta { color: var(--mist); font-size: .8125rem; }
.meta { display: block; margin: -.3em 0 1em; font: 400 .8rem var(--d); letter-spacing: .12em; color: var(--red-hi); }
.lede { font-size: 1.25rem; line-height: 1.75; font-weight: 900; color: var(--white); margin: 0 0 .9em; }
.muted { color: var(--mist); }
.center { text-align: center; }
mark { background: var(--red); color: var(--white); padding: 0 .3em; font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
code, kbd { font: .875rem var(--mono); color: var(--red-hi); letter-spacing: 0; }
pre { font: .84rem/1.7 var(--mono); letter-spacing: 0; color: var(--soft); background: #0c1a3d; border-left: 4px solid var(--red); padding: .75rem .9rem; overflow: auto; }
pre code { color: inherit; font-size: inherit; }
hr { border: 0; height: 6px; background: repeating-linear-gradient(-60deg, var(--red) 0 10px, transparent 10px 16px); margin: 1.8em 0; }

/* 用户原话：P5 的对话框。白底黑字，歪一点，红色硬投影，左下角一个尖 */
blockquote { position: relative; margin: .4em .4rem 1.4em; padding: .8rem 1.1rem; background: var(--white); color: var(--black); font-weight: 700;
  transform: rotate(-1deg); box-shadow: .35rem .35rem 0 var(--red); }
blockquote::after { content: ""; position: absolute; left: 1.6rem; bottom: -.9rem; width: 1.3rem; height: 1rem; background: var(--white); clip-path: polygon(0 0, 100% 0, 10% 100%); }
blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; }
blockquote strong, blockquote b { color: var(--black); }
blockquote cite { display: inline-block; font-style: normal; margin-top: .5em; padding: 0 .5em; background: var(--black); color: var(--white); font-size: .78rem; transform: skewX(-10deg); }

/* ---- 列表 / 表格 ---- */
ul, ol { padding-left: 1.4em; } li { margin: .3em 0; } li::marker { color: var(--red-hi); }
ul > li { list-style: none; position: relative; }
ul > li::before { content: ""; position: absolute; left: -1.1em; top: .62em; width: .5em; height: .5em; background: var(--red); transform: rotate(45deg); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 1em 0; border: 3px solid var(--white); }
th { text-align: left; font-weight: 900; letter-spacing: .06em; padding: .45rem .75rem; background: var(--red); color: var(--white); }
td { padding: .45rem .75rem; border-top: 1px solid var(--line-faint); }
tr.pick, td.pick { background: var(--white); color: var(--black); font-weight: 900; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
td.num { font: 400 1.05rem var(--d); letter-spacing: .03em; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.125rem; margin: .9em 0; }
dl.kv dt { color: var(--black); background: var(--white); padding: 0 .5em; font-size: .85rem; font-weight: 900; transform: skewX(-10deg); align-self: start; } dl.kv dd { margin: 0; }

/* ---- 媒体：白粗框 + 红色硬投影 ---- */
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: 4px solid var(--white); box-shadow: .4rem .4rem 0 var(--red); }
figure { margin: 1.3em 0; } figure > img, figure > video { margin: 0 auto; }
figcaption { display: table; margin: .8rem auto 0; padding: 0 .6em; background: var(--white); color: var(--black); font-size: .8125rem; font-weight: 700; transform: rotate(-1deg) skewX(-8deg); }
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: 1.1em 0; padding: .9rem 1.15rem; background: #0c1a3d; border: 3px solid var(--white); box-shadow: .35rem .35rem 0 var(--red); }
.win > :first-child { margin-top: 0; } .win > :last-child { margin-bottom: 0; }
.win > :is(h2, h3):first-child { font-size: 1rem; }

/* 旁注：整理是红色斜条，疑问前面一颗红星里的问号 */
.note { position: relative; margin: 1.1em 0; padding: .7rem 1rem .7rem 1.2rem; background: linear-gradient(100deg, rgba(10, 132, 224, .2), rgba(10, 132, 224, .06)); border-left: .4rem solid var(--red); }
.note > :first-child { margin-top: 0; } .note > :last-child { margin-bottom: 0; }
.note.q { background: #0c1a3d; border-left-color: var(--white); padding-left: 3rem; }
.note.q::before { content: "?"; position: absolute; left: .5rem; top: .55rem; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; background: var(--red); color: var(--white);
  font: 400 1.1rem var(--d); clip-path: polygon(50% 0, 63% 30%, 98% 20%, 72% 50%, 98% 80%, 63% 70%, 50% 100%, 37% 70%, 2% 80%, 28% 50%, 2% 20%, 37% 30%); }

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

/* ---- 数据：Anton 斜体大数字，红色错位影 ---- */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat b { font: 400 2.5rem/1.05 var(--d); color: var(--white); transform: skewX(-8deg); transform-origin: left; text-shadow: .12rem .12rem 0 var(--red); font-variant-numeric: tabular-nums; }
.stat > span { color: var(--mist); font-size: .8125rem; font-weight: 700; }
.up, .down { font-variant-numeric: tabular-nums; font-weight: 900; }
.up { color: var(--good); } .up::before { content: "▲ "; font-size: .8em; }
.down { color: var(--bad); } .down::before { content: "▼ "; font-size: .8em; }
.bar { height: .7rem; margin: 10px 0; background: #14254d; transform: skewX(-20deg); }
.bar::before { content: ""; display: block; height: 100%; width: var(--v, 0%); background: repeating-linear-gradient(-60deg, var(--red) 0 8px, var(--red-hi) 8px 12px); }
.tag { display: inline-block; font-size: .75rem; font-weight: 900; line-height: 1.6; padding: 0 .55em; background: var(--white); color: var(--black);
  letter-spacing: .04em; white-space: nowrap; margin: 0 .35rem .3rem 0; transform: skewX(-10deg); }

/* 时间线：红竖线，节点是白边红菱形，时间用 Anton */
ol.steps { list-style: none; padding: 0; margin: 1em 0; }
ol.steps li { position: relative; padding: 0 0 1em 1.6rem; margin: 0 0 0 .45rem; border-left: 3px solid var(--red); }
ol.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.steps li::before { content: ""; position: absolute; left: calc(-.45rem - 1.5px); top: .45em; width: .9rem; height: .9rem; background: var(--red);
  border: 2px solid var(--white); transform: rotate(45deg); }
ol.steps time { display: block; color: var(--red-hi); font: 400 .95rem var(--d); letter-spacing: .06em; }

/* 折叠 */
details { margin: 1em 0; padding: .5rem 1rem; border: 2px solid var(--white); }
summary { cursor: pointer; font-weight: 900; letter-spacing: .04em; }
summary::marker { color: var(--red-hi); }
details[open] summary { margin-bottom: .5em; }

/* 按钮（交互式 artifact 用） */
button, .btn { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 0; color: var(--black);
  padding: .3rem 1rem; font: 900 .875rem/1.5 var(--f); letter-spacing: .08em; cursor: pointer; transform: skewX(-10deg); }
button:hover:not(:disabled), .btn:hover, button.on { background: var(--red); color: var(--white); box-shadow: 3px 3px 0 var(--white); }
input, select, textarea { font: inherit; color: var(--black); background: var(--white); border: 0; padding: .3rem .6rem; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--red); }