@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,600italic|Roboto+Slab:400,700");

/* Default: light theme */
:root {
  --bg-color: #ffffff;
  --brand-bg-color: transparent;
  --text-color: #000000;
  --sidebar-text-color: #000000;
  --header-color: #2c3e50;
  --link-color: #0066cc;
  --button-bg: #f0f0f0;
  --button-text: #000;
  --borderline-color: #000;
  --sidebar-right-text-color: #000000;
  --sidebar-right-bg-color: #f0d8d8;
  --sidebar-bg-color: #f5f6f7;
  --sidebar-alt-bg-color: #eff1f2;
  --search-input-bg-color: #ffffff;
  --sidebar-submenu-color: #6b6f72;
  --sidebar-current-bg: rgba(35, 102, 168, 0.1);
  --sidebar-current-border: #2366a8;
  /* NEW: snippet background */
  --snippet-bg: #e8e8eb;
  --snippet-text: #222;
  /* accent + card system */
  --accent-color: #2366a8;
  --accent-color-strong: #17517f;
  --card-bg: #f8f9fb;
  --card-border: rgba(15, 23, 42, 0.12);
  --card-shadow: rgba(15, 23, 42, 0.08);
  --level-beginner-bg: #e3f6e8;
  --level-beginner-text: #1c7a3c;
  --level-intermediate-bg: #e5eefb;
  --level-intermediate-text: #1a5ba6;
  --level-advanced-bg: #f3e8fa;
  --level-advanced-text: #7228a6;
  --level-profiling-bg: #fdf0e0;
  --level-profiling-text: #a15c07;
}

/* Dark theme overrides */
.dark-mode {
  --bg-color: #121212;
  --brand-bg-color: transparent;
  --sidebar-right-bg-color: #1a0303;
  --sidebar-bg-color: #0c0c0c;
  --sidebar-alt-bg-color: #1a1a1a;
  --search-input-bg-color: #232323;
  --sidebar-submenu-color: #9fa3a6;
  --sidebar-current-bg: rgba(94, 161, 230, 0.16);
  --sidebar-current-border: #5ea1e6;
  --text-color: #e0e0e0;
  --sidebar-text-color: #e0e0e0;
  --header-color: #c5c5c5;
  --link-color: #77b7f7;
  --button-bg: #333;
  --button-text: #fff;
  --borderline-color: #faf5f5;
  /* NEW: snippet background */
  --snippet-bg: #1e1e1e;
  --snippet-text: #ddd;
  /* accent + card system */
  --accent-color: #5ea1e6;
  --accent-color-strong: #8ec1f2;
  --card-bg: #1a1c22;
  --card-border: rgba(255, 255, 255, 0.12);
  --card-shadow: rgba(0, 0, 0, 0.35);
  --level-beginner-bg: #123420;
  --level-beginner-text: #6fe093;
  --level-intermediate-bg: #122a42;
  --level-intermediate-text: #7cb6f0;
  --level-advanced-bg: #2c1a3d;
  --level-advanced-text: #cd9bf0;
  --level-profiling-bg: #3a2810;
  --level-profiling-text: #f0ad5c;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--text-color);
  background-color: var(--brand-bg-color);
  padding: 8px 4px 4px 24px;
  font-weight: 800;
  font-size:18px;
}

.sub_brand0{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--text-color);
  background-color: var(--brand-bg-color);
  font-weight: 1000;
  font-size:20px;
  margin-top:1px;
}

.sub_brand1{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color: var(--accent-color);
  background-color: var(--brand-bg-color);
  font-weight: 400;
  font-size:14px;
  margin-top:1px;
}

.brandlogo{
  width:56px;
  height:56px;
  border-radius:12px;
  color:#ffffff;
  background-color: #0f172a;
  box-shadow:0 6px 18px rgba(2,6,23,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}


body {
  line-height: 1;
  -webkit-text-size-adjust: none;
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: sans-serif;
  -ms-overflow-style: scrollbar;
  margin: 0 auto;
  max-width: 4000px;
  display: flex;
  justify-content: center;
  overflow-x: auto;   /* prevent horizontal scroll */
  overflow-y: auto;     /* allow vertical scroll */
}
/* Wrapper */
.wrapper {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-direction: row-reverse;
  -webkit-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin: 0 auto;
  min-height: 100vh;
  width: 100%;
  max-width: 1600px;
  justify-content: center;
}

/* Main  bbk delete*/
#main {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  min-width: 0;
  margin-right: 10px;
  max-width: 2000px;
  /* width: 100%; */
  color: var(--text-color);
  justify-content: center;
  /* No top padding: #header is sticky and sits flush against #main's own
     top edge (see its rule) so its stuck and unstuck positions are
     identical -- any padding here would make it visibly jump up by that
     amount the moment scrolling starts. */
  padding: 0 20px 20px 20px;
}

#main > .inner {
  padding: 0 2em 0.1em 2em ;
  margin: 0 auto;
  max-width: 1000px;
  /* max-width: max-content; */
  /* width: 1000px; */
  width: auto;

}
#main > .inner > section {
  /* padding: 6em 0 4em 0 ; */
  padding: 0.5em 0 1em 0 ;
  border-top: solid 2px rgba(210, 215, 217, 0.75); 
}
#main > .inner > section:first-of-type {
  border-top: 0 !important; 
}

/* Header */
#header {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  /* Vertically center the row instead of the flex default (stretch), which
     top-aligned everything against the tallest child (the brand logo block)
     -- left the GitHub/LinkedIn icons and toggle button sitting flush at
     the top of the row instead of centered alongside the logo. */
  align-items: center;
  border-bottom: solid 5px var(--accent-color);
  padding: 0.75em 0 1em 0;
  /* Sticky so the logo/icons row stays visible while scrolling #main (its
     own independently-scrolling pane at desktop widths -- see the
     min-width:1281px block above). #main has no top padding (see its own
     rule) specifically so this sits at the same position stuck or not --
     any padding there would make the stuck and resting positions differ,
     visibly shifting the header the moment scrolling starts. Needs an
     opaque background since nothing else is behind it once content
     scrolls underneath. */
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--bg-color);
}

#header > * {
    -moz-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-bottom: 0; 
}

#header .logo {
    border-bottom: 0;
    color: inherit;
    font-family: "Roboto Slab", serif;
    font-size: 1.125em; 
}

#header .icons {
  text-align: right;
}

#header .bmc-link {
  /* Sits between .brand and .icons, both flex:1 -- text-align:center
     places it in the middle of its own third of the row rather than
     hugging the left edge (a plain link's default), which is roughly the
     visual center of the header as a whole. */
  text-align: center;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

#header .bmc-link:hover {
  color: var(--accent-color);
}
 

/* header */
h1, h2, h3, h4, h5, h6 {
  color: var(--header-color);
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1em 0; 
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
    border-bottom: 0; 
}

h1 {
  font-size: 3em;
  margin: 0 0 0.5em 0;
  /* margin: 0 0 0.0em 0; */
  line-height: 1.3; }

h2 {
  /* font-size: 1.75em; } */
  font-size: 1.5em; }

h3 {
  font-size: 1.25em; }

h4 {
  font-size: 1.1em; }

h5 {
  font-size: 0.9em; }

h6 {
  font-size: 0.7em; }

/* aaaa */
a {
  -moz-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, border-bottom-color 0.2s ease-in-out;
  border-bottom: dotted 1px;
  color: var(--link-color);
  text-decoration: none; 
}

a:hover {
  border-bottom-color: var(--accent-color);
  color: var(--accent-color) !important;
  text-decoration: underline; /* add underline only on hover */
}

a:hover strong {
      color: inherit; 
}

a.image {
  overflow: hidden; 
}

a.image img {
    -moz-transition: -moz-transform 0.2s ease;
    -webkit-transition: -webkit-transform 0.2s ease;
    -ms-transition: -ms-transform 0.2s ease;
    transition: transform 0.2s ease; 
}

a.image:hover img {
    -moz-transform: scale(1.075);
    -webkit-transform: scale(1.075);
    -ms-transform: scale(1.075);
    transform: scale(1.075); 
}

/* When link is active (mid-click) */
a:active {
  color: var(--accent-color);
}

/* When link has been visited */
a:visited {
  color: var(--link-color);
}


/* general */
strong, b {
  color: var(--text-color);
  font-weight: 600; 
}

em, i {
  font-style: italic; }

p {
  margin: 0 0 2em 0; }
html {
  box-sizing: border-box; 
}

sub {
  font-size: 0.8em;
  position: relative;
  top: 0.5em; }

