.tone-selector__container{align-items:center;height:100%;display:flex}.tone-selector__backdrop{z-index:10001;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;width:100%;height:100%;position:fixed;inset:0}.tone-selector__dropdown-menu{background:var(--paper);border:1px solid var(--line);z-index:10002;box-sizing:border-box;border-radius:16px;flex-direction:column;width:280px;max-width:calc(100vw - 40px);padding:12px;display:flex;position:absolute;bottom:calc(100% + 12px);left:0;transform:translateZ(0);box-shadow:0 8px 24px #00000026;margin:0!important}.tone-selector__dropdown-grid{flex-wrap:wrap;justify-content:flex-start;margin:-4px;display:flex}.tone-selector__dropdown-item{appearance:none;border:1px solid var(--line);color:var(--ink);font-size:var(--font-size-base);font-weight:var(--font-weight-title);cursor:pointer;text-align:center;box-sizing:border-box;background:#ffffff3d;border-radius:12px;flex:0 0 calc(25% - 8px);width:calc(25% - 8px);margin:4px;padding:10px 0;transition:background-color .15s,color .15s;display:block;box-shadow:none!important;-webkit-tap-highlight-color:transparent!important;-webkit-touch-callout:none!important;-webkit-user-select:none!important;user-select:none!important;outline:none!important}.tone-selector__dropdown-item:focus,.tone-selector__dropdown-item:focus-visible,.tone-selector__dropdown-item:active,.tone-selector__status-btn:focus,.tone-selector__status-btn:focus-visible,.tone-selector__status-btn:active{box-shadow:none!important;outline:none!important}@media (hover:hover){.tone-selector__dropdown-item:hover{background:#0000000d}}:root[data-theme=dark] .tone-selector__dropdown-item{background:#0003}@media (hover:hover){:root[data-theme=dark] .tone-selector__dropdown-item:hover{background:#ffffff1a}}.tone-selector__dropdown-item.is-active{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}.tone-btn-content{text-align:center;width:100%;line-height:1;display:block}.tone-selector__rhythm-label{font-size:var(--font-size-sm);opacity:.7}.tone-selector__sync{background:var(--paper-soft);border:1px solid var(--line);text-align:center;border-radius:8px;margin-bottom:12px;padding:12px}.tone-selector__sync p{font-size:var(--font-size-sm);color:var(--muted);margin:0 0 8px}.tone-selector__sync strong{color:var(--ink)}.tone-selector__sync-actions{text-align:center;justify-content:center;display:flex}.tone-selector__sync-actions>*+*{margin-left:8px}.tone-selector__sync-btn{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);cursor:pointer;border:none;border-radius:6px;flex:1;padding:6px 0;transition:opacity .15s}@media (hover:hover){.tone-selector__sync-btn:hover{opacity:.8}}.tone-selector__sync-btn--save{background:var(--accent);color:var(--bg)}.tone-selector__sync-btn--restore{background:var(--line);color:var(--ink)}.tone-selector__status-badge{background-color:var(--danger,#ef4444);width:8px;height:8px;box-shadow:0 0 0 2px var(--bg);border-radius:50%;position:absolute;top:6px;right:6px}.tone-selector__status-text{font-weight:var(--font-weight-title);color:var(--accent)}.tone-selector__status-btn{text-align:center;cursor:pointer;color:var(--ink);background:0 0;border:none;justify-content:center;align-items:center;min-width:45px;height:100%;padding:0 8px;transition:color .15s,background-color .15s;display:flex;position:relative;transform:translateZ(0)}@media (hover:hover){.tone-selector__status-btn:hover{color:var(--accent);background:var(--dock-hover-bg,#fff6)!important}}.tone-selector__status-btn:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}.tone-selector__status-btn.has-unsaved .tone-selector__status-text{color:var(--danger,#ef4444)}.tone-selector__status-btn.has-rhythm{flex-direction:column;justify-content:center;align-items:center;line-height:1.1}.tone-selector__status-text.has-rhythm{font-size:var(--font-size-base);margin-bottom:0}.lyric-dock{--dock-hover-bg:#fff6;z-index:10001;border:1px solid var(--line);background:var(--paper);border-radius:16px;align-items:center;width:fit-content;max-width:calc(100% - 16px);margin:8px auto 0;padding:4px;display:flex;position:sticky;bottom:8px;box-shadow:0 4px 12px #00000014}@supports (bottom:max(1px, env(safe-area-inset-bottom))){.lyric-dock{bottom:max(8px, env(safe-area-inset-bottom) * .4)}}.lyric-dock__tooltip{background:var(--ink);color:var(--paper);font-size:var(--font-size-sm);font-weight:var(--font-weight-title);white-space:nowrap;pointer-events:none;z-index:10002;border-radius:10px;padding:7px 14px;animation:.15s ease-out lyricDockTooltipFadeIn;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);box-shadow:0 4px 16px #0003}@keyframes lyricDockTooltipFadeIn{0%{opacity:0;transform:translate(-50%,4px)}to{opacity:1;transform:translate(-50%)}}:root[data-theme=dark] .lyric-dock__tooltip{background:var(--paper-soft);color:var(--ink);border:1px solid var(--line)}.lyric-dock>:not(.lyric-dock__tooltip)+:not(.lyric-dock__tooltip){margin-left:6px}:root[data-theme=dark] .lyric-dock{--dock-hover-bg:#ffffff14;background:var(--paper)}.lyric-dock__scroll{-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;border-radius:18px;flex-grow:1;align-items:center;display:flex;overflow:auto hidden;-webkit-mask-image:-webkit-radial-gradient(#fff,#000)}.lyric-dock__scroll>*+*{margin-left:6px}.lyric-dock__scroll::-webkit-scrollbar{-webkit-appearance:none!important;background:0 0!important;width:0!important;height:0!important;display:none!important}.lyric-dock__scroll::-webkit-scrollbar-thumb{-webkit-appearance:none!important;background:0 0!important;width:0!important;height:0!important;display:none!important}.lyric-dock__scroll::-webkit-scrollbar-track{-webkit-appearance:none!important;background:0 0!important;width:0!important;height:0!important;display:none!important}.lyric-dock__scroll::-webkit-scrollbar-corner{-webkit-appearance:none!important;background:0 0!important;width:0!important;height:0!important;display:none!important}.lyric-dock__group{flex-shrink:0;align-items:center;padding:0;display:flex}.lyric-dock__divider{background-color:var(--line);flex-shrink:0;width:1px;height:24px}.lyric-dock__cluster{border:1px solid var(--line);height:var(--control-height);box-sizing:border-box;background:#00000008;border-radius:999px;flex:none;align-items:center;padding:0;display:flex}:root[data-theme=dark] .lyric-dock__cluster{background:#ffffff0d}.dock-btn,.dock-segmented-btn,.dock-icon-btn,.dock-status-btn{appearance:none;box-sizing:border-box;text-align:center;cursor:pointer;color:var(--ink);background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:color .15s,background-color .15s;display:flex;transform:translateZ(0)}.lyric-dock button,.lyric-dock a,.dock-btn,.dock-segmented-btn,.dock-icon-btn,.dock-status-btn{box-shadow:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;outline:none}.lyric-dock button:focus,.lyric-dock button:focus-visible,.lyric-dock button:active,.lyric-dock a:focus,.lyric-dock a:focus-visible,.lyric-dock a:active{box-shadow:none;outline:none}.dock-btn.is-disabled,.dock-status-btn.is-disabled,.dock-icon-btn.is-disabled,.dock-btn:disabled,.dock-status-btn:disabled,.dock-segmented-btn:disabled,.dock-icon-btn:disabled,.lyric-dock .circle-btn:disabled{opacity:.35;cursor:pointer}.lyric-dock__cluster>button:first-child,.lyric-dock__cluster>:first-child>button{border-top-left-radius:999px;border-bottom-left-radius:999px}.lyric-dock__cluster>button:last-child,.lyric-dock__cluster>:last-child>button{border-top-right-radius:999px;border-bottom-right-radius:999px}.dock-btn{box-shadow:none;width:var(--control-height);min-width:var(--control-height);text-align:center;height:100%;color:var(--ink);font-family:var(--font,sans-serif);font-weight:var(--font-weight-title);font-size:var(--font-size-base);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;line-height:1;transition:color .15s,background-color .15s;display:flex}@media (hover:hover){.dock-btn:not(.is-disabled):hover{background:var(--dock-hover-bg);color:var(--accent)}}.dock-segmented-btn{box-sizing:border-box;width:var(--control-height);min-width:var(--control-height);text-align:center;height:100%;color:var(--ink);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0;padding:0;transition:color .15s,background-color .15s;display:flex}.dock-segmented-btn:not(:first-of-type){border-left:1px solid var(--line)}.dock-segmented-btn:first-of-type{border-top-left-radius:999px;border-bottom-left-radius:999px}.dock-segmented-btn:last-of-type{border-top-right-radius:999px;border-bottom-right-radius:999px}.dock-segmented-btn.is-active{background:var(--accent-soft);color:var(--accent-text)}@media (hover:hover){.dock-segmented-btn.is-active:hover{background:var(--accent-soft)!important;color:var(--accent-text)!important}.dock-segmented-btn:not(.is-active):hover:not(.is-disabled){color:var(--accent)!important;background:var(--dock-hover-bg)!important}}.dock-icon-btn,.lyric-dock .circle-btn{border:1px solid var(--line);box-sizing:border-box;color:var(--ink);background:#00000008;border-radius:999px;flex-shrink:0;transition:color .15s,background-color .15s}:root[data-theme=dark] .dock-icon-btn{border:1px solid var(--line);box-sizing:border-box;background:#ffffff0d}@media (hover:hover){.dock-icon-btn:not(.is-disabled):hover,.lyric-dock .circle-btn:not(.is-disabled):hover{background:var(--dock-hover-bg);color:var(--accent)}}.dock-icon-btn.is-active{background:var(--accent-soft);color:var(--accent-text)}@media (hover:hover){.dock-icon-btn.is-active:hover{background:var(--accent-soft);color:var(--accent-text)}}.lyric-dock__end{border-left:1px solid var(--line);flex-shrink:0;align-items:center;padding-left:8px;display:flex}.lyric-edit-dock-actions{align-items:center;display:flex}.lyric-edit-dock-actions>*+*{margin-left:6px}.dock-icon-btn.is-save,:root[data-theme=dark] .dock-icon-btn.is-save{background:var(--action-save-bg)!important;color:#fff!important;border-color:#0000!important}.dock-icon-btn.is-cancel,.dock-icon-btn.is-close,:root[data-theme=dark] .dock-icon-btn.is-cancel,:root[data-theme=dark] .dock-icon-btn.is-close{background:var(--action-cancel-bg)!important;color:#fff!important;border-color:#0000!important}@media (hover:hover){.dock-icon-btn.is-save:hover,:root[data-theme=dark] .dock-icon-btn.is-save:hover{background:var(--action-save-hover)!important;color:#fff!important}.dock-icon-btn.is-cancel:hover,.dock-icon-btn.is-close:hover,:root[data-theme=dark] .dock-icon-btn.is-cancel:hover,:root[data-theme=dark] .dock-icon-btn.is-close:hover{background:var(--action-cancel-hover)!important;color:#fff!important}}.lyric-dock__cluster>:not(:first-child){border-left:1px solid var(--line)!important}.dock-status-btn.autoscroll-btn{text-align:center;cursor:pointer;color:var(--ink);background:0 0;border:none;flex-direction:column;justify-content:center;align-items:center;min-width:45px;height:100%;padding:0 8px;line-height:1;transition:color .15s,background-color .15s;display:flex;position:relative}.dock-status-btn.autoscroll-btn.is-active{background:var(--accent-soft)!important;color:var(--accent-text)!important}@media (hover:hover){.dock-status-btn.autoscroll-btn:not(.is-active):hover:not(.is-disabled){background:var(--dock-hover-bg)!important;color:var(--accent)!important}.dock-status-btn.autoscroll-btn:not(.is-active):hover:not(.is-disabled) .speed-text{color:var(--accent)!important}.dock-status-btn.autoscroll-btn.is-active:hover{background:var(--accent-soft)!important;color:var(--accent-text)!important}}.autoscroll-btn-icon-wrapper{text-align:center;justify-content:center;align-items:center;height:14px;margin-bottom:1px;display:flex}.speed-text{font-size:var(--font-size-sm);color:var(--ink);font-weight:400;line-height:1;transition:color .15s}.dock-status-btn.autoscroll-btn.is-active .speed-text{color:var(--accent-text)!important}.dock-btn-text{text-align:center;justify-content:center;align-items:center;width:100%;height:100%;margin:auto;line-height:1;display:inline-flex}.dock-btn-text.font-weight-500{font-weight:var(--font-weight-base)}.dock-btn svg,.circle-btn svg,.dock-segmented-btn svg,.dock-status-btn svg{flex-shrink:0;margin:auto;display:block}@media (height<=480px){.lyric-dock{margin:0 auto;bottom:0}@supports (padding-bottom:env(safe-area-inset-bottom)){.lyric-dock{bottom:calc(env(safe-area-inset-bottom) * .6)}}}
