@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#090a0e;--paper:#f1eee8;--muted:#888a91;--line:rgba(255,255,255,.09);--acid:#d5fa76;--violet:#9d82f5;--mono:'DM Mono',monospace;--display:Manrope,Inter,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 78% 2%,rgba(118,95,199,.12),transparent 31%),radial-gradient(ellipse at 1% 38%,rgba(206,247,109,.05),transparent 34%),var(--bg);color:var(--paper);font-family:var(--display);min-height:100vh}.grain{position:fixed;inset:0;pointer-events:none;opacity:.17;z-index:5;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.19' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.shell{width:min(1200px,calc(100% - 64px));margin:auto}.masthead{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.wordmark{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.17em}.wordmark small{display:block;margin-top:4px;color:#92929a;font:8px var(--mono);letter-spacing:.16em}.sigil{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(213,250,118,.45);border-radius:50%;font:500 15px var(--mono);color:var(--acid);box-shadow:inset 0 0 14px rgba(213,250,118,.07)}.library-status{display:flex;align-items:center;gap:9px;color:#94949a;font:8px var(--mono);letter-spacing:.12em}.library-status i,.catalog-foot i{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px rgba(213,250,118,.75)}.library-status b{font-weight:400;color:var(--acid);margin-left:12px}.intro{min-height:235px;display:flex;align-items:center;justify-content:space-between;position:relative}.kicker{margin:0 0 11px;color:var(--acid);font:8px var(--mono);letter-spacing:.2em}.intro h1{margin:0;font-size:clamp(36px,5vw,57px);font-weight:600;line-height:1.03;letter-spacing:-.07em}.intro h1 em{font-weight:400;color:#9d96b4;font-style:normal}.intro-copy{margin:13px 0 0;color:#94939b;font-size:11px}.intro-mark{position:relative;margin-right:9%;width:124px;height:124px;border:1px solid rgba(255,255,255,.1);border-radius:50%;display:grid;place-items:center;color:rgba(213,250,118,.48);font:300 69px Georgia;transform:rotate(-12deg)}.intro-mark:before,.intro-mark:after{content:"";position:absolute;inset:10px;border:1px solid rgba(213,250,118,.12);border-radius:50%}.intro-mark:after{inset:-8px;border-color:rgba(157,130,245,.14)}.intro-mark i{position:absolute;right:2px;top:19px;width:7px;height:7px;background:var(--acid);border-radius:50%;box-shadow:0 0 17px var(--acid)}.player-grid{display:grid;grid-template-columns:minmax(310px,.83fr) minmax(420px,1.17fr);gap:14px;align-items:stretch}.now-card,.catalog-card{border:1px solid var(--line);background:linear-gradient(145deg,rgba(24,24,31,.94),rgba(14,15,20,.95));border-radius:17px;box-shadow:0 24px 80px rgba(0,0,0,.22)}.now-card{min-height:570px;padding:22px 28px 20px;display:flex;align-items:center;flex-direction:column;position:relative;overflow:hidden}.now-card:before{content:"";position:absolute;inset:0 0 auto;height:200px;background:radial-gradient(ellipse at 50% 0,rgba(157,130,245,.14),transparent 70%);pointer-events:none}.card-top{width:100%;display:flex;justify-content:space-between;align-items:center;color:#96949e;font:8px var(--mono);letter-spacing:.15em;position:relative}.card-top span:last-child{display:flex;align-items:center;gap:6px;font-size:7px;color:#a7a4ae}.card-top i{width:5px;height:5px;background:var(--acid);border-radius:50%}.art-wrap{width:min(64%,264px);aspect-ratio:1;position:relative;margin:32px auto 18px;padding:7px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(145deg,rgba(255,255,255,.14),rgba(255,255,255,.02));box-shadow:0 23px 45px rgba(0,0,0,.45)}.art-wrap img{width:100%;height:100%;object-fit:cover;border-radius:9px;background:#17161e}.art-glow{position:absolute;z-index:-1;inset:10%;background:var(--violet);filter:blur(52px);opacity:.23}.track-meta{text-align:center;max-width:100%}.track-meta p{font:8px var(--mono);letter-spacing:.15em;color:#9b8cbd;margin:3px 0 8px}.track-meta h2{font-size:21px;letter-spacing:-.05em;font-weight:600;margin:0 0 4px;max-width:390px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-meta>span{color:#92909a;font-size:10px}.track-plays{display:flex;align-items:baseline;gap:7px;margin:17px 0 3px}.track-plays span{color:#7d7e87;font:7px var(--mono);letter-spacing:.08em}.track-plays strong{font:500 17px var(--mono);color:var(--acid)}.track-plays small{font:8px var(--mono);color:#888891}.seek{width:100%;display:grid;grid-template-columns:35px 1fr 35px;align-items:center;gap:8px;margin-top:12px;color:#777881;font:8px var(--mono)}input[type=range]{width:100%;height:3px;accent-color:var(--acid);cursor:pointer}.transport{display:flex;align-items:center;justify-content:center;gap:26px;margin:15px 0 13px}.transport button{cursor:pointer;color:var(--paper)}.skip{border:0;background:transparent;font-size:20px;color:#b2b0b7!important}.play{width:48px;height:48px;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:var(--acid);color:#13160c!important;font-size:17px;padding-left:4px;box-shadow:0 0 28px rgba(213,250,118,.17);transition:transform .18s,box-shadow .18s}.play:hover{transform:scale(1.06);box-shadow:0 0 34px rgba(213,250,118,.3)}.volume-row{width:min(190px,80%);display:flex;align-items:center;gap:9px;color:#777881}.volume-row>span:first-child,.volume-row>span:last-child{font:7px var(--mono);letter-spacing:.08em}.volume-row>span:last-child{min-width:28px;text-align:right}.catalog-card{padding:22px 22px 13px;min-height:570px;display:flex;flex-direction:column}.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:17px}.catalog-head .kicker{margin-bottom:7px;color:#a9a0bc}.catalog-head h2{font-size:21px;letter-spacing:-.05em;font-weight:600;margin:0}.catalog-head h2 span{display:inline-grid;place-items:center;vertical-align:middle;min-width:21px;height:20px;margin-left:4px;padding:0 5px;border:1px solid var(--line);border-radius:20px;color:#a5a2aa;font:8px var(--mono);letter-spacing:0}.search{width:145px;height:30px;border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:6px;color:#8e8b96}.search>span{font-size:17px}.search input{width:100%;border:0;outline:0;background:transparent;color:var(--paper);font:9px var(--display)}.search input::placeholder{color:#707079}.list-labels{display:grid;grid-template-columns:minmax(0,1fr) 58px 44px;gap:7px;padding:9px 8px;color:#686a73;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font:7px var(--mono);letter-spacing:.11em}.list-labels span:nth-child(2),.list-labels span:nth-child(3){text-align:right}.queue{min-height:0;max-height:442px;overflow:auto;scrollbar-width:thin;scrollbar-color:#35333d transparent;padding:3px 2px 4px 0}.song{width:100%;height:57px;display:grid;grid-template-columns:30px 39px minmax(0,1fr) 58px 44px;gap:8px;align-items:center;text-align:left;padding:5px 8px;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--paper);cursor:pointer;transition:background .16s,border-color .16s}.song:hover{background:rgba(255,255,255,.035)}.song.active{border-color:rgba(213,250,118,.18);background:linear-gradient(90deg,rgba(213,250,118,.07),rgba(157,130,245,.035))}.song-number{font:8px var(--mono);color:#71727b;text-align:center}.song.active .song-number{color:var(--acid)}.song img{width:39px;height:39px;object-fit:cover;border-radius:6px;background:#211e29}.song-copy{min-width:0}.song-copy b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:9px;font-weight:600}.song-copy small{display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#74757e;font:7px var(--mono)}.song-plays,.song-time{text-align:right;color:#a3a1a9;font:8px var(--mono)}.song-plays{color:#c9d5a6}.song-time{color:#777881}.song-playing{font:9px var(--mono);color:var(--acid);text-align:center}.catalog-foot{margin-top:auto;padding-top:11px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#797a83;font:7px var(--mono);letter-spacing:.1em}.catalog-foot span:first-child{display:flex;align-items:center;gap:7px}.catalog-foot i{width:5px;height:5px}.loading{padding:15px;color:#888891;font-size:10px}.page-foot{display:flex;justify-content:space-between;padding:20px 2px 25px;color:#62636b;font:7px var(--mono);letter-spacing:.13em}.page-foot b{color:var(--acid);padding:0 4px}.now-card.is-playing .art-wrap{animation:art-breathe 6s ease-in-out infinite alternate}@keyframes art-breathe{to{transform:translateY(-3px);box-shadow:0 28px 58px rgba(0,0,0,.52),0 0 25px rgba(157,130,245,.13)}}button:focus-visible,input:focus-visible{outline:2px solid var(--acid);outline-offset:3px}.queue:focus{outline:0}@media(max-width:820px){.shell{width:min(640px,calc(100% - 36px))}.player-grid{grid-template-columns:1fr}.intro{min-height:210px}.intro-mark{margin-right:7%;width:95px;height:95px;font-size:52px}.now-card{min-height:560px}.catalog-card{min-height:540px}.queue{max-height:405px}}@media(max-width:520px){.shell{width:calc(100% - 24px)}.masthead{height:68px}.library-status{font-size:6px;gap:6px}.library-status b{margin-left:1px}.intro{min-height:195px}.intro h1{font-size:42px}.intro-copy{max-width:250px;font-size:10px;line-height:1.6}.intro-mark{margin-right:5%;width:68px;height:68px;font-size:38px}.intro-mark:before{inset:6px}.intro-mark:after{inset:-5px}.now-card{padding:18px 20px;min-height:535px}.art-wrap{width:min(65%,240px);margin:25px auto 16px}.catalog-card{padding:17px 12px 12px;min-height:490px}.catalog-head{align-items:flex-start;flex-direction:column}.search{width:100%}.list-labels{grid-template-columns:minmax(0,1fr) 48px 38px}.song{grid-template-columns:20px 34px minmax(0,1fr) 48px 38px;gap:6px;height:53px;padding:4px}.song img{width:34px;height:34px}.song-copy b{font-size:8px}.song-copy small{font-size:6px}.song-plays,.song-time{font-size:7px}.page-foot{font-size:6px}}
