:root {
  --bg: #f5f5f5;
  --bg-library: #fefefe;
  --fg-500: #111;
  --fg-400: #222;
  --fg-300: #555;
  --fg-100: #999;
  --gutter: 40px;
  --glass-shadow: 0 2px 24px rgba(0, 0, 0, 0.08), 0 0 3px rgba(0, 0, 0, 0.02);
  --chase-blue: color(display-p3 0.05098 0.372549 1 / 1);
  --connectivity-orange: color(display-p3 0.913725 0.631373 0.082353 / 1);
  --nav-gradient: linear-gradient(rgb(100% 100% 100%), rgb(100% 100% 100% / 0.9375) 6.25%, rgb(100% 100% 100% / 0.875) 12.5%, rgb(100% 100% 100% / 0.8125) 18.75%, rgb(100% 100% 100% / 0.75) 25%, rgb(100% 100% 100% / 0.6875) 31.25%, rgb(100% 100% 100% / 0.625) 37.5%, rgb(100% 100% 100% / 0.5625) 43.75%, rgb(100% 100% 100% / 0.5) 50%, rgb(100% 100% 100% / 0.4375) 56.25%, rgb(100% 100% 100% / 0.375) 62.5%, rgb(100% 100% 100% / 0.3125) 68.75%, rgb(100% 100% 100% / 0.25) 75%, rgb(100% 100% 100% / 0.1875) 81.25%, rgb(100% 100% 100% / 0.125) 87.5%, rgb(100% 100% 100% / 0.0625) 93.75%, rgb(100% 100% 100% / 0));
  --bottom-gradient: linear-gradient(0deg, rgb(100% 100% 100%) 0%, rgb(100% 100% 100% / 0.9375) 6.25%, rgb(100% 100% 100% / 0.875) 12.5%, rgb(100% 100% 100% / 0.8125) 18.75%, rgb(100% 100% 100% / 0.75) 25%, rgb(100% 100% 100% / 0.6875) 31.25%, rgb(100% 100% 100% / 0.625) 37.5%, rgb(100% 100% 100% / 0.5625) 43.75%, rgb(100% 100% 100% / 0.5) 50%, rgb(100% 100% 100% / 0.4375) 56.25%, rgb(100% 100% 100% / 0.375) 62.5%, rgb(100% 100% 100% / 0.3125) 68.75%, rgb(100% 100% 100% / 0.25) 75%, rgb(100% 100% 100% / 0.1875) 81.25%, rgb(100% 100% 100% / 0.125) 87.5%, rgb(100% 100% 100% / 0.0625) 93.75%, rgb(100% 100% 100% / 0));
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 16px;
  background: #fff;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.2px;
  text-align: center;
  color: rgba(0, 0, 0, 0.5);
}

main {
  width: 100%;
  max-width: 420px;
}

p + p {
  margin-top: 32px;
}

.serif {
  font-family: "Averia Serif Libre", serif;
  font-weight: 300;
  letter-spacing: normal;
}

a {
  color: #1a1a1a;
  text-decoration: none;
}

.highlight {
  --color: rgb(0, 170, 255);
  display: inline;
  margin: -0.12671em -0.402962em -0.17329em -0.0970383em;
  padding: 0.12671em 0.402962em 0.17329em 0.0970383em;
  border-radius: 0.5em 0.3em;
  background-color: transparent;
  background-image: linear-gradient(
    89.7deg,
    color-mix(in srgb, var(--color), transparent 50%),
    color-mix(in srgb, var(--color), transparent 90%) 4%,
    color-mix(in srgb, var(--color), transparent 70%) 96%,
    color-mix(in srgb, var(--color), transparent 30%)
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 96px;
  pointer-events: none;
}

.bottom-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bottom-gradient);
  opacity: 0.5;
}

.pill-nav {
  position: fixed;
  bottom: 24px;
  left: 50%;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 6px;
  border-radius: 9999px;
  background: rgba(250, 250, 250, 0.8);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: normal;
  -webkit-font-smoothing: antialiased;
  transform: translateX(-50%);
  transition: opacity 0.3s cubic-bezier(0, 0, 0.2, 1), filter 0.3s cubic-bezier(0, 0, 0.2, 1), transform 0.3s cubic-bezier(0, 0, 0.2, 1);
  pointer-events: auto;
}

/* 1px gradient glass border, cut out of a full-size layer with a mask */
.pill-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: 999px;
  background: linear-gradient(315deg, #fff, rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.1) 70%, #fff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

@media (min-width: 768px) {
  .pill-nav {
    display: flex;
  }
}

/* The selected pill lives inside the current page's tab. Moving between
   pages, the browser's view transition glides it from the old tab to the
   new one instead of redrawing it in place. */
.pill-indicator {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.04);
  box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.04);
  pointer-events: none;
  view-transition-name: pill-indicator;
}

.pill-item {
  position: relative;
  display: block;
  height: 36px;
  padding: 7px 12px;
  border: 0;
  border-radius: 9999px;
  background: none;
  font: inherit;
  font-weight: 500;
  color: #111;
  text-decoration: none;
  opacity: 0.6;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1), transform 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.pill-item.is-active {
  opacity: 1;
}

.pill-label {
  position: relative;
  display: block;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0, 0, 0.2, 1), opacity 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.pill-item:active .pill-label {
  transform: scale(0.9);
}

/* Cross-page transitions */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

.pill-nav {
  view-transition-name: pill-nav;
}

/* Labels get their own layers so they stay above the gliding pill */
.pill-item:nth-of-type(1) .pill-label { view-transition-name: pill-label-1; }
.pill-item:nth-of-type(2) .pill-label { view-transition-name: pill-label-2; }
.pill-item:nth-of-type(3) .pill-label { view-transition-name: pill-label-3; }

::view-transition-group(pill-indicator) {
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

::view-transition-old(pill-indicator),
::view-transition-new(pill-indicator) {
  height: 100%;
}

::view-transition-old(root),
::view-transition-new(root),
::view-transition-group(pill-label-1),
::view-transition-group(pill-label-2),
::view-transition-group(pill-label-3),
::view-transition-old(pill-label-1),
::view-transition-new(pill-label-1),
::view-transition-old(pill-label-2),
::view-transition-new(pill-label-2),
::view-transition-old(pill-label-3),
::view-transition-new(pill-label-3) {
  animation-duration: 0.3s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}