:root {
  color-scheme: dark;
  --bg: #11111b;
  --panel: #1e1e2e;
  --raised: #252538;
  --line: #45475a;
  --line-soft: #313244;
  --ink: #cdd6f4;
  --muted: #a6adc8;
  --faint: #7f849c;
  --green: #a6e3a1;
  --blue: #89b4fa;
  --purple: #cba6f7;
  --yellow: #f9e2af;
  --peach: #fab387;
  --red: #f38ba8;
  --radius: 18px;
  --shadow: 0 14px 40px #0005;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 86px;
}

body {
  margin: 0;
  min-width: 300px;
  background:
    radial-gradient(ellipse 70% 520px at 52% -260px, #38496177, transparent),
    var(--bg);
  color: var(--ink);
  font: 15px/1.75 system-ui, "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: 8px;
  background: var(--green);
  color: #11111b;
  font-weight: 700;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }

/* ── top bar ─────────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid #313244cc;
  background: #11111be8;
  backdrop-filter: blur(14px) saturate(140%);
}
.topbar-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 62px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--green);
  font-weight: 800;
  letter-spacing: .06em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #a6e3a155;
  border-radius: 9px;
  background: #a6e3a115;
  font-size: 17px;
  letter-spacing: 0;
}
.brand small {
  display: block;
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .16em;
}
.topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav::-webkit-scrollbar { display: none; }
.topnav a {
  flex-shrink: 0;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.topnav a:hover { background: #313244; color: var(--ink); text-decoration: none; }
.topnav a[aria-current="page"] { background: #313244; color: var(--green); }
@media (min-width: 901px) {
  .topbar-inner { flex-wrap: wrap; padding: 8px 0; min-height: 0; row-gap: 4px; }
  .topnav {
    flex: 1 0 100%;
    order: 3;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow: visible;
    margin-left: 0;
    row-gap: 2px;
  }
  .lang-badge { margin-left: auto; }
}
.lang-badge {
  flex-shrink: 0;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 3px 10px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: .08em;
}
.menu-btn {
  display: none;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #313244;
  color: var(--ink);
}

/* ── hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  margin: 28px 0 22px;
  padding: 38px 42px 34px;
  border: 1px solid #585b70;
  border-radius: 23px;
  background:
    radial-gradient(ellipse at 91% 16%, #cba6f73b, transparent 44%),
    radial-gradient(ellipse at 69% 101%, #89b4fa39, transparent 52%),
    linear-gradient(125deg, #252538, #1e1e2e 72%);
  box-shadow: var(--shadow);
}
.hero::after {
  content: "";
  position: absolute;
  right: -70px;
  top: -110px;
  width: 300px;
  height: 300px;
  border: 1px solid #cdd6f421;
  border-radius: 50%;
  box-shadow: 0 0 0 44px #cdd6f408, 0 0 0 88px #cdd6f407;
  pointer-events: none;
}
.eyebrow {
  color: var(--green);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero h1 {
  max-width: 820px;
  margin: 12px 0 10px;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.18;
  letter-spacing: -.04em;
}
.hero p {
  position: relative;
  max-width: 690px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 20px; }
.tag {
  border: 1px solid #585b70;
  border-radius: 30px;
  padding: 4px 11px;
  background: #31324488;
  color: var(--muted);
  font-size: 11px;
}

/* ── notice ──────────────────────────────────────────────── */
.notice {
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid #f9e2af66;
  border-radius: 12px;
  background: #f9e2af12;
  color: #f9e2af;
  font-size: 13px;
}
.notice strong { font-weight: 750; }

/* ── layout ──────────────────────────────────────────────── */
.layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  align-items: start;
  gap: 30px;
  padding-bottom: 54px;
}
.toc {
  position: sticky;
  top: 86px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 14px;
  background: #1e1e2eaa;
}
.toc h2 {
  margin: 0 0 9px;
  color: var(--faint);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a {
  display: block;
  border-radius: 7px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.toc a:hover { background: #313244; color: var(--ink); text-decoration: none; }
.toc a.active { background: #313244; color: var(--green); font-weight: 650; }
.toc .toc-note {
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 10px;
  line-height: 1.6;
}

article { min-width: 0; }
.page-section {
  margin-bottom: 28px;
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, #29293a, var(--panel) 68%);
  box-shadow: 0 10px 30px #0003;
  scroll-margin-top: 84px;
}
.page-section > h2 {
  margin: 0 0 14px;
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -.02em;
}
.page-section > h2 .num {
  display: inline-block;
  margin-right: 9px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  vertical-align: 3px;
}
.page-section h3 {
  margin: 24px 0 8px;
  font-size: 15px;
  color: var(--ink);
}
.page-section h3:first-of-type { margin-top: 6px; }
.page-section p { margin: 8px 0; color: var(--muted); }
.page-section p strong, .page-section li strong { color: var(--ink); font-weight: 650; }
.page-section ul, .page-section ol { margin: 8px 0; padding-left: 22px; color: var(--muted); }
.page-section li { margin: 4px 0; }
.page-section li::marker { color: var(--blue); }
.page-section code, .inline-code {
  border-radius: 5px;
  padding: 1px 6px;
  background: #313244;
  color: var(--green);
  font: 12px/1.6 "Cascadia Code", Consolas, monospace;
  overflow-wrap: anywhere;
}

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; margin-top: 15px; }
.mini-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 15px;
  background: #31324466;
}
.mini-card b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; }
.mini-card span { color: var(--muted); font-size: 12px; line-height: 1.65; }
.mini-card .accent { color: var(--green); }

.rules { display: grid; gap: 9px; margin: 15px 0 0; padding: 0; list-style: none; }
.rules li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 10px;
  margin: 0;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #31324455;
  color: var(--muted);
  font-size: 13px;
}
.rules .n {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid #89b4fa55;
  border-radius: 50%;
  color: var(--blue);
  font-size: 10px;
  font-weight: 700;
}
.rules b { color: var(--ink); }

