:root{--bg:oklch(96.8% .004 90);--bg-raised:oklch(100% 0 0);--bg-hover:oklch(94.5% .005 90);--bg-sunken:oklch(95.5% .004 90);--line:oklch(18% .012 285);--line-soft:oklch(18% .012 285/.18);--text:oklch(18% .012 285);--text-2:oklch(42% .012 285);--text-3:oklch(58% .01 285);--accent:oklch(71% .21 349);--accent-strong:oklch(66% .23 349);--accent-ink:oklch(18% .012 285);--accent-soft:oklch(71% .21 349/.16);--warn:oklch(52% .13 60);--danger:oklch(55% .2 25);--tone-1:oklch(55% .18 28);--tone-2:oklch(50% .14 150);--tone-3:oklch(52% .15 250);--tone-4:oklch(52% .19 318);--disc:oklch(18% .012 285);--groove:oklch(100% 0 0/.22);--label-groove:oklch(100% 0 0/.35);--sheen:oklch(100% 0 0/.06);--paper:var(--bg);--radius-s:999px;--radius:16px;--radius-l:28px;--edge:2px;--shadow-hard:4px 4px 0 var(--line);--ease:cubic-bezier(.25, 1, .5, 1);--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Archivo Black", "Inter", system-ui, sans-serif;--font-script:"Instrument Serif", Georgia, serif;--font-zh:"Noto Serif SC", "Songti SC", "Songti TC", "STSong", serif;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);background-image:radial-gradient(var(--line-soft) 1px, transparent 1px);color:var(--text);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;background-size:22px 22px;font-size:15px;line-height:1.5}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.4}:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}h1,h2,p{margin:0}code{color:var(--text-2);font-size:.9em}.num{font-variant-numeric:tabular-nums}.note{color:var(--text-3);font-size:.85rem}.warn{color:var(--warn)}.eyebrow{letter-spacing:.14em;text-transform:uppercase;font-size:.72rem;font-weight:700}.btn{border:var(--edge) solid var(--line);border-radius:var(--radius-s);background:var(--bg-raised);min-height:38px;color:var(--text);transition:background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:.88rem;font-weight:600;display:inline-flex}.btn:hover:not(:disabled){background:var(--bg-hover)}.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-hard)}.btn.primary:hover:not(:disabled){background:var(--accent-strong);box-shadow:5px 5px 0 var(--line);transform:translate(-1px,-1px)}.btn.primary:active:not(:disabled){box-shadow:1px 1px 0 var(--line);transform:translate(2px,2px)}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover:not(:disabled){background:var(--bg-hover)}.btn.toggle.on{background:var(--accent);color:var(--accent-ink)}.link{color:var(--text);text-decoration:underline;-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent);text-underline-offset:3px;background:0 0;border:0;padding:0;font-weight:600;text-decoration-thickness:2px}.link:hover{color:var(--accent-strong)}.app{flex-direction:column;height:100%;display:flex}.topbar{align-items:center;gap:20px;padding:16px 28px;display:flex}.brand{background:0 0;border:0;align-items:center;gap:10px;padding:0;display:inline-flex}.brand-mark{border:var(--edge) solid var(--line);background:radial-gradient(circle at 50% 50%, var(--accent) 0 30%, transparent 30%), repeating-radial-gradient(circle at 50% 50%, var(--line) 0 2px, var(--bg-raised) 2px 4px);color:#0000;border-radius:50%;place-items:center;width:34px;height:34px;font-size:0;display:grid}.brand-name{font-family:var(--font-display);letter-spacing:-.02em;text-transform:uppercase;font-size:1.15rem}.url-form{border:var(--edge) solid var(--line);border-radius:var(--radius-s);background:var(--bg-raised);min-width:0;max-width:620px;transition:box-shadow .15s var(--ease);flex:1;align-items:center;gap:6px;margin:0 auto;padding:5px 5px 5px 18px;display:flex}.url-form:focus-within{box-shadow:var(--shadow-hard)}.url-form input{background:0 0;border:0;outline:none;flex:1;min-width:0;font-weight:500}.url-form input::placeholder{color:var(--text-3);font-weight:400}.error{border:var(--edge) solid var(--danger);border-radius:var(--radius);color:var(--danger);background:oklch(55% .2 25/.08);padding:10px 16px;font-size:.9rem;font-weight:500}.error a{color:inherit}.support-btn{flex:none}.support-btn:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}.support-card{border:var(--edge) solid var(--line);border-radius:var(--radius-l);background:var(--bg-raised);width:min(360px,100vw - 32px);max-height:calc(100dvh - 32px);color:var(--text);box-shadow:8px 8px 0 var(--line);text-align:center;padding:28px 24px 24px;overflow-y:auto}.support-card:popover-open{flex-direction:column;align-items:center;gap:14px;display:flex}.support-card::backdrop{background:oklch(18% .012 285/.35)}.support-card h2{font-family:var(--font-display);text-transform:uppercase;letter-spacing:-.02em;font-size:1.35rem}.support-card>p:not(.note):not(.thanks){color:var(--text-2);max-width:32ch;font-size:.95rem}.support-close{min-height:32px;padding:0 10px;position:absolute;top:10px;right:10px}.support-card .btn{text-decoration:none}.qr{border:var(--edge) solid var(--line);border-radius:var(--radius);background:var(--bg-sunken);place-items:center;width:100%;min-height:160px;padding:8px;display:grid}.qr img{border-radius:8px;width:100%;max-width:260px;height:auto;display:block}.thanks{color:var(--text-3);font-size:.85rem}.welcome-foot{border-top:var(--edge) solid var(--line-soft);color:var(--text-2);flex-wrap:wrap;align-items:center;gap:4px 12px;padding-top:22px;font-size:.9rem;display:flex}.home{flex:1;padding:8px 28px 56px;overflow-y:auto}.welcome{flex-direction:column;gap:44px;max-width:1120px;margin:0 auto;display:flex}.hero{border:var(--edge) solid var(--line);border-radius:var(--radius-l);background:var(--bg-raised);box-shadow:8px 8px 0 var(--line);padding:56px 52px 48px;position:relative;overflow:hidden}.hero-copy{z-index:1;flex-direction:column;gap:22px;max-width:640px;display:flex;position:relative}.hero h1{font-family:var(--font-display);letter-spacing:-.035em;text-transform:uppercase;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:.98}.hero h1 em{font-family:var(--font-script);text-transform:none;letter-spacing:-.01em;font-style:italic;font-weight:400}.hero h1 .mark{background:linear-gradient(var(--accent), var(--accent)) no-repeat bottom / 100% .2em;padding:0 .06em}.lede{color:var(--text-2);max-width:44ch;font-size:1.05rem}.hero-cta{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.hero-cta .btn{min-height:48px;padding:0 28px;font-size:.95rem}.sticker{font-family:var(--font-script);color:var(--text-2);align-items:center;gap:8px;font-size:1.15rem;font-style:italic;display:inline-flex}.sticker svg{color:var(--accent)}.hero .vinyl{pointer-events:none;width:460px;position:absolute;top:50%;right:-120px;transform:translateY(-50%)}.vinyl-spin{animation:14s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.hero .sample{font-family:var(--font-zh);letter-spacing:.02em;font-size:2.1rem;line-height:2}.hero .sample rt{font-size:.4em;font-family:var(--font-ui);font-weight:600}.recent h2{color:var(--text-3);margin-bottom:16px}.recent ul{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.recent-item{border:var(--edge) solid var(--line-soft);border-radius:var(--radius);background:var(--bg-raised);text-align:left;width:100%;transition:border-color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease);align-items:center;gap:14px;padding:10px;display:flex}.recent-item:hover,.recent-item:focus-visible{border-color:var(--line);box-shadow:var(--shadow-hard);transform:translate(-2px,-2px)}.recent-item img{aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line-soft);background:var(--bg-sunken);border-radius:8px;width:88px}.recent-text{flex-direction:column;flex:1;min-width:0;display:flex}.recent-title{font-family:var(--font-zh);white-space:nowrap;text-overflow:ellipsis;font-size:1.05rem;font-weight:700;overflow:hidden}.recent-artist{color:var(--text-3);font-size:.85rem}.recent-play{background:var(--bg-hover);width:32px;height:32px;color:var(--text-3);transition:background .15s var(--ease), color .15s var(--ease);border-radius:50%;flex:none;place-items:center;display:grid}.recent-item:hover .recent-play,.recent-item:focus-visible .recent-play{background:var(--accent);color:var(--accent-ink)}.layout{flex:1;grid-template-columns:minmax(340px,5fr) minmax(0,6fr);gap:32px;width:100%;max-width:1480px;min-height:0;margin:0 auto;padding:8px 28px 20px;display:grid}.side{scrollbar-width:none;flex-direction:column;gap:18px;min-height:0;padding-bottom:20px;display:flex;overflow-y:auto}.side>*{flex:none}.player-frame{aspect-ratio:16/9;border:var(--edge) solid var(--line);border-radius:var(--radius-l);background:var(--disc);width:100%;overflow:hidden}.player-frame iframe{width:100%;height:100%;display:block}.song{flex-direction:column;gap:4px;display:flex}.song-title{font-family:var(--font-zh);letter-spacing:.01em;font-size:1.9rem;font-weight:700;line-height:1.25}.song-artist{font-family:var(--font-zh);color:var(--text-2);font-size:1.1rem}.song-source{color:var(--text-3);margin-top:6px;font-size:.82rem}.panel-toggles{gap:8px;display:flex}.panel{border:var(--edge) solid var(--line);border-radius:var(--radius);background:var(--bg-raised);overflow:hidden}.panel-body{flex-direction:column;gap:14px;padding:16px;display:flex}.tabs{border-bottom:var(--edge) solid var(--line-soft);gap:4px;padding:8px 8px 0;display:flex}.tabs button{color:var(--text-3);transition:color .15s var(--ease), border-color .15s var(--ease);background:0 0;border:0;border-bottom:3px solid #0000;padding:8px 12px 10px;font-size:.88rem;font-weight:600}.tabs button:hover{color:var(--text)}.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}.setting{justify-content:space-between;align-items:center;gap:16px;display:flex}.setting-text{flex-direction:column;font-weight:500;display:flex}.setting-text small{color:var(--text-3);font-size:.8rem;font-weight:400}.switch{appearance:none;border:var(--edge) solid var(--line);background:var(--bg-sunken);cursor:pointer;width:44px;height:26px;transition:background .15s var(--ease);border-radius:999px;flex:none;margin:0;position:relative}.switch:after{content:"";background:var(--line);width:18px;height:18px;transition:transform .2s var(--ease);border-radius:50%;position:absolute;top:2px;left:2px}.switch:checked{background:var(--accent)}.switch:checked:after{background:var(--line);transform:translate(18px)}.segmented{border:var(--edge) solid var(--line);background:var(--bg-raised);border-radius:999px;flex:none;padding:3px;display:inline-flex}.segmented button{min-width:38px;color:var(--text-3);transition:background .15s var(--ease), color .15s var(--ease);background:0 0;border:0;border-radius:999px;padding:5px 12px;font-size:.85rem;font-weight:600}.segmented button:hover{color:var(--text)}.segmented button.on{background:var(--accent);color:var(--accent-ink)}.offset-readout{flex-wrap:wrap;align-items:baseline;gap:12px;display:flex}.offset-value{font-family:var(--font-display);color:var(--accent-strong);font-size:1.6rem}.offset-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.offset-buttons{gap:6px;display:flex}.offset-buttons .btn{font-variant-numeric:tabular-nums;min-width:58px}input[type=range]{width:100%;accent-color:var(--accent)}.row-end{justify-content:flex-end;align-items:center;gap:12px;display:flex}.row-end .note{flex:1}.search-form{border:var(--edge) solid var(--line);border-radius:var(--radius-s);background:var(--bg-raised);align-items:center;gap:6px;padding:4px 4px 4px 14px;display:flex}.search-icon{color:var(--text-3);display:flex}.search-form input{background:0 0;border:0;outline:none;flex:1;min-width:0;padding:6px 0}.search-form .btn{min-height:32px}.versions{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.version{border:var(--edge) solid transparent;border-radius:var(--radius);background:var(--bg-sunken);text-align:left;width:100%;transition:border-color .15s var(--ease), background .15s var(--ease);justify-content:space-between;align-items:center;gap:12px;padding:10px 14px;display:flex}.version:hover{border-color:var(--line)}.version.current{background:var(--accent-soft);border-color:var(--accent)}.version-main{flex-direction:column;min-width:0;display:flex}.version-title{font-family:var(--font-zh);font-weight:700}.version-artist{color:var(--text-3);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.version-meta{color:var(--text-3);flex:none;align-items:center;gap:10px;font-size:.85rem;display:flex}.version.current .version-meta{color:var(--accent-strong)}.tag{border:1px solid var(--line);background:var(--bg-raised);color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 10px;font-size:.72rem;font-weight:700}textarea.lrc{resize:vertical;border:var(--edge) solid var(--line);border-radius:var(--radius);background:var(--bg-sunken);min-height:180px;padding:12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.85rem;line-height:1.6}textarea.lrc::placeholder{color:var(--text-3)}.main{border:var(--edge) solid var(--line);border-radius:var(--radius-l);background:var(--disc);color:oklch(96% .005 90);--text:oklch(96% .005 90);--text-2:oklch(78% .01 90);--text-3:oklch(62% .01 90);--bg-raised:oklch(25% .012 285);--bg-hover:oklch(28% .014 285);--line-soft:oklch(100% 0 0/.14);--tone-1:oklch(78% .14 28);--tone-2:oklch(82% .13 150);--tone-3:oklch(80% .11 250);--tone-4:oklch(78% .14 318);--accent:oklch(78% .18 349);background-image:repeating-linear-gradient(oklch(100% 0 0/.045) 0 1px,#0000 1px 9px);min-height:0;display:flex;position:relative;overflow:hidden}.stage{flex-direction:column;flex:1;min-height:0;display:flex;position:relative}.stage-status{color:var(--text-3);padding:26px 24px 0}.stage-skeleton{flex-direction:column;gap:28px;padding:32px 24px;display:flex}.sk-line{flex-direction:column;gap:10px;display:flex}.sk{background:var(--bg-raised);animation:pulse 1.6s var(--ease) infinite alternate;border-radius:4px;display:block}.sk-py{height:12px}.sk-hz{height:30px}@keyframes pulse{to{opacity:.4}}.stage-message{justify-content:center;gap:18px;max-width:460px;margin:0 auto;padding:24px 24px 80px}.stage-message h2{font-family:var(--font-display);letter-spacing:-.02em;text-transform:uppercase;font-size:1.5rem;line-height:1.1}.stage-message p{color:var(--text-2)}.stage-message .btn{border-color:var(--line-soft);color:var(--text);background:0 0}.stage-message .btn:hover:not(:disabled){background:var(--bg-raised)}.stage-message .btn.ghost{color:var(--accent);border-color:#0000;align-self:flex-start}.stage-message .search-form{border-color:var(--line-soft);background:var(--bg-raised)}.stage-message .btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);box-shadow:none}.notice{border:1px solid var(--line-soft);border-radius:var(--radius);color:var(--text-2);background:oklch(100% 0 0/.06);flex-wrap:wrap;align-items:center;gap:4px 12px;margin:12px 16px 0;padding:10px 16px;font-size:.9rem;display:flex}.notice .link{color:var(--text);-webkit-text-decoration-color:var(--accent);text-decoration-color:var(--accent)}.lyrics-wrap{flex:1;min-height:0;display:flex;position:relative}.lyrics{--scale:1;scrollbar-width:none;flex-direction:column;flex:1;gap:6px;padding:30vh 12px 55vh;display:flex;overflow-y:auto;-webkit-mask-image:linear-gradient(#0000 0,#000 16% 80%,#0000 100%);mask-image:linear-gradient(#0000 0,#000 16% 80%,#0000 100%)}.lyrics::-webkit-scrollbar{display:none}.line{border-radius:0 var(--radius) var(--radius) 0;text-align:left;color:var(--text-3);transition:color .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);background:0 0;border:0;border-left:3px solid #0000;flex-direction:column;gap:4px;padding:10px 20px;display:flex}.line:hover{color:var(--text-2);background:oklch(100% 0 0/.05)}.line.past{color:oklch(50% .01 90)}.line.active{color:var(--text);border-left-color:var(--accent)}.hanzi{font-family:var(--font-zh);font-size:calc(2rem * var(--scale));letter-spacing:.02em;font-weight:600;line-height:2.1}ruby{ruby-position:over;margin:0 .05em}rt{font-family:var(--font-ui);letter-spacing:0;color:var(--text-3);transition:color .25s var(--ease);padding-bottom:.2em;font-size:.55em;font-weight:500}.line.active rt{color:var(--accent);font-weight:700}.tone-colors.sample .t1 rt,.tone-colors .t1 rt{color:var(--tone-1)}.tone-colors .t2 rt{color:var(--tone-2)}.tone-colors .t3 rt{color:var(--tone-3)}.tone-colors .t4 rt{color:var(--tone-4)}.tone-colors .t0 rt{color:var(--text-3)}.tone-colors .line.active .t0 rt{color:var(--text-2)}.tone-colors .line:not(.active) rt{filter:saturate(.5)brightness(.92)}.translation{color:var(--text-3);font-size:calc(1.05rem * var(--scale))}.line.active .translation{color:var(--text-2)}.resume{border:var(--edge) solid var(--line);background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:11px 20px;font-size:.88rem;font-weight:700;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:3px 3px oklch(0% 0 0/.5)}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}@media (width<=1040px){.hero{padding:40px 32px}.hero .vinyl{opacity:.5;right:-200px}.hero-copy{max-width:none}}@media (width<=860px){.topbar{gap:10px;padding:12px 16px}.url-form{padding-left:14px}.btn.primary{box-shadow:3px 3px 0 var(--line)}.brand-name,.support-label{display:none}.support-btn{padding:0 10px}.url-form .btn{padding:0 16px}.home{padding:8px 16px 48px}.hero{box-shadow:5px 5px 0 var(--line);padding:32px 22px}.hero .vinyl{display:none}.layout{flex-direction:column;gap:16px;padding:0 16px 16px;display:flex;overflow-y:auto}.side{flex:none;gap:14px;padding-bottom:0;overflow:visible}.main{flex:none;height:78vh}.song-title{font-size:1.5rem}.hanzi{font-size:calc(1.7rem * var(--scale))}.lyrics{padding:20vh 0 40vh}.recent ul{grid-template-columns:1fr}}