:root{
  --paper:#EFEDE5;
  --paper-panel:#F7F6F1;
  --ink:#23241F;
  --ink-soft:#5B5C55;
  --rule:#D8D5C8;
  --blueprint:#28466B;
  --blueprint-soft:#B9C6D4;
  --copper:#A5561F;
  --green-ok:#3E5C3A;
  --code-bg:#1E2530;
  --code-ink:#DCE3EC;
  --code-accent:#8FB4D9;
  --radius:3px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h5{
  font-family:'Newsreader', serif;
  font-weight:600;
  color:var(--ink);
  line-height:1.15;
}
code, .mono{
  font-family:'IBM Plex Mono', monospace;
}
a{color:var(--blueprint);}

.shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
nav.sidebar{
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
  overflow-y:auto;
  padding:28px 20px 40px 28px;
  border-right:1px solid var(--rule);
  background:var(--paper-panel);
}
nav.sidebar .brand{
  font-family:'Newsreader', serif;
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:2px;
}
nav.sidebar .brand a{
  color:var(--ink);
  text-decoration:none;
}
nav.sidebar .brand-sub{
  font-size:0.78rem;
  color:var(--ink-soft);
  margin-bottom:18px;
}
nav.sidebar ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:navcount;
}
nav.sidebar li{
  counter-increment:navcount;
  margin-bottom:2px;
}
nav.sidebar ol.topics a::before{
  content:counter(navcount, decimal-leading-zero);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--blueprint-soft);
  padding-top:1px;
}
nav.sidebar a{
  display:flex;
  gap:10px;
  text-decoration:none;
  color:var(--ink-soft);
  font-size:0.87rem;
  padding:6px 8px;
  border-radius:var(--radius);
}
nav.sidebar a:hover,
nav.sidebar a.here{background:var(--paper); color:var(--ink);}
nav.sidebar .nb-jump{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-size:0.78rem;
  color:var(--ink-soft);
  line-height:1.45;
}
nav.sidebar .nb-jump a{display:inline; padding:0; gap:0;}

main{padding:0; max-width:920px;}
.content-inner{padding:48px 56px 120px 56px;}

header.hero{
  padding:56px 56px 36px 56px;
  border-bottom:1px solid var(--rule);
}
header.hero .eyebrow{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--copper);
  margin-bottom:14px;
}
header.hero h1{
  font-size:2.4rem;
  max-width:18ch;
  margin:0 0 14px 0;
}
header.hero p.lede{
  max-width:62ch;
  color:var(--ink-soft);
  font-size:1.02rem;
  margin:0 0 32px 0;
}

.graphviz{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:0;
  padding:22px 0 4px 0;
}
.gnode{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  background:var(--paper);
  border:1px solid var(--blueprint);
  color:var(--blueprint);
  padding:7px 11px;
  border-radius:20px;
  white-space:nowrap;
  text-decoration:none;
}
.gnode.hard{border-color:var(--copper); color:var(--copper);}
.garrow{
  color:var(--blueprint-soft);
  font-size:1.1rem;
  padding:0 6px;
}

section.topic{
  padding-bottom:56px;
  margin-bottom:56px;
  border-bottom:1px solid var(--rule);
  scroll-margin-top:24px;
}
section.topic:last-child{border-bottom:none;}
.topic-kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  color:var(--blueprint);
  margin-bottom:6px;
}
section.topic h2,
main h1.page-h{
  font-size:1.8rem;
  margin:0 0 6px 0;
}
.topic-sub{
  color:var(--ink-soft);
  font-size:0.95rem;
  margin-bottom:26px;
  max-width:64ch;
}

.subblock{margin-bottom:34px;}
.subblock h3{
  font-size:1.08rem;
  font-weight:600;
  margin:0 0 8px 0;
  color:var(--ink);
  font-family:'Newsreader', serif;
}
.subblock p{
  max-width:70ch;
  margin:0 0 10px 0;
}

.callout{
  background:var(--paper-panel);
  border-left:3px solid var(--blueprint);
  padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:0 0 22px 0;
}
.callout.mistake{border-left-color:var(--copper);}
.callout .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--ink-soft);
  margin-bottom:6px;
  display:block;
}
.callout ul{margin:0; padding-left:18px;}
.callout li{margin-bottom:4px;}

