*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0a0a0a;--card-bg: rgba(20, 20, 20, .85);--card-border: rgba(255, 255, 255, .08);--text: #e4e4e7;--text-secondary: #a1a1aa;--text-muted: #71717a;--accent: #6366f1}html,body{height:100%;overflow:hidden}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#000;color:var(--text);-webkit-font-smoothing:antialiased}#root{height:100%}.demo-page{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.demo-bg{position:fixed;top:-20px;right:-20px;bottom:-20px;left:-20px;background-size:cover;background-position:center;background-repeat:no-repeat;filter:blur(18px) brightness(.75);z-index:0}.demo-card{position:relative;z-index:1;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;margin:20px;padding:32px;background:var(--card-bg);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);border:1px solid var(--card-border);border-radius:20px;box-shadow:0 25px 50px #00000080}.demo-card::-webkit-scrollbar{width:4px}.demo-card::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:2px}.demo-header{display:flex;gap:20px;margin-bottom:28px}.demo-artwork{width:140px;height:140px;border-radius:12px;object-fit:cover;flex-shrink:0;box-shadow:0 8px 24px #0006}.demo-info{display:flex;flex-direction:column;justify-content:center;min-width:0}.demo-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}.demo-title{font-size:24px;font-weight:700;line-height:1.2;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis}.demo-publisher{font-size:14px;color:var(--text-secondary);margin-bottom:8px}.demo-description{font-size:13px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}.demo-meta{font-size:12px;color:var(--text-muted)}.player{padding:20px 0;border-top:1px solid var(--card-border);border-bottom:1px solid var(--card-border);margin-bottom:16px}.player-track-info{text-align:center;margin-bottom:16px}.player-track-title{display:block;font-size:15px;font-weight:600;margin-bottom:2px}.player-track-artist{display:block;font-size:13px;color:var(--text-secondary)}.player-controls{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:16px}.player-btn{background:none;border:none;color:var(--text);cursor:pointer;padding:8px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:opacity .15s}.player-btn:hover:not(:disabled){opacity:.8}.player-btn:disabled{opacity:.3;cursor:default}.player-btn-sm{opacity:.7}.player-btn-play{width:48px;height:48px;border-radius:50%;color:#fff;transition:transform .1s,opacity .15s}.player-btn-play:hover{transform:scale(1.05)}.player-btn-play:active{transform:scale(.97)}.player-progress{display:flex;align-items:center;gap:10px}.player-time{font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:35px;text-align:center}.progress-bar{flex:1;height:4px;background:#ffffff1a;border-radius:2px;cursor:pointer;position:relative}.progress-bar:hover{height:6px}.progress-fill{height:100%;border-radius:2px;transition:width .1s linear}.player-volume{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:12px}.volume-slider{width:100px;height:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff26;border-radius:2px;outline:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);cursor:pointer}.volume-slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--text);cursor:pointer;border:none}.tracklist{display:flex;flex-direction:column}.tracklist-item{display:flex;align-items:center;gap:14px;padding:10px 12px;border-radius:8px;cursor:pointer;transition:background .15s}.tracklist-item:hover{background:#ffffff0f}.tracklist-item-active{background:#ffffff0a}.tracklist-num{width:24px;text-align:center;font-size:14px;color:var(--text-muted);flex-shrink:0}.tracklist-info{flex:1;min-width:0}.tracklist-title{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tracklist-artist{display:block;font-size:12px;color:var(--text-muted)}.tracklist-duration{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0}.playing-indicator{display:flex;align-items:flex-end;gap:2px;height:14px;justify-content:center}.playing-indicator span{width:3px;background:currentColor;border-radius:1px;animation:playing-bar .8s ease-in-out infinite}.playing-indicator span:nth-child(1){height:6px;animation-delay:0s}.playing-indicator span:nth-child(2){height:10px;animation-delay:.2s}.playing-indicator span:nth-child(3){height:4px;animation-delay:.4s}@keyframes playing-bar{0%,to{transform:scaleY(.4)}50%{transform:scaleY(1)}}.demo-footer{text-align:center;padding-top:16px;font-size:12px;color:var(--text-muted)}.demo-footer a{color:var(--text-secondary);text-decoration:none;font-weight:500}.demo-footer a:hover{color:var(--text)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:16px;color:var(--text-secondary)}.loading-spinner{width:32px;height:32px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.not-found{display:flex;align-items:center;justify-content:center;height:100%;background:var(--bg)}.not-found-content{text-align:center}.not-found-content h1{font-size:80px;font-weight:700;color:var(--text-muted);line-height:1;margin-bottom:12px}.not-found-content p{font-size:16px;color:var(--text-secondary);margin-bottom:24px}.not-found-link{display:inline-block;padding:10px 24px;background:var(--accent);color:#fff;border-radius:8px;text-decoration:none;font-weight:500;font-size:14px;transition:opacity .15s}.not-found-link:hover{opacity:.9}@media(max-width:600px){.demo-card{margin:0;border-radius:0;max-height:100vh;height:100%;padding:20px}.demo-header{flex-direction:column;align-items:center;text-align:center;gap:16px}.demo-artwork{width:180px;height:180px}.demo-title{font-size:20px}.demo-description{-webkit-line-clamp:3}}