/* ===== 盲派八字逐节精读 — 图灵子米纸/墨色/钴蓝 ===== */
:root{
  --paper:#f3ecdd; --paper2:#ece2cf; --ink:#20201c; --ink2:#4a463d;
  --line:#cbbfa6; --cobalt:#274b8e; --cobalt-l:#3a63ad; --cinnabar:#a83a2f;
  --gold:#9a7b3f; --card:#faf5e9; --shadow:0 2px 14px rgba(60,45,20,.13);
  --serif:"Songti SC","Source Han Serif SC","Noto Serif SC",STSong,SimSun,serif;
  --sans:"PingFang SC","Noto Sans SC","Microsoft YaHei",-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);
  -webkit-font-smoothing:antialiased;line-height:1.75}
a{color:var(--cobalt);text-decoration:none}

/* header */
header.top{background:linear-gradient(180deg,#26221b,#312b21);color:#f3ecdd;
  padding:14px 22px;display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-bottom:3px solid var(--cinnabar)}
header.top h1{font-size:20px;letter-spacing:2px;font-weight:700}
header.top .sub{font-size:13px;color:#c9bfa6;font-family:var(--sans)}
header.top .seal{margin-left:auto;font-family:var(--serif);color:var(--cinnabar);
  border:1.5px solid var(--cinnabar);padding:3px 9px;border-radius:4px;font-size:13px;
  background:rgba(168,58,47,.08)}

/* source tabs */
nav.sources{display:flex;gap:2px;background:var(--paper2);padding:0 12px;
  border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:0;z-index:20}
nav.sources button{font-family:var(--serif);font-size:15px;color:var(--ink2);
  background:none;border:none;padding:12px 16px;cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent}
nav.sources button.kind-book{color:var(--gold)}
nav.sources button:hover{color:var(--ink);background:rgba(39,75,142,.06)}
nav.sources button.active{color:var(--cobalt);border-bottom-color:var(--cobalt);
  background:var(--card);font-weight:700}
nav.sources button.kind-book.active{color:var(--gold);border-bottom-color:var(--gold)}

/* body layout */
.wrap{display:flex;min-height:calc(100vh - 120px)}
aside.lessons{width:270px;flex:none;background:var(--paper2);
  border-right:1px solid var(--line);overflow-y:auto;max-height:calc(100vh - 120px);
  position:sticky;top:49px}
aside.lessons .srcmeta{padding:14px 16px;border-bottom:1px dashed var(--line)}
aside.lessons .srcmeta .nm{font-size:16px;font-weight:700}
aside.lessons .srcmeta .dc{font-size:12.5px;color:var(--ink2);font-family:var(--sans);
  margin-top:5px;line-height:1.6}
aside.lessons ol{list-style:none}
aside.lessons li{padding:10px 16px 10px 14px;font-size:14px;cursor:pointer;
  border-bottom:1px solid rgba(203,191,166,.4);color:var(--ink2);display:flex;gap:8px;align-items:flex-start}
aside.lessons li:hover{background:rgba(39,75,142,.07);color:var(--ink)}
aside.lessons li.active{background:var(--card);color:var(--cobalt);font-weight:700;
  border-left:3px solid var(--cobalt);padding-left:11px}
aside.lessons li .n{color:var(--cinnabar);font-family:var(--sans);font-size:12px;flex:none;
  min-width:26px}
aside.lessons li.todo{opacity:.55}
aside.lessons li.todo .n{color:var(--ink2)}

/* stage */
main.stage{flex:1;padding:26px 30px;min-width:0;display:flex;flex-direction:column;align-items:center}
.deckhead{width:100%;max-width:960px;display:flex;justify-content:space-between;
  align-items:baseline;margin-bottom:12px;font-family:var(--sans)}
.deckhead .lt{font-size:15px;color:var(--cobalt);font-weight:700}
.deckhead .cnt{font-size:13px;color:var(--ink2)}
.deckhead .bili{font-size:12.5px;font-family:var(--sans);color:#fff;background:#fb7299;
  text-decoration:none;padding:2px 10px;border-radius:11px;margin-left:auto;margin-right:12px;white-space:nowrap}
.deckhead .bili:hover{background:#e85c85}

.slide{width:100%;max-width:960px;aspect-ratio:16/9;max-height:calc(100vh - 288px);
  min-height:340px;background:var(--card);
  border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);
  padding:34px 44px;overflow:auto;position:relative;display:flex;flex-direction:column}
.slide h2{font-size:27px;color:var(--cobalt);letter-spacing:1px;margin-bottom:4px;
  border-bottom:2px solid var(--line);padding-bottom:10px}
.slide h2 .k{color:var(--cinnabar);font-size:16px;font-family:var(--sans);margin-left:10px;letter-spacing:0}
.slide .lead{font-size:17px;color:var(--ink2);margin:14px 0}
.slide.cover{justify-content:center;align-items:center;text-align:center;
  background:radial-gradient(circle at 50% 35%,#fbf6ea,#eee2ca)}
.slide.cover .big{font-size:44px;color:var(--ink);letter-spacing:4px}
.slide.cover .sm{font-size:18px;color:var(--cinnabar);margin-top:16px;font-family:var(--sans)}
.slide.cover .src{font-size:14px;color:var(--ink2);margin-top:26px;font-family:var(--sans)}

.slide p{font-size:16.5px;margin:9px 0}
.slide ul,.slide ol{margin:8px 0 8px 24px;font-size:16.5px}
.slide li{margin:6px 0}
.slide .em{color:var(--cinnabar);font-weight:700}
.slide .co{color:var(--cobalt);font-weight:700}
.slide small{font-family:var(--sans);color:var(--ink2)}

/* nav buttons */
.deckctl{width:100%;max-width:960px;display:flex;justify-content:space-between;
  align-items:center;margin-top:14px;font-family:var(--sans)}
.deckctl button{font-family:var(--sans);font-size:14px;background:var(--cobalt);
  color:#fff;border:none;padding:9px 20px;border-radius:6px;cursor:pointer}
.deckctl button:disabled{background:#b7ad95;cursor:default}
.deckctl .dots{display:flex;gap:6px;flex-wrap:wrap;max-width:60%;justify-content:center}
.deckctl .dot{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer}
.deckctl .dot.on{background:var(--cinnabar)}

/* speaker notes */
.notes{width:100%;max-width:960px;margin-top:16px;background:#efe6d2;
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:8px}
.notes .nh{font-family:var(--sans);font-size:13px;color:var(--gold);font-weight:700;
  padding:9px 16px;cursor:pointer;display:flex;justify-content:space-between}
.notes .nb{padding:2px 18px 16px;font-size:15.5px;color:var(--ink2);line-height:1.85;display:none}
.notes.open .nb{display:block}
.notes .nb .raw{font-size:13px;color:#8a8270;font-family:var(--sans);
  border-top:1px dashed var(--line);margin-top:12px;padding-top:10px;white-space:pre-wrap}

/* ===== illustrative components ===== */
/* 命盘 */
.bx{display:flex;gap:0;justify-content:center;margin:16px 0;font-family:var(--serif)}
.bx .col{width:96px;text-align:center;border-right:1px dashed var(--line)}
.bx .col:first-child{border-left:1px dashed var(--line)}
.bx .pos{font-family:var(--sans);font-size:12px;color:var(--ink2);padding:4px 0;background:var(--paper2)}
.bx .gan,.bx .zhi{font-size:34px;padding:8px 0;color:var(--ink)}
.bx .gan{border-bottom:1px solid var(--line);background:#fbf6ea}
.bx .zhi{background:#f6efdd}
.bx .cang{font-family:var(--sans);font-size:11.5px;color:#8a8270;padding:3px 0 6px}
.bx .tag{font-family:var(--sans);font-size:11.5px;color:var(--cobalt);padding:2px 0 6px}
.bx .col.hlr{background:rgba(168,58,47,.10);outline:2px solid var(--cinnabar);outline-offset:-2px}
.bx .col.hlc{background:rgba(39,75,142,.10);outline:2px solid var(--cobalt);outline-offset:-2px}
.bxcap{text-align:center;font-family:var(--sans);font-size:13px;color:var(--ink2);margin-top:4px}
/* 高保真排盘 SVG(paipan_svg.py 预渲) */
.panfig{margin:10px auto;text-align:center}
.panfig img.pan{display:block;margin:0 auto;max-width:100%;max-height:calc(100vh - 470px);
  min-height:200px;height:auto;width:auto;object-fit:contain;
  border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px 10px}
.panfig figcaption.bxcap{margin-top:6px}
/* 两盘并排时缩小 */
.slide [style*="flex"] .panfig img.pan{max-height:calc(100vh - 520px);min-height:150px}

/* position bar (家里家外/旺点弱点) */
.posbar{display:flex;flex-direction:column;gap:8px;margin:16px 0;max-width:520px}
.posbar .row{display:flex;align-items:center;gap:10px}
.posbar .row .lb{font-family:var(--sans);font-size:12px;color:var(--ink2);width:64px;flex:none;text-align:right}
.posbar .cells{display:flex;flex:1}
.posbar .cell{flex:1;text-align:center;padding:9px 0;font-family:var(--sans);font-size:14px;
  border:1px solid var(--line);border-right:none}
.posbar .cells .cell:last-child{border-right:1px solid var(--line)}
.posbar .cell.jia{background:rgba(168,58,47,.12);color:var(--cinnabar);font-weight:700}
.posbar .cell.wai{background:rgba(39,75,142,.10);color:var(--cobalt);font-weight:700}
.posbar .cell.wang{background:#e8dcbd;color:var(--ink)}
.posbar .cell.ruo{background:#f2ead6;color:var(--ink2)}

/* priority chain */
.chain{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:14px 0;font-family:var(--sans)}
.chain .lk{background:var(--cobalt);color:#fff;padding:7px 14px;border-radius:6px;font-size:15px}
.chain .lk.dim{background:#b7ad95}
.chain .gt{color:var(--cinnabar);font-weight:700;font-size:18px}

/* table */
.slide table{border-collapse:collapse;width:100%;margin:12px 0;font-size:15px}
.slide th,.slide td{border:1px solid var(--line);padding:8px 12px;text-align:left}
.slide th{background:var(--paper2);color:var(--cobalt);font-family:var(--sans);font-size:14px}
.slide td .em{color:var(--cinnabar)}

/* cards / contrast */
.cards{display:flex;gap:14px;margin:14px 0;flex-wrap:wrap}
.cards .c{flex:1;min-width:180px;background:#f6efdd;border:1px solid var(--line);
  border-top:3px solid var(--cobalt);border-radius:8px;padding:14px 16px}
.cards .c.cin{border-top-color:var(--cinnabar)}
.cards .c h4{font-size:16px;margin-bottom:6px;color:var(--ink)}
.cards .c p{font-size:14.5px;color:var(--ink2);margin:4px 0}
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:14px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.contrast .h{font-family:var(--sans);font-weight:700;padding:8px 14px;font-size:14px}
.contrast .zp{background:rgba(39,75,142,.1);color:var(--cobalt)}
.contrast .mp{background:rgba(168,58,47,.1);color:var(--cinnabar)}
.contrast .cellz,.contrast .cellm{padding:10px 14px;font-size:15px;border-top:1px solid var(--line)}

.todo-slide{justify-content:center;align-items:center;text-align:center;color:var(--ink2)}
.todo-slide .icon{font-size:40px;margin-bottom:14px}
.todo-slide .t{font-size:22px;color:var(--ink);margin-bottom:8px}
.todo-slide small{font-size:14px}

footer.ft{text-align:center;font-family:var(--sans);font-size:12px;color:#8a8270;
  padding:16px;border-top:1px solid var(--line)}

@media(max-width:820px){
  .wrap{flex-direction:column}
  aside.lessons{width:100%;position:static;max-height:none;display:flex;overflow-x:auto}
  aside.lessons .srcmeta{display:none}
  aside.lessons ol{display:flex}
  aside.lessons li{border-bottom:none;border-right:1px solid var(--line);white-space:nowrap}
  .slide{aspect-ratio:auto;min-height:420px}
  .slide h2{font-size:22px}
  .contrast{grid-template-columns:1fr}
}