/* ============ TOKENS ============ */
:root{
  --paper:#EDEFE9;
  --surface:#F8F9F5;
  --surface-2:#FFFFFF;
  --ink:#1B2621;
  --ink-soft:#4A5850;
  --line:#C9CFC1;
  --line-soft:#DCE0D5;
  --blue:#2E5F6E;
  --blue-soft:#E4EEF0;
  --brass:#8A6215;
  --brass-soft:#F3E9D2;
  --rust:#8C3B2E;
  --rust-soft:#F2E1DC;
  --shadow: 0 1px 2px rgba(27,38,33,.06), 0 8px 24px -12px rgba(27,38,33,.18);
  --radius: 3px;
  --sidebar-w: 300px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#171D18;
    --surface:#1D241E;
    --surface-2:#212922;
    --ink:#E9ECE4;
    --ink-soft:#AEB8AA;
    --line:#333D33;
    --line-soft:#2A332A;
    --blue:#7FB2C2;
    --blue-soft:#20343A;
    --brass:#D9A94A;
    --brass-soft:#3A3020;
    --rust:#D18E7C;
    --rust-soft:#3A2622;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --paper:#171D18;
  --surface:#1D241E;
  --surface-2:#212922;
  --ink:#E9ECE4;
  --ink-soft:#AEB8AA;
  --line:#333D33;
  --line-soft:#2A332A;
  --blue:#7FB2C2;
  --blue-soft:#20343A;
  --brass:#D9A94A;
  --brass-soft:#3A3020;
  --rust:#D18E7C;
  --rust-soft:#3A2622;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Literata', Georgia, 'Times New Roman', serif;
  font-size:16.5px; line-height:1.62;
}
::selection{background:var(--brass-soft); color:var(--ink);}
h1,h2,h3,h4{
  font-family:'Big Shoulders Display', 'Arial Narrow', sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.02em;
  text-wrap:balance; color:var(--ink); margin:0;
}
.mono{font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace;}
a{color:var(--blue);}
p{margin:0 0 1em; max-width:66ch;}
p:last-child{margin-bottom:0;}
img{max-width:100%;}
table{border-collapse:collapse; width:100%;}

/* ============ LAYOUT SHELL ============ */
.shell{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w); flex:none; position:sticky; top:0; height:100vh;
  overflow-y:auto; background:var(--surface); border-right:1px solid var(--line);
  padding:22px 0 40px;
}
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{background:var(--line); border-radius:4px;}

.brand{padding:0 22px 16px; border-bottom:1px solid var(--line); margin-bottom:14px;}
.brand .kicker{font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.14em; color:var(--ink-soft); text-transform:uppercase;}
.brand h1{font-size:26px; line-height:1.05; margin-top:4px;}
.brand .sub{font-size:12.5px; color:var(--ink-soft); margin-top:6px; font-family:'Literata';}

.progress-wrap{padding:0 22px 18px; border-bottom:1px solid var(--line); margin-bottom:8px;}
.progress-label{display:flex; justify-content:space-between; font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-soft); letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px;}
.progress-track{height:6px; background:var(--line-soft); border-radius:3px; overflow:hidden;}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--blue), var(--brass), var(--rust)); width:0%; transition:width .3s ease;}

nav.toc{padding:6px 12px;}
.toc-group{margin:14px 0 4px;}
details.toc-group{border:none;}
.toc-group-label{
  display:flex; align-items:center; gap:8px;
  font-family:'IBM Plex Mono'; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); padding:6px 10px; cursor:pointer; list-style:none; user-select:none;
}
.toc-group-label::-webkit-details-marker{display:none;}
.toc-group-label::before{
  content:""; width:6px; height:6px; flex:none; margin-right:2px;
  border-right:1.5px solid var(--ink-soft); border-bottom:1.5px solid var(--ink-soft);
  transform:rotate(-45deg); transition:transform .15s ease; margin-top:-2px;
}
details.toc-group[open] > .toc-group-label::before{transform:rotate(45deg); margin-top:0;}
.toc-group-label .dot{width:8px; height:8px; border-radius:50%; flex:none;}
.dot-blue{background:var(--blue);} .dot-brass{background:var(--brass);} .dot-rust{background:var(--rust);}