sup {
  font-size: 0.8em;
  position: relative;
  top: -0.5em; }

blockquote {
  border-left: solid 3px rgba(210, 215, 217, 0.75);
  font-style: italic;
  margin: 0 0 2em 0;
  padding: 0.5em 0 0.5em 2em; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

mark {
  background-color: transparent;
  color: inherit; }

code {
  /* background: rgba(230, 235, 237, 0.25); */
  border-radius: .375em;
  /* border: solid 1px rgba(210, 215, 217, 0.75); */
  /* font-family: "Courier New", monospace; */
  font-family: monospace;
  font-size: 0.9em;
  /* margin: 0 0.25em; */
  margin: 0 0 0 0;
  /* padding: 0.25em 0.65em; */
  padding: 0 0 0 0; 
}

pre {
  -webkit-overflow-scrolling: touch;
  font-family: "Courier New", monospace;
  font-size: 0.9em;
  margin: 0 0 2em 0; }
pre code {
    display: block;
    line-height: 1.75;
    padding: 1em 1.5em;
    overflow-x: auto; }

/* A sample of real terminal output: dark strip in both themes, with the
   same ANSI colours the script prints. */
pre.term-sample code {
    display: inline-block;
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 6px;
    padding: 0.5em 0.9em; }

pre.term-sample .ansi-cyan { color: #56c8d8; }
pre.term-sample .ansi-yellow { color: #e5c07b; }
pre.term-sample .ansi-magenta { color: #d992d9; }

hr {
  border: 0;
  border-bottom: solid 1px rgba(210, 215, 217, 0.75);
  margin: 2em 0; }

hr.major {
    margin: 3em 0; 
  }

/*button */
button {
  background: var(--button-bg);
  color: var(--button-text);
  border: none;
  padding: 2px 2px;
  cursor: pointer;
  width: auto;
  height: auto;
}

#theme-toggle {
  /* #header > * sets flex: 1, which would stretch this to fill the header row */
  flex: none;
  /* ul.icons li:last-child removes its own right padding (nothing used to
     follow it), so without this the toggle sits flush against the LinkedIn
     icon with no gap at all. */
  margin-left: 1em;
  border-radius: 50%;
  width: 2.2em;
  height: 2.2em;
  padding: 0;
  font-size: 1em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: solid 1px var(--card-border);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

#theme-toggle:hover {
  border-color: var(--accent-color);
  transform: scale(1.08);
}

.snippet-line {
  display: block;
  /* background-color: var(--snippet-bg); */
  color: var(--snippet-text);
  margin-left: 0px;
  padding: 4px 0px 4px 0px;
}

.snippet-line b {
  font-weight: bold;
}

/* Item number on the numbered tip lists (e.g. the Claude Code tips page).
   Inline, so it stays in the plain flow described below. */
.tip-num {
  color: var(--accent-color);
  font-weight: 700;
  margin-right: 4px;
}

/* Plain inline flow: code box, [help] link and description are one
   paragraph, wrapping like normal text. When the description doesn't fit,
   the wrapped line returns to the row's left edge, which lines up with the
   command since .snippet-line has no left padding -- do not switch this to
   a flex row, which makes wrapped lines hang under the description's own
   column instead of under the command (tried and reverted twice). */
.snippet-line .code-box,
.snippet-line > span {
  vertical-align: middle;
}

.snippet-line:nth-child(odd) {
  /* background-color: #e6f2ff; light blue */
}

.snippet-line:nth-child(even) {
    background-color: var(--snippet-bg)
}

.snippet-line2 {
  display: block;
  /* background-color: var(--snippet-bg); */
  color: var(--snippet-text);
  margin-left: 15px;
  padding: 4px 0px 4px 0px;
}

/* Same plain inline flow as .snippet-line above -- see that comment. */
.snippet-line2 .code-box,
.snippet-line2 > span {
  vertical-align: middle;
}

.snippet-line2:nth-child(odd) {
  /* background-color: #e6f2ff; light blue */
}

.snippet-line2:nth-child(even) {
    background-color: var(--snippet-bg)
}


.code-box {
  display: inline-block;      /* makes it a block element */
  /*white-space: nowrap;*/
  white-space: normal;
  /* display: inline-flex;   code + button inside */
  /* align-items: center; */
  align-items: center;
  background: #2d2d2d;
  /* border: solid 1px rgba(192, 8, 36, 0.75); */
  border: none;
  color: #f8f8f2;
  border-radius: 6px;
  font-family: monospace;
  font-size: 15px;
  margin: 0.5em 0.5em 0.5em 0;
  /* padding: 6px 6px; */
  padding: 4px 4px 4px 6px;
  max-width: 100%;
  overflow-x: auto;
}

.copy-btn {
  background: none;     /* remove button background */
  border: none;         /* remove border */
  padding: 0em 0em 0em 1em;           /* remove padding */
  margin: 0px 0px 0px 0px;            /* remove margin */
  cursor: pointer;      /* keep pointer cursor */
  display: inline-flex;        /* make the icon fit its content */
  align-items: center;  /* vertically center */
  line-height: 1;       /* prevent extra vertical space */
}

.copy-btn:hover {
  color: #4CAF50;
}

.copy-btn svg {
  width: 18px;   /* control icon size */
  height: 18px;
}

/* Image */
.image {
  border-radius: 0.375em;
  border: 0;
  display: inline-block;
  position: relative; 
}

img {
    max-width: 100%;
    height: auto;
}

.image img {
    border-radius: 0.375em;
    max-width: 100%;
    height: auto;    
    display: block; 
}

.image.left, .image.right {
    max-width: 40%; 
}

.image.left img, .image.right img {
      width: 100%; 
}

.image.left {
    float: left;
    padding: 0 1.5em 1em 0;
    top: 0.25em; 
}
.image.right {
    float: right;
    padding: 0 0 1em 1.5em;
    top: 0.25em; 
}
.image.fit {
    display: block;
    margin: 0 0 2em 0;
    width: 100%; 
}
.image.fit img {
      width: 100%; 
}
.image.main {
    display: block;
    margin: 0 0 3em 0;
    width: 100%; 
}

.image.main img {
      width: 100%; 
}

/* ===========  not vetted  ==================*/
@media screen and (max-width: 1680px) {
  #header {
    padding-top: 5em; 
  } 
}

@media screen and (max-width: 736px) {
  #header {
    padding-top: 6.5em;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em 0.75em;
  }
  #header > * {
    flex: none;
    width: auto;
  }
  #header .logo {
    font-size: 1.25em;
    margin: 0;
  }
  /* Brand takes the whole first row (flex-wrap forces the next items onto
     a second row); bmc-link and the theme toggle then share that second
     row instead of each getting their own stacked row -- three full-width
     stacked rows made the sticky header tall enough (~246px on a phone) to
     cover, and intercept taps on, page content scrolled up underneath it. */
  #header .brand {
    width: 100%;
  }
  #header .icons {
    height: 5em;
    line-height: 5em;
    position: absolute;
    right: -0.5em;
    top: 0;
  }
  #theme-toggle {
    align-self: center;
  }
}

/* Banner */
#banner {
  padding: 6em 0 4em 0 ;
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; 

  /* justify-content: center; */
}
#banner h1 {
  margin-top: 1.0em; 
  font-size: xx-large;
  font-weight: bold;
}

#banner h2 {
  margin-top: 1.0em; 
  font-size: xx-large;
  font-weight: bold;
}

#banner .content {
  -moz-flex-grow: 1;
  -webkit-flex-grow: 1;
  -ms-flex-grow: 1;
  flex-grow: 1;
  -moz-flex-shrink: 1;
  -webkit-flex-shrink: 1;
  -ms-flex-shrink: 1;
  flex-shrink: 1;
  width: 50%;
  color: var(--text-color);
}
#banner .image {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  display: block;
  margin: 0 0 2em 4em;
  width: 50%; 
}
  
#banner .image img {
  height: 100%;
  -moz-object-fit: cover;
  -webkit-object-fit: cover;
  -ms-object-fit: cover;
  object-fit: cover;
  -moz-object-position: center;
  -webkit-object-position: center;
  -ms-object-position: center;
  object-position: center;
  width: 100%; 
}
@media screen and (orientation: portrait) {
  #banner {
    -moz-flex-direction: column-reverse;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse; 
  }
   
  #banner h1 br {
    display: none; 
  }
  
  #banner .content {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    width: 100%;
  }
    
  #banner .image {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 0;
    -webkit-flex-shrink: 0;
    -ms-flex-shrink: 0;
    flex-shrink: 0;
    margin: 0 0 4em 0;
    height: 25em;
    max-height: 50vh;
    min-height: 18em;
    width: 100%; 
  } 
}

