:root{color-scheme:dark;font-family:Noto Sans KR,Noto Sans JP,system-ui,sans-serif;background:#09090b;color:#fafafa}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-height:100svh;overflow:hidden;background:#09090b}button,a{font:inherit}.backdrop{position:fixed;inset:-7vmax;background:#17171b center/cover no-repeat;filter:blur(42px) saturate(1.15);transform:scale(1.08);opacity:.62;transition:background-image .35s ease}.shade{position:fixed;inset:0;background:linear-gradient(180deg,#05050885,#050508d1)}main{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:24px;min-height:100svh;padding:max(24px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(24px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left))}header{display:flex;align-items:center;gap:14px;min-width:0}.cover{width:58px;height:58px;object-fit:cover;border-radius:6px;background:#27272a;box-shadow:0 12px 32px #00000047}.meta{min-width:0}.title,.artist{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title{font-size:16px;font-weight:700}.artist{margin-top:3px;color:#d4d4d8;font-size:13px}.lyrics{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;min-height:0;margin:auto;width:min(100%,1100px)}.context{width:100%;color:#f4f4f561;font-size:clamp(15px,2.1vh,22px);line-height:1.9;min-height:3.8em;white-space:pre-line;overflow-wrap:anywhere;letter-spacing:.01em}#previous{margin-bottom:clamp(22px,4vh,42px)}#nextFirst{margin-top:clamp(26px,4.5vh,48px);min-height:0}#nextRest{margin-top:clamp(16px,2.5vh,26px);min-height:0}.current{width:100%;margin:0;font-size:clamp(28px,6.3vh,70px);font-weight:700;line-height:1.22;overflow-wrap:anywhere;text-wrap:balance;text-shadow:0 4px 28px rgba(0,0,0,.42)}.current.transition{animation:lyric-in .48s cubic-bezier(.22,.8,.28,1)}@keyframes lyric-in{0%{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}.translation{margin-top:clamp(20px,3vh,32px);font-size:clamp(17px,2.7vh,28px);font-weight:600;line-height:1.45;overflow-wrap:anywhere}.next-translation{margin-top:12px;color:#f4f4f58f;font-size:clamp(13px,1.8vh,18px);line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}.pronunciation{margin-top:10px;color:#d4d4d8;font-size:clamp(14px,2.1vh,21px);line-height:1.45;overflow-wrap:anywhere}footer{width:min(100%,1100px);margin:auto;padding-right:72px}.time{display:flex;justify-content:space-between;margin-bottom:8px;color:#d4d4d8;font-size:12px;font-variant-numeric:tabular-nums}.track{height:4px;border-radius:2px;background:#fff3;overflow:hidden}.fill{height:100%;width:0;background:#f472b6;transition:width .2s linear}.waiting{color:#e4e4e7;font-size:clamp(24px,4vh,42px);font-weight:600}.account-button{position:fixed;z-index:10;right:max(24px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:52px;height:52px;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;overflow:hidden;color:#07130b;background:#1ed760;box-shadow:0 12px 34px #0000006b;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease}.account-button:hover{transform:translateY(-2px);box-shadow:0 16px 38px #00000080}.account-button:focus-visible{outline:3px solid rgba(244,114,182,.8);outline-offset:3px}.account-button img{width:100%;height:100%;object-fit:cover}.account-button img:not([src]){display:none}.spotify-mark{display:grid;width:100%;height:100%;place-items:center}.spotify-mark svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.modal-backdrop{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:24px;background:#0000009e;backdrop-filter:blur(10px)}.modal-backdrop[hidden]{display:none}.account-modal{position:relative;width:min(100%,390px);max-height:calc(100svh - 48px);overflow:auto;padding:32px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:#18181bf5;box-shadow:0 28px 80px #0000008f;text-align:center}.modal-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;color:#d4d4d8;background:transparent;font-size:26px;line-height:1;cursor:pointer}.modal-close:hover{background:#ffffff14}.modal-icon{display:grid;width:70px;height:70px;margin:0 auto 18px;place-items:center;border-radius:50%;overflow:hidden;color:#07130b;background:#1ed760;font-size:30px;font-weight:700}.modal-icon img{width:100%;height:100%;object-fit:cover}.modal-icon svg{display:block;width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.account-modal h2{margin:0;font-size:21px}.account-modal p{min-height:1.5em;margin:9px 0 24px;color:#a1a1aa;font-size:14px}.primary-button,.secondary-button,.danger-button{display:block;width:100%;padding:12px 18px;border:0;border-radius:999px;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}.primary-button{color:#07130b;background:#1ed760}.secondary-button{color:#f4f4f5;background:#ffffff1a}.danger-button{color:#fecdd3;background:#f43f5e24}.primary-button:hover{background:#34e16f}.secondary-button:hover{background:#ffffff29}.danger-button:hover{background:#f43f5e38}button:disabled{opacity:.55;cursor:wait}.vanity-controls{margin:0 0 18px;padding:18px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);text-align:left}.vanity-controls label{display:block;margin-bottom:8px;color:#e4e4e7;font-size:13px;font-weight:700}.vanity-input-row{display:flex;align-items:center;gap:7px;padding:0 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:#0003}.vanity-input-row span{color:#71717a}.vanity-input-row input{width:100%;min-width:0;padding:11px 0;border:0;outline:0;color:#fafafa;background:transparent;font:inherit}.vanity-input-row:focus-within{border-color:#1ed760;box-shadow:0 0 0 2px #1ed76026}.account-modal .vanity-status{min-height:2.6em;margin:8px 2px 12px;color:#a1a1aa;font-size:12px}.vanity-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px}.vanity-actions .secondary-button,.vanity-actions .danger-button{padding:10px 8px;font-size:13px}.account-modal>.danger-button{margin-top:10px}@media(max-width:600px){main{gap:16px}.cover{width:48px;height:48px}.current{font-size:clamp(25px,8vw,42px)}.context{font-size:14px}.account-button{right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));width:48px;height:48px}footer{padding-right:62px}}@media(prefers-reduced-motion:reduce){.current.transition{animation:none}.account-button,.fill{transition:none}}:root{--accent:#f472b6;--bg-blur:42px;--shade:.82;--lyric-scale:1;--context-lines:2}.backdrop{filter:blur(var(--bg-blur)) saturate(1.15)}.shade{background:linear-gradient(180deg,rgb(5 5 8 / calc(var(--shade) * .7)),rgb(5 5 8 / var(--shade)))}.current{font-size:calc(clamp(28px,6.3vh,70px) * var(--lyric-scale))}.translation{font-size:calc(clamp(17px,2.7vh,28px) * var(--lyric-scale))}.context{font-size:calc(clamp(15px,2.1vh,22px) * var(--lyric-scale));opacity:calc(.55 + var(--context-lines) * .1)}.fill{background:var(--accent)}.account-button:focus-visible,.appearance-button:focus-visible{outline-color:var(--accent)}body[data-theme=minimal]{background:#101114}body[data-theme=minimal] .backdrop{opacity:.28;filter:blur(14px) saturate(.4)}body[data-theme=minimal] .shade{background:linear-gradient(180deg,#0c0d10b3,#0c0d10d6)}body[data-theme=minimal] .cover{border-radius:3px;box-shadow:none}body[data-theme=minimal] .context{color:#f4f4f57a}body[data-theme=light]{color-scheme:light;background:#f4f1ec;color:#18181b}body[data-theme=light] .backdrop{opacity:.32;filter:blur(var(--bg-blur)) saturate(.75)}body[data-theme=light] .shade{background:linear-gradient(180deg,rgb(250 248 245 / calc(var(--shade) * .72)),rgb(250 248 245 / var(--shade)))}body[data-theme=light] .artist,body[data-theme=light] .time,body[data-theme=light] .pronunciation{color:#52525b}body[data-theme=light] .context{color:#27272a85}body[data-theme=light] .next-translation{color:#27272aa3}body[data-theme=light] .current{text-shadow:0 2px 18px rgba(255,255,255,.6)}body[data-theme=light] .track{background:#18181b2e}body[data-theme=light] .waiting{color:#27272a}body.high-contrast .context,body.high-contrast .next-translation{color:#ffffffd1}body[data-theme=light].high-contrast .context,body[data-theme=light].high-contrast .next-translation{color:#27272a}body.high-contrast .artist,body.high-contrast .time,body.high-contrast .pronunciation{color:#fff}body[data-theme=light].high-contrast .artist,body[data-theme=light].high-contrast .time,body[data-theme=light].high-contrast .pronunciation{color:#18181b}body.high-contrast .current,body.high-contrast .translation,body.high-contrast .title{text-shadow:0 2px 12px rgba(0,0,0,.65)}body[data-theme=light].high-contrast .current,body[data-theme=light].high-contrast .translation,body[data-theme=light].high-contrast .title{text-shadow:0 1px 8px rgba(255,255,255,.85)}body[data-layout=focus] .cover{width:42px;height:42px;opacity:.8}body[data-layout=focus] #previous,body[data-layout=focus] #nextRest{display:none}body[data-layout=focus] .lyrics{width:min(100%,1180px)}body[data-layout=focus] .context{min-height:1.9em}body[data-layout=stage] .cover,body[data-layout=stage] .meta{display:none}body[data-layout=stage] header{min-height:16px}body[data-layout=stage] .lyrics{width:min(100%,1500px)}body[data-layout=stage] .current{font-size:calc(clamp(42px,10vh,118px) * var(--lyric-scale));line-height:1.14}body[data-layout=stage] .translation{font-size:calc(clamp(23px,4vh,48px) * var(--lyric-scale))}body[data-layout=stage] .pronunciation{font-size:clamp(19px,3vh,32px)}body[data-layout=stage] .context,body[data-layout=stage] .next-translation{display:none}body[data-layout=stage] footer{width:min(100%,1500px)}body.reduce-motion *,body.reduce-motion *:before,body.reduce-motion *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.appearance-button{position:fixed;z-index:10;right:88px;bottom:max(22px,env(safe-area-inset-bottom));display:grid;width:52px;height:52px;place-items:center;padding:0;border:1px solid rgba(255,255,255,.22);border-radius:50%;color:#fafafa;background:#18181bad;box-shadow:0 12px 34px #0000005c;font-size:14px;font-weight:700;cursor:pointer;backdrop-filter:blur(12px);transition:transform .18s ease,background .18s ease}.appearance-button:hover{transform:translateY(-2px);background:#27272ae6}body[data-theme=light] .appearance-button{color:#27272a;border-color:#18181b33;background:#ffffffc2}.appearance-modal{width:min(100%,480px);text-align:left;padding:28px}.appearance-modal h2{text-align:center}.appearance-modal>p{text-align:center;margin-bottom:20px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:12px 0;color:#e4e4e7;font-size:14px}.setting-row select{width:min(58%,240px);padding:9px 12px;border:1px solid rgba(255,255,255,.18);border-radius:10px;color:#fafafa;background:#27272a;font:inherit}.custom-settings,.accessibility-settings{margin:18px 0;padding:12px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px}.custom-settings legend,.accessibility-settings legend{padding:0 6px;color:#a1a1aa;font-size:12px}.setting-row input[type=color]{width:46px;height:32px;padding:2px;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:transparent}.range-row{display:grid;grid-template-columns:1fr minmax(120px,52%);align-items:center;gap:16px;margin:14px 0;color:#e4e4e7;font-size:13px}.range-row input{width:100%;accent-color:var(--accent)}.accessibility-settings{display:flex;flex-wrap:wrap;gap:10px 18px;color:#e4e4e7;font-size:13px}.accessibility-settings label{display:flex;align-items:center;gap:6px}.accessibility-settings input{accent-color:var(--accent)}.account-modal .appearance-status{min-height:1.4em;margin:10px 0;color:#a1a1aa;font-size:12px;text-align:center}body[data-theme=light] .appearance-modal .setting-row,body[data-theme=light] .appearance-modal .range-row,body[data-theme=light] .accessibility-settings{color:#27272a}body[data-theme=light] .setting-row select{color:#27272a;background:#fff;border-color:#18181b2e}body[data-theme=light] .appearance-modal{color:#18181b;background:#fffffffa;border-color:#18181b29}body[data-theme=light] .appearance-modal>p,body[data-theme=light] .custom-settings legend,body[data-theme=light] .accessibility-settings legend{color:#52525b}body[data-theme=light] .appearance-modal .modal-close{color:#52525b}body[data-theme=light] .custom-settings,body[data-theme=light] .accessibility-settings{border-color:#18181b24}body[data-theme=light] .appearance-modal .appearance-status{color:#52525b}body[data-theme=light] .account-modal:not(.appearance-modal){color:#fafafa}@media(max-width:600px){body[data-layout=stage] main{gap:12px}body[data-layout=stage] .current{font-size:calc(clamp(36px,11vw,64px) * var(--lyric-scale))}.appearance-button{right:74px;bottom:max(18px,env(safe-area-inset-bottom));width:48px;height:48px}.appearance-modal{padding:26px 22px 22px}.range-row{grid-template-columns:1fr 45%}.setting-row{gap:10px}}@media(prefers-reduced-motion:reduce){body:not(.reduce-motion) .current.transition{animation:none}}.room-presence{display:flex;align-items:center;gap:7px;margin-left:auto;padding:7px 11px;border:1px solid rgba(255,255,255,.14);border-radius:999px;color:#e4e4e7;background:#18181b75;font-size:12px;white-space:nowrap;backdrop-filter:blur(8px)}.room-presence strong{font-variant-numeric:tabular-nums}.presence-dot{width:7px;height:7px;border-radius:50%;background:#1ed760;box-shadow:0 0 10px #1ed76099}body[data-theme=light] .room-presence{color:#27272a;border-color:#18181b1f;background:#ffffffad}.reaction-bar{position:fixed;z-index:9;left:50%;bottom:max(82px,calc(env(safe-area-inset-bottom) + 70px));display:flex;justify-content:center;gap:8px;max-width:calc(100vw - 32px);padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:#18181b9e;box-shadow:0 12px 34px #0000003d;transform:translate(-50%);backdrop-filter:blur(14px)}.reaction-button{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:42px;height:40px;padding:0 10px;border:1px solid transparent;border-radius:999px;color:#fafafa;background:#ffffff14;font-size:17px;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}.reaction-button:hover:not(:disabled){transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent),transparent 55%);background:color-mix(in srgb,var(--accent),transparent 84%)}.reaction-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.reaction-button:disabled{opacity:.58;cursor:default}.reaction-count{min-width:0;font-size:11px;font-variant-numeric:tabular-nums}.reaction-count:empty{display:none}body[data-theme=light] .reaction-bar{border-color:#18181b1f;background:#ffffffb8}body[data-theme=light] .reaction-button{color:#27272a;background:#18181b0f}.reaction-settings{margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1);text-align:left}.reaction-settings>label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;color:#e4e4e7;font-size:13px;font-weight:700}.reaction-settings>label span{color:#71717a;font-size:11px;font-weight:400}.emoji-options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}.emoji-choice{display:grid;place-items:center;min-height:40px;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:10px;color:#e4e4e7;background:#0000001f;font-size:20px;line-height:1;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}.emoji-choice:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent),transparent 45%);background:color-mix(in srgb,var(--accent),transparent 90%)}.emoji-choice[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent),transparent 84%);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent),transparent 58%)}.emoji-choice:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.reaction-settings .secondary-button{padding:10px 14px;font-size:13px}body[data-theme=light] .reaction-settings{border-color:#18181b1f}body[data-theme=light] .reaction-settings>label,body[data-theme=light] .emoji-choice{color:#27272a}body[data-theme=light] .emoji-choice{border-color:#18181b1f;background:#18181b08}@media(max-width:600px){.room-presence{gap:5px;padding:6px 8px;font-size:11px}.reaction-bar{gap:5px;padding:6px;bottom:max(80px,calc(env(safe-area-inset-bottom) + 68px))}.reaction-button{min-width:38px;height:38px;padding:0 8px;font-size:16px}.emoji-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}}header .meta{flex:1}.history-toggle{padding:8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#fafafa;background:#18181b8f;font-size:12px;white-space:nowrap;cursor:pointer;backdrop-filter:blur(8px)}.history-toggle:hover{border-color:var(--accent);background:#18181bd1}body[data-theme=light] .history-toggle{color:#27272a;border-color:#18181b26;background:#ffffffbd}.history-panel{position:fixed;z-index:15;top:92px;right:max(24px,env(safe-area-inset-right));width:min(360px,calc(100vw - 48px));max-height:calc(100svh - 124px);overflow:auto;padding:18px;border:1px solid rgba(255,255,255,.14);border-radius:20px;color:#fafafa;background:#18181bf5;box-shadow:0 24px 70px #00000075;backdrop-filter:blur(16px)}.history-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.history-heading h2{margin:0;font-size:16px}.history-close{width:30px;height:30px;border:0;border-radius:50%;color:#d4d4d8;background:transparent;font-size:24px;line-height:1;cursor:pointer}.history-close:hover{background:#ffffff14}.history-list{display:grid;gap:8px;margin:0;padding:0;list-style:none}.history-track{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:11px;min-width:0;padding:7px;border-radius:12px;color:inherit;text-decoration:none;background:#ffffff0e}.history-track:hover{background:#ffffff1a}.history-track img,.history-cover-placeholder{display:grid;width:48px;height:48px;place-items:center;object-fit:cover;border-radius:8px;background:#303036;color:#a1a1aa;font-size:20px}.history-details{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;min-width:0}.history-details strong,.history-details>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-details strong{font-size:13px}.history-details>span{grid-column:1/-1;color:#a1a1aa;font-size:12px}.history-details time{grid-column:2;grid-row:1;color:#71717a;font-size:10px;font-variant-numeric:tabular-nums}.history-empty{margin:20px 4px 6px;color:#a1a1aa;font-size:13px;text-align:center}body[data-theme=light] .history-panel{border-color:#18181b24;color:#18181b;background:#fffffff7}body[data-theme=light] .history-close{color:#52525b}body[data-theme=light] .history-track{background:#18181b0b}body[data-theme=light] .history-track:hover{background:#18181b14}body[data-theme=light] .history-details>span,body[data-theme=light] .history-details time,body[data-theme=light] .history-empty{color:#52525b}.history-consent{display:flex;align-items:flex-start;gap:9px;margin:12px 0;color:#e4e4e7;cursor:pointer}.history-consent input{flex:0 0 auto;width:16px;height:16px;margin:2px 0 0;accent-color:var(--accent)}.history-consent span{display:grid;gap:4px}.history-consent strong{font-size:13px}.history-consent small{color:#a1a1aa;font-size:11px;line-height:1.45}body[data-theme=light] .history-consent{color:#27272a}body[data-theme=light] .history-consent small{color:#52525b}@media(max-width:600px){.history-toggle{padding:7px 9px;font-size:11px}.history-panel{top:max(82px,calc(env(safe-area-inset-top) + 74px));right:12px;width:calc(100vw - 24px);max-height:calc(100svh - 170px);padding:15px}}