@layer application {
.layout-mode-feedback {
  --layout-mode-feedback-gap: clamp(
    0.5rem,
    calc(0.85 * var(--site-scale-unit)),
    0.8rem
  );
  --layout-mode-feedback-min-inline-size: clamp(
    12rem,
    calc(13.5 * var(--site-scale-unit)),
    13.25rem
  );
  --layout-mode-feedback-padding-block: clamp(
    0.68rem,
    calc(0.82 * var(--site-scale-unit)),
    0.8rem
  );
  --layout-mode-feedback-padding-inline: clamp(
    1.2rem,
    calc(1.45 * var(--site-scale-unit)),
    1.4rem
  );
  --layout-mode-feedback-power-duration: 460ms;
  --layout-mode-feedback-pulse-duration: 360ms;
  --layout-mode-feedback-pulse-delay: 520ms;
  --layout-mode-feedback-visible-duration: 2400ms;
  --layout-mode-feedback-close-duration: 360ms;

  position: fixed;
  z-index: calc(var(--site-layer-navigation) + 1);
  inset-block-start: calc(
    var(
      --layout-mode-feedback-navigation-end,
      calc(
        var(--route-navigation-dock-offset)
        + var(--site-navigation-height)
      )
    )
    + var(--layout-mode-feedback-gap)
  );
  inset-inline-start: var(--layout-mode-feedback-inline-center, 50%);
  display: grid;
  min-inline-size: var(--layout-mode-feedback-min-inline-size);
  max-inline-size: calc(100vw - 2 * var(--site-page-inline-padding));
  place-items: center;
  padding: var(--layout-mode-feedback-padding-block)
    var(--layout-mode-feedback-padding-inline);
  overflow: hidden;
  border: 0;
  border-radius: 999px;
  background: #8ca584;
  color: #fff;
  font-family: var(--type-family-compact-text);
  font-size: var(--type-size-layout-mode-feedback);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.045em;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) scaleX(0.12) scaleY(0.06);
  transform-origin: center;
  pointer-events: none;
}

.layout-mode-feedback.is-visible {
  visibility: visible;
  animation:
    layout-mode-feedback-power-on
      var(--layout-mode-feedback-power-duration) var(--site-ease-out) both,
    layout-mode-feedback-pulse
      var(--layout-mode-feedback-pulse-duration)
      var(--layout-mode-feedback-pulse-delay) ease-in-out 3,
    layout-mode-feedback-lifetime
      var(--layout-mode-feedback-visible-duration) linear;
}

.layout-mode-feedback.is-closing {
  visibility: visible;
  animation: layout-mode-feedback-power-off
    var(--layout-mode-feedback-close-duration) ease-in both;
}

.layout-mode-feedback__content {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.layout-mode-feedback.is-visible .layout-mode-feedback__content {
  animation: layout-mode-feedback-content-on
    var(--layout-mode-feedback-power-duration) ease both;
}

.layout-mode-feedback.is-closing .layout-mode-feedback__content {
  animation: layout-mode-feedback-content-off 120ms ease both;
}

.layout-mode-feedback__icon {
  display: none;
  flex: 0 0 auto;
  inline-size: 1.25em;
  block-size: 1.25em;
  fill: none;
  stroke: currentcolor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.layout-mode-feedback[data-layout-mode="desktop"]
  .layout-mode-feedback__icon--desktop,
.layout-mode-feedback[data-layout-mode="tablet"]
  .layout-mode-feedback__icon--tablet,
.layout-mode-feedback[data-layout-mode="smartphone"]
  .layout-mode-feedback__icon--smartphone {
  display: block;
}

@keyframes layout-mode-feedback-power-on {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleX(0.12) scaleY(0.06);
  }

  12% {
    opacity: 1;
  }

  42% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(0.06);
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }
}

@keyframes layout-mode-feedback-content-on {
  0%,
  58% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes layout-mode-feedback-pulse {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.065);
  }
}

@keyframes layout-mode-feedback-lifetime {
  from,
  to {
    visibility: visible;
  }
}

@keyframes layout-mode-feedback-power-off {
  0% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(1);
  }

  48% {
    opacity: 1;
    transform: translateX(-50%) scaleX(1) scaleY(0.06);
  }

  84% {
    opacity: 1;
    transform: translateX(-50%) scaleX(0.12) scaleY(0.06);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scaleX(0.12) scaleY(0.06);
  }
}

@keyframes layout-mode-feedback-content-off {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.site-footer__layout-mode-value {
  display: none;
}

.site-footer__layout-mode-value--desktop {
  display: inline;
}

@media (max-width: 75rem) {
  .layout-mode-feedback {
    --layout-mode-feedback-min-inline-size: clamp(
      11.25rem,
      calc(12.25 * var(--site-scale-unit)),
      12rem
    );
    --layout-mode-feedback-padding-block: clamp(
      0.62rem,
      calc(0.72 * var(--site-scale-unit)),
      0.7rem
    );
    --layout-mode-feedback-padding-inline: clamp(
      1.05rem,
      calc(1.2 * var(--site-scale-unit)),
      1.2rem
    );
  }

  .site-footer__layout-mode-value--desktop {
    display: none;
  }

  .site-footer__layout-mode-value--tablet {
    display: inline;
  }
}

@media (max-width: 46rem) {
  .layout-mode-feedback {
    --layout-mode-feedback-min-inline-size: clamp(
      10.5rem,
      calc(12.5 * var(--site-scale-unit)),
      11.5rem
    );
    --layout-mode-feedback-padding-block: clamp(
      0.56rem,
      calc(0.74 * var(--site-scale-unit)),
      0.66rem
    );
    --layout-mode-feedback-padding-inline: clamp(
      0.95rem,
      calc(1.15 * var(--site-scale-unit)),
      1.1rem
    );
  }

  .site-footer__layout-mode-value--tablet {
    display: none;
  }

  .site-footer__layout-mode-value--smartphone {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-mode-feedback.is-visible {
    opacity: 1;
    transform: translateX(-50%);
    animation: layout-mode-feedback-lifetime
      var(--layout-mode-feedback-visible-duration) linear;
  }

  .layout-mode-feedback.is-closing {
    opacity: 0;
    visibility: hidden;
    animation: none;
  }

  .layout-mode-feedback.is-visible .layout-mode-feedback__content,
  .layout-mode-feedback.is-closing .layout-mode-feedback__content {
    animation: none;
  }
}
}