:root{--background:#fff;--foreground:#171717;--ease-out:cubic-bezier(.23, 1, .32, 1);--ease-drawer:cubic-bezier(.32, .72, 0, 1)}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}html{height:100%}html,body{max-width:100vw;overflow-x:clip}body{min-height:100%;color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}main{width:100%;max-width:680px;margin:0 auto}.seg{border-radius:10px;margin:-2px -5px;padding:2px 5px;transition:background-color .12s}@media (hover:hover){.seg:hover{background-color:#5a96ff4d}.dim .seg:hover{background-color:#5a96ffd9}.line.spanning .seg:hover{background-color:#0000}}.drag-box{z-index:-1;pointer-events:none;transition:left .18s var(--ease-out), top .18s var(--ease-out), width .18s var(--ease-out), height .18s var(--ease-out), opacity .15s var(--ease-out);background-color:#5a96ff4d;border-radius:10px;position:absolute}.dim .drag-box{background-color:#5a96ffd9}@starting-style{.drag-box{opacity:0}}@media (prefers-reduced-motion:reduce){.marquee>span{display:inline}.marquee.scroll>span{animation:none}.drag-box{transition:opacity .15s var(--ease-out)}}.detail{z-index:2;color:#fff;padding:20px 24px calc(20px + env(safe-area-inset-bottom));background:#222;border-radius:16px 16px 0 0;max-height:75vh;position:fixed;bottom:0;left:0;right:0;overflow-y:auto;box-shadow:0 -4px 24px #0008}@media (min-width:680px){.detail{max-width:680px;margin-inline:auto}}@media (min-width:1424px){.detail{border-radius:16px;width:340px;max-height:calc(100vh - 264px);margin-inline:0;padding:20px 24px;inset:64px auto auto calc(50% + 356px);overflow-y:auto;box-shadow:0 4px 24px #0008}}.line{opacity:1;transition:opacity .4s var(--ease-out)}.line.dim{opacity:.35}.line.dim.next{opacity:.6}.press{transition:transform .12s var(--ease-out)}.press:active{transform:scale(.95)}.press:disabled{opacity:.35;transform:none;cursor:default!important}.marquee{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.marquee>span{display:inline-block}.marquee.scroll>span{animation:marquee var(--t) linear infinite}@keyframes marquee{0%,15%{transform:none}50%,65%{transform:translateX(calc(-1 * var(--d)))}to{transform:none}}.skel{background:currentColor;border-radius:7px;width:70%;height:14px;margin:4px 0;animation:1.2s ease-in-out infinite skel-pulse;display:block}.skel.lyric{border-radius:13px;height:26px;margin:31px 0}@keyframes skel-pulse{0%,to{opacity:.1}50%{opacity:.25}}@media (prefers-reduced-motion:reduce){.skel{opacity:.15;animation:none}}.resume{transition:opacity .2s var(--ease-out), transform .2s var(--ease-out);transform:translate(-50%)}.resume svg{transition:transform .3s var(--ease-out)}.resume[data-up] svg{transform:rotate(180deg)}.detail{transition:transform .35s var(--ease-drawer)}@starting-style{.line,.line.dim{opacity:0}.resume{opacity:0;transform:translate(-50%,8px)}.detail{transform:translateY(100%)}}@media (min-width:1424px){.detail{transition:opacity .2s var(--ease-out), transform .2s var(--ease-out)}@starting-style{.detail{opacity:0;transform:translate(8px)}}}@media (prefers-reduced-motion:reduce){.detail{transition:opacity .2s var(--ease-out)}@starting-style{.detail{opacity:0;transform:none}.resume{transform:translate(-50%)}}.resume svg{transition:none}}.MuiTooltip-tooltip{font-size:13px!important}
