@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Inter+Tight:ital,wght@0,300;0,400;1,300;1,400&display=swap');

:root {
  --mono: 'DM Mono', monospace;
  --serif: 'Instrument Serif', Georgia, serif;
}

html[data-typeface='inter'] {
  --serif: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
}

.typeface-switcher {
  position: fixed;
  z-index: 140;
  left: clamp(18px, 2.4vw, 44px);
  bottom: 46px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(238, 233, 223, .34);
  background: rgba(17, 17, 15, .88);
  color: #eee9df;
  font-family: var(--mono);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .11em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
}

.typeface-switcher > span {
  padding: 0 6px;
  opacity: .58;
}

.typeface-switcher button {
  appearance: none;
  min-height: 25px;
  padding: 0 9px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.typeface-switcher button[aria-pressed='true'] {
  background: #eee9df;
  color: #11110f;
}

.typeface-switcher button:focus-visible {
  outline: 1px solid #eee9df;
  outline-offset: 2px;
}

@media (max-width: 760px) {
  .typeface-switcher { bottom: 58px; }
  .typeface-switcher > span { display: none; }
}