/* nx-kit Tier B · music */
.nx-cover { --h: 280; display: block; width: 100%; height: 100%; border-radius: inherit; background: radial-gradient(120% 90% at 20% 15%, hsl(calc(var(--h) + 40) 90% 70%), transparent 55%), radial-gradient(90% 90% at 85% 85%, hsl(calc(var(--h) - 30) 85% 45%), transparent 60%), hsl(var(--h) 60% 22%); }

/* Now playing */
.nx-np { position: relative; display: grid; grid-template-columns: 2.6rem 1fr auto; grid-template-areas: "art meta ctl"; align-items: center; gap: .75rem; width: min(22rem, 100%); padding: .5rem .6rem .5rem .5rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text) 7%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent), 0 12px 30px rgba(0, 0, 0, .25); cursor: pointer; overflow: hidden; }
.nx-np-art { grid-area: art; width: 2.6rem; height: 2.6rem; border-radius: 10px; overflow: hidden; transition: border-radius .4s; }
.nx-np-meta { grid-area: meta; min-width: 0; }
.nx-np-meta strong, .nx-np-meta small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nx-np-meta small { color: var(--muted); font-size: .78rem; }
.nx-np-ctl { grid-area: ctl; display: flex; align-items: center; gap: .15rem; }
.nx-np-ctl button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 999px; color: var(--text); transition: background-color .15s, transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.nx-np-ctl button:hover { background: color-mix(in srgb, var(--text) 10%, transparent); }
.nx-np-ctl button:active { transform: scale(.88); }
.nx-np-ctl svg { width: 1.05rem; height: 1.05rem; }
.nx-np-prev, .nx-np-next { display: none !important; }
.nx-np-bar, .nx-np-times { display: none; }
.nx-np.is-open { grid-template-columns: 1fr; grid-template-areas: "art" "meta" "bar" "times" "ctl"; gap: .55rem; padding: 1rem; cursor: default; }
.nx-np.is-open .nx-np-art { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; cursor: pointer; }
.nx-np.is-open .nx-np-meta strong { font-size: 1.05rem; }
.nx-np.is-open .nx-np-bar { grid-area: bar; display: block; height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--text) 14%, transparent); cursor: pointer; overflow: hidden; }
.nx-np-bar i { display: block; height: 100%; width: 0; background: var(--text); border-radius: inherit; }
.nx-np.is-open .nx-np-times { grid-area: times; display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.nx-np.is-open .nx-np-ctl { justify-content: center; gap: 1rem; }
.nx-np.is-open .nx-np-prev, .nx-np.is-open .nx-np-next { display: grid !important; }
.nx-np.is-open .nx-np-play { width: 3rem; height: 3rem; background: var(--text); color: var(--bg); }
.nx-np.is-open .nx-np-play:hover { background: var(--text); }
.nx-np > * { animation: nx-np-fade .35s ease both; }
@keyframes nx-np-fade { from { opacity: .3; } }

/* Islands */
.nx-island { display: inline-block; max-width: 100%; padding: .45rem .55rem; border-radius: 999px; background: #050505; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .06); cursor: pointer; overflow: hidden; outline: none; transition: border-radius .45s cubic-bezier(.3, 1.2, .5, 1); }
.nx-island:focus-visible { box-shadow: 0 0 0 2px var(--purple); }
.nx-island-full { display: none; }
.nx-island.is-open { border-radius: 26px; padding: 1rem 1.1rem; width: min(21rem, 100%); }
.nx-island.is-open .nx-island-mini { display: none; }
.nx-island.is-open .nx-island-full { display: block; animation: nx-island-in .4s .08s both cubic-bezier(.2, .8, .2, 1); }
@keyframes nx-island-in { from { opacity: 0; filter: blur(6px); transform: scale(.96); } }
.nx-island-mini { display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-weight: 700; font-size: .85rem; }
.nx-island-mini .nx-cover, .nx-island-dot { width: 1.6rem; height: 1.6rem; border-radius: 999px; flex: 0 0 auto; }
.nx-island-dot { display: grid; place-items: center; background: #22c55e; color: #04130a; }
.nx-island-dot svg { width: .9rem; height: .9rem; }
.nx-island-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: .9rem; margin-left: .3rem; }
.nx-island-bars i { width: 3px; border-radius: 2px; background: #a78bfa; animation: nx-eq 1s ease-in-out infinite; }
.nx-island-bars i:nth-child(2) { animation-delay: -.3s; } .nx-island-bars i:nth-child(3) { animation-delay: -.6s; } .nx-island-bars i:nth-child(4) { animation-delay: -.15s; }
.nx-island-row { display: flex; align-items: center; gap: .8rem; }
.nx-island-row .nx-cover { width: 3.4rem; height: 3.4rem; border-radius: 12px; flex: 0 0 auto; }
.nx-island-row small, .nx-island-full small { color: rgba(255, 255, 255, .55); display: block; }
.nx-island-actions { display: flex; justify-content: space-between; gap: .6rem; margin-top: .9rem; }
.nx-island-actions button { flex: 1; display: grid; place-items: center; height: 2.5rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; font-size: .82rem; }
.nx-island-actions button.is-red { background: #ef4444; }
.nx-island-actions button.is-green { background: #22c55e; }
.nx-island-route { position: relative; display: flex; justify-content: space-between; align-items: center; margin-top: .9rem; font-weight: 800; font-size: 1.3rem; }
.nx-island-route::before { content: ""; position: absolute; left: 3.5rem; right: 3.5rem; top: 50%; border-top: 2px dashed rgba(255, 255, 255, .25); }
.nx-island-route i { position: absolute; left: 3.5rem; top: 50%; translate: 0 -50%; font-style: normal; animation: nx-fly 6s linear infinite; }
@keyframes nx-fly { to { left: calc(100% - 4.5rem); } }
.nx-island-progress { margin-top: .9rem; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.nx-island-progress i { display: block; height: 100%; width: 62%; background: #fff; border-radius: inherit; }

/* Simple player */
.nx-sp { position: relative; width: min(22rem, 100%); aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: #000; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); }
.nx-sp-film { --h: 210; position: absolute; inset: 0; background: radial-gradient(60% 80% at 30% 30%, hsl(calc(var(--h) + 30) 80% 55% / .9), transparent), radial-gradient(70% 70% at 80% 70%, hsl(calc(var(--h) - 40) 80% 45%), transparent), hsl(var(--h) 50% 12%); background-size: 160% 160%; cursor: pointer; }
.nx-sp.is-playing .nx-sp-film { animation: nx-film 9s ease-in-out infinite alternate; }
@keyframes nx-film { to { background-position: 100% 100%; } }
.nx-sp-btn { position: absolute; left: .8rem; bottom: 1.4rem; width: 2.6rem; height: 2.6rem; border-radius: 999px; display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: #000; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1); }
.nx-sp-btn:active { transform: scale(.9); }
/* Pause folds into play: two bars, the second tips into the triangle. */
.nx-sp-pp { position: relative; width: 14px; height: 15px; }
.nx-sp-pp i { position: absolute; top: 0; width: 5px; height: 100%; background: currentColor; border-radius: 1px; transition: clip-path .35s cubic-bezier(.3, 1.2, .5, 1), width .35s cubic-bezier(.3, 1.2, .5, 1), left .35s cubic-bezier(.3, 1.2, .5, 1); }
.nx-sp-pp i:first-child { left: 2px; width: 7px; clip-path: polygon(0 0, 100% 25%, 100% 75%, 0 100%); }
.nx-sp-pp i:last-child { left: 8px; width: 7px; clip-path: polygon(0 25%, 100% 50%, 100% 50%, 0 75%); }
.nx-sp.is-playing .nx-sp-pp i:first-child { left: 0; width: 5px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.nx-sp.is-playing .nx-sp-pp i:last-child { left: 9px; width: 5px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.nx-sp-line { position: absolute; left: 4rem; right: 3.8rem; bottom: 2.55rem; height: 18px; display: flex; align-items: center; cursor: pointer; touch-action: none; }
.nx-sp-line::before { content: ""; position: absolute; left: 0; right: 0; height: 3px; border-radius: 9px; background: rgba(255, 255, 255, .3); transition: height .2s; }
.nx-sp-line i { position: relative; height: 3px; width: 0; border-radius: 9px; background: #fff; transition: height .2s; }
.nx-sp-line:hover::before, .nx-sp-line:hover i, .nx-sp-line.is-scrub::before, .nx-sp-line.is-scrub i { height: 7px; }
.nx-sp-time { position: absolute; right: .9rem; bottom: 2.25rem; color: #fff; font: 700 .75rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* Time scrubber */
.nx-ts { display: grid; justify-items: center; gap: .6rem; width: min(22rem, 100%); user-select: none; }
.nx-ts-out { font: 800 2rem/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.nx-ts-track { position: relative; width: 100%; height: 3.4rem; overflow: hidden; cursor: grab; touch-action: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); mask-image: linear-gradient(90deg, transparent, #000 25%, #000 75%, transparent); }
.nx-ts.is-held .nx-ts-track { cursor: grabbing; }
.nx-ts-ruler { position: absolute; left: 0; top: 0; display: flex; height: 100%; will-change: transform; }
.nx-ts-ruler i { position: relative; flex: 0 0 14px; height: 100%; }
.nx-ts-ruler i::before { content: ""; position: absolute; left: 0; top: .6rem; width: 2px; height: .8rem; border-radius: 2px; background: color-mix(in srgb, var(--text) 28%, transparent); translate: -1px 0; }
.nx-ts-ruler i.is-hour::before { height: 1.35rem; top: .35rem; background: color-mix(in srgb, var(--text) 60%, transparent); }
.nx-ts-ruler b { position: absolute; left: 0; bottom: .1rem; translate: -50% 0; font-size: .68rem; color: var(--muted); font-weight: 700; }
.nx-ts-needle { position: absolute; left: 50%; top: 0; bottom: 1.1rem; width: 3px; translate: -50% 0; border-radius: 3px; background: var(--purple); box-shadow: 0 0 12px var(--purple); }

/* Voice chat */
.nx-vc { display: inline-block; width: max-content; max-width: 100%; border-radius: 1.4rem; background: color-mix(in srgb, var(--text) 7%, var(--panel)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent); overflow: hidden; }
.nx-vc-pill { display: flex; align-items: center; gap: .6rem; padding: .4rem .9rem .4rem .45rem; font-weight: 700; font-size: .85rem; color: var(--text); white-space: nowrap; }
.nx-vc-faces { display: flex; }
.nx-vc-faces .nx-ava { width: 1.7rem; height: 1.7rem; font-size: .62rem; }
.nx-vc-faces .nx-ava + .nx-ava { margin-left: -.5rem; }
.nx-vc-live { width: .5rem; height: .5rem; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, .6); animation: nx-live 1.6s infinite; }
.nx-vc-room { display: none; padding: 0 .9rem .9rem; width: min(19rem, 80vw); }
.nx-vc.is-open .nx-vc-room { display: block; animation: nx-island-in .35s both; }
.nx-vc.is-open .nx-vc-pill { width: 100%; }
.nx-vc-room header { display: flex; justify-content: space-between; align-items: baseline; padding: .2rem 0 .6rem; border-top: 1px solid color-mix(in srgb, var(--text) 10%, transparent); padding-top: .7rem; }
.nx-vc-room header small { color: var(--muted); font-size: .75rem; }
.nx-vc-room ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.nx-vc-room li { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .88rem; }
.nx-vc-room li .nx-ava { transition: box-shadow .25s; }
.nx-vc-room li.is-talking .nx-ava { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px #22c55e; }
.nx-vc-wave { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; height: 1rem; opacity: 0; transition: opacity .2s; }
.nx-vc-wave b { width: 3px; height: 40%; border-radius: 2px; background: #22c55e; animation: nx-eq .8s ease-in-out infinite; }
.nx-vc-wave b:nth-child(2) { animation-delay: -.25s; } .nx-vc-wave b:nth-child(3) { animation-delay: -.5s; }
.nx-vc-room li.is-talking .nx-vc-wave { opacity: 1; }
.nx-island-bars.is-paused i { animation-play-state: paused; opacity: .5; }
/* Music page: the progress line thickens under the pointer. */
.mu-progress progress { transition: height .2s; }
.mu-progress:hover progress { height: 10px; }
.nx-sp.is-video { width: 100%; aspect-ratio: auto; height: 4.2rem; background: #0b0b0d; } /* bound to a real <video>: just the controls bar */
.nx-sp.is-video .nx-sp-film { display: none; }
.nx-sp.is-video .nx-sp-btn { bottom: .8rem; }
.nx-sp.is-video .nx-sp-line { bottom: 1.95rem; }
.nx-sp.is-video .nx-sp-time { bottom: 1.65rem; }