.audio-player-container{display:flex;flex-direction:column}.audio-player-container .all-controls-container{display:flex;flex-direction:row;justify-content:space-between}.audio-player-container .info-controls-container{display:flex;flex-direction:column}@media(min-width:641px){.audio-player-container .info-controls-container{flex-direction:row}}.audio-player-container .controls-container{margin-left:16px;display:flex;flex-direction:row;align-items:center}@media(min-width:641px){.audio-player-container .controls-container{padding-left:40px}}.audio-player-container .controls-container button{margin-right:4px}.audio-player-container .volume-actions-container{display:flex;flex-direction:row;align-items:flex-start}@media(min-width:641px){.audio-player-container .volume-actions-container{align-items:center}}.audio-player-container .volume-close-container,.audio-player-container .volume-close-container .buttons{display:flex;flex-direction:column}@media(min-width:641px){.audio-player-container .volume-close-container .buttons{flex-direction:row}.audio-player-container .volume-close-container{flex-direction:row-reverse}}.audio-player-container .volume-close-container .close-button-container{margin-top:12px}@media(min-width:641px){.audio-player-container .volume-close-container .close-button-container{margin-top:0}}.audio-player-container .volume-actions-container button svg{height:22px;width:22px}@media(min-width:376px){.audio-player-container .volume-actions-container button svg{height:24px;width:24px}}@media(min-width:641px){.audio-player-container .volume-actions-container button svg{height:25px;width:25px}}.audio-player-container .song-actions-container{max-width:100px;flex-wrap:wrap}@media(min-width:376px){.audio-player-container .song-actions-container{max-width:120px}}@media(min-width:641px){.audio-player-container .song-actions-container{max-width:150px}}.audio-player-container.read-mode .volume-actions-container .actions-minimize-container{display:none}.audio-player-container.read-mode .volume-actions-container .volume-close-container{flex:1;justify-content:flex-end}.audio-player-container.read-mode .volume-actions-container .volume-close-container .buttons{display:flex;flex-direction:row;align-items:center}.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:641px){.audio-player-container.read-mode .track-name{width:200px}}.keyboard-container{display:flex;flex-direction:column;align-items:center;background-color:var(--background);padding-top:1vw;border-top:1px solid var(--border_gray)}@media(min-width:641px){.keyboard-container{padding:12px}}.keyboard-container .flex-row{width:100%;justify-content:center;position:relative}.keyboard-container .key{width:9vw;height:10vw;font-size:5vw;position:relative;border:1px solid var(--color-main);border-radius:4px;color:var(--color-main);display:flex;justify-content:center;align-items:center;margin:0 1vw 1vw 0;cursor:pointer}.keyboard-container .key.pressed{background-color:var(--color-light)}@media(min-width:641px){.keyboard-container .key{width:6vw;height:6vw;font-size:3vw}}@media(min-width:1025px){.keyboard-container .key{width:5vw;height:5vw}}@media(orientation:landscape){.keyboard-container .key{width:6vw;height:4vw;font-size:3vw}}@media(orientation:landscape)and (min-width:376px){.keyboard-container .key{width:6vw;height:4vw;font-size:3vw}}@media(orientation:landscape)and (min-width:641px){.keyboard-container .key{width:4vw;height:2.5vw;font-size:2vw;margin:0 1vw .5vw 0}}@media(orientation:landscape)and (min-width:1025px){.keyboard-container .key{width:5vw;height:5vw;font-size:3vw}}.keyboard-container .toggle-key{margin-left:24px}.bottom-container{position:fixed;bottom:0;left:0;right:0;background-color:var(--background);z-index:5;box-shadow:var(--box_shadow);border-top:1px solid var(--border_gray)}.bottom-container .read-bottom-container{height:50px;padding:5px 16px}.bottom-container .read-bottom-container svg{margin-left:4px;cursor:pointer}@media(min-width:641px){.bottom-container .read-bottom-container svg{margin-left:24px}}.bottom-container .read-bottom-container .blue-button{margin-right:4px}@media(min-width:641px){.bottom-container .read-bottom-container .blue-button{margin-right:24px}}