/* Figma source: personal website / 起点-首页 (3:962), navigation group (4:55). */
.figma-home__anchors,
body.river-launched .figma-home__anchors,
body.guide-docked .figma-home__anchors {
  position: sticky;
  z-index: 120;
  top: 0;
  right: auto;
  bottom: auto;
  left: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 68px;
  margin: 0;
  padding: 0 13.51%;
  border: 0;
  background: rgba(247, 251, 252, .96);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* The navigator and first chapter share one uninterrupted document flow. */
html body main > #faces {
  margin-top: 0;
}

.figma-home__anchors::before,
body.guide-docked .figma-home__anchors::before {
  position: absolute;
  top: 32px;
  right: calc(13.51% + 36px);
  left: calc(13.51% + 36px);
  height: 1px;
  content: "";
  background: rgba(108, 110, 116, .22);
}

.figma-home__anchors a,
body.guide-docked .figma-home__anchors a {
  position: relative;
  z-index: 1;
  display: block;
  flex: 0 0 72px;
  width: 72px;
  height: 54px;
  margin-top: 8px;
  color: #002f65;
  text-align: center;
}

.figma-home__anchors a span,
body.guide-docked .figma-home__anchors a span {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  color: rgba(47, 47, 47, .72);
  font: 500 10px/10px var(--mono);
  letter-spacing: 1.35px;
}

.figma-home__anchors a i,
.figma-home__anchors a:first-child i,
.figma-home__anchors a:not(.is-active) i,
body.guide-docked .figma-home__anchors a i {
  position: absolute;
  top: 22.5px;
  left: 50%;
  width: 3px;
  height: 3px;
  border: 0;
  border-radius: 50%;
  background: #6c6e74;
  box-shadow: none;
  transform: translateX(-50%) !important;
}

.figma-home__anchors a strong,
body.guide-docked .figma-home__anchors a strong {
  position: absolute;
  top: 29px;
  right: 0;
  left: 0;
  color: #002f65;
  font: 500 11px/14px "Noto Sans SC", sans-serif;
  letter-spacing: .7px;
}

.figma-home__anchors a.is-active span,
body.guide-docked .figma-home__anchors a.is-active span {
  color: #0055ff;
}

.figma-home__anchors a.is-active strong,
body.guide-docked .figma-home__anchors a.is-active strong {
  color: #0479ff;
}

.figma-home__anchors a.is-active i,
body.guide-docked .figma-home__anchors a.is-active i {
  top: 21px;
  width: 6px;
  height: 6px;
  background: url("assets/figma-home/nav-active-node.svg") center / 6px 6px no-repeat;
}

/* Keyboard focus follows the river node instead of boxing the whole nav cell. */
.figma-home__anchors a:focus-visible,
body.guide-docked .figma-home__anchors a:focus-visible {
  outline: 0 !important;
}

.figma-home__anchors a:focus-visible i,
body.guide-docked .figma-home__anchors a:focus-visible i {
  box-shadow: 0 0 0 5px rgba(4, 121, 255, .14), 0 0 0 1px #0479ff !important;
}

.figma-home__anchors a:focus-visible strong,
body.guide-docked .figma-home__anchors a:focus-visible strong {
  color: #0479ff;
}

@media (max-width: 760px) {
  .figma-home__anchors,
  body.river-launched .figma-home__anchors,
  body.guide-docked .figma-home__anchors {
    height: 64px;
    padding: 0 10px;
    overflow: visible;
  }

  .figma-home__anchors::before,
  body.guide-docked .figma-home__anchors::before {
    top: 30px;
    right: 50px;
    left: 50px;
    min-width: 0;
  }

  .figma-home__anchors a,
  body.guide-docked .figma-home__anchors a {
    flex: 1 1 25%;
    width: auto;
    min-width: 0;
    height: 52px;
    margin-top: 6px;
  }
}