@import"https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";:root{--bg-input: #e4e4e4;--bg-input-hover: #d0d0d0;--bg-input-press: #bebebe;--bg-main: #fff;--text-main: #000;--text-secondary: #6d6d6d;--text-id: #5f5f5f;--record-accent: #ff0000;--record-accent-transparent: rgba(255, 0, 0, .329);--record-middle: #5f5f5f;--waveform-stroke: #000}html,body{padding:0;margin:0}#app{position:fixed;inset:0;width:auto;height:auto;display:flex;flex-direction:column;justify-content:space-between;align-items:center;font-family:Roboto,sans-serif;background-color:var(--bg-main);color:var(--text-main)}#pre-load{height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--bg-main);color:var(--text-main);font-family:Roboto,sans-serif;position:fixed;inset:0;z-index:-1}#recorder{bottom:0;box-shadow:0 0 30px #0006;height:auto;width:100%;border-radius:30px 30px 0 0;padding:0;flex-shrink:0;max-width:1350px}#recorder-content{margin:20px;height:calc(100% - 40px);display:flex;flex-direction:column;justify-content:space-between}#lines-list{display:flex;align-items:center;justify-content:baseline;flex-direction:column;overflow:scroll;padding-top:20px;padding-bottom:20px;width:100vw}#file-controls{display:flex;flex-wrap:wrap;padding:5px;width:100vw;justify-content:center;box-shadow:0 0 30px #0006;z-index:1}#file-controls input[type=file]{display:none}#file-controls button{border:none;font-family:Roboto,sans-serif;font-size:1.5em;height:2em;padding-left:.5em;padding-right:.5em;border-radius:1em;color:var(--text-main);margin:5px}#file-controls button:disabled{color:var(--text-secondary)}#file-controls button{background:var(--bg-input)}#file-controls button:hover:not(:disabled){background:var(--bg-input-hover)}#file-controls button:active:not(:disabled){background:var(--bg-input-press)}#file-controls label.input{margin:5px;font-size:1.5em;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}#file-controls label.input span.checkmark{display:inline-flex;align-items:center;width:2.8em;height:1.6em;border:.2em var(--bg-input) solid;border-radius:1em;justify-content:start}#file-controls label.input span.checkmark:after{content:"";width:1.2em;height:1.2em;border-radius:2em;border:.2em var(--bg-main) solid;display:block;background-color:var(--bg-input);will-change:margin-left,background-color;transition:margin-left .1s ease-out}#file-controls label.input input:checked~span.checkmark:after{margin-left:1.2em;background:#0f0}#file-controls label.input:hover input:checked~.checkmark:after{background:#00e626}#file-controls label.input:active input:checked~.checkmark:after{background:#00ce4f}#file-controls label.input:hover input~.checkmark:after{background:var(--bg-input-hover)}#file-controls label.input:active input~.checkmark:after{background:var(--bg-input-press)}#file-controls label.input input{appearance:none}#progress{height:20px;width:calc(var(--progress) * 100vw);background-color:#0059ff;position:fixed;left:0;top:0;right:0;transition:height .1s ease-out}#progress:not(.loading){height:0}.line-card{display:flex;flex-direction:column;height:66px;flex-shrink:0;min-width:50px;padding:0 0 4px;width:calc(100vw - 50px);max-width:1300px;border-bottom:1px var(--text-secondary) solid;overflow:hidden;cursor:pointer;transition:box-shadow .1s}.line-card:hover{box-shadow:#00000073 0 10px 20px -20px,#00000073 0 -10px 20px -20px}.line-card.selected{box-shadow:#00000073 0 15px 20px -20px,#00000073 0 -15px 20px -20px;height:auto;background-color:var(--bg-main)}.card-header{margin:2px;display:flex;justify-content:space-between;height:16px;padding:4px;border-radius:5px}.hide-complete .complete:not(.wrong){display:none}.complete .card-header{background:#5eff003a}.wrong .card-header{background:#ff000025}.complete-marker{display:none}.complete .complete-marker{display:block}.id{color:var(--text-id);font-family:Roboto Mono,monospace;font-style:italic;font-size:.8em}.text{font-size:2em;width:auto;-webkit-user-select:none;user-select:none}.complete:not(.wrong) .text{font-weight:lighter}.line-card.selected .text{text-decoration:underline;text-decoration-color:var(--text-secondary)}#waveform-controls{position:relative;height:100px;overflow:hidden;--grabber-width: 20px;--position: .2;--playhead-width: 100px;margin-left:var(--grabber-width);margin-right:var(--grabber-width);overflow:visible}#app.dragging{cursor:ew-resize}#waveform{top:0;right:0;left:0;position:absolute;pointer-events:none}#waveform svg{width:100%}#playhead{position:absolute;background:linear-gradient(to right,transparent 0%,#00ff0077 75%,#0f0 100%);height:100%;width:calc(var(--playhead-width) * 100%);left:calc(var(--playhead-width) * -100%);transform:translate(calc((100vw - (var(--grabber-width) - 5px) * 2) * var(--position)))}#trim-start,#trim-end{position:absolute;background-color:var(--record-accent-transparent);height:auto;top:0;bottom:0;overflow:visible}#trim-start{width:calc(var(--trim-start) * 100% + var(--grabber-width));left:0;margin-left:calc(0px - var(--grabber-width));border-radius:0 10px 10px 0}#trim-end{width:calc((1 - var(--trim-end)) * 100% + var(--grabber-width));right:0;margin-right:calc(0px - var(--grabber-width));border-radius:10px 0 0 10px}.grabber{width:calc(var(--grabber-width) - 5px);flex-shrink:0;background-color:var(--record-accent);position:absolute;cursor:ew-resize;top:0;bottom:0;border-radius:10px;display:flex;justify-content:center;align-items:center;-webkit-user-select:none;user-select:none}.grabber:after{content:"";display:block;height:30px;width:5px;border-radius:20px;background-color:#fff}#trim-start .grabber{right:0}#trim-end .grabber{left:0}#recorder-controls{height:80px;display:flex;justify-content:space-around}#recorder-text{padding-top:20px;padding-bottom:20px;text-align:center;height:auto}.recorder-button{font-family:Roboto Mono,monospace;height:64px;width:64px;border:none;border-radius:100%;font-size:2em;display:flex;justify-content:center;align-items:center;background-color:var(--bg-input);color:var(--text-main)}.recorder-button:hover{background-color:var(--bg-input-hover)}.recorder-button:active{background-color:var(--bg-input-press)}#record-button{width:64px;height:64px;background:var(--record-accent);box-shadow:0 0 0 8px var(--record-accent-transparent);border-radius:100%;border:none;transition:box-shadow .1s;display:flex;align-items:center;justify-content:center;--loudness: 0}.recording #record-button{background:var(--bg-main);transition:box-shadow .1s ease-out;box-shadow:0 0 0 calc(var(--loudness) + 4px) #00000054}.record-button-center{width:32px;height:32px;background:var(--record-middle);border-radius:10px;opacity:0;transition:opacity .1s}.recording .record-button-center{opacity:1}#record-button:hover{box-shadow:0 0 0 10px var(--record-accent-transparent)}.recording #record-button:hover{box-shadow:0 0 0 calc(var(--loudness) + 6px) #00000054}#record-button:active{box-shadow:0 0 0 4px var(--record-accent-transparent)}.recording #record-button:active{box-shadow:0 0 0 calc(var(--loudness) + 2px) #00000054}@media(prefers-color-scheme:dark){:root{--bg-input: #272b2c;--bg-input-hover: #333739;--bg-input-press: #3d4244;--bg-main: #181a1b;--text-main: #fff;--text-secondary: #757575;--text-id: #a6a6a6;--record-accent: #ff0000;--record-accent-transparent: rgba(255, 0, 0, .329);--record-middle: #41484a;--waveform-stroke: #fff}}