:root{--text:#6b6375;--text-h:#08060d;--bg:#fff;--border:#e5e4e7;--code-bg:#f4f3ec;--accent:#aa3bff;--accent-bg:#aa3bff1a;--accent-border:#aa3bff80;--social-bg:#f4f3ec80;--shadow:#0000001a 0 10px 15px -3px, #0000000d 0 4px 6px -2px;--sans:system-ui, "Segoe UI", Roboto, sans-serif;--heading:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;font:18px/145% var(--sans);letter-spacing:.18px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}@media (width<=1024px){:root{font-size:16px}}@media (prefers-color-scheme:dark){:root{--text:#9ca3af;--text-h:#f3f4f6;--bg:#16171d;--border:#2e303a;--code-bg:#1f2028;--accent:#c084fc;--accent-bg:#c084fc26;--accent-border:#c084fc80;--social-bg:#2f303a80;--shadow:#0006 0 10px 15px -3px, #00000040 0 4px 6px -2px}#social .button-icon{filter:invert()brightness(2)}}#root{text-align:center;border-inline:1px solid var(--border);box-sizing:border-box;flex-direction:column;width:1126px;max-width:100%;min-height:100svh;margin:0 auto;display:flex}body{margin:0}h1,h2{font-family:var(--heading);color:var(--text-h);font-weight:500}h1{letter-spacing:-1.68px;margin:32px 0;font-size:56px}@media (width<=1024px){h1{margin:20px 0;font-size:36px}}h2{letter-spacing:-.24px;margin:0 0 8px;font-size:24px;line-height:118%}@media (width<=1024px){h2{font-size:20px}}p{margin:0}code,.counter{font-family:var(--mono);color:var(--text-h);border-radius:4px;display:inline-flex}code{background:var(--code-bg);padding:4px 8px;font-size:15px;line-height:135%}main{padding-top:80px;padding-bottom:110px}.card{background:var(--color-object);height:90px;color:var(--color-object-text-primary);cursor:pointer;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;padding:16px;transition:background .15s;display:flex}.card:hover{background:var(--color-object-hover)}.card-content{width:100%;height:100%}.artist-card{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.artist-card h3{margin:0;font-size:18px;font-weight:600}.album-card-container{justify-content:space-between;align-items:center;height:100%;display:flex}.album-card-info{min-width:0}.album-card-info h3{margin:0 0 6px;font-size:18px;font-weight:600}.album-card-info p{margin:4px 0}.album-card-cover{aspect-ratio:1;flex-shrink:0;height:100%}.album-card-cover .album-cover,.album-card-cover .album-cover-placeholder{object-fit:cover;background:var(--color-album-placeholder);border-radius:6px;width:100%;height:100%}.song{align-items:center;width:100%;min-width:0;height:100%;display:flex}.song-current{outline:6px solid var(--color-current-song);box-sizing:border-box;border-radius:99px;align-items:center;width:100%;display:flex}.song-current:hover{background:var(--color-current-song)}.song-album-cover{flex-shrink:0;min-width:50px;height:100%}.song-album-cover img,.song-album-cover-placeholder{object-fit:cover;border-radius:4px;width:100%;height:100%;display:block}.song-album-cover-placeholder{background:var(--color-album-placeholder)}.song-info{text-align:center;flex:1;min-width:0;overflow:hidden}.song-info h3,.song-info p{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.song-info p{margin-top:3px}.song-artist-link,.song-album-link{cursor:pointer;transition:color .15s}.song-artist-link:hover,.song-album-link:hover{color:var(--color-text-hover)}.song-settings{flex-shrink:0;margin-left:auto;position:relative}.song-settings-button{width:36px;height:36px;color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:20px;display:flex}.song-settings-button:hover{background:var(--color-object)}.song-artist-link,.song-album-link{text-overflow:ellipsis;white-space:nowrap;cursor:pointer;width:fit-content;max-width:100%;margin:0;transition:color .15s;overflow:hidden}.song-artist-album{flex-direction:column;align-items:center;display:flex}.show-more-button{background-color:var(--color-text-secondary);color:var(--color-text-primary);cursor:pointer;border:none;border-radius:5px;padding:10px 20px}.show-more-button:hover{background-color:var(--color-text-hover)}.album-page-header{text-align:center;flex-direction:column;align-items:center;margin-bottom:40px;display:flex}.album-page-header p{color:var(--color-text-secondary);margin:4px 0}.album-artist-link{color:inherit;cursor:pointer;text-decoration:underline}.album-artist-link:hover{opacity:.7}.album-page-header{justify-content:center;align-items:center;gap:24px;margin-bottom:30px;display:flex}.album-page-info{text-align:center;min-width:0}.album-page-info h1{margin:0 0 10px}.album-page-info p{margin:6px 0}.album-cover-container{width:320px;height:320px;margin-bottom:25px}.album-cover,.album-cover-placeholder{object-fit:cover;border-radius:8px;width:100%;height:100%}.album-cover-placeholder{background-color:var(--color-album-placeholder)}.content-page{padding:24px;position:relative}.content-back{color:#fff;cursor:pointer;z-index:1000;background:#1c1c1f;border:1px solid #ffffff1f;border-radius:50%;justify-content:center;align-items:center;width:55px;height:55px;margin-left:auto;font-size:14px;font-weight:600;transition:background .2s,transform .2s,border-color .2s,box-shadow .2s;display:flex;position:sticky;top:100px;box-shadow:0 4px 12px #0000004d,inset 0 1px #ffffff0d}.content-back:hover{background:#29292d;border-color:#fff3;transform:translateY(-2px);box-shadow:0 6px 16px #0006,inset 0 1px #ffffff0f}.content-back:active{background:#151517;transform:scale(.94)}.artist-page-header{margin-bottom:30px}.artist-page-header h1{color:var(--color-text-primary);margin:0;font-size:32px}.artist-albums{flex-direction:column;gap:12px;display:flex}.home{flex-direction:column;gap:5px;display:flex}.no-recent-albums{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:200px;display:flex}main{padding:100px 24px 110px}.player{box-sizing:border-box;background:var(--color-primary);height:90px;color:var(--color-text-primary);border-top:1px solid var(--color-secondary);z-index:1200;align-items:center;gap:16px;padding:8px 24px;display:flex;position:fixed;bottom:0;left:0;right:0}.player-info{flex:0 220px;width:220px;min-width:0}.player-info h3{text-overflow:ellipsis;white-space:nowrap;margin:0 0 4px;overflow:hidden}.player-info p{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;margin:2px 0;overflow:hidden}.player audio{flex:auto;min-width:0}.player-album-cover{flex:0 0 70px;width:70px;height:70px}.player-album-cover .album-cover,.player-album-cover .album-cover-placeholder{object-fit:cover;border-radius:4px;width:100%;height:100%}.player-album-cover .album-cover-placeholder{background:var(--color-album-placeholder)}.queue-settings-container{flex:0 0 36px;width:36px;height:36px}.queue-button{width:36px;height:36px;color:var(--color-text-primary);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:0;font-size:20px;display:flex}.queue-button:hover{background:var(--color-secondary)}.queue-list{flex-direction:column;gap:10px;display:flex}.queue-item{background:var(--color-object);border-radius:10px;align-items:center;gap:12px;height:50px;padding:12px 16px;display:flex}.queue-song-info{flex:1;min-width:0}.queue-song-title{text-overflow:ellipsis;white-space:nowrap;font-size:16px;overflow:hidden}.queue-song-artist{color:var(--color-text-secondary);text-overflow:ellipsis;white-space:nowrap;margin-top:4px;overflow:hidden}.queue-remove-button{background:var(--color-text-hover);color:var(--color-text-primary);cursor:pointer;border:none;border-radius:6px;flex-shrink:0;padding:8px 12px}.queue-remove-button:hover{background:var(--color-text-secondary)}.queue-empty{color:var(--color-text-secondary);text-align:center}.queue-song-cover,.queue-song-cover-placeholder{aspect-ratio:1;object-fit:cover;border-radius:4px;flex-shrink:0;height:90%}.menu-overlay{z-index:2000;background:#000000a6;justify-content:flex-end;display:flex;position:fixed;inset:0}.menu-panel{box-sizing:border-box;background:var(--color-primary);width:400px;max-width:100%;height:100vh;color:var(--color-text-primary);padding:24px;overflow-y:auto;transform:translate(100%)}.menu-panel.open{animation:.3s cubic-bezier(.22,1,.36,1) forwards menu-panel-in}.menu-panel.closing{animation:.25s ease-in forwards menu-panel-out}@keyframes menu-panel-in{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes menu-panel-out{0%{transform:translate(0)}to{transform:translate(100%)}}.menu-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.menu-header h2{margin:0;font-size:24px}.menu-close-button{background:var(--color-secondary);width:36px;height:36px;color:var(--color-text-primary);cursor:pointer;border:none;border-radius:50%;font-size:24px;line-height:1}.menu-close-button:hover{background:var(--color-text-secondary)}.header{border-bottom:1px solid var(--color-secondary);background:var(--color-primary);z-index:1200;box-sizing:border-box;align-items:center;gap:24px;padding:1rem 2rem;display:flex;position:fixed;top:0;left:0;right:0}.header h1{white-space:nowrap;margin:0;font-size:24px}.search-bar{background:var(--color-secondary);min-width:0;color:var(--color-text-primary);box-sizing:border-box;border:none;border-radius:20px;outline:none;flex:1;padding:10px 14px;font-size:15px}.search-bar::placeholder{color:var(--color-text-secondary)}.search-bar:focus{background:var(--color-text-hover)}.side-menu-container{flex-shrink:0;align-items:center;display:flex}.menu-button{background:var(--color-secondary);width:44px;height:44px;color:var(--color-text-primary);cursor:pointer;z-index:1000;border:none;border-radius:8px;font-size:22px;top:20px;right:20px}.menu-button:hover{background:var(--color-text-hover)}.menu-item{color:#fff;text-align:left;cursor:pointer;background:#282828;border:none;border-radius:8px;width:100%;padding:14px 16px;font-size:16px;transition:background .15s,transform .15s}.button-container{flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:calc(100% - 70px);display:flex}.menu-item{background:var(--color-object);width:100%;color:var(--color-text-primary);text-align:left;cursor:pointer;border:none;border-radius:8px;padding:14px 16px;font-size:16px;transition:background .15s,transform .15s}.menu-item:hover{background:var(--color-object-hover)}.menu-item:active{transform:scale(.98)}.login-page{box-sizing:border-box;background:#444;justify-content:center;align-items:center;min-height:100vh;padding:20px;display:flex}.login-form{box-sizing:border-box;background:var(--color-primary);border:1px solid var(--color-secondary);border-radius:14px;width:100%;max-width:400px;padding:40px;box-shadow:0 10px 30px #0006}.login-header{text-align:center;margin-bottom:30px}.login-header h1{color:var(--color-text-primary);margin:0;font-size:28px;font-weight:600}.login-header p{color:var(--color-text-secondary);margin:8px 0 0;font-size:14px}.login-form h2{color:var(--color-text-primary);margin:0 0 20px;font-size:22px}.login-field{flex-direction:column;margin-bottom:18px;display:flex}.login-field label{color:var(--color-text-secondary);margin-bottom:7px;font-size:14px;font-weight:500}.login-field input{box-sizing:border-box;background:var(--color-secondary);width:100%;color:var(--color-text-primary);border:1px solid var(--color-text-secondary);border-radius:8px;outline:none;padding:12px 14px;font-size:15px;transition:border-color .2s,background .2s}.login-field input::placeholder{color:var(--color-text-secondary)}.login-field input:focus{border-color:var(--color-login);background:var(--color-secondary)}.login-error{color:var(--color-alert-text);background:var(--color-alert);border:1px solid var(--color-alert-accent);border-radius:7px;margin:5px 0 18px;padding:10px 12px;font-size:14px}.login-button{background:var(--color-login);width:100%;color:var(--color-text-primary);cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:15px;font-weight:600;transition:background .2s,transform .1s}.login-button:hover:not(:disabled){background:var(--color-login-hover)}.login-button:active:not(:disabled){transform:translateY(1px)}.login-button:disabled{opacity:.6;cursor:not-allowed}@media (width<=480px){.login-form{padding:30px 24px}.login-header h1{font-size:24px}}.login-remember{margin:12px 0}.login-remember label{cursor:pointer;align-items:center;gap:8px;display:flex}.login-remember input{cursor:pointer}.password-input-wrapper{width:100%;position:relative}.password-input-wrapper input{box-sizing:border-box;width:100%;padding-right:60px}.password-toggle{cursor:pointer;color:var(--color-text-secondary);background:0 0;border:none;padding:4px;font-size:14px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.password-toggle:hover{color:var(--color-text-primary)}.register-button{background:var(--color-login);width:100%;color:var(--color-text-primary);cursor:pointer;border:none;border-radius:8px;padding:12px;font-size:15px;font-weight:600;transition:background .2s,transform .1s}.register-button:hover:not(:disabled){background:var(--color-login-hover)}.register-button:active:not(:disabled){transform:translateY(1px)}.register-button:disabled{opacity:.6;cursor:not-allowed}.register-page-button{background-color:var(--color-text-secondary);width:100%;color:var(--color-object);cursor:pointer;border:none;border-radius:8px;margin-top:10px;padding:12px 16px;font-size:15px;font-weight:600;transition:background-color .2s,color .2s,transform .1s}.register-page-button:hover{background-color:var(--color-text-primary)}.register-page-button:active{transform:scale(.98)}.register-page-button:focus-visible{outline:2px solid var(--color-text-primary);outline-offset:2px}.register-error{color:var(--color-alert-text);background:var(--color-alert);border:1px solid #5a2929;border-radius:7px;margin:5px 0 18px;padding:10px 12px;font-size:14px}.register-success{color:var(--color-alert-text);background:#0da000;border:1px solid #08350a;border-radius:7px;margin:5px 0 18px;padding:10px 12px;font-size:14px}.notification{z-index:9999;background:var(--color-notification);color:var(--color-notification-text);border-radius:10px;padding:12px 20px;font-size:14px;animation:3s ease-in-out notification-in-out;position:fixed;top:24px;left:50%}.alert{z-index:9999;background:var(--color-alert);color:var(--color-alert-text);border-radius:10px;padding:12px 20px;font-size:14px;animation:3s ease-in-out notification-in-out;position:fixed;top:24px;left:50%}@keyframes notification-in-out{0%{opacity:0;transform:translate(-50%)translateY(-10px)}10%{opacity:1;transform:translate(-50%)translateY(0)}90%{opacity:1;transform:translate(-50%)translateY(0)}to{opacity:0;transform:translate(-50%)translateY(-10px)}}