.toc a{
  display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink);
  font-size:13.5px; padding:6px 10px 6px 26px; border-radius:var(--radius);
}
.toc a:hover{background:var(--surface-2);}
.toc a.active{background:var(--surface-2); box-shadow:inset 3px 0 0 var(--blue);}
.toc a .num{font-family:'IBM Plex Mono'; font-size:11px; color:var(--ink-soft); flex:none; width:24px;}
.toc a.done{color:var(--ink-soft); text-decoration:line-through; text-decoration-color:var(--line);}
.toc a.sub{
  padding-left:38px; font-size:12.5px; color:var(--ink-soft);
  margin-left:14px; border-left:1px solid var(--line-soft);
}
.toc a.sub .num{color:var(--brass); width:16px;}
.toc a.sub:hover{color:var(--ink);}
.toc .chk{
  width:14px; height:14px; border:1.5px solid var(--line); border-radius:3px; flex:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; background:var(--surface-2);
}
.toc .chk.on{background:var(--blue); border-color:var(--blue);}
.toc .chk.on::after{content:"✓"; color:var(--surface); font-size:10px; line-height:1;}

.toc-controls{display:flex; gap:14px; padding:2px 22px 12px; margin-bottom:4px; border-bottom:1px solid var(--line);}
.toc-controls button{
  background:none; border:none; padding:0; cursor:pointer;
  font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--blue);
}
.toc-controls button:hover{text-decoration:underline;}
.toc-find-wrap{padding:0 22px 12px;}
.toc-find{
  width:100%; padding:7px 10px; font-family:'IBM Plex Mono'; font-size:12px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); color:var(--ink);
}
.toc-find::placeholder{color:var(--ink-soft);}
.toc a[hidden], details.toc-group[hidden]{display:none !important;}

/* ============ MAIN ============ */
main{flex:1; min-width:0; padding:56px 64px 120px; max-width:920px;}
@media (max-width:1080px){ main{padding:40px 28px 100px;} }
@media (max-width:860px){
  .shell{flex-direction:column;}
  .sidebar{position:relative; width:100%; height:auto; max-height:none;}
  nav.toc{max-height:46vh; overflow-y:auto; border-bottom:1px solid var(--line); padding-bottom:14px;}
}

.hero{margin-bottom:56px; padding-bottom:36px; border-bottom:2px solid var(--ink);}
.hero .kicker{font-family:'IBM Plex Mono'; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:10px;}
.hero h1{font-size:clamp(38px,5.2vw,60px); line-height:.98;}
.hero .dek{font-family:'Literata'; font-size:18px; color:var(--ink-soft); max-width:60ch; margin-top:18px; font-style:italic;}
.hero-meta{display:flex; gap:28px; margin-top:26px; flex-wrap:wrap;}
.hero-meta div{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.08em;}
.hero-meta strong{display:block; font-family:'Literata'; font-size:15px; font-style:normal; text-transform:none; letter-spacing:0; color:var(--ink); margin-top:3px;}

.level-banner{
  display:flex; align-items:baseline; gap:16px; margin:64px 0 30px; padding:14px 0;
  border-top:2px solid var(--ink); border-bottom:1px solid var(--line);
}
.level-banner .lvl-tag{font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:.1em; padding:3px 9px; border-radius:20px; text-transform:uppercase;}
.level-banner h2{font-size:15px; letter-spacing:.08em; color:var(--ink-soft); font-weight:600;}
.level-banner .lvl-title{font-family:'Big Shoulders Display'; font-size:34px; text-transform:uppercase;}
.tag-blue{background:var(--blue-soft); color:var(--blue);}
.tag-brass{background:var(--brass-soft); color:var(--brass);}
.tag-rust{background:var(--rust-soft); color:var(--rust);}
.level-intro{font-size:15px; color:var(--ink-soft); max-width:70ch; margin:-14px 0 40px;}

.mod{margin-bottom:54px; scroll-margin-top:24px;}
.mod-head{display:flex; align-items:flex-start; gap:16px; margin-bottom:16px;}
.mod-code{
  font-family:'IBM Plex Mono'; font-size:12px; color:var(--surface); background:var(--ink);
  padding:4px 8px; border-radius:3px; flex:none; margin-top:6px; letter-spacing:.04em;
}
.mod-head h3{font-size:clamp(22px,3vw,30px); line-height:1.08;}
.mod-dek{font-size:14.5px; color:var(--ink-soft); font-style:italic; margin:-8px 0 18px 0; max-width:64ch;}
.mod-body > * + *{margin-top:1em;}
.mod-body h4{
  font-family:'IBM Plex Mono'; text-transform:uppercase; letter-spacing:.08em; font-size:12.5px;
  color:var(--blue); font-weight:600; margin-top:1.8em; margin-bottom:.6em;
}
.mod-body ul, .mod-body ol{padding-left:1.3em; margin:0 0 1em;}
.mod-body li{margin-bottom:.45em; max-width:64ch;}
.mod-body li:last-child{margin-bottom:0;}
.mod-body strong{color:var(--ink); font-weight:600;}

