@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ly-bg:#07101d; --ly-panel:#0c1828; --ly-line:rgba(255,255,255,.09); --ly-text:#f5f8ff; --ly-muted:#91a0b6; --ly-cyan:#50dfdb; --ly-blue:#5677ff; }
* { box-sizing:border-box; }
html { height:auto!important; min-height:100%; scroll-behavior:smooth; overflow-y:auto; }
body { height:auto!important; min-height:100vh; margin:0; overflow-x:hidden; overflow-y:visible; background:var(--ly-bg); color:var(--ly-text); font-family:'Manrope',sans-serif; }
.lyrics-page { flex:none!important; width:min(1440px,100%); margin:0 auto; padding:28px clamp(18px,4vw,64px) 90px; overflow:visible; }
.lyrics-hero { min-height:470px; position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; padding:clamp(38px,6vw,84px); border:1px solid var(--ly-line); border-radius:34px; overflow:hidden; background:radial-gradient(circle at 80% 30%,rgba(80,223,219,.12),transparent 30%),linear-gradient(135deg,#101d31,#091321 62%,#11182a); box-shadow:0 30px 80px rgba(0,0,0,.32); }
.lyrics-hero::after { content:""; position:absolute; inset:0; opacity:.22; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:42px 42px; mask-image:linear-gradient(to right,transparent,#000); }
.lyrics-hero__content { position:relative; z-index:2; max-width:760px; }
.lyrics-eyebrow,.section-kicker { color:var(--ly-cyan); text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:800; }
.lyrics-hero h1 { margin:18px 0; font:700 clamp(44px,6vw,86px)/.98 'Space Grotesk',sans-serif; letter-spacing:-.055em; }
.lyrics-hero h1 span { color:transparent; -webkit-text-stroke:1px rgba(255,255,255,.55); }
.lyrics-hero p { max-width:640px; color:#aeb9ca; font-size:clamp(16px,1.45vw,20px); line-height:1.7; }
.lyrics-hero__cta { display:inline-flex; gap:18px; align-items:center; margin-top:18px; padding:14px 20px; border-radius:999px; background:var(--ly-text); color:#07101d; text-decoration:none; font-weight:800; transition:.25s ease; }
.lyrics-hero__cta:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(80,223,219,.22); }
.lyrics-hero__visual { position:relative; z-index:1; display:grid; place-items:center; height:330px; }
.sound-orbit { position:absolute; border:1px solid rgba(80,223,219,.28); border-radius:50%; animation:orbit 12s linear infinite; }
.sound-orbit::after { content:""; position:absolute; width:12px; height:12px; border-radius:50%; background:var(--ly-cyan); box-shadow:0 0 28px var(--ly-cyan); top:14%; left:13%; }
.sound-orbit--outer { width:320px; height:320px; }
.sound-orbit--inner { width:230px; height:230px; animation-direction:reverse; animation-duration:8s; }
.sound-core { width:150px; height:150px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:50%; background:linear-gradient(145deg,rgba(86,119,255,.25),rgba(80,223,219,.12)); box-shadow:inset 0 0 35px rgba(80,223,219,.15),0 0 70px rgba(86,119,255,.15); }
.sound-core span { width:7px; border-radius:9px; background:linear-gradient(var(--ly-cyan),var(--ly-blue)); animation:wave 1.15s ease-in-out infinite alternate; }
.sound-core span:nth-child(1),.sound-core span:nth-child(5){height:34px}.sound-core span:nth-child(2),.sound-core span:nth-child(4){height:67px;animation-delay:.2s}.sound-core span:nth-child(3){height:92px;animation-delay:.4s}
@keyframes orbit { to{transform:rotate(360deg)} } @keyframes wave { to{transform:scaleY(.48);filter:brightness(1.35)} }
.lyrics-panel { position:relative; isolation:isolate; margin-top:14px; padding:18px 34px; border:1px solid var(--ly-line); border-radius:25px; overflow:hidden; background:linear-gradient(145deg,rgba(15,29,48,.94),rgba(8,18,31,.96)); box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 22px 55px rgba(0,0,0,.2); }
.lyrics-panel--singles { margin-top:28px; }
.lyrics-panel::before { content:""; position:absolute; z-index:-2; width:56%; aspect-ratio:1; top:-90%; left:-16%; border-radius:50%; background:radial-gradient(circle,rgba(80,223,219,.18),rgba(86,119,255,.07) 42%,transparent 70%); filter:blur(12px); animation:panelAurora 12s ease-in-out infinite alternate; pointer-events:none; }
.lyrics-panel::after { content:""; position:absolute; z-index:-1; inset:0; opacity:.18; background-image:linear-gradient(110deg,transparent 28%,rgba(80,223,219,.14) 46%,transparent 62%),linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:220% 100%,32px 32px,32px 32px; animation:panelSweep 9s linear infinite; pointer-events:none; }
.lyrics-panel--singles::before { left:auto; right:-12%; top:-75%; background:radial-gradient(circle,rgba(86,119,255,.2),rgba(192,67,229,.08) 45%,transparent 70%); animation-delay:-4s; }
@keyframes panelAurora { 0%{transform:translate3d(0,0,0) scale(.85)} 100%{transform:translate3d(90%,28%,0) scale(1.15)} }
@keyframes panelSweep { to{background-position:-220% 0,32px 16px,32px 16px} }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:30px; margin-bottom:32px; }
.section-heading h2 { margin:5px 0 0; font:700 clamp(34px,4vw,58px)/1 'Space Grotesk'; letter-spacing:-.045em; }
.section-heading p { max-width:520px; margin:0; color:var(--ly-muted); line-height:1.65; }
.lyrics-toolbar { position:relative; z-index:3; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; padding:8px; border:1px solid var(--ly-line); background:rgba(3,10,19,.58); border-radius:16px; backdrop-filter:blur(13px); }
.lyrics-search { min-width:260px; flex:1; display:flex; align-items:center; gap:10px; padding:0 14px; color:var(--ly-cyan); }
.lyrics-search span { font-size:26px; transform:rotate(-15deg); }
.lyrics-search input { width:100%; border:0; outline:0; background:transparent; color:#fff; padding:9px 0; font:600 14px 'Manrope'; }
.lyrics-search input::placeholder { color:#718097; }
.filter-pills { display:flex; gap:7px; flex-wrap:wrap; }
.filter-pills button { border:1px solid transparent; color:#9eabc0; background:transparent; padding:10px 14px; border-radius:999px; cursor:pointer; font:700 12px 'Manrope'; transition:.2s ease; }
.filter-pills button:hover { color:#fff; border-color:var(--ly-line); }
.filter-pills button.is-active { color:#06121b; background:linear-gradient(110deg,var(--ly-cyan),#8cf6db); box-shadow:0 8px 24px rgba(80,223,219,.18); }
#artistNationFilters,#singleNationFilters { gap:9px; }
#artistNationFilters button,#singleNationFilters button { display:grid; place-items:center; width:39px; height:39px; min-height:0; padding:0; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035); font-size:22px; line-height:1; }
#artistNationFilters button:hover,#singleNationFilters button:hover { transform:translateY(-2px); border-color:rgba(80,223,219,.4); background:rgba(80,223,219,.08); }
#artistNationFilters button.is-active,#singleNationFilters button.is-active { color:inherit; border-color:var(--ly-cyan); background:rgba(80,223,219,.16); box-shadow:0 0 0 3px rgba(80,223,219,.08),0 9px 22px rgba(0,0,0,.2); }
#artistNationFilters button img,#singleNationFilters button img { display:block; width:27px; height:18px; object-fit:cover; border-radius:3px; box-shadow:0 2px 7px rgba(0,0,0,.35); }
#artistNationFilters button img.world-icon,#singleNationFilters button img.world-icon { width:24px; height:24px; border-radius:50%; box-shadow:none; }
.lyrics-carousel { position:relative; z-index:2; }
.carousel-track { scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain; }
.carousel-track::-webkit-scrollbar { display:none; }
.artists-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 96px)/7); gap:16px; min-height:174px; padding:6px 4px 10px; overflow-x:auto; overflow-y:hidden; }
.artist-card { scroll-snap-align:start; }
.artist-card a { display:flex; flex-direction:column; align-items:center; color:#fff; text-decoration:none; padding:9px 6px 11px; border:1px solid transparent; border-radius:19px; transition:.3s cubic-bezier(.2,.8,.2,1); }
.artist-card a:hover { transform:translateY(-5px) scale(1.025); border-color:rgba(80,223,219,.18); background:linear-gradient(145deg,rgba(80,223,219,.09),rgba(86,119,255,.04)); box-shadow:0 14px 30px rgba(0,0,0,.22),inset 0 0 22px rgba(80,223,219,.04); }
.artist-card__image { position:relative; width:min(100%,118px); aspect-ratio:1; padding:3px; border-radius:50%; background:conic-gradient(from 30deg,var(--ly-cyan),transparent 22%,var(--ly-blue),transparent 70%,var(--ly-cyan)); transition:filter .25s,transform .3s; animation:ringRotate 8s linear infinite; }
.artist-card a:hover .artist-card__image { filter:drop-shadow(0 0 13px rgba(80,223,219,.35)); }
@keyframes ringRotate { 50%{background-position:100% 100%;transform:rotate(.01deg)} }
.artist-card__image img { display:block; width:100%; height:100%; object-fit:cover; border-radius:50%; border:4px solid #0b1727; }
.artist-card__image img.is-fallback { object-fit:contain; padding:24%; opacity:.55; }
.artist-card__image i { position:absolute; right:8%; bottom:7%; width:17px; height:17px; border:4px solid #0b1727; border-radius:50%; background:var(--ly-cyan); }
.artist-card__name { margin-top:9px; max-width:100%; font:700 13px 'Space Grotesk'; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.artist-card__action { margin-top:5px; color:#78879e; font-size:11px; transition:.2s; }.artist-card a:hover .artist-card__action{color:var(--ly-cyan)}
.singles-grid { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 72px)/5); gap:18px; overflow-x:auto; overflow-y:hidden; padding:6px 4px 14px; }
.single-card { min-width:0; }
.single-card { scroll-snap-align:start; }
.single-card a { display:block; height:100%; padding:10px; border:1px solid var(--ly-line); border-radius:22px; background:rgba(255,255,255,.025); color:#fff; text-decoration:none; transition:.3s cubic-bezier(.2,.8,.2,1); }
.single-card a:hover { transform:translateY(-5px) rotateX(1deg); border-color:rgba(80,223,219,.45); box-shadow:0 18px 34px rgba(0,0,0,.3),0 0 24px rgba(80,223,219,.08); }
.single-card__cover { display:block; position:relative; aspect-ratio:1; overflow:hidden; border-radius:15px; }
.single-card__cover::after { content:""; position:absolute; inset:45% 0 0; background:linear-gradient(transparent,rgba(3,8,15,.7)); }
.single-card__cover img { width:100%; height:100%; object-fit:cover; transition:.5s ease; }.single-card a:hover img{transform:scale(1.06)}
.single-card__play { display:grid; place-items:center; position:absolute; z-index:2; right:13px; bottom:13px; width:38px; height:38px; border-radius:50%; color:#07101d; background:var(--ly-cyan); font-style:normal; font-weight:900; transform:translateY(5px); transition:.25s; }.single-card a:hover .single-card__play{transform:translateY(0) rotate(8deg)}
.single-card__meta { display:block; padding:11px 4px 3px; }.single-card__artist{display:block;color:var(--ly-cyan);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.09em}.single-card strong{display:block;margin:4px 0 9px;font:700 15px 'Space Grotesk';white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.single-card__bottom { display:flex; align-items:center; justify-content:space-between; gap:8px; color:#74839a; font-size:10px; }.single-stars{display:flex;gap:1px;color:#344158}.single-stars .is-full{color:#ffce58}
.load-more-wrapper { display:flex; justify-content:center; margin-top:34px; }.load-more { border:1px solid rgba(80,223,219,.3); border-radius:999px; padding:13px 19px; background:rgba(80,223,219,.07); color:#eaffff; font:800 13px 'Manrope'; cursor:pointer; transition:.2s }.load-more:hover{background:var(--ly-cyan);color:#051018;transform:translateY(-2px)}.load-more:disabled{opacity:.45}.load-more[hidden]{display:none}
.carousel-arrow { position:absolute; z-index:5; top:50%; display:grid; place-items:center; width:46px; height:46px; padding:0; border:1px solid rgba(255,255,255,.18); border-radius:50%; background:rgba(7,16,29,.9); color:#fff; font:400 34px/1 'Manrope'; cursor:pointer; box-shadow:0 12px 30px rgba(0,0,0,.35); backdrop-filter:blur(10px); transform:translateY(-50%); transition:.2s ease; }
.carousel-arrow:hover { color:#06121b; background:var(--ly-cyan); transform:translateY(-50%) scale(1.07); }.carousel-arrow:disabled{opacity:.22;pointer-events:none}.carousel-arrow--prev{left:-18px}.carousel-arrow--next{right:-18px}
.lyrics-empty { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:230px; color:var(--ly-muted); text-align:center; }.lyrics-empty>span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--ly-line);color:var(--ly-cyan);font-size:23px}.lyrics-empty strong{margin-top:13px;color:#fff}.lyrics-empty p{margin:6px 0}
.lyrics-skeleton { min-height:190px; border-radius:22px; background:linear-gradient(100deg,rgba(255,255,255,.03) 20%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.03) 60%); background-size:200% 100%; animation:shimmer 1.25s infinite }.lyrics-skeleton--singles{min-height:330px}@keyframes shimmer{to{background-position:-200% 0}}
@media(max-width:1100px){.artists-grid{grid-auto-columns:calc((100% - 64px)/5)}.singles-grid{grid-auto-columns:calc((100% - 54px)/4)}}
@media(max-width:780px){.lyrics-page{padding:12px 10px 55px}.lyrics-panel{margin-top:10px;padding:12px 24px;border-radius:20px}.lyrics-panel--singles{margin-top:20px}.section-heading{align-items:start;flex-direction:column}.lyrics-toolbar{align-items:stretch;margin-bottom:10px}.filter-pills{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.filter-pills button{white-space:nowrap}.artists-grid{grid-auto-columns:calc((100% - 36px)/4);gap:12px;min-height:155px}.singles-grid{grid-auto-columns:calc((100% - 26px)/3);gap:13px}.artist-card__action{display:none}.single-card strong{font-size:13px}.single-card__bottom{align-items:start;flex-direction:column}.lyrics-skeleton--singles{min-height:200px}.carousel-arrow{width:36px;height:36px;font-size:27px}.carousel-arrow--prev{left:-17px}.carousel-arrow--next{right:-17px}}

.lyrics-page + .modern-footer { position:relative!important; inset:auto!important; flex:none; width:100%; margin-top:0; }
@media(max-width:480px){.artists-grid{grid-auto-columns:34%;gap:8px}.singles-grid{grid-auto-columns:62%;gap:10px}.lyrics-hero h1{font-size:41px}.single-card a{padding:7px}.single-card__play{width:30px;height:30px}.section-heading h2{font-size:38px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}