@media screen and (orientation: portrait) and (max-width: 480px) {
  #banner .image {
      max-height: 35vh; 
  } 
}

/* Sidebar */
/* Sidebar colors use the same variables */
#search form {
  text-decoration: none;
  position: relative; 
}

#search form:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; 
}

#search form:before {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);
    color: #7f888f;
    content: '\f002';
    cursor: default;
    display: block;
    font-size: 1.5em;
    height: 2em;
    line-height: 2em;
    opacity: 0.325;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 2em;
}

/* The icon's own gray (with the low opacity above) reads fine against the
   light input, but the same color+opacity nearly disappears against the
   dark input background -- lighten and boost it in dark mode instead. */
.dark-mode #search form:before {
    color: #cfd6db;
    opacity: 0.5;
}

#search form input[type="text"] {
    padding-right: 2.75em;
    /* The shared input[type="text"] rule elsewhere hardcodes a plain white
       background -- fine in light mode, but it doesn't adapt in dark mode
       since this is the only text input on the site, override it here
       rather than touch that shared rule for inputs that may exist later. */
    background-color: var(--search-input-bg-color);
}

#search #results {
  list-style: none;
  margin: 0.5em 0 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
}

#search #results:empty {
  display: none;
}

#search #results li {
  margin: 0;
  border-top: 1px solid var(--borderline-color);
}

#search #results a {
  display: block;
  padding: 0.5em 0.25em;
  font-size: 0.85em;
  text-decoration: none;
  color: var(--text-color);
}

#search #results a:hover {
  color: var(--link-color, #0066cc);
  text-decoration: underline;
}


/* Sidebar-right */
/* visibility:hidden (not display:none) so the homepage, which has no TOC,
   still reserves the same 20em + border width as other pages -- otherwise
   #main grows into that space and its centered .inner shifts sideways
   relative to every other page. */
body.no-toc .sidebar_right {
  visibility: hidden;
}

.sidebar_right {
  /* position:-webkit-sticky; */
  /* position: fixed; */
  position: sticky;
  top: 0;
  align-self: flex-start;
  /* right: 250px;     */
  height: auto;
  width: 20em;
  /* height: 100%; */
  
  /* background-color: var(--sidebar-right-bg-color); */
  background-color: var(--bg-color);
  color: var(--text-color);
  
  /* background-color: var(--box-bg, #f9f9f9); */
  border-left: 2px solid var(--borderline-color);
  padding: 1rem 1rem 0rem 1rem;
  overflow-y: auto;
}

.sidebar_right ul {
  list-style: none;
  padding: 0;
}

.sidebar_right li {
  margin: 5px 0;
}

.sidebar_right a {
  text-decoration: none;
  color: var(--link-color, #0066cc);
  /*bbk add border*/
}

.sidebar_right a:hover {
  text-decoration: underline;
}

/* Independent scroll panes (desktop, >1280px -- matches the JS breakpoints
   library's ">large" cutoff used elsewhere for the off-canvas sidebar toggle).
   Without this, the whole document is one shared scroll: scrolling anywhere
   (main content or sidebar) moves everything together, since .wrapper's
   height is unconstrained (min-height only) and #main/.sidebar both just
   grow to fit their content. That also meant the legacy jQuery "sidebar-lock"
   hack in main.js (which pins the sidebar via position:fixed + a manually
   computed top offset as $window scrolls) was fighting with the search box's
   position:sticky, producing the reported glitches -- content getting hidden
   behind the search box, the sidebar moving when scrolling the main pane.

   Capping .wrapper to the viewport height and giving #main / .sidebar / .inner
   / .sidebar_right their own overflow-y:auto turns each into a true
   independent scroll container: hovering one and scrolling only moves that
   one. It also makes $window itself stop scrolling at this width, which
   quietly neutralizes the old sidebar-lock hack (it only ever fires on a
   $window scroll event) without needing to touch or delete that JS. */
@media screen and (min-width: 1281px) {
  .wrapper {
    height: 100vh;
    overflow: hidden;
  }

  #main {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    /* The right sidebar's "On this page" links jump to an in-page heading
       via its #id fragment -- without this, the browser scrolls that
       heading flush to the very top of #main's scrollport, right where
       the sticky #header (~163px tall) now sits on top of it, hiding the
       heading completely. scroll-padding-top reserves that space so the
       heading lands visibly below the header instead. Only needs to live
       here: the right sidebar itself is hidden below this same
       min-width:1281px breakpoint, so there's no jump-to-heading behavior
       to fix at any width where #header's shorter, wrapped mobile layout
       would throw this number off. */
    scroll-padding-top: 183px;
  }

  .sidebar {
    height: 100vh;
  }

  .sidebar > .inner {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Was position:sticky relying on document-level scroll to know when to
     "stick" -- with .wrapper no longer scrolling, that trigger never fires,
     so it needs the same independent-scroll treatment as the other two
     panes instead (otherwise a long "On this page" TOC would just overflow
     past the viewport with no way to reach the rest of it). */
  .sidebar_right {
    position: static;
    align-self: stretch;
    height: 100vh;
    overflow-y: auto;
  }

  /* Hide the scrollbar on all three independent panes while keeping them
     scrollable -- a visible native scrollbar also reserves a gutter inside
     the box (varies by browser/OS, ~15-17px), which was silently narrowing
     .sidebar > .inner's content width and throwing off the search box's
     width:calc(100% + ...) bleed against it (nav text could then run past
     the search box's right edge). Removing the scrollbar removes that
     gutter too, so both problems share this one fix. */
  #main,
  .sidebar > .inner,
  .sidebar_right {
    scrollbar-width: none;     /* Firefox */
    -ms-overflow-style: none;  /* legacy Edge/IE */
  }
  #main::-webkit-scrollbar,
  .sidebar > .inner::-webkit-scrollbar,
  .sidebar_right::-webkit-scrollbar {
    display: none;             /* Chrome/Safari/Chromium Edge */
  }
}


@media screen and (max-width: 1280px) {
  .sidebar_right,
  body.no-toc .sidebar_right {
    display: none;
  }
}

.sidebar {
  -moz-flex-grow: 0;
  -webkit-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  -moz-flex-shrink: 0;
  -webkit-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -moz-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -webkit-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  -ms-transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  transition: margin-left 0.5s ease, box-shadow 0.5s ease;
  /* background-color: #f5f6f7; */
  background-color: var(--sidebar-bg-color);
  color: var(--sidebar-text-color);
  font-size: 0.9em;
  position: relative;
  width: 20em; 
}
.sidebar h2 {
  color: var(--sidebar-text-color);
  font-size: 1.38889em; 
}

.sidebar > .inner {
  color: var(--sidebar-text-color);
  padding: 2.22222em 5.22222em 2.44444em 2.22222em ;
  position: relative;
  width: 20em; 
}
.sidebar > .inner > * {
  border-bottom: solid 2px rgba(210, 215, 217, 0.75);
  margin: 0 0 3.5em 0;
  padding: 0 0 3.5em 0; 
}
.sidebar > .inner > * > :last-child {
  margin-bottom: 0; 
}
.sidebar > .inner > *:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0; 
}
.sidebar > .inner > .alt {
  background-color: var(--sidebar-alt-bg-color);
  border-bottom: 0;
  /* No bottom margin: the visual gap to "Contents" below lives entirely in
     that element's own padding-top instead (see #menu > header.major).
     A margin here would make this box's normal (unstuck) resting position
     sit that much lower than its stuck position -- which only accounts for
     .alt's own height, not a trailing margin -- so "Contents" would visibly
     jump by that amount the instant scrolling starts. */
  margin: -2.22222em 0 0 -2.22222em;
  padding: 2.22222em;
  /* .sidebar > .inner's own padding is asymmetric (2.22222em left,
     5.22222em right) -- bleeding this box flush to both edges needs to
     add back both, not double the smaller one. */
  width: calc(100% + 2.22222em + 5.22222em);
  position: sticky;
  /* Should cancel out to a flush 0 against the negative top margin above
     (both are the same 2.22222em as .inner's own padding-top, which the
     negative margin exists to cancel for this element's normal, non-stuck
     flow position). It doesn't: browsers resolve a sticky element's stuck
     offset from its padding edge without folding the element's own negative
     margin back in the way a plain position:relative offset would, so
     top:0 alone leaves a stuck-state gap exactly the size of that padding
     (2.22222em) even though the unstuck position sits flush. Compensating
     here with -2.22222em (verified empirically against the rendered
     geometry) cancels that gap in both states. */
  top: -2.22222em;
  z-index: 20;
}