.callout{
  border-left:3px solid var(--brass); background:var(--brass-soft); padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0; font-size:14.5px;
}
.callout .lbl{font-family:'IBM Plex Mono'; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; color:var(--brass); display:block; margin-bottom:5px;}
.callout.warn{border-color:var(--rust); background:var(--rust-soft);}
.callout.warn .lbl{color:var(--rust);}
.callout.info{border-color:var(--blue); background:var(--blue-soft);}
.callout.info .lbl{color:var(--blue);}

.data-table{font-size:13.5px; margin:.5em 0 1em;}
.data-table th, .data-table td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top;}
.data-table th{background:var(--surface-2); font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600;}
.data-table td{background:var(--paper);}
.table-scroll{overflow-x:auto; border:1px solid var(--line-soft); border-radius:var(--radius);}
.table-scroll .data-table{margin:0; border:none;}
.table-scroll .data-table th, .table-scroll .data-table td{border:none; border-bottom:1px solid var(--line-soft); border-right:1px solid var(--line-soft);}

.sheet{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px 22px; margin:1.2em 0; box-shadow:var(--shadow);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 28px;
  background-position: 0 -4px;
}
.sheet-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; border-bottom:1px dashed var(--line); padding-bottom:8px;}
.sheet-head .t{font-family:'IBM Plex Mono'; font-weight:600; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink);}
.sheet-head .n{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-soft);}
.sheet-body{font-family:'IBM Plex Mono'; font-size:13px; line-height:1.7;}
.sheet-body p{max-width:none; margin-bottom:.8em;}
.sheet-body .grp{font-weight:600; color:var(--blue); display:block; margin-top:.9em;}
.sheet-body .grp:first-child{margin-top:0;}

.checklist{list-style:none; padding:0; margin:0;}
.checklist li{
  display:flex; gap:10px; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--line-soft);
  max-width:none;
}
.checklist li:last-child{border-bottom:none;}
.checklist .box{width:15px; height:15px; border:1.5px solid var(--ink-soft); border-radius:3px; flex:none; margin-top:3px;}

.pull-quote{font-family:'Literata'; font-style:italic; font-size:19px; line-height:1.5; color:var(--ink); border-left:2px solid var(--ink); padding-left:20px; max-width:56ch;}
.pull-quote cite{display:block; font-family:'IBM Plex Mono'; font-style:normal; font-size:11px; color:var(--ink-soft); margin-top:8px; text-transform:uppercase; letter-spacing:.06em;}

.two-col{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media (max-width:700px){.two-col{grid-template-columns:1fr;}}

.badge-row{display:flex; gap:8px; flex-wrap:wrap; margin:.6em 0;}
.badge{font-family:'IBM Plex Mono'; font-size:11px; padding:3px 9px; border-radius:20px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;}

footer.page-foot{margin-top:80px; padding-top:24px; border-top:2px solid var(--ink); font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}

/* ===== interactive tools ===== */
.tool-row{display:flex; gap:8px; flex-wrap:wrap; margin:.9em 0 1.3em; align-items:center;}
.tool-btn{
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  padding:8px 13px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:var(--radius); color:var(--ink); cursor:pointer;
}
.tool-btn:hover{border-color:var(--blue); color:var(--blue);}
.tool-note{font-family:'IBM Plex Mono'; font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.07em;}

/* ===== drill deck ===== */
.drill-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:12px; margin:.8em 0 1.6em;}
.drill-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:15px 17px; text-align:left; color:var(--ink); cursor:pointer; width:100%;
  display:flex; flex-direction:column; gap:9px; font-family:inherit;
}
.drill-card:hover{border-color:var(--blue);}
.drill-card .q{font-family:'Literata'; font-size:15px; font-weight:600; line-height:1.36;}
.drill-card .hint{font-family:'IBM Plex Mono'; font-size:9.5px; text-transform:uppercase; letter-spacing:.11em; color:var(--ink-soft);}
.drill-card.open .hint{color:var(--blue);}
.drill-card .back{display:none; border-top:1px dashed var(--line); padding-top:11px;}
.drill-card.open .back{display:block;}
.drill-card .back p{margin:0 0 .8em; max-width:none; font-size:14px; line-height:1.55;}
.drill-card .back p:last-child{margin-bottom:0;}
.drill-card .lbl2{
  font-family:'IBM Plex Mono'; font-size:9.5px; text-transform:uppercase; letter-spacing:.09em;
  color:var(--brass); display:block; margin-bottom:3px;
}

