@view-transition {
  navigation: auto;
}

::view-transition-group(root),
::view-transition-group(nav-links),
::view-transition-group(nav-label),
::view-transition-old(*),
::view-transition-new(*) {
  animation: none;
}

::view-transition-old(nav-links),
::view-transition-old(nav-label) {
  opacity: 0;
}

::view-transition-group(nav-pill) {
  animation-duration: .5s;
  animation-timing-function: cubic-bezier(.23, 1, .32, 1.1);
  overflow: hidden;
  border-radius: 20px;
}

body {
  margin: 0;
  font: 1em system-ui;
  background: #eee;
}

header {
  padding: 20px;
  background: #fff;
}

.pill {
  position: absolute;
  position-anchor: --nav-active;
  position-area: center;
  width: anchor-size();
  height: anchor-size();
  border-radius: 20px;
  background: #eee;
  view-transition-name: nav-pill;
}

nav {
  ul {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    view-transition-name: nav-links;

    @media (width > 550px) {
      display: grid;
      grid: auto / auto-flow;
      justify-content: center;
    }
  }

  a {
    display: block;
    padding: 10px 20px;
    font-weight: 600;
    text-decoration: none;
    color: #777;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
  }

  [aria-current] {
    anchor-name: --nav-active;
    view-transition-name: nav-label;
    cursor: default;
    color: #000;
  }
}

main {
  padding-top: 3em;
  text-align: center;
}