/* ============================================================
   《踩点》ON THE BEAT  book.css
   亮色。视觉母题＝节奏游戏的谱面：一张淡淡的时间格网 + 一条判定线。

   全书三个语义色（脊梁，从第 1 章用到第 24 章）：
     早 early  靛青   你在点之前动了
     准 exact  墨绿   你落在窗口里
     晚 late   赭红   你在点之后才动
   加一个 pulse 琥珀 ＝「拍本身」（节拍器、判定线、时间轴）
   和一个 void 灰   ＝「空拍 / 数不出来的地方」
   ============================================================ */

:root {
  --paper:   #FBF9F4;
  --paper-2: #F4F0E6;
  --ink:     #22262E;
  --ink-2:   #4A5058;
  --ink-3:   #767D87;
  --rule:    #DED8C9;
  --grid:    #E9E4D6;

  --early:  #2F6FB2;
  --exact:  #127A55;
  --late:   #B8442A;
  --pulse:  #B7820F;
  --void:   #868D97;

  --early-bg: #E4EEF8;
  --exact-bg: #DFF0E7;
  --late-bg:  #FAE6E0;
  --pulse-bg: #F8EFD8;
  --void-bg:  #ECEDEF;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
          "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  --beat-w: 30px;          /* 背景时间格：一格 = 一个十六分音符 */
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--paper);
  /* 时间格网：细线每一格（十六分），粗线每四格（一拍）。
     很淡 —— 它是背景里的节拍器，不是装饰。 */
  background-image:
    repeating-linear-gradient(to right,
      var(--grid) 0 1px, transparent 1px calc(var(--beat-w))),
    repeating-linear-gradient(to right,
      rgba(183,130,15,.16) 0 1.5px, transparent 1.5px calc(var(--beat-w) * 4));
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--pulse-bg); }

/* ══════════════════════════════════════════════════════════
   版心
   ══════════════════════════════════════════════════════════ */

.content { padding: 0 20px 100px; }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  background: var(--paper);
  padding: 0 34px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .content { padding: 0 8px 80px; }
  .wrap { padding: 0 16px; }
}

/* ══════════════════════════════════════════════════════════
   顶栏 —— 一条判定线，24 个音符槽
   ══════════════════════════════════════════════════════════ */

.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 20px;
  background: rgba(251,249,244,.94);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.tb-home {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--ink); text-decoration: none; font-weight: 700;
  letter-spacing: .04em; white-space: nowrap;
}
.tb-home .mark {
  display: inline-block; width: 15px; height: 15px;
  border-radius: 3px;
  background: var(--pulse);
  box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 1.5px var(--pulse);
}

