@layer application {
.protected-content-hint {
  --protected-content-hint-surface: #686b6f;
  --protected-content-hint-surface-hover: #5b5e62;
  --protected-content-hint-passive-opacity: 0.42;
  --protected-content-hint-text: #fff;
  --protected-content-hint-text-muted: rgb(255 255 255 / 0.82);
  --protected-content-hint-divider: rgb(255 255 255 / 0.72);
  --protected-content-hint-action-border: rgb(255 255 255 / 0.88);
  --protected-content-hint-primary: #191919;
  --protected-content-hint-primary-hover: #080808;
  --protected-content-hint-divider-size: 2px;
  --protected-content-hint-icon-size: calc(3.1481 * var(--site-scale-unit));
  --protected-content-hint-icon-artwork-size: 72%;
  --protected-content-hint-icon-box-inset: calc(0.4407 * var(--site-scale-unit));
  --protected-content-hint-icon-artwork-inset: calc(0.2833 * var(--site-scale-unit));
  --protected-content-hint-icon-visual-inset: calc(
    var(--protected-content-hint-icon-box-inset)
    + var(--protected-content-hint-icon-artwork-inset)
  );
  --protected-content-hint-collapsed-icon-size: 2.6rem;
  --protected-content-hint-geometry-duration: 260ms;
  --protected-content-hint-corner-duration: 180ms;
  --protected-content-hint-reminder-duration: 720ms;
  --protected-content-hint-reminder-transition-duration: 180ms;
  --protected-content-hint-reminder-cycle-duration: calc(
    var(--protected-content-hint-reminder-duration)
    + var(--protected-content-hint-reminder-transition-duration)
    + var(--protected-content-hint-reminder-transition-duration)
  );
  --protected-content-hint-reminder-sequence-duration: calc(
    var(--protected-content-hint-reminder-cycle-duration)
    + var(--protected-content-hint-reminder-cycle-duration)
  );
  --protected-content-hint-inline-padding: calc(0.9259 * var(--site-scale-unit));
  --protected-content-hint-block-padding-start: calc(
    1.0648 * var(--site-readability-scale-unit)
  );
  --protected-content-hint-block-padding-end: calc(
    1.3426 * var(--site-readability-scale-unit)
  );
  --protected-content-hint-overhang: 2px;
  /*
   * Equal visual gaps use the painted lock edge, not the transparent SVG box:
   * 14% comes from fitting the image into its frame and 9% from the SVG path.
   */
  --protected-content-hint-visual-spacing: calc(
    var(--protected-content-hint-inline-padding)
    + var(--protected-content-hint-icon-visual-inset)
  );
  --protected-content-hint-content-gap: calc(
    var(--protected-content-hint-visual-spacing)
    + var(--protected-content-hint-inline-padding)
    + var(--protected-content-hint-divider-size)
  );
  --protected-content-hint-divider-inline-start: calc(
    var(--protected-content-hint-inline-padding)
    + var(--protected-content-hint-inline-padding)
    + var(--protected-content-hint-icon-size)
  );
  --protected-content-hint-text-edge-inset: calc(
    var(--protected-content-hint-inline-padding)
    + var(--protected-content-hint-icon-size)
    + var(--protected-content-hint-content-gap)
    + var(--protected-content-hint-overhang)
  );
  --protected-content-hint-expanded-block-extension: 0rem;
  --protected-content-hint-expanded-block-size: calc(
    16.2037 * var(--site-readability-scale-unit)
    + var(--protected-content-hint-expanded-block-extension)
  );
  --protected-content-hint-expanded-block-start: calc(
    12.5 * var(--site-scale-unit)
  );
  --protected-content-hint-navigation-block-start: var(--route-navigation-dock-offset);
  --protected-content-hint-navigation-block-size: var(--site-navigation-height);
  --protected-content-hint-peek: 3.75rem;
  --protected-content-hint-hidden-translate: 100%;
  --protected-content-hint-peek-translate: calc(
    100% - var(--protected-content-hint-peek)
  );

  position: fixed;
  z-index: calc(var(--site-layer-navigation) + 1);
  inset-block-start: var(--protected-content-hint-expanded-block-start);
  inset-inline-end: calc(-1 * var(--protected-content-hint-overhang));
  display: grid;
  grid-template-columns: var(--protected-content-hint-icon-size) minmax(0, 1fr);
  align-items: center;
  gap: var(--protected-content-hint-content-gap);
  inline-size: min(
    calc(
      39.8148 * var(--site-scale-unit)
      + var(--protected-content-hint-visual-spacing)
      + var(--protected-content-hint-visual-spacing)
    ),
    calc(100vw - (0.9259 * var(--site-scale-unit)))
  );
  block-size: var(--protected-content-hint-expanded-block-size);
  padding:
    var(--protected-content-hint-block-padding-start)
    var(--protected-content-hint-text-edge-inset)
    var(--protected-content-hint-block-padding-end)
    var(--protected-content-hint-inline-padding);
  overflow: hidden;
  border: 0;
  border-radius: calc(0.463 * var(--site-scale-unit));
  border-start-end-radius: 0;
  border-end-end-radius: 0;
  background: var(--protected-content-hint-surface);
  box-shadow: none;
  color: var(--protected-content-hint-text);
  cursor: default;
  font-family: var(--type-family-text);
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transform: translateX(
    calc(100% + (0.9259 * var(--site-scale-unit)))
  );
  transition:
    inline-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    inset-block-start var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    block-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    border-start-start-radius var(--protected-content-hint-corner-duration) ease,
    border-start-end-radius var(--protected-content-hint-corner-duration) ease,
    border-end-start-radius var(--protected-content-hint-corner-duration) ease,
    border-end-end-radius var(--protected-content-hint-corner-duration) ease,
    transform var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    translate var(--site-navigation-auto-hide-duration) var(--site-ease-out),
    opacity 240ms ease,
    background-color 180ms ease;
  will-change: inline-size, inset-block-start, block-size, transform, translate;
}

.protected-content-hint.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.protected-content-hint::before {
  position: absolute;
  inset-block-start: var(--protected-content-hint-block-padding-start);
  inset-block-end: var(--protected-content-hint-block-padding-end);
  inset-inline-start: var(--protected-content-hint-divider-inline-start);
  inline-size: var(--protected-content-hint-divider-size);
  background: var(--protected-content-hint-divider);
  content: "";
  opacity: 1;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.protected-content-hint.is-visible.is-collapsed {
  inset-block-start: var(--protected-content-hint-navigation-block-start);
  block-size: var(--protected-content-hint-navigation-block-size);
  border-start-start-radius: calc(
    var(--protected-content-hint-navigation-block-size) / 2
  );
  border-end-start-radius: calc(
    var(--protected-content-hint-navigation-block-size) / 2
  );
  transform: translateX(var(--protected-content-hint-peek-translate));
}

.protected-content-hint.is-restored,
.protected-content-hint.is-visible.is-collapsed.is-restored,
.protected-content-hint.is-restored .protected-content-hint__icon-frame {
  transition: none;
}

.route-document.is-route-entering .protected-content-hint.is-restored {
  transform: translateX(var(--protected-content-hint-hidden-translate));
}

.route-document.is-route-entering-active
  .protected-content-hint.is-visible.is-collapsed.is-restored {
  transform: translateX(var(--protected-content-hint-peek-translate));
}

.route-document--home
  .protected-content-hint.is-visible.is-collapsed.is-restored {
  animation: protected-content-hint-navigation-reveal 1s linear both paused;
  animation-delay: var(--route-navigation-reveal-time, 0s);
}

.route-document.is-route-leaving
  .protected-content-hint.is-visible.is-collapsed,
.route-document--home.is-route-contact-scene-leaving
  .protected-content-hint.is-visible.is-collapsed {
  animation: none;
  transform: translateX(var(--protected-content-hint-hidden-translate));
}

.route-document.is-route-chapter-overlay-visible
  .protected-content-hint.is-visible.is-collapsed {
  visibility: hidden;
}

@keyframes protected-content-hint-navigation-reveal {
  from {
    transform: translateX(var(--protected-content-hint-hidden-translate));
  }

  to {
    transform: translateX(var(--protected-content-hint-peek-translate));
  }
}

.protected-content-hint.is-collapsed {
  --protected-content-hint-peek-extension: 0rem;
  --protected-content-hint-peek-scale: 1;
  --protected-content-hint-peek-translation: 0rem;

  overflow: visible;
  background: transparent;
  cursor: pointer;
}

/*
 * Once the max-width desktop canvas gains an outer viewport gutter, the lock
 * becomes an independent circular control. Its inline start remains anchored
 * to the measured navigation edge plus the baseline menu gap.
 */
.protected-content-hint.is-visible.is-collapsed.is-detached {
  --protected-content-hint-hidden-translate: calc(100% + 1rem);
  --protected-content-hint-peek-translate: 0;

  inset-inline-start: var(--protected-content-hint-detached-inline-start);
  inset-inline-end: auto;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  gap: 0;
  inline-size: var(--protected-content-hint-navigation-block-size);
  padding: 0;
  border-radius: 50%;
}

.protected-content-hint.is-collapsed.is-detached:hover,
.protected-content-hint.is-collapsed.is-detached:focus-visible {
  --protected-content-hint-peek-extension: 0rem;
  --protected-content-hint-peek-translation: 0rem;
}

.protected-content-hint.is-collapsed::before {
  opacity: 0;
}

.protected-content-hint.is-collapsed::after {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: calc(100% - var(--protected-content-hint-peek));
  inline-size: calc(
    var(--protected-content-hint-peek)
    + var(--protected-content-hint-peek-extension)
  );
  border: 0;
  border-radius: inherit;
  background: var(--protected-content-hint-surface);
  content: "";
  pointer-events: none;
  scale: var(--protected-content-hint-peek-scale);
  transform-origin: right center;
  transition:
    background-color 180ms ease,
    inline-size 180ms var(--site-ease-out),
    opacity 180ms ease,
    scale 180ms var(--site-ease-out);
}

/* A complete circle must grow around its center, not from the peek edge. */
.protected-content-hint.is-visible.is-collapsed.is-detached::after {
  transform-origin: center;
}

.protected-content-hint.is-collapsed:hover,
.protected-content-hint.is-collapsed:focus-visible {
  --protected-content-hint-peek-extension: 0.35rem;
  --protected-content-hint-peek-scale: 1.08;
  --protected-content-hint-peek-translation: -0.35rem;
}

.protected-content-hint.is-collapsed:hover::after,
.protected-content-hint.is-collapsed:focus-visible::after {
  background: var(--protected-content-hint-surface-hover);
}

.protected-content-hint.is-context-passive.is-collapsed::after,
.protected-content-hint.is-context-passive.is-collapsed
  .protected-content-hint__icon-frame {
  opacity: var(--protected-content-hint-passive-opacity);
}

.protected-content-hint:focus-visible {
  outline: 2px solid var(--protected-content-hint-text);
  outline-offset: -4px;
}

.protected-content-hint__icon-frame {
  display: grid;
  inline-size: var(--protected-content-hint-icon-size);
  block-size: var(--protected-content-hint-icon-size);
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition:
    inline-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    block-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    opacity 180ms ease;
}

.protected-content-hint.is-collapsed .protected-content-hint__icon-frame {
  position: absolute;
  z-index: 1;
  inset-block-start: 50%;
  inset-inline-start: calc(
    var(--protected-content-hint-peek) / 2
    - var(--protected-content-hint-collapsed-icon-size) / 2
  );
  inline-size: var(--protected-content-hint-collapsed-icon-size);
  block-size: var(--protected-content-hint-collapsed-icon-size);
  scale: var(--protected-content-hint-peek-scale);
  translate: var(--protected-content-hint-peek-translation) 0;
  transform: translateY(-50%);
  transition:
    inline-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    block-size var(--protected-content-hint-geometry-duration)
      var(--site-ease-out),
    scale 180ms var(--site-ease-out),
    translate 180ms var(--site-ease-out),
    opacity 180ms ease;
}

/*
 * The regular edge peek is intentionally optically offset. Once detached,
 * however, the control is a complete circle and uses its own geometric center
 * instead of inheriting that peek alignment.
 */
.protected-content-hint.is-visible.is-collapsed.is-detached
  .protected-content-hint__icon-frame {
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  transform: none;
}

.protected-content-hint.is-visible.is-collapsed.is-reminding::after {
  animation: protected-content-hint-peek-surface-pulse
    var(--protected-content-hint-reminder-sequence-duration)
    var(--site-ease-out) var(--protected-content-hint-geometry-duration);
}

.protected-content-hint.is-visible.is-collapsed.is-reminding
  .protected-content-hint__icon-frame {
  animation: protected-content-hint-peek-icon-pulse
    var(--protected-content-hint-reminder-sequence-duration)
    var(--site-ease-out) var(--protected-content-hint-geometry-duration);
}

.protected-content-hint.is-visible.is-collapsed.is-detached.is-reminding::after,
.protected-content-hint.is-visible.is-collapsed.is-detached.is-reminding
  .protected-content-hint__icon-frame {
  animation-name: protected-content-hint-detached-pulse;
}

.protected-content-hint__icon {
  display: block;
  inline-size: var(--protected-content-hint-icon-artwork-size);
  block-size: var(--protected-content-hint-icon-artwork-size);
  filter: brightness(0) invert(1);
}

.protected-content-hint.is-reminding .protected-content-hint__icon {
  animation: protected-content-hint-shake
    var(--protected-content-hint-reminder-sequence-duration)
    var(--site-ease-out) var(--protected-content-hint-geometry-duration);
  transform-origin: 50% 42%;
}

@keyframes protected-content-hint-shake {
  /*
   * One 2160ms sequence contains two 180ms grow, 720ms shake and 180ms
   * settle phases. The midpoint retains 30% emphasis between both cycles.
   */
  0%, 8.333%, 41.667%, 50%, 58.333%, 91.667%, 100% {
    transform: rotate(0);
  }

  14.333%, 64.333% { transform: rotate(-13deg); }
  20.333%, 70.333% { transform: rotate(11deg); }
  26.333%, 76.333% { transform: rotate(-9deg); }
  32.333%, 82.333% { transform: rotate(6deg); }
  37.667%, 87.667% { transform: rotate(-3deg); }
}

@keyframes protected-content-hint-peek-surface-pulse {
  0%, 100% {
    inline-size: calc(
      var(--protected-content-hint-peek)
      + var(--protected-content-hint-peek-extension)
    );
    scale: var(--protected-content-hint-peek-scale);
  }

  8.333%, 41.667%, 58.333%, 91.667% {
    inline-size: calc(var(--protected-content-hint-peek) + 0.45rem);
    animation-timing-function: ease-in-out;
    scale: 1.1;
  }

  50% {
    inline-size: calc(var(--protected-content-hint-peek) + 0.135rem);
    animation-timing-function: ease-in-out;
    scale: 1.03;
  }
}

@keyframes protected-content-hint-peek-icon-pulse {
  0%, 100% {
    scale: var(--protected-content-hint-peek-scale);
    translate: var(--protected-content-hint-peek-translation) 0;
  }

  8.333%, 41.667%, 58.333%, 91.667% {
    animation-timing-function: ease-in-out;
    scale: 1.1;
    translate: -0.45rem 0;
  }

  50% {
    animation-timing-function: ease-in-out;
    scale: 1.03;
    translate: -0.135rem 0;
  }
}

@keyframes protected-content-hint-detached-pulse {
  0%, 100% {
    scale: var(--protected-content-hint-peek-scale);
  }

  8.333%, 41.667%, 58.333%, 91.667% {
    animation-timing-function: ease-in-out;
    scale: 1.1;
  }

  50% {
    animation-timing-function: ease-in-out;
    scale: 1.03;
  }
}

.protected-content-hint__copy {
  display: grid;
  min-inline-size: 0;
  gap: calc(0.463 * var(--site-readability-scale-unit));
}

.protected-content-hint__body {
  grid-column: 2;
  display: grid;
  min-inline-size: 0;
  align-self: stretch;
  align-content: space-between;
  gap: calc(0.8333 * var(--site-readability-scale-unit));
  opacity: 1;
  visibility: visible;
  transition: opacity 120ms ease;
}

/*
 * The collapsed surface may extend across a wide outer canvas gutter. Keep
 * its interactive content hidden independently from the root overflow that
 * the animated peek surface requires.
 */
.protected-content-hint.is-collapsed .protected-content-hint__body {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.protected-content-hint__title {
  margin: 0;
  font-size: var(--type-size-access-hint-title);
  line-height: 1.1;
}

.protected-content-hint__eyebrow,
.access-dialog__eyebrow {
  font-size: var(--type-size-access-eyebrow);
  font-weight: var(--type-weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.protected-content-hint__eyebrow {
  margin: 0;
  color: var(--protected-content-hint-text);
}

.protected-content-hint__description {
  display: grid;
  gap: calc(0.5093 * var(--site-readability-scale-unit));
  color: var(--protected-content-hint-text-muted);
  font-size: var(--type-size-access-hint-copy);
  hyphens: auto;
  line-height: 1.34;
  text-align: justify;
}

.protected-content-hint__description p {
  margin: 0;
}

.protected-content-hint__description strong {
  color: var(--protected-content-hint-text);
  font-weight: var(--type-weight-bold);
}

.protected-content-hint__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.6019 * var(--site-scale-unit));
  inline-size: 100%;
}

.protected-content-hint__action {
  display: grid;
  min-block-size: calc(1.9907 * var(--site-readability-scale-unit));
  place-items: center;
  padding:
    calc(0.4444 * var(--site-readability-scale-unit))
    calc(0.3519 * var(--site-scale-unit));
  border: 1px solid var(--protected-content-hint-action-border);
  border-radius: calc(0.3241 * var(--site-scale-unit));
  background: transparent;
  box-shadow: none;
  color: var(--protected-content-hint-text);
  font: inherit;
  font-size: var(--type-size-access-hint-copy);
  font-weight: var(--type-weight-semibold);
  line-height: 1.12;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.protected-content-hint__action--password {
  border-color: var(--protected-content-hint-primary);
  background: var(--protected-content-hint-primary);
}

.protected-content-hint__action--password:hover,
.protected-content-hint__action--password:focus-visible,
.protected-content-hint__action--request:hover,
.protected-content-hint__action--request:focus-visible {
  border-color: var(--protected-content-hint-text);
  background: var(--protected-content-hint-text);
  color: var(--protected-content-hint-primary-hover);
}

.protected-content-hint__action--dismiss {
  grid-column: 1 / -1;
  min-block-size: calc(1.25 * var(--site-readability-scale-unit));
  justify-self: center;
  padding:
    calc(0.0463 * var(--site-readability-scale-unit))
    calc(0.2315 * var(--site-scale-unit));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--protected-content-hint-text-muted);
  font-weight: var(--type-weight-medium);
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

.protected-content-hint__action--dismiss:hover,
.protected-content-hint__action--dismiss:focus-visible {
  background: rgb(255 255 255 / 0.12);
  color: var(--protected-content-hint-text);
  text-decoration-thickness: 2px;
}

.protected-content-hint__action:focus-visible {
  outline: 2px solid var(--protected-content-hint-text);
  outline-offset: 2px;
}

.access-dialog {
  --access-dialog-content-inset: calc(2.7778 * var(--site-scale-unit));
  --access-dialog-viewport-gap: calc(1.8519 * var(--site-scale-unit));

  position: fixed;
  inset: 0;
  isolation: isolate;
  grid-template-columns:
    minmax(
      calc(19.4444 * var(--site-scale-unit)),
      calc(26.8519 * var(--site-scale-unit))
    )
    minmax(0, calc(27.7778 * var(--site-scale-unit)));
  inline-size: min(
    calc(100% - var(--access-dialog-viewport-gap)),
    calc(54.6296 * var(--site-scale-unit))
  );
  max-block-size: calc(100dvh - var(--access-dialog-viewport-gap));
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid #e8e8e8;
  border-radius: calc(0.5556 * var(--site-scale-unit));
  background: #e8e8e8;
  box-shadow:
    0 calc(1.7361 * var(--site-scale-unit))
      calc(4.0509 * var(--site-scale-unit)) rgb(17 17 17 / 0.28),
    0 calc(0.5787 * var(--site-scale-unit))
      calc(1.3889 * var(--site-scale-unit)) rgb(17 17 17 / 0.16);
  color: #111;
  font-size: var(--type-size-access-dialog-copy);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.access-dialog::backdrop {
  background: rgb(17 17 17 / 0.28);
  backdrop-filter: blur(calc(0.3241 * var(--site-scale-unit)));
  -webkit-backdrop-filter: blur(calc(0.3241 * var(--site-scale-unit)));
}

.access-dialog[open] {
  display: grid;
}

.access-dialog__visual {
  --access-dialog-media-inset: var(--access-dialog-content-inset);

  position: relative;
  z-index: 1;
  display: grid;
  min-inline-size: 0;
  padding-block: var(--access-dialog-media-inset);
  padding-inline: var(--access-dialog-content-inset);
  place-items: center;
  background: transparent;
}

.access-dialog__gif-frame {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
}

.access-dialog__gif-frame::after {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(-1 * var(--access-dialog-content-inset));
  inline-size: 2px;
  background: rgb(17 17 17 / 0.72);
  content: "";
}

.access-dialog__gif {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: calc(0.1852 * var(--site-scale-unit));
  box-shadow: none;
}

.access-dialog__form {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(1.3889 * var(--site-scale-unit));
  padding: var(--access-dialog-content-inset);
}

.access-dialog__close {
  position: absolute;
  inset-block-start: calc(0.9259 * var(--site-scale-unit));
  inset-inline-end: calc(0.9259 * var(--site-scale-unit));
  display: grid;
  inline-size: calc(2.3148 * var(--site-scale-unit));
  block-size: calc(2.3148 * var(--site-scale-unit));
  padding: 0;
  place-items: center;
  border: 1px solid #e8e8e8;
  border-radius: 0.5em;
  background: #e8e8e8;
  box-shadow:
    calc(0.2315 * var(--site-scale-unit))
      calc(0.2315 * var(--site-scale-unit))
      calc(0.463 * var(--site-scale-unit)) #c5c5c5,
    calc(-0.2315 * var(--site-scale-unit))
      calc(-0.2315 * var(--site-scale-unit))
      calc(0.463 * var(--site-scale-unit)) #fff;
  color: #111;
  cursor: pointer;
  font: inherit;
  font-size: var(--type-size-access-dialog-close);
}

.access-dialog__heading {
  display: grid;
  gap: calc(0.463 * var(--site-scale-unit));
}

.access-dialog__heading h2,
.access-dialog__eyebrow {
  padding-inline-end: calc(2.0833 * var(--site-scale-unit));
}

.access-dialog__heading h2 {
  margin: 0;
  font-size: var(--type-size-access-dialog-title);
  line-height: 1.1;
}

.access-dialog__heading p {
  color: #444;
}

.access-dialog__description {
  display: grid;
  inline-size: 100%;
  gap: calc(0.8333 * var(--site-scale-unit));
  hyphens: auto;
  text-align: justify;
}

.access-dialog__eyebrow {
  color: #111;
}

.access-dialog__field {
  display: grid;
  min-inline-size: 0;
  gap: calc(0.463 * var(--site-scale-unit));
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--type-size-access-dialog-field);
  font-weight: var(--type-weight-semibold);
}

.access-dialog__field legend {
  margin-block-end: calc(0.463 * var(--site-scale-unit));
}

.access-dialog__code {
  --access-code-gap: clamp(
    0.18rem,
    calc(0.2315 * var(--site-scale-unit)),
    0.25rem
  );
  --access-code-group-gap: clamp(
    0.38rem,
    calc(0.463 * var(--site-scale-unit)),
    0.55rem
  );

  display: flex;
  align-items: center;
  gap: var(--access-code-group-gap);
  inline-size: 100%;
  max-inline-size: calc(20.8333 * var(--site-scale-unit));
  min-inline-size: 0;
  justify-self: center;
}

.access-dialog__code-group {
  display: grid;
  flex: 1 1 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--access-code-gap);
  min-inline-size: 0;
}

.access-dialog__code-separator {
  flex: 0 0 auto;
  color: #444;
  font-family: var(--type-family-monospace);
  font-size: var(--type-size-access-dialog-field);
  font-weight: var(--type-weight-regular);
  line-height: 1;
}

.access-dialog__field input {
  inline-size: 100%;
  min-block-size: calc(3.0093 * var(--site-scale-unit));
  padding:
    calc(0.6944 * var(--site-scale-unit))
    calc(0.9259 * var(--site-scale-unit));
  border: 1px solid transparent;
  border-radius: 0.32em;
  outline: 0;
  background: #e8e8e8;
  box-shadow:
    inset calc(0.2315 * var(--site-scale-unit))
      calc(0.2315 * var(--site-scale-unit))
      calc(0.5787 * var(--site-scale-unit)) #c5c5c5,
    inset calc(-0.2315 * var(--site-scale-unit))
      calc(-0.2315 * var(--site-scale-unit))
      calc(0.5787 * var(--site-scale-unit)) #fff;
  color: #111;
  font: inherit;
  font-weight: var(--type-weight-regular);
}

.access-dialog__field input:focus-visible {
  border-color: rgb(17 17 17 / 0.75);
  background: #e8e8e8;
}

.access-dialog__field .access-dialog__code-cell {
  min-inline-size: 0;
  min-block-size: 0;
  aspect-ratio: 1;
  padding: 0;
  font-family: var(--type-family-monospace);
  font-size: var(--type-size-access-dialog-title);
  text-align: center;
}

.access-dialog__error {
  color: #a11919;
  font-size: var(--type-size-access-dialog-field);
}

.access-dialog__close:hover {
  background: #ededed;
}

.access-dialog__close:active {
  background: #e8e8e8;
  box-shadow:
    inset calc(0.2315 * var(--site-scale-unit))
      calc(0.2315 * var(--site-scale-unit))
      calc(0.5787 * var(--site-scale-unit)) #c5c5c5,
    inset calc(-0.2315 * var(--site-scale-unit))
      calc(-0.2315 * var(--site-scale-unit))
      calc(0.5787 * var(--site-scale-unit)) #fff;
}

/*
 * Compact navigation exposes the collapsed hint as a complete control in its
 * reserved trailing column. Its surface and icon share one geometric center
 * instead of inheriting the desktop edge-peek alignment.
 */
@media (max-width: 75rem) {
  .protected-content-hint.is-visible.is-collapsed,
  .protected-content-hint.is-visible.is-collapsed.is-restored {
    --protected-content-hint-icon-artwork-size: 60%;
    --protected-content-hint-hidden-translate: calc(100% + 1rem);
    --protected-content-hint-peek-translate: 0;
    --protected-content-hint-peek-extension: 0rem;
    --protected-content-hint-peek-translation: 0rem;

    inset-inline-start: var(--protected-content-hint-compact-inline-start);
    inset-inline-end: auto;
    box-sizing: border-box;
    grid-template-columns: 1fr;
    gap: 0;
    inline-size: var(--protected-content-hint-navigation-block-size);
    padding: 0;
    border-radius: 50%;
    transform: none;
    translate: 0 0;
    transition: translate var(--site-navigation-auto-hide-duration)
      var(--site-ease-out);
  }

  .route-document.is-route-navigation-hidden
    .protected-content-hint.is-visible.is-collapsed {
    translate: 0 var(--site-navigation-concealed-offset);
    pointer-events: none;
  }

  .protected-content-hint.is-visible.is-collapsed::after {
    inset: 0;
    inline-size: 100%;
    border-radius: 50%;
    transform-origin: center;
  }

  .protected-content-hint.is-visible.is-collapsed
    .protected-content-hint__icon-frame {
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    transform: none;
  }

  .protected-content-hint.is-visible.is-collapsed:is(:hover, :focus-visible) {
    --protected-content-hint-peek-extension: 0rem;
    --protected-content-hint-peek-translation: 0rem;
  }

  .protected-content-hint.is-visible.is-collapsed.is-reminding::after,
  .protected-content-hint.is-visible.is-collapsed.is-reminding
    .protected-content-hint__icon-frame {
    animation-name: protected-content-hint-detached-pulse;
  }
}

@media (max-width: 46rem) {
  .protected-content-hint {
    --protected-content-hint-icon-size: 2.75rem;
    --protected-content-hint-icon-box-inset: 0.385rem;
    --protected-content-hint-icon-artwork-inset: 0.2475rem;
    --protected-content-hint-collapsed-icon-size: 2.45rem;
    --protected-content-hint-inline-padding: 0.72rem;
    --protected-content-hint-text-edge-inset: 2.9rem;
    --protected-content-hint-expanded-block-extension: calc(
      0.28 * max(0rem, 32.25rem - 100vi)
      + max(0rem, 26.875rem - 100vi)
      + 0.3 * max(0rem, 22rem - 100vi)
    );

    inline-size: min(31rem, calc(100vw - 0.5rem));
  }

  .protected-content-hint__body {
    align-content: start;
    gap: clamp(0.7rem, 3vi, 0.8rem);
  }

  .protected-content-hint__action {
    padding-inline: 0.22rem;
  }

  .access-dialog {
    --access-dialog-content-inset: 1.25rem;

    grid-template-columns: minmax(0, 1fr);
  }

  .access-dialog__gif-frame {
    inline-size: 100%;
  }

  .access-dialog__gif-frame::after {
    inset-block: auto calc(-1 * var(--access-dialog-media-inset));
    inset-inline: 0;
    inline-size: auto;
    block-size: 1px;
  }

  .access-dialog__close {
    display: none;
  }

  .access-dialog__form {
    padding-block-start: calc(var(--access-dialog-content-inset) - 0.35rem);
  }

  .access-dialog__heading h2,
  .access-dialog__eyebrow {
    padding-inline-end: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .route-document.is-route-entering .protected-content-hint.is-restored,
  .route-document.is-route-leaving
    .protected-content-hint.is-visible.is-collapsed {
    transition: transform var(--route-document-visibility-duration) ease;
  }

  .route-document--home.is-route-contact-scene-leaving
    .protected-content-hint.is-visible.is-collapsed {
    transition: transform var(--route-contact-scene-exit-duration) ease;
  }

  .access-dialog[open] {
    animation: access-dialog-enter 180ms ease-out;
  }

  @keyframes access-dialog-enter {
    from {
      opacity: 0;
      transform: scale(0.97);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .protected-content-hint,
  .protected-content-hint.is-visible.is-collapsed,
  .protected-content-hint.is-collapsed::after,
  .protected-content-hint__icon-frame,
  .protected-content-hint.is-collapsed .protected-content-hint__icon-frame,
  .protected-content-hint__action,
  .protected-content-hint::before {
    transition: none;
  }

  .protected-content-hint.is-reminding .protected-content-hint__icon {
    animation: none;
  }

  .protected-content-hint.is-visible.is-collapsed.is-reminding::after,
  .protected-content-hint.is-visible.is-collapsed.is-reminding
    .protected-content-hint__icon-frame {
    animation: none;
  }

  .route-document--home
    .protected-content-hint.is-visible.is-collapsed.is-restored {
    animation: none;
    transform: translateX(var(--protected-content-hint-peek-translate));
  }
}
}