:root{
  --b0022-cream:#fbf7ef;
  --b0022-ink:#1f2937;
  --b0022-muted:#5b677a;
  --b0022-mint:#22c55e;
  --b0022-rail:#0f172a;
}

body.theme-b0022{
  background: var(--b0022-cream);
  color: var(--b0022-ink);
}

.b0022-frame{
  min-height:100vh;
}

.b0022-sidebar{
  background: linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.92));
  color: #e5e7eb;
}

.b0022-sidebar a{
  color:#e5e7eb;
}

.b0022-sidebar a:hover{
  color:#ffffff;
}

.b0022-logo{
  font-weight:800;
  letter-spacing:.2px;
  font-size:1.15rem;
}

.b0022-tagline{
  color: rgba(229,231,235,.8);
  font-size:.9rem;
}

.b0022-mag{
  padding: 1.25rem;
}

.b0022-lede{
  border-left: 6px solid var(--b0022-mint);
  padding-left: 1rem;
}

.b0022-notes{
  background: rgba(34,197,94,.06);
  border: 1px solid rgba(34,197,94,.25);
  border-radius: 10px;
  padding: .9rem;
}

.b0022-toc a{
  display:block;
  padding: .35rem .5rem;
  border-radius: 8px;
  color: var(--b0022-muted);
  text-decoration:none;
}

.b0022-toc a.is-active{
  background: rgba(34,197,94,.12);
  color: var(--b0022-ink);
  font-weight:700;
}

.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* Required footer skeleton uses .container */
#footer .container{
  max-width: 1140px;
  margin: 0 auto;
  padding: 1.25rem 1rem;
}

.social [class^="icon-"]::before,
.social [class*=" icon-"]::before{
  content:"";
  display:inline-block;
  width:.7rem;
  height:.7rem;
  border-radius:999px;
  background: var(--b0022-mint);
  opacity:.9;
}