pre{
  background:var(--code-bg);
  color:var(--code-ink);
  padding:16px 18px;
  border-radius:var(--radius);
  overflow-x:auto;
  font-size:0.84rem;
  line-height:1.55;
  margin:0 0 22px 0;
  font-family:'IBM Plex Mono', monospace;
}
pre .cm{ color:#7C8A9C; }

table.ladder,
table.nb{
  width:100%;
  border-collapse:collapse;
  margin-bottom:8px;
  font-size:0.9rem;
}
table.ladder th,
table.nb th{
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--ink-soft);
  padding:8px 10px;
  border-bottom:1px solid var(--rule);
}
table.ladder td,
table.nb td{
  padding:9px 10px;
  border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  padding:2px 7px;
  border-radius:10px;
  display:inline-block;
  white-space:nowrap;
}
.tag.found{background:#E4E9DE; color:var(--green-ok);}
.tag.core{background:var(--blueprint-soft); color:var(--blueprint);}
.tag.hard{background:#EAD9CB; color:var(--copper);}

footer.pagefoot{
  padding:0 56px 80px 56px;
  color:var(--ink-soft);
  font-size:0.85rem;
  max-width:70ch;
}

.complexity{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 18px 0;
}
.complexity .badge{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  background:var(--code-bg);
  color:var(--code-accent);
  padding:6px 12px;
  border-radius:var(--radius);
}
.complexity .badge b{ color:#fff; }
.why{
  background:#EFE7D8;
  border-left:3px solid var(--copper);
  padding:14px 18px;
  border-radius:0 var(--radius) var(--radius) 0;
  margin:0 0 22px 0;
  max-width:70ch;
}
.why .label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--copper);
  margin-bottom:6px;
  display:block;
}
table.dryrun{
  width:100%;
  border-collapse:collapse;
  margin:0 0 10px 0;
  font-size:0.8rem;
}
table.dryrun caption,
.dryrun-caption{
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  color:var(--ink-soft);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:0.03em;
}
table.dryrun th{
  text-align:left;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  background:var(--paper-panel);
  padding:7px 9px;
  border:1px solid var(--rule);
}
table.dryrun td{
  font-family:'IBM Plex Mono', monospace;
  padding:7px 9px;
  border:1px solid var(--rule);
  vertical-align:top;
}
.ex-figure{
  font-family:'IBM Plex Mono', monospace;
  background:var(--paper-panel);
  border:1px solid var(--rule);
  padding:14px 18px;
  border-radius:var(--radius);
  margin:0 0 18px 0;
  font-size:0.85rem;
  white-space:pre;
  overflow-x:auto;
}
h4.algo-name{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.8rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--blueprint);
  margin:26px 0 8px 0;
  font-weight:600;
  padding-top:22px;
  border-top:1px dashed var(--rule);
  scroll-margin-top:16px;
}
.subblock > h4.algo-name:first-child{ border-top:none; padding-top:0; margin-top:0; }

h5.ex-kicker{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.78rem;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--copper);
  margin:20px 0 8px 0;
  font-weight:600;
}
.versions{
  display:grid;
  gap:8px;
  margin:0 0 18px 0;
}
.ver-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--blueprint);
  margin:0 0 6px 0;
}
.pager{
  font-size:0.88rem;
  margin:0 0 22px 0;
}
.pager a{margin-right:4px;}
.how-grid{
  display:grid;
  gap:12px;
  margin:0 0 28px 0;
}
.how-grid div{
  background:var(--paper-panel);
  border:1px solid var(--rule);
  padding:12px 14px;
  border-radius:var(--radius);
}
.how-grid strong{display:block; margin-bottom:4px;}
:target{
  outline:2px solid var(--blueprint-soft);
  outline-offset:6px;
}

@media (min-width: 1100px){
  .versions{grid-template-columns:1fr 1fr;}
  .versions pre{min-height:100%;}
}
@media (max-width: 860px){
  .shell{grid-template-columns:1fr;}
  nav.sidebar{position:relative; height:auto; border-right:none; border-bottom:1px solid var(--rule);}
  header.hero, .content-inner, footer.pagefoot{padding-left:24px; padding-right:24px;}
  .versions{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}