:root {
  --link-blue-ink: #2f596a;
}

/* The former page-center construction guide is no longer part of the site language. */
.story-sticky,
.section-grid,
.history-sticky,
.section03-sticky,
.section04-sticky {
  background-image: none;
}

.history-story--section02 .history-sticky {
  background-image: radial-gradient(
    circle at 86% 78%,
    rgba(255, 255, 255, 0.76),
    transparent 30%
  );
}

.section03-sticky {
  background-image: radial-gradient(
    circle at 86% 78%,
    rgba(255, 255, 255, 0.72),
    transparent 32%
  );
}

.section04-sticky {
  background-image: radial-gradient(
    circle at 84% 76%,
    rgba(255, 255, 255, 0.7),
    transparent 33%
  );
}

.opening-gesture-note {
  position: absolute;
  z-index: 17;
  top: 52%;
  left: 50%;
  display: grid;
  width: min(36rem, calc(100vw - (2 * var(--gutter))));
  gap: 0.38rem;
  margin: 0;
  padding: 1rem 1.25rem;
  border: 0.5px solid color-mix(in srgb, var(--ink) 32%, transparent);
  background: color-mix(in srgb, var(--page-raised) 72%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, monospace;
  font-size: clamp(0.68rem, 0.82vw, 0.86rem);
  letter-spacing: 0.13em;
  line-height: 1.25;
  text-align: center;
  transform: translate(-50%, -50%);
  transition: opacity 220ms linear, visibility 220ms linear;
  pointer-events: none;
}

.opening-gesture-note strong {
  color: var(--ink);
  font-size: 1.04em;
  font-weight: 650;
}

html[data-opening-phase]:not([data-opening-phase="idle"]) .opening-gesture-note {
  opacity: 0;
  visibility: hidden;
}

.analysis-action__cue {
  border-color: color-mix(in srgb, var(--link-blue-ink) 62%, var(--hairline));
  background: color-mix(in srgb, var(--link-blue-ink) 6%, var(--page-raised));
  color: var(--link-blue-ink);
  -webkit-tap-highlight-color: color-mix(in srgb, var(--blue) 18%, transparent);
}

.analysis-action__index {
  border-color: color-mix(in srgb, var(--link-blue-ink) 54%, var(--hairline));
  color: var(--link-blue-ink);
}

.analysis-action__cue::after {
  color: var(--link-blue-ink);
}

.analysis-action:hover .analysis-action__cue,
.analysis-action:focus-within .analysis-action__cue {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--page-raised));
  color: var(--blue);
}

.analysis-action:hover .analysis-action__index,
.analysis-action:focus-within .analysis-action__index {
  border-color: var(--blue);
  color: var(--blue);
}

.analysis-action:hover .analysis-action__cue::after,
.analysis-action:focus-within .analysis-action__cue::after {
  color: var(--blue);
}

@media (max-width: 720px) and (hover: none), (max-width: 720px) and (pointer: coarse) {
  .history-story--section02 .history-sticky {
    background-image: none;
  }

  .opening-gesture-note {
    top: 49%;
    width: min(24rem, calc(100vw - 2rem));
    padding: 0.82rem 0.9rem;
    font-size: clamp(0.58rem, 2.9vw, 0.72rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .opening-gesture-note {
    transition: none;
  }
}