.sidebar .toggle {
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  border: 0;
  /* Only relevant at <=large (1280px), where main.js's breakpoints.on('<=large', ...)
     collapses the sidebar by default -- above that it force-removes .inactive and this
     button has nothing to do. Left visible at all widths it used to sit uselessly over
     desktop content, and clicking it could collapse the sidebar with no matching
     fixed-position/off-canvas CSS to restore it cleanly.
     position:fixed (not absolute) so the button stays anchored to the viewport corner
     regardless of scroll position -- .sidebar itself is a normal in-flow, non-sticky
     flex item below the min-width:1281px independent-scroll-pane breakpoint, so an
     absolutely-positioned child of it (the old behavior) scrolled up and off-screen
     with the rest of the page, leaving no way to reopen the nav once scrolled past
     the first screen of content. left:0 replaces the old left:26em, which only made
     sense paired with position:absolute -- it canceled out .sidebar.inactive's own
     -26em margin so the button would land at the viewport edge; fixed doesn't care
     about the sidebar's margin at all, so it can just sit at the edge directly. */
  display: none;
  height: 7.5em;
  left: 0;
  line-height: 7.5em;
  outline: 0;
  overflow: hidden;
  position: fixed;
  text-align: center;
  text-indent: -15em;
  white-space: nowrap;
  top: 0;
  width: 6em;
  z-index: 10000;
}

.sidebar .toggle:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
}

.sidebar .toggle:before {
  content: '\f0c9';
  font-size: 2rem;
  height: inherit;
  left: 0;
  line-height: inherit;
  position: absolute;
  text-indent: 0;
  top: 0;
  width: inherit; 
}
 
.sidebar.inactive {
  margin-left: -26em; 
}

/* ------------------ */

/* @media screen and (max-width: 1680px) {
  .sidebar {
    width: 24em; 
  }
  .sidebar > .inner {
    padding: 1.66667em 1.66667em 1.33333em 1.66667em ;
    width: 24em; 
  }
  .sidebar > .inner > .alt {
    margin: -1.66667em 0 3.33333em -1.66667em;
    padding: 1.66667em;
    width: calc(100% + 3.33333em); 
  }
  .sidebar .toggle {
    height: 6.25em;
    left: 24em;
    line-height: 6.25em;
    text-indent: 5em;
    width: 5em; 
  }

  .sidebar .toggle:before {
    font-size: 1.5rem; 
  }

  .sidebar.inactive {
    margin-left: -24em; 
  }
} */

@media screen and (max-width: 1280px) {
  .sidebar .toggle {
    display: block;
  }
}

/* Off-canvas drawer: <=1280px only, the same cutoff as main.js's "<=large"
   breakpoint that shows the hamburger and lets the sidebar close. This was
   max-width:1680px, so from 1281 to 1680px the sidebar floated over the
   article while main.js held it open and the hamburger stayed hidden --
   nothing could dismiss it and the text underneath was unreadable. Above
   1280px the sidebar is an ordinary in-flow column, as it is past 1680px. */
@media screen and (max-width: 1280px) {
  .sidebar {
    /* Anchored to the viewport (not a normal in-flow flex item) so it's a
       true off-canvas drawer: always full-height and immediately visible
       when opened, regardless of how far the main content has been
       scrolled. Without this, .sidebar scrolled away with the rest of the
       page like any other content, so opening it while scrolled deep into
       a long page just showed blank space where the (already
       scrolled-past) sidebar box used to be. .sidebar.inactive's existing
       margin-left:-26em still does the slide off-screen/on-screen animation
       exactly as before -- fixed positioning doesn't change that mechanic,
       just what the margin is measured against. */
    box-shadow: 0 0 5em 0 rgba(0, 0, 0, 0.175);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    z-index: 10000;
  }
  .sidebar.inactive {
    box-shadow: none;
  }
  .sidebar > .inner {
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
  }
  .sidebar > .inner:after {
    content: '';
    display: block;
    height: 4em;
    width: 100%; 
  }
  .sidebar .toggle {
    text-indent: 6em;
    width: 6em; 
  }
  .sidebar .toggle:before {
    font-size: 1.5rem;
    margin-left: -0.4375em; 
  }
  body.is-preload .sidebar {
    display: none; 
  }
}

@media screen and (max-width: 736px) {
  .sidebar .toggle {
    text-indent: 7.25em;
    width: 7.25em; 
  }
  
  .sidebar .toggle:before {
    color: #8f867f;
    margin-left: -0.0625em;
    margin-top: -0.25em;
    font-size: 1.1rem;
    z-index: 1; 
  
  }
  
  .sidebar .toggle:after {
    background: rgba(222, 225, 226, 0.75);
    border-radius: 0.375em;
    content: '';
    height: 3.5em;
    left: 1em;
    position: absolute;
    top: 1em;
    width: 5em; 
  } 
}

/* Menu */
#menu {
  margin-bottom: 0;
  /* margin: 0; */
  padding: 0 0 4em 0;
}

/* Sticky "Contents" heading, stacked directly below the sticky search box.
   --search-box-height (search's rendered height, no margin) is kept in
   sync by a ResizeObserver in sidebar.js (the fallback below matches it
   with no search results showing, for the rare case JS doesn't run). This
   box's top edge sits flush against the search box's bottom edge in BOTH
   its stuck and its normal resting position -- .alt has no bottom margin
   of its own for the same reason -- so there's nothing for it to jump
   across the instant scrolling starts. padding-top supplies the visual
   gap instead, so this box's own opaque background covers it and
   scrolled-under nav text can never peek through the seam between the two
   sticky elements. Bleeds edge-to-edge the same way .sidebar > .inner > .alt
   does (negative margin + matching padding to preserve the "Contents"
   text's normal horizontal position, since .inner's own left/right padding
   is asymmetric) so nothing can peek out past either side of it either.

   The "- 2.22222em" in top: is the same stuck-offset quirk documented on
   .alt above -- ANY sticky descendant of .sidebar > .inner renders its
   stuck position .inner's padding-top (2.22222em) too low relative to the
   `top` value given, regardless of that element's own margin, so every
   sticky element stacked in here needs this same correction subtracted. */
#menu > header.major {
  position: sticky;
  top: calc(var(--search-box-height, 7.5em) - 2.22222em);
  z-index: 15;
  background-color: var(--sidebar-bg-color);
  margin: 0 0 0 -2.22222em;
  padding: 0.5em 5.22222em 0.5em 2.22222em;
  width: calc(100% + 2.22222em + 5.22222em);
}

#menu ul {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: var(--sidebar-text-color);
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  letter-spacing: 0.0;
  list-style: none;
  margin-bottom: 0;
  /* margin: 0; */
  padding: 0 0 0 0;
  /* text-transform: uppercase;  */
  font-size: medium;
}

/* The menu fills the sidebar's content box and borrows most of .inner's wide
   right padding, instead of a fixed 15em. `font-size: medium` pins that em
   to 16px, but the sidebar is 20em of the body font, which steps down at
   1680px and 1280px -- so a fixed 240px list outgrew the drawer at narrow
   widths and its overflow-x:hidden clipped the fold chevrons and long
   titles. Nested lists are width:auto so each fits inside its parent's
   indent rather than being another full 15em that sticks out further at
   every level. 2.5em stays inside the smallest right padding (≈62px). */
#menu > ul {
  margin-right: -2.5em;
}
  
#menu ul a, #menu ul span {
  border-bottom: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: 1.0em;
  padding: 0em 0; 
}
    
#menu ul a:hover, #menu ul span:hover {
  color: var(--accent-color); 
}

#menu ul a.opener, #menu ul span.opener {
  -moz-transition: color 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out;
  transition: color 0.2s ease-in-out;
  text-decoration: none;
  color: var(--sidebar-text-color);
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  position: relative; 
}

#menu ul a.opener:before, #menu ul span.opener:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; 
}
      
#menu ul a.opener:before, #menu ul span.opener:before {
  -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
  -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
  -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
  transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
  color: #9fa3a6;
  content: '\f078';
  position: absolute;
  right: 0; 
}

#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
  color: var(--accent-color); 
}

#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
  display: block; 
}
  
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
  -moz-transform: rotate(-180deg);
  -webkit-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  transform: rotate(-180deg); 
}

#menu > ul > li {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 0.5em 0 0 0;
  padding: 0.5em 0 0 0; 
}