/* ===== cheat sheet ===== */
.cheat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:12px; margin:1em 0;}
.cheat-card{border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; background:var(--surface-2); break-inside:avoid;}
.cheat-card h5{
  font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--blue); margin:0 0 9px; font-weight:600;
}
.cheat-card ul{margin:0; padding-left:1.05em; font-size:13.5px; line-height:1.52;}
.cheat-card li{margin-bottom:.38em; max-width:none;}
.cheat-card li:last-child{margin-bottom:0;}

/* ===== glossary ===== */
.gloss-search{
  width:100%; max-width:430px; padding:10px 13px; font-family:'Literata'; font-size:15px;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2); color:var(--ink);
}
.gloss-group-label{
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.1em;
  color:var(--blue); font-weight:600; margin:1.9em 0 .5em; padding-bottom:5px; border-bottom:1px solid var(--line);
}
.gloss-item{
  padding:9px 0; border-bottom:1px solid var(--line-soft);
  display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:baseline;
}
@media (max-width:640px){.gloss-item{grid-template-columns:1fr; gap:3px;}}
.gloss-item .t{font-weight:600; font-size:14.5px;}
.gloss-item .d{font-size:14.5px; color:var(--ink-soft); line-height:1.5;}
.gloss-empty{font-style:italic; color:var(--ink-soft); padding:18px 0;}

/* ===== live tool widgets ===== */
.tool-widget{
  margin:1.3em 0 0; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface-2); padding:16px 18px 18px; box-shadow:var(--shadow);
}
.tool-widget-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; padding-bottom:8px; border-bottom:1px dashed var(--line); gap:10px; flex-wrap:wrap;}
.tool-widget-head .t{font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--blue); font-weight:600;}
.tool-widget-actions{display:flex; gap:8px;}
.tool-btn2{
  font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:5px 10px; cursor:pointer; color:var(--ink-soft);
}
.tool-btn2:hover{color:var(--blue); border-color:var(--blue);}
.tool-line{display:flex; gap:8px; align-items:center; margin-bottom:7px; flex-wrap:wrap;}
.tool-line .tool-label-input{flex:2 1 160px;}
.tool-line .tool-num-input{flex:1 1 90px; text-align:right; font-variant-numeric:tabular-nums;}
.tool-input, .tool-select, textarea.tool-input{
  font-family:'Literata'; font-size:13.5px; padding:7px 9px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--paper); color:var(--ink); width:100%;
}
.tool-input:focus, .tool-select:focus{outline:2px solid var(--blue); outline-offset:1px;}
.tool-remove{flex:none; background:none; border:none; color:var(--rust); cursor:pointer; font-size:17px; line-height:1; padding:2px 5px;}
.tool-remove:hover{color:var(--ink);}
.tool-add{
  font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  padding:7px 10px; cursor:pointer; color:var(--blue); width:100%; margin-top:2px;
}
.tool-add:hover{border-style:solid;}
.tool-output{
  margin-top:14px; padding:14px 16px; background:var(--paper); border-radius:var(--radius);
  border:1px solid var(--line-soft); font-family:'IBM Plex Mono'; font-size:13px; line-height:1.75;
}
.tool-output .big{font-size:22px; font-weight:700; font-family:'Big Shoulders Display'; letter-spacing:.02em; display:block; margin:2px 0;}
.tool-output .warn-text{color:var(--rust);}
.tool-output .good-text{color:var(--blue);}
.tool-note{font-size:11px; color:var(--ink-soft); margin-top:8px; line-height:1.5;}
.rg-row{display:grid; grid-template-columns:1fr 150px 90px; gap:8px; align-items:center; margin-bottom:7px;}
@media (max-width:640px){.rg-row{grid-template-columns:1fr; }}
.rg-row .rg-field-label{font-size:13px; font-weight:600;}
.rg-toggle{display:flex; gap:3px;}
.rg-btn{flex:1; padding:6px 0; text-align:center; font-family:'IBM Plex Mono'; font-size:10.5px; border:1px solid var(--line); background:var(--paper); cursor:pointer; border-radius:var(--radius); color:var(--ink-soft);}
.rg-btn.sel-r{background:var(--rust-soft); border-color:var(--rust); color:var(--rust); font-weight:600;}
.rg-btn.sel-a{background:var(--brass-soft); border-color:var(--brass); color:var(--brass); font-weight:600;}
.rg-btn.sel-g{background:var(--blue-soft); border-color:var(--blue); color:var(--blue); font-weight:600;}
.tool-widget .data-table{font-size:12.5px;}
.tool-widget .table-scroll{margin-top:10px;}
.tool-yn{display:flex; gap:3px;}
.yn-btn{flex:1; padding:6px 0; text-align:center; font-family:'IBM Plex Mono'; font-size:10.5px; border:1px solid var(--line); background:var(--paper); cursor:pointer; border-radius:var(--radius); color:var(--ink-soft);}
.yn-btn.sel-y{background:var(--blue-soft); border-color:var(--blue); color:var(--blue); font-weight:600;}
.yn-btn.sel-n{background:var(--rust-soft); border-color:var(--rust); color:var(--rust); font-weight:600;}
.yn-btn.sel-u{background:var(--brass-soft); border-color:var(--brass); color:var(--brass); font-weight:600;}
@media print{ .tool-widget{display:none !important;} }

