/* Reading styles for the programming guide, scoped to its article. */
.programming-guide {
  max-width: 820px;
  margin: 16px auto 64px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.75;
  color: #243247;
  overflow-wrap: break-word;
}

.programming-guide h1 {
  margin: 0 0 16px;
  font-size: 36px;
  line-height: 1.2;
  font-weight: 700;
  color: #172536;
}

.programming-guide h2 {
  margin: 48px 0 20px;
  padding-top: 24px;
  border-top: 1px solid #d6dfe8;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 650;
  color: #172536;
  scroll-margin-top: 90px;
}

.programming-guide p { margin: 0 0 20px; }
.programming-guide a { color: #175a94; text-decoration: underline; }
.programming-guide a:hover { color: #103b62; }
.programming-guide a:focus-visible { outline: 3px solid #175a94; outline-offset: 3px; }

.programming-guide .guide-nav {
  margin: 28px 0 36px;
  padding: 20px 24px;
  border: 1px solid #d6dfe8;
  border-radius: 8px;
  background: #f4f7fa;
}
.programming-guide .guide-nav strong { display: block; margin-bottom: 8px; }
.programming-guide .guide-nav ul { margin: 0; padding-left: 22px; }
.programming-guide .guide-nav li { margin: 5px 0; }

.programming-guide code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86em;
  color: #243e59;
  background: #edf2f6;
  border-radius: 4px;
  padding: 2px 5px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.programming-guide div.highlighter-rouge { margin: 24px 0; }
.programming-guide .highlight { background: #f5f7fa; border-radius: 8px; }
.programming-guide pre {
  margin: 0;
  padding: 20px;
  border: 1px solid #d6dfe8;
  border-radius: 8px;
  background: #f5f7fa;
  font-size: 15px;
  line-height: 1.65;
  overflow-x: auto;
}
.programming-guide pre code {
  padding: 0;
  font-size: inherit;
  background: transparent;
  white-space: pre;
  overflow-wrap: normal;
  word-break: normal;
}
.programming-guide .highlight .c,
.programming-guide .highlight .c1,
.programming-guide .highlight .cm { color: #536171; font-style: normal; }

.programming-guide table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 1.55;
}
.programming-guide th,
.programming-guide td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border: 1px solid #d6dfe8;
}
.programming-guide th { background: #eaf0f6; color: #172536; }
.programming-guide tbody tr:nth-child(even) { background: #f7f9fb; }
.programming-guide th:last-child { width: 42%; }

@media (max-width: 600px) {
  .programming-guide { margin-top: 8px; font-size: 17px; }
  .programming-guide h1 { font-size: 29px; }
  .programming-guide h2 { font-size: 23px; margin-top: 36px; }
  .programming-guide .guide-nav { padding: 16px; }
  .programming-guide th, .programming-guide td { padding: 9px 7px; }
  .programming-guide table { font-size: 14px; }
  .programming-guide pre { padding: 14px; font-size: 14px; }
}

@media print {
  .programming-guide { max-width: none; margin: 0; font-size: 11pt; }
  .programming-guide .guide-nav { display: none; }
  .programming-guide h2 { break-after: avoid; }
  .programming-guide pre { white-space: pre-wrap; }
  .programming-guide pre code { white-space: pre-wrap; }
}