@import"https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..1000&display=swap";@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200..800&display=swap";:root{--bg: #212121;--color: #8df;font-family:Roboto Flex,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;font-size:16.13px;color-scheme:dark;background-color:var(--bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}#app{height:100vh}*{box-sizing:border-box}html{overscroll-behavior:none}body{overscroll-behavior:none;margin:0;height:100vh}.action,.context-item{position:relative}.action:before,.action:after,.context-item:before,.context-item:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}.action:hover:before,.context-item:hover:before{background-color:#fff2;z-index:-1}.action:active:after,.context-item:active:after{background-color:#fff2;border:2px solid var(--A90)}.action[disabled],.context-item[disabled]{color:gray}.action[disabled]:before,.action[disabled]:after,.context-item[disabled]:before,.context-item[disabled]:after{border:none;pointer-events:none;background-color:transparent!important}.action{background:none;min-width:48px;min-height:48px;max-width:min-content;max-height:min-content;border-color:transparent;outline-color:transparent;display:grid;place-items:center}.action:after,.action:before{border-radius:999px}.action:focus-visible{outline:none;border:none;border:2px dashed var(--C200);border-radius:999px}input[type=text]{font-family:inherit;padding:12px;font-size:16px;border:1px solid rgba(255,255,255,.2666666667);outline:none;border-radius:8px;background-color:#fff1;width:100%}input[type=text]:focus-visible{outline:2px solid var(--C100)}input:focus-visible,button:focus-visible{outline:2px solid var(--C100)}.sidebar{position:fixed;z-index:100;padding-inline:8px;padding-bottom:12px;display:flex;flex-direction:column;gap:12px;top:0;right:0;bottom:0;left:-350px;width:350px;transition:all .2s}.sidebar.opened{left:0;box-shadow:10px 0 10px #0003}.sidebar .new-project{position:relative;border-radius:8px;font-size:16px;padding:12px;margin-bottom:8px;width:100%;justify-content:center;text-align:center;text-transform:uppercase;font-weight:600;color:var(--C100)}.sidebar .projects{border-radius:16px;padding:4px;max-height:calc(100vh - 128px);overflow:overlay;background:var(--A20)}.sidebar .projects:empty:before{content:"No projects";text-align:center;display:block;padding:12px}.sidebar .projects .project-item{height:76px;background:var(--A10);padding:12px 16px}.sidebar .projects .project-item:first-of-type{border-top-left-radius:12px;border-top-right-radius:12px}.sidebar .projects .project-item:last-of-type{border-bottom-left-radius:12px;border-bottom-right-radius:12px}.sidebar .projects .project-item.current{background-color:var(--A40)}button{--radius: 999px;display:flex;width:max-content;border:none;justify-content:center;align-items:center;outline:none;border-radius:999px;position:relative;overflow:hidden;font-family:inherit;background:none;font-size:16px}button:before,button:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0}button:before{transition:all .2s;opacity:.2}button:hover:before{background-color:var(--C400);z-index:-1}button[disabled]{color:gray}button[disabled]:before,button[disabled]:after{border:none;pointer-events:none;background-color:transparent!important}@media (hover: none) or (pointer: coarse){button:hover:before{background:transparent!important}}.pbg,.bg{background:var(--bg);isolation:isolate}.pbg:before,.bg:before{z-index:-1;content:"";top:0;right:0;bottom:0;left:0;position:absolute;border-radius:inherit;opacity:.3;background-color:var(--C400)}.pbg{position:relative}body:is(.pbg,.bg):before,.main-dialog:is(.pbg,.bg):before,.sidebar:is(.pbg,.bg):before{opacity:.1;background-color:var(--C4 0)}.ripple{--speed: .4s;--maxw: 200px;--opacity: 0;position:absolute;padding:4px;translate:-50% -50%;background:radial-gradient(circle,var(--A50) 0%,var(--A60) 40%,var(--transparent) 70%,var(--transparent) 100%);animation:rippled var(--speed) forwards ease-out;border-radius:9999px;z-index:-1}.ripple.end{--speed: .4s !important;opacity:var(--opacity);width:calc(var(--maxw) * 2);height:calc(var(--maxw) * 2);animation:rippleEnd .4s forwards}@keyframes rippleEnd{0%{opacity:var(--opacity)}to{opacity:0}}@keyframes rippled{0%{width:0px;height:0px;opacity:0}30%{width:calc(var(--maxw) * .3);height:calc(var(--maxw) * .3);opacity:.4}50%{opacity:.7}to{width:calc(var(--maxw) * .3);height:calc(var(--maxw) * .3);opacity:.4}to{width:var(--maxw);height:var(--maxw);opacity:var(--opacity)}}.chip{border:none;font-family:inherit;height:32px;white-space:nowrap;font-size:14px;padding:8px 12px;border-radius:4px;outline:1px solid var(--C200);background:none}.chip[data-active=true]{color:var(--C900);background-color:var(--C100)}.chip:disabled{opacity:.7}.divider{height:calc(var(--height, 1) * 1px);width:calc(var(--width, 1) * 1px);margin-block:calc(var(--wspace) * 1px);margin-inline:calc(var(--hspace) * 1px);background-color:#8888}.navigator{position:fixed;inset:auto 0 0 0;display:flex;height:var(--bnav)}.navigator .navigator-entry{background:none;border-radius:0;outline:none;border:none;flex-grow:1;display:grid;gap:0px;grid-template-areas:minmax(0,1fr);place-items:center;font-family:Roboto Flex;font-weight:600;font-size:14px;letter-spacing:.5px}.navigator .icon{width:28px;margin-inline:14px;height:28px;display:grid;align-self:last baseline;place-items:center;border-radius:32px;transition-property:width,background-color,margin-inline;transition-duration:.2s}.navigator [data-active]>.icon{background:var(--C400);color:var(--C900);margin-inline:0px;width:56px}.dialog{--width: 400px;--spacing: 32px;--title: 24px;--icon: 24px;--button: 32px;opacity:0;transition:all .2s}.dialog .main-dialog{transition:all .2s;transform:scale(.9);transform-origin:center}.dialog.opened{opacity:1}.dialog.opened .main-dialog{transform:scale(1)}.dialog{display:grid;position:fixed;isolation:isolate;z-index:999;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.6666666667);place-items:center}.dialog .main-dialog{display:flex;flex-direction:column;position:relative;overflow:hidden;max-width:var(--width);background-color:#222;border-radius:28px;box-shadow:0 2px 5px #0004;margin:auto;width:calc(100% - var(--spacing));margin-inline:calc(var(--spacing) / 2);padding:calc(var(--spacing) * .75) var(--spacing);grid-template-rows:0 var(--title) 1fr calc(var(--button) * 2)}.dialog .main-dialog:has(.iconify){grid-template-rows:calc(var(--icon) * 1.6666666667) calc(var(--title) * 2) 1fr calc(var(--button) * 2)}.dialog .main-dialog>*:not(.dialog-content,.dialog-title){display:flex}.dialog .dialog-icon{display:flex;justify-content:center}.dialog:has(.dialog-icon .iconify) .dialog-title,.dialog:has(.dialog-icon .iconify) .dialog-content{text-align:center}.dialog .dialog-actions{align-items:center;margin-left:auto}.dialog .dialog-actions .dialog-action{font-family:Roboto Flex;background:none;height:calc(var(--button));outline-color:transparent;font-size:calc(var(--button) / 2.5);font-weight:600;letter-spacing:.5px;border:none;display:inherit;align-items:center;color:var(--C100);padding-inline:calc(var(--button) / 2);border-radius:999px}.dialog .dialog-actions .dialog-action:focus-visible{outline:2px solid var(--C400)}.dialog .dialog-content{padding-block:calc(var(--spacing) * .5)}.dialog .dialog-title{font-size:24px}.scroller{position:relative;padding-right:20px;overflow:hidden;white-space:nowrap;width:auto}.scroller .s-content{position:relative;width:max-content}.md3-button{position:relative;padding-inline:12px;min-height:48px;display:flex;width:auto;align-items:center;line-height:0;border-radius:6px;font-weight:700}.md3-button [data-icon]+label{margin-left:8px}.md3-button label+[data-right-icon]{margin-left:8px}.md3-button.filled{background-color:var(--C100);color:var(--C900)}.md3-button.filled .ripple{z-index:1;background:radial-gradient(circle,var(--A80) 0%,var(--A90) 40%,var(--C100) 70%,var(--C100) 100%)!important}.md3-button.outline{border:2px solid var(--A60);background-color:var(--A10)}.md3-button.subtle{background-color:var(--A20)}.flex-wrapper{display:flex}.flex-span{flex-grow:1}.text-component{color:var(--C100);margin-block:4px}:root{--gap: 12px;--pad: 12px;--nav: 56px;--player: 72px;--bnav: 0px}#top{display:flex;height:var(--nav);align-items:center;position:fixed;inset:0 0 auto 0;padding-inline:var(--pad);z-index:2;box-shadow:0 0 5px #000a}#top .navigation-top{display:inherit;align-items:inherit}#top .status{margin-right:auto;font-size:20px;width:0;text-wrap:nowrap;text-transform:capitalize}#player{--h: 4px;height:100%;display:flex;position:fixed;inset:auto 0 0 0;align-items:center;padding-top:var(--h);max-height:var(--player);padding-inline:var(--pad);-webkit-user-select:none;user-select:none;border-top:1px solid rgba(0,0,0,.0666666667);z-index:2}#player .player{display:flex;gap:var(--gap);margin-right:auto}#player .player .actions{width:calc(100vw - 432px)}#player .controls{display:flex}#player .art{height:48px;width:48px;object-fit:cover;aspect-ratio:1;pointer-events:none}#player .progress-bar{--bg: var(--A30);--pr: var(--C400);height:2px;position:absolute;isolation:isolate;inset:0 0 auto 0;transition-property:width,height,opacity;transition-duration:.2s;transition-timing-function:ease;background-color:var(--bg)}#player .progress-bar:after{content:"";inset:0 auto 0 0;position:absolute;width:calc(var(--width, 0) * 100%);background-color:var(--pr)}#player .progress-bar:hover{height:var(--h)}#player .progress-bar:hover .scrub{opacity:1}#player .progress-bar .scrub{left:calc(var(--width, 0) * 100% - var(--h));top:calc(var(--h, 0) * -1);height:calc(var(--h) * 3);z-index:1;opacity:0;aspect-ratio:1;position:relative;background-color:var(--pr);border-radius:999px}#audio-input{display:none}main,textarea,.timing,.preview{position:fixed;z-index:2;overflow:auto;inset:var(--nav) 0 calc(var(--player) + var(--bnav)) 0}main::-webkit-scrollbar,textarea::-webkit-scrollbar,.timing::-webkit-scrollbar,.preview::-webkit-scrollbar{width:4px}main::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-thumb,.timing::-webkit-scrollbar-thumb,.preview::-webkit-scrollbar-thumb{background-color:#777;background-attachment:scroll}main{display:flex;flex-direction:column;align-items:center;justify-content:center}main h1{margin:8px;color:#f0f0f0}main .section{display:flex;align-items:center;width:100%;max-width:400px;gap:12px}main .section p{margin-block:6px}main .section kbd{background:rgba(255,255,255,.2666666667);padding:6px;font-family:JetBrains Mono;font-size:14px;border-radius:4px}textarea{resize:none;background:none;outline:none!important;border:none!important;padding:var(--gap);font-size:16px;width:100%}.timing,.preview{padding-block:calc(50vh - (var(--player) + var(--nav)))}.timing{margin-inline:auto;display:flex;align-items:center;flex-direction:column}.timing::-webkit-scrollbar{width:4px}.timing::-webkit-scrollbar-thumb{background-color:#777;background-attachment:scroll}.timing .item{display:grid;min-height:80px;max-width:800px;width:100%;grid-template-columns:100px 1fr repeat(2,48px);align-items:center;padding-inline:16px;border-radius:16px;transition-property:opacity,max-width,min-height,background-color,box-shadow,padding;transition-duration:.2s}.timing .item+.item{border-top:1px solid #333}.timing .item.focused{min-height:120px;box-shadow:0 2px 12px #0004}.timing .item .lyric{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;margin-right:auto}.timing .item .placeholder{color:#a7a7a7}.timing .item time{color:var(--C300, #8df);width:96px;text-align:center;font-family:JetBrains Mono;font-size:14px}.timing .item .newline{position:absolute;left:var(--pad)}.preview.playing{overflow:hidden}.preview .lyric{font-size:24px;text-align:center;min-height:48px;transition:all .3s;display:grid;color:var(--C200);opacity:.6;padding-inline:64px;place-items:center}.preview .lyric.current{opacity:1;font-weight:700;color:#fff;padding-inline:0px;font-size:32px;min-height:48px}.preview .no-lyric{font-size:24px;text-align:center;opacity:.6;color:var(--C300)}.preview .lyric+.no-lyric{display:none}@media screen and (max-width: 600px){:root{--bnav: 80px !important}#top{background:transparent;box-shadow:none}#top:before{opacity:0}#top .divider{display:none}.navigation-top{display:none!important}#player{border-radius:12px 12px 0 0;bottom:var(--bnav)}#player .divider,#player .duration,#player #upload{display:none}#player .player{flex-wrap:nowrap;margin-right:144px}#player .player .actions{width:calc(100vw - 240px)}#player .controls{position:absolute;right:12px}#player .progress-bar{inset:auto 0 0 0}}.chips{overflow:auto;margin-bottom:12px;padding:2px}.chips>div{gap:12px;display:flex;width:fit-content}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background-color:#fff2}::-webkit-scrollbar ::-webkit-scrollbar-corner{background-color:transparent}.input-wrapper{display:flex;flex-direction:column}.input-wrapper label{font-weight:600;font-size:14px}.input-wrapper input{font:inherit;transition:border .2s;outline:none!important;border:2px solid var(--A20);border-radius:8px;padding:8px 12px}.input-wrapper input:focus-visible{border:2px solid var(--C400)}.input-wrapper.underline{padding-top:24px;position:relative}.input-wrapper.underline input{border-radius:0!important;border-right:none;border-left:none;border-top:none}.input-wrapper.underline label{transition:all .2s;position:absolute;font-weight:inherit;font-size:14px;top:0;left:0}.input-wrapper.underline:has(input:placeholder-shown) label{font-size:inherit;top:34px;left:12px}.context{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2000}.context.opened .main-context{opacity:1}.context .main-context{width:200px;position:absolute;background-color:#333;top:var(--y, 0);left:var(--x, 0);border-radius:8px;padding:4px;z-index:10;transition:opacity .2s;box-shadow:0 2px 5px #000a;opacity:0}.context .main-context .context-item{display:grid;width:100%;border-radius:8px;grid-template-areas:"a b";min-height:48px;justify-content:unset;background-color:transparent;grid-template-columns:48px auto;align-items:center}.context .main-context .context-item .context-label{grid-area:b;text-align:left}.context .main-context .context-item .context-icon{grid-area:a;display:inherit;place-items:center}.context .main-context .context-item:after,.context .main-context .context-item:before{border-radius:6px}