:root {
  --bg: #f7f7f5; --panel: #ffffff; --text: #1f2328; --muted: #5f6670; --line: #e3e3de;
  --accent: #1f5fbf; --error: #b42318; --ok: #1a7f37; --code: #f0f0ec;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #15171a; --panel: #1d2024; --text: #e6e6e3; --muted: #9aa1a9; --line: #30343a;
          --accent: #6ea2f0; --error: #ff8a80; --ok: #6fdc8c; --code: #262a2f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
       font: 16px/1.75 -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
       padding: 12px 24px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { font-weight: 600; color: var(--text); }
.account { display: flex; align-items: center; gap: 16px; font-size: 14px; }
.account .who { color: var(--muted); }
.account form { margin: 0; }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--panel); color: var(--text);
         border-radius: 6px; padding: 4px 12px; }
.layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px; max-width: 1160px; margin: 0 auto; padding: 24px; }
.layout.bare { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
.menu { font-size: 15px; }
.menu > a { display: block; margin-bottom: 8px; font-weight: 600; }
.menu details { margin-bottom: 8px; }
.menu summary { font-weight: 600; cursor: pointer; }
.menu ul { list-style: none; margin: 4px 0 0; padding-left: 12px; border-left: 1px solid var(--line); }
.menu li { margin: 2px 0; }
.prose { min-width: 0; }
.prose h1 { font-size: 1.75rem; line-height: 1.3; margin-top: 0; }
.prose h2 { margin-top: 2rem; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.prose code { background: var(--code); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.prose pre { background: var(--code); padding: 12px 16px; border-radius: 8px; overflow-x: auto; line-height: 1.5; }
.prose pre code { background: none; padding: 0; }
.prose table { border-collapse: collapse; display: block; overflow-x: auto; margin: 1rem 0; }
.prose th, .prose td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.prose blockquote { margin: 1rem 0; padding: 4px 16px; border-left: 3px solid var(--accent); color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.card h1 { margin-top: 0; font-size: 1.4rem; }
.card label { display: block; margin: 12px 0; font-size: 14px; color: var(--muted); }
.card input { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; color: var(--text);
              background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.card button[type=submit]:not(.secondary) { margin-top: 8px; width: 100%; padding: 8px; background: var(--accent); color: #fff; border: 0; }
.hint { color: var(--muted); font-size: 14px; }
.error { color: var(--error); }
.ok { color: var(--ok); }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 16px; }
  .top { padding: 12px 16px; }
  main { order: 1; }
  .menu { order: 2; border-top: 1px solid var(--line); padding-top: 12px; }   /* the article first on a phone */
}
/* account: avatar in the header and on the settings page; the placeholder is an initial on a colour picked by user id */
.account .me { display: inline-flex; align-items: center; gap: 8px; }
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.avatar.initial { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
                  line-height: 1; color: #fff; background: var(--accent); }
.avatar.large { width: 96px; height: 96px; font-size: 40px; }
.avatar.c1 { background: #1a7f37; } .avatar.c2 { background: #8250df; } .avatar.c3 { background: #bc4c00; }
.avatar.c4 { background: #0f7b8a; } .avatar.c5 { background: #b3245e; }
.settings { max-width: 560px; }
.settings h1 { font-size: 1.6rem; margin: 0 0 4px; }
.settings .card { margin: 16px 0; }
.card h2 { margin: 0 0 8px; font-size: 1.15rem; }
.avatar-row { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.avatar-row form { flex: 1 1 240px; min-width: 0; }
.card input[type=file] { padding: 6px; }
.card form.inline button { margin-top: 8px; }

/* ---- 引擎原理 (web/guide): generated pages, everything scoped under .guide ---------------------------------------- */
.guide { --g-pass: #1a7f37; --g-pass-bg: #e6f4ea; --g-warn: #9a6700; --g-warn-bg: #fdf3d7; --g-block: #b42318; --g-block-bg: #fde8e7;
         --g-info: #1f5fbf; --g-info-bg: #e7effb; --g-soft: #eef1f6; }
@media (prefers-color-scheme: dark) {
  .guide { --g-pass: #6fdc8c; --g-pass-bg: #16301f; --g-warn: #e3b341; --g-warn-bg: #3a2f12; --g-block: #ff8a80; --g-block-bg: #3d1d1b;
           --g-info: #8db7f5; --g-info-bg: #1a2a42; --g-soft: #23272d; }
}
.guide .ghead { border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; padding-bottom: 0.5rem; }
.guide .eyebrow { font-size: 13px; letter-spacing: .08em; color: var(--accent); font-weight: 600; }
.guide .ghead h1 { margin: 4px 0 8px; }
.guide .lede { color: var(--muted); font-size: 1.05rem; margin-top: 0; }
.guide h3 { scroll-margin-top: 16px; }
.guide .muted { color: var(--muted); }
.guide .src { color: var(--muted); font-size: 13px; margin: 4px 0 16px; }
.guide .note { background: var(--g-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 12px 0; }
.guide .tw { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.guide .tw table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; line-height: 1.55; }
.guide .tw th, .guide .tw td { border: 0; border-bottom: 1px solid var(--line); padding: 6px 10px; text-align: left; vertical-align: top; }
.guide .tw th { background: var(--g-soft); font-weight: 600; white-space: nowrap; }
.guide .tw tr:last-child td { border-bottom: 0; }
.guide .tw td code { white-space: nowrap; }
.guide .tw table.inv td:nth-child(2) { text-align: right; }
.guide .pill { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.6; padding: 0 8px; border-radius: 999px;
               white-space: nowrap; background: var(--g-soft); color: var(--muted); }
.guide .pill.pass { background: var(--g-pass-bg); color: var(--g-pass); }
.guide .pill.warn { background: var(--g-warn-bg); color: var(--g-warn); }
.guide .pill.block { background: var(--g-block-bg); color: var(--g-block); }
.guide .pill.info, .guide .pill.acc { background: var(--g-info-bg); color: var(--g-info); }
.guide dl.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 8px 0 12px; font-size: 14px; }
.guide dl.kv dt { color: var(--muted); }
.guide dl.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.guide .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin: 8px 0 20px; }
.guide .facts > div { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.guide .facts b { display: block; font-size: 1.5rem; line-height: 1.2; }
.guide .facts span { font-size: 13px; color: var(--muted); }
.guide .fig { margin: 16px 0; }
.guide .fig figcaption { color: var(--muted); font-size: 13px; margin-top: 6px; }
.guide ol.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.guide ol.flow .step { position: relative; display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 2px 12px; align-items: baseline;
                       border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 6px 12px; background: var(--panel); }
.guide ol.flow .step b { grid-column: 2; }
.guide ol.flow .step > span:last-child { grid-column: 2; color: var(--muted); font-size: 14px; }
.guide ol.flow .tagk { grid-row: 1 / span 2; font-size: 12px; color: var(--muted); }
.guide ol.flow .step.model { border-left-color: var(--g-info); border-style: dashed; border-left-style: solid; }
.guide ol.flow .step.gate { border-left-color: var(--g-warn); }
.guide ol.flow .step.stop { border-left-color: var(--g-block); }
.guide ol.flow .step.det { border-left-color: var(--muted); }
.guide ol.runs { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.guide ol.runs li { border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; font-size: 14px; background: var(--panel); }
.guide ol.runs li b { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.guide ol.runs li.warm { opacity: .6; border-style: dashed; }
.guide ol.runs li.timed { border-color: var(--accent); }
.guide .rule-sec, .guide section.rule { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 4px; }
.guide section.rule h3, .guide .rule-sec h3 { margin-bottom: 6px; }
.guide .ex { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 12px 0; background: var(--panel); }
.guide .ex-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.guide .ex-sql { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.guide .ex-sql .k { font-size: 12px; color: var(--muted); font-weight: 600; }
.guide .ex-sql pre { margin: 4px 0 0; font-size: 13px; }
.guide .ex-verdict { margin: 8px 0 4px; }
.guide ol.bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.guide ol.bars li { display: grid; grid-template-columns: 11em minmax(0, 1fr) 4.5em; gap: 10px; align-items: center; font-size: 14px; }
.guide ol.bars .lab small { display: block; color: var(--muted); font-size: 12px; }
.guide ol.bars .num { text-align: right; font-variant-numeric: tabular-nums; }
.guide svg.bar { width: 100%; height: 14px; display: block; }
.guide svg.bar .track { fill: var(--g-soft); }
.guide svg.bar .val { fill: var(--accent); }
.guide .cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.guide .cols3 .tw { margin: 0; }
.guide nav.chnav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 2rem; padding-top: 12px;
                   border-top: 1px solid var(--line); font-size: 14px; }
.guide details { border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; margin: 8px 0; background: var(--panel); }
.guide details summary { cursor: pointer; font-weight: 600; }
.guide details pre { font-size: 13px; }
.guide a.rule { text-decoration: none; }
.guide a.rule code { text-decoration: underline dotted; }
@media (max-width: 760px) {
  .guide .ex-sql { grid-template-columns: minmax(0, 1fr); }
  .guide ol.bars li { grid-template-columns: minmax(0, 1fr) 4em; }
  .guide ol.bars li svg.bar { grid-column: 1 / -1; grid-row: 2; }
  .guide dl.kv { grid-template-columns: minmax(0, 1fr); gap: 0 0; }
  .guide dl.kv dd { margin-bottom: 6px; }
  .guide ol.flow .step { grid-template-columns: minmax(0, 1fr); }
  .guide ol.flow .tagk, .guide ol.flow .step b, .guide ol.flow .step > span:last-child { grid-column: 1; grid-row: auto; }
}
.guide .tw table.findings td:nth-child(2), .guide .tw table.findings td:nth-child(3) { white-space: nowrap; }
.guide .tw table.toc td:first-child { white-space: nowrap; }
.guide .tw table.cases td:first-child { min-width: 16em; }
.guide .tw td a.rule, .guide .tw td code { display: inline-block; }