/* Stable learning navigation; original page content remains readable. */
:root { --qz-learning-bar-height: 72px; }
.qz-learning-tabs {
  position: sticky;
  top: var(--qz-header-height);
  z-index: 90;
  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--qz-line);
  background: var(--qz-canvas);
  color: var(--qz-ink);
  font-family: var(--qz-font-sans);
}
.whitepaper-original > .qz-learning-tabs { max-width: none; margin: 0; }
.qz-learning-tabset {
  width: min(100% - 32px, 560px);
  height: var(--qz-learning-bar-height);
  margin-inline: auto;
  padding-block: 8px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.qz-learning-tabs a {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: var(--qz-radius-control);
  color: var(--qz-ink-secondary);
  font-size: var(--qc-ui, 14px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.qz-learning-tabs a:hover { background: var(--qz-surface); color: var(--qz-ink); }
.qz-learning-tabs a[aria-current="page"] { background: var(--qz-surface); color: var(--qz-ink); font-weight: 600; }
.qz-learning-tabs a:focus-visible { outline: 2px solid var(--qz-focus); outline-offset: 2px; }
.whitepaper-original .progress-wrap { top: calc(var(--qz-header-height) + var(--qz-learning-bar-height)); z-index: 91; }
.whitepaper-original .section { scroll-margin-top: calc(var(--qz-header-height) + var(--qz-learning-bar-height) + 20px); }
.beginner-page .beginner-toc { top: calc(var(--qz-header-height) + var(--qz-learning-bar-height) + 20px); max-height: calc(100dvh - var(--qz-header-height) - var(--qz-learning-bar-height) - 40px); }
.beginner-page .beginner-reading-tools { top: calc(var(--qz-header-height) + var(--qz-learning-bar-height)); }
.beginner-page [data-beginner-section] { scroll-margin-top: calc(var(--qz-header-height) + var(--qz-learning-bar-height) + 20px); }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .qz-header { view-transition-name: qz-learning-header; }
  .qz-learning-tabs { view-transition-name: qz-learning-tabs; }
  ::view-transition-group(*) { animation-duration: 180ms; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  ::view-transition-old(root) { animation: qz-learning-out 120ms ease-out both; }
  ::view-transition-new(root) { animation: qz-learning-in 180ms cubic-bezier(.16, 1, .3, 1) both; }
  ::view-transition-group(qz-learning-header), ::view-transition-group(qz-learning-tabs) { animation: none; }
  ::view-transition-old(qz-learning-header), ::view-transition-old(qz-learning-tabs) { animation: none; opacity: 0; }
  ::view-transition-new(qz-learning-header), ::view-transition-new(qz-learning-tabs) { animation: none; }
  .beginner-page > .beginner-shell, .whitepaper-original > .section.hero { animation: qz-learning-arrive 180ms cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes qz-learning-out { to { opacity: 0; } }
@keyframes qz-learning-in { from { opacity: 0; } }
@keyframes qz-learning-arrive { from { opacity: .88; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .qz-learning-tabs a { transition: none; }
}
@media print { .qz-learning-tabs { display: none; } }