/* Nav depth 1: the group ("folder"): GPU, AI & ML, Programming ...
   A fold-only node -- it has no <a>, because it has no page of its own.
   Deliberately loud (uppercase, tracked, bold) so it never reads as a
   sibling of the section links nested under it. */
#menu > ul > li > span.opener.group-opener {
  font-size: 1.15em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--sidebar-text-color);
}

#menu > ul > li > span.opener.group-opener:hover {
  color: var(--sidebar-current-border);
}

/* Depth 2: the sections inside a group. Full-size, normal weight, in the
   main sidebar colour -- these are the real destinations. */
#menu > ul > li > ul {
  display: none;
  margin: 0.4em 0 1.25em 0;
  padding-left: 0.6em;
}

#menu > ul > li > ul > li {
  margin: 0.35em 0 0 0;
  padding: 0.35em 0 0 0;
  border-top: solid 1px rgba(210, 215, 217, 0.4);
}

/* One clear step down from the group heading above it: same size, lighter
   weight. The hierarchy is carried by size + weight + indent, so the group
   no longer needs to shout in small uppercase to look different. */
#menu > ul > li > ul > li > span.opener,
#menu > ul > li > ul > li > a {
  font-weight: 400;
}

#menu > ul > li > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}

/* Depth 3: the pages inside a section -- the muted, indented leaf list
   that used to sit at depth 2 before groups were introduced. */
#menu > ul > li > ul > li > ul {
  color: var(--sidebar-submenu-color);
  display: none;
  margin: 0.4em 0 1em 0;
  padding-left: 1em;
}

#menu > ul > li > ul > li > ul a, #menu > ul > li > ul > li > ul span {
  font-size: 0.92em;
  font-weight: 400;
}

#menu > ul > li > ul > li > ul > li {
  margin: 0.125em 0 0 0;
  padding: 0.125em 0 0 0;
}

/* Lesson numbers for the leaf entries of each section. Sections have grown
   to 20-35 pages, where an unnumbered flat list gives no sense of position
   or length, so each entry gets its ordinal. The numbers come from a CSS
   counter rather than the markup in bin/sidebar.html: inserting a page
   mid-section then renumbers the rest for free, with no re-sync across the
   253 pages the sidebar is copied into. */
#menu > ul > li > ul > li > ul {
  counter-reset: menu-item;
}

#menu > ul > li > ul > li > ul > li > a {
  counter-increment: menu-item;
  /* The number sits in a gutter of its own so that a title wrapping onto a
     second line (several run past the 15em column) hangs under the title
     rather than under the digits. */
  position: relative;
  padding-left: 1.7em;
}

#menu > ul > li > ul > li > ul > li > a:before {
  content: counter(menu-item) ".";
  position: absolute;
  left: 0;
  /* Right-aligned in the gutter, so 9. and 10. line up on the period. */
  width: 1.3em;
  text-align: right;
  opacity: 0.55;
}

/* The "Topics coming soon" stubs are placeholders, not lessons: numbering
   them would promise a page that isn't written. They keep the gutter's
   indent so their title still lines up with the numbered ones. */
#menu > ul > li > ul > li > ul > li > a[href*="coming_soon"],
#menu > ul > li > ul > li > ul > li > a[href*="under_construction"] {
  counter-increment: none;
}

#menu > ul > li > ul > li > ul > li > a[href*="coming_soon"]:before,
#menu > ul > li > ul > li > ul > li > a[href*="under_construction"]:before {
  content: none;
}

/* Current-page highlighting, set by main.js on load by comparing each
   link's resolved path against the current page's. .current marks the
   exact link for the page you're on; .current-section marks the opener
   of whichever category contains it, so you can tell where you are even
   while scanning a long, collapsed sidebar. */
#menu ul a.current {
  color: var(--sidebar-current-border);
  background: var(--sidebar-current-bg);
}

#menu ul span.opener.current-section {
  color: var(--sidebar-current-border);
}

#menu > ul > li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}




@media screen and (max-width: 1680px) {
  #main > .inner {
    padding: 0 5em 0.1em 5em ; 
  }
  #main > .inner > section {
    padding: 5em 0 3em 0 ; 
  } 
}
@media screen and (max-width: 1280px) {
  #main > .inner {
    padding: 0 4em 0.1em 4em ; 
  }
  #main > .inner > section {
    padding: 4em 0 2em 0 ; 
  } 
}
@media screen and (max-width: 736px) {
  #main > .inner {
    padding: 0 2em 0.1em 2em ; 
  }
  #main > .inner > section {
    padding: 3em 0 1em 0 ; 
  } 
}

/* Footer */
.site-footer {
    display: flex !important;
    align-items: center;
    justify-content: center;       /* center group horizontally */
    gap: 80px;                      /* large spacing between the three groups */
    padding: 18px 20px;
    
    /* background: #f5f7fb;
    border-top: 1px solid #e6e9ef;
    color: #444; */
    background: var(--brand-bg-color);
    border-top: 1px solid #e6e9ef;
    color: var(--text-color);
    font-size: 14px;
    flex-wrap: nowrap;              /* keep items on one line if possible */
    white-space: nowrap;            /* prevent line wrapping inside items */
    width: 100%;
    box-sizing: border-box;
    overflow-x: auto;               /* if viewport is too small, allow scrolling */
    -webkit-overflow-scrolling: touch;
  }

  /* Left / center / right blocks */
  .site-footer__left,
  .site-footer__center,
  .site-footer__right {
    flex: 0 0 auto;  /* do not grow or shrink */
    margin: 0;
  }

  /* Center group is inline links - space them apart */
  .site-footer__center {
    display: flex;
    gap: 56px;            /* spacing between Privacy and Contact */
    align-items: center;
  }

  .site-footer a {
    color: inherit;
    text-decoration: none;
    padding: 6px 4px;
  }
  .site-footer a:hover {
    text-decoration: underline;
  }

  /* Make spacing smaller but keep one-line on modest phones */
  @media (max-width: 520px) {
    .site-footer { gap: 36px; padding: 12px; font-size: 13px; }
    .site-footer__center { gap: 28px; }
  }

  /* On tiny screens, allow wrap (stack) to preserve usability */
  @media (max-width: 320px) {
    .site-footer { flex-wrap: wrap; gap: 12px; justify-content: center; }
  }


/* Form */
form {
  margin: 0 0 2em 0; 
}

label {
  color: #3d4449;
  display: block;
  font-size: 0.9em;
  font-weight: 600;
  margin: 0 0 1em 0; 
}

/* Table */
.table-wrapper {
  -webkit-overflow-scrolling: touch;
  overflow-x: auto; }

table {
  margin: 0 0 2em 0;
  width: 100%; 
}

table tbody tr {
  border: solid 1px rgba(210, 215, 217, 0.75);
  border-left: 0;
  border-right: 0; 
}

table tbody tr:nth-child(2n + 1) {
  background-color: rgba(230, 235, 237, 0.25); 
}

table td {
  padding: 0.75em 0.75em; 
}
table th {
  color: #3d4449;
  font-size: 0.9em;
  font-weight: 600;
  padding: 0 0.75em 0.75em 0.75em;
  text-align: left; 
}
table thead {
  border-bottom: solid 2px rgba(210, 215, 217, 0.75); 
}
table tfoot {
  border-top: solid 2px rgba(210, 215, 217, 0.75); 
}
table.alt {
  border-collapse: separate; 
}
table.alt tbody tr td {
  border: solid 1px rgba(210, 215, 217, 0.75);
  border-left-width: 0;
  border-top-width: 0; 
}
table.alt tbody tr td:first-child {
  border-left-width: 1px; 
}
table.alt tbody tr:first-child td {
  border-top-width: 1px; 
}
table.alt thead {
  border-bottom: 0; 
}
table.alt tfoot {
  border-top: 0; 
}

/* Box */
.box {
  border-radius: 0.375em;
  border: solid 1px rgba(210, 215, 217, 0.75);
  margin-bottom: 2em;
  padding: 1.5em; 
}
  
.box > :last-child,
.box > :last-child > :last-child,
.box > :last-child > :last-child > :last-child {
  margin-bottom: 0; 
}
  
.box.alt {
  border: 0;
  border-radius: 0;
  padding: 0; 
}
  
/* Icon */
.icon {
  text-decoration: none;
  border-bottom: none;
  position: relative; 
}
.icon:before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 400; 
}
.icon > .label {
    display: none; }
.icon:before {
    line-height: inherit; }
.icon.solid:before {
    font-weight: 900; }
.icon.brands:before {
    font-family: 'Font Awesome 5 Brands'; }