.table-wrap { margin: 15px 0 4px; overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 13px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: #31324488; color: var(--ink); font-weight: 650; white-space: nowrap; }
td { color: var(--muted); }
tr:last-child td { border-bottom: 0; }
td code { white-space: nowrap; }

.callout {
  margin: 16px 0 4px;
  padding: 13px 16px;
  border-left: 3px solid var(--blue);
  border-radius: 0 9px 9px 0;
  background: #89b4fa10;
  color: var(--muted);
  font-size: 12.5px;
}
.callout.warn { border-left-color: var(--yellow); background: #f9e2af0d; }
.callout.good { border-left-color: var(--green); background: #a6e3a10d; }
.callout b { color: var(--ink); }

.example {
  margin: 15px 0 4px;
  padding: 15px 17px;
  border: 1px dashed #585b70;
  border-radius: 11px;
  background: #18182566;
}
.example .label {
  display: block;
  margin-bottom: 6px;
  color: var(--purple);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.example p { margin: 5px 0; font-size: 12.5px; }
.example code { color: var(--yellow); }

.demo-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 4px;
  padding: 20px 22px;
  border: 1px solid #a6e3a155;
  border-radius: 14px;
  background: linear-gradient(120deg, #a6e3a112, #31324466);
}
.demo-card b { display: block; margin-bottom: 3px; font-size: 15px; }
.demo-card span { color: var(--muted); font-size: 12px; }
.demo-card a {
  flex-shrink: 0;
  border: 1px solid #a6e3a177;
  border-radius: 9px;
  padding: 8px 14px;
  color: var(--green);
  font-size: 13px;
  font-weight: 650;
}
.demo-card a:hover { background: #a6e3a115; text-decoration: none; }

.page-footer {
  padding: 18px 2px 0;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 11px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── hub cards ───────────────────────────────────────────── */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 13px;
  margin-top: 18px;
}
.chapter {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
  background: #1e1e2eaa;
}
.chapter.ready { border-color: #a6e3a166; background: linear-gradient(145deg, #a6e3a10d, #1e1e2eaa); }
.chapter .kicker { color: var(--blue); font-size: 10px; font-weight: 750; letter-spacing: .12em; }
.chapter h3 { margin: 0; font-size: 16px; }
.chapter p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.chapter .status { margin-top: auto; color: var(--faint); font-size: 10px; }
.chapter.ready .status { color: var(--green); }
.chapter a { margin-top: auto; color: var(--green); font-size: 12px; font-weight: 650; }
.chapter a:hover { text-decoration: underline; }
.chapter.ready:hover { border-color: var(--green); text-decoration: none; transform: translateY(-2px); }
.chapter.ready h3 { color: var(--ink); }

.demo-control { margin: 16px 0; padding: 17px; border: 1px solid var(--line); border-radius: 12px; background: #18182588; }
.demo-control label { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; font-weight: 650; }
.demo-control input[type="range"] { display: block; width: 100%; accent-color: var(--green); }
.demo-control select { max-width: 100%; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--raised); color: var(--ink); font: inherit; }
.demo-result { display: block; margin-top: 12px; padding: 10px 13px; border-radius: 8px; background: #a6e3a10d; color: var(--green); font-weight: 650; }
.flow-note { display: block; margin-top: 8px; color: var(--faint); font-size: 11px; }
.page-section details { margin: 10px 0; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; background: #31324466; }
.page-section summary { cursor: pointer; color: var(--ink); font-weight: 650; }
.page-section details p, .page-section details ul { margin: 10px 0 2px; }

/* ── illustrated explainers ─────────────────────────────── */
.lead {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 15px;
}
.figure {
  margin: 18px 0 6px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #18182588;
}
.figure-caption {
  margin-top: 10px;
  color: var(--faint);
  font-size: 11px;
  line-height: 1.6;
}
.food-demo {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) 44px minmax(0, 1.2fr);
  align-items: center;
  gap: 10px;
}
.food-card {
  border: 1px solid #585b70;
  border-radius: 12px;
  padding: 14px;
  background: #31324488;
}
.food-card .food-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: #fab38722;
  border: 1px solid #fab38755;
  color: var(--peach);
  font-size: 20px;
}
.food-card b { display: block; margin-top: 9px; font-size: 14px; }
.food-card span { display: block; color: var(--faint); font-size: 11px; }
.food-arrow {
  color: var(--green);
  font-size: 22px;
  text-align: center;
}
.mini-bars { display: grid; gap: 10px; }
.mini-bar { display: grid; grid-template-columns: 54px minmax(0, 1fr) 38px; align-items: center; gap: 8px; font-size: 12px; }
.mini-bar .name { color: var(--muted); }
.mini-bar .track { height: 9px; border-radius: 8px; background: #45475a99; overflow: hidden; }
.mini-bar .fill { display: block; height: 100%; border-radius: inherit; background: var(--c); }
.mini-bar .num { color: var(--c); text-align: right; font-variant-numeric: tabular-nums; }

.mock-panel {
  max-width: 600px;
  margin: 0 auto;
  border: 1px solid #585b70;
  border-radius: 12px;
  background: #1b1b29;
  box-shadow: 0 12px 30px #0005;
  overflow: visible;
}
.mock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: #31324488;
  border-radius: 12px 12px 0 0;
}
.mock-head b { font-size: 13px; letter-spacing: .04em; }
.mock-head span { color: var(--faint); font-size: 10px; }
.mock-rows { padding: 12px 12px 6px; }
.mock-row {
  display: grid;
  grid-template-columns: 22px minmax(75px, 1fr) minmax(95px, 2fr) 44px;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  font-size: 12px;
}
.mock-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--c);
}
.mock-name { color: var(--text-color); font-weight: 600; white-space: nowrap; }
.mock-track {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: #45475a;
}
.mock-seg {
  position: absolute;
  top: -4px;
  bottom: -4px;
  z-index: 2;
  border: 0;
  border-left: 1px solid #11111baa;
  border-radius: 0;
  padding: 0;
  background: #ffffff0d;
  cursor: help;
}
.mock-seg:nth-child(2n) { background: #ffffff18; }
.mock-seg:hover, .mock-seg:focus-visible { outline: 1px solid #fff; outline-offset: 1px; }
.mock-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-radius: 6px;
  background: var(--gradient);
  pointer-events: none;
}
.mock-pct { color: var(--text-color); text-align: right; font-variant-numeric: tabular-nums; font-size: 11px; }
.mock-tip, .mock-bonus-tip {
  position: absolute;
  z-index: 5;
  width: max-content;
  max-width: min(320px, calc(100vw - 40px));
  border: 1px solid #585b70;
  border-radius: 7px;
  padding: 7px 10px;
  background: #11111b;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.55;
  box-shadow: 0 6px 18px #0008;
  white-space: normal;
}
.mock-tip {
  left: 50%;
  bottom: calc(100% + 12px);
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}
.mock-tip span, .mock-bonus-tip span { display: block; }
.mock-tip .tip-range, .mock-bonus-tip .tip-title { color: var(--yellow); font-weight: 700; }
.mock-tip .tip-attribute, .mock-bonus-tip .tip-attribute { color: var(--green); }
.mock-tip .tip-negative, .mock-bonus-tip .tip-negative { color: var(--red); }
.mock-tip .tip-effect, .mock-bonus-tip .tip-effect { color: var(--blue); }
.mock-tip .tip-command { color: var(--faint); font-style: italic; }
.mock-track:focus-within .mock-tip, .mock-track:hover .mock-tip { opacity: 1; }
.mock-actions { position: relative; display: grid; place-items: center; padding: 6px 12px 12px; }
.mock-actions button { border: 1px solid #585b70; border-radius: 5px; padding: 3px 15px; background: #313244; color: var(--ink); font-size: 11px; }
.mock-bonus-tip { bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.mock-actions:hover .mock-bonus-tip, .mock-actions:focus-within .mock-bonus-tip { opacity: 1; }
.source-note { margin-top: 12px; color: var(--muted); font-size: 12px; }
.source-note b { color: var(--ink); }

.stage-demo {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #31324444;
}
.stage-ladder {
  position: relative;
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #585b70;
}
.stage-seg {
  display: grid;
  place-items: center;
  height: 100%;
  color: #11111b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
}
.stage-seg.low { width: 30%; background: #89b4fa; }
.stage-seg.mid { width: 40%; background: #a6e3a1; }
.stage-seg.high { width: 30%; background: #f38ba8; }
.stage-marker {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px #11111b;
  transition: left .12s;
  pointer-events: none;
}
.stage-marker::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -1px;
  border-top: 5px solid #fff;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}
.stage-readout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
}
.stage-readout b { color: var(--green); }
input[type="range"] {
  width: 100%;
  accent-color: var(--green);
  cursor: pointer;
}
.slider-label { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; color: var(--muted); font-size: 11px; }
.slider-label b { color: var(--ink); font-variant-numeric: tabular-nums; }

.calc {
  display: grid;
  gap: 13px;
  margin-top: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #31324444;
}
.calc-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) 58px; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.calc-row output { color: var(--green); text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.calc-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}
.calc-result strong { color: var(--yellow); font-size: 22px; font-variant-numeric: tabular-nums; }
.calc-result small { color: var(--faint); font-size: 11px; }

.flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.flow-node {
  flex: 1 1 150px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 12px;
  background: #31324466;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}
.flow-node b { display: block; color: var(--ink); font-size: 12px; margin-bottom: 2px; }
.flow-node.accent { border-color: #a6e3a166; background: #a6e3a10d; }
.flow-arrow { display: grid; place-items: center; flex: 0 0 18px; color: var(--blue); font-size: 16px; }

.rule-mock {
  margin-top: 14px;
  border: 1px solid #cba6f755;
  border-radius: 12px;
  padding: 15px 16px;
  background: linear-gradient(130deg, #cba6f71a, #31324466);
}
.rule-mock h4 { margin: 0 0 10px; font-size: 13px; color: var(--purple); }
.rule-line { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.rule-chip {
  border: 1px solid #585b70;
  border-radius: 7px;
  padding: 3px 8px;
  background: #313244aa;
  color: var(--ink);
  font-size: 11px;
  white-space: nowrap;
}
.rule-chip.cond { border-color: #89b4fa66; color: var(--blue); }
.rule-chip.target { border-color: #a6e3a166; color: var(--green); }
.rule-chip.cmd { border-color: #cba6f766; color: var(--purple); }
.rule-and { color: var(--faint); font-size: 10px; letter-spacing: .08em; }

.editor-mock {
  margin-top: 14px;
  border: 1px solid #585b70;
  border-radius: 12px;
  background: #181825aa;
  overflow: hidden;
}
.editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: #31324488;
  font-size: 11px;
  color: var(--muted);
}
.editor-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 7px 8px;
  border-bottom: 1px solid var(--line);
  background: #11111b66;
  scrollbar-width: thin;
}
.editor-tab {
  flex-shrink: 0;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 3px 7px;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 10px;
  white-space: nowrap;
  cursor: pointer;
}
.editor-tab:hover { border-color: #585b70; background: #31324466; color: var(--ink); }
.editor-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.editor-tab.active { border-color: #a6e3a166; background: #a6e3a115; color: var(--green); }
.editor-body { padding: 11px 12px 13px; display: grid; gap: 7px; }
.editor-field {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--muted);
}
.editor-input {
  border: 1px solid #585b70;
  border-radius: 5px;
  padding: 4px 8px;
  background: #11111b;
  color: var(--ink);
  font-size: 11px;
}
.editor-note { color: var(--faint); font-size: 10px; line-height: 1.6; }

.variant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.variant-card { border: 1px solid #585b70; border-radius: 10px; padding: 12px; background: #31324466; }
.variant-card .tag { display: inline-block; margin-bottom: 8px; }
.variant-card b { display: block; margin-bottom: 7px; font-size: 13px; }
.variant-card .mini-bar { grid-template-columns: 46px minmax(0, 1fr) 32px; margin-top: 6px; }

.summary-list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; counter-reset: summary; }
.summary-list li { position: relative; padding: 11px 14px 11px 42px; border: 1px solid var(--line); border-radius: 9px; background: #31324455; color: var(--muted); font-size: 13px; }
.summary-list li::before { counter-increment: summary; content: counter(summary); position: absolute; left: 13px; top: 11px; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid #89b4fa66; border-radius: 50%; color: var(--blue); font-size: 10px; font-weight: 700; }
.summary-list b { color: var(--ink); }

/* 保质期子页与只读案例查询 */
.shelf-tabbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 20px 0 0; }
.shelf-tabbar button {
  min-height: 40px; border: 1px solid var(--line); border-radius: 9px;
  background: #31324499; color: var(--muted); font-size: 12px; font-weight: 650;
}
.shelf-tabbar button:hover { border-color: var(--blue); color: var(--ink); }
.shelf-tabbar button[aria-selected="true"] { border-color: #a6e3a188; background: #a6e3a119; color: var(--green); }
.shelf-panel {
  margin: 12px 0 0; padding: 18px 20px; border: 1px solid #585b70;
  border-radius: 12px; background: #18182588;
}
.shelf-panel[hidden] { display: none; }
.shelf-panel h3 { margin: 3px 0 10px; color: var(--ink); font-size: 20px; }
.shelf-kicker { color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.shelf-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 15px 0; }
.shelf-field-grid > div { padding: 12px 13px; border: 1px solid var(--line); border-radius: 9px; background: #31324466; }
.shelf-field-grid b, .shelf-field-grid span { display: block; }
.shelf-field-grid b { color: var(--ink); font-size: 13px; }
.shelf-field-grid span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.shelf-search-label { display: block; margin-top: 16px; color: var(--ink); font-size: 13px; font-weight: 650; }
.shelf-search, .shelf-json {
  width: 100%; margin-top: 7px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 9px; background: #181825; color: var(--ink); font: inherit;
}
.shelf-search:focus-visible, .shelf-json:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.shelf-json { min-height: 110px; resize: vertical; font: 12px/1.7 Consolas, monospace; }
.shelf-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)); gap: 8px; margin: 13px 0 5px; }
.shelf-cases button { padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #31324466; color: var(--ink); text-align: left; }
.shelf-cases button[hidden] { display: none; }
.shelf-cases button:hover { border-color: var(--blue); }
.shelf-cases button[aria-pressed="true"] { border-color: #a6e3a188; background: #a6e3a11c; }
.shelf-cases b, .shelf-cases small { display: block; }
.shelf-cases b { color: var(--green); font-size: 13px; }
.shelf-cases small { margin-top: 3px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere; }
.shelf-search-status { font-size: 12px; }
.shelf-viewer { margin: 16px 0 22px; padding: 20px; border: 1px solid #585b70; border-radius: 14px; background: linear-gradient(130deg, #313244aa, #181825aa); }
.shelf-viewer[hidden] { display: none; }
.shelf-viewer-heading { display: flex; align-items: start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shelf-viewer-heading h3 { margin: 2px 0 5px; font-size: 21px; }
.shelf-viewer-heading code { font-size: 11px; }
.shelf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 16px 0; }
.shelf-stat { padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; background: #31324477; }
.shelf-stat small, .shelf-stat b { display: block; }
.shelf-stat small { color: var(--muted); font-size: 11px; }
.shelf-stat b { color: var(--ink); font-size: 16px; overflow-wrap: anywhere; }
.shelf-viewer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.shelf-viewer-grid > div { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: #18182588; }
.shelf-viewer-grid h4 { margin: 0 0 8px; color: var(--blue); font-size: 13px; }
.shelf-info-row { padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12px; }
.shelf-info-row:last-child { border-bottom: 0; }
.shelf-info-row b, .shelf-info-row span { display: block; overflow-wrap: anywhere; }
.shelf-info-row b { color: var(--ink); font-weight: 650; }
.shelf-info-row span { color: var(--muted); }
.shelf-source { margin: 14px 0 0 !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 11px; overflow-wrap: anywhere; }
.shelf-import-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.shelf-import-row button { padding: 8px 13px; border: 1px solid #a6e3a188; border-radius: 8px; background: #a6e3a11c; color: var(--green); font-weight: 650; }
.shelf-import-row button:hover { background: #a6e3a132; }
.shelf-import-row span { color: var(--muted); font-size: 12px; }
@media (max-width: 620px) {
  .shelf-tabbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shelf-panel { padding: 14px; }
  .shelf-viewer { padding: 15px; }
  .shelf-viewer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .food-demo { grid-template-columns: 1fr; }
  .food-arrow { transform: rotate(90deg); }
  .calc-row { grid-template-columns: 96px minmax(0, 1fr) 50px; }
  .variant-grid { grid-template-columns: 1fr; }
  .mock-row { grid-template-columns: 18px 70px minmax(70px, 1fr) 38px; gap: 5px; }
  .mock-name { font-size: 10px; }
  .mock-panel { min-width: 255px; }
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .toc { position: static; display: block; }
  .toc.open { display: block; }
  .menu-btn { display: inline-grid; place-items: center; }
  .topnav { display: none; }
  .topnav.open {
    display: flex;
    position: absolute;
    left: 20px;
    right: 20px;
    top: 62px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #1e1e2ef5;
    box-shadow: var(--shadow);
    flex-wrap: wrap;
  }
  .lang-badge { margin-left: auto; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .wrap { width: calc(100% - 26px); }
  .hero { padding: 28px 22px; }
  .hero::after { right: -150px; }
  .page-section { padding: 20px 18px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .demo-card { align-items: flex-start; flex-direction: column; }
  .demo-card a { width: 100%; text-align: center; }
  .brand small { display: none; }
  .lang-badge { display: none; }
  th, td { padding: 8px 10px; font-size: 12px; }
  th:first-child, td:first-child { white-space: nowrap; }
}

/* 源码结构示意：仅图中的链接可跳转，游戏按钮及字段一律只读。 */
.guide-ui { margin: 18px 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #11111b; }
.guide-ui figcaption { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.guide-ui figcaption strong { color: var(--ink); }
.guide-ui-stage { max-width: 100%; overflow-x: auto; padding: 14px; border-radius: 8px; background: linear-gradient(145deg,#302d3a,#101018); }
.guide-ui-window { width: 550px; margin: 0 auto; border: 1px solid #555; background: #1c1c1c; box-shadow: 0 12px 28px #0009; color: #eee; font: 11px/1.5 "Cascadia Code", "Microsoft YaHei", sans-serif; }
.guide-ui-window.effect { width: 660px; }
.guide-ui-title { padding: 6px 10px; background: #181818; text-align: center; color: #ffd24a; font-weight: bold; }
.guide-ui-tabs { display: flex; gap: 5px; padding: 7px 10px; border-bottom: 1px solid #555; }
.guide-ui-tabs a { flex: 1; padding: 3px; border: 1px solid #777; background: #444; text-align: center; color: #eee; white-space: nowrap; }
.guide-ui-tabs a[aria-current="location"] { border-color: #ffd24a; color: #ffd24a; }
.guide-ui-tabs a:hover, .guide-ui-tabs a:focus-visible { background: #606060; color: #fff; }
.guide-ui-tabs a.guide-ui-button.green { color: #a6e3a1; }
.guide-ui-columns { display: grid; grid-template-columns: 135px minmax(0,1fr); min-height: 240px; }
.guide-ui-list { padding: 9px; border-right: 1px solid #555; background: #242424; }
.guide-ui-list span { display: block; margin-bottom: 5px; padding: 4px; border: 1px solid #555; }
.guide-ui-list .selected { border-color: #ffd24a; color: #ffd24a; }
.guide-ui-content { padding: 8px 12px; }
.guide-ui-row { display: grid; grid-template-columns: 100px minmax(0,1fr); align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #ffffff0c; }
.guide-ui-field { padding: 3px 7px; border: 1px solid #888; background: #080808; color: #ddd; overflow-wrap: anywhere; }
.guide-ui-group { color: #ffd24a; text-align: center; text-decoration: underline; padding: 6px 2px; }
.guide-ui-bar { display: flex; border: 1px solid #aaa; margin: 9px 0; min-height: 23px; }
.guide-ui-bar span { flex: 1; border-right: 1px solid #333; text-align: center; background: #597456; color: #fff; }
.guide-ui-bar span:nth-child(2n) { background: #566374; }
.guide-ui-bar span:last-child { border-right: 0; }
.guide-ui-actions { display: flex; flex-wrap: wrap; gap: 5px; padding: 7px 9px; border-top: 1px solid #555; }
.guide-ui-button { display: inline-block; padding: 2px 7px; border: 1px solid #aaa; background: linear-gradient(#727272,#555); color: #fff; white-space: nowrap; }
.guide-ui-button.green { color: #a6e3a1; }
.guide-ui-button.red { color: #ff7979; }
.guide-ui-button.disabled { color: #aaa; border-color: #555; background: #3b3b3b; }
.guide-ui-hint { display: block; color: #ffd24a; font-size: 10px; margin-top: 6px; }
.guide-ui-note { margin-top: 8px; color: var(--faint); font-size: 11px; }
@media (max-width: 620px) { .guide-ui { padding: 8px; } .guide-ui-stage { padding: 8px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}