@media only screen and (max-width:1265px){main{height:100vh;padding:0 5px}.container{width:75%;grid-template-columns:2fr 2fr}}@media only screen and (max-width:840px){.recorder{position:sticky;bottom:0}.logo-container{margin:25px 0 5px}main{padding:0}#timer{font-size:35px;margin-bottom:10px}.container{width:100%;display:flex;flex-direction:column;margin-top:35px}.recorder{width:100%;height:250px;position:fixed;bottom:0;background:#2e2b4a;border-top:1px solid #000}.recordings{height:calc(100vh - 300px);border-right:none;padding:0 12px 20px;border-radius:10px 10px 0 0}.recorder__play-controls{padding:0 10%}.button-shape{padding:10px}.emptyState{padding-top:25px}.recorder__controls{padding:0 10%}.recordings__title{padding:20px 0 10px}#audioDuration{transform:translateX(-50%)}#recordingsList{height:100%}}
@media only screen and (max-width:1265px){main{height:auto;min-height:100vh}.container{width:min(1000px,calc(100% - 32px));grid-template-columns:none}}@media only screen and (max-width:840px){.container{width:calc(100% - 24px);margin-top:28px;margin-bottom:40px}.recorder{position:static;width:100%;height:auto;min-height:250px;border-top:0;border-radius:12px}.recordings{height:auto;padding:0 0 80px;border-radius:0}.recordings__title{padding:0 0 10px}#recordingsList{height:auto}.recorder__timer{height:82px;grid-template-rows:38px 40px}#micWaveform{height:38px}.recordings{order:2}.recorder{order:1}}
@media only screen and (max-width:840px){body{padding-bottom:106px}.logo-container{margin-top:24px}.container{margin-top:14px}.recorder{min-height:0;background:transparent;box-shadow:none}.recorder__timer{height:64px;grid-template-rows:38px 22px}.recorder__controls{--control-bar-height:72px;--control-bottom-gap:16px;top:calc(var(--visual-viewport-top,0px) + var(--visual-viewport-height,100vh) - var(--control-bar-height) - var(--control-bottom-gap));bottom:auto;gap:14px;min-width:0;width:calc(100% - 24px);padding:10px 12px}.recorder__controls .button-shape,.recorder__controls .big-button{width:52px;height:52px}}
@media only screen and (max-width:600px){.recordings__title{display:grid;grid-template-columns:auto auto 1fr;align-items:center;justify-content:start;column-gap:10px;row-gap:8px}.recordingsTitleLeft{display:contents}.recordingsTitleLeft>p{grid-column:1;grid-row:1}.recordingsTitleLeft>.recListPlay,.recordingsTitleLeft>.recListPause{grid-column:2;grid-row:1}.recListControlButtons{grid-column:1/-1;grid-row:2;justify-content:flex-start;gap:16px}.recListPlaybackSpeeds{grid-column:1/-1;grid-row:3;flex-wrap:wrap;gap:6px 14px}}
@media only screen and (max-width:840px){.recorder{height:auto}.recorder__controls{width:auto;min-width:min(360px,calc(100% - 24px))}}
@media only screen and (min-width:601px) and (max-width:840px){body{padding-bottom:190px}.recordings{padding-bottom:170px}.recorder__controls{--control-bottom-gap:88px}}