.audio-player-container{flex-direction:column;display:flex;container:player/inline-size}.audio-player-container .all-controls-container{grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"art title kebab stack""art sub sub stack""transport transport transport stack";align-items:center;gap:2px 10px;padding:12px 12px 12px 16px;display:grid}.audio-player-container .controls-container{flex-flow:row;flex-shrink:0;grid-area:transport;justify-content:center;align-items:center;gap:4px;margin-top:6px;display:flex}:is(.audio-player-container .controls-container) button{flex-shrink:0;place-items:center;width:30px;height:30px;padding:0;display:grid}.audio-player-container .player-kebab{grid-area:kebab;place-self:end}.audio-player-container .player-stack{border-left:1px solid var(--border_gray);flex-direction:column-reverse;flex-shrink:0;grid-area:stack;justify-content:space-between;align-self:stretch;align-items:center;gap:2px;margin-left:4px;padding-left:6px;display:flex}:is(.audio-player-container .player-stack) button{place-items:center;width:30px;height:30px;padding:0;display:grid}.audio-player-container .controls-container button svg,.audio-player-container .player-kebab button svg,.audio-player-container .player-stack button svg{width:21px;height:21px;display:block}.audio-player-container .controls-container button svg{width:19px;height:19px}@container player (min-width:520px){.audio-player-container .all-controls-container{grid-template-areas:"art title kebab stack""art sub kebab stack""transport transport transport transport";gap:2px 16px;padding:12px 16px}.audio-player-container .player-kebab{align-self:center}.audio-player-container .player-stack{border-left:0;flex-direction:row;justify-content:flex-end;align-self:center;gap:14px;margin-left:0;padding-left:0}.audio-player-container .controls-container{gap:6px}}@container player (min-width:840px){.audio-player-container .all-controls-container{grid-template-columns:auto minmax(0,1fr) auto auto auto;grid-template-areas:"art title transport kebab stack""art sub transport kebab stack";gap:2px 24px;padding:14px 18px}.audio-player-container .controls-container{gap:8px;margin-top:0}:is(.audio-player-container .controls-container) button svg{width:21px;height:21px}.audio-player-container .player-stack{margin-left:-10px}}@container player (max-width:360px){.audio-player-container .all-controls-container{gap:2px 8px;padding:12px 8px 12px 12px}.audio-player-container .controls-container{gap:0}:is(.audio-player-container .controls-container) button{width:27px}:is(.audio-player-container .controls-container) button svg{width:17px;height:17px}}.audio-player-container.read-mode .player-kebab{display:none}.audio-player-container.read-mode .player-stack{flex-direction:column;justify-content:flex-start;gap:4px}.audio-player-container.read-mode .playback-speed-selector{grid-area:kebab;place-self:center end;display:block}@container player (min-width:520px){.audio-player-container.read-mode .player-stack{flex-direction:row;align-items:center;gap:14px}}.audio-player-container.preview-mode .player-kebab{display:none}
.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}}
/*# sourceMappingURL=da379b772a1f7b3c.css.map*/