.word-span{position:relative;display:inline-flex;flex-direction:column;align-items:center;margin:0 .15em;padding:.1em .2em;border:none;border-radius:var(--radius-sm);background:transparent;font:inherit;line-height:inherit;color:inherit;cursor:pointer;transition:background-color var(--transition-base)}.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{color:var(--color-primary-light, var(--color-primary))!important;background-color:color-mix(in srgb,var(--color-primary) 20%,transparent);transition:color .2s ease-out,background-color .2s ease-out}.word-tooltip{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%) translateY(4px);background-color:var(--theme-bg-inverse);color:var(--theme-text-inverse);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;align-items:center;gap:2px;white-space:nowrap;opacity:0;visibility:hidden;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);z-index:50;pointer-events:none}.word-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:var(--theme-bg-inverse) transparent transparent transparent}.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);font-size:.75rem;font-style:italic;font-weight:500;color:color-mix(in srgb,var(--theme-text-inverse) 80%,transparent)}.word-translation{font-family:var(--font-sans);font-size:.85rem;font-weight:600;color:var(--theme-text-inverse)}