.word-span{border-radius:var(--radius-sm);font:inherit;line-height:inherit;color:inherit;cursor:pointer;transition:background-color var(--transition-base);background:0 0;border:none;flex-direction:column;align-items:center;margin:0 .15em;padding:.1em .2em;display:inline-flex;position:relative}.word-span:hover,.word-span.active{background-color:color-mix(in srgb, var(--theme-text) 8%, transparent)}.word-span:focus-visible{outline:2px solid color-mix(in srgb, var(--color-primary) 72%, white 28%);outline-offset:2px;background-color:color-mix(in srgb, var(--theme-text) 8%, transparent)}.word-span.playing{background-color:color-mix(in srgb, var(--color-primary) 20%, transparent);transition:color .2s ease-out,background-color .2s ease-out;color:var(--color-primary-light,var(--color-primary))!important}.word-tooltip{background-color:var(--theme-bg-card);color:var(--theme-text);border:1px solid var(--theme-border);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);text-align:center;overflow-wrap:anywhere;opacity:0;visibility:hidden;z-index:50;pointer-events:none;flex-direction:column;align-items:center;gap:2px;max-width:min(260px,70vw);transition:opacity .2s cubic-bezier(.16,1,.3,1),visibility .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%)translateY(4px);box-shadow:0 4px 12px #00000026}.word-tooltip:after{content:"";border-style:solid;border-width:5px;border-color:var(--theme-bg-card) transparent transparent transparent;position:absolute;top:100%;left:50%;transform:translate(-50%)}.word-span:hover .word-tooltip,.word-span.active .word-tooltip,.word-span:focus-visible .word-tooltip{opacity:1;visibility:visible;transform:translate(-50%)translateY(0)}.word-transliteration{font-family:var(--font-sans);color:var(--theme-text-muted);font-size:.75rem;font-style:italic;font-weight:500}.word-translation{font-family:var(--font-sans);color:var(--theme-text);font-size:.85rem;font-weight:600}