:root{--bg:#060616;--cyan:#34f5ff;--pink:#ff3ec8;--yellow:#f8ff5a;--white:#f4f7ff;--muted:#aaaac6}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 78% 12%,#ff3ec82d,transparent 28%),radial-gradient(circle at 12% 32%,#34f5ff20,transparent 30%),var(--bg);color:var(--white);font-family:Arial,system-ui,sans-serif;padding-bottom:92px;overflow-x:hidden}button,input{font:inherit}button,a{color:inherit}a{text-decoration:none}#stars{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
header{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px clamp(20px,5vw,82px);background:#060616cf;backdrop-filter:blur(18px);border-bottom:1px solid #ffffff16}.logo{font-weight:1000;letter-spacing:3px;font-size:25px}.logo span{color:var(--pink)}nav{display:flex;gap:28px;color:var(--muted);font-size:12px;font-weight:900}.online{justify-self:end;color:var(--cyan);font-size:11px;font-weight:900;letter-spacing:1.4px}
.hero{min-height:820px;max-width:1500px;margin:auto;padding:62px clamp(24px,6vw,100px);display:grid;grid-template-columns:1fr .95fr;align-items:center;gap:55px}.eyebrow{color:var(--yellow);font-size:12px;font-weight:1000;letter-spacing:3px}.hero h1,h2,h3{margin:0;line-height:.9}.hero h1{font-size:clamp(76px,9vw,145px);letter-spacing:-8px}.hero h1 span,h2 span{color:var(--pink);text-shadow:0 0 28px #ff3ec85c}.lead{max-width:650px;color:var(--muted);font-size:20px;line-height:1.65}.buttons{display:flex;flex-wrap:wrap;gap:13px;margin-top:32px}.primary,.secondary{border:0;border-radius:15px;padding:17px 22px;font-weight:1000;letter-spacing:.8px;cursor:pointer;transition:.18s}.primary{background:var(--yellow);color:#080814;box-shadow:0 13px 38px #f8ff5a18}.secondary{background:#ffffff0a;border:1px solid #ffffff32}.primary:hover,.secondary:hover{transform:translateY(-3px)}.tags{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.tags span{padding:8px 11px;border:1px solid #ffffff24;border-radius:99px;color:var(--muted);font-size:10px;font-weight:900;letter-spacing:1px}
.art{position:relative;min-height:680px;display:grid;place-items:center}.cover{position:absolute;width:min(82%,580px);border-radius:28px;transform:rotate(-6deg);box-shadow:0 40px 110px #000a;border:1px solid #ffffff25}.character{position:absolute;width:min(70%,500px);right:-5%;bottom:-3%;filter:drop-shadow(0 0 35px #34f5ff42)}.halo{position:absolute;width:580px;height:580px;border:2px solid #34f5ff42;border-radius:50%;box-shadow:0 0 80px #ff3ec832;animation:spin 18s linear infinite}.error{position:absolute;top:15%;right:-2%;padding:15px 18px;background:#10102bdc;border:1px solid #ff3ec870;border-radius:13px;color:var(--yellow);font-size:12px;font-weight:1000;letter-spacing:1.4px;transform:rotate(5deg)}
.section{max-width:1360px;margin:auto;padding:120px clamp(24px,6vw,90px)}h2{font-size:clamp(47px,6vw,88px);letter-spacing:-5px}.music{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}.music p:not(.eyebrow){color:var(--muted);font-size:19px;line-height:1.65}.track-list{display:grid;gap:12px}.track-list button{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"n title icon" "n sub icon";align-items:center;gap:4px 18px;text-align:left;padding:20px;border-radius:17px;border:1px solid #ffffff20;background:linear-gradient(135deg,#ffffff0d,#ffffff04);cursor:pointer}.track-list button:hover{border-color:var(--cyan)}.track-list b{grid-area:n;color:var(--pink);font-size:24px}.track-list span{grid-area:title;font-weight:1000;font-size:18px}.track-list small{grid-area:sub;color:var(--muted);font-weight:800}.track-list i{grid-area:icon;color:var(--yellow);font-style:normal;font-size:25px}
.hook{text-align:center}.hook h2{max-width:950px;margin:0 auto 55px}.move-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}.move-grid article{min-height:235px;padding:28px;border:1px solid #ffffff21;border-radius:22px;background:linear-gradient(145deg,#ffffff0d,#ffffff04)}.move-grid strong{font-size:58px;color:#34f5ff40}.move-grid h3{font-size:30px;margin:18px 0}.move-grid p{color:var(--muted);line-height:1.6}.center-button{margin-top:35px}.lyric-section{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.lyric-section blockquote{margin:0;padding:30px;border-left:5px solid var(--cyan);background:#34f5ff0c;font-size:clamp(20px,2.2vw,31px);font-weight:900;line-height:1.6}
.player{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:auto minmax(160px,auto) auto minmax(120px,1fr) auto;align-items:center;gap:14px;padding:15px clamp(16px,4vw,55px);background:#09091aee;backdrop-filter:blur(22px);border-top:1px solid #ffffff24}.player button{width:48px;height:48px;border:0;border-radius:50%;background:var(--yellow);color:#080814;font-weight:1000;cursor:pointer}.meta{display:grid}.meta b{font-size:14px}.meta small{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:1px}.player>span{font-size:11px;color:var(--muted);font-weight:900}#seek{accent-color:var(--pink);width:100%}
@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:900px){header{grid-template-columns:1fr auto}header nav{display:none}.hero,.music,.lyric-section{grid-template-columns:1fr}.art{min-height:590px}.move-grid{grid-template-columns:1fr}.character{right:0}.player{grid-template-columns:auto 1fr auto}.player #seek,.player #time{display:none}}@media(max-width:560px){.online{display:none}.hero{min-height:auto;padding-top:50px}.hero h1{letter-spacing:-5px}.art{min-height:500px}.cover{width:92%}.character{width:72%;bottom:-1%}.halo{width:380px;height:380px}.error{right:0;top:8%}.player{padding:12px}.player #duration{display:none}}