:root{
    --bg:#EEF1F5; --bg-2:#E4E9F1; --sheet:#FFFFFF;
    --ink:#171C28; --ink-soft:#46506A; --ink-faint:#7A839B;
    --line:#D3DAE6; --line-soft:#E3E8F0;
    --spine:#21356B; --spine-2:#2E4A9E;
    --amber:#B45309; --amber-bg:#FBEFD9; --red:#B42318; --red-bg:#FBE4E1; --green:#157347; --green-bg:#E1F0E6;
    --violet:#5A31B8; --violet-bg:#EBE1FD;
    --margin:#C7D2E8;
    --shadow-sm:0 1px 2px rgba(20,30,55,.06);
    --shadow-md:0 1px 2px rgba(20,30,55,.06), 0 10px 34px rgba(20,30,55,.07);
    --radius:11px;
    --serif:'Spectral', Georgia,'Times New Roman',serif;
    --sans:'IBM Plex Sans', system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    --mono:'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
    --accent:#21356B;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
  .app{max-width:820px; margin:0 auto; padding:22px 18px 90px;}
  button{font-family:var(--sans); cursor:pointer;}
  :focus-visible{outline:2px solid var(--spine-2); outline-offset:2px; border-radius:4px;}
  a{color:var(--spine-2);}
  .eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--spine); font-weight:500;}

  .cover{background:var(--sheet); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-md); overflow:hidden; margin-bottom:12px;}
  .cover__top{padding:28px 30px 24px; background:linear-gradient(180deg,#fff,#FBFCFE); position:relative;}
  .cover__top::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--spine);}
  .cover__title{font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.12; margin:10px 0 6px;}
  .cover__sub{color:var(--ink-soft); font-size:15px; max-width:64ch;}
  .cover__meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
  .cover__meta span{font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; color:var(--spine); background:#F4F7FD; border:1px solid #DBE3F2; border-radius:99px; padding:4px 10px;}
  .cover__foot{padding:13px 30px; border-top:1px solid var(--line-soft); background:#FCFDFE; display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;}
  .cover__foot .handle{font-family:var(--mono); font-size:12px; color:var(--spine); font-weight:500;}
  .cover__foot a{font-size:13px; text-decoration:none;} .cover__foot a:hover{text-decoration:underline;}

  .rail{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 0 16px; padding:11px 15px; background:var(--sheet); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-sm);}
  .rail .rl{font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-right:2px;}
  .rail .step{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--ink-faint);}
  .rail .step .dot{width:9px; height:9px; border-radius:50%; background:currentColor; display:inline-block;}
  .rail .step.done{color:var(--green);}
  .rail .step.now{color:var(--spine); font-weight:700;}
  .rail .arrow{color:#C7D2E8; font-size:12px;}

  .navwrap{position:sticky; top:0; z-index:20; padding:10px 0 9px; margin-bottom:16px; background:rgba(238,241,245,.96); backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--line);}
  .groupbar{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin-bottom:9px;}
  .grp{--gc:var(--spine); border:1.5px solid var(--gc); background:#fff; color:var(--gc); font-family:var(--sans); font-weight:600; font-size:12.5px; padding:7px 13px; border-radius:9px; display:inline-flex; align-items:center; gap:7px; transition:all .14s ease;}
  .grp .gi{font-size:14px; line-height:1;}
  .grp:hover{background:#F4F7FD;}
  .grp.active{background:var(--gc); color:#fff;}
  .navtoggle{margin-left:auto; border:1px solid var(--line); background:#fff; color:var(--ink-faint); border-radius:8px; padding:6px 11px; font-size:11.5px; font-family:var(--mono);}
  .navtoggle:hover{border-color:var(--spine-2); color:var(--spine);}
  .subbar{display:flex; gap:6px; flex-wrap:wrap;}
  .nav-collapsed .subbar{display:none;}
  .tab{border:1px solid var(--line); background:#fff; color:var(--ink-soft); padding:8px 12px; border-radius:8px; font-size:12.5px; font-weight:600; transition:all .14s ease; white-space:nowrap;}
  .tab:hover{border-color:var(--accent,var(--spine-2)); color:var(--accent,var(--spine));}
  .tab.active{background:var(--accent,var(--spine)); border-color:var(--accent,var(--spine)); color:#fff;}
  .panel{display:none;} .panel.active{display:block;}

  .key{display:flex; gap:13px; align-items:flex-start; background:linear-gradient(180deg,#fff,#FBFCFE); border:1px solid var(--line); border-left:4px solid var(--accent,var(--spine)); border-radius:10px; padding:14px 16px; margin:12px 0; box-shadow:var(--shadow-sm);}
  .key .kbig{flex:none; font-family:var(--serif); font-size:23px; font-weight:700; color:var(--accent,var(--spine)); line-height:1;}
  .key .ktext{font-size:14px; color:var(--ink-soft);} .key .ktext b{color:var(--ink);} .key .ktext .fr{font-family:var(--serif);}
  .cardset{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; margin:10px 0;}
  .minic{border:1px solid var(--line-soft); border-top:3px solid var(--accent,var(--spine)); border-radius:9px; padding:11px 13px; background:#FCFDFE;}
  .minic .mh{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent,var(--spine)); font-weight:600; margin-bottom:5px;}
  .minic .mb{font-family:var(--serif); font-size:15px; color:var(--ink);} .minic .mb b{color:var(--accent,var(--spine));}
  .minic .ms{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px;}

  /* --- NEW: two-lane timeline (events vs background) --- */
  .tl{border:1px solid var(--line-soft); border-radius:10px; padding:14px 16px; margin:12px 0; background:#FBFCFE;}
  .tl .lane{display:flex; align-items:center; gap:10px; margin:8px 0;}
  .tl .lab{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.04em; font-weight:600; width:92px; flex:none; line-height:1.3;}
  .tl .ev .lab{color:var(--spine-2);} .tl .bg .lab{color:var(--amber);}
  .tl .track{flex:1; display:flex; gap:7px; flex-wrap:wrap; align-items:center;}
  .tl .ev .pt{font-family:var(--serif); font-size:14px; font-weight:600; background:#EAF0FB; border:1px solid #C9D8F2; color:var(--spine-2); border-radius:7px; padding:4px 10px;}
  .tl .ev .arw{color:#C9D8F2; font-size:12px;}
  .tl .bg .band{flex:1; min-width:100%; font-family:var(--serif); font-size:14px; font-weight:600; background:linear-gradient(90deg,#FBEFD9,#FDF6EA); border:1px solid #EAD8B0; color:var(--amber); border-radius:7px; padding:6px 12px; text-align:center;}
  .tl .cap{font-size:11.5px; color:var(--ink-faint); margin-top:8px; padding-top:8px; border-top:1px dashed var(--line);}
  .tl .cap b{color:var(--ink);}

  /* --- decision flow (reused) --- */
  .flow{margin:12px 0;}
  .flow .fq{background:#F4F7FD; border:1px solid #DBE3F2; border-left:4px solid var(--accent,var(--spine)); border-radius:8px; padding:10px 13px; font-family:var(--serif); font-size:15.5px; color:var(--ink); margin:0 0 6px;}
  .flow .fa{display:flex; gap:10px; margin:0 0 6px 20px; align-items:baseline;}
  .flow .fa .fk{font-family:var(--mono); font-size:11px; font-weight:600; color:var(--green); flex:none; min-width:96px;}
  .flow .fa .fv{font-size:13.5px; color:var(--ink-soft);} .flow .fa .fv b{color:var(--ink); font-family:var(--serif);}

  .card{background:var(--sheet); border:1px solid var(--line); border-top:3px solid var(--accent,var(--spine)); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:22px 24px; margin-bottom:16px;}
  .card h2{font-family:var(--serif); font-size:22px; font-weight:600; margin:0 0 4px; color:var(--accent,var(--spine));}
  .card .lede{color:var(--ink-soft); font-size:14.5px; margin:0 0 16px;}
  h3.cc{font-family:var(--serif); font-size:18px; font-weight:600; margin:24px 0 8px; padding:18px 0 0 15px; border-top:1px solid var(--line-soft); color:var(--ink); position:relative;}
  h3.cc::before{content:""; position:absolute; left:0; top:24px; width:7px; height:7px; border-radius:2px; background:var(--accent,var(--spine));}
  h3.cc:first-of-type{border-top:none; padding-top:4px;}
  h3.cc:first-of-type::before{top:9px;}
  h3.cc .tag{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.04em; color:var(--ink-faint); margin-left:8px; text-transform:uppercase;}
  .card p{font-size:14.5px; color:var(--ink-soft); margin:0 0 10px;} .card p b{color:var(--ink);}
  .fr{font-family:var(--serif); color:var(--spine-2); font-weight:500;}
  .pc{color:var(--spine-2); font-weight:700;} .imp{color:var(--amber); font-weight:700;}
  ul.tight{margin:6px 0 12px; padding-left:20px;} ul.tight li{font-size:14px; color:var(--ink-soft); margin:5px 0;} ul.tight li b{color:var(--ink);}

  table.conj{width:100%; border-collapse:collapse; margin:8px 0; font-size:15px;}
  table.conj td,table.conj th{padding:7px 10px; border-bottom:1px solid var(--line-soft); text-align:left; vertical-align:top;}
  table.conj th{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); font-weight:500;}
  table.conj td:first-child{font-family:var(--serif); color:var(--ink); font-weight:600;}
  table.conj td.g{font-size:12.5px; color:var(--ink-faint); font-family:var(--sans); font-weight:400;}

  .exlist{border:1px solid var(--line-soft); border-radius:9px; overflow:hidden; margin:8px 0 12px;}
  .exlist .er{display:flex; gap:12px; padding:8px 13px; border-bottom:1px solid var(--line-soft);}
  .exlist .er:last-child{border-bottom:none;} .exlist .er:nth-child(even){background:#FCFDFE;}
  .exlist .f{font-family:var(--serif); font-size:15.5px; color:var(--ink); flex:1; min-width:0;}
  .exlist .f b{color:var(--spine-2); font-weight:700;}
  .exlist .e{font-size:12.5px; color:var(--ink-faint); flex:1; min-width:0;}

  .chips{display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 12px;}
  .chips span{font-family:var(--serif); font-size:14px; color:var(--ink); background:#F4F7FD; border:1px solid #DBE3F2; border-radius:6px; padding:4px 9px;}
  .chips span i{color:var(--ink-faint); font-style:normal; font-family:var(--sans); font-size:11.5px; margin-left:4px;}
  .chips.pcs span{background:#EAF0FB; border-color:#C9D8F2;} .chips.imps span{background:#FBEFD9; border-color:#EAD8B0;}

  .mistake{display:flex; gap:12px; background:var(--red-bg); border:1px solid #EEC4BE; border-radius:9px; padding:11px 14px; margin:8px 0;}
  .mistake .x{flex:none; font-family:var(--serif); font-weight:700; color:var(--red);}
  .mistake .body{font-size:13.5px; color:var(--ink);}
  .mistake .w{color:var(--red); text-decoration:line-through; text-decoration-color:rgba(180,35,24,.4); font-family:var(--serif);}
  .mistake .r{color:var(--green); font-weight:600; font-family:var(--serif);}
  .mistake .why{display:block; color:var(--ink-soft); font-size:12.5px; margin-top:2px;}
  .mistake .code{font-family:var(--mono); font-size:10px; font-weight:600; color:var(--red); background:#fff; border:1px solid #EEC4BE; border-radius:5px; padding:1px 5px; margin-left:6px;}

  .deepnote{background:var(--violet-bg); border:1px solid #D6C6F5; border-radius:9px; padding:12px 15px; margin:10px 0;}
  .deepnote .h{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--violet); font-weight:600; margin-bottom:5px;}
  .deepnote p{margin:0 0 6px; font-size:13.5px; color:#3A2470;} .deepnote p:last-child{margin-bottom:0;} .deepnote b{color:#25104A;}

  .tip{display:flex; gap:11px; background:var(--amber-bg); border:1px solid #EAD8B0; border-radius:9px; padding:12px 14px; margin:10px 0;}
  .tip .ico{flex:none; font-size:17px;} .tip p{margin:0; font-size:13.5px; color:#6B4310;} .tip b{color:#4A2E08;}

  .qa{border-left:3px solid var(--spine-2); padding:4px 0 4px 14px; margin:12px 0;}
  .qa .q{font-family:var(--serif); font-size:15.5px; font-weight:600; color:var(--ink); margin-bottom:3px;}
  .qa .a{font-size:14px; color:var(--ink-soft);} .qa .a b{color:var(--ink);}

  .check{background:var(--bg); border:1px solid var(--line-soft); border-left:3px solid var(--green); border-radius:0 9px 9px 0; padding:12px 14px; margin:14px 0;}
  .check .h{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--green); font-weight:600; margin-bottom:6px;}
  .check p{margin:0; font-size:13.5px; color:var(--ink-soft);} .check .ans{color:var(--spine-2); font-style:italic;}

  .vs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0;}
  .vs .col{border:1px solid var(--line-soft); border-radius:9px; padding:11px 13px;}
  .vs .col.weak{background:#FCF6F5; border-color:#EEC4BE;} .vs .col.strong{background:#F5FAF6; border-color:#BFE0CC;}
  .vs .lab{font-family:var(--mono); font-size:10px; letter-spacing:.07em; text-transform:uppercase; font-weight:600; margin-bottom:6px;}
  .vs .weak .lab{color:var(--red);} .vs .strong .lab{color:var(--green);}
  .vs .col p{font-family:var(--serif); font-size:14.5px; color:var(--ink); margin:4px 0;}
  .vs .col .n{display:block; font-family:var(--sans); font-size:11.5px; color:var(--ink-faint); margin-top:2px;}
  @media (max-width:560px){ .vs{grid-template-columns:1fr;} }

  .wrong{color:var(--red); text-decoration:line-through; text-decoration-color:rgba(180,35,24,.4);}
  .right{color:var(--green); font-weight:600;}

  .d{border:1px solid var(--line); border-radius:10px; padding:13px 15px; margin-bottom:10px; background:#FCFDFE;}
  .dq{font-family:var(--serif); font-size:16px; color:var(--ink); margin-bottom:10px;}
  .dq .blank{color:var(--spine-2); font-weight:600; border-bottom:2px solid var(--margin); padding:0 12px;}
  .dq .verb{font-family:var(--mono); font-size:11px; color:var(--ink-faint); background:#F4F7FD; border:1px solid #DBE3F2; border-radius:5px; padding:1px 6px; margin-left:5px;}
  .opts{display:flex; gap:7px; flex-wrap:wrap;}
  .opt{border:1px solid var(--line); background:#fff; color:var(--ink); font-family:var(--serif); font-size:15px; padding:8px 15px; border-radius:8px; transition:all .12s ease;}
  .opt:hover{border-color:var(--spine-2);}
  .d.done .opt{cursor:default;}
  .opt.correct{background:var(--green-bg); border-color:#BFE0CC; color:var(--green); font-weight:600;}
  .opt.wrong{background:var(--red-bg); border-color:#EEC4BE; color:var(--red);}
  .opt.correct::after{content:" ✓";} .opt.wrong::after{content:" ✕";}
  .explain{display:none; margin-top:9px; font-size:13px; color:var(--ink-soft); background:var(--bg); border-left:3px solid var(--spine-2); border-radius:0 7px 7px 0; padding:8px 12px;}
  .d.done .explain{display:block;} .explain b{color:var(--ink);}
  .scorechip{font-family:var(--mono); font-size:13px; font-weight:500; color:var(--spine); background:#fff; border:1px solid var(--line); border-radius:99px; padding:6px 14px; display:inline-block; margin-bottom:12px;}
  .frame{background:#FCFDFE; border:1px solid var(--line-soft); border-radius:9px; padding:14px 16px; margin-top:10px;}
  .frame ol{margin:0; padding-left:20px;} .frame li{font-family:var(--serif); font-size:15.5px; color:var(--ink); margin:9px 0;}
  .frame li .g{font-family:var(--sans); font-size:12.5px; color:var(--ink-faint); font-style:italic; margin-left:6px;}
  .fill{border:none; border-bottom:2px solid var(--margin); background:transparent; font-family:var(--serif); font-size:15.5px; color:var(--spine-2); font-weight:600; min-width:110px; padding:2px 6px; outline:none; transition:border-color .12s;}
  .fill:focus{border-bottom-color:var(--spine-2); background:#FCFDFE;}
  .fill::placeholder{color:#B8C0D2; font-weight:400; font-style:italic;}

  @media (max-width:560px){ .exlist .er{flex-direction:column; gap:2px;} }
  @media print{ .navwrap{display:none;} .panel{display:block!important;} .card{box-shadow:none;} .explain{display:block;} body{background:#fff;} }