:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.search-bar{display:flex;justify-content:center;margin-bottom:2em}.search-bar input{width:70%;max-width:340px;padding:.7em 1em;border-radius:8px;border:1px solid #c7d2fe;font-size:1em;outline:none;box-shadow:0 2px 8px #646cff12;transition:border .2s,box-shadow .2s}.search-bar input:focus{border:1.5px solid #6366f1;box-shadow:0 4px 16px #646cff21}.music-item.empty{text-align:center;color:#64748b;background:#f1f5f9;box-shadow:none;border-radius:12px;padding:1.5em}.music-cover{width:50px;height:50px;border-radius:8px;object-fit:cover;margin-right:1em}.music-info{flex:1;display:flex;flex-direction:column}.music-artist{color:#64748b;margin-top:.2em;font-size:1em}@media (max-width: 600px){.music-app{max-width:100vw;padding:1rem .2rem;border-radius:0;box-shadow:none}.player-bar{left:0;right:0;transform:none;border-radius:0;padding:.7em 1em;font-size:.95em}.search-bar input{width:95%;max-width:none;font-size:.95em}.music-list-section h2{font-size:1.1em}.music-item{flex-direction:column;align-items:flex-start;gap:.5em;padding:1em .7em}}.player-bar{position:fixed;left:50%;bottom:32px;transform:translate(-50%);background:linear-gradient(90deg,#18181b 60%,#6366f1);color:#fff;border-radius:16px;box-shadow:0 4px 24px #646cff2e;padding:1em 2em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1em;opacity:0;z-index:10;min-width:320px;max-width:700px;animation:fadeInPlayerBar .7s cubic-bezier(.77,0,.175,1) forwards}.player-info-container{display:flex;align-items:center;gap:1em;margin-bottom:.5em}.player-cover{width:40px;height:40px;border-radius:8px;object-fit:cover}@keyframes fadeInPlayerBar{0%{opacity:0}to{opacity:1}}.player-info{font-size:1.1em;font-weight:500;letter-spacing:1px;width:100%;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-controls{display:flex;justify-content:center;gap:1em;width:100%}.player-btn{background:linear-gradient(90deg,#fbbf24 60%,#f87171);color:#18181b;border:none;border-radius:8px;padding:.5em 1.2em;font-size:1em;cursor:pointer;box-shadow:0 2px 8px #646cff17;transition:background .2s,transform .2s}.player-btn:disabled{background:#cbd5e1;color:#64748b;cursor:not-allowed}.player-btn.pause{background:linear-gradient(90deg,#6366f1 60%,#818cf8);color:#fff;box-shadow:0 2px 8px #f8717117}.player-btn.pause:hover{background:linear-gradient(90deg,#fbbf24 60%,#f87171)}.player-btn.play{background:linear-gradient(90deg,#22d3ee 60%,#6366f1);color:#fff}.player-btn.play:hover{background:linear-gradient(90deg,#60a5fa 60%,#34d399)}.music-item.playing{border:2px solid #6366f1;box-shadow:0 4px 16px #646cff2e;animation:pulsePlaying 1.2s infinite alternate}@keyframes pulsePlaying{0%{box-shadow:0 4px 16px #646cff2e}to{box-shadow:0 8px 32px #646cff47}}.music-app{width:66vw;min-width:320px;max-width:1100px;margin:40px auto;background:linear-gradient(135deg,#f8fafc 60%,#e0e7ff);border-radius:24px;box-shadow:0 8px 32px #3c3c781f;padding:2.5rem 2rem;font-family:Segoe UI,Avenir,Helvetica,Arial,sans-serif;display:block}body{display:flex;justify-content:center;align-items:flex-start;min-height:100vh;margin:0;background:#242424}.music-header{text-align:center;margin-bottom:2.5rem}.music-header h1{font-size:2.8em;font-weight:700;color:#6366f1;letter-spacing:2px;margin-bottom:.5em;animation:fadeInDown 1s cubic-bezier(.77,0,.175,1)}.music-header p{color:#64748b;font-size:1.2em;animation:fadeInUp 1.2s cubic-bezier(.77,0,.175,1)}.music-list-section h2{font-size:1.5em;color:#475569;margin-bottom:1em}.music-list{list-style:none;padding:0;margin:0}.music-item{display:flex;align-items:center;justify-content:space-between;background:#fff;border-radius:12px;box-shadow:0 2px 8px #646cff12;padding:1em 1.5em;margin-bottom:1em;transition:transform .2s,box-shadow .2s;animation:fadeInList .7s cubic-bezier(.77,0,.175,1)}.music-item:hover{transform:scale(1.03);box-shadow:0 4px 16px #646cff21}.music-title{font-weight:600;color:#6366f1;font-size:1.1em}.music-artist{color:#64748b;margin-left:1.2em;font-size:1em}.play-btn{background:linear-gradient(90deg,#6366f1 60%,#818cf8);color:#fff;border:none;border-radius:8px;padding:.5em 1.2em;font-size:1em;cursor:pointer;box-shadow:0 2px 8px #646cff17;transition:background .2s,transform .2s}.play-btn:hover{background:linear-gradient(90deg,#818cf8 60%,#6366f1);transform:scale(1.08)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInList{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}