@font-face {
  font-family: FFStudyMono;
  src: url('../fonts/space-mono-400.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
.study-switch {
  position: fixed;
  z-index: 30;
  left: clamp(14px, 3.5vw, 64px);
  bottom: max(2px, env(safe-area-inset-bottom));
  color: #f0efe8;
  font: 10px/1.4 FFStudyMono, ui-monospace, monospace;
  letter-spacing: -.02em;
}
.study-switch, .study-switch * { box-sizing: border-box; }
.study-switch > summary {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 36px;
  width: max-content;
  padding: 0 11px;
  border: 1px solid #f0efe82b;
  color: inherit;
  background: #0a0a09;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.study-switch > summary::-webkit-details-marker { display: none; }
.study-switch > summary::after { content: '+'; margin-left: 2px; font-size: 14px; }
.study-switch[open] > summary::after { content: '−'; }
.study-switch > summary span { color: #f0efe898; font-variant-numeric: tabular-nums; }
.study-switch > summary:hover, .study-switch[open] > summary { border-color: #f0efe87a; }
.study-switch > summary:focus-visible, .study-switch a:focus-visible { outline: 2px solid #f0efe8; outline-offset: 3px; }
.study-switch > nav {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(240px, calc(100vw - 28px));
  max-height: calc(100svh - 70px);
  overflow: auto;
  padding: 7px;
  border: 1px solid #f0efe838;
  background: #0a0a09;
  overscroll-behavior: contain;
}
.study-switch:not([open]) > nav { display: none; }
.study-switch a {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 44px;
  padding: 9px 11px;
  color: #f0efe8;
  background: transparent;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.study-switch a > span { color: #f0efe878; font-variant-numeric: tabular-nums; }
.study-switch a:hover { background: #f0efe812; text-decoration: none; }
.study-switch a[aria-current='page'] { background: #f0efe8; color: #0a0a09; }
.study-switch a[aria-current='page'] > span { color: #0a0a0999; }
.stage-footer.stage-footer--studies { justify-content: flex-end; }