@layer modules {
  .mincore-element-key-root {
    position: relative;
  }

  .mincore-element-key {
    display: inline-flex;
    margin: 0 0 0.5rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, Canvas 82%, transparent);
    font: 600 0.72rem/1 ui-monospace, monospace;
    letter-spacing: 0.06em;
    user-select: all;
  }

  .mincore-section-nav {
    position: fixed;
    z-index: 20;
    inset-block-start: 50%;
    inset-inline-end: max(0.25rem, env(safe-area-inset-right));
    max-block-size: calc(100dvh - 2rem);
    color: inherit;
    background: transparent;
    transform: translateY(-50%);
  }

  .mincore-section-nav__list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mincore-section-nav__item {
    margin: 0;
  }

  .mincore-section-nav__link {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
    block-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0;
    border-radius: 50%;
    color: inherit;
    text-decoration: none;
  }

  .mincore-section-nav__dot {
    inline-size: 0.38rem;
    block-size: 0.38rem;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    opacity: 0.56;
    transition: opacity 160ms ease, transform 160ms ease, background-color 160ms ease;
  }

  .mincore-section-nav__label {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: calc(100% + 0.4rem);
    inline-size: max-content;
    max-inline-size: min(15rem, calc(100vw - 5rem));
    padding: 0.35rem 0.5rem;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
    border-radius: 0.2rem;
    background: color-mix(in srgb, Canvas 92%, transparent);
    box-shadow: 0 0.2rem 0.8rem color-mix(in srgb, currentColor 8%, transparent);
    font-size: 0.78rem;
    line-height: 1.25;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0.25rem, -50%, 0);
    transition: opacity 160ms ease, transform 160ms ease;
    white-space: nowrap;
  }

  .mincore-section-nav__link:hover .mincore-section-nav__dot,
  .mincore-section-nav__link:focus-visible .mincore-section-nav__dot,
  .mincore-section-nav__link[aria-current="location"] .mincore-section-nav__dot {
    opacity: 1;
    transform: scale(1.28);
  }

  .mincore-section-nav__link[aria-current="location"] .mincore-section-nav__dot {
    background: currentColor;
  }

  .mincore-section-nav__link:hover .mincore-section-nav__label,
  .mincore-section-nav__link:focus-visible .mincore-section-nav__label {
    opacity: 0.92;
    transform: translate3d(0, -50%, 0);
  }

  .mincore-section-nav__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -4px;
  }

  @media (max-width: 47.99rem) {
    .mincore-section-nav {
      inset-block-start: auto;
      inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
      inset-inline: 0.5rem;
      max-block-size: none;
      overflow-x: auto;
      overscroll-behavior-inline: contain;
      scrollbar-width: none;
      transform: none;
    }

    .mincore-section-nav::-webkit-scrollbar {
      display: none;
    }

    .mincore-section-nav__list {
      display: flex;
      inline-size: max-content;
      min-inline-size: 100%;
      justify-content: center;
    }

    .mincore-section-nav__label {
      inset-block-start: auto;
      inset-block-end: calc(100% + 0.35rem);
      inset-inline: 50% auto;
      max-inline-size: min(13rem, calc(100vw - 2rem));
      transform: translate3d(-50%, 0.25rem, 0);
    }

    .mincore-section-nav__link:hover .mincore-section-nav__label,
    .mincore-section-nav__link:focus-visible .mincore-section-nav__label {
      transform: translate3d(-50%, 0, 0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .mincore-section-nav__dot,
    .mincore-section-nav__label {
      transition: none;
    }
  }
}