:root{--max-width: 720px;--accent: #6b5cff;--muted: #6b7280;--bg: #ffffff;--card: #f8f9fb;--text: #111827;--border: #e7eaf0;--panel: #ffffff;--progress-bg: #e6e9f3;--btn-bg: rgba(16, 24, 40, .04);--btn-border: rgba(16, 24, 40, .08);--btn-hover: rgba(99, 102, 241, .06);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(17, 24, 39, .48);--seek-percent: 0%}.dark{--accent: #5f6bd6;--bg: #071422;--card: #0d1620;--panel: #0b1320;--text: #d7e6f5;--muted: #8793a0;--border: rgba(255, 255, 255, .04);--progress-bg: #0f2430;--btn-bg: rgba(255, 255, 255, .03);--btn-border: rgba(255, 255, 255, .08);--btn-hover: rgba(95, 107, 214, .07);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(215, 230, 245, .62)}@media (prefers-color-scheme: dark){:root{--accent: #5f6bd6;--bg: #071422;--card: #0d1620;--panel: #0b1320;--text: #d7e6f5;--muted: #8793a0;--border: rgba(255, 255, 255, .04);--progress-bg: #0f2430;--btn-bg: rgba(255, 255, 255, .03);--btn-border: rgba(255, 255, 255, .08);--btn-hover: rgba(95, 107, 214, .07);--btn-focus: rgba(95, 107, 214, .14);--time-color: rgba(215, 230, 245, .62)}}*{box-sizing:border-box}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;color:var(--text);background:var(--bg);margin:0;padding:0}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px}.auth-card{width:min(100%,390px);padding:28px;border:1px solid var(--border);border-radius:16px;background:var(--card);box-shadow:0 18px 50px #0f172a1a}.auth-brand{color:var(--accent);font-weight:800;letter-spacing:.02em}.auth-card h1{margin:18px 0 8px;font-size:1.45rem}.auth-description,.auth-loading{margin:0;color:var(--muted);line-height:1.6}.auth-loading{margin-top:18px}.auth-label{display:block;margin:22px 0 8px;font-size:.85rem;font-weight:700}.auth-input{width:100%;height:46px;padding:0 12px;border:1px solid var(--btn-border);border-radius:9px;color:var(--text);background:var(--panel);font:inherit}.auth-input:focus{outline:3px solid var(--btn-focus);border-color:var(--accent)}.auth-error{margin-top:12px;color:#d14343;font-size:.84rem;line-height:1.5}.auth-submit{width:100%;height:46px;margin-top:18px;border:0;border-radius:9px;color:#fff;background:var(--accent);cursor:pointer;font:inherit;font-weight:700}.auth-submit:disabled{cursor:default;opacity:.55}.app{max-width:var(--max-width);margin:0 auto 32px;padding:0 20px 20px}.app-follow{height:100vh;height:100dvh;margin-bottom:0;padding-bottom:0;display:flex;flex-direction:column}.app-follow .header{flex:0 0 auto}.app-follow .player{flex:1 1 auto;min-height:0;padding-bottom:0;display:flex;flex-direction:column}.header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}.song-header{position:relative;display:grid;grid-template-columns:max-content minmax(0,1fr) max-content;gap:12px}.song-title{width:fit-content;max-width:100%;min-width:0;display:flex;align-items:baseline;justify-self:center;overflow:hidden;white-space:nowrap}.song-name,.song-artist{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-name{flex:0 0 auto;max-width:100%}.song-artist{flex:0 1 auto;font-weight:400}.song-header .back-btn{justify-self:start}.song-header .display-menu{justify-self:end}.song-app>.song-header>.back-btn,.song-app>.song-header>.song-title,.song-app>.song-header>.display-menu>.display-menu-trigger,.song-app>.player>.controls>.transport-controls,.song-app>.player>.controls>.seek-controls{transition:opacity .45s ease}.song-app.is-playing>.song-header>.back-btn,.song-app.is-playing>.song-header>.song-title,.song-app.is-playing>.song-header>.display-menu>.display-menu-trigger,.song-app.is-playing>.player>.controls>.transport-controls,.song-app.is-playing>.player>.controls>.seek-controls{opacity:.36}.display-menu{position:relative;flex:0 0 auto}.display-menu-trigger{min-height:40px;padding:7px 10px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--border);border-radius:10px;color:var(--text);background:var(--panel);box-shadow:0 1px #10182808;cursor:pointer;font:inherit;font-size:13px;font-weight:650}.display-menu-trigger:focus-visible{outline:3px solid var(--btn-focus);outline-offset:2px}.display-menu-panel{position:absolute;z-index:10;top:calc(100% + 8px);right:0;width:min(310px,calc(100vw - 24px));padding:12px;display:grid;gap:10px;border:1px solid var(--border);border-radius:12px;color:var(--text);background:var(--panel);box-shadow:0 14px 35px #0f172a2e}.display-menu-row{min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:12px}.display-menu-label{color:var(--muted);font-size:.78rem;font-weight:650;white-space:nowrap}.logout-btn{border:0;padding:8px;color:var(--muted);background:transparent;cursor:pointer;font:inherit;font-size:.78rem}.logout-btn:hover{color:var(--text)}.list-header-actions{display:flex;align-items:center;gap:6px}.performance-mode-btn,.viewer-qr-btn{min-height:40px;padding:8px 12px;border:1px solid var(--btn-border);border-radius:10px;color:var(--text);background:var(--btn-bg);cursor:pointer;font:inherit;font-size:.78rem;font-weight:700}.performance-mode-btn:hover,.viewer-qr-btn:hover{background:var(--btn-hover)}.performance-mode-btn:focus-visible,.viewer-qr-btn:focus-visible{outline:3px solid var(--btn-focus);outline-offset:2px}.performance-mode-btn.is-active{border-color:var(--accent);color:#fff;background:var(--accent)}.performance-error{margin:-6px 0 16px;color:#d14343;font-size:.82rem;line-height:1.5;text-align:right}.viewer-qr-backdrop{position:fixed;z-index:100;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:rgba(7,20,34,.68);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.viewer-qr-dialog{position:relative;width:min(100%,430px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;padding:28px;border:1px solid var(--border);border-radius:18px;color:var(--text);background:var(--panel);box-shadow:0 24px 70px #07142259;text-align:center}.viewer-qr-dialog h2{margin:0 36px 8px;font-size:1.3rem}.viewer-qr-dialog p{margin:0 0 18px;color:var(--muted);font-size:.88rem;line-height:1.55}.viewer-qr-close{position:absolute;top:12px;right:12px;width:40px;height:40px;border:0;border-radius:50%;color:var(--muted);background:transparent;cursor:pointer;font:inherit;font-size:1.5rem;line-height:1}.viewer-qr-close:hover{color:var(--text);background:var(--btn-hover)}.viewer-qr-close:focus-visible{outline:3px solid var(--btn-focus)}.viewer-qr-image{display:block;width:min(100%,360px);height:auto;margin:0 auto;border-radius:10px;background:#fff}.viewer-qr-loading,.viewer-qr-error{min-height:240px;display:grid;place-items:center;color:var(--muted)}.viewer-qr-error{color:#d14343}.viewer-qr-url{margin-top:16px;color:var(--muted);font-size:.75rem;line-height:1.45;overflow-wrap:anywhere}.title{font-size:1.2rem;font-weight:700}.list{display:grid;grid-template-columns:1fr;gap:12px;padding:0;list-style:none}.song-item{background:var(--card);padding:12px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}.song-meta{color:var(--muted);font-size:.9rem}.translation-badge{display:inline-block;margin-left:7px;padding:1px 6px;border:1px solid var(--btn-border);border-radius:999px;color:var(--accent);font-size:.68rem;font-weight:700;vertical-align:1px}.player{background:var(--card);padding:16px;border-radius:12px;border:1px solid var(--border)}.controls{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:12px}.transport-controls,.seek-controls{display:flex;align-items:center;gap:8px}.transport-controls{flex:0 0 auto}.seek-controls,.seek-controls input[type=range]{flex:1 1 auto;min-width:0}.seek-controls .time{flex:0 0 30px;min-width:30px;text-align:center;font-variant-numeric:tabular-nums}.btn{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text);padding:8px 10px;border-radius:8px;cursor:pointer;min-width:44px;height:40px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;transition:background .12s ease,transform .08s ease,box-shadow .12s ease}.btn-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:18px;height:1em;width:1em;vertical-align:middle}.icon-pause{letter-spacing:-.12em}.icon-play{transform:translateY(.1em) translate(.1em)}.btn.small-text{font-size:13px;line-height:1}.btn:active{transform:translateY(0)}.btn:focus{outline:3px solid var(--btn-focus);outline-offset:2px}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:6px;background:transparent;border-radius:999px;outline:none}input[type=range]::-webkit-slider-runnable-track{height:6px;background:linear-gradient(90deg,var(--accent) 0%,var(--accent) var(--seek-percent),var(--progress-bg) var(--seek-percent),var(--progress-bg) 100%);border-radius:999px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 4px 10px #0f172a4d;margin-top:-4px}input[type=range]::-moz-range-track{height:6px;background:transparent;border-radius:999px}input[type=range]::-moz-range-progress{background:var(--accent);height:6px;border-radius:999px}input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 4px 10px #0f172a4d;border:none}.player audio{width:100%;display:block;margin-bottom:8px}.time{font-size:.72rem;color:var(--time-color)}.lyrics{background:var(--panel);padding:8px 12px;border-radius:8px;border:1px solid var(--border);margin-top:8px}.segmented-control{display:inline-flex;padding:3px;border-radius:9px;background:var(--btn-bg);border:1px solid var(--btn-border)}.segmented-control button{border:0;border-radius:6px;padding:6px 12px;color:var(--muted);background:transparent;cursor:pointer;font:inherit;font-size:.8rem;font-weight:650}.segmented-control button.active{color:var(--text);background:var(--panel);box-shadow:0 1px 4px #0f172a1f}.font-size-control{display:inline-flex;align-items:center;overflow:hidden;border:1px solid var(--btn-border);border-radius:9px;background:var(--btn-bg);color:var(--muted)}.font-size-control span{padding-inline:5px;font-size:.72rem;font-weight:650}.font-size-control button{width:34px;min-height:34px;padding:0;border:0;color:var(--text);background:transparent;cursor:pointer;font:inherit;font-size:1rem;font-weight:700}.font-size-control button:hover:not(:disabled){background:var(--btn-hover)}.font-size-control button:focus-visible{position:relative;outline:2px solid var(--accent);outline-offset:-2px}.font-size-control button:disabled{color:var(--muted);cursor:default;opacity:.4}.lyrics-follow{min-height:0;width:100vw;width:100dvw;max-width:none;position:relative;left:50%;transform:translate(-50%);border-radius:0;overflow-y:auto;overflow-x:hidden;padding-block:0;display:flex;flex-direction:column;overscroll-behavior:contain}.lyrics-stage{min-width:0}.song-app.app-follow .lyrics-stage-line-height-swipe{touch-action:none}.app-follow .lyrics-stage-follow{flex:1 1 auto;min-height:0;position:relative;margin-top:8px}.remote-follow{position:relative;width:100%;max-width:none;margin:0;padding:0;overflow:hidden;touch-action:none}.remote-follow .lyrics-stage-follow{margin-top:0}.remote-follow .lyrics-follow{margin:0;border:0;pointer-events:none;user-select:none;-webkit-user-select:none}.remote-follow .lyrics-follow.is-ending{animation:remote-lyrics-fade-out 2s cubic-bezier(.65,0,.35,1) both}.remote-waiting{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:32px;color:var(--muted);text-align:center}.remote-waiting-brand{color:var(--accent);font-size:1.15rem;font-weight:800;letter-spacing:.02em}.remote-display-menu{position:fixed;z-index:3;right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom))}.remote-display-trigger{width:46px;height:46px;padding:0;border:1px solid var(--btn-border);border-radius:50%;color:var(--text);background:color-mix(in srgb,var(--panel) 78%,transparent);box-shadow:0 4px 18px #0714221a;cursor:pointer;font:inherit;font-size:.9rem;font-weight:750;opacity:.58;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .16s ease,background .16s ease}.remote-display-trigger:hover,.remote-display-trigger:focus-visible,.remote-display-trigger.is-open{opacity:1;background:var(--panel)}.remote-display-trigger:focus-visible{outline:3px solid var(--btn-focus);outline-offset:2px}.remote-display-panel{position:absolute;right:0;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 24px));padding:14px;display:grid;gap:12px;border:1px solid var(--border);border-radius:14px;color:var(--text);background:color-mix(in srgb,var(--panel) 94%,transparent);box-shadow:0 16px 44px #07142233;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.remote-song-title-overlay{position:absolute;z-index:2;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:32px;color:var(--text);background:var(--bg);opacity:0;pointer-events:none}.remote-song-title-overlay.is-active{animation:remote-song-title-fade-in 1.4s cubic-bezier(.4,0,.2,1) both}.remote-song-title-overlay.is-exiting{animation:remote-song-title-fade-out 1.4s cubic-bezier(.4,0,.2,1) both}@keyframes remote-song-title-fade-in{0%{opacity:0}to{opacity:1}}@keyframes remote-song-title-fade-out{0%{opacity:1}to{opacity:0}}@keyframes remote-lyrics-fade-out{0%{opacity:1}to{opacity:0}}.remote-song-title{max-width:100%;font-size:clamp(48px,10vw,384px);font-weight:800;line-height:1.15;letter-spacing:-.03em;text-align:center;text-wrap:balance}.lyrics-stage-follow .lyrics-follow{height:100%;margin-top:0}.follow-rest{display:none}.lyrics-follow .follow-rest,.lyrics-follow .lyric-block{flex:0 0 auto;min-height:100%}.lyrics-follow .follow-rest{display:flex;align-items:center;justify-content:center;pointer-events:none}.follow-note-overlay{display:none}.lyrics-stage-follow .follow-note-overlay{position:absolute;z-index:1;top:0;bottom:0;left:50%;width:100vw;width:100dvw;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none;transform:translate(-50%)}.follow-rest-note{flex:none;width:clamp(240px,38vmin,460px);height:auto;max-width:calc(100% - 32px);overflow:visible;color:var(--muted);opacity:0;transform:rotate(18deg) scale(.96);transform-origin:center;transition:opacity 1.6s cubic-bezier(.4,0,.2,1),transform 2.4s cubic-bezier(.2,.7,.2,1)}.follow-rest-note-stem{fill:none;stroke:currentColor;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}.follow-rest-note-head,.follow-rest-note-flag{fill:currentColor}.follow-note-overlay.is-active .follow-rest-note{opacity:.08;transform:rotate(18deg) scale(1)}.lyric-block{-webkit-appearance:none;-moz-appearance:none;appearance:none;display:block;width:100%;padding:14px 10px;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--border);color:var(--text);background:transparent;text-align:left;font:inherit;font-size:var(--lyric-font-size, 16px);cursor:pointer;transition:opacity 2s cubic-bezier(.65,0,.35,1),color 2s cubic-bezier(.65,0,.35,1),background-color 2s cubic-bezier(.65,0,.35,1),border-color 2s cubic-bezier(.65,0,.35,1)}.lyric-block.is-seek-disabled{cursor:default}.lyric-block:last-of-type{border-bottom:0}.lyric-block.is-rest{min-height:calc(var(--lyric-font-size, 16px) * var(--lyric-line-height, 1.75) + 28px)}.lyric-block:focus{outline:none}.lyric-block:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:8px}.lyric-original,.lyric-translation{display:block;white-space:pre-wrap;line-height:var(--lyric-line-height, 1.75);font-weight:700}.lyric-translation{margin-top:8px;color:var(--muted);font-size:.9em}.lyrics-follow .lyric-block{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:100%;border-bottom:0;opacity:.16}.lyrics-follow .lyric-block.is-near{opacity:.28}.lyrics-follow .lyric-block.is-active{opacity:1}.lyrics-follow .lyric-block.has-large-text{font-size:calc(var(--lyric-font-size, 16px) * 1.35)}.lyrics-follow .lyric-block.has-glow .lyric-glow-character{animation:lyric-glow-shimmer var(--glow-duration) ease-in-out var(--glow-delay) infinite alternate}@keyframes lyric-glow-shimmer{0%{text-shadow:0 0 .105em color-mix(in srgb,currentColor 70.57%,transparent),0 0 .14em color-mix(in srgb,currentColor 18.44%,transparent),0 0 .3em color-mix(in srgb,currentColor 45.09%,transparent),0 0 .42em color-mix(in srgb,currentColor 5.3%,transparent),0 0 .5em color-mix(in srgb,currentColor 19.54%,transparent),0 0 .66em color-mix(in srgb,currentColor 3.06%,transparent)}19%{text-shadow:0 0 .105em color-mix(in srgb,currentColor 62.46%,transparent),0 0 .14em color-mix(in srgb,currentColor 52.05%,transparent),0 0 .3em color-mix(in srgb,currentColor 34.83%,transparent),0 0 .42em color-mix(in srgb,currentColor 26.35%,transparent),0 0 .5em color-mix(in srgb,currentColor 13.4%,transparent),0 0 .66em color-mix(in srgb,currentColor 13.4%,transparent)}46%{text-shadow:0 0 .105em color-mix(in srgb,currentColor 69.85%,transparent),0 0 .14em color-mix(in srgb,currentColor .5%,transparent),0 0 .3em color-mix(in srgb,currentColor 44.72%,transparent),0 0 .42em color-mix(in srgb,currentColor .5%,transparent),0 0 .5em color-mix(in srgb,currentColor 19.6%,transparent),0 0 .66em color-mix(in srgb,currentColor .5%,transparent)}73%{text-shadow:0 0 .105em color-mix(in srgb,currentColor .5%,transparent),0 0 .14em color-mix(in srgb,currentColor 85.93%,transparent),0 0 .3em color-mix(in srgb,currentColor .5%,transparent),0 0 .42em color-mix(in srgb,currentColor 54.77%,transparent),0 0 .5em color-mix(in srgb,currentColor .5%,transparent),0 0 .66em color-mix(in srgb,currentColor 27.64%,transparent)}to{text-shadow:0 0 .105em color-mix(in srgb,currentColor 66.09%,transparent),0 0 .14em color-mix(in srgb,currentColor 35.12%,transparent),0 0 .3em color-mix(in srgb,currentColor 39.65%,transparent),0 0 .42em color-mix(in srgb,currentColor 15.49%,transparent),0 0 .5em color-mix(in srgb,currentColor 16.45%,transparent),0 0 .66em color-mix(in srgb,currentColor 7.84%,transparent)}}@media (prefers-reduced-motion: reduce){.lyric-block{transition-duration:.01ms}.remote-song-title-overlay,.remote-follow .lyrics-follow.is-ending{animation-duration:.01ms}.follow-rest-note{transition-duration:.01ms}.lyrics-follow .lyric-block.has-glow .lyric-glow-character{animation:none;text-shadow:0 0 .1em color-mix(in srgb,currentColor 68%,transparent),0 0 .29em color-mix(in srgb,currentColor 43%,transparent),0 0 .48em color-mix(in srgb,currentColor 19%,transparent)}}.lyric-note{color:var(--muted);font-size:.95em;opacity:.9;margin:0 .15em}.back-btn{background:var(--panel);border:1px solid var(--border);padding:8px;border-radius:10px;color:var(--text);cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:8px;min-height:40px;box-shadow:0 1px #10182808;transition:transform .08s ease,box-shadow .12s ease}.back-btn:active{transform:translateY(0)}.back-btn:focus{outline:3px solid rgba(107,92,255,.16);outline-offset:2px}.empty{color:var(--muted);text-align:center;padding:24px}.footer{margin-top:18px;font-size:.85rem;color:var(--muted);text-align:center}@media (max-width: 480px){.app{padding:12px}.back-btn{padding:10px;min-height:48px;border-radius:12px}.display-menu-trigger{min-height:48px;border-radius:12px}.list-header-actions{gap:2px}.performance-mode-btn,.viewer-qr-btn{min-height:44px;padding-inline:10px}.viewer-qr-backdrop{padding:12px}.viewer-qr-dialog{max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:24px 18px 20px}}@media (min-width: 740px){.song-app{max-width:none;padding-inline:0;display:grid;grid-template-columns:72px minmax(0,1fr) max-content minmax(0,1fr) 72px;grid-template-rows:max-content auto;column-gap:8px;align-items:center}.song-app.app-follow{display:grid;grid-template-rows:max-content minmax(0,1fr)}.song-app>.song-header,.song-app>.player{display:contents}.song-app>.song-header>.back-btn{grid-column:1;grid-row:1}.song-app>.song-header>.song-title{grid-column:2;grid-row:1;width:100%;justify-self:start}.song-app>.player>.controls{display:contents;margin-bottom:0}.song-app>.player>.controls>.transport-controls{grid-column:3;grid-row:1;justify-self:center}.song-app>.player>.controls>.seek-controls{grid-column:4;grid-row:1;width:100%}.song-app>.song-header>.display-menu{grid-column:5;grid-row:1;justify-self:end}.song-app>.player>audio{display:none}.song-app>.player>.lyrics-stage{grid-column:1 / -1;grid-row:2;width:min(calc(var(--max-width) - 40px),calc(100vw - 40px));min-width:0;justify-self:center;align-self:stretch}.song-app>.song-header>.song-title .song-name{flex-shrink:1}}
