:root{color-scheme:dark;--ink:#0b0c10;--night:#14161d;--line:#23262f;--line-2:#2a2d37;--paper:#f3ebdd;--dust:#a7a195;--ktv-pink:#ff4d8d;--sodium:#ffb547;--jade:#4fd1a1;--cinnabar:#c8321f;--ink-deep:#07080b;--paper-2:#d8d0c2;--smoke:#6b675f;--hairline:#f3ebdd17;--hairline-strong:#f3ebdd29;--press:#f3ebdd0f;--glass:#111319bd;--scrim:#0505089e;--pink-soft:#ff4d8d24;--jade-soft:#4fd1a11a;--jade-line:#4fd1a157;--glow-line:drop-shadow(0 0 10px #ff4d8d73);--glow-button:0 0 0 1px #ff4d8d59, 0 0 26px #ff4d8d80;--font-ui:"Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-han:"Chiron Sung HK", "Songti TC", "Noto Serif CJK TC", "Noto Serif TC", "Source Han Serif TC", PMingLiU, serif;--font-han-ui:"PingFang HK", "PingFang TC", "Noto Sans CJK TC", "Microsoft JhengHei", sans-serif;--han-text:700;--han-display:900;--text-eyebrow:.8125rem;--text-small:.875rem;--text-meta:.9375rem;--text-body:1.0625rem;--text-lead:1.25rem;--text-title:1.75rem;--text-display:2.125rem;--lyric:1.75rem;--lyric-rest:.84;--gutter:20px;--measure:34rem;--r-plate:6px;--r-field:14px;--r-card:20px;--r-sheet:28px;--r-pill:999px;--ease-out:cubic-bezier(.22, 1, .36, 1);--ease-in-out:cubic-bezier(.65, 0, .35, 1);--ease-spring:cubic-bezier(.3, 1.35, .5, 1);--t-press:.12s;--t-quick:.22s;--t-move:.42s;--t-sheet:.52s;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--topbar-h:52px;--transport-h:76px}@supports (transition-timing-function:linear(0, 1)){:root{--ease-spring:linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 18.4%, 1.077 20.4%, 1.121 22.8%, 1.149 25.7%, 1.159 29.6%, 1.14 34.9%, 1.079 43%, 1.04 48.3%, 1.016 53.4%, .999 61.6%, .995 71.2%, 1)}}:root[data-size=s]{--lyric:1.5rem}:root[data-size=m]{--lyric:1.75rem}:root[data-size=l]{--lyric:2.0625rem}:root[data-size=xl]{--lyric:2.5rem}@media (width>=700px){:root{--gutter:32px}:root[data-size=s]{--lyric:1.75rem}:root[data-size=m]{--lyric:2.125rem}:root[data-size=l]{--lyric:2.5rem}:root[data-size=xl]{--lyric:3rem}}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;scroll-padding-top:calc(var(--topbar-h) + var(--safe-top) + 12px);background:var(--ink);overflow-x:clip}body{min-height:100dvh;color:var(--paper);font-family:var(--font-ui);font-size:var(--text-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;margin:0;line-height:1.5;overflow-x:clip}h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}ol,ul{padding:0;list-style:none}img,svg{display:block}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;touch-action:manipulation;background:0 0;border:0;padding:0}a{color:inherit;touch-action:manipulation;text-decoration:none}[hidden]{display:none!important}[lang=yue],[lang^=zh]{font-family:var(--font-han)}:focus{outline:none}:focus-visible{outline:2px solid var(--paper);outline-offset:3px;border-radius:6px}::selection{color:var(--paper);background:#ff4d8d52}.room,.grain{pointer-events:none;z-index:-1;position:fixed;inset:0}.room{transition:opacity .9s var(--ease-out);background:radial-gradient(90% 46% at 100% 0,#ff4d8d21,#0000 62%),radial-gradient(80% 40% at 0 4%,#4fd1a112,#0000 60%)}[data-live] .room{opacity:.45}[data-mode=learn] .page-song .room{background:radial-gradient(90% 46% at 100% 0,#4fd1a11c,#0000 62%),radial-gradient(80% 40% at 0 4%,#ffb5470d,#0000 60%)}.grain{opacity:.5;background-image:url(/_astro/grain.IpfeEtL_.png);background-size:160px 160px}.eyebrow{font-size:var(--text-meta);color:var(--dust);font-weight:600;line-height:1.3}.prose{color:var(--paper-2);max-width:36em}.prose>*+*{margin-top:1em}.prose h2{font-size:var(--text-lead);color:var(--paper);margin-top:2.2em;line-height:1.25}.prose a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--smoke);text-underline-offset:.2em;text-decoration-thickness:1px}.prose a:hover{text-decoration-color:var(--paper)}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;position:absolute!important}:root[data-spelling=jyutping] .yl,:root[data-spelling=yale] .jp{display:none}.tone{vertical-align:.42em;opacity:.78;font-variant-numeric:tabular-nums;margin-left:.04em;font-size:.68em;font-weight:600}.frame{width:100%;max-width:calc(var(--measure) + var(--gutter) * 2);padding-inline:max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));margin-inline:auto}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:0s!important}}.logo{min-height:44px;transition:opacity var(--t-quick) var(--ease-out), transform var(--t-press) var(--ease-out);align-items:center;gap:11px;display:inline-flex}.logo img{width:auto;display:block}.logo__mark{height:34px}.logo__word{height:19px;margin-top:3px}.logo:active{opacity:.7;transform:scale(.98)}@media (hover:hover){.logo:hover{opacity:.85}}.logo--foot .logo__mark{height:28px}.logo--foot .logo__word{height:16px}.icon-btn{width:44px;height:44px;color:var(--paper);transition:background-color var(--t-quick) var(--ease-out), transform var(--t-press) var(--ease-out);border-radius:50%;place-items:center;display:inline-grid}.icon-btn svg{width:22px;height:22px}.icon-btn:active{background:var(--press);transform:scale(.92)}@media (hover:hover){.icon-btn:hover{background:var(--press)}}.icon-btn--aa{letter-spacing:-.02em;font-size:1.0625rem;font-weight:700}.icon-btn--aa small{font-size:.8em}.btn{border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--night);min-height:50px;color:var(--paper);font-size:var(--text-body);white-space:nowrap;transition:transform var(--t-press) var(--ease-out), background-color var(--t-quick) var(--ease-out), border-color var(--t-quick) var(--ease-out), opacity var(--t-quick);justify-content:center;align-items:center;gap:8px;padding:0 22px;font-weight:700;line-height:1;display:inline-flex}.btn:active{transform:scale(.97)}.btn[disabled]{opacity:.4;pointer-events:none}@media (hover:hover){.btn:hover{background:var(--line)}.btn--quiet:hover{background:var(--press)}.btn--paper:hover{background:#fff8ea}.btn--pink:hover{background:#ff5f99}.btn--jade:hover{background:#5fdcae}}.btn--quiet{border-color:var(--hairline-strong);background:0 0}.btn--paper{background:var(--paper);border-color:var(--paper);color:var(--ink)}.btn--pink{background:var(--ktv-pink);color:var(--ink);box-shadow:var(--glow-button);border-color:#0000}.btn--jade{background:var(--jade);color:var(--ink);border-color:#0000}.btn--small{min-height:44px;font-size:var(--text-meta);padding:0 18px}.btn--block{width:100%;display:flex}.link-out{min-height:44px;color:var(--dust);font-size:var(--text-meta);transition:color var(--t-quick);align-items:center;gap:6px;font-weight:600;display:inline-flex}.link-out svg{width:15px;height:15px}.link-out:active{color:var(--paper)}@media (hover:hover){.link-out:hover{color:var(--paper)}}.field{align-items:center;display:flex;position:relative}.field__icon{width:20px;height:20px;color:var(--smoke);pointer-events:none;transition:color var(--t-quick);position:absolute;left:16px}.field__input{border-radius:var(--r-field);background:var(--night);width:100%;height:54px;color:var(--paper);font-size:var(--text-body);appearance:none;transition:background-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);border:0;padding:0 48px 0 46px}.field__input::placeholder{color:var(--smoke);opacity:1}.field__input::-webkit-search-cancel-button,.field__input::-webkit-search-decoration{appearance:none;display:none}@media (hover:hover){.field__input:hover{background:#171a22}}.field__input:focus{background:#1b1e27;outline:none;box-shadow:0 0 0 2px #f3ebdd47}.field:focus-within .field__icon{color:var(--paper)}.field__clear{width:44px;height:44px;color:var(--dust);opacity:0;visibility:hidden;transition:opacity var(--t-press) var(--ease-out), transform var(--t-quick) var(--ease-spring), visibility 0s linear var(--t-quick);border-radius:50%;place-items:center;display:grid;position:absolute;right:5px;transform:scale(.7)}.field:has(.field__input:not(:placeholder-shown)) .field__clear{opacity:1;visibility:visible;transition-delay:0s;transform:none}.field__clear span{background:var(--smoke);width:20px;height:20px;color:var(--night);transition:background-color var(--t-quick);border-radius:50%;place-items:center;display:grid}.field__clear:active span{background:var(--dust)}.field__clear svg{width:10px;height:10px}.textarea{border-radius:var(--r-card);background:var(--night);width:100%;min-height:46dvh;color:var(--paper);font-family:var(--font-han);resize:vertical;transition:border-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);border:1px solid #0000;padding:18px;font-size:1.25rem;line-height:1.7;display:block}.textarea::placeholder{color:var(--smoke);font-family:var(--font-ui);font-size:var(--text-body)}.textarea:focus{background:#1b1e27;border-color:#0000;outline:none;box-shadow:0 0 0 2px #f3ebdd47}.segmented{--seg-n:2;--seg-i:0;--seg-fill:var(--paper);grid-template-columns:repeat(var(--seg-n), 1fr);border-radius:var(--r-pill);background:var(--night);border:1px solid var(--line);isolation:isolate;padding:3px;display:grid;position:relative}.segmented:before{content:"";z-index:-1;width:calc((100% - 6px) / var(--seg-n));border-radius:var(--r-pill);background:var(--seg-fill);transform:translateX(calc(100% * var(--seg-i)));transition:transform var(--t-move) var(--ease-spring), background-color var(--t-quick) var(--ease-out);position:absolute;top:3px;bottom:3px;left:3px}.segmented__opt{border-radius:var(--r-pill);min-height:44px;color:var(--dust);font-size:var(--text-meta);white-space:nowrap;transition:color var(--t-quick) var(--ease-out);justify-content:center;align-items:center;gap:7px;padding:0 14px;font-weight:700;display:flex}.segmented__opt [lang]{font-weight:var(--han-display);font-size:1.0625rem}.segmented__opt[aria-selected=true],.segmented__opt[aria-checked=true]{color:var(--ink)}.segmented--modes[data-value=sing]{--seg-fill:var(--ktv-pink)}.segmented--modes[data-value=learn]{--seg-fill:var(--jade);--seg-i:1}.switch{--on:var(--paper);border-radius:var(--r-pill);width:52px;height:32px;transition:background-color var(--t-quick) var(--ease-out);background:#2c2f3a;flex:none;position:relative}.switch:after{content:"";background:var(--paper);width:26px;height:26px;transition:transform var(--t-move) var(--ease-spring), background-color var(--t-quick);border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 2px 6px #0006}.switch[aria-checked=true]{background:var(--on)}.switch[aria-checked=true]:after{background:var(--ink);transform:translate(20px)}.switch--jade{--on:var(--jade)}.switch:before{content:"";position:absolute;inset:-6px -4px}.rows{flex-direction:column;display:flex}.row{border-bottom:1px solid var(--hairline);align-items:center;gap:16px;min-height:60px;padding:10px 0;display:flex}.row:last-child{border-bottom:0}.row__text{flex-direction:column;flex:1;gap:1px;min-width:0;display:flex}.row__label{font-weight:700;line-height:1.3}.row__label [lang]{font-weight:var(--han-display);margin-right:.3em}.row__hint{font-size:var(--text-small);color:var(--dust);line-height:1.35}.row--stack{flex-direction:column;align-items:stretch;gap:12px;padding:16px 0}.sizes{border-radius:var(--r-field);background:var(--ink-deep);grid-template-columns:repeat(4,1fr);padding:3px;display:grid}.sizes__opt{min-height:48px;color:var(--dust);transition:background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out);border-radius:11px;place-items:center;font-weight:700;line-height:1;display:grid}.sizes__opt:first-child{font-size:.9375rem}.sizes__opt:nth-child(2){font-size:1.125rem}.sizes__opt:nth-child(3){font-size:1.375rem}.sizes__opt:nth-child(4){font-size:1.625rem}.sizes__opt[aria-checked=true]{color:var(--paper);background:#262934}.stepper{border-radius:var(--r-pill);background:var(--ink-deep);align-items:center;gap:2px;padding:3px;display:inline-flex}.stepper__btn{border-radius:var(--r-pill);width:44px;height:40px;color:var(--paper);transition:background-color var(--t-quick);place-items:center;display:grid}.stepper__btn:active{background:#262934}.stepper__btn svg{width:18px;height:18px}.stepper__value{text-align:center;min-width:64px;font-size:var(--text-meta);font-variant-numeric:tabular-nums;font-weight:700}.sheet{--drag:0px;border-radius:var(--r-sheet) var(--r-sheet) 0 0;background:var(--night);width:100%;max-width:34rem;max-height:min(88dvh,720px);color:var(--paper);transition:transform var(--t-sheet) var(--ease-spring);overscroll-behavior:contain;border:0;margin:0 auto;padding:0;position:fixed;inset:auto 0 0;overflow:hidden;transform:translateY(calc(100% + 40px));box-shadow:0 -1px #f3ebdd14,0 -24px 80px #0009}.sheet[open]{flex-direction:column;display:flex}.sheet.is-in{transform:translateY(var(--drag))}.sheet.is-dragging{transition:none}.sheet.is-out{transition:transform .26s var(--ease-in-out)}.sheet::backdrop{transition:background-color .36s var(--ease-out), backdrop-filter .36s var(--ease-out);background:0 0}.sheet.is-in::backdrop{background:var(--scrim);backdrop-filter:blur(3px)}.sheet__grab{cursor:grab;touch-action:none;flex:none;place-items:center;height:26px;display:grid}.sheet__grab:before{content:"";background:#f3ebdd38;border-radius:3px;width:38px;height:5px}.sheet__head{touch-action:none;flex:none;align-items:center;gap:12px;padding:2px 12px 8px 24px;display:flex}.sheet__title{font-size:var(--text-lead);flex:1;font-weight:700;line-height:1.2}.sheet__close{width:36px;height:36px;color:var(--dust);transition:background-color var(--t-quick), transform var(--t-press);background:#f3ebdd14;border-radius:50%;place-items:center;margin:4px;display:grid;position:relative}.sheet__close:before{content:"";position:absolute;inset:-4px}.sheet__close:active{background:#f3ebdd24;transform:scale(.9)}.sheet__close svg{width:14px;height:14px}.sheet__body{overscroll-behavior:contain;padding:0 24px calc(24px + var(--safe-bottom));overflow-y:auto}.sheet--find{height:min(88dvh,720px)}.find__field{flex:none;padding:0 20px 12px}.find__body{flex:1;padding-top:2px}.find__body .song-row{min-height:68px;padding-block:11px 12px}.find__empty,.find__fail{color:var(--dust);padding:28px 0;line-height:1.5}.find__empty q{quotes:"“" "”";color:var(--paper)}.find__empty a,.find__fail a{color:var(--paper);text-decoration:underline;text-decoration-color:var(--smoke);text-underline-offset:.2em}@media (width>=700px){.sheet{border-radius:var(--r-sheet);inset:auto 0 24px}}.topbar{z-index:20;height:calc(var(--topbar-h) + var(--safe-top));padding:var(--safe-top) max(8px, var(--safe-right)) 0 max(8px, var(--safe-left));grid-template-columns:1fr auto 1fr;align-items:center;gap:4px;display:grid;position:fixed;inset:0 0 auto}.topbar>:last-child{justify-self:end}.topbar__actions{align-items:center;display:flex}.topbar:before{content:"";z-index:-1;background:linear-gradient(var(--ink) 55%, #0b0c1000);opacity:0;transition:opacity var(--t-move) var(--ease-out);position:absolute;inset:0 0 -18px}.is-scrolled .topbar:before{opacity:1}.topbar__title{opacity:0;min-width:0;max-width:min(58vw,100%);transition:opacity var(--t-quick) var(--ease-out), transform var(--t-move) var(--ease-out);flex-direction:column;align-items:center;line-height:1.2;display:flex;transform:translateY(6px)}.is-past-title .topbar__title{opacity:1;transform:none}.topbar__zh{font-family:var(--font-han);font-weight:var(--han-display);letter-spacing:.08em;font-size:1.0625rem}.topbar__en{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--dust);font-size:.75rem;overflow:hidden}.topbar--static .topbar__title{opacity:1;transform:none}.transport{z-index:20;left:50%;bottom:calc(14px + var(--safe-bottom));width:min(100% - 28px,26rem);height:var(--transport-h);border-radius:var(--r-pill);background:var(--glass);backdrop-filter:blur(22px)saturate(1.6);box-shadow:inset 0 0 0 1px var(--hairline), inset 0 1px 0 #ffffff0d, 0 14px 44px #0009;transition:transform var(--t-sheet) var(--ease-spring), opacity var(--t-quick);align-items:center;gap:10px;padding:0 8px 0 14px;display:flex;position:fixed;transform:translate(-50%)}.transport-fade{z-index:19;height:calc(var(--transport-h) + 72px + var(--safe-bottom));background:linear-gradient(#0b0c1000, var(--ink) 78%);pointer-events:none;position:fixed;inset:auto 0 0}.transport__prev,.transport__auto{width:48px;height:48px;color:var(--paper);transition:transform var(--t-press) var(--ease-out), background-color var(--t-quick), opacity var(--t-quick);background:#f3ebdd12;border-radius:50%;flex:none;place-items:center;display:grid}.transport__prev svg,.transport__auto svg{width:20px;height:20px}.transport__prev:active,.transport__auto:active{background:#f3ebdd24;transform:scale(.9)}.transport__prev[disabled]{opacity:.3;pointer-events:none}.transport__status{text-align:center;flex-direction:column;flex:1;align-items:center;gap:1px;min-width:0;line-height:1.25;display:flex}.transport__count{font-size:var(--text-meta);font-variant-numeric:tabular-nums;font-weight:700}.transport__count b{font-weight:700}.transport__count span{color:var(--dust);font-weight:600}.transport__hint{text-overflow:ellipsis;white-space:nowrap;max-width:100%;color:var(--dust);font-size:.8125rem;overflow:hidden}.transport__next{background:var(--ktv-pink);width:60px;height:60px;color:var(--ink);transition:transform var(--t-press) var(--ease-out), background-color var(--t-move) var(--ease-out), box-shadow var(--t-move) var(--ease-out);border-radius:50%;flex:none;place-items:center;display:grid;position:relative;box-shadow:0 0 24px #ff4d8d80}.transport__next>svg:not(.transport__ring){width:26px;height:26px}.transport__next:active{transform:scale(.92)}.transport__ring{pointer-events:none;width:70px;height:70px;position:absolute;inset:-5px;transform:rotate(-90deg)}.transport__ring circle{fill:none;stroke-width:2px;stroke:#f3ebdd1a}.transport__ring circle+circle{stroke:var(--ktv-pink);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--progress,0) * 100);transition:stroke-dashoffset var(--t-move) var(--ease-out), stroke var(--t-move)}@media (prefers-reduced-motion:no-preference){body:not(.is-following) .transport--sync .transport__next{animation:breathe 2.6s var(--ease-in-out) infinite}}@keyframes breathe{50%{box-shadow:0 0 38px #ff4d8dbf}}.songs{flex-direction:column;display:flex}.song-row{grid-template-columns:1fr auto;align-items:center;column-gap:12px;min-height:76px;padding:14px 0 15px;display:grid;position:relative}.song-row:before{content:"";background:var(--press);opacity:0;transition:opacity var(--t-quick) var(--ease-out);border-radius:14px;position:absolute;inset:0 -12px}.song-row:active:before{opacity:1;transition-duration:0s}@media (hover:hover){.song-row:hover:before{opacity:.6}}.song-row__main{flex-direction:column;gap:3px;min-width:0;display:flex;position:relative}.song-row__head{flex-wrap:wrap;align-items:baseline;column-gap:10px;display:flex}.song-row__zh{font-family:var(--font-han);font-weight:var(--han-text);letter-spacing:.05em;font-size:1.375rem;line-height:1.3}.song-row__zh--latin{font-family:var(--font-ui);letter-spacing:-.01em;font-weight:800}.song-row__rom{font-size:var(--text-meta);color:var(--ktv-pink);font-weight:700;line-height:1.3}.song-row__meta{font-size:var(--text-meta);color:var(--dust);text-overflow:ellipsis;white-space:nowrap;line-height:1.4;overflow:hidden}.song-row__meta [lang]{font-family:var(--font-han-ui)}.song-row__tag{color:var(--sodium);font-size:var(--text-small);font-weight:700}.song-row__chev{width:18px;height:18px;color:var(--smoke);transition:color var(--t-quick), transform var(--t-quick) var(--ease-out);position:relative}@media (hover:hover){.song-row:hover .song-row__chev{color:var(--dust);transform:translate(2px)}}.callout{border-radius:var(--r-card);background:var(--jade-soft);box-shadow:inset 0 0 0 1px var(--jade-line);flex-direction:column;gap:6px;padding:18px 20px 20px;display:flex}.callout__title{color:var(--jade);font-weight:700;font-size:var(--text-body);line-height:1.3}.callout__body{color:var(--paper-2);font-size:var(--text-meta);line-height:1.55}.callout__body [lang]{color:var(--paper);font-weight:700}.paste-card{border-radius:var(--r-card);background:var(--night);transition:background-color var(--t-quick);align-items:center;gap:14px;padding:18px 18px 18px 20px;display:flex}.paste-card:active{background:var(--line)}@media (hover:hover){.paste-card:hover{background:#181b23}}.paste-card__text{flex-direction:column;flex:1;gap:3px;display:flex}.paste-card__title{font-weight:700;line-height:1.3}.paste-card__hint{font-size:var(--text-small);color:var(--dust);line-height:1.4}.site-foot{padding-block:28px calc(36px + var(--safe-bottom));color:var(--dust);font-size:var(--text-small);flex-direction:column;align-items:flex-start;gap:14px;margin-top:64px;display:flex}.site-foot .logo{margin-bottom:6px}.site-foot__links{flex-wrap:wrap;gap:0 22px;margin-block:-10px;display:flex}.site-foot__links a{min-height:44px;color:var(--paper-2);transition:color var(--t-quick);align-items:center;font-weight:600;display:inline-flex}.site-foot__links a:active{color:var(--paper)}@media (hover:hover){.site-foot__links a:hover{color:var(--paper)}}.site-foot p{max-width:34em;line-height:1.5}.toast{z-index:40;left:50%;bottom:calc(var(--transport-h) + 30px + var(--safe-bottom));border-radius:var(--r-pill);background:var(--paper);max-width:calc(100% - 40px);color:var(--ink);font-size:var(--text-small);white-space:nowrap;opacity:0;transition:opacity var(--t-quick) var(--ease-out), transform var(--t-move) var(--ease-spring);pointer-events:none;padding:10px 16px;font-weight:700;position:fixed;transform:translate(-50%,8px)scale(.96);box-shadow:0 10px 30px #00000080}.toast.is-in{opacity:1;transform:translate(-50%)}.masthead{padding-top:calc(10px + var(--safe-top));min-height:calc(62px + var(--safe-top));justify-content:space-between;align-items:center;display:flex}.page-home{--measure:40rem}.hero{isolation:isolate;flex-direction:column;justify-content:space-between;min-height:min(62dvh,560px);display:flex;position:relative}.hero__photo{z-index:-1;object-fit:cover;object-position:50% 30%;width:100%;height:100%;position:absolute;inset:0}.hero:before,.hero:after{content:"";pointer-events:none;position:absolute;left:0;right:0}.hero:before{background:linear-gradient(#0b0c10b8,#0b0c1000);height:120px;top:0}.hero:after{background:linear-gradient(#0b0c1000, #0b0c10d1 55%, var(--ink));height:62%;bottom:0}.hero .masthead,.hero__text{z-index:1;position:relative}.hero__text{flex-direction:column;gap:10px;padding-top:48px;padding-bottom:14px;display:flex}.hero__title{font-size:var(--text-title);letter-spacing:-.025em;text-wrap:balance;max-width:13em;font-weight:800;line-height:1.08}.hero__lede{color:var(--paper-2);font-size:var(--text-body);text-wrap:pretty;max-width:26em;line-height:1.45}@media (width>=700px){.hero{min-height:clamp(520px,42vw,760px)}.hero__text{padding-bottom:18px}.hero__photo{object-position:50% 30%}.hero__title{max-width:12em;font-size:2.75rem}.hero__lede{font-size:var(--text-lead)}}.finder{display:contents}.finder__stick{z-index:10;margin-inline:calc(var(--gutter) * -1);padding:calc(10px + var(--safe-top)) var(--gutter) 10px;transition:background-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);position:sticky;top:0}.finder__stick.is-stuck{backdrop-filter:blur(20px)saturate(1.5);box-shadow:0 1px 0 var(--hairline);background:#0b0c10cc}@supports not (backdrop-filter:blur(1px)){.finder__stick.is-stuck{background:#0b0c10f5}}.list-head{justify-content:space-between;align-items:baseline;margin-top:30px;padding-bottom:6px;display:flex}.list-head,.list-head__title{font-size:var(--text-lead);letter-spacing:-.02em;color:var(--paper);font-weight:800;line-height:1.2}.list-head__aside{font-size:var(--text-meta);align-items:baseline;gap:14px;font-weight:400;display:flex}.list-head__count{color:var(--dust);font-variant-numeric:tabular-nums}.list-head__link{color:var(--paper);align-items:center;min-height:44px;margin-block:-14px;font-weight:600;text-decoration:none;display:inline-flex}.list-head__link:hover{text-decoration:underline}.recent{margin-top:26px}.recent+.list-head{margin-top:34px}.empty{flex-direction:column;align-items:flex-start;gap:8px;padding:44px 0 12px;display:flex}.empty__title{font-size:var(--text-lead);font-weight:700;line-height:1.3}.empty__title q{quotes:"“" "”";color:var(--paper)}.empty__hint{color:var(--dust);max-width:26em}.empty .btn{margin-top:12px}.home-paste{margin-top:34px}.page-head{padding-block:calc(var(--topbar-h) + var(--safe-top) + 14px) 8px}.page-head__zh{font-family:var(--font-han);font-weight:var(--han-display);letter-spacing:.08em;font-size:clamp(2.5rem,13vw,3.5rem);line-height:1.1}.page-head__title{font-size:var(--text-display);letter-spacing:-.02em;text-wrap:balance;font-weight:800;line-height:1.08}.page-head__zh+.page-head__title{font-size:var(--text-title);margin-top:6px}.page-head__lede{color:var(--dust);max-width:28em;margin-top:12px;line-height:1.45}.paste{flex-direction:column;gap:14px;padding-top:22px;display:flex}.paste__title-field{border-radius:var(--r-field);background:var(--night);width:100%;height:54px;color:var(--paper);font-size:var(--text-body);transition:background-color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);border:0;padding:0 18px}.paste__title-field::placeholder{color:var(--smoke)}.paste__title-field:focus{background:#1b1e27;outline:none;box-shadow:0 0 0 2px #f3ebdd47}.paste__foot{align-items:center;gap:14px;display:flex}.paste__count{color:var(--smoke);font-size:var(--text-small);font-variant-numeric:tabular-nums;flex:1}.paste__privacy{color:var(--dust);font-size:var(--text-small);margin-top:6px;line-height:1.5}.about{padding-top:22px}.sounds{flex-direction:column;gap:6px;margin-top:18px;display:flex}.sound{background:var(--night);border-radius:12px;grid-template-columns:5.75rem 1fr;align-items:baseline;column-gap:12px;padding:14px 16px 15px;display:grid}.sound__key{color:var(--ktv-pink);white-space:nowrap;font-size:1.375rem;font-weight:800;line-height:1.15}.sound__body{color:var(--paper-2);font-size:var(--text-meta);line-height:1.5}.sound__body b{color:var(--paper)}.sound__eg{color:var(--dust);font-size:var(--text-small);display:block}.sound__eg [lang]{color:var(--paper-2);font-size:1.0625rem}.credits{flex-direction:column;gap:18px;margin-top:14px;display:flex}.credit{flex-direction:column;gap:2px;display:flex}.credit__what a{color:var(--paper-2);text-decoration:underline;text-decoration-color:var(--smoke);text-underline-offset:.2em}.credit__name{color:var(--paper);font-weight:700}.credit__what{font-size:var(--text-small);color:var(--dust);line-height:1.45}.blank{flex-direction:column;justify-content:center;align-items:flex-start;gap:10px;min-height:100dvh;padding-block:40px;display:flex}.blank__sign{font-family:var(--font-han);font-weight:var(--han-display);letter-spacing:.08em;color:var(--smoke);margin-bottom:14px;font-size:4.5rem;line-height:1}.blank__title{font-size:var(--text-title);letter-spacing:-.02em;font-weight:800;line-height:1.12}.blank__hint{color:var(--dust);max-width:24em}.blank .btn{margin-top:16px}.page-song main{padding-top:calc(var(--topbar-h) + var(--safe-top));padding-bottom:calc(40px + var(--safe-bottom))}.titlecard{grid-template-rows:repeat(7,auto) 1fr;grid-template-columns:minmax(0,1fr) auto;justify-items:start;column-gap:20px;padding-block:22px 26px;display:grid}.titlecard h1{font:inherit;display:contents}.titlecard>*,.titlecard h1>*{grid-column:1;min-width:0}.titlecard__sign{writing-mode:vertical-rl;text-orientation:upright;font-family:var(--font-han);font-weight:var(--han-display);letter-spacing:.1em;color:var(--paper);grid-row:1/-1;font-size:clamp(2.75rem,14.5vw,3.75rem);line-height:1.08;grid-column:2!important}.titlecard__sign[data-len="5"]{font-size:clamp(2.4rem,12.4vw,3.25rem)}.titlecard__sign[data-len="6"],.titlecard__sign[data-len="7"]{font-size:clamp(2.1rem,10.6vw,2.75rem)}.titlecard__sign[data-len=long]{font-size:clamp(1.7rem,8.6vw,2.25rem)}.titlecard__eyebrow{font-size:var(--text-meta);color:var(--dust);grid-row:1;padding-top:8px;font-weight:600}.titlecard__rom{font-size:var(--text-lead);color:var(--ktv-pink);grid-row:2;margin-top:14px;font-weight:700;line-height:1.2}.titlecard__en{font-size:var(--text-title);letter-spacing:-.02em;text-wrap:balance;grid-row:3;margin-top:4px;font-weight:800;line-height:1.1}.titlecard__artist{color:var(--dust);font-size:var(--text-meta);grid-row:4;margin-top:12px;line-height:1.4}.titlecard__artist a{color:var(--paper-2);margin-block:-12px;padding-block:12px;font-weight:600}.titlecard__artist [lang]{font-family:var(--font-han-ui)}.titlecard__summary{color:var(--paper-2);font-size:var(--text-meta);text-wrap:pretty;grid-row:5;max-width:30em;margin-top:16px;line-height:1.55}.titlecard__note{color:var(--dust);font-size:var(--text-small);grid-row:6;margin-top:10px;line-height:1.5}.titlecard .link-out{grid-row:7;margin-top:6px}.lyrics{padding-block:20px 0}.stanza{flex-direction:column;gap:20px;display:flex}.stanza+.stanza{margin-top:36px}.line{flex-direction:column;gap:2px;display:flex}.line__text{font-size:calc(var(--lyric) * .62);flex-wrap:wrap;align-items:flex-end;gap:14px .55em;display:flex}.w{align-items:flex-end;column-gap:.2em;display:inline-flex}.w--end{margin-right:.45em}.syl{flex-direction:column;align-items:center;display:flex}.r{white-space:nowrap;color:color-mix(in srgb, var(--ktv-pink) 72%, var(--paper));font-weight:600;line-height:1.3}.c{font-family:var(--font-han);font-weight:var(--han-text);font-size:calc(var(--lyric) * .82);color:var(--paper);line-height:1.25}.w--plain .r{color:var(--paper);font-size:1.15em;font-weight:700}.line__en{font-size:calc(var(--lyric) * .5);color:var(--dust);text-wrap:pretty;margin-top:6px;line-height:1.45;display:none}:root[data-meaning=on] .line__en{display:block}:root[data-chars=off] .c{display:none}:root[data-chars=off] .line__text{row-gap:8px}.lyrics .w:not(.w--plain){cursor:help;border-radius:4px;transition:background-color .12s,color .12s}.lyrics .w:focus-visible{outline:2px solid var(--jade);outline-offset:2px}.lyrics .w.is-on{background-color:var(--jade-soft);box-shadow:0 0 0 3px var(--jade-soft)}.lyrics .w.is-on .c{color:var(--jade)}.lyrics-hint{color:var(--smoke);font-size:var(--text-small);margin-top:28px}.song .callout{margin-top:16px}.pop{z-index:50;width:min(290px,100vw - 16px);box-shadow:0 0 0 1px var(--hairline-strong), 0 12px 32px #0000008c;pointer-events:auto;background:#15171e;border-radius:12px;flex-direction:column;gap:6px;padding:12px 14px 13px;display:flex;position:fixed;top:0;left:0}.pop[hidden]{display:none}.pop__head{flex-wrap:wrap;align-items:baseline;gap:10px;display:flex}.pop__zh{font-family:var(--font-han);font-weight:var(--han-text);color:var(--paper);font-size:1.5rem;line-height:1.2}.pop__r{font-size:var(--text-lead);color:var(--ktv-pink);font-weight:700}.pop__alt{font-size:var(--text-small);color:var(--dust);margin-top:-4px}.pop__gloss{font-size:var(--text-body);color:var(--jade);line-height:1.4}.pop__spoken{font-size:var(--text-meta);color:var(--paper-2);line-height:1.45}.pop__spoken [lang]{font-family:var(--font-han);font-weight:var(--han-text);color:var(--paper);font-size:1.125rem}.pop__label{font-size:var(--text-small);color:var(--dust);font-weight:700}.pop__note{font-size:var(--text-small);color:var(--dust);line-height:1.5}.song-end{border-top:1px solid var(--hairline);flex-direction:column;gap:22px;margin-top:72px;padding-top:28px;display:flex}.song-end__fin{font-family:var(--font-han);font-weight:var(--han-display);letter-spacing:.3em;color:var(--smoke);text-align:center;margin-bottom:14px;font-size:1.5rem}.song-end .songs{margin-top:-6px}.song-end__legal{color:var(--dust);font-size:var(--text-small);line-height:1.55}.song-end__legal a{color:var(--paper-2);text-decoration:underline;text-decoration-color:var(--smoke);text-underline-offset:.2em}@media (width>=700px){.page-song main.frame{max-width:calc(52rem + var(--gutter) * 2)}.line__text{row-gap:18px}.titlecard{column-gap:40px;padding-block:36px 40px}.titlecard__sign{font-size:4.5rem}.titlecard__en{font-size:var(--text-display)}.stanza{gap:26px}}@media (orientation:landscape) and (height<=500px){.titlecard{grid-template-columns:minmax(0,1fr);padding-block:8px 16px}.titlecard__sign{writing-mode:horizontal-tb;grid-row:1;font-size:2rem;grid-column:1!important}.titlecard__eyebrow,.titlecard__summary{display:none}}.song--timed{padding-bottom:calc(var(--transport-h) + 40px)}.is-live .line{opacity:.38;transition:opacity var(--t-move) var(--ease-out), filter var(--t-move) var(--ease-out)}.is-live .line.is-next{opacity:.7}.is-live .line.is-now{opacity:1;filter:var(--glow-line)}.is-live .line.is-now .r{color:var(--ktv-pink)}.is-live .line[data-t]{cursor:pointer}.is-live:not(.is-calm) .line.is-now[data-beats] .r{color:var(--paper-2)}.is-live .line[data-beats] .b.is-sung{color:var(--ktv-pink)}.is-live .line[data-beats] .b.is-singing{--fill:calc(var(--p,0) * 100%);background:linear-gradient(90deg, var(--ktv-pink) var(--fill), var(--unsung,var(--paper-2)) var(--fill));color:#0000;-webkit-background-clip:text;background-clip:text}.is-live .line[data-beats] .c.is-singing{--unsung:var(--paper)}.is-live .line.is-now.is-done{opacity:.38;filter:none}.line{position:relative}.cue{pointer-events:none;gap:7px;display:flex;position:absolute;top:-14px;left:0}.cue i{width:7px;height:7px;transition:background-color var(--t-quick), box-shadow var(--t-quick);background:#f3ebdd2e;border-radius:50%}.cue i.is-on{background:var(--ktv-pink);box-shadow:0 0 8px #ff4d8db3}.is-live .line.is-next:has(.cue){opacity:1}.b.is-tapped{border-radius:4px;box-shadow:0 0 0 2px #ff4d8d8c}.transport--sync{gap:14px;padding:0 8px 0 22px}.transport__body{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.transport--sync .transport__status{text-align:left;align-items:flex-start;min-height:22px}.transport--sync .transport__hint{font-size:var(--text-meta);color:var(--paper-2);font-weight:600}.transport--sync .transport__status:not([disabled]) .transport__hint{color:var(--ktv-pink)}.transport--sync .transport__status[disabled]{cursor:default}.transport--sync .transport__icon{place-items:center;display:grid}.transport--sync .transport__icon svg{width:26px;height:26px}.transport--sync .transport__icon--pause,.transport--sync [aria-pressed=true] .transport__icon--play{display:none}.transport--sync [aria-pressed=true] .transport__icon--pause{display:grid}.scrub{align-items:center;gap:10px;display:flex}.scrub__time{font-variant-numeric:tabular-nums;min-width:2.6em;color:var(--dust);flex:none;font-size:.75rem;font-weight:600}.scrub__time--left{text-align:right}.scrub__bar{--at:0%;-webkit-appearance:none;appearance:none;cursor:pointer;background:0 0;flex:1;min-width:0;height:28px;margin:0}.scrub__bar::-webkit-slider-runnable-track{background:linear-gradient(90deg, var(--paper-2) var(--at), #f3ebdd29 var(--at));border-radius:2px;height:4px}.scrub__bar::-moz-range-track{background:#f3ebdd29;border-radius:2px;height:4px}.scrub__bar::-moz-range-progress{background:var(--paper-2);border-radius:2px;height:4px}.scrub__bar::-webkit-slider-thumb{-webkit-appearance:none;background:var(--paper);width:12px;height:12px;transition:transform var(--t-press) var(--ease-out);border-radius:50%;margin-top:-4px}.scrub__bar::-moz-range-thumb{background:var(--paper);border:0;border-radius:50%;width:12px;height:12px}.scrub__bar:active::-webkit-slider-thumb{transform:scale(1.5)}.scrub__bar:focus-visible{outline:none}.scrub__bar:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #f3ebdd59}.transport__close{width:44px;height:44px;color:var(--dust);border-radius:50%;flex:none;place-items:center;margin-left:-12px;margin-right:-8px;display:none}.transport__close svg{width:18px;height:18px}.transport__close:active{color:var(--paper);transform:scale(.9)}.is-live .transport__close{display:grid}.segmented--chars{--seg-n:3}.is-live.is-calm .line.is-now .r{color:var(--ktv-pink)}.lyrics-lead{font-size:var(--text-small);color:var(--dust);margin:2px 0 22px;line-height:1.5}.modes{width:min(100%,18rem);margin-top:4px}.modes__hint{font-size:var(--text-small);color:var(--dust);margin:10px 0 26px;line-height:1.5}.modes__hint--learn,:root[data-mode=learn] .modes__hint--sing{display:none}:root[data-mode=learn] .modes__hint--learn{display:inline}:root[data-mode=learn] .line__en{display:block}:root[data-mode=learn] .transport--sync,:root[data-mode=learn] .transport-fade{display:none}:root[data-mode=learn] .song--timed{padding-bottom:0}:root[data-mode=learn] .r{color:color-mix(in srgb, var(--jade) 70%, var(--paper))}@media (hover:none){:root:not([data-mode=learn]) .song--timed .line[data-t]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}}@media (prefers-reduced-motion:reduce){.is-live .line{transition:none}}.chords-bar{flex-wrap:wrap;align-items:center;gap:10px 14px;margin:-8px 0 22px;display:flex}.chords-bar__toggle{border-radius:var(--r-pill);background:var(--night);min-height:40px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--paper-2);font-size:var(--text-meta);transition:background-color var(--t-quick) var(--ease-out), color var(--t-quick) var(--ease-out), box-shadow var(--t-quick) var(--ease-out);align-items:center;gap:7px;padding:0 16px 0 13px;font-weight:700;display:inline-flex}.chords-bar__toggle svg{width:18px;height:18px}.chords-bar__toggle:active{transform:scale(.97)}:root[data-chords=on] .chords-bar__toggle{background:var(--sodium);box-shadow:none;color:var(--ink)}.chords-bar__panel{color:var(--dust);font-size:var(--text-small);flex-wrap:wrap;flex-basis:100%;align-items:baseline;gap:4px 14px;margin:0;line-height:1.4;display:none}:root[data-chords=on] .chords-bar__panel{display:flex}.chords-bar__key{white-space:nowrap;font-weight:600}.chords-bar__capo{color:var(--paper)}.chords-bar__shapes{color:var(--sodium);flex-wrap:wrap;gap:0 10px;font-weight:700;display:flex}.chords-bar__transpose{align-items:center;gap:2px;margin-left:auto;display:none}:root[data-chords=on] .chords-bar__transpose{display:inline-flex}.chords-bar__step{background:var(--night);width:40px;height:40px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--paper);border-radius:50%;place-items:center;font-size:1.25rem;font-weight:600;line-height:1;display:grid}.chords-bar__step:active{background:var(--press);transform:scale(.92)}.chords-bar__offset{text-align:center;font-variant-numeric:tabular-nums;min-width:44px;min-height:44px;color:var(--paper);border-radius:var(--r-pill);font-weight:700}.chords-bar__offset:active{background:var(--press)}.ch{display:none}:root[data-chords=on] .ch{white-space:nowrap;color:var(--sodium);letter-spacing:.01em;margin-bottom:1px;font-size:.92em;font-weight:700;line-height:1.2;display:block;position:absolute;bottom:100%;left:0}:root[data-chords=on] .lyrics--chorded .syl{position:relative}:root[data-chords=on] .lyrics--chorded .line__text{row-gap:calc(14px + 1.25em);padding-top:1.25em}@media (width>=700px){:root[data-chords=on] .lyrics--chorded .line__text{row-gap:calc(18px + 1.25em)}}:root[data-chords=on] .lyrics--chorded .line[data-beats] .cue{top:calc(-14px - 1.25em)}.chords-break{display:none}:root[data-chords=on] .chords-break{font-size:calc(var(--lyric) * .52);color:var(--sodium);flex-wrap:wrap;align-items:baseline;gap:0 12px;margin-bottom:-6px;font-weight:700;display:flex}.chords-break__label{color:var(--dust);font-size:.85em;font-weight:600}.chords-break__run{white-space:pre-wrap}.is-live .line.is-now .ch{color:color-mix(in srgb, var(--sodium) 55%, var(--paper-2))}.is-live .line.is-now .syl:has(.b.is-singing) .ch,.is-live .line.is-now .syl:has(.b.is-sung) .ch{color:var(--sodium)}.is-live .line.is-now .syl:has(.b.is-singing) .ch{filter:drop-shadow(0 0 8px #ffb5478c)}.ch__name{cursor:help;border-radius:4px}.ch__name.is-on{background:#ffb54729;box-shadow:0 0 0 3px #ffb54729}.ch__name:focus-visible{outline:2px solid var(--sodium);outline-offset:2px}.pop--chord{align-items:center;width:auto;min-width:128px;padding-bottom:10px}.pop__chord{font-size:var(--text-lead);color:var(--sodium);font-weight:800}.cd{width:112px;height:auto;display:block;overflow:visible}.cd__line{stroke:var(--dust);stroke-width:1px}.cd__nut{stroke:var(--paper);stroke-width:3.5px}.cd__dot{fill:var(--paper)}.cd__finger{fill:var(--ink);font:700 9px var(--font-ui)}.cd__open{fill:none;stroke:var(--paper-2);stroke-width:1.2px}.cd__mute{stroke:var(--smoke);stroke-width:1.6px;stroke-linecap:round}.cd__fret{fill:var(--dust);font:700 10px var(--font-ui)}