/* ===== print ===== */
@media print{
  .sidebar, .skip, .tool-row, .duty-list a .jump{display:none !important;}
  body{background:#fff; color:#000;}
  main{padding:0; max-width:none;}
  body.print-cheat main > *:not(#cheatsheet){display:none !important;}
  body.print-cheat #cheatsheet{margin:0;}
  body.print-cheat .cheat-grid{grid-template-columns:repeat(3,1fr); gap:7px;}
  body.print-cheat .cheat-card{border-color:#999; padding:9px 11px;}
  body.print-cheat .cheat-card ul{font-size:9px; line-height:1.4;}
  body.print-cheat .cheat-card h5{font-size:8.5px;}
  body.print-cheat .mod-head h3{font-size:20px;}
  @page{margin:12mm;}
}

.duty-list{list-style:none; padding:0; margin:1em 0;}
.duty-list li{border-bottom:1px solid var(--line-soft);}
.duty-list li:first-child{border-top:1px solid var(--line-soft);}
.duty-list a{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:12px 6px; text-decoration:none; color:var(--ink);
}
.duty-list a:hover{background:var(--surface-2);}
.duty-list a .txt{max-width:56ch;}
.duty-list a .jump{
  flex:none; font-family:'IBM Plex Mono'; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--blue); white-space:nowrap;
}
.duty-list a.plain .jump{color:var(--ink-soft);}

.tmpl-index{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; margin:1em 0;}
.tmpl-index a{
  display:block; padding:12px 14px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius);
  text-decoration:none; color:var(--ink); font-size:13.5px;
}
.tmpl-index a:hover{border-color:var(--blue);}
.tmpl-index a .mono{display:block; font-size:10.5px; color:var(--ink-soft); margin-bottom:3px;}

.skip{position:absolute; left:-9999px;}
.skip:focus{left:12px; top:12px; z-index:100; background:var(--surface-2); padding:8px 12px; border-radius:4px;}
:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

/* ===== per-page prev/next ===== */
.pagenav{
  display:flex; justify-content:space-between; align-items:stretch; gap:14px;
  margin-top:64px; padding-top:22px; border-top:2px solid var(--ink);
}
.pagenav a{
  flex:1; display:flex; flex-direction:column; gap:4px; text-decoration:none; color:var(--ink);
  padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface-2);
  max-width:46%;
}
.pagenav a:hover{border-color:var(--blue);}
.pagenav a::before{
  font-family:'IBM Plex Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-soft);
}
.pagenav-prev{align-items:flex-start; text-align:left;}
.pagenav-prev::before{content:"\2190 previous";}
.pagenav-next{align-items:flex-end; text-align:right; margin-left:auto;}
.pagenav-next::before{content:"next \2192";}
.pagenav a span{font-family:'Big Shoulders Display'; font-weight:700; text-transform:uppercase; font-size:15px; letter-spacing:.01em; color:var(--ink);}
.pagenav > span{flex:1;}
@media (max-width:640px){
  .pagenav a{max-width:100%; font-size:13px;}
  .pagenav-prev::before, .pagenav-next::before{font-size:9px;}
}
@media print{ .pagenav{display:none !important;} }