:root{
  --core:#010102; --mid:#020304; --surface:#050607; --raised:#090B0D;
  --line:rgba(96,78,50,.45); --line-soft:rgba(122,96,60,.24);
  --text:#EBF2F7; --muted:#94887C; --dim:#6E665D;
  --gold:#CFA257; --gold-lit:#F0CD8E; --alert:#F3D7A4;
  --ink-on-gold:#04110D;
  --r:18px; --r-sm:12px; --pill:999px;
  --shadow:0 24px 64px rgba(0,0,0,.72);
  --display:Bahnschrift,"DIN Alternate","Segoe UI",system-ui,sans-serif;
  --body:"Segoe UI",Bahnschrift,system-ui,-apple-system,Roboto,sans-serif;
  --mono:Consolas,"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{background:var(--core)}
body{
  margin:0;color:var(--text);font-family:var(--body);font-size:17px;line-height:1.75;
  background:
    radial-gradient(1100px 520px at 50% -220px,rgba(207,162,87,.10),transparent 70%),
    linear-gradient(180deg,var(--mid) 0%,var(--core) 60%);
  background-attachment:fixed;-webkit-text-size-adjust:100%;
}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
::selection{background:rgba(207,162,87,.28)}
/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(2,3,4,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft)}
.topin{max-width:1140px;margin:0 auto;padding:13px 24px;display:flex;align-items:center;gap:18px}
.logo{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:16px;
  line-height:1.15;white-space:nowrap;padding:0;text-align:left}
.logo span{display:block;font-family:var(--mono);font-weight:400;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.tabs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.tab{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 15px;border-radius:var(--pill);color:var(--muted);
  border:1px solid transparent;transition:color .15s,border-color .15s,background .15s}
.tab:hover{color:var(--text);border-color:var(--line-soft)}
.tab[aria-selected="true"]{background:linear-gradient(135deg,var(--gold),var(--gold-lit));
  color:var(--ink-on-gold);border-color:transparent}
.find{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:9px 14px;
  border-radius:var(--pill);border:1px solid var(--line-soft);background:var(--surface);
  color:var(--text);width:172px}
.find::placeholder{color:var(--dim);text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}
.find:focus{border-color:var(--line);outline:none}
/* ---------- layout ---------- */
main{max-width:1140px;margin:0 auto;padding:0 24px 110px}
.pane[hidden]{display:none}
h1,h2,h3,.ttl{font-family:var(--display);letter-spacing:-.02em;text-wrap:balance;font-weight:700}
.pagehead{padding:46px 0 26px;border-bottom:1px solid var(--line-soft);margin-bottom:30px}
.pagehead h1{font-size:clamp(28px,4.2vw,40px);margin:0;line-height:1.06}
.eyebrow{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  border:1px solid var(--line-soft);border-radius:var(--pill);padding:5px 12px;margin-bottom:14px}
.lede{color:var(--muted);max-width:62ch;margin:.75em 0 0;font-size:16px;line-height:1.7}
/* ---------- chapter grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:13px}
.card{display:flex;flex-direction:column;gap:9px;text-align:left;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:var(--r);padding:20px;
  transition:border-color .18s,transform .18s,box-shadow .18s}
.card:hover{border-color:var(--line);transform:translateY(-2px);box-shadow:var(--shadow)}
.card .num{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--gold);
  text-transform:uppercase;font-variant-numeric:tabular-nums}
.card .ttl{font-size:17px;line-height:1.22}
.card .stats{display:flex;gap:18px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line-soft)}
.card .stat{display:flex;flex-direction:column;gap:1px}
.card .stat b{font-family:var(--mono);font-size:19px;font-weight:700;line-height:1;
  color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.card .stat i{font-family:var(--mono);font-style:normal;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);white-space:nowrap}
.card:hover .stat b{color:var(--gold-lit)}
.card.done{border-color:var(--line)}
.card.done .num::after{content:" · read";color:var(--dim)}
/* ---------- reading view ---------- */
.chnav{display:flex;align-items:center;gap:9px;padding:16px 0;
  border-bottom:1px solid var(--line-soft);margin-bottom:10px;flex-wrap:wrap}
.btn{font-family:var(--mono);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--pill);padding:10px 16px;color:var(--muted);transition:.15s}
.btn:hover:not(:disabled){color:var(--text);border-color:var(--line)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.pri{background:linear-gradient(135deg,var(--gold),var(--gold-lit));
  color:var(--ink-on-gold);border-color:transparent}
.btn.pri:hover:not(:disabled){filter:brightness(1.07);color:var(--ink-on-gold)}
.spacer{margin-left:auto}
#chpos{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim)}
article{padding:14px 0 40px}
article>h1{font-size:clamp(27px,3.9vw,38px);margin:.15em 0 .9em;line-height:1.08}
article h2{font-size:21px;margin:2.15em 0 .55em;padding-top:.75em;border-top:1px solid var(--line-soft)}
article h3{font-size:16.5px;margin:1.75em 0 .4em;color:var(--gold-lit)}
article p,article ul,article ol{max-width:68ch}
article p{margin:0 0 1.1em;color:#DCE4EA}
article ul,article ol{padding-left:1.25em;margin:0 0 1.15em}
article li{margin:.36em 0;color:#DCE4EA}
article strong{color:var(--text);font-weight:700}
a{color:var(--gold);text-decoration-color:var(--line);text-underline-offset:3px}
a:hover{color:var(--gold-lit)}
blockquote{margin:1.5em 0;padding:1em 1.2em;background:var(--surface);
  border:1px solid var(--line-soft);border-left:2px solid var(--gold);
  border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--muted);font-size:15.5px;max-width:68ch}
blockquote p:last-child{margin:0}
hr{border:0;height:1px;background:var(--line-soft);margin:2.4em 0}
code{font-family:var(--mono);font-size:.85em;background:var(--raised);color:var(--alert);
  padding:.15em .42em;border-radius:5px;border:1px solid var(--line-soft)}
/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line-soft);border-radius:var(--r-sm);
  margin:0 0 1.4em;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);font-weight:700;white-space:nowrap;background:var(--raised)}
