*{box-sizing:border-box;margin:0;padding:0}body{color:#fff;background:#080808;font-family:Arial,Helvetica,sans-serif}.app{background:#080808;width:100%;min-height:100vh;padding-bottom:44px}.loading{color:#bdbdbd;text-align:center;padding-top:80px}.hero{background:#080808;width:100%;height:465px;position:relative;overflow:hidden}.hero-banner{object-fit:cover;object-position:center 40%;width:100%;max-width:1500px;height:445px;display:block;position:absolute;top:0;left:50%;transform:translate(-50%);-webkit-mask-image:linear-gradient(#000 0% 86%,#000000d9 93%,#0000 100%);mask-image:linear-gradient(#000 0% 86%,#000000d9 93%,#0000 100%)}.hero:after{content:"";pointer-events:none;background:linear-gradient(#08080800 0%,#08080814 20%,#0808083d 42%,#0808088c 68%,#080808 100%);height:270px;position:absolute;bottom:0;left:0;right:0}.hero-inner{z-index:2;flex-direction:column;align-items:center;width:100%;max-width:1220px;margin:0 auto;padding:315px 24px 0;display:flex;position:relative}.hero-subtitle{color:#d6e1ff;letter-spacing:.19em;text-transform:uppercase;text-align:center;text-shadow:0 2px 14px #000000bf;margin-bottom:10px;font-size:15px;font-weight:600}.search{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#1c1c22eb;border:1px solid #78aaff33;border-radius:20px;width:100%;max-width:740px;padding:17px 20px;font-size:16px;transition:border-color .18s,box-shadow .18s,background .18s;box-shadow:0 14px 34px #00000073,0 0 18px #286eff14,inset 0 1px #ffffff0d}.search::placeholder{color:#aaa}.search:focus{background:#1e2026f5;border-color:#5499ffa6;outline:none;box-shadow:0 0 0 4px #5499ff21,0 16px 36px #00000075}.grid-wrapper{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}.grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:22px;display:grid}.track-card{background:#111;border:1px solid #ffffff0a;border-radius:14px;flex-direction:column;min-height:0;transition:transform .18s,background .18s,border-color .18s,box-shadow .18s;display:flex;overflow:hidden}.track-card:hover{background:#151515;border-color:#5a82ff2e;transform:translateY(-5px);box-shadow:0 14px 30px #00000073}.track-artwork{aspect-ratio:1;object-fit:contain;object-position:center;background:#111;border-radius:10px;width:calc(100% - 8px);margin:4px;transition:transform .2s,filter .2s;display:block}.track-card:hover .track-artwork{filter:brightness(1.04);transform:scale(1.015)}.card-content{padding:10px 14px}.artist{color:#fff;white-space:nowrap;text-overflow:ellipsis;margin-bottom:4px;font-size:18px;font-weight:700;line-height:1.15;overflow:hidden}.release-info{min-height:44px}.title{color:#eee;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-bottom:1px;font-size:15px;line-height:1.25;display:-webkit-box;overflow:hidden}.mix{color:#c2c2c2;white-space:nowrap;text-overflow:ellipsis;font-size:11px;font-style:italic;line-height:1.2;overflow:hidden}.card-bottom{justify-content:space-between;align-items:center;gap:12px;margin-top:0;display:flex}.year{color:#aaa;font-size:12px;line-height:1.1}.play-button{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #ffffff14;border-radius:10px;flex:none;justify-content:center;align-items:center;width:36px;height:32px;font-size:12px;line-height:1;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;display:flex}.play-button:hover{background:#3f6cff;border-color:#5d82ff;transform:scale(1.06);box-shadow:0 0 14px #3f6cff73}.play-button:active{transform:scale(.96)}.play-button:focus{outline:none;box-shadow:0 0 0 3px #3f6cff40,0 0 14px #3f6cff73}.modal-backdrop{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#000000c7;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.video-modal{background:#101010;border-radius:18px;width:100%;max-width:900px;padding:20px;position:relative;box-shadow:0 24px 80px #000000a6}.modal-close{color:#fff;cursor:pointer;background:#242424;border:none;border-radius:50%;width:34px;height:34px;font-size:24px;position:absolute;top:12px;right:14px}.modal-close:hover{background:#343434}.modal-track-info{margin-bottom:14px;padding-right:42px}.modal-track-info h2{margin-bottom:4px;font-size:22px}.modal-track-info p{color:#bdbdbd;font-size:14px;line-height:1.4}.modal-video{aspect-ratio:16/9;width:100%}.modal-video iframe{border:none;border-radius:12px;width:100%;height:100%}@media (width<=1200px){.grid{grid-template-columns:repeat(4,1fr)}}@media (width<=950px){.hero{height:400px}.hero-banner{height:355px}.hero:after{height:235px}.hero-inner{padding:280px 24px 0}.grid{grid-template-columns:repeat(3,1fr)}.track-artwork{aspect-ratio:auto;height:200px}}@media (width<=700px){.hero{height:355px}.hero-banner{height:310px}.hero:after{height:215px}.hero-inner{padding:240px 14px 0}.hero-subtitle{letter-spacing:.12em;margin-bottom:9px;font-size:11px;line-height:1.5}.search{border-radius:14px;max-width:100%;padding:14px 16px;font-size:14px}.grid-wrapper{padding:0 14px}.grid{grid-template-columns:repeat(2,1fr);gap:14px}.track-artwork{aspect-ratio:auto;height:160px}.card-content{padding:12px 14px 10px}.artist{font-size:15px}.release-info{min-height:44px}.title{font-size:14px}.mix,.year{font-size:11px}.play-button{width:36px;height:32px}.video-modal{padding:16px}}@media (width<=430px){.hero{height:330px}.hero-banner{height:285px}.hero-inner{padding-top:220px}.grid{grid-template-columns:1fr}.track-artwork{aspect-ratio:auto;height:245px}}.load-more-wrapper{justify-content:center;margin-top:34px;display:flex}.load-more-button{color:#fff;cursor:pointer;background:#ffffff14;border:1px solid #78aaff38;border-radius:999px;padding:13px 28px;font-size:14px;transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}.load-more-button:hover{background:#3f6cff;border-color:#5d82ff;transform:translateY(-1px);box-shadow:0 0 18px #3f6cff59}.load-more-button:disabled{opacity:.55;cursor:not-allowed;transform:none}