:root{
    --bg:#0d1117; --panel:#161b22; --panel2:#1c2330; --ink:#e6edf3; --dim:#8b949e;
    --accent:#58a6ff; --accent2:#1f6feb; --gold:#d4a017; --green:#3fb950; --red:#f85149;
    --line:#30363d; --canvasbg:#0a0e14;
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
    background:var(--bg);color:var(--ink);line-height:1.5;}
  header{padding:26px 30px 18px;border-bottom:1px solid var(--line);
    background:linear-gradient(180deg,#11161f,#0d1117);}
  .kicker{color:var(--accent);font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;}
  h1{margin:6px 0 4px;font-size:34px;font-weight:700;}
  .sub{color:var(--dim);font-size:15px;max-width:780px;}
  .anchor{display:inline-block;margin-top:10px;padding:4px 10px;border:1px solid var(--gold);
    color:var(--gold);border-radius:14px;font-size:12px;letter-spacing:.05em;}
  /* series nav */
  nav.series{display:flex;gap:4px;flex-wrap:wrap;padding:12px 30px;background:#0a0e14;border-bottom:1px solid var(--line);}
  nav.series a{padding:6px 12px;border-radius:6px;font-size:12.5px;color:var(--dim);text-decoration:none;border:1px solid transparent;}
  nav.series a.cur{color:var(--ink);background:var(--panel2);border-color:var(--line);}
  nav.series a:hover{color:var(--ink);}
  main{max-width:1100px;margin:0 auto;padding:24px 24px 80px;}
  /* C-level */
  .clevel{background:linear-gradient(135deg,#13233b,#0f1a2b);border:1px solid var(--accent2);
    border-left:5px solid var(--accent);border-radius:10px;padding:18px 22px;margin:22px 0 30px;}
  .clevel .tag{color:var(--accent);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}
  .clevel p{margin:8px 0 0;font-size:16px;}
  .clevel .big{font-size:18px;font-weight:600;}
  /* keypoint tabs */
  .kptabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0;}
  .kptab{padding:9px 14px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;
    background:var(--panel);color:var(--dim);cursor:pointer;font-size:13.5px;font-weight:600;}
  .kptab.cur{background:var(--panel2);color:var(--ink);border-color:var(--accent2);}
  .kpbody{border:1px solid var(--accent2);border-radius:0 10px 10px 10px;background:var(--panel2);padding:20px 22px;}
  .kptitle{font-size:20px;font-weight:700;margin:0 0 4px;}
  .kpsum{color:var(--dim);font-size:14.5px;margin:0 0 16px;}
  /* buttons */
  .btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .btn{padding:9px 16px;border-radius:7px;border:1px solid var(--line);cursor:pointer;font-size:13.5px;
    font-weight:600;background:var(--panel);color:var(--ink);transition:.15s;}
  .btn:hover{border-color:var(--accent);}
  .btn.cur{background:var(--accent2);border-color:var(--accent);color:#fff;}
  .btn.build{border-color:var(--gold);color:var(--gold);}
  .btn.build.cur{background:var(--gold);color:#0d1117;border-color:var(--gold);}
  /* stage */
  .stage{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;}
  @media(max-width:820px){.stage{grid-template-columns:1fr;}}
  .canvaswrap{background:var(--canvasbg);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;}
  canvas{display:block;width:100%;}
  .explain{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:14px;}
  .explain h4{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
  .explain.build h4{color:var(--gold);}
  .metrics{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;}
  .metric{background:#0a0e14;border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:96px;}
  .metric .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;}
  .metric .l{font-size:11px;color:var(--dim);letter-spacing:.06em;}
  .metric.then .v{color:var(--red);} .metric.now .v{color:var(--green);}
  .letter{margin-top:34px;padding:18px 22px;border:1px dashed var(--gold);border-radius:10px;
    background:#15130c;color:#e8dcc0;font-size:14.5px;}
  .letter .tag{color:var(--gold);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}
  footer{padding:24px 30px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;text-align:center;}
  .codeline{font-family:"SF Mono",Consolas,monospace;font-size:12.5px;background:#0a0e14;border:1px solid var(--line);
    border-radius:6px;padding:8px 10px;margin:6px 0;color:#a5d6ff;}
  .partsel{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 22px;}
  .partbtn{flex:1;min-width:220px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);cursor:pointer;transition:.15s;}
  .partbtn:hover{border-color:var(--accent);}
  .partbtn.cur{border-color:var(--gold);background:linear-gradient(135deg,#1a1812,#13110b);}
  .partbtn .n{font-size:12px;color:var(--gold);letter-spacing:.12em;font-weight:700;}
  .partbtn .t{font-size:17px;font-weight:700;margin-top:3px;}
  .partbtn .a{font-size:11.5px;color:var(--dim);margin-top:3px;}
  .clevel{background:linear-gradient(135deg,#13233b,#0f1a2b);border:1px solid var(--accent2);border-left:5px solid var(--accent);border-radius:10px;padding:18px 22px;margin:0 0 26px;}
  .clevel .tag{color:var(--accent);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}
  .clevel p{margin:8px 0 0;font-size:16px;} .clevel .big{font-size:18px;font-weight:600;}
  .kptabs{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 0;}
  .kptab{padding:9px 14px;border:1px solid var(--line);border-bottom:none;border-radius:8px 8px 0 0;background:var(--panel);color:var(--dim);cursor:pointer;font-size:13.5px;font-weight:600;}
  .kptab.cur{background:var(--panel2);color:var(--ink);border-color:var(--accent2);}
  .kpbody{border:1px solid var(--accent2);border-radius:0 10px 10px 10px;background:var(--panel2);padding:20px 22px;}
  .kptitle{font-size:20px;font-weight:700;margin:0 0 4px;} .kpsum{color:var(--dim);font-size:14.5px;margin:0 0 16px;}
  .btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
  .btn{padding:9px 16px;border-radius:7px;border:1px solid var(--line);cursor:pointer;font-size:13.5px;font-weight:600;background:var(--panel);color:var(--ink);transition:.15s;}
  .btn:hover{border-color:var(--accent);} .btn.cur{background:var(--accent2);border-color:var(--accent);color:#fff;}
  .btn.build{border-color:var(--gold);color:var(--gold);} .btn.build.cur{background:var(--gold);color:#0d1117;border-color:var(--gold);}
  .stage{display:grid;grid-template-columns:1fr 320px;gap:18px;align-items:start;}
  @media(max-width:820px){.stage{grid-template-columns:1fr;}}
  .canvaswrap{background:var(--canvasbg);border:1px solid var(--line);border-radius:10px;overflow:hidden;position:relative;}
  canvas{display:block;width:100%;}
  .explain{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;font-size:14px;}
  .explain h4{margin:0 0 8px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);} .explain.build h4{color:var(--gold);}
  .metrics{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;}
  .metric{background:#0a0e14;border:1px solid var(--line);border-radius:8px;padding:8px 12px;min-width:96px;}
  .metric .v{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;} .metric .l{font-size:11px;color:var(--dim);letter-spacing:.06em;}
  .metric.then .v{color:var(--red);} .metric.now .v{color:var(--green);}
  .letter{margin-top:34px;padding:18px 22px;border:1px dashed var(--gold);border-radius:10px;background:#15130c;color:#e8dcc0;font-size:14.5px;}
  .letter .tag{color:var(--gold);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}
  /* the ledger polemic block */
  .ledger{margin-top:30px;padding:24px 26px;border:1px solid var(--purp);border-radius:12px;background:linear-gradient(135deg,#15101f,#0e0b16);}
  .ledger .tag{color:var(--purp);font-size:11px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;}
  .ledger h3{margin:8px 0 10px;font-size:21px;}
  .ledger p{font-size:15px;margin:10px 0;color:#e6dcf3;}
  .ledger .close{font-size:18px;font-weight:700;color:var(--gold);margin-top:16px;border-top:1px solid #2a2236;padding-top:14px;}
  footer{padding:24px 30px;border-top:1px solid var(--line);color:var(--dim);font-size:12.5px;text-align:center;}