/* 音符槽：读过的填实，当前那个是琥珀 */
.slots { display: flex; gap: 2.5px; flex: 1; min-width: 0; }
.slots i {
  flex: 1 1 0; height: 13px; min-width: 3px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.slots i.done { background: var(--ink-3); border-color: var(--ink-3); }
.slots i.here {
  background: var(--pulse); border-color: var(--pulse);
  box-shadow: 0 0 0 2px var(--pulse-bg);
}

.tb-n { font-family: var(--mono); color: var(--ink-3); font-size: 12px; white-space: nowrap; }

.tb-toc {
  font: inherit; font-size: 12px;
  padding: 4px 12px; border-radius: 4px;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.tb-toc:hover { background: var(--ink); color: var(--paper); }

@media (max-width: 640px) {
  .slots { display: none; }
}

/* ══════════════════════════════════════════════════════════
   章首
   ══════════════════════════════════════════════════════════ */

.chapter-head { padding: 54px 0 0; }

.kicker {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
  color: var(--ink-3); text-transform: uppercase;
}
.kicker .vol { color: var(--ink); font-weight: 700; }
.kicker .tempo {
  color: var(--pulse); font-weight: 700;
  padding: 1px 7px; border: 1px solid var(--pulse); border-radius: 3px;
  letter-spacing: .06em;
}
.kicker .sep { width: 1px; height: 11px; background: var(--rule); }

.chapter-head h1 {
  margin: 20px 0 0;
  font-size: 40px; line-height: 1.22; letter-spacing: -.01em; font-weight: 800;
}
.chapter-head h1 em {
  display: block; margin-top: 12px;
  font-size: 18px; font-weight: 500; font-style: normal;
  color: var(--ink-2); line-height: 1.6; letter-spacing: 0;
}

.lede {
  margin: 22px 0 0;
  font-size: 17.5px; line-height: 1.8; color: var(--ink-2);
}
.lede strong { color: var(--ink); font-weight: 700; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 22px 0 0; }
.tags span {
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 3px;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--rule);
}

.headrule {
  height: 0; margin: 30px 0 6px;
  border: 0; border-top: 2px solid var(--ink);
}

@media (max-width: 720px) {
  .chapter-head h1 { font-size: 30px; }
  .chapter-head h1 em { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   正文
   ══════════════════════════════════════════════════════════ */

.prose h2 {
  margin: 58px 0 16px;
  font-size: 25px; line-height: 1.4; font-weight: 800;
  padding-left: 14px;
  border-left: 5px solid var(--pulse);
}
.prose h3 {
  margin: 40px 0 12px;
  font-size: 19px; font-weight: 700; color: var(--ink);
}
.prose h4 {
  margin: 30px 0 8px;
  font-size: 16px; font-weight: 700; color: var(--ink-2);
}

.prose p { margin: 0 0 18px; }
.prose strong { font-weight: 700; }
.prose b { font-weight: 700; }
.prose em { font-style: normal; color: var(--ink-2); }

.prose a { color: var(--early); text-underline-offset: 3px; }

.prose code {
  font-family: var(--mono); font-size: .87em;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 1px 5px;
}

.prose ul, .prose ol { margin: 0 0 18px; padding-left: 24px; }
.prose li { margin: 0 0 9px; }
.prose li::marker { color: var(--ink-3); }

.prose hr {
  height: 0; margin: 40px 0;
  border: 0; border-top: 1px dashed var(--rule);
}

/* 三色语义：正文里可以直接给一个词染色 */
.e { color: var(--early); font-weight: 700; }
.x { color: var(--exact); font-weight: 700; }
.l { color: var(--late);  font-weight: 700; }
.p { color: var(--pulse); font-weight: 700; }
.v { color: var(--void);  font-weight: 700; }

/* 毫秒数：全书统一等宽 */
.ms { font-family: var(--mono); font-weight: 700; font-size: .93em; }

/* ══════════════════════════════════════════════════════════
   代码 / 谱例
   ══════════════════════════════════════════════════════════ */

pre {
  margin: 0 0 22px;
  padding: 16px 18px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-3);
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.75;
  color: var(--ink);
}
pre .cm { color: var(--ink-3); }
pre .nu { color: var(--early); font-weight: 700; }
pre .un { color: var(--pulse); font-weight: 700; }
pre .hi { color: var(--late); font-weight: 700; }
pre .ok { color: var(--exact); font-weight: 700; }
pre .bar { color: var(--pulse); }
pre .kw { color: var(--late); font-weight: 700; }
pre .st { color: var(--exact); }

/* ══════════════════════════════════════════════════════════
   表格
   ══════════════════════════════════════════════════════════ */

.tbl { overflow-x: auto; margin: 0 0 24px; }
table {
  width: 100%; border-collapse: collapse;
  font-size: 14px; line-height: 1.6;
}
th, td {
  padding: 8px 11px; text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
th {
  font-size: 12px; letter-spacing: .05em; color: var(--ink-3);
  font-weight: 700; text-transform: uppercase;
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
td.n, th.n { font-family: var(--mono); text-align: right; white-space: nowrap; }
tbody tr:hover { background: var(--paper-2); }

/* ══════════════════════════════════════════════════════════
   五种 callout
   ══════════════════════════════════════════════════════════ */

.co {
  margin: 0 0 24px;
  padding: 16px 18px 4px;
  border-radius: 5px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--ink-3);
  background: var(--paper-2);
  font-size: 15.5px; line-height: 1.75;
}
.co .co-t {
  font-weight: 800; font-size: 14px; letter-spacing: .01em;
  margin: 0 0 10px;
}
.co p { margin: 0 0 12px; }
.co p:last-child { margin-bottom: 12px; }
.co ul, .co ol { margin: 0 0 12px; padding-left: 22px; }

/* 判词：全书的主线句子住在这里 */
.co.core { border-left-color: var(--ink); background: #F5F2E9; }
.co.core .co-t { color: var(--ink); }

/* 先听一下 —— 这本书会出声，规矩是：规则出现之前先让你听到 */
.co.hear { border-left-color: var(--pulse); background: var(--pulse-bg); }
.co.hear .co-t { color: #8A6209; }

/* 坑 */
.co.trap { border-left-color: var(--late); background: var(--late-bg); }
.co.trap .co-t { color: var(--late); }

/* 落到手上 */
.co.hand { border-left-color: var(--exact); background: var(--exact-bg); }
.co.hand .co-t { color: var(--exact); }

/* 回到节奏天国 —— 每章都要兑现一次 */
.co.game { border-left-color: var(--early); background: var(--early-bg); }
.co.game .co-t { color: var(--early); }

/* ══════════════════════════════════════════════════════════
   「对症」卡 —— 每章末尾，本章治四病里的哪几种
   ══════════════════════════════════════════════════════════ */

.rx {
  margin: 46px 0 0;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  overflow: hidden;
}
.rx-h {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
}
.rx-h .n { margin-left: auto; opacity: .7; }

.rx-b { padding: 14px 16px 16px; }

.rx-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 14px; }
.rx-row .d {
  font-family: var(--mono); font-size: 12px;
  padding: 4px 11px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--paper-2);
  color: var(--ink-3);
}
.rx-row .d.on { font-weight: 700; }
.rx-row .d.on.bias  { border-color: var(--early); background: var(--early-bg); color: var(--early); }
.rx-row .d.on.jit   { border-color: var(--late);  background: var(--late-bg);  color: var(--late); }
.rx-row .d.on.drift { border-color: var(--pulse); background: var(--pulse-bg); color: #8A6209; }
.rx-row .d.on.slot  { border-color: var(--exact); background: var(--exact-bg); color: var(--exact); }

.rx-b p { margin: 0 0 10px; font-size: 15px; line-height: 1.7; }
.rx-b p:last-child { margin-bottom: 0; }
.rx-b .k { font-weight: 800; }

/* ══════════════════════════════════════════════════════════
   翻页
   ══════════════════════════════════════════════════════════ */

.pager {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin: 64px 0 0; padding: 24px 0 0;
  border-top: 2px solid var(--ink);
}
.pager a {
  display: flex; flex-direction: column; gap: 5px;
  padding: 14px 16px; text-decoration: none;
  border: 1px solid var(--rule); border-radius: 5px;
  background: var(--paper-2); color: var(--ink);
}
.pager a:hover { border-color: var(--pulse); background: var(--pulse-bg); }
.pager a.next { text-align: right; }
.pager a.none { visibility: hidden; }
.pager .dir { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .06em; }
.pager .tt { font-size: 14px; font-weight: 700; line-height: 1.45; }

@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   目录（全屏）
   ══════════════════════════════════════════════════════════ */

.toc {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(34,38,46,.5);
  display: none; overflow-y: auto;
  padding: 30px 16px 60px;
}
.toc.open { display: block; }
.toc-in {
  max-width: 780px; margin: 0 auto;
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 6px;
  padding: 22px 26px 30px;
}
.toc-head { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.toc-head h2 { margin: 0; font-size: 20px; letter-spacing: .2em; }
.toc-head .x {
  margin-left: auto; font: inherit; font-size: 12px;
  padding: 4px 12px; border-radius: 4px;
  border: 1px solid var(--ink); background: transparent; cursor: pointer;
}
.toc-head .x:hover { background: var(--ink); color: var(--paper); }

.toc-vol { margin: 0 0 22px; }
.toc-vol-h {
  display: flex; align-items: baseline; gap: 10px;
  padding: 0 0 7px; margin: 0 0 7px;
  border-bottom: 1px solid var(--rule);
}
.toc-vol-h .no { font-family: var(--mono); font-size: 11px; color: var(--pulse); font-weight: 700; letter-spacing: .1em; }
.toc-vol-h .nm { font-size: 16px; font-weight: 800; }
.toc-vol-h .ds { font-size: 12.5px; color: var(--ink-3); }

.toc-ch {
  display: flex; align-items: baseline; gap: 11px;
  padding: 6px 9px; margin: 0 -9px;
  text-decoration: none; color: var(--ink); border-radius: 4px;
}
.toc-ch:hover { background: var(--paper-2); }
.toc-ch.cur { background: var(--pulse-bg); }
.toc-ch .n { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.toc-ch .t { font-size: 14.5px; flex: 1; line-height: 1.5; }
.toc-ch .d {
  font-family: var(--mono); font-size: 10.5px;
  padding: 1px 7px; border-radius: 3px;
  background: var(--early-bg); color: var(--early); white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   声音条
   ══════════════════════════════════════════════════════════ */

.sndbar {
  position: fixed; right: 14px; bottom: 14px; z-index: 90;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 20px;
  box-shadow: 0 3px 14px rgba(34,38,46,.12);
  font-size: 12px;
}
.snd-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; border: 0; background: transparent; cursor: pointer; color: var(--ink-3);
  padding: 0;
}
.sndbar.on .snd-toggle { color: var(--exact); font-weight: 700; }
.snd-ico { font-size: 15px; }
.snd-vol { display: none; align-items: center; gap: 5px; }
.sndbar.on .snd-vol { display: flex; }
.snd-vol input { width: 66px; accent-color: var(--pulse); }

@media (max-width: 560px) { .sndbar { right: 8px; bottom: 8px; } }

/* ══════════════════════════════════════════════════════════
   Demo 外壳
   ══════════════════════════════════════════════════════════ */

.demo {
  margin: 0 0 26px;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  background: var(--paper);
  overflow: hidden;
}
.demo-head {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 14px;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.demo-head .led {
  width: 9px; height: 9px; border-radius: 50%;
  background: #565C66; flex: none;
  transition: background .04s;
}
.demo-head .led.on { background: var(--pulse); box-shadow: 0 0 8px var(--pulse); }
.demo-head .d-hint { margin-left: auto; opacity: .62; font-size: 11px; }

.demo-body { padding: 15px 15px 17px; }

.d-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 9px; margin: 0 0 12px;
}
.d-row:last-child { margin-bottom: 0; }
.d-lab {
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3);
  letter-spacing: .05em; white-space: nowrap;
}

.d-btn {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 6px 15px; border-radius: 4px;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; white-space: nowrap;
}
.d-btn:hover { background: var(--ink); color: var(--paper); }
.d-btn.on { background: var(--ink); color: var(--paper); }
.d-btn.go { border-color: var(--exact); color: var(--exact); }
.d-btn.go:hover, .d-btn.go.on { background: var(--exact); color: var(--paper); }
.d-btn.stop { border-color: var(--late); color: var(--late); }
.d-btn.stop:hover { background: var(--late); color: var(--paper); }
.d-btn:disabled { opacity: .38; cursor: default; }
.d-btn:disabled:hover { background: var(--paper); color: var(--ink); }

/* 大的敲击按钮 —— 好几个 demo 都要你用它 */
.tapper {
  width: 100%; padding: 26px 10px;
  font: inherit; font-size: 17px; font-weight: 800; letter-spacing: .1em;
  border: 2px dashed var(--ink); border-radius: 6px;
  background: var(--paper-2); color: var(--ink);
  cursor: pointer; user-select: none; -webkit-user-select: none;
  touch-action: manipulation;
}
.tapper:active, .tapper.hot { background: var(--pulse-bg); border-style: solid; border-color: var(--pulse); }
.tapper .sub {
  display: block; margin-top: 6px;
  font-size: 11.5px; font-weight: 400; letter-spacing: .04em; color: var(--ink-3);
  font-family: var(--mono);
}

.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  font: inherit; font-family: var(--mono); font-size: 12px;
  padding: 4px 11px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--paper-2); color: var(--ink-2);
  cursor: pointer;
}
.chip:hover { border-color: var(--ink-3); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 700; }

.d-slider { display: flex; align-items: center; gap: 9px; flex: 1 1 220px; min-width: 190px; }
.d-slider input[type=range] { flex: 1; accent-color: var(--pulse); min-width: 90px; }
.d-slider .val {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  min-width: 62px; text-align: right; color: var(--ink);
}

.d-out {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.7;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px;
  padding: 10px 12px; color: var(--ink-2);
  white-space: pre-wrap; word-break: break-word;
}
.d-out b { color: var(--ink); }
.d-err {
  font-family: var(--mono); font-size: 12px;
  color: var(--late); background: var(--late-bg);
  border: 1px solid var(--late); border-radius: 4px; padding: 9px 11px;
}

/* 一排大数字 —— 「你的三个数」那类输出 */
.stats { display: flex; flex-wrap: wrap; gap: 8px; }
.stat {
  flex: 1 1 110px; min-width: 100px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-2); padding: 9px 11px;
}
.stat .k {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em;
  color: var(--ink-3); text-transform: uppercase; display: block;
}
.stat .v {
  font-family: var(--mono); font-size: 21px; font-weight: 800;
  line-height: 1.3; display: block; color: var(--ink);
}
.stat .u { font-size: 11px; font-weight: 400; color: var(--ink-3); }
.stat.early .v { color: var(--early); }
.stat.exact .v { color: var(--exact); }
.stat.late  .v { color: var(--late); }
.stat.pulse .v { color: var(--pulse); }
.stat .note { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); display: block; margin-top: 2px; }

/* ══════════════════════════════════════════════════════════
   谱面轨道 —— 好几章共用的那条时间轴
   ══════════════════════════════════════════════════════════ */

.track {
  position: relative;
  height: 74px; margin: 0 0 12px;
  border: 1px solid var(--rule); border-radius: 4px;
  background: var(--paper-2);
  overflow: hidden;
}
.track .gl { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--grid); }
.track .gl.beat { background: rgba(183,130,15,.4); width: 1.5px; }
.track .gl.bar  { background: var(--ink-3); width: 1.5px; }

