.karaoke-wrapper{--karaoke-word-pending: color-mix(in srgb, var(--karaoke-accent, #205978) 47%, transparent);--karaoke-word-said: var(--karaoke-accent, #205978);--karaoke-word-current: color-mix(in srgb, var(--karaoke-accent, #205978) 60%, black);--karaoke-word-highlight: #ffe9a800;--karaoke-border: #ccc;display:flex;gap:5.2rem;max-width:86rem;margin:5rem auto;padding:2rem}.karaoke-media-col,.karaoke-transcript-col{min-width:0}.karaoke-transcript-col{flex:2}.karaoke-transcript-col:before{content:"";display:block;height:2.5rem;background:linear-gradient(to top,transparent,var(--karaoke-fade-bg, #ffffff));top:3rem;position:relative;z-index:2}.karaoke-transcript-col:after{content:"";display:block;height:2.5rem;background:linear-gradient(to bottom,transparent,var(--karaoke-fade-bg, #ffffff));bottom:3rem;position:relative;z-index:2}.karaoke-media-col{align-self:flex-start;justify-content:center;align-items:center;display:flex;flex-basis:27.8rem}.karaoke-media-frame{position:relative;overflow:hidden;border-radius:2.5rem;background:var(--karaoke-accent, #205978);display:flex;flex-direction:column;justify-content:space-evenly}.karaoke-video,.karaoke-cover-image{width:100%;border-radius:2.5rem;display:block}.karaoke-video,.karaoke-cover-image{aspect-ratio:var(--karaoke-aspect, 1);object-fit:cover;object-position:center top}.karaoke-tap-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:#00000073;color:#fff;cursor:pointer;z-index:3}.karaoke-speaker-header{padding:2rem 3.7rem;color:#f3f3f5;pointer-events:none}.karaoke-speaker-header p{margin-bottom:0}.karaoke-media-content{position:relative;height:auto}.karaoke-media-content:before{content:"";position:absolute;bottom:0;height:11rem;width:100%;background:linear-gradient(to bottom,transparent,var(--karaoke-accent, #205978) 155%);z-index:1}.karaoke-speaker-name{margin-bottom:0!important;font-size:2rem!important;font-weight:700;color:#fff;padding:0!important}.karaoke-speaker-role{font-size:1.5rem!important;letter-spacing:.02em;text-transform:uppercase;opacity:.85;color:#fff;padding:0!important;max-width:100%;line-height:2rem!important}.karaoke-overlay-controls{position:absolute;bottom:.75rem;inset-inline:.75rem;z-index:2;display:flex;justify-content:space-between;pointer-events:none}.karaoke-overlay-btn{display:flex;align-items:center;justify-content:center;border:0;border-radius:50%;color:#fff;cursor:pointer;pointer-events:auto;transition:background .2s}.karaoke-overlay-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}.karaoke-overlay-btn svg{fill:#fff}.karaoke-mute-hint{position:absolute;bottom:4.25rem;left:50%;transform:translate(-50%);z-index:2;padding:.4rem .9rem;border:0;border-radius:999px;background:#0009;color:#fff;font-size:1.2rem;white-space:nowrap;cursor:pointer}.karaoke-waveform{position:absolute;bottom:6.5rem;width:90%;left:50%;transform:translate(-50%);z-index:1;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:1.5rem .75rem;border-radius:20px;background:color-mix(in srgb,var(--karaoke-accent, #205978) 18%,white)}.karaoke-waveform-bar{width:6px;height:10px;background:var(--karaoke-accent, #205978);animation:karaoke-wave 1s ease-in-out infinite;animation-play-state:paused}.karaoke-waveform--playing .karaoke-waveform-bar{animation-play-state:running}.karaoke-waveform--live .karaoke-waveform-bar{animation:none;transition:transform .1s ease-out}@keyframes karaoke-wave{0%,to{transform:scaleY(.4)}50%{transform:scaleY(var(--karaoke-wave-peak, 1.6))}}.karaoke-controls{display:flex;gap:.5rem;margin-top:.75rem;display:none}.karaoke-controls-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--karaoke-border);border-radius:6px;background:#fff;cursor:pointer;transition:background .2s}.karaoke-controls-btn:hover{background:#f0f0f0}.karaoke-controls-btn:focus-visible{outline:2px solid #005fcc;outline-offset:2px}.karaoke-transcript-col{position:relative;display:flex;flex-direction:column;gap:.75rem;justify-content:center}.karaoke-scroller-wrap{position:relative}.karaoke-scroll-track{position:absolute;top:0;right:0;bottom:0;width:1rem;background:#f8f8f8;pointer-events:none;opacity:0;transition:opacity .15s ease}@media(max-width:768px){.karaoke-scroll-track{display:none}}.karaoke-scroller.is-scrolling~.karaoke-scroll-track{opacity:1}.karaoke-scroller{position:relative;max-height:27.6rem;overflow-y:auto;scrollbar-color:var(--karaoke-accent, #205978) #fff;z-index:1}.karaoke-scroller::-webkit-scrollbar{width:1.2rem}.karaoke-scroller::-webkit-scrollbar-track{background:#fff}.karaoke-scroller::-webkit-scrollbar-thumb{background-color:var(--karaoke-accent, #205978);border-radius:6px}.karaoke-scroller:focus-visible{outline:2px solid #005fcc;outline-offset:2px}.karaoke-transcript{line-height:2;font-size:1.6rem;padding-right:3.3rem}.karaoke-line{margin:0 0 1.4rem;padding:0!important;font-size:3rem!important;line-height:1.2!important;font-weight:400;margin-bottom:1rem!important}.karaoke-word{color:var(--karaoke-word-pending);cursor:pointer;border-radius:3px;transition:color .15s ease,background-color .15s ease}.karaoke-word--said{color:var(--karaoke-word-said)}.karaoke-word--current{color:var(--karaoke-word-current);background-color:var(--karaoke-word-highlight)}.karaoke-status{margin:0;font-size:1.4rem;color:var(--karaoke-word-pending)}.karaoke-status--error{color:#a4262c}.karaoke-follow-btn{position:absolute;bottom:0;align-self:flex-start;display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:1.5rem;color:var(--karaoke-accent, #205978);text-transform:uppercase;background:#fff;cursor:pointer;left:50%;transform:translate(-50%)}.karaoke-follow-btn svg{flex-shrink:0;fill:var(--karaoke-accent, #205978)}.karaoke-follow-btn:after{content:"";position:absolute;width:100%;height:1px;bottom:0;left:0;background:var(--karaoke-accent, #205978)}@media(max-width:768px){.karaoke-wrapper{flex-direction:column;padding:1rem;gap:.5rem;margin:2rem auto}.karaoke-media-col,.karaoke-transcript-col{width:100%;flex-direction:row}.karaoke-transcript-col:before,.karaoke-transcript-col:after{position:absolute;width:100%;top:0;pointer-events:none}.karaoke-transcript-col:after{bottom:0;top:auto}.karaoke-follow-btn{bottom:-2rem;background:#fff;z-index:3;width:100%}.karaoke-media-col{z-index:2;padding-bottom:.5rem;justify-content:start}.karaoke-media-frame{width:100%;max-width:100%}.karaoke-scroller{max-height:20rem;overflow-y:scroll;padding-top:.5rem}.karaoke-transcript{font-size:1.4rem}.karaoke-line{font-size:2.2rem!important}}@media(prefers-reduced-motion:reduce){.karaoke-word{transition:none}.karaoke-waveform-bar{animation:none;height:10px}}