.article-term {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-color: #6366f1;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
    cursor: help;
    border-radius: 2px;
}
.article-term:hover,
.article-term:focus-visible {
    text-decoration-style: solid;
    background: color-mix(in srgb, #6366f1 12%, transparent);
}
.article-term:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 3px;
}
.article-term-tooltip {
    position: fixed;
    z-index: 2000;
    box-sizing: border-box;
    width: max-content;
    max-width: min(360px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
    padding: 14px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 8px 30px #0003;
    font: 14px/1.55 var(--font-sans, sans-serif);
    overflow-wrap: anywhere;
}
.article-term-tooltip[hidden] { display: none; }
.article-term-tooltip strong,
.article-term-tooltip span { display: block; }
.article-term-tooltip strong { margin-bottom: 5px; }
@media print {
    .article-term { text-decoration: none; }
    .article-term-tooltip { display: none !important; }
}

.dark .article-term-tooltip { background: #0b1020; color: #e2e8f0; border-color: #334155; }