td{color:#DCE4EA}
tr:last-child td{border-bottom:0}
/* ---------- process maps ---------- */
.pmap{background:var(--surface);border:1px solid var(--line-soft);border-left:2px solid var(--gold);
  border-radius:var(--r-sm);padding:18px;margin:1.6em 0;line-height:2.6}
.pnode{display:inline-block;font-family:var(--mono);font-size:11.5px;font-weight:700;
  letter-spacing:.04em;background:var(--raised);border:1px solid var(--line-soft);
  border-radius:var(--pill);padding:6px 13px;color:var(--text)}
.parrow{color:var(--gold);margin:0 7px;font-weight:700}
.ploop{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim);
  margin:11px 0 0;line-height:1.6}
/* ---------- visual step blocks ---------- */
.stepblock{position:relative;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:20px 22px 6px;margin:0 0 12px;max-width:none;
  transition:border-color .18s}
.stepblock:hover{border-color:var(--line)}
.stephead{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;
  margin-bottom:14px}
.stepn{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--pill);
  font-family:var(--mono);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--ink-on-gold);background:linear-gradient(135deg,var(--gold),var(--gold-lit));
  box-shadow:0 6px 18px rgba(207,162,87,.22)}
h3.steptitle{margin:0;font-size:19px;line-height:1.2;color:var(--text)}
h3.steptitle::before{display:none}
.stepbody{padding-left:60px}
.stepbody>:last-child{margin-bottom:14px}
.stepbody p,.stepbody ul,.stepbody ol{max-width:62ch}
@media (max-width:700px){
  .stephead{grid-template-columns:38px 1fr;gap:11px}
  .stepn{width:38px;height:38px;font-size:14px}
  h3.steptitle{font-size:17px}
  .stepbody{padding-left:0}
  .stepblock{padding:17px 17px 4px}
}
/* ---------- tip & warning callouts ---------- */
.tip,.warn{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;
  border-radius:var(--r-sm);padding:13px 16px;margin:1.1em 0;max-width:68ch;
  border:1px solid var(--line-soft)}
