* { margin: 0; padding: 0; box-sizing: border-box; } body { background: #000; display: flex; justify-content: center; align-items: center; min-height: 100vh; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* Main widget container */ .widget-container { position: relative; display: flex; width: 100%; max-width: 650px; aspect-ratio: auto; height: 200px; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.95); margin: 20px; } /* Blurred background layer (z-index: 0) */ .background-blur { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; } .background-image { width: 100%; height: 100%; object-fit: cover; filter: blur(40px) brightness(0.6); } /* Dark overlay (z-index: 1) */ .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1; pointer-events: none; } /* Content layer (z-index: 2) */ .widget-content { position: relative; display: flex; gap: 24px; padding: 20px; z-index: 2; width: 100%; height: 100%; align-items: center; } /* Album art box (left) */ .album-art-box { flex-shrink: 0; width: 140px; height: 140px; border-radius: 10px; overflow: hidden; background: rgba(60, 60, 60, 0.5); display: flex; justify-content: center; align-items: center; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); } .album-art { width: 100%; height: 100%; object-fit: cover; } /* Song info box (right) */ .song-info { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 0 12px; } /* Song title */ .song-title { font-size: 30px; font-weight: 700; color: #ffffff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.5px; line-height: 1.1; } /* Song artist */ .song-artist { font-size: 22px; font-weight: 500; color: #ffffff; text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.3px; line-height: 1.1; opacity: 1; } /* Smooth fade animation for updates */ @keyframes fadeIn { from { opacity: 0.5; } to { opacity: 1; } } .song-title.updating, .song-artist.updating { animation: fadeIn 0.4s ease-in-out; }