:root{--bg: #000;--panel: #121212;--panel-2: #181818;--panel-hover: #1a1a1a;--elevated: #242424;--text: #fff;--muted: #b3b3b3;--green: #1ed760;--green-dark: #1db954;--radius: 8px;--bar-h: 88px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--text);font-family:Circular,Helvetica Neue,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}input{font-family:inherit}code{background:#ffffff14;padding:1px 6px;border-radius:4px;font-size:.85em}.app{display:flex;flex-direction:column;height:100vh;padding:8px;gap:8px}.grid{flex:1;display:grid;grid-template-columns:300px 1fr;gap:8px;min-height:0}.sidebar{display:flex;flex-direction:column;gap:8px;min-height:0}.brand{display:flex;align-items:center;gap:10px;font-size:1.35rem;font-weight:800;letter-spacing:-.5px;padding:18px 20px 8px;background:var(--panel);border-radius:var(--radius)}.brand-dot{width:22px;height:22px;border-radius:50%;background:var(--green);box-shadow:0 0 16px #1ed76099}.nav{background:var(--panel);border-radius:var(--radius);padding:8px 10px;display:flex;flex-direction:column}.nav-item{display:flex;align-items:center;gap:16px;padding:11px 12px;color:var(--muted);font-weight:700;border-radius:4px;cursor:pointer}.nav-item.active,.nav-item:hover{color:var(--text)}.library-card{background:var(--panel);border-radius:var(--radius);padding:8px 6px;flex:1;min-height:0;overflow-y:auto}.library-head{display:flex;align-items:center;gap:14px;padding:8px 12px 14px;color:var(--muted);font-weight:700}.lib-playlist{width:100%;display:flex;align-items:center;gap:12px;padding:8px;border-radius:6px;text-align:left}.lib-playlist:hover,.lib-playlist.active{background:var(--panel-hover)}.lib-meta{display:flex;flex-direction:column;gap:3px;overflow:hidden}.lib-title{font-weight:600;font-size:.95rem}.lib-sub{color:var(--muted);font-size:.8rem}.cover{position:relative;border-radius:6px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 16px #0006}.cover img{width:100%;height:100%;object-fit:cover;display:block}.cover.sm{width:40px;height:40px}.cover.md{width:56px;height:56px}.cover.xl{width:210px;height:210px;border-radius:8px;box-shadow:0 8px 40px #0009}.main{background:linear-gradient(180deg,#2a2a2a 0%,var(--panel) 260px);border-radius:var(--radius);overflow-y:auto;min-height:0}.hero{display:flex;align-items:flex-end;gap:24px;padding:56px 32px 24px}.hero-meta{display:flex;flex-direction:column;gap:14px}.eyebrow{font-size:.8rem;font-weight:700}.hero h1{font-size:clamp(2rem,5vw,4.5rem);font-weight:800;letter-spacing:-2px;line-height:1}.hero-sub{color:var(--muted);font-weight:500}.controls-row{display:flex;align-items:center;gap:24px;padding:16px 32px}.play-fab{width:56px;height:56px;border-radius:50%;background:var(--green);color:#000;display:grid;place-items:center;transition:transform .1s ease,background .1s ease}.play-fab svg{width:26px;height:26px}.play-fab:hover:not(:disabled){transform:scale(1.05);background:var(--green-dark)}.play-fab:disabled{opacity:.4;cursor:not-allowed}.play-fab.sm{width:34px;height:34px}.play-fab.sm svg{width:17px;height:17px}.ghost-btn{color:var(--muted);display:grid;place-items:center;position:relative;transition:color .1s,transform .1s}.ghost-btn svg{width:24px;height:24px}.ghost-btn.sm svg{width:18px;height:18px}.ghost-btn:hover{color:var(--text)}.ghost-btn.on{color:var(--green)}.ghost-btn.on:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:4px;height:4px;border-radius:50%;background:var(--green)}.repeat-one{position:absolute;top:-4px;right:-4px;font-size:.6rem;font-weight:800}.track-list{padding:0 16px 32px}.track-head,.track-row{display:grid;grid-template-columns:40px 1fr 1fr 120px;align-items:center;gap:12px;padding:8px 16px}.track-head{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:8px}.track-head .col-time,.track-head span:first-child{text-align:right}.track-head span:first-child{text-align:center}.track-row{border-radius:4px;cursor:default;-webkit-user-select:none;user-select:none}.track-row:hover{background:#ffffff0f}.track-row:hover .row-play{display:grid}.track-row:hover .idx{display:none}.track-row:hover .heart{opacity:1}.col-index{text-align:center;color:var(--muted);position:relative;cursor:pointer}.col-index .idx{font-variant-numeric:tabular-nums}.row-play{display:none;place-items:center;color:var(--text)}.row-play svg{width:16px;height:16px}.col-title{display:flex;align-items:center;gap:12px;min-width:0}.tmeta{display:flex;flex-direction:column;gap:2px;min-width:0}.t-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.t-name.green{color:var(--green)}.t-artist{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-album{color:var(--muted);font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.col-time{display:flex;align-items:center;justify-content:flex-end;gap:16px;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.9rem}.heart{color:var(--muted);opacity:0;display:grid;place-items:center;transition:opacity .1s,color .1s,transform .1s}.heart svg{width:16px;height:16px}.heart:hover{color:var(--text);transform:scale(1.1)}.heart.on{color:var(--green);opacity:1}.eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}.eq i{width:3px;background:var(--green);border-radius:1px;animation:eq 1s ease-in-out infinite}.eq i:nth-child(1){height:40%;animation-delay:-.2s}.eq i:nth-child(2){height:100%;animation-delay:-.5s}.eq i:nth-child(3){height:60%;animation-delay:0s}@keyframes eq{0%,to{transform:scaleY(.3)}50%{transform:scaleY(1)}}.hint{color:var(--muted);font-size:.85rem;padding:0 32px 24px}.now-bar{height:var(--bar-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;gap:16px}.np-left{display:flex;align-items:center;gap:14px;min-width:0}.np-meta{display:flex;flex-direction:column;gap:3px;min-width:0}.np-title{font-size:.9rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-artist{color:var(--muted);font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.np-left .heart{opacity:1}.np-center{display:flex;flex-direction:column;align-items:center;gap:8px;width:min(45vw,520px)}.np-buttons{display:flex;align-items:center;gap:20px}.seek{display:flex;align-items:center;gap:10px;width:100%}.time{color:var(--muted);font-size:.7rem;font-variant-numeric:tabular-nums;min-width:36px;text-align:center}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;border-radius:2px;flex:1;background:linear-gradient(to right,var(--text) var(--pct, 0%),#4d4d4d var(--pct, 0%));cursor:pointer}input[type=range]:hover{background:linear-gradient(to right,var(--green) var(--pct, 0%),#4d4d4d var(--pct, 0%))}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:#fff;opacity:0;transition:opacity .1s}input[type=range]:hover::-webkit-slider-thumb{opacity:1}input[type=range]::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:#fff}input[type=range]:disabled{opacity:.5;cursor:not-allowed}.np-right{display:flex;align-items:center;justify-content:flex-end;gap:8px}.vol{max-width:120px}.np-open{display:flex;align-items:center;gap:14px;min-width:0;padding:4px;margin:-4px;border-radius:8px;text-align:left;position:relative}.np-open:hover{background:#ffffff0f}.np-open .np-title{text-decoration:none}.np-open:hover .np-title{text-decoration:underline}.np-expand{color:var(--muted);display:grid;place-items:center;opacity:0;transition:opacity .1s}.np-expand svg{width:16px;height:16px}.np-open:hover .np-expand{opacity:1}.now-screen{flex:1;min-height:0;border-radius:var(--radius);background:linear-gradient(180deg,var(--amb) 0%,color-mix(in srgb,var(--amb) 55%,#0a0a0a) 45%,#0a0a0a 100%);display:flex;flex-direction:column;overflow:hidden;animation:ns-rise .28s ease}@keyframes ns-rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.ns-top{display:grid;grid-template-columns:40px 1fr 40px;align-items:center;padding:20px 24px;flex-shrink:0}.ns-context{text-align:center;font-size:.8rem;font-weight:700;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ns-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:var(--text)}.ns-close svg{width:26px;height:26px}.ns-close:hover{background:#00000040}.ns-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:12px 32px 40px}.cover.ns-art{width:min(46vh,60vw,440px);height:min(46vh,60vw,440px);border-radius:10px;box-shadow:0 16px 60px #0000008c}.ns-meta{text-align:center;max-width:90%}.ns-meta h2{font-size:clamp(1.6rem,4vw,2.6rem);font-weight:800;letter-spacing:-1px;line-height:1.05}.ns-meta p{color:#ffffffb8;font-size:1rem;margin-top:8px}@media (max-width: 860px){.grid{grid-template-columns:1fr}.sidebar,.col-album,.track-head .col-album{display:none}.track-head,.track-row{grid-template-columns:32px 1fr 100px}.np-right{display:none}.np-center{width:55vw}.cover.xl{width:140px;height:140px}}