@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{--void:#03040a;--ink:#070a12;--panel:rgba(13,18,31,.66);--panel-solid:#0d1220;--text:#f7fbff;--muted:#9da9bc;--line:rgba(255,255,255,.1);--lime:#b7ff5c;--cyan:#59e8ff;--violet:#ab78ff;--gold:#ffd66b;--danger:#ff7194;--radius:30px;--shadow:0 35px 110px rgba(0,0,0,.58);--ease:cubic-bezier(.2,.75,.2,1)}
*{box-sizing:border-box}html{background:var(--void);color:var(--text);font-family:Manrope,ui-sans-serif,system-ui,sans-serif;scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;padding:0 0 calc(132px + env(safe-area-inset-bottom));background:radial-gradient(circle at 10% 2%,rgba(171,120,255,.18),transparent 27%),radial-gradient(circle at 87% 12%,rgba(89,232,255,.14),transparent 25%),radial-gradient(circle at 68% 86%,rgba(183,255,92,.09),transparent 27%),linear-gradient(145deg,#020308,#080d19 48%,#03040a)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(#000,transparent 86%)}::selection{background:var(--lime);color:#061007}.shell{position:relative;z-index:1;width:min(1240px,calc(100% - 44px));margin-inline:auto}.hidden{display:none!important}
.ambient{position:fixed;border-radius:50%;filter:blur(110px);opacity:.24;pointer-events:none;animation:drift 13s ease-in-out infinite alternate}.ambient-one{width:360px;height:360px;left:-190px;top:120px;background:var(--violet)}.ambient-two{width:440px;height:440px;right:-250px;bottom:20px;background:var(--cyan);animation-delay:-5s}@keyframes drift{to{transform:translate3d(42px,-38px,0) scale(1.14)}}
.topbar{height:96px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;color:var(--text);text-decoration:none}.brand-mark{width:48px;height:48px;border-radius:17px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 14px 35px rgba(89,232,255,.18)}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.brand-copy{display:grid;gap:4px;line-height:1}.brand-copy strong{font:700 .86rem "Space Grotesk";letter-spacing:.18em}.brand-copy small{color:var(--muted);font-size:.51rem;font-weight:700;letter-spacing:.27em}.top-actions,.hero-actions,.quality-row,.section-head,.player-inner,.player-track,.controls,.timeline,.volume{display:flex;align-items:center}.top-actions{gap:10px}.pill{position:relative;padding:9px 13px 9px 29px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);color:#c6d0df;font-size:.72rem}.pill:before{content:"";position:absolute;left:11px;top:50%;width:8px;height:8px;border-radius:50%;background:var(--lime);transform:translateY(-50%);box-shadow:0 0 15px var(--lime)}
button,.ghost-btn,input,textarea{font:inherit}.ghost-btn,.secondary-btn,.share-grid button{border:1px solid rgba(255,255,255,.13);border-radius:15px;background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.025));box-shadow:inset 0 1px rgba(255,255,255,.1),0 9px 22px rgba(0,0,0,.25);color:var(--text);cursor:pointer;padding:11px 17px;text-decoration:none;transition:.22s var(--ease)}.ghost-btn:hover,.secondary-btn:hover,.share-grid button:hover{transform:translateY(-2px);border-color:rgba(89,232,255,.38);background:rgba(255,255,255,.09)}
.app-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:34px}.hero{align-self:center;padding:82px 12px 62px 4px}.eyebrow{margin:0 0 18px;color:var(--lime);font-size:.67rem;font-weight:800;letter-spacing:.25em;text-transform:uppercase}.hero h1{max-width:780px;margin:0;font:700 clamp(4rem,7.5vw,7.4rem)/.86 "Space Grotesk";letter-spacing:-.075em;text-wrap:balance;text-shadow:0 25px 70px rgba(0,0,0,.38)}.hero h1 span{background:linear-gradient(90deg,#8795aa,#e5edf8 52%,#718096);background-clip:text;color:transparent}.hero-copy{max-width:590px;margin:32px 0;color:var(--muted);font-size:1.05rem;line-height:1.85}.hero-actions{gap:13px;flex-wrap:wrap}.primary-btn{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.5);border-radius:16px;background:linear-gradient(145deg,#ddffa8,var(--lime) 48%,#72d530);box-shadow:inset 0 2px rgba(255,255,255,.7),0 12px 0 #3b7418,0 22px 38px rgba(96,204,41,.22);color:#061006;cursor:pointer;font-weight:800;padding:15px 23px;transform:translateY(-4px);transition:.2s var(--ease)}.primary-btn:hover{transform:translateY(-7px);filter:saturate(1.12)}.primary-btn:active{transform:translateY(4px);box-shadow:inset 0 2px rgba(255,255,255,.6),0 4px 0 #3b7418}.secondary-btn{padding:14px 21px}.quality-row{gap:10px;flex-wrap:wrap;margin-top:40px}.quality-row span{padding:8px 12px;border:1px solid rgba(255,255,255,.085);border-radius:999px;background:rgba(255,255,255,.025);color:#b6c2d3;font-size:.66rem;font-weight:700;letter-spacing:.04em}
.now-card,.catalog{border:1px solid var(--line);background:linear-gradient(145deg,rgba(24,32,49,.78),rgba(8,12,22,.72));backdrop-filter:blur(30px) saturate(140%);box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.075)}.now-card{position:relative;align-self:start;margin-top:26px;padding:18px;border-radius:34px;overflow:hidden;transform:perspective(1200px) rotateY(-2.5deg) rotateX(1deg);transition:.5s var(--ease)}.now-card:hover{transform:perspective(1200px) translateY(-7px)}.now-card:before{content:"";position:absolute;right:-90px;top:-90px;width:240px;height:240px;border-radius:50%;background:rgba(89,232,255,.13);filter:blur(40px)}.art-wrap{position:relative;aspect-ratio:1;overflow:hidden;border-radius:25px;background:#05070d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 24px 58px rgba(0,0,0,.52)}.art-wrap>img,.thumb>img{width:100%;height:100%;object-fit:cover;display:none}.art-fallback{width:100%;height:100%;display:grid;place-items:center;background:#04060b}.art-fallback img{display:block!important;width:100%;height:100%;object-fit:cover}.orbit{position:absolute;left:50%;top:50%;border:1px solid rgba(183,255,92,.22);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%);animation:orbit 16s linear infinite}.orbit-one{width:78%;height:78%}.orbit-two{width:92%;height:92%;border-color:rgba(89,232,255,.17);animation-direction:reverse;animation-duration:23s}@keyframes orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}.now-meta{display:flex;align-items:center;gap:8px;margin-top:23px;color:#c0cbdb;font-size:.63rem;font-weight:700;letter-spacing:.18em}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px var(--lime);animation:blink 1.5s infinite}@keyframes blink{50%{opacity:.45;transform:scale(.75)}}.now-card h2{margin:10px 0 5px;font:700 1.85rem "Space Grotesk";letter-spacing:-.035em}.now-card>p{margin:0;color:var(--muted)}.mini-wave{display:flex;align-items:end;gap:5px;height:44px;margin-top:14px}.mini-wave i{width:5px;height:35%;border-radius:5px;background:linear-gradient(var(--cyan),var(--lime));animation:pulse 1.1s ease-in-out infinite alternate}.mini-wave i:nth-child(2n){height:76%;animation-delay:.2s}.mini-wave i:nth-child(3n){height:52%;animation-delay:.4s}@keyframes pulse{to{height:97%;opacity:.55}}
.catalog{grid-column:1/-1;margin-top:14px;padding:31px;border-radius:32px;overflow:hidden}.section-head{justify-content:space-between;gap:22px}.section-head h2{margin:0;font:700 2.25rem "Space Grotesk";letter-spacing:-.045em}.search{display:flex;align-items:center;gap:10px;padding:11px 15px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.035)}.search:focus-within{border-color:rgba(89,232,255,.5);box-shadow:0 0 0 4px rgba(89,232,255,.07)}.search input{min-width:250px;border:0;outline:0;background:transparent;color:var(--text)}.track-list{margin-top:25px}.track-row{position:relative;display:grid;grid-template-columns:58px 1.2fr 1fr 90px 42px;gap:17px;align-items:center;padding:14px 12px;border-top:1px solid var(--line);cursor:pointer;transition:.24s var(--ease)}.track-row:before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:3px;border-radius:4px;background:linear-gradient(var(--cyan),var(--lime));opacity:0}.track-row:hover,.track-row.active{transform:translateX(5px);background:linear-gradient(90deg,rgba(89,232,255,.065),rgba(183,255,92,.03),transparent)}.track-row:hover:before,.track-row.active:before{opacity:1}.row-art{display:grid;place-items:center;width:58px;height:58px;overflow:hidden;border-radius:16px;background:linear-gradient(135deg,var(--lime),var(--cyan));box-shadow:0 10px 22px rgba(0,0,0,.3);color:#061006;font:800 1rem "Space Grotesk"}.row-art img{width:100%;height:100%;object-fit:cover}.track-main strong,.track-main small{display:block}.track-main strong{font-weight:800}.track-main small,.album,.track-time{margin-top:4px;color:var(--muted);font-size:.81rem}.track-time{text-align:right;font-variant-numeric:tabular-nums}.row-play{width:39px;height:39px;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.055);box-shadow:inset 0 1px rgba(255,255,255,.12),0 7px 15px rgba(0,0,0,.3);color:var(--text);cursor:pointer}.row-play:hover{background:linear-gradient(145deg,var(--lime),var(--cyan));color:#061006}.empty-state{padding:55px;text-align:center;color:var(--muted)}
.player{position:fixed;right:0;bottom:0;left:0;z-index:20;border-top:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(10,14,23,.78),rgba(4,6,11,.97));backdrop-filter:blur(32px) saturate(150%);box-shadow:0 -24px 70px rgba(0,0,0,.48);padding-bottom:env(safe-area-inset-bottom)}.player.hidden{display:none}.player-inner{height:110px;justify-content:space-between;gap:30px}.player-track{gap:13px;min-width:250px}.player-track strong,.player-track small{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-track small{margin-top:4px;color:var(--muted)}.thumb{display:grid;place-items:center;width:60px;height:60px;overflow:hidden;border-radius:17px;background:linear-gradient(135deg,var(--lime),var(--cyan));box-shadow:0 12px 28px rgba(0,0,0,.36);color:#061006;font-weight:900}.transport{flex:1;max-width:570px}.controls{justify-content:center;gap:14px}.controls button{width:36px;height:36px;border:1px solid rgba(255,255,255,.09);border-radius:50%;background:rgba(255,255,255,.05);color:var(--text);cursor:pointer}.play-circle{width:50px!important;height:50px!important;background:linear-gradient(145deg,#fff,#ced9e7)!important;box-shadow:0 9px 0 #8d99aa,0 16px 28px rgba(0,0,0,.38)!important;color:#07090e!important;transform:translateY(-3px)}.timeline{gap:11px;color:var(--muted);font-size:.69rem;font-variant-numeric:tabular-nums}.timeline input{flex:1}.volume{gap:10px;color:var(--muted);font-size:.67rem}.volume input{width:96px}input[type=range]{appearance:none;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--lime),rgba(255,255,255,.16));outline:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border:2px solid var(--lime);border-radius:50%;background:#fff;box-shadow:0 3px 12px #000}
.share-dialog{width:min(550px,calc(100% - 30px));padding:40px;border:1px solid rgba(255,255,255,.13);border-radius:31px;background:linear-gradient(145deg,rgba(24,32,50,.98),rgba(7,10,18,.99));box-shadow:0 45px 160px rgba(0,0,0,.84);color:var(--text)}.share-dialog::backdrop{background:rgba(1,3,8,.8);backdrop-filter:blur(13px)}.dialog-close{position:absolute;right:18px;top:15px;width:39px;height:39px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.04);color:var(--muted);font-size:1.6rem;cursor:pointer}.share-icon{display:grid;place-items:center;width:64px;height:64px;margin-bottom:25px;border-radius:21px;background:linear-gradient(145deg,var(--lime),var(--cyan));box-shadow:0 12px 0 #3c8970,0 20px 34px rgba(89,232,255,.2);color:#061006;font-size:2rem;font-weight:900;transform:translateY(-4px)}.share-dialog h2{margin:0 0 12px;font:700 2.25rem "Space Grotesk";letter-spacing:-.045em}.share-dialog>p:not(.eyebrow){color:var(--muted);line-height:1.7}.wide{width:100%;margin-top:15px}.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:19px}.share-grid button{padding:12px}.share-dialog small{display:block;margin-top:19px;color:#78869a;line-height:1.55}.toast{position:fixed;right:24px;top:24px;z-index:100;padding:13px 18px;border-radius:14px;background:#fff;color:#070a10;font-weight:800;box-shadow:0 18px 45px rgba(0,0,0,.45);opacity:0;pointer-events:none;transform:translateY(-20px);transition:.28s var(--ease)}.toast.show{opacity:1;transform:none}
.install-panel{position:fixed;right:18px;bottom:22px;left:18px;z-index:50;display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:16px;width:min(720px,calc(100% - 36px));margin:auto;padding:17px;border:1px solid rgba(255,255,255,.17);border-radius:22px;background:rgba(8,12,21,.96);backdrop-filter:blur(28px);box-shadow:0 30px 100px rgba(0,0,0,.7)}.install-panel>img{width:62px;height:62px;border-radius:18px}.install-panel strong{font:700 1.05rem "Space Grotesk"}.install-panel p{margin:5px 0 0;color:var(--muted);font-size:.84rem;line-height:1.45}.install-actions{display:flex;align-items:center;gap:10px}
@media(max-width:920px){.app-grid{grid-template-columns:1fr}.hero{padding:50px 4px 22px}.hero h1{font-size:clamp(3.8rem,12vw,6.2rem)}.now-card{justify-self:center;width:min(100%,700px);margin-top:0;transform:none}.catalog{padding:24px}}
@media(max-width:680px){body{padding-bottom:calc(170px + env(safe-area-inset-bottom))}.shell{width:min(100% - 24px,1240px)}.topbar{height:78px}.brand-mark{width:42px;height:42px;border-radius:15px}.brand-copy strong{font-size:.75rem}.brand-copy small{font-size:.44rem;letter-spacing:.2em}.pill{display:none}.top-actions{gap:7px}.ghost-btn{padding:9px 11px;font-size:.76rem}.hero{padding-top:38px}.hero h1{font-size:clamp(3.5rem,16vw,5rem)}.hero-copy{margin:25px 0;font-size:.96rem}.hero-actions{display:grid;grid-template-columns:1fr}.primary-btn,.secondary-btn{width:100%}.quality-row{margin-top:32px}.catalog{padding:20px;border-radius:25px}.section-head{align-items:flex-start;flex-direction:column}.search{width:100%}.search input{min-width:0;width:100%}.track-row{grid-template-columns:50px 1fr 40px;gap:12px;padding-inline:5px}.row-art{width:50px;height:50px;border-radius:14px}.album,.track-time{display:none}.player-inner{display:grid;grid-template-columns:1fr auto;gap:10px;height:150px;padding-block:12px}.transport{grid-column:1/-1;grid-row:2}.volume{display:none}.player-track strong,.player-track small{max-width:155px}.share-dialog{padding:31px 23px}.install-panel{grid-template-columns:50px 1fr;bottom:12px;padding:14px}.install-panel>img{width:50px;height:50px;border-radius:15px}.install-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.install-actions button{width:100%}}
@media(max-width:420px){.top-actions #installApp{display:none}.quality-row span{font-size:.6rem}.share-grid{grid-template-columns:1fr}}
@media(display-mode:standalone){#installApp{display:none!important}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}