:root{
  --bg:#0a0e1a; --side:#0d1322; --side2:#111a2e; --line:#1e293b;
  --ink:#1f2733; --ink-soft:#5b6677; --paper:#ffffff; --paper2:#f7f9fc;
  --brand1:#6366f1; --brand2:#22d3ee; --accent:#6366f1;
  --tablestripe:#f4f7fb; --code:#eef2f7; --link:#4f46e5;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--ink); background:var(--paper2); line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.layout{display:flex; min-height:100vh}

/* Sidebar */
.side{
  width:288px; flex:0 0 288px; background:linear-gradient(180deg,var(--side),var(--side2));
  color:#c7d2e4; position:sticky; top:0; height:100vh; overflow-y:auto;
  padding:18px 0 40px; border-right:1px solid #0a1220;
}
.brand{
  display:flex; align-items:center; gap:10px; font-weight:700; color:#fff;
  text-decoration:none; padding:6px 20px 16px; font-size:15px; letter-spacing:.2px;
}
.brand-mark{
  display:inline-grid; place-items:center; width:26px; height:26px; border-radius:8px;
  background:linear-gradient(135deg,var(--brand1),var(--brand2)); color:#fff; font-weight:800; font-size:14px;
}
.phase{
  text-transform:uppercase; font-size:10.5px; letter-spacing:.13em; color:#6b7a93;
  padding:16px 20px 6px; font-weight:700;
}
.nav-link{
  display:flex; align-items:center; gap:9px; padding:7px 20px; color:#aeb9cc;
  text-decoration:none; font-size:13.5px; border-left:2px solid transparent;
}
.nav-link .num{ color:#5f6e88; font-variant-numeric:tabular-nums; font-size:12px; min-width:18px }
.nav-link:hover{ background:#0b1426; color:#e6edf7 }
.nav-link.active{
  background:#0b1730; color:#fff; border-left-color:var(--brand2);
}
.nav-link.active .num{ color:var(--brand2) }
.nav-link.skipped{ opacity:.55 }
.sk,.nav-link .sk{ margin-left:auto; font-size:9.5px; background:#33405a; color:#aab6cc;
  padding:1px 6px; border-radius:8px; text-transform:uppercase; letter-spacing:.05em }

/* Content */
.content{ flex:1 1 auto; display:flex; justify-content:center }
.content-inner{ width:100%; max-width:860px; padding:46px 56px 80px }
.meta-row{ margin:0 0 18px }
.meta-pill{
  display:inline-block; font-size:11px; background:#eef1f6; color:#55617a; border:1px solid #e2e7ef;
  padding:2px 9px; border-radius:20px; margin-right:6px; font-weight:600;
}
.meta-pill.status{ background:#eef2ff; color:#4338ca; border-color:#e0e5ff }
.meta-pill.status.skip,.meta-pill.status.skip{ background:#fff4e5; color:#a85a00; border-color:#ffe3bf }

h1{ font-size:30px; line-height:1.2; margin:.1em 0 .5em; letter-spacing:-.01em; font-weight:750 }
h2{ font-size:21px; margin:1.7em 0 .6em; padding-bottom:.3em; border-bottom:1px solid #eaeef4; font-weight:700 }
h3{ font-size:16.5px; margin:1.4em 0 .4em; font-weight:700; color:#283041 }
p{ margin:.7em 0 }
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
strong{ color:#161d29 }
ul,ol{ padding-left:1.35em; margin:.6em 0 }
li{ margin:.28em 0 }
hr{ border:0; border-top:1px solid #e8edf3; margin:2em 0 }

code{ background:var(--code); padding:.12em .42em; border-radius:5px; font-size:.86em;
  font-family:"SF Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:#334155 }
pre{ background:#0d1526; color:#dbe5f3; padding:16px 18px; border-radius:10px; overflow:auto; font-size:13px }
pre code{ background:none; padding:0; color:inherit }

blockquote{
  margin:1em 0; padding:.5em 1em; border-left:3px solid var(--brand1);
  background:#f3f5fb; color:#3b4660; border-radius:0 8px 8px 0;
}

/* Tables */
table{ border-collapse:collapse; width:100%; margin:1.1em 0; font-size:13.5px; }
th,td{ border:1px solid #e6ebf2; padding:8px 11px; text-align:left; vertical-align:top }
th{ background:#f1f4f9; font-weight:700; color:#2b3445 }
tbody tr:nth-child(even){ background:var(--tablestripe) }

.overview td a{ font-weight:600 }
.tag-produced{ color:#0a7d3c; font-weight:700; font-size:12px }
.tag-skipped{ color:#a85a00; font-weight:700; font-size:12px }
.skip-note,.skip-note code{ }
.skip-note{ background:#fff7ed; border:1px solid #ffe1b8; padding:14px 16px; border-radius:10px; color:#7a4a09 }

.docfoot{ margin-top:54px; padding-top:18px; border-top:1px solid #e8edf3; color:#9aa6b6; font-size:12px }

#menuBtn{
  position:fixed; top:12px; left:12px; z-index:30; display:none;
  background:#0d1322; color:#fff; border:0; width:40px; height:40px; border-radius:10px;
  font-size:18px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25);
}

@media (max-width:880px){
  #menuBtn{ display:block }
  .side{ position:fixed; left:0; top:0; z-index:25; transform:translateX(-100%); transition:transform .2s ease; box-shadow:4px 0 24px rgba(0,0,0,.3) }
  .side.open{ transform:translateX(0) }
  .content-inner{ padding:64px 22px 60px }
  h1{ font-size:25px }
}