.auto-scroll-sync-icon{color:var(--foreground)}.auto-scroll-sync-icon.active{color:var(--color-main)}.auto-scroll-sync-icon.inactive{color:var(--foreground)}
.trackinfo .track-image{border-radius:8px;width:50px;height:50px;margin-left:16px}@media (min-width:640px){.trackinfo .track-image{width:80px;height:80px;margin-bottom:12px}}.trackinfo .track-name-container{flex-direction:column;display:flex}@media (min-width:640px){.trackinfo .track-name-container{justify-content:center;padding-bottom:12px}}.trackinfo .track-name{width:200px;font-weight:400}@media (min-width:640px){.trackinfo .track-name{width:150px}}.trackinfo span{width:38px;font-size:small;display:inline-block}.total-secs:is(.trackinfo span){margin-left:4px}.trackinfo .read-audio-placeholder{background:#333;border-radius:4px;justify-content:center;align-items:center;font-size:2rem;display:flex}.trackinfo .track-subtitle{color:#999;margin-bottom:.25rem;font-size:.8rem}
.progress-bar{--track-w:100%;--track-h:12px;--thumb-d:12px;--track-c:var(--border_gray);--filll-c:var(--color-main);margin-top:-12px;margin-bottom:8px}.progress-bar input{appearance:none;--range:calc(var(--max) - var(--min));--ratio:calc((var(--val) - var(--min))/var(--range));--sx:calc(.5*var(--thumb-d) + var(--ratio)*(100% - var(--thumb-d)));width:var(--track-w);height:var(--thumb-d);cursor:pointer;background:0 0;margin:0;padding:0;font:1em/1 arial,sans-serif}:is(.progress-bar input)::-webkit-slider-thumb{appearance:none}:is(.progress-bar input)::-webkit-slider-runnable-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:linear-gradient(var(--filll-c),var(--filll-c))0/var(--sx)100% no-repeat var(--track-c);border:none}:is(.progress-bar input)::-moz-range-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:var(--track-c);border:none}:is(.progress-bar input)::-ms-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:var(--track-c);border:none}:is(.progress-bar input)::-moz-range-progress{height:var(--track-h);background:var(--filll-c)}:is(.progress-bar input)::-ms-fill-lower{height:var(--track-h);background:var(--filll-c)}:is(.progress-bar input)::-webkit-slider-thumb{margin-top:calc(.5*(var(--track-h) - var(--thumb-d)));box-sizing:border-box;background:var(--color-main);border:none;border-radius:50%;width:0;height:0}:is(.progress-bar input)::-moz-range-thumb{box-sizing:border-box;background:var(--color-main);border:none;border-radius:50%;width:0;height:0}:is(.progress-bar input)::-ms-thumb{box-sizing:border-box;background:var(--color-main);border:none;border-radius:50%;width:0;height:0;margin-top:0}:is(.progress-bar input)::-ms-tooltip{display:none}
.volume-control{--track-w:10em;--track-h:.75em;--thumb-d:.75em;--track-c:var(--border_gray);--filll-c:var(--color-main);align-items:flex-start;position:relative}.volume-control button{cursor:pointer;z-index:10}.volume-control .audio-input-container{width:20px;height:200px;position:absolute;top:-120px;right:10px}@media (min-width:640px){.volume-control .audio-input-container{top:-150px}}.volume-control input{appearance:none;--range:calc(var(--max) - var(--min));--ratio:calc((var(--val) - var(--min))/var(--range));--sx:calc(.5*var(--thumb-d) + var(--ratio)*(100% - var(--thumb-d)));cursor:pointer;width:var(--track-w);height:var(--track-h);background:0 0;margin:0;padding:0;font:1em/1 arial,sans-serif;transform:translate(-50%,-50%)rotate(-90deg)}:is(.volume-control input)::-webkit-slider-thumb{appearance:none}:is(.volume-control input)::-webkit-slider-runnable-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:linear-gradient(var(--filll-c),var(--filll-c))0/var(--sx)100% no-repeat var(--track-c);border:none}:is(.volume-control input)::-moz-range-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:var(--track-c);border:none}:is(.volume-control input)::-ms-track{box-sizing:border-box;width:var(--track-w);height:var(--track-h);background:var(--track-c);border:none}:is(.volume-control input)::-moz-range-progress{height:var(--track-h);background:var(--filll-c)}:is(.volume-control input)::-ms-fill-lower{height:var(--track-h);background:var(--filll-c)}:is(.volume-control input)::-webkit-slider-thumb{margin-top:calc(.5*(var(--track-h) - var(--thumb-d)));box-sizing:border-box;background:#f90;border:none;border-radius:50%;width:0;height:0}:is(.volume-control input)::-moz-range-thumb{box-sizing:border-box;background:#f90;border:none;border-radius:50%;width:0;height:0}:is(.volume-control input)::-ms-thumb{box-sizing:border-box;background:#f90;border:none;border-radius:50%;width:0;height:0;margin-top:0}:is(.volume-control input)::-ms-tooltip{display:none}
.audio-player-container{flex-direction:column;display:flex}.audio-player-container .all-controls-container{flex-direction:row;justify-content:space-between;display:flex}.audio-player-container .info-controls-container{flex-direction:column;display:flex}@media (min-width:640px){.audio-player-container .info-controls-container{flex-direction:row}}.audio-player-container .controls-container{flex-direction:row;align-items:center;margin-left:16px;display:flex}@media (min-width:640px){.audio-player-container .controls-container{padding-left:40px}}:is(.audio-player-container .controls-container) button{margin-right:4px}.audio-player-container .volume-actions-container{flex-direction:row;align-items:flex-start;display:flex}@media (min-width:640px){.audio-player-container .volume-actions-container{align-items:center}}.audio-player-container .volume-close-container,:is(.audio-player-container .volume-close-container) .buttons{flex-direction:column;display:flex}@media (min-width:640px){:is(.audio-player-container .volume-close-container) .buttons{flex-direction:row}.audio-player-container .volume-close-container{flex-direction:row-reverse}:is(.audio-player-container .volume-close-container) .close-button-container{margin-top:0}}:is(:is(.audio-player-container .volume-actions-container) button) svg{width:22px;height:22px}@media (min-width:375px){:is(:is(.audio-player-container .volume-actions-container) button) svg{width:24px;height:24px}}@media (min-width:640px){:is(:is(.audio-player-container .volume-actions-container) button) svg{width:25px;height:25px}}.audio-player-container .song-actions-container{flex-wrap:wrap;max-width:100px}@media (min-width:375px){.audio-player-container .song-actions-container{max-width:120px}}@media (min-width:640px){.audio-player-container .song-actions-container{max-width:150px}}:is(.audio-player-container.read-mode .volume-actions-container) .song-actions-container{display:none}:is(.audio-player-container.read-mode .volume-actions-container) .volume-close-container{flex:1;justify-content:flex-end}:is(:is(.audio-player-container.read-mode .volume-actions-container) .volume-close-container) .buttons{flex-direction:row;justify-content:flex-start;align-items:start;gap:8px;display:flex}:is(:is(.audio-player-container.read-mode .volume-actions-container) .volume-close-container) .playback-speed-selector{padding-right:16px}.audio-player-container.read-mode .track-name{width:auto}@media (min-width:640px){.audio-player-container.read-mode .track-name{width:200px}}
.keyboard-container{background-color:var(--background);border-top:1px solid var(--border_gray);flex-direction:column;align-items:center;padding-top:1vw;display:flex}@media (min-width:640px){.keyboard-container{padding:12px}}.keyboard-container .flex-row{justify-content:center;width:100%;position:relative}.keyboard-container .key{border:1px solid var(--color-main);width:9vw;height:10vw;color:var(--color-main);cursor:pointer;border-radius:4px;justify-content:center;align-items:center;margin:0 1vw 1vw 0;font-size:5vw;display:flex;position:relative}.pressed:is(.keyboard-container .key){background-color:var(--color-light)}@media (min-width:640px){.keyboard-container .key{width:6vw;height:6vw;font-size:3vw}}@media (min-width:1024px){.keyboard-container .key{width:5vw;height:5vw}}@media (orientation:landscape){.keyboard-container .key{width:6vw;height:4vw;font-size:3vw}@media (min-width:375px){.keyboard-container .key{width:6vw;height:4vw;font-size:3vw}}@media (min-width:640px){.keyboard-container .key{width:4vw;height:2.5vw;margin:0 1vw .5vw 0;font-size:2vw}}@media (min-width:1024px){.keyboard-container .key{width:5vw;height:5vw;font-size:3vw}}}.keyboard-container .toggle-key{margin-left:24px}
.bottom-container{background-color:var(--background);z-index:var(--z-read-bottom-container);box-shadow:var(--box_shadow);border-top:1px solid var(--border_gray);position:fixed;bottom:0;left:0;right:0}.bottom-container .read-bottom-container{height:50px;padding:5px 16px}:is(.bottom-container .read-bottom-container) svg{cursor:pointer;margin-left:4px}@media (min-width:640px){:is(.bottom-container .read-bottom-container) svg{margin-left:24px}}:is(.bottom-container .read-bottom-container) .blue-button{margin-right:4px}@media (min-width:640px){:is(.bottom-container .read-bottom-container) .blue-button{margin-right:24px}}