.track .note {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 15px; height: 15px; border-radius: 3px;
  background: var(--paper); border: 2px solid var(--ink-2);
}
.track .note.call { border-color: var(--early); background: var(--early-bg); }
.track .note.resp { border-color: var(--exact); background: var(--exact-bg); }
.track .note.on   { background: var(--pulse); border-color: var(--pulse); }
.track .note.up   { top: 32%; }
.track .note.dn   { top: 68%; }

/* 判定线：那条「现在」 */
.track .now {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--late);
  box-shadow: 0 0 6px rgba(184,68,42,.5);
}
/* 判定窗：判定线两侧的绿带 */
.track .win {
  position: absolute; top: 0; bottom: 0;
  background: rgba(18,122,85,.13);
  border-left: 1px solid rgba(18,122,85,.4);
  border-right: 1px solid rgba(18,122,85,.4);
}
.track .lab {
  position: absolute; bottom: 3px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-3);
}

/* 敲击落点（散点） */
.track .tap {
  position: absolute; width: 2px; height: 22px;
  transform: translateX(-50%);
  background: var(--ink);
}
.track .tap.e { background: var(--early); }
.track .tap.x { background: var(--exact); }
.track .tap.l { background: var(--late); }

/* ══════════════════════════════════════════════════════════
   误差散点图 / 直方图（SVG，无 canvas）
   ══════════════════════════════════════════════════════════ */