/* List */
ol {
  list-style: decimal;
  margin: 0 0 2em 0;
  padding-left: 1.25em; 
}

ol li {
    padding-left: 0.25em; 
    margin: 0 0 0 1.5em;
}

ul {
  list-style: disc;
  margin: 0 0 2em 0;
  padding-left: 1em; 
}

ul li {
    padding-left: 0.5em; 
    margin: 0 0 0 1.5em;    
}

ul.alt {
    list-style: none;
    padding-left: 0; 
}
ul.alt li {
      border-top: solid 1px rgba(210, 215, 217, 0.75);
      padding: 0.5em 0; 
}
ul.alt li:first-child {
        border-top: 0;
        padding-top: 0; 
}

dl {
  margin: 0 0 2em 0; 
}

dl dt {
    display: block;
    font-weight: 600;
    margin: 0 0 1em 0; 
}
dl dd {
    margin-left: 2em; 
}

/* Actions */
ul.actions {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  cursor: default;
  list-style: none;
  margin-left: -1em;
  padding-left: 0; }
  ul.actions li {
    padding: 0 0 0 1em;
    vertical-align: middle; }
  ul.actions.special {
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    width: 100%;
    margin-left: 0; }
    ul.actions.special li:first-child {
      padding-left: 0; }
  ul.actions.stacked {
    -moz-flex-direction: column;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-left: 0; }
    ul.actions.stacked li {
      padding: 1.3em 0 0 0; }
      ul.actions.stacked li:first-child {
        padding-top: 0; }
  ul.actions.fit {
    width: calc(100% + 1em); }
    ul.actions.fit li {
      -moz-flex-grow: 1;
      -webkit-flex-grow: 1;
      -ms-flex-grow: 1;
      flex-grow: 1;
      -moz-flex-shrink: 1;
      -webkit-flex-shrink: 1;
      -ms-flex-shrink: 1;
      flex-shrink: 1;
      width: 100%; }
      ul.actions.fit li > * {
        width: 100%; }
    ul.actions.fit.stacked {
      width: 100%; }

/* Icons */
ul.icons {
  cursor: default;
  list-style: none;
  padding-left: 0;
  /* Flex + gap instead of padding-right-per-item: the padding approach left
     unequal gaps in the header -- the generic `ul li { margin-left: 1.5em }`
     reset rule (for ordinary bulleted lists) was still applying underneath
     this list's own padding-only override, stacking with GitHub's
     padding-right to roughly triple the GitHub-to-LinkedIn gap versus
     LinkedIn-to-toggle. gap: is immune to both that and to the whitespace
     text nodes between <li> tags in the markup, so it can't drift again. */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1em;
}
  ul.icons li {
    display: inline-block;
    margin: 0;
    padding: 0; }
    ul.icons li .icon {
      color: inherit; }
      ul.icons li .icon:before {
        /* ul.icons is only ever used for the header's GitHub/LinkedIn pair --
           1.25em read as noticeably smaller and lower-weight than the
           adjacent theme-toggle circle once the row is vertically centered. */
        font-size: 1.75em; }

/* Contact */
ul.contact {
  list-style: none;
  padding: 0; 
  margin: 1em 0 0em 0;
}

ul.contact li {
  text-decoration: none;
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin: 1.5em 0 0 0;
  padding: 1.5em 0 0 3em;
  position: relative; 
}

ul.contact li:before {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  text-transform: none !important;
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; 
}

ul.contact li:before {
  color: var(--accent-color);
  display: inline-block;
  font-size: 1.5em;
  height: 1.125em;
  left: 0;
  line-height: 1.125em;
  position: absolute;
  text-align: center;
  top: 1em;
  width: 1.5em; 
}
    
ul.contact li:first-child {
  border-top: 0;
  margin-top: 0;
  padding-top: 0; 
}
  
ul.contact li:first-child:before {
  top: 0; 
}
ul.contact li a {
  color: inherit; 
}

/* Pagination */
ul.pagination {
  cursor: default;
  list-style: none;
  padding-left: 0; }
  ul.pagination li {
    display: inline-block;
    padding-left: 0;
    vertical-align: middle; }
    ul.pagination li > .page {
      -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      border-bottom: 0;
      border-radius: 0.375em;
      display: inline-block;
      font-size: 0.8em;
      font-weight: 600;
      height: 2em;
      line-height: 2em;
      margin: 0 0.125em;
      min-width: 2em;
      padding: 0 0.5em;
      text-align: center; }
      ul.pagination li > .page.active {
        background-color: var(--accent-color);
        color: #ffffff !important; }
        ul.pagination li > .page.active:hover {
          background-color: #f67878; }
        ul.pagination li > .page.active:active {
          background-color: #f45c5c; }
    ul.pagination li:first-child {
      padding-right: 0.75em; }
    ul.pagination li:last-child {
      padding-left: 0.75em; }
  @media screen and (max-width: 480px) {
    ul.pagination li:nth-child(n+2):nth-last-child(n+2) {
      display: none; }
    ul.pagination li:first-child {
      padding-right: 0; } }


.vc-icon { width: 40px; height: 40px; vertical-align: middle; }
.vc-item { display: inline-flex; gap: 8px; align-items: center; color: #2c3e50; font-weight: 600; }
/* change color (e.g. on hover) */
.vc-item:hover { color: #007acc; }

/* ===========  ???  ==================*/

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline; }

/* Must stay after the reset above: its `font: inherit` shorthand wipes the
   earlier `code` rule, which has equal specificity and so loses on source order. */
code {
  font-family: monospace;
  font-size: 0.9em; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input, select, textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none; }

/* Basic */
@-ms-viewport {
  width: device-width; }

@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px; } }

*, *:before, *:after {
  box-sizing: inherit; }


body.is-preload *, body.is-preload *:before, body.is-preload *:after, body.is-resizing *, body.is-resizing *:before, body.is-resizing *:after {
    -moz-animation: none !important;
    -webkit-animation: none !important;
    -ms-animation: none !important;
    animation: none !important;
    -moz-transition: none !important;
    -webkit-transition: none !important;
    -ms-transition: none !important;
    transition: none !important; }

/* Type */
body, input, select, textarea {
  color: #7f888f;
  font-family: "Open Sans", sans-serif;
  font-size: 12pt;
  font-weight: 400;
  line-height: 1.65; }
  @media screen and (max-width: 1680px) {
    body, input, select, textarea {
      font-size: 11pt; } }
  @media screen and (max-width: 1280px) {
    body, input, select, textarea {
      font-size: 10pt; } }
  @media screen and (max-width: 360px) {
    body, input, select, textarea {
      font-size: 9pt; } }

@media screen and (max-width: 1680px) {
  h1 {
    font-size: 3.5em; } }

@media screen and (max-width: 980px) {
  h1 {
    font-size: 3.25em; } }

@media screen and (max-width: 736px) {
  h1 {
    font-size: 2em;
    line-height: 1.4; }
  h2 {
    font-size: 1.5em; } }

.align-left {
  text-align: left; }

.align-center {
  text-align: center; }

.align-right {
  text-align: right; }

/* Section/Article */
section.special, article.special {
  text-align: center; }

header p {
  font-family: "Roboto Slab", serif;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: 0.075em;
  margin-top: -0.5em;
  text-transform: uppercase; }

header.major > :last-child {
  /* border-bottom: solid 3px var(--accent-color); */
  display: inline-block;
  /* margin: 0 0 2em 0; */
  margin: 0 0 0.1em 0; /*section margin bbk*/
  /* padding: 0 0.75em 0.5em 0;  */
  padding: 0 0 0 0; 
  font-weight: 800;
  font-size: x-large;
}

header.main > :last-child {
  margin: 0 0 1em 0; }



input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background: #ffffff;
  border-radius: 0.375em;
  border: none;
  border: solid 1px rgba(210, 215, 217, 0.75);
  color: inherit;
  display: block;
  outline: 0;
  padding: 0 1em;
  text-decoration: none;
  width: 100%; }
  input[type="text"]:invalid,
  input[type="password"]:invalid,
  input[type="email"]:invalid,
  input[type="tel"]:invalid,
  input[type="search"]:invalid,
  input[type="url"]:invalid,
  select:invalid,
  textarea:invalid {
    box-shadow: none; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="email"]:focus,
  input[type="tel"]:focus,
  input[type="search"]:focus,
  input[type="url"]:focus,
  select:focus,
  textarea:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color); }

