.beat-drawer{display:flex;align-items:center;justify-content:center;position:relative;padding-left:8px;padding-right:8px;outline:none;width:100%;transition:opacity .3s ease,transform .3s ease}.beat-drawer:after{content:"";position:absolute;inset:-20px;background:radial-gradient(ellipse at center,rgba(0,0,0,.1) 0%,transparent 70%);pointer-events:none;z-index:-1}.beat-drawer .drawer-content{border:1px solid rgba(255,255,255,.15);border-radius:24px;box-shadow:0 25px 50px #00000080,0 0 0 1px #ffffff1a,inset 0 1px #ffffff26;overflow-y:auto;overflow-x:hidden;position:relative;transition:all .3s ease;width:100%;max-width:600px;height:100%;max-height:94vh;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch}@media(max-width:768px){.beat-drawer .drawer-content{height:100%;max-height:96vh}}.beat-drawer .drawer-content:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05) 0%,transparent 50%,rgba(0,0,0,.1) 100%);pointer-events:none;z-index:0}.beat-drawer .close-icon-btn{position:absolute!important;right:12px;top:12px;width:36px;height:36px;z-index:2!important;background:#ffffff1a!important;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);color:#fffc!important;transition:all .2s ease}.beat-drawer .close-icon-btn:hover{background:#fff3!important;color:#fff!important;transform:scale(1.1)}.beat-drawer .beat-drawer-header{display:flex;flex-direction:row;gap:16px;align-items:flex-end;padding:20px;position:relative;z-index:1}.beat-drawer .beat-drawer-header .beat-cover-art{width:120px;height:120px;border-radius:16px;box-shadow:0 8px 24px #0000004d;transition:transform .2s ease}.beat-drawer .beat-drawer-header .beat-cover-art:hover{transform:scale(1.05)}.beat-drawer .beat-drawer-header .info{display:flex;flex-direction:column;gap:8px;height:100%;flex:1}.beat-drawer .beat-drawer-header .info .meta-info{display:flex;flex-direction:row;gap:12px;align-items:center;flex-wrap:wrap}.beat-drawer .beat-drawer-header .info .meta-info .genre-chip{font-size:12px;color:#fff;font-weight:500;padding:4px 12px;border-radius:12px;box-shadow:0 2px 8px #0003}.beat-drawer .player{display:flex;flex-direction:row;align-items:center;gap:16px;margin:0 20px 20px;position:relative;z-index:1}.beat-drawer .player .play-btn{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:100px;box-shadow:0 4px 16px #0000004d;transition:all ease-in-out .3s;position:relative;z-index:10}.beat-drawer .player .play-btn:hover{transform:scale(1.05);box-shadow:0 6px 20px #0006}.beat-drawer .player .waveform{width:100%;flex:1}.beat-drawer .legal-agreement .summary,.beat-drawer .checkout-step .summary{padding:20px 0 8px}.beat-drawer .summary{display:flex;flex-direction:row;gap:12px;justify-content:space-between;align-items:center;padding:12px 20px}.beat-drawer .summary .icon-types{margin-left:4px}.beat-drawer .summary .total-price-container{display:flex;flex-direction:row;gap:12px;justify-content:flex-end;align-items:center;margin-left:auto}.beat-drawer .summary .total-price-container .total-price-label{font-size:14px;font-weight:400;opacity:.7}.beat-drawer .summary .total-price-container .total-price{font-weight:700;font-size:1.25rem}.beat-drawer .levels-row{display:flex;flex-direction:row;gap:12px;justify-content:flex-start;padding:0 20px 20px;position:relative;z-index:1}.beat-drawer .levels-row .level-name{width:100%;max-width:400px;z-index:1;text-transform:capitalize;font-size:12px;font-weight:600}.beat-drawer .levels-row .level-price{width:100%;max-width:600px;z-index:1;text-transform:capitalize;font-size:18px;font-weight:600}.beat-drawer .levels-row .level-type{width:100%;max-width:400px;z-index:1;text-transform:uppercase;font-size:10px;font-weight:400}.beat-drawer .actions-container{display:flex;flex-direction:row;justify-content:space-between;align-items:center;margin:20px;position:relative;z-index:1}.beat-drawer .actions-container .continue-btn{text-transform:capitalize;padding:12px 24px;height:44px;font-size:16px;border-radius:100px;font-weight:500;opacity:.8;transition:all ease-in-out .2s;color:#fff;border:none;cursor:pointer;box-shadow:0 1px 4px #0003}.beat-drawer .actions-container .continue-btn:hover{opacity:1;transform:translateY(-1px);box-shadow:0 4px 12px #1db95466}.beat-drawer .actions-container .continue-btn:disabled{border:1px solid rgba(255,255,255,.05);color:#ffffff4d;background-color:transparent;opacity:.4;cursor:not-allowed;pointer-events:none;box-shadow:none}.beat-drawer .actions-container .continue-btn:disabled:hover{background-color:transparent;box-shadow:none;transform:none}.beat-drawer .actions-container .cancel-btn{height:44px;text-transform:capitalize;border-radius:100px;color:var(--beat-palette-text-secondary);transition:all ease-in-out .3s;border-color:#fff3;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.beat-drawer .actions-container .cancel-btn:hover{border-color:#ffffff4d;background-color:#ffffff1a;transform:translateY(-1px)}.beat-drawer .beat-selected-container{display:flex;flex-direction:column;padding:20px 20px 0;position:relative;z-index:1}.beat-drawer .beat-selected-container .beat-selected{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}.beat-drawer .beat-selected-container .beat-selected .beat-cover-container{width:60px;height:60px;position:relative}.beat-drawer .beat-selected-container .beat-selected .beat-cover-art{object-fit:cover;border-radius:8px;width:100%;height:100%}.beat-drawer .beat-selected-container .beat-selected-price{margin-top:12px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}@media(max-width:768px){.beat-drawer .beat-drawer-header{padding:16px 16px 12px;gap:12px}.beat-drawer .beat-drawer-header .beat-cover-art{width:80px;height:80px}.beat-drawer .player{margin:0 16px 16px;gap:12px}.beat-drawer .player .play-btn{width:48px;height:48px}.beat-drawer .levels-row,.beat-drawer .actions-container{padding-left:16px;padding-right:16px}}@media(max-width:480px){.beat-drawer .beat-drawer-header{padding:12px 12px 8px;gap:8px}.beat-drawer .beat-drawer-header .beat-cover-art{width:60px;height:60px}.beat-drawer .player{margin:0 12px 12px;gap:8px}.beat-drawer .player .play-btn{width:44px;height:44px}.beat-drawer .levels-row,.beat-drawer .actions-container{padding-left:12px;padding-right:12px}}.beat-drawer .checkout-step .payment-methods .MuiButton-root{margin-bottom:8px;text-align:left;justify-content:flex-start;padding:16px;border-radius:12px;transition:all .2s ease}.beat-drawer .checkout-step .payment-methods .MuiButton-root:hover{transform:translateY(-1px);box-shadow:0 4px 12px #00000026}.beat-drawer .checkout-step .card-details .MuiTextField-root,.beat-drawer .checkout-step .card-details .MuiFormControl-root,.beat-drawer .checkout-step .billing-info .MuiTextField-root,.beat-drawer .checkout-step .billing-info .MuiFormControl-root{margin-bottom:16px}.beat-drawer .checkout-step .card-details .MuiTextField-root .MuiOutlinedInput-root,.beat-drawer .checkout-step .card-details .MuiFormControl-root .MuiOutlinedInput-root,.beat-drawer .checkout-step .billing-info .MuiTextField-root .MuiOutlinedInput-root,.beat-drawer .checkout-step .billing-info .MuiFormControl-root .MuiOutlinedInput-root{border-radius:12px;background-color:#ffffff0a;border:1px solid rgba(255,255,255,.08);transition:all .2s ease}.beat-drawer .checkout-step .card-details .MuiTextField-root .MuiOutlinedInput-root:hover,.beat-drawer .checkout-step .card-details .MuiFormControl-root .MuiOutlinedInput-root:hover,.beat-drawer .checkout-step .billing-info .MuiTextField-root .MuiOutlinedInput-root:hover,.beat-drawer .checkout-step .billing-info .MuiFormControl-root .MuiOutlinedInput-root:hover{border-color:#ffffff29;background-color:#ffffff0f}.beat-drawer .checkout-step .card-details .MuiTextField-root .MuiOutlinedInput-root.Mui-focused,.beat-drawer .checkout-step .card-details .MuiFormControl-root .MuiOutlinedInput-root.Mui-focused,.beat-drawer .checkout-step .billing-info .MuiTextField-root .MuiOutlinedInput-root.Mui-focused,.beat-drawer .checkout-step .billing-info .MuiFormControl-root .MuiOutlinedInput-root.Mui-focused{border-color:#ffffff4d;background-color:#ffffff14;box-shadow:0 0 0 3px #ffffff1a}.beat-drawer .checkout-step .card-details .MuiTextField-root .MuiInputLabel-root,.beat-drawer .checkout-step .card-details .MuiFormControl-root .MuiInputLabel-root,.beat-drawer .checkout-step .billing-info .MuiTextField-root .MuiInputLabel-root,.beat-drawer .checkout-step .billing-info .MuiFormControl-root .MuiInputLabel-root{color:#fff9;font-size:.875rem}.beat-drawer .checkout-step .card-details .MuiTextField-root .MuiOutlinedInput-input,.beat-drawer .checkout-step .card-details .MuiFormControl-root .MuiOutlinedInput-input,.beat-drawer .checkout-step .billing-info .MuiTextField-root .MuiOutlinedInput-input,.beat-drawer .checkout-step .billing-info .MuiFormControl-root .MuiOutlinedInput-input{color:#fff;font-size:.875rem;padding:12px 16px}.beat-drawer .checkout-step .terms-security .MuiCheckbox-root{color:#fff9}.beat-drawer .checkout-step .terms-security .MuiCheckbox-root.Mui-checked{color:#1db954}.beat-drawer .checkout-step .terms-security .MuiFormControlLabel-label{color:#fffc;font-size:.875rem;line-height:1.4}.beat-drawer .checkout-step .checkout-actions .MuiButton-root{border-radius:12px;text-transform:none;font-weight:500;padding:12px 24px;transition:all .2s ease}.beat-drawer .checkout-step .checkout-actions .MuiButton-root:hover{transform:translateY(-1px)}.beat-drawer .legal-agreement-box{background:linear-gradient(135deg,#1a1a1a,#2d2d2d)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:16px!important;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a!important;backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;color:#fff!important;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important;font-size:14px!important;line-height:1.6!important;letter-spacing:.01em!important}.beat-drawer .legal-agreement-box::-webkit-scrollbar{width:6px}.beat-drawer .legal-agreement-box::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.beat-drawer .legal-agreement-box::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.beat-drawer .legal-agreement-box::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.beat-drawer .legal-agreement-box h6{color:#fff!important;font-weight:700!important;font-size:18px!important;margin-bottom:16px!important;letter-spacing:-.01em!important}.beat-drawer .legal-agreement-box p{color:#ffffffe6!important;margin-bottom:12px!important;font-weight:400!important}.beat-drawer .legal-agreement-box ol{padding-left:24px!important;margin:16px 0!important}.beat-drawer .legal-agreement-box ol li{color:#ffffffd9!important;margin-bottom:12px!important;line-height:1.6!important}.beat-drawer .legal-agreement-box ol li strong{color:#fff!important;font-weight:600!important}.beat-drawer .legal-agreement-box ol li u{color:#ff6b6b!important;text-decoration:underline!important;text-decoration-color:#ff6b6b!important}.beat-drawer .legal-agreement-box ol li ul{margin-top:8px!important;padding-left:20px!important}.beat-drawer .legal-agreement-box ol li ul li{color:#fffc!important;margin-bottom:6px!important;font-size:13px!important}.beat-drawer .legal-agreement-box:before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}@media(max-width:640px){.beat-drawer .drawer-content{margin:0;border-radius:20px;max-width:100%}}.beat-drawer .checkout-step{display:flex;flex-direction:column;height:100%;overflow:hidden}.beat-drawer .checkout-step .beat-selected-container{flex-shrink:0;padding:20px 20px 0}.beat-drawer .checkout-step .checkout-form{flex:1;overflow-y:auto;padding:0 20px;margin:0}.beat-drawer .checkout-step .checkout-form::-webkit-scrollbar{width:6px}.beat-drawer .checkout-step .checkout-form::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.beat-drawer .checkout-step .checkout-form::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.beat-drawer .checkout-step .checkout-form::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.beat-drawer .checkout-step .actions-footer{flex-shrink:0;padding:20px;margin-top:auto}.beat-drawer .edit-profile-content{max-width:600px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.beat-drawer .edit-profile-content .edit-profile-header{flex-shrink:0;text-align:left;padding:8px 0 0}.beat-drawer .edit-profile-content .profile-content{flex:1;overflow-y:auto;padding:0 20px 12px;margin:0}.beat-drawer .edit-profile-content .profile-content::-webkit-scrollbar{width:6px}.beat-drawer .edit-profile-content .profile-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.beat-drawer .edit-profile-content .profile-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:3px}.beat-drawer .edit-profile-content .profile-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.beat-drawer .edit-profile-content .actions-container{flex-shrink:0;margin-top:auto}.beat-drawer .edit-profile-content .avatar-section{margin-bottom:24px}.beat-drawer .edit-profile-content .avatar-section .MuiAvatar-root{transition:transform .2s ease}.beat-drawer .edit-profile-content .avatar-section .MuiAvatar-root:hover{transform:scale(1.05)}.beat-drawer .edit-profile-content .profile-form .MuiTextField-root{margin-bottom:16px}@keyframes rotate-cover{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.layout .navbar.sidebar{position:fixed;left:20px;top:120px;width:64px;height:auto;min-height:auto;background-color:#28282833;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:100px;box-shadow:0 8px 32px #0000004d;border:1px solid rgba(255,255,255,.02);display:flex;flex-direction:column;justify-content:space-between;padding:8px;z-index:1000;transition:all ease-in-out .3s}@media(max-width:768px){.layout .navbar.sidebar{position:relative;left:auto;top:auto;width:100%;min-height:auto;padding:8px;flex-direction:row;justify-content:space-between;align-items:center}}.layout .navbar.sidebar:hover{box-shadow:0 12px 40px #0006}.layout .navbar.sidebar .sidebar-header{display:flex;justify-content:center;align-items:center;margin-bottom:auto}.layout .navbar.sidebar .sidebar-header h6{writing-mode:vertical-rl;text-orientation:mixed;color:#fff;font-size:1.25rem;letter-spacing:2px}@media(max-width:768px){.layout .navbar.sidebar .sidebar-header h6{font-size:1.1rem;letter-spacing:1.5px}}@media(max-width:480px){.layout .navbar.sidebar .sidebar-header h6{font-size:1rem;letter-spacing:1px}}.layout .navbar.sidebar .sidebar-nav{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:auto}@media(max-width:768px){.layout .navbar.sidebar .sidebar-nav{flex-direction:row;margin-bottom:0}}.layout .navbar.sidebar .sidebar-nav .nav-icon{width:48px;height:48px;color:#fff9;transition:all ease-in-out .2s;border-radius:100px;display:flex;align-items:center;justify-content:center}@media(max-width:768px){.layout .navbar.sidebar .sidebar-nav .nav-icon{width:44px;height:44px}}@media(max-width:480px){.layout .navbar.sidebar .sidebar-nav .nav-icon{width:40px;height:40px}}.layout .navbar.sidebar .sidebar-nav .nav-icon:hover{color:#ffffffe6;background-color:#ffffff0d}.layout .navbar.sidebar .sidebar-nav .nav-icon.active{color:#1db954;background-color:#1db95426;border:1px solid rgba(29,185,84,.3)}.layout .navbar.sidebar .sidebar-nav .nav-icon.active:hover{background-color:#1db95433;border-color:#1db95466}.layout .navbar.sidebar .sidebar-footer{display:flex;flex-direction:column;align-items:center;padding-top:40px;gap:12px;margin-top:auto}@media(max-width:768px){.layout .navbar.sidebar .sidebar-footer{flex-direction:row;padding-top:0;margin-top:0;gap:8px}}.layout .navbar.sidebar .sidebar-footer .cover-art-btn{width:48px;height:48px;padding:0;overflow:hidden;border:2px solid rgba(255,255,255,.1);transition:all ease-in-out .2s}@media(max-width:768px){.layout .navbar.sidebar .sidebar-footer .cover-art-btn{width:44px;height:44px}}@media(max-width:480px){.layout .navbar.sidebar .sidebar-footer .cover-art-btn{width:40px;height:40px}}.layout .navbar.sidebar .sidebar-footer .cover-art-btn:hover:not(.rotating){border-color:#ffffff4d;transform:scale(1.05)}.layout .navbar.sidebar .sidebar-footer .cover-art-btn.rotating{animation:rotate-cover 4s linear infinite}.layout .navbar.sidebar .sidebar-footer .cover-art-btn:hover.rotating{border-color:#ffffff4d}.layout .navbar.sidebar .sidebar-footer .profile-btn{padding:0}.layout .navbar.sidebar .sidebar-footer .profile-btn .avatar{width:40px;height:40px;border:2px solid rgba(255,255,255,.1);transition:all ease-in-out .2s}@media(max-width:768px){.layout .navbar.sidebar .sidebar-footer .profile-btn .avatar{width:36px;height:36px}}@media(max-width:480px){.layout .navbar.sidebar .sidebar-footer .profile-btn .avatar{width:32px;height:32px}}.layout .navbar.sidebar .sidebar-footer .profile-btn .avatar:hover{border-color:#ffffff4d;transform:scale(1.05)}.avatar-menu .avatar-menu-item:hover .icon{opacity:1}.avatar-menu .avatar-menu-item .icon{margin-right:12px;opacity:.6;transition:all ease-in-out .2s}.avatar-menu .avatar-menu-item p{font-size:14px}.audio-player{left:50%;bottom:32px;width:90%;max-width:1280px;background:#14141480;backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid rgba(255,255,255,.12);border-radius:100px;padding:12px 24px 12px 12px;z-index:1000;display:flex;align-items:center;gap:24px;box-shadow:0 8px 32px #0006,0 0 0 1px #ffffff0d,inset 0 1px #ffffff1a;transition:all .3s cubic-bezier(.4,0,.2,1);position:fixed;transform:translate(-50%)}.audio-player:hover{box-shadow:0 12px 40px #00000080,0 0 0 1px #ffffff14,inset 0 1px #ffffff26}.audio-player .beat-info{display:flex;align-items:center;gap:16px;min-width:180px}.audio-player .beat-info .cover-art{width:64px;height:64px;border-radius:100px;box-shadow:0 4px 16px #0000004d;transition:transform .2s ease}.audio-player .beat-info .cover-art:hover{transform:scale(1.05)}.audio-player .beat-info .beat-details{min-width:0}.audio-player .beat-info .beat-details .beat-name{color:#fff;font-weight:600;font-size:18px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:6px;text-shadow:0 1px 2px rgba(0,0,0,.3)}.audio-player .beat-info .beat-details .beat-meta{display:flex;align-items:center;gap:8px;margin-top:4px}.audio-player .beat-info .beat-details .beat-meta .genre-chip{background-color:var(--genre-color, #666);color:#fff;font-size:11px;height:20px;border-radius:10px;padding:0 8px;font-weight:500;box-shadow:0 2px 8px #0003}.audio-player .beat-info .beat-details .beat-meta .beat-stats{color:#ffffffb3;font-size:12px;font-weight:400}.audio-player .playback-controls{display:flex;align-items:center;gap:8px}.audio-player .playback-controls .control-btn{color:#fffc;transition:all .2s ease;border-radius:50%}.audio-player .playback-controls .control-btn:hover:not(.play-pause-btn){color:#fff;background-color:#ffffff1a;transform:scale(1.04)}.audio-player .playback-controls .control-btn:hover.play-pause-btn{color:#fff;transform:scale(1.05)}.audio-player .playback-controls .control-btn.play-pause-btn{color:#fff;width:56px;height:56px}.audio-player .playback-controls .control-btn.play-pause-btn .play-icon,.audio-player .playback-controls .control-btn.play-pause-btn .pause-icon{font-size:24px}.audio-player .playback-controls .control-btn .skip-icon{font-size:28px}.audio-player .progress-section{flex:1}.audio-player .progress-section .progress-container{width:100%;margin-top:4px;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;position:relative;margin-bottom:8px}.audio-player .progress-section .progress-container:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#ffffff1a,#ffffff0d);border-radius:3px}.audio-player .progress-section .progress-container .progress-bar{height:100%;border-radius:100px;transition:width .1s ease;position:relative}.audio-player .progress-section .progress-container .progress-bar:after{content:"";position:absolute;top:0;right:0;width:12px;height:100%;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.3) 50%,transparent 100%);border-radius:50%}.audio-player .progress-section .progress-time{color:#fff9;font-size:11px;font-weight:500;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.3)}@media(max-width:768px){.audio-player{bottom:16px;width:auto;max-width:95%;padding:16px 20px;gap:16px}.audio-player .beat-info{gap:12px;min-width:auto}.audio-player .beat-info .cover-art{width:48px;height:48px}.audio-player .beat-info .beat-details .beat-name{font-size:16px}.audio-player .beat-info .beat-details .beat-meta .genre-chip{font-size:10px;height:18px}.audio-player .beat-info .beat-details .beat-meta .beat-stats{font-size:11px}.audio-player .playback-controls{gap:6px}.audio-player .playback-controls .control-btn.play-pause-btn{width:48px;height:48px}.audio-player .playback-controls .control-btn.play-pause-btn .play-icon,.audio-player .playback-controls .control-btn.play-pause-btn .pause-icon{font-size:20px}.audio-player .playback-controls .control-btn .skip-icon{font-size:24px}.audio-player .progress-section{max-width:200px}.audio-player .progress-section .progress-container{height:4px}}@media(max-width:480px){.audio-player{bottom:12px;width:auto;max-width:98%;padding:14px 16px;gap:12px;border-radius:20px}.audio-player .beat-info .cover-art{width:40px;height:40px}.audio-player .beat-info .beat-details .beat-name{font-size:14px}.audio-player .playback-controls .control-btn.play-pause-btn{width:44px;height:44px}.audio-player .playback-controls .control-btn.play-pause-btn .play-icon,.audio-player .playback-controls .control-btn.play-pause-btn .pause-icon{font-size:18px}.audio-player .progress-section{max-width:150px}}@keyframes slideUpFade{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.audio-player{animation:slideUpFade .4s cubic-bezier(.4,0,.2,1)}@media(prefers-color-scheme:light){.audio-player{background:#ffffffd9;border:1px solid rgba(0,0,0,.1);box-shadow:0 8px 32px #0000001a,0 0 0 1px #0000000d,inset 0 1px #fffc}.audio-player .beat-info .beat-details .beat-name{color:#1a1a1a;text-shadow:0 1px 2px rgba(255,255,255,.5)}.audio-player .beat-info .beat-details .beat-meta .beat-stats{color:#0009}.audio-player .playback-controls .control-btn{color:#000000b3}.audio-player .playback-controls .control-btn:hover{color:#000;background-color:#0000001a}.audio-player .progress-section .progress-time{color:#00000080;text-shadow:0 1px 2px rgba(255,255,255,.5)}}@keyframes fadeInSlide{0%{opacity:0;transform:translate(12px)}to{opacity:1;transform:translate(0)}}.beat-row{display:flex;align-items:center;gap:12px;padding:16px;transition:all ease-in-out .2s ease;background-color:transparent;border-radius:100px;cursor:pointer}.beat-row:hover{background-color:var(--beat-palette-background-paper)}.beat-row:hover .beat-row-actions{animation:fadeInSlide .5s ease-out forwards}.beat-row .cover-art{height:80px;width:80px;object-fit:cover;border-radius:100px;flex-shrink:0}.beat-row .info{display:flex;width:100%;flex-direction:column;max-width:124px;min-width:0}.beat-row .info .beat-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.beat-row .info .meta-info{display:flex;flex-direction:row;align-items:center;gap:6px;padding-top:4px}.beat-row .info .meta-info .chip{font-size:10px}.beat-row .genre-chip{font-size:12px;font-weight:500;color:#fff;padding:2px 8px;border-radius:16px;display:inline-block;margin-top:4px;height:60px;width:60px}.beat-row .beat-meta{font-size:14px;color:var(--mui-palette-text-secondary)}.beat-row .beat-row-actions{opacity:0;transform:translate(12px);display:flex;align-items:center;gap:8px}.beat-row .beat-row-actions .check-icon{opacity:1;font-size:28px;margin-top:5px}.beat-row .beat-row-actions .download-icon{opacity:.4;font-size:28px;transition:all ease-in-out .3s;margin-top:5px}.beat-row .beat-row-actions .download-icon:hover{opacity:1}.beat-row .beat-row-actions .play-btn{background-color:#ffc300;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:100px;box-shadow:1px 4px 4px #0003;transition:all ease-in-out .3s;position:relative;z-index:10}.beat-row .beat-row-actions .play-btn:hover{background-color:#ffdb29}.beat-row .waveform{flex-grow:1;min-width:0}@keyframes slideUpFadeIn{0%{opacity:0;transform:translate(0)}to{opacity:1;transform:translateY(-20px)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUpFadeInWithMargin{0%{transform:translate(0);margin-top:0}to{transform:translateY(-24px)}}.beat-card{border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:left;transition:all ease-in-out .3s;position:relative}@media(max-width:440px){.beat-card{align-items:center}}@media(min-width:441px){.beat-card:hover .cover-container .play-btn,.beat-card.playing .cover-container .play-btn,.beat-card.touched .cover-container .play-btn{animation:slideUpFadeIn .4s ease-out forwards}}.beat-card:hover .cover-container .cover-art .cover-art-name,.beat-card.playing .cover-container .cover-art .cover-art-name,.beat-card.touched .cover-container .cover-art .cover-art-name{animation:slideUpFadeInWithMargin .4s ease-out forwards}.beat-card:hover .extra .visibility-stuff,.beat-card.playing .extra .visibility-stuff,.beat-card.touched .extra .visibility-stuff{animation:fadeIn .4s ease-out forwards}.beat-card:hover{background-color:var(--beat-palette-background-paper)}.beat-card .cover-container{width:100%;position:relative;overflow:hidden}@media(max-width:440px){.beat-card .cover-container{position:relative}}@media(max-width:440px){.beat-card .cover-container{display:flex;justify-content:center}}.beat-card .cover-container .cover-art{width:100%;border-radius:8px;object-fit:cover}.beat-card .cover-container .cover-art .cover-art-name{margin-top:0;opacity:1;transform:translate(0);transition:opacity .4s ease-out,transform .4s ease-out,margin-top .4s ease-out}.beat-card .cover-container .play-btn{background-color:#ffc300;width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:100px;position:absolute;bottom:0;right:12px;z-index:10;opacity:0;box-shadow:1px 4px 4px #0003;transition:background-color ease-in-out .3s,opacity .3s ease-in-out;cursor:pointer}@media(max-width:440px){.beat-card .cover-container .play-btn{opacity:0;bottom:12px}.beat-card.touched .beat-card .cover-container .play-btn,.beat-card.playing .beat-card .cover-container .play-btn{opacity:1}}.beat-card .cover-container .play-btn:hover{background-color:#ffdb29}.beat-card .info{text-align:left;padding-top:8px}@media(max-width:440px){.beat-card .info{text-align:center;display:flex;flex-direction:column;align-items:center}}.beat-card .info .extra{display:flex;align-items:center;gap:8px}@media(max-width:440px){.beat-card .info .extra{justify-content:center}}.beat-card .info .extra .visibility-stuff{display:flex;padding-top:5px;opacity:0;position:absolute;bottom:8px;right:8px}.beat-card .info .extra .visibility-stuff .download-icon{opacity:.5;transition:all ease-in-out .3s;font-size:28px;cursor:pointer}@media(max-width:440px){.beat-card .info .extra .visibility-stuff .download-icon{opacity:.7;font-size:24px}}.beat-card .info .extra .visibility-stuff .download-icon:hover{opacity:1}.beats-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:4px}.beats-header .sort-toggle .sort-btn{text-transform:capitalize;border-radius:100px;color:var(--beat-palette-text-primary);padding:8px 12px}.beats-header .sort-toggle .sort-btn:hover,.beats-header .sort-toggle .sort-btn.menu-open{background-color:rgba(var(--beat-palette-action-activeChannel)/var(--beat-palette-action-hoverOpacity))}.beats-header .sort-toggle .sort-btn .sort-arrow{opacity:.7;margin-top:-2px}.beats-header .view-toggle .view-btn{color:var(--beat-palette-text-primary)}@media(max-width:768px){.beats-header .view-toggle{display:none}}.beats-container{padding:8px;border-radius:20px}.beats-container .chip{color:var(--beat-palette-common-white);font-size:12px}