.hover-card-trigger {
  border: 0;
  border-radius: 2px;
  padding: 0;
  margin: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  text-align: inherit;
  text-decoration: underline;
  text-decoration-color: var(--muted-color);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.hover-card-trigger:hover {
  text-decoration-color: currentColor;
}

.hover-card-trigger:disabled {
  cursor: text;
  text-decoration: none;
}

.hover-card-popover {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  padding: 0;
  width: var(--hover-card-width, 232px);
  max-width: calc(100vw - 16px);
  overflow: visible;
  background: transparent;
  color: var(--text-color);
  font-family: var(--font-secondary);
  font-size: 13px;
  line-height: 1.5;
}

.hover-card-popover[hidden] {
  display: none;
}

.hover-card-surface,
.hover-card-panel {
  box-sizing: border-box;
  max-height: calc(100dvh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 4px;
  border-radius: 12px;
  background: var(--background-color);
  box-shadow: 0 0 0 1px var(--border-color), 0 2px 4px #0002, 0 10px 28px #0003;
  overscroll-behavior: contain;
}

.hover-card-body {
  overflow-wrap: anywhere;
}

.hover-card-body > * {
  margin: 8px;
}

.hover-card-body > :first-child {
  margin-top: 4px;
}

.hover-card-body > :last-child {
  margin-bottom: 4px;
}

.hover-card-body :is(img, video):not(.site-icon) {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 320px;
  border-radius: 8px;
  object-fit: contain;
  background: var(--surface-color);
}

.hover-card-body > :is(img, video),
.hover-card-body p:has(> img:only-child) {
  margin: 0;
}

.hover-card-body :is(h1, h2, h3, h4, h5, h6) {
  font-size: 14px;
  line-height: 1.4;
}

.hover-card-body :is(ul, ol) {
  padding-left: 20px;
}

.hover-card-body pre {
  overflow: auto;
}

.hover-card-popover--group {
  --hover-card-overlap: clamp(16px, 4vw, 32px);
  width: calc(var(--hover-card-width, 232px) * var(--hover-card-count) - var(--hover-card-overlap) * (var(--hover-card-count) - 1) + 32px);
}

.hover-card-popover--group > .hover-card-surface {
  padding: 16px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.hover-card-panels {
  display: flex;
  align-items: flex-start;
}

.hover-card-panels > .hover-card-panel {
  flex: 1 1 0;
  min-width: 0;
  max-height: none;
  margin: 0;
  transform: rotate(-4deg);
  transform-origin: 50% 70%;
  box-shadow: 0 0 0 1px var(--border-color), 0 3px 8px #0003;
}

.hover-card-panels > .hover-card-panel + .hover-card-panel {
  margin-left: calc(-1 * var(--hover-card-overlap));
}

.hover-card-panels > .hover-card-panel:nth-child(even) {
  transform: rotate(4deg);
}

@media (prefers-reduced-motion: reduce) {
  .hover-card-popover,
  .hover-card-surface {
    animation: none;
    transition: none;
  }
}