/* frontend/styles/index.css */
:root {
  --paper: #f7f7f2;
  --ink: #111;
  --muted: #4c4c4c;
  --rule: #222;
  --hairline: #b9b9b0;
  --grid-red: #e34444;
  --blue: #1c4f86;
}
* {
  box-sizing: border-box;
}
body {
  background: #080908;
  color: #111;
  color: var(--ink);
  font-family:
    Helvetica,
    Arial,
    sans-serif;
  font-size: 100%;
  line-height: 1.35;
  margin: 0;
}
a {
  color: #111;
  color: var(--ink);
}
body > header,
body > nav {
  display: none;
}
main {
  margin: 0 auto;
  max-width: 88rem;
  min-height: 100vh;
  padding: clamp(1rem, 3vw, 2.5rem);
}
.manual-sheet {
  background: #f7f7f2;
  background: var(--paper);
  box-shadow: 0 0 0 1px #d8d8d0;
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr);
  margin: 0 auto;
  max-width: 74rem;
  min-height: calc(100vh - clamp(2rem, 6vw, 5rem));
  overflow: hidden;
  position: relative;
}
.binder {
  align-content: start;
  background: #fff;
  border-right: 1px solid #b9b9b0;
  border-right: 1px solid var(--hairline);
  display: grid;
  grid-gap: clamp(0.72rem, 1.5vw, 1rem);
  gap: clamp(0.72rem, 1.5vw, 1rem);
  justify-items: center;
  padding: 0.72rem 0;
  grid-row: 1 / span 7;
}
.binder span {
  background: #050505;
  border-radius: 999px;
  display: block;
  height: 1.32rem;
  width: 1.32rem;
}
.manual-cover,
.manual-intro,
.manual-index,
.manual-procedure,
.manual-specimen,
.manual-footer {
  margin-left: clamp(1.4rem, 4vw, 4.2rem);
  margin-right: clamp(1.4rem, 4vw, 3.6rem);
}
.manual-cover {
  border-bottom: 1px solid #222;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-gap: clamp(2rem, 8vw, 7rem);
  gap: clamp(2rem, 8vw, 7rem);
  grid-template-columns: 1fr 1fr;
  min-height: 24rem;
  padding-top: 2.1rem;
}
.manual-id {
  display: flex;
  gap: 1em;
}
.manual-id,
.manual-number {
  font-size: clamp(0.92rem, 1.5vw, 1.15rem);
  font-weight: 700;
  line-height: 1.15;
}
.manual-id img {
  display: block;
  height: 3.1rem;
  margin-bottom: 0.8rem;
  width: 3.1rem;
}
.manual-id p,
.manual-number p,
.manual-footer p {
  margin: 0;
}
.manual-number {
  justify-self: end;
  text-align: left;
}
h1,
h2,
h3,
p,
ol,
pre,
dl {
  margin: 0;
}
.cover-title {
  align-self: end;
  grid-column: 1 / -1;
  padding-bottom: 2rem;
}
.cover-title h1 {
  font-size: clamp(3rem, 12vw, 9.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.82;
}
.cover-title p {
  display: inline-block;
  font-size: clamp(1.3rem, 3.2vw, 2.65rem);
  font-weight: 700;
  line-height: 1;
  margin-top: 0.5rem;
  padding-top: 0.55rem;
}
h2 {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.08;
}
code {
  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;
  font-size: 0.92em;
}
.manual-intro {
  padding: 2rem 0 3.2rem;
}
.manual-intro h2,
.manual-procedure h2,
.manual-specimen h2 {
  margin-bottom: 1rem;
}
.columns {
  display: flex;
  justify-content: space-between;
  max-width: 58rem;
}
.columns p {
  page-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
  margin-bottom: 1rem;
  gap: 4rem;
}
.columns > * {
  flex: 1 1;
}
.manual-index {
  border-top: 1px solid #222;
  border-top: 1px solid var(--rule);
}
.index-row {
  align-items: baseline;
  border-bottom: 1px solid #222;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: minmax(9rem, 0.8fr) minmax(0, 2fr) 1.5rem;
  padding: 0.58rem 0;
}
.index-row h2 {
  font-size: 0.95rem;
}
.index-row p {
  align-items: baseline;
  color: #111;
  color: var(--ink);
  display: flex;
  gap: 0.4rem;
  grid-column: 2;
  overflow: hidden;
}
.index-row p > span {
  min-width: 0;
}
.index-row p::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='32' viewBox='0 0 8 12'%3E%3Ccircle cx='1' cy='8' r='1' fill='%23777'/%3E%3C/svg%3E");
  background-position: left center;
  background-repeat: repeat-x;
  content: "";
  flex: 1 1 auto;
  height: 0.45em;
  min-width: 1.5rem;
}
.index-row > span {
  font-size: 0.9rem;
  grid-column: 3;
  justify-self: end;
}
.manual-procedure {
  display: grid;
  grid-gap: 1.2rem;
  gap: 1.2rem;
  grid-template-columns: minmax(9rem, 0.55fr) minmax(0, 1.45fr);
  padding: 3.4rem 0;
}
.manual-procedure ol {
  counter-reset: steps;
  display: grid;
  grid-gap: 0.9rem;
  gap: 0.9rem;
  list-style: none;
  padding: 0;
}
.manual-procedure li {
  border-top: 1px solid #b9b9b0;
  border-top: 1px solid var(--hairline);
  display: grid;
  grid-gap: 0.8rem;
  gap: 0.8rem;
  grid-template-columns: 3rem minmax(0, 1fr);
  padding-top: 0.7rem;
}
.manual-procedure li::before {
  color: #1c4f86;
  color: var(--blue);
  content: counter(steps, decimal-leading-zero);
  counter-increment: steps;
  font-size: 0.78rem;
  font-weight: 800;
}
.manual-procedure li > span {
  min-width: 0;
}
.manual-procedure strong {
  display: block;
  font-size: 0.98rem;
}
.manual-specimen {
  border-top: 1px solid #222;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-gap: 2rem;
  gap: 2rem;
  grid-template-columns: minmax(12rem, 0.65fr) minmax(0, 1.35fr);
  padding: 2.4rem 0 3.5rem;
}
.manual-specimen p {
  margin-bottom: 1rem;
}
.figure-grid {
  background:
    linear-gradient(
      to right,
      transparent 0 22%,
      rgba(227, 68, 68, 0.68) 22% calc(22% + 1px),
      transparent calc(22% + 1px) 48%,
      rgba(227, 68, 68, 0.68) 48% calc(48% + 1px),
      transparent calc(48% + 1px) 74%,
      rgba(227, 68, 68, 0.68) 74% calc(74% + 1px),
      transparent calc(74% + 1px)),
    linear-gradient(
      to bottom,
      transparent 0 28%,
      rgba(227, 68, 68, 0.48) 28% calc(28% + 1px),
      transparent calc(28% + 1px) 72%,
      rgba(227, 68, 68, 0.48) 72% calc(72% + 1px),
      transparent calc(72% + 1px));
  border: 1px solid #222;
  border: 1px solid var(--rule);
  display: grid;
  grid-gap: 1.2rem;
  gap: 1.2rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  padding: 1rem;
}
.figure {
  background: #f7f7f2;
  background: var(--paper);
  border-top: 0.34rem solid #111;
  border-top: 0.34rem solid var(--ink);
  display: grid;
  grid-gap: 0.65rem;
  gap: 0.65rem;
  margin: 0;
  padding-top: 0.7rem;
}
.figure--wide {
  grid-column: 1 / -1;
}
.figure--wide img {
  height: inherit !important;
}
.figure img {
  background: #fff;
  border: 1px solid #b9b9b0;
  border: 1px solid var(--hairline);
  display: block;
  height: auto;
  max-height: 34rem;
  -o-object-fit: contain;
  object-fit: contain;
  width: 100%;
  height: 200px;
}
a.big-link {
  text-decoration: underline;
}
a.big-link:hover {
  color: #e34444 !important;
  color: var(--grid-red) !important;
}
a.big-link:visited {
  color: #111;
  color: var(--ink);
}
.figure figcaption {
  color: #4c4c4c;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.25;
  margin: 0;
}
.manual-footer {
  align-items: baseline;
  border-top: 1px solid #222;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-gap: 1rem;
  gap: 1rem;
  grid-template-columns: minmax(8rem, 0.4fr) minmax(0, 1fr) auto;
  padding: 1rem 0 4rem;
}
.manual-footer p:first-child {
  font-weight: 800;
}
.manual-footer a {
  border-bottom: 2px solid #111;
  border-bottom: 2px solid var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.folio {
  bottom: 1.2rem;
  font-size: 0.85rem;
  position: absolute;
  right: clamp(1.4rem, 4vw, 3.6rem);
}
footer {
  display: none;
}
.b-lang {
  color: #1c4f86;
  color: var(--blue);
}
.b-export {
  color: #e34444;
  color: var(--grid-red);
}
@media (max-width: 820px) {
  main {
    padding: 0;
  }
  .manual-sheet {
    --binder-width: 3rem;
    grid-template-columns: 3rem calc(100% - 3rem);
    grid-template-columns: var(--binder-width) calc(100% - var(--binder-width));
    min-height: 100vh;
    width: 100%;
  }
  .binder {
    gap: 0.58rem;
  }
  .binder span {
    height: 1rem;
    width: 1rem;
  }
  .manual-cover,
  .manual-intro,
  .manual-index,
  .manual-procedure,
  .manual-specimen,
  .manual-footer {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .manual-cover,
  .manual-procedure,
  .manual-specimen,
  .manual-footer,
  .figure-grid {
    grid-template-columns: 1fr;
  }
  .manual-cover {
    min-height: 18rem;
  }
  .manual-number {
    justify-self: start;
  }
  .index-row {
    grid-template-columns: 1fr auto;
  }
  .index-row p {
    grid-column: 1 / -1;
  }
  .index-row > span {
    grid-column: 2;
  }
  .figure--wide {
    grid-column: auto;
  }
}

/* frontend/styles/syntax-highlighting.css */
pre.highlight {
  padding: 16px;
  background-color: #F6F8FA;
}
.highlight .hll {
  background-color: #ffffcc;
}
.highlight .c {
  color: #999988;
  font-style: italic;
}
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2;
}
.highlight .k {
  color: #000000;
  font-weight: bold;
}
.highlight .o {
  color: #000000;
  font-weight: bold;
}
.highlight .cm {
  color: #999988;
  font-style: italic;
}
.highlight .cp {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .c1 {
  color: #999988;
  font-style: italic;
}
.highlight .cs {
  color: #999999;
  font-weight: bold;
  font-style: italic;
}
.highlight .gd {
  color: #000000;
  background-color: #ffdddd;
}
.highlight .ge {
  color: #000000;
  font-style: italic;
}
.highlight .gr {
  color: #aa0000;
}
.highlight .gh {
  color: #999999;
}
.highlight .gi {
  color: #000000;
  background-color: #ddffdd;
}
.highlight .go {
  color: #888888;
}
.highlight .gp {
  color: #555555;
}
.highlight .gs {
  font-weight: bold;
}
.highlight .gu {
  color: #aaaaaa;
}
.highlight .gt {
  color: #aa0000;
}
.highlight .kc {
  color: #000000;
  font-weight: bold;
}
.highlight .kd {
  color: #000000;
  font-weight: bold;
}
.highlight .kn {
  color: #000000;
  font-weight: bold;
}
.highlight .kp {
  color: #000000;
  font-weight: bold;
}
.highlight .kr {
  color: #000000;
  font-weight: bold;
}
.highlight .kt {
  color: #445588;
  font-weight: bold;
}
.highlight .m {
  color: #009999;
}
.highlight .s {
  color: #d01040;
}
.highlight .na {
  color: #008080;
}
.highlight .nb {
  color: #0086B3;
}
.highlight .nc {
  color: #445588;
  font-weight: bold;
}
.highlight .no {
  color: #008080;
}
.highlight .nd {
  color: #3c5d5d;
  font-weight: bold;
}
.highlight .ni {
  color: #800080;
}
.highlight .ne {
  color: #990000;
  font-weight: bold;
}
.highlight .nf {
  color: #990000;
  font-weight: bold;
}
.highlight .nl {
  color: #990000;
  font-weight: bold;
}
.highlight .nn {
  color: #555555;
}
.highlight .nt {
  color: #000080;
}
.highlight .nv {
  color: #008080;
}
.highlight .ow {
  color: #000000;
  font-weight: bold;
}
.highlight .w {
  color: #bbbbbb;
}
.highlight .mf {
  color: #009999;
}
.highlight .mh {
  color: #009999;
}
.highlight .mi {
  color: #009999;
}
.highlight .mo {
  color: #009999;
}
.highlight .sb {
  color: #d01040;
}
.highlight .sc {
  color: #d01040;
}
.highlight .sd {
  color: #d01040;
}
.highlight .s2 {
  color: #d01040;
}
.highlight .se {
  color: #d01040;
}
.highlight .sh {
  color: #d01040;
}
.highlight .si {
  color: #d01040;
}
.highlight .sx {
  color: #d01040;
}
.highlight .sr {
  color: #009926;
}
.highlight .s1 {
  color: #d01040;
}
.highlight .ss {
  color: #990073;
}
.highlight .bp {
  color: #999999;
}
.highlight .vc {
  color: #008080;
}
.highlight .vg {
  color: #008080;
}
.highlight .vi {
  color: #008080;
}
.highlight .il {
  color: #009999;
}
/*# sourceMappingURL=/_bridgetown/static/index.DU2354GH.css.map */