select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(210, 215, 217, 0.75)' /%3E%3C/svg%3E");
  background-size: 1.25em;
  background-repeat: no-repeat;
  background-position: calc(100% - 1em) center;
  height: 2.75em;
  padding-right: 2.75em;
  text-overflow: ellipsis; }
  select option {
    color: #3d4449;
    background: #ffffff; }
  select:focus::-ms-value {
    background-color: transparent; }
  select::-ms-expand {
    display: none; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
select {
  height: 2.75em; }

textarea {
  padding: 0.75em 1em; }

input[type="checkbox"],
input[type="radio"] {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  display: block;
  float: left;
  margin-right: -2em;
  opacity: 0;
  width: 1em;
  z-index: -1; }
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    text-decoration: none;
    color: #7f888f;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    font-weight: 400;
    padding-left: 2.4em;
    padding-right: 0.75em;
    position: relative; }
    input[type="checkbox"] + label:before,
    input[type="radio"] + label:before {
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
      line-height: 1;
      text-transform: none !important;
      font-family: 'Font Awesome 5 Free';
      font-weight: 900; }
    input[type="checkbox"] + label:before,
    input[type="radio"] + label:before {
      background: #ffffff;
      border-radius: 0.375em;
      border: solid 1px rgba(210, 215, 217, 0.75);
      content: '';
      display: inline-block;
      font-size: 0.8em;
      height: 2.0625em;
      left: 0;
      line-height: 2.0625em;
      position: absolute;
      text-align: center;
      top: 0;
      width: 2.0625em; }
  input[type="checkbox"]:checked + label:before,
  input[type="radio"]:checked + label:before {
    background: #3d4449;
    border-color: #3d4449;
    color: #ffffff;
    content: '\f00c'; }
  input[type="checkbox"]:focus + label:before,
  input[type="radio"]:focus + label:before {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 1px var(--accent-color); }

input[type="checkbox"] + label:before {
  border-radius: 0.375em; }

input[type="radio"] + label:before {
  border-radius: 100%; }

::-webkit-input-placeholder {
  color: #9fa3a6 !important;
  opacity: 1.0; }

:-moz-placeholder {
  color: #9fa3a6 !important;
  opacity: 1.0; }

::-moz-placeholder {
  color: #9fa3a6 !important;
  opacity: 1.0; }

:-ms-input-placeholder {
  color: #9fa3a6 !important;
  opacity: 1.0; }


/* Button */
input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
  background-color: transparent;
  border-radius: 0.375em;
  /* border: 0; */
  border: none;
  /* box-shadow: inset 0 0 0 2px var(--accent-color); */
  color: var(--accent-color) !important;
  cursor: pointer;
  display: inline-block;
  font-family: "Roboto Slab", serif;
  font-size: 0.8em;
  font-weight: 700;
  /* height: 3.5em; */
  letter-spacing: 0.075em;
  line-height: 3.5em;
  /* padding: 0 2.25em; */
  padding: 0 0 0 0;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap; }
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  input[type="button"]:hover,
  button:hover,
  .button:hover {
    background-color: rgba(245, 106, 106, 0.05); }
  input[type="submit"]:active,
  input[type="reset"]:active,
  input[type="button"]:active,
  button:active,
  .button:active {
    background-color: rgba(245, 106, 106, 0.15); }
  input[type="submit"].icon:before,
  input[type="reset"].icon:before,
  input[type="button"].icon:before,
  button.icon:before,
  .button.icon:before {
    margin-right: 0.5em; }
  input[type="submit"].fit,
  input[type="reset"].fit,
  input[type="button"].fit,
  button.fit,
  .button.fit {
    width: 100%; }
  input[type="submit"].small,
  input[type="reset"].small,
  input[type="button"].small,
  button.small,
  .button.small {
    font-size: 0.6em; }
  input[type="submit"].large,
  input[type="reset"].large,
  input[type="button"].large,
  button.large,
  .button.large {
    font-size: 1em;
    height: 3.65em;
    line-height: 3.65em; }
  input[type="submit"].primary,
  input[type="reset"].primary,
  input[type="button"].primary,
  button.primary,
  .button.primary {
    background-color: var(--accent-color);
    box-shadow: none;
    color: #ffffff !important; }
    input[type="submit"].primary:hover,
    input[type="reset"].primary:hover,
    input[type="button"].primary:hover,
    button.primary:hover,
    .button.primary:hover {
      background-color: #f67878; }
    input[type="submit"].primary:active,
    input[type="reset"].primary:active,
    input[type="button"].primary:active,
    button.primary:active,
    .button.primary:active {
      background-color: #f45c5c; }
  input[type="submit"].disabled, input[type="submit"]:disabled,
  input[type="reset"].disabled,
  input[type="reset"]:disabled,
  input[type="button"].disabled,
  input[type="button"]:disabled,
  button.disabled,
  button:disabled,
  .button.disabled,
  .button:disabled {
    pointer-events: none;
    opacity: 0.25; }

/* Mini Posts */
.mini-posts article {
  border-top: solid 1px rgba(210, 215, 217, 0.75);
  margin-top: 2em;
  padding-top: 2em; }
  .mini-posts article .image {
    display: block;
    margin: 0 0 1.5em 0; }
    .mini-posts article .image img {
      display: block;
      width: 100%; }
  .mini-posts article:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0; }

/* Features -- real card grid, sized to content instead of a fixed 2-column
   split, so a section with only one topic doesn't leave a dead blank half */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 380px));
  gap: 1.25em;
  margin: 0 0 2em 0;
  width: 100%;
}

.features article {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    background: var(--card-bg);
    border: solid 1px var(--card-border);
    border-radius: 0.75em;
    padding: 1.4em 1.5em;
    box-shadow: 0 1px 2px var(--card-shadow);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .features article:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px var(--card-shadow);
    border-color: var(--accent-color);
  }

  /* Stretch the heading link to cover the whole card so the entire box is
     clickable/tappable, not just the small heading text. The ::after's
     nearest positioned ancestor is .features article itself (position:
     relative, above) -- not this <a>, which is left position:static on
     purpose -- so inset:0 sizes it to the full card, not just the link's
     own small text box. z-index keeps it above the card's icon/background
     so the click actually lands on the link. */
  .features article .content h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
  }

    .features article .icon {
      flex-shrink: 0;
      display: block;
      margin: 0 0 0.6em 0;
      text-align: left;
      width: 2.4em;
      height: 2.4em;
      line-height: 2.4em;
    }
      .features article .icon:before {
        color: var(--accent-color);
        font-size: 1.5rem;
        position: relative;
      }
    .features article .content {
      flex-grow: 1;
      width: 100%;
    }
      .features article .content > :last-child {
        margin-bottom: 0; }
  @media screen and (max-width: 980px) {
    .features {
      grid-template-columns: 1fr;
    }
  }

/* Level badges -- Beginner/Intermediate/Advanced, used on page banners and
   the roadmap index so a page's difficulty is scannable at a glance */
.level-badge {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.3em 0.85em;
  border-radius: 2em;
  white-space: nowrap;
}

.level-badge--beginner {
  background: var(--level-beginner-bg);
  color: var(--level-beginner-text);
}

.level-badge--intermediate {
  background: var(--level-intermediate-bg);
  color: var(--level-intermediate-text);
}

.level-badge--advanced {
  background: var(--level-advanced-bg);
  color: var(--level-advanced-text);
}

.level-badge--profiling {
  background: var(--level-profiling-bg);
  color: var(--level-profiling-text);
}

/* Previous / next lesson links, stamped by bin/sync_lesson_nav.py. Plain
   block flow inside a two-column grid; stacks to one column on phones. */
.lesson-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
  margin: 2.5em 0 1em;
  padding-top: 1.5em;
  border-top: solid 1px var(--card-border);
}

.lesson-nav a {
  display: block;
  padding: 0.9em 1.1em;
  border: solid 1px var(--card-border);
  border-radius: 8px;
  border-bottom: solid 1px var(--card-border);
  text-decoration: none;
  color: var(--text-color);
  transition: border-color 0.2s ease;
}

.lesson-nav a:hover {
  border-color: var(--accent-color);
}

.lesson-nav__next {
  grid-column: 2;
  text-align: right;
}

.lesson-nav__dir {
  display: block;
  font-size: 0.8em;
  color: var(--sidebar-submenu-color);
}

.lesson-nav__title {
  display: block;
  font-weight: 600;
  color: var(--accent-color);
}

@media screen and (max-width: 736px) {
  .lesson-nav {
    grid-template-columns: 1fr;
  }

  .lesson-nav__next {
    grid-column: 1;
  }
}

