/* Shared by React teaching pages and the five standalone Firmware guides. */
.learning-breadcrumb {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 48px));
  margin: 8px auto 2px;
  color: #71667e;
  font: 600 12px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.learning-breadcrumb ol { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; list-style: none; margin: 0; padding: 0; }
.learning-breadcrumb li { display: flex; align-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.learning-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; border-radius: 5px; }
.learning-breadcrumb a:hover { color: #7526aa; }
.learning-breadcrumb a:focus-visible { outline: 3px solid #8b36ce; outline-offset: 2px; }
.learning-breadcrumb [aria-current="page"] { color: #3b294e; overflow-wrap: anywhere; }
.learning-breadcrumb__separator { flex: 0 0 auto; color: #b8acbf; font-size: 17px; font-weight: 400; }
.learning-breadcrumb__brand { width: 64px; flex: 0 0 64px; justify-content: center; }
.learning-breadcrumb__brand img { display: block; width: 58px; height: auto; }
body:has([data-learning-navigation]) nav[aria-label="Breadcrumb"]:not([data-learning-breadcrumb]) { display: none; }
.learning-page-nav {
  --learning-header-height: 88px;
  position: sticky;
  top: var(--learning-header-height);
  z-index: 65;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 5px 10px;
  border: 1px solid #dfd5e9;
  border-radius: 14px;
  background: linear-gradient(115deg, #fffdfefa, #faf7fff5 65%, #f5fafff5);
  color: #3b294e;
  box-shadow: 0 2px 3px #3f245205, 0 8px 24px #56257209, inset 0 1px 0 #fff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font: 14px/1.4 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-align: left;
}
.learning-page-nav *, .learning-page-nav *::before, .learning-page-nav *::after { box-sizing: border-box; }
.learning-page-nav.learning-page-nav--firmware { --learning-header-height: var(--header-height, var(--header, 88px)); }
.learning-page-nav a { color: #493158; text-decoration: none; }
.learning-page-nav > a, .learning-page-nav summary { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 4px 6px; border-radius: 9px; }
.learning-page-nav > a > span:not([aria-hidden]), .learning-page-nav summary > span:not([aria-hidden]) { min-width: 0; }
.learning-page-nav > a > span[aria-hidden] { display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border: 1px solid #e7dced; border-radius: 50%; color: #8244a5; background: #ffffffa8; }
.learning-page-nav small { display: block; font-size: 12px; line-height: 1.6; font-weight: 600; color: #6f607b; }
.learning-page-nav strong { display: block; font-size: 14px; font-weight: 650; overflow-wrap: anywhere; }
.learning-page-nav__next { justify-content: flex-end; text-align: right; }
.learning-page-nav__next > span[aria-hidden] { color: #702bb0; background: #f0e7fa; border-color: #e4d2f5; }
.learning-page-nav summary { justify-content: center; gap: 10px; padding-inline: 16px; cursor: pointer; list-style: none; text-align: left; border: 1px solid #e9def1; background: #f4eef9; }
.learning-page-nav summary::-webkit-details-marker { display: none; }
.learning-page-nav__contents-icon { flex: 0 0 20px; color: #8e5ab0; }
.learning-page-nav summary > span[aria-hidden] { margin-left: 5px; color: #946eae; }
.learning-page-nav details[open] summary { background: #ece0f7; border-color: #d3b7e8; }
.learning-page-nav details[open] summary > span[aria-hidden] { transform: rotate(180deg); }
.learning-page-nav :is(a, summary):hover { color: #7816bc; background: #f0e8f8; }
.learning-page-nav :is(a, summary):focus-visible { outline: 3px solid #8b36ce; outline-offset: 2px; }
.learning-page-nav__menu { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; max-height: var(--learning-menu-height, calc(100svh - var(--learning-header-height) - 160px)); overflow-y: auto; overscroll-behavior: contain; padding: 20px; border: 1px solid #dfd5e9; border-radius: 14px; background: linear-gradient(120deg, #fff, #fcfaff); box-shadow: 0 18px 48px #45235c24; }
.learning-page-nav__menu > div { min-width: 0; }
.learning-page-nav__menu > div + div { padding-left: 24px; border-left: 1px solid #eee7f3; }
.learning-page-nav__menu p { margin: 0 0 10px; color: #6f607b; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.learning-page-nav__menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.learning-page-nav__menu a { display: flex; align-items: center; min-height: 44px; gap: 10px; padding: 9px; font-size: 14px; font-weight: 600; overflow-wrap: anywhere; border-radius: 8px; }
.learning-page-nav__menu a > span { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 6px; background: #f4eef9; color: #7d558e; font-size: 12px; font-variant-numeric: tabular-nums; }
.learning-page-nav__menu a[aria-current="page"] { background: #f0e6f9; color: #671fa0; box-shadow: inset 3px 0 #9958c2; }
.learning-page-nav__menu a[aria-current="page"] > span { background: #e5d3f3; color: #7c3da7; }
.learning-page-nav__overview { border-bottom: 1px solid #ede2f3; margin-bottom: 6px; }
html:has(.learning-page-nav) { scroll-padding-top: 0; }
body:has(.learning-page-nav) :is(main, [role="main"]) [id] { scroll-margin-top: var(--learning-anchor-offset, 182px); }
body:has(.learning-page-nav) [data-floating-contents] { top: var(--learning-anchor-offset, 182px); max-height: calc(100svh - var(--learning-anchor-offset, 182px) - 20px); }
@media (max-width: 1320px) {
  body:has(.learning-page-nav) [data-floating-contents] { display: none; }
  body:has(.learning-page-nav) [data-split-topic-layout] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .learning-breadcrumb { width: calc(100% - 28px); margin-top: 4px; font-size: 12px; }
  .learning-breadcrumb ol { gap: 0 8px; }
  .learning-breadcrumb li { gap: 8px; }
  .learning-page-nav { --learning-header-height: 68px; width: calc(100% - 28px); gap: 6px; padding: 4px 6px; border-radius: 12px; }
  .learning-page-nav > a { gap: 6px; padding-inline: 2px; }
  .learning-page-nav > a > span[aria-hidden] { flex-basis: 22px; width: 22px; height: 22px; font-size: 12px; }
  .learning-page-nav > a strong { display: none; }
  .learning-page-nav > a small { color: #542d73; font-size: 14px; font-weight: 650; }
  .learning-page-nav summary { gap: 6px; padding-inline: 9px; }
  .learning-page-nav__contents-icon { display: none; }
  .learning-page-nav__menu { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .learning-page-nav__menu > div + div { padding: 14px 0 0; border-left: 0; border-top: 1px solid #eee7f3; }
  body:has(.learning-page-nav) :is(main, [role="main"]) [id] { scroll-margin-top: var(--learning-anchor-offset, 162px); }
}
@media print { .learning-page-nav { display: none; } }
@media (max-width: 380px) {
  .learning-page-nav { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px; }
  .learning-page-nav > a { column-gap: 4px; }
  .learning-page-nav > a > span[aria-hidden] { flex-basis: 16px; width: 16px; height: 22px; border: 0; background: none; }
  .learning-page-nav summary { padding-inline: 7px; }
  .learning-page-nav summary > span[aria-hidden] { margin-left: 0; }
}