.article-table-scroll {
  max-inline-size: 100%;
  margin-block: 24px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
.article-table-scroll table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}
.article-table-scroll :is(th, td) {
  min-inline-size: 8rem;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
  white-space: pre-line;
}
.article-table-scroll thead th {
  background: transparent;
  border-bottom: 2px solid var(--ink);
  font-weight: 700;
}
.article-table-scroll:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}
.article-table-frame {
  position: relative;
}
.article-table-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
}
.article-table-hint::before {
  content: "👆 " attr(data-label);
  max-inline-size: calc(100% - 48px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0 3px 12px rgb(0 0 0 / 18%);
  text-align: center;
  font-size: 0.85em;
}
.article-table-hint.is-visible {
  animation: table-hint-fade 3.2s both;
}
.article-table-hint.is-visible::before {
  animation: table-hint-slide 0.8s 0.3s 2;
}
@keyframes table-hint-fade {
  0%,
  100% {
    opacity: 0;
  }
  10%,
  80% {
    opacity: 1;
  }
}
@keyframes table-hint-slide {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-16px);
  }
  75% {
    transform: translateX(16px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .article-table-hint.is-visible::before {
    animation: none;
  }
}