.level-badge--span {
  background: var(--card-bg);
  color: var(--accent-color);
  border: solid 1px var(--card-border);
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0.75em 0 0 0;
}

.code-badge {
  display: inline-block;
  font-family: "Open Sans", sans-serif;
  font-size: 0.75em;
  font-weight: 600;
  padding: 0.3em 0.85em;
  border-radius: 2em;
  background: var(--card-bg);
  border: solid 1px var(--card-border);
  color: var(--text-color);
}
  @media screen and (max-width: 480px) {
    .features article {
      -moz-flex-direction: column;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -moz-align-items: -moz-flex-start;
      -webkit-align-items: -webkit-flex-start;
      -ms-align-items: -ms-flex-start;
      align-items: flex-start; }
      .features article .icon {
        height: 6em;
        line-height: 6em;
        margin: 0 0 1.5em 0;
        width: 6em; }
        .features article .icon:before {
          font-size: 1.5rem; }
        .features article .icon:after {
          height: 4em;
          margin: -2em 0 0 -2em;
          width: 4em; } }
  @media screen and (max-width: 480px) {
    .features article .icon:before {
      font-size: 1.25rem; } }

/* Posts */
.posts {
  display: -moz-flex;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -moz-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 0 2em -6em;
  width: calc(100% + 6em); }
  .posts article {
    -moz-flex-grow: 0;
    -webkit-flex-grow: 0;
    -ms-flex-grow: 0;
    flex-grow: 0;
    -moz-flex-shrink: 1;
    -webkit-flex-shrink: 1;
    -ms-flex-shrink: 1;
    flex-shrink: 1;
    margin: 0 0 6em 6em;
    position: relative;
    width: calc(33.33333% - 6em); }
    .posts article:before {
      background: rgba(210, 215, 217, 0.75);
      content: '';
      display: block;
      height: calc(100% + 6em);
      left: -3em;
      position: absolute;
      top: 0;
      width: 1px; }
    .posts article:after {
      background: rgba(210, 215, 217, 0.75);
      bottom: -3em;
      content: '';
      display: block;
      height: 1px;
      position: absolute;
      right: 0;
      width: calc(100% + 6em); }
    .posts article > :last-child {
      margin-bottom: 0; }
    .posts article .image {
      display: block;
      margin: 0 0 2em 0; }
      .posts article .image img {
        display: block;
        width: 100%; }
  @media screen and (min-width: 1681px) {
    .posts article:nth-child(3n + 1):before {
      display: none; }
    .posts article:nth-child(3n + 1):after {
      width: 100%; }
    .posts article:nth-last-child(1), .posts article:nth-last-child(2), .posts article:nth-last-child(3) {
      margin-bottom: 0; }
      .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before, .posts article:nth-last-child(3):before {
        height: 100%; }
      .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after, .posts article:nth-last-child(3):after {
        display: none; } }
  @media screen and (max-width: 1680px) {
    .posts article {
      width: calc(50% - 6em); }
      .posts article:nth-last-child(3) {
        margin-bottom: 6em; } }
  @media screen and (min-width: 481px) and (max-width: 1680px) {
    .posts article:nth-child(2n + 1):before {
      display: none; }
    .posts article:nth-child(2n + 1):after {
      width: 100%; }
    .posts article:nth-last-child(1), .posts article:nth-last-child(2) {
      margin-bottom: 0; }
      .posts article:nth-last-child(1):before, .posts article:nth-last-child(2):before {
        height: 100%; }
      .posts article:nth-last-child(1):after, .posts article:nth-last-child(2):after {
        display: none; } }
  @media screen and (max-width: 736px) {
    .posts {
      margin: 0 0 2em -4.5em;
      width: calc(100% + 4.5em); }
      .posts article {
        margin: 0 0 4.5em 4.5em;
        width: calc(50% - 4.5em); }
        .posts article:before {
          height: calc(100% + 4.5em);
          left: -2.25em; }
        .posts article:after {
          bottom: -2.25em;
          width: calc(100% + 4.5em); }
        .posts article:nth-last-child(3) {
          margin-bottom: 4.5em; } }
  @media screen and (max-width: 480px) {
    .posts {
      margin: 0 0 2em 0;
      width: 100%; }
      .posts article {
        margin: 0 0 4.5em 0;
        width: 100%; }
        .posts article:before {
          display: none; }
        .posts article:after {
          width: 100%; }
        .posts article:last-child {
          margin-bottom: 0; }
          .posts article:last-child:after {
            display: none; } }

/* Roadmap / topic-index page */
.roadmap-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  margin: 0 0 2em 0;
}

.roadmap-stat {
  background: var(--card-bg);
  border: solid 1px var(--card-border);
  border-radius: 0.75em;
  padding: 1em 1.4em;
  min-width: 140px;
}

.roadmap-stat .num {
  font-family: "Roboto Slab", serif;
  font-weight: 700;
  font-size: 1.8em;
  color: var(--accent-color);
  line-height: 1.1;
}

.roadmap-stat .label {
  font-size: 0.85em;
  color: var(--text-color);
  opacity: 0.75;
}

.roadmap-controls {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg-color);
  padding: 0.75em 0;
  margin-bottom: 1em;
  border-bottom: solid 1px var(--card-border);
}

.roadmap-search {
  width: 100%;
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  padding: 0.65em 1em;
  border-radius: 0.5em;
  border: solid 1px var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  margin-bottom: 0.75em;
}

.roadmap-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin-bottom: 0.5em;
}

.roadmap-filter-btn {
  font-family: "Open Sans", sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  padding: 0.4em 1em;
  border-radius: 2em;
  border: solid 1px var(--card-border);
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.roadmap-filter-btn:hover {
  border-color: var(--accent-color);
}

.roadmap-filter-btn.active {
  border-color: var(--accent-color);
  background: var(--accent-color);
  color: #ffffff;
}

.roadmap-section {
  margin: 2em 0;
}

.roadmap-section h3 {
  display: flex;
  align-items: baseline;
  gap: 0.6em;
}

.roadmap-section h3 .count {
  font-size: 0.6em;
  font-weight: 400;
  opacity: 0.6;
}

.roadmap-item {
  display: flex;
  align-items: center;
  gap: 0.75em;
  flex-wrap: wrap;
  padding: 0.6em 0.2em;
  border-bottom: solid 1px var(--card-border);
}

.roadmap-item .roadmap-num {
  font-family: monospace;
  font-size: 0.85em;
  opacity: 0.5;
  min-width: 2em;
}

.roadmap-item .roadmap-title {
  flex: 1 1 320px;
}

.roadmap-empty {
  padding: 2em 0;
  opacity: 0.7;
  font-style: italic;
}



/* ---------- diagrams (inline SVG figures) ---------- */
.diagram {
  margin: 0 0 2em 0;
  padding: 1.25em 1em 1em 1em;
  background: var(--card-bg);
  border: solid 1px var(--card-border);
  border-radius: 8px;
  overflow-x: auto;
}
.diagram svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 820px;
  margin: 0 auto;
  font-family: inherit;
}
.diagram figcaption {
  margin: 0.9em auto 0 auto;
  max-width: 820px;
  font-size: 0.85em;
  line-height: 1.55;
  color: var(--sidebar-submenu-color);
}
/* diagram primitives */
.dgm-surface   { fill: var(--bg-color); stroke: var(--card-border); stroke-width: 2; }
.dgm-block     { fill: var(--snippet-bg); stroke: var(--card-border); stroke-width: 1.5; }
.dgm-die       { fill: var(--sidebar-current-bg); stroke: var(--accent-color); stroke-width: 2; }
.dgm-unit      { fill: var(--accent-color); opacity: 0.35; }
.dgm-accent    { fill: var(--accent-color); }
.dgm-flow-fast { fill: var(--accent-color); opacity: 0.85; }
.dgm-flow-slow { fill: var(--sidebar-submenu-color); opacity: 0.75; }
.dgm-dash      { fill: none; stroke: var(--sidebar-submenu-color); stroke-width: 1.25; stroke-dasharray: 5 4; opacity: 0.65; }
.dgm-axis      { fill: none; stroke: var(--sidebar-submenu-color); stroke-width: 1.25; }
.dgm-roof      { fill: none; stroke: var(--accent-color); stroke-width: 3; stroke-linejoin: round; }
.dgm-label     { fill: var(--text-color); font-size: 15px; font-weight: 600; }
.dgm-sub       { fill: var(--sidebar-submenu-color); font-size: 12.5px; }
.dgm-badge     { fill: var(--bg-color); font-size: 13px; font-weight: 700; }