.tip{background:rgba(207,162,87,.055);border-left:2px solid var(--gold)}
.warn{background:rgba(243,215,164,.05);border-left:2px solid var(--alert)}
.tip .k,.warn .k{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;padding-top:4px;white-space:nowrap}
.tip .k{color:var(--gold)}
.warn .k{color:var(--alert)}
.tip p,.warn p{margin:0;font-size:15.5px;line-height:1.65;color:#DCE4EA;max-width:none}
/* ---------- danger zone ---------- */
.warnzone{background:linear-gradient(180deg,rgba(243,215,164,.055),transparent 60%);
  border:1px solid rgba(243,215,164,.22);border-radius:var(--r);
  padding:6px 22px 14px;margin:2.4em 0 1.4em}
h2.warnh{display:flex;align-items:center;gap:12px;border-top:0;color:var(--alert);
  margin:.9em 0 .7em;padding-top:0;font-size:20px}
.siren{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:var(--pill);
  background:var(--alert);color:var(--ink-on-gold);font-family:var(--mono);font-weight:700;
  font-size:15px;line-height:1}
.warnzone blockquote{border-left-color:var(--alert)}
.warnzone li strong,.warnzone p strong{color:var(--alert)}
/* ---------- checklists ---------- */
.task{list-style:none;margin-left:-1.25em}
.task label{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;cursor:pointer}
.task input{margin:.4em 0 0;accent-color:var(--gold);width:15px;height:15px}
.task input:checked+span{color:var(--dim);text-decoration:line-through}
/* ---------- vault ---------- */
.plist{display:flex;flex-direction:column;gap:9px}
details.pl{background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
details.pl[open]{border-color:var(--line)}
details.pl>summary{list-style:none;cursor:pointer;padding:16px 19px;display:flex;
  align-items:center;gap:13px}
details.pl>summary::-webkit-details-marker{display:none}
.pl .name{font-family:var(--display);font-weight:700;font-size:16px;letter-spacing:-.01em}
.pl .count{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl .chev{color:var(--gold);font-size:11px;transition:transform .18s}
details.pl[open] .chev{transform:rotate(90deg)}
.vids{border-top:1px solid var(--line-soft);margin:0;padding:8px 0;list-style:none;
  max-height:430px;overflow-y:auto}
.vids li{display:grid;grid-template-columns:34px 1fr;gap:9px;padding:7px 19px;
  font-size:14.5px;line-height:1.45}
.vids li:hover{background:var(--raised)}
.vids .i{font-family:var(--mono);font-size:10.5px;color:var(--dim);
  font-variant-numeric:tabular-nums;padding-top:3px}
.vids a{text-decoration:none;color:#DCE4EA}
.vids a:hover{color:var(--gold-lit)}
.vids .has{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--gold);
  text-transform:uppercase}
/* ---------- notes ---------- */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:24px}
.chip{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;background:var(--surface);border:1px solid var(--line-soft);
  border-radius:var(--pill);padding:8px 14px;color:var(--muted);transition:.15s}
.chip:hover{color:var(--text);border-color:var(--line)}
.chip[aria-pressed="true"]{background:linear-gradient(135deg,var(--gold),var(--gold-lit));
  color:var(--ink-on-gold);border-color:transparent}
.note{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:20px 22px;margin-bottom:12px}
.note:hover{border-color:var(--line)}
.note h3{margin:0 0 .6em;font-size:16.5px;color:var(--gold-lit)}
.note p,.note ul{margin:0 0 .7em;font-size:15.5px;max-width:none;color:#DCE4EA}
.note p:last-child,.note ul:last-child{margin:0}
.note strong{color:var(--text)}
/* ---------- search ---------- */
.hits{display:flex;flex-direction:column;gap:9px}
.hit{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm);
  padding:15px 18px;text-align:left;width:100%;display:block;text-decoration:none;transition:.15s}
.hit:hover{border-color:var(--line);transform:translateX(2px)}
.hit .where{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold)}
.hit .what{font-family:var(--display);font-weight:700;font-size:16px;margin:4px 0 5px;
  letter-spacing:-.01em;color:var(--text)}
.hit .snip{font-size:14px;color:var(--muted);line-height:1.55}
mark{background:rgba(207,162,87,.24);color:var(--alert);border-radius:3px;padding:0 2px}
.empty{color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:26px 0}
.foot{border-top:1px solid var(--line-soft);margin-top:52px;padding-top:22px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);line-height:2}
@media (max-width:760px){
  body{font-size:16.5px}
  .topin{padding:11px 16px;gap:11px}
  .tabs{order:3;width:100%;margin-left:0}
  .tab{flex:1;text-align:center;padding:9px 4px;font-size:10px;letter-spacing:.06em}
  .find{margin-left:auto;width:130px}
  main{padding:0 16px 80px}
  .pagehead{padding:32px 0 20px}
  .card{padding:17px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}