.chartbox { margin: 0 0 12px; }
.chartbox svg { display: block; width: 100%; height: auto; }
.chartbox .ax  { stroke: var(--rule); stroke-width: 1; }
.chartbox .ax0 { stroke: var(--ink); stroke-width: 1.5; }
.chartbox .tk  { font-family: var(--mono); font-size: 9px; fill: var(--ink-3); }
.chartbox .bandx { fill: rgba(18,122,85,.12); }
.chartbox .dot.e { fill: var(--early); }
.chartbox .dot.x { fill: var(--exact); }
.chartbox .dot.l { fill: var(--late); }
.chartbox .bar.e { fill: var(--early); }
.chartbox .bar.x { fill: var(--exact); }
.chartbox .bar.l { fill: var(--late); }
.chartbox .curve { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.chartbox .mline { stroke: var(--pulse); stroke-width: 1.5; stroke-dasharray: 4 3; }

/* 细分梯 / 格子条 */
.slots-bar { display: flex; gap: 3px; margin: 0 0 10px; }
.slots-bar .s {
  flex: 1; height: 34px; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--paper-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  cursor: pointer; user-select: none;
}
.slots-bar .s.beat { border-color: var(--pulse); color: #8A6209; font-weight: 700; }
.slots-bar .s.on   { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.slots-bar .s.lit  { background: var(--pulse); border-color: var(--pulse); color: var(--paper); }
.slots-bar .s.off  { opacity: .45; }

/* 判定结果的滚动条 */
.verdicts { display: flex; flex-wrap: wrap; gap: 4px; }
.verdicts .v {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 3px;
}
.verdicts .v.e { background: var(--early-bg); color: var(--early); }
.verdicts .v.x { background: var(--exact-bg); color: var(--exact); }
.verdicts .v.l { background: var(--late-bg);  color: var(--late); }
.verdicts .v.m { background: var(--void-bg);  color: var(--void); }

/* 图例 */
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.legend i.e { background: var(--early); }
.legend i.x { background: var(--exact); }
.legend i.l { background: var(--late); }
.legend i.p { background: var(--pulse); }
.legend i.v { background: var(--void); }

/* ══════════════════════════════════════════════════════════
   首页
   ══════════════════════════════════════════════════════════ */

.hero { padding: 66px 0 34px; }
.hero .eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .24em;
  color: var(--pulse); text-transform: uppercase; font-weight: 700;
}
.hero h1 {
  margin: 16px 0 0;
  font-size: 66px; line-height: 1.02; letter-spacing: -.02em; font-weight: 800;
}
.hero .sub {
  margin: 14px 0 0; font-size: 19px; color: var(--ink-2); line-height: 1.6;
}
.hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0;
  font-family: var(--mono); font-size: 11.5px;
}
.hero .meta span {
  padding: 4px 10px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--paper-2); color: var(--ink-2);
}

@media (max-width: 720px) { .hero h1 { font-size: 44px; } }

.vol-block { margin: 0 0 34px; }
.vol-h {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 8px; margin: 0 0 10px;
  border-bottom: 2px solid var(--ink);
}
.vol-h .no { font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--pulse); }
.vol-h .nm { font-size: 21px; font-weight: 800; }
.vol-h .ds { font-size: 13px; color: var(--ink-3); margin-left: auto; text-align: right; }

.ch-list a {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 10px; margin: 0 -10px;
  text-decoration: none; color: var(--ink); border-radius: 4px;
  border-bottom: 1px solid var(--rule);
}
.ch-list a:hover { background: var(--pulse-bg); }
.ch-list .n { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); min-width: 22px; }
.ch-list .t { flex: 1; font-size: 15px; line-height: 1.5; font-weight: 600; }
.ch-list .t small { display: block; font-weight: 400; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.ch-list .d {
  font-family: var(--mono); font-size: 10.5px;
  padding: 2px 8px; border-radius: 3px;
  background: var(--early-bg); color: var(--early); white-space: nowrap;
}

.foot {
  margin: 60px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-3); line-height: 1.8;
}
.foot a { color: var(--early); }