.vocal-training{--vocal-ungraded:#c47c20;--vocal-voice:#007f6b;--vocal-correct:#3b8d5d;--vocal-partial:#c97852;--vocal-missed:#c75f70;--vocal-bg:#f6f4ee;--vocal-marker:#343a40;--vocal-range:#e2ded4;--vocal-range-ink:#625f58;--vocal-outline:#b5b0a5;flex-direction:column;gap:10px;min-width:0;display:flex}.dark .vocal-training{--vocal-ungraded:#ffb454;--vocal-voice:#56ddb5;--vocal-correct:#81c784;--vocal-partial:#ff997b;--vocal-missed:#f07882;--vocal-bg:#17171c;--vocal-marker:#fff;--vocal-range:#24242b;--vocal-range-ink:#aeaca4;--vocal-outline:#54535b}.vocal-training button:focus-visible,.vocal-training [role=slider]:focus-visible{outline:2px solid var(--vocal-voice);outline-offset:3px}.vocal-tools{flex-wrap:wrap;align-items:end;gap:8px;min-width:0;display:flex}.vocal-tool{color:var(--color-on-surface-variant);flex-direction:column;align-items:center;gap:4px;font-size:.72rem;display:flex}.vocal-tool:first-child{align-items:start;margin-right:auto}.vocal-tool button,.vocal-tool select{border:1px solid var(--vocal-outline);min-height:40px;color:var(--color-on-surface);background:0 0;border-radius:12px;padding:0 10px}.vocal-tool button{align-items:center;gap:6px;display:flex}.vocal-tool button[data-active=true]{background:var(--color-primary);color:var(--color-on-primary);border-color:#0000}.vocal-legend{flex-wrap:wrap;align-items:center;gap:14px;font-size:.85rem;display:flex}.vocal-legend span{align-items:center;gap:6px;display:inline-flex}.vocal-legend i{background:linear-gradient(90deg,var(--vocal-ungraded) 33%,var(--vocal-correct) 33% 66%,var(--vocal-partial) 66%);border-radius:4px;width:24px;height:10px;display:inline-block}.vocal-legend i[data-voice]{background:var(--vocal-voice);border-radius:50%;width:10px}.vocal-counter{font-variant-numeric:tabular-nums;margin-left:auto;font-size:.8rem}.vocal-stage{border:1px solid color-mix(in srgb,var(--vocal-outline) 45%,transparent);background:var(--vocal-bg);border-radius:16px;position:relative;overflow:hidden}.vocal-runway{touch-action:pan-y;cursor:grab;height:clamp(260px,44dvh,500px);min-height:240px;position:relative}.vocal-runway:active{cursor:grabbing}.vocal-runway>svg{-webkit-user-select:none;user-select:none;width:100%;height:100%;display:block}.vocal-pause button:disabled{opacity:.45;cursor:not-allowed}.vocal-lyrics{text-align:center;min-height:90px;padding:8px 18px 20px;line-height:1.4}.vocal-current-line{overflow-wrap:anywhere;font-size:clamp(1.2rem,2.5vw,1.8rem);font-weight:650}.vocal-next-line{color:var(--color-on-surface-variant);overflow-wrap:anywhere;margin-top:8px;font-size:clamp(.95rem,1.7vw,1.2rem)}.vocal-word{white-space:pre-wrap;color:var(--color-on-surface-variant);display:inline-block;position:relative}.vocal-word-fill{white-space:pre-wrap;color:var(--color-on-surface);clip-path:inset(0 calc(100% - var(--word-progress)) 0 0);position:absolute;inset:0}.vocal-pause{background:color-mix(in srgb,var(--vocal-bg) 9%,transparent);-webkit-backdrop-filter:blur(1.4px);backdrop-filter:blur(1.4px);justify-content:center;align-items:center;gap:clamp(28px,8vw,90px);display:flex;position:absolute;inset:0}.vocal-pause button{background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-width:72px;min-height:92px;padding:8px;font-weight:600;display:flex}.vocal-next{white-space:normal;z-index:2;background:0 0;border:0;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 24px);min-height:44px;font-size:.88rem;font-weight:600;display:flex;position:absolute;top:26px;left:50%;transform:translate(-50%)}.vocal-stage-status{background:color-mix(in srgb,var(--vocal-bg) 80%,transparent);z-index:3;text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;display:flex;position:absolute;inset:0}.vocal-loading{text-align:center;background:var(--vocal-bg);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:340px;padding:28px;display:flex}.vocal-loading button{background:var(--color-primary);min-height:44px;color:var(--color-on-primary);border-radius:12px;padding:8px 20px}.vocal-delay{border:1px solid var(--vocal-outline);border-radius:14px;align-items:center;gap:12px;padding:14px;font-size:.85rem;display:flex}.vocal-delay input{min-width:60px;accent-color:var(--color-primary);flex:1}.vocal-overview{touch-action:none;-webkit-user-select:none;user-select:none;flex-shrink:0;height:60px;position:relative}.vocal-map-content{background:color-mix(in srgb,var(--vocal-range) 68%,var(--vocal-bg));border-radius:4px;position:absolute;inset:0 20px;overflow:hidden}.vocal-map-content svg{width:100%;height:100%;position:absolute;inset:0}.vocal-map-mask{background:color-mix(in srgb,var(--vocal-bg) 58%,transparent);pointer-events:none;position:absolute;top:0;bottom:0}.vocal-map-hit{cursor:ew-resize;background:0 0;border:0;position:absolute;inset:0}.vocal-map-seek{background:var(--vocal-marker);width:4px;box-shadow:0 0 4px color-mix(in srgb,var(--vocal-marker) 30%,transparent);pointer-events:none;border-radius:2px;position:absolute;top:0;bottom:0;transform:translate(-2px)}.vocal-map-lock{color:var(--vocal-range-ink);pointer-events:none;justify-content:center;align-items:center;display:flex;position:absolute;inset-block:0}.vocal-map-handle{border:1px solid var(--vocal-outline);width:20px;height:60px;color:var(--vocal-range-ink);background:var(--vocal-range);cursor:ew-resize;z-index:2;border-radius:3px;justify-content:center;align-items:center;display:flex;position:absolute;top:0}.vocal-map-handle:after{content:"";position:absolute;inset:0 -12px}.vocal-map-handle i{background:var(--vocal-range-ink);border-radius:1px;width:2px;position:absolute;inset-block:7px}.vocal-map-handle-start i{right:1px}.vocal-map-handle-end i{left:1px}.vocal-result{text-align:center;background:var(--vocal-bg);border:1px solid var(--vocal-outline);border-radius:16px;padding:32px 20px;position:relative;overflow:hidden}.vocal-result h3{margin:14px 0 6px;font-size:1.25rem;font-weight:650}.vocal-result strong{font-size:2rem}.vocal-result p{color:var(--color-on-surface-variant);margin:8px 0 20px}.vocal-result-close{place-items:center;min-width:44px;min-height:44px;display:grid;position:absolute;top:8px;right:8px}.vocal-trophy{color:var(--color-primary);display:inline-flex;position:relative}.vocal-celebrate{animation:.65s both vocal-trophy-in}.vocal-celebrate i{background:var(--vocal-voice);width:5px;height:9px;animation:1.8s both vocal-confetti;animation-delay:calc(var(--confetti-i) * 12ms);transform:rotate(calc(var(--confetti-i) * 30deg));position:absolute;top:50%;left:50%}.vocal-replay{background:var(--color-primary);min-height:44px;color:var(--color-on-primary);border-radius:12px;align-items:center;gap:8px;padding:10px 20px;display:inline-flex}@keyframes vocal-trophy-in{0%{opacity:0;transform:scale(.6)translateY(16px)}to{opacity:1;transform:none}}@keyframes vocal-confetti{0%{opacity:0;translate:0}15%{opacity:1}to{translate:calc(sin(var(--confetti-i) * 30deg) * 105px) calc(cos(var(--confetti-i) * 30deg) * 85px);opacity:0}}@media (prefers-reduced-motion:reduce){.vocal-celebrate,.vocal-celebrate i{animation:none}.vocal-celebrate i{display:none}}@media (max-width:400px){.vocal-tools{gap:5px}.vocal-tool button,.vocal-tool select{padding-inline:7px}.vocal-legend{gap:10px;font-size:.8rem}.vocal-runway{height:40dvh;min-height:220px}.vocal-lyrics{padding:4px 12px 14px}}@media (max-width:639px){.vocal-training{margin-inline:-16px}.vocal-tools,.vocal-legend,.vocal-delay{margin-inline:12px}}