:root { color-scheme: dark; font-family: Georgia, 'Times New Roman', serif; background: #101b28; color: #f5eedf; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 12% 3%, #294057 0, #172738 30%, #101b28 70%); }
button, input { font: inherit; }
button { cursor: pointer; }
.layout { max-width: 1100px; margin: 0 auto; padding: 60px 36px 165px; }
.album { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 56px; align-items: end; margin-bottom: 68px; }
.cover-wrap { box-shadow: 0 28px 60px #060c14aa, 0 0 0 1px #f8f0dc20; aspect-ratio: 1; overflow: hidden; }
.cover { display: block; width: 100%; height: 100%; object-fit: cover; }
.eyebrow { font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .25em; color: #c8a973; }
h1 { font-size: clamp(56px, 8vw, 110px); line-height: .95; margin: 20px 0 18px; font-weight: 400; letter-spacing: -.055em; }
.album-copy p { margin: 0; color: #d4d0c8; font-size: 20px; }
.album-copy .count { margin-top: 32px; color: #9caaae; font: 13px Arial, sans-serif; }
.library-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #c8a97355; padding-bottom: 19px; }
h2 { margin: 0; font-size: 31px; font-weight: 400; }
.library-actions { display: flex; align-items: center; gap: 14px; }
.play-all { flex: none; padding: 11px 16px; border: 1px solid #e2c68f; border-radius: 4px; background: #e2c68f; color: #14212a; font: 700 12px Arial, sans-serif; letter-spacing: .08em; }
.play-all:hover:not(:disabled), .play-all:focus-visible { background: #f1d8a9; border-color: #f1d8a9; }
.play-all:disabled { opacity: .5; cursor: default; }
.play-all span { margin-right: 6px; font-size: 11px; }
.search-wrap input { width: min(240px, 43vw); padding: 11px 14px; color: #f5eedf; border: 1px solid #aeb9b644; border-radius: 4px; background: #0a162289; font: 14px Arial, sans-serif; outline-color: #c8a973; }
.search-wrap input::placeholder { color: #99a7ac; }
.track-list { margin: 0; padding: 0; list-style: none; }
.track { width: 100%; display: grid; grid-template-columns: 44px 1fr 24px; gap: 12px; align-items: center; text-align: left; background: transparent; color: #ece9e0; border: 0; border-bottom: 1px solid #ffffff13; padding: 17px 12px; font-size: 17px; }
.track:hover, .track:focus-visible { background: #ffffff0c; outline: none; }
.track.active { color: #e9c994; background: #d6b57613; }
.track-number { color: #98a4a5; font: 13px Arial, sans-serif; }
.track.active .track-number { color: #e9c994; }
.track-play { font: 13px Arial, sans-serif; opacity: 0; }
.track:hover .track-play, .track.active .track-play, .track:focus-visible .track-play { opacity: 1; }
.empty { color: #aab6b7; padding: 24px 12px; }
.player { position: fixed; z-index: 2; bottom: 0; left: 0; right: 0; min-height: 108px; display: grid; grid-template-columns: minmax(170px, 1fr) minmax(300px, 1.5fr) minmax(100px, 1fr); align-items: center; gap: 20px; padding: 14px 32px; background: #0b1620f5; border-top: 1px solid #c8a97354; box-shadow: 0 -10px 35px #070e1766; backdrop-filter: blur(12px); }
.now-playing { display: flex; gap: 12px; align-items: center; min-width: 0; }
.mini-cover { width: 56px; height: 56px; object-fit: cover; }
.now-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.now-copy strong { font-size: 14px; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.now-copy span { color: #9faeaf; font: 12px Arial, sans-serif; }
.playback { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.buttons { display: flex; align-items: center; gap: 19px; }
.buttons button { border: 0; color: #f3ead8; background: none; }
.buttons button:disabled { color: #6c7778; cursor: default; }
.icon-button { padding: 7px; font-size: 19px; }
.play-button { border-radius: 50% !important; width: 35px; height: 35px; background: #e2c68f !important; color: #13202b !important; font: 16px Arial, sans-serif; }
.play-button:disabled { background: #5f6a6b !important; }
.timeline { display: flex; align-items: center; gap: 12px; width: 100%; color: #9faeaf; font: 11px Arial, sans-serif; }
.timeline input { flex: 1; min-width: 0; }
input[type=range] { height: 4px; accent-color: #d8b977; cursor: pointer; }
.volume { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: #b7c2c0; }
.volume input { width: 110px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
@media (max-width: 650px) { .layout { padding: 28px 18px 190px; } .album { grid-template-columns: 1fr; gap: 25px; margin-bottom: 45px; } .cover-wrap { max-width: 280px; } h1 { margin-top: 12px; } .library-head { align-items: flex-start; flex-direction: column; } .library-actions { width: 100%; } .search-wrap { flex: 1; } .search-wrap input { width: 100%; } .player { grid-template-columns: 1fr; gap: 8px; padding: 10px 16px 16px; } .mini-cover { width: 42px; height: 42px; } .volume { display: none; } .track